/* StaySaver Day-Use — Surface B (hotel detail). Depends on ssd-discovery.css
   for shared tokens/components. Scoped under .ssd-detail. */


/* Single source of truth for the global fixed-header height. JS measures the
   real header and overwrites this on load + resize; the fallbacks below cover
   the pre-JS paint (no overlap, no CLS). Scoped to the detail page only. */
.ssd-detail { --ssd-header-h: 76px; --ssd-header-gap: 20px; padding-bottom: 90px; }

/* Hero gallery — cleared from the fixed header; light bg; rounded */
.ssd-d-hero {
  background: var(--ssd-page);
  padding: calc(var(--ssd-header-h) + var(--ssd-header-gap)) 0 10px;
}

/* Anchor targets (View map, tab panels) land below the header, not under it */
.ssd-d-panel,
#ssd-d-location {
  scroll-margin-top: calc(var(--ssd-header-h) + var(--ssd-header-gap));
}
.ssd-d-gallery {
  display: flex; gap: 8px; height: 400px;
  max-width: 1120px; margin: 0 auto; padding: 0 16px;
}
.ssd-d-gallery__main {
  flex: 1 1 64%; min-width: 0; max-width: 100%; height: 100%; object-fit: cover;
  display: block; border-radius: 14px; background: #e9edf1;
}
/* main image fills the row when there are no thumbnails */
.ssd-d-gallery__main:only-child { flex-basis: 100%; }
.ssd-d-gallery__grid {
  flex: 1 1 36%; min-width: 0; display: flex; flex-direction: column; gap: 8px;
}
.ssd-d-gallery__grid img {
  width: 100%; flex: 1 1 0; min-height: 0; object-fit: cover;
  border-radius: 10px; background: #e9edf1; display: block;
}

/* "View all photos" button */
.ssd-d-gallery { position: relative; }
.ssd-gallery-all {
  position: absolute; right: 28px; bottom: 16px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--ssd-border); border-radius: 999px;
  padding: 9px 16px; font-weight: 600; font-size: 13px; cursor: pointer;
  box-shadow: 0 2px 12px rgba(0,0,0,.2);
}
.ssd-gallery-all:hover { background: #f4f5f7; }

/* Lightbox */
.ssd-lb {
  position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.92);
  display: flex; align-items: center; justify-content: center;
}
.ssd-lb__img { max-width: 92vw; max-height: 86vh; object-fit: contain; border-radius: 6px; }
.ssd-lb__close {
  position: absolute; top: 18px; right: 22px; background: transparent; border: 0;
  color: #fff; font-size: 34px; line-height: 1; cursor: pointer;
}
.ssd-lb__count {
  position: absolute; top: 24px; left: 50%; transform: translateX(-50%);
  color: #fff; font-size: 14px; opacity: .85;
}
.ssd-lb__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.14); border: 0; color: #fff;
  width: 52px; height: 52px; border-radius: 50%; font-size: 30px; cursor: pointer;
}
.ssd-lb__nav:hover { background: rgba(255,255,255,.28); }
.ssd-lb__prev { left: 18px; }
.ssd-lb__next { right: 18px; }
@media (max-width: 575px) {
  .ssd-lb__nav { width: 44px; height: 44px; font-size: 26px; }
  .ssd-gallery-all { right: 16px; bottom: 12px; }
}

/* Layout */
.ssd-d-wrap { display: flex; gap: 28px; align-items: flex-start; padding-top: 24px; }
.ssd-d-main { flex: 1 1 auto; min-width: 0; }
.ssd-d-side { flex: 0 0 320px; position: sticky; top: calc(var(--ssd-header-h) + 16px); }

/* Header */
.ssd-d-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.ssd-d-name { font-size: 26px; font-weight: 800; margin: 0 0 6px; color: var(--ssd-ink); }
.ssd-d-sub { display: flex; gap: 14px; align-items: center; color: var(--ssd-muted); }
.ssd-d-stars { color: var(--ssd-star); }
.ssd-d-dist { font-weight: 600; color: var(--ssd-slate); }
.ssd-d-actions { display: flex; gap: 8px; align-items: center; }

/* Contact tooltip — names the action, never the number or address. */
.ssd-d-tip { position: relative; }
.ssd-d-tip::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%);
  background: var(--ss-navy); color: #fff;
  font-size: 12px; font-weight: 600; line-height: 1.3;
  padding: 6px 10px; border-radius: 6px; white-space: nowrap;
  opacity: 0; visibility: hidden; transition: opacity .15s;
  pointer-events: none; z-index: 5;
}
.ssd-d-tip::before {
  content: ""; position: absolute; bottom: calc(100% + 3px); left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--ss-navy);
  opacity: 0; visibility: hidden; transition: opacity .15s;
  pointer-events: none; z-index: 5;
}
.ssd-d-tip:hover::after, .ssd-d-tip:hover::before,
.ssd-d-tip:focus-visible::after, .ssd-d-tip:focus-visible::before {
  opacity: 1; visibility: visible;
}

/* Save (favourite) button — anonymous localStorage heart */
.ssd-d-save { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ssd-d-save__heart { width: 16px; height: 16px; display: block; }
.ssd-d-save__heart path { fill: none; stroke: currentColor; stroke-width: 2; }
.ssd-d-save.is-fav { border-color: var(--ssd-danger); color: var(--ssd-danger); }
.ssd-d-save.is-fav .ssd-d-save__heart path { fill: var(--ssd-danger); stroke: var(--ssd-danger); }
/* Saved (red) state must win over the inherited .ssd-btn-ghost navy hover —
   otherwise hovering a saved hotel flips it to navy and the heart clashes. */
.ssd-d-save.is-fav:hover,
.ssd-d-save.is-fav:focus-visible {
  background: rgba(214, 69, 69, .08);
  border-color: var(--ssd-danger);
  color: var(--ssd-danger);
}
.ssd-d-save.is-fav:hover .ssd-d-save__heart path,
.ssd-d-save.is-fav:focus-visible .ssd-d-save__heart path {
  fill: var(--ssd-danger);
  stroke: var(--ssd-danger);
}

/* Tabs */
.ssd-d-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--ssd-border); margin: 22px 0 18px; position: sticky; top: var(--ssd-header-h); background: #fff; z-index: 20; }
.ssd-d-tab { border: 0; background: transparent; padding: 12px 16px; cursor: pointer; font-weight: 600; color: var(--ssd-muted); border-bottom: 3px solid transparent; min-height: 44px; }
.ssd-d-tab.is-active { color: var(--ss-navy, #1e3a5f); border-bottom-color: var(--ss-navy, #1e3a5f); }
.ssd-d-panel { animation: ssd-fade .2s ease; }
@keyframes ssd-fade { from { opacity: 0 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .ssd-d-panel { animation: none; } }

/* Policy + desc */
.ssd-d-policy { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--ssd-border); border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; }
.ssd-d-desc { color: var(--ssd-ink); line-height: 1.65; margin-bottom: 20px; }
.ssd-d-h2 { font-size: 19px; font-weight: 700; margin: 22px 0 12px; }

/* Date bar */
.ssd-d-datebar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ssd-d-datenav { width: 44px; height: 44px; border: 1px solid var(--ssd-border); background: #fff; border-radius: 8px; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.ssd-d-datenav:hover:not(:disabled) { border-color: var(--ss-navy, #1e3a5f); color: var(--ss-navy, #1e3a5f); background: var(--ss-navy-soft, #dde8f5); }
.ssd-d-datenav:focus-visible { outline: 2px solid var(--ssd-btn); outline-offset: 2px; }
.ssd-d-datenav:disabled { opacity: .4; cursor: not-allowed; }
.ssd-d-datelabel { font-weight: 700; color: var(--ssd-slate); min-width: 120px; text-align: center; }

.ssd-d-nextfind { margin-top: 12px; color: var(--ssd-muted); font-size: 14px; }

/* Room cards (dayuse-style) */
.ssd-d-rooms { display: flex; flex-direction: column; gap: 14px; }
.ssd-room {
  border: 1px solid var(--ssd-border); border-radius: 14px; padding: 16px 18px;
  background: #fff; box-shadow: var(--ssd-card-shadow);
  transition: box-shadow .18s, border-color .18s;
}
.ssd-room:hover { box-shadow: 0 6px 22px rgba(0,0,0,.12); border-color: #d9dce1; }
.ssd-room__head { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.ssd-room__name { font-size: 17px; font-weight: 700; margin: 0; color: var(--ssd-ink); }
.ssd-room__meta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 8px 0 14px; }
.ssd-room__metaitem { color: var(--ssd-ink); font-size: 13.5px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.ssd-room__metaitem i { color: var(--ssd-accent); }

/* ---- overnight meals: breakfast / lunch / dinner, any mix ---- */
.ssd-meals {
  display: flex; flex-direction: column; gap: 6px;
  margin: 0 0 12px; padding: 0; border: 0; min-width: 0;
}
.ssd-meals__title { font-size: 12.5px; font-weight: 700; color: var(--ssd-muted); padding: 0; margin-bottom: 2px; }
.ssd-meal {
  display: flex; align-items: center; gap: 10px; min-height: 44px;
  padding: 8px 13px; cursor: pointer;
  border: 1.5px solid var(--ssd-border); border-radius: 10px;
  background: var(--ssd-white); transition: border-color .15s, background .15s;
}
.ssd-meal:hover { border-color: var(--ssd-accent); }
.ssd-meal.is-selected {
  border-color: var(--ssd-accent); background: var(--ss-navy-soft);
}
.ssd-meal__check { width: 18px; height: 18px; margin: 0; accent-color: var(--ssd-accent); }
.ssd-meal:focus-within { outline: 2px solid var(--ssd-btn); outline-offset: 2px; }
.ssd-meal__label { font-weight: 600; font-size: 13.5px; color: var(--ssd-ink); }
.ssd-meal__price {
  margin-left: auto; font-weight: 700; font-size: 13.5px; color: var(--ssd-ink);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* ---- selectable rate tiles (Pay at hotel / Pay online) ---- */
.ssd-room__rates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.ssd-room__rates:has(.ssd-rate:only-child) { grid-template-columns: 1fr; }
.ssd-rate {
  display: flex; flex-direction: column; gap: 3px; text-align: left; cursor: pointer;
  border: 1.5px solid var(--ssd-border); border-radius: 12px; padding: 11px 13px;
  background: #fff; transition: border-color .15s, box-shadow .15s, background .15s;
}
.ssd-rate:hover { border-color: var(--ss-navy, #1e3a5f); }
.ssd-rate.is-selected {
  border-color: var(--ss-navy, #1e3a5f); background: var(--ss-navy-soft, #dde8f5);
  box-shadow: 0 0 0 3px var(--ss-navy-soft, #dde8f5);
}
.ssd-rate:focus-visible { outline: 2px solid var(--ssd-btn); outline-offset: 2px; }

/* Sold out: the prices stay readable — they are what the room costs
   when it comes back — but nothing on the card invites a booking. */
.ssd-rate:disabled { cursor: default; opacity: .55; }
.ssd-rate:disabled:hover { border-color: var(--ssd-border); }
.ssd-room.is-soldout .ssd-room__cancel { color: var(--ssd-muted); }
.ssd-rate__top { display: flex; align-items: center; gap: 8px; }
.ssd-rate__label { font-weight: 700; font-size: 13.5px; color: var(--ssd-ink); }
.ssd-rate__badge {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  background: var(--ssd-ok); color: #fff; padding: 2px 7px; border-radius: 999px;
}
.ssd-rate__price { font-size: 18px; font-weight: 800; color: var(--ssd-ink); }
.ssd-rate__note { font-size: 11.5px; color: var(--ssd-muted); line-height: 1.3; }

/* ---- total payable + breakdown ---- */
.ssd-room__total { margin-bottom: 12px; }
.ssd-room__totalbtn {
  display: inline-flex; align-items: center; gap: 6px; border: 0; background: none;
  padding: 0; cursor: pointer; color: var(--ssd-ink); font-size: 14px; font-weight: 600;
}
.ssd-room__totalbtn:disabled { cursor: default; }
.ssd-room__totalcaret { color: var(--ssd-muted); transition: transform .15s; }
.ssd-room__totalbtn[aria-expanded="true"] .ssd-room__totalcaret { transform: rotate(180deg); }
.ssd-room__breakdown { margin-top: 8px; border: 1px solid var(--ssd-border); border-radius: 10px; padding: 10px 12px; background: var(--ssd-page); }
.ssd-bd__row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 3px 0; color: var(--ssd-muted); }
.ssd-bd__row span:last-child { color: var(--ssd-ink); }
.ssd-bd__row--total { border-top: 1px solid var(--ssd-border); margin-top: 4px; padding-top: 7px; font-weight: 700; }
.ssd-bd__row--total span { color: var(--ssd-ink); }

.ssd-room__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--ssd-border); padding-top: 12px; }
.ssd-room__cancel { font-size: 12.5px; color: var(--ssd-ok); font-weight: 600; display: inline-flex; align-items: center; }

/* Amenities */
.ssd-d-amen { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.ssd-d-amen i { color: var(--ssd-ok); }

/* Reviews */
.ssd-d-rev-summary { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.ssd-d-rev-score { font-size: 34px; font-weight: 800; color: var(--ssd-ink); line-height: 1; }
.ssd-d-rev-stars { color: var(--ssd-star); font-size: 16px; }
.ssd-d-rev-count { color: var(--ssd-muted); font-size: 13px; }
.ssd-d-rev-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.ssd-d-reviews { display: flex; flex-direction: column; gap: 14px; }
.ssd-rev { border: 1px solid var(--ssd-border); border-radius: 12px; padding: 14px 16px; background: #fff; }
.ssd-rev__head { display: flex; align-items: center; gap: 12px; }
.ssd-rev__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #e9edf1; flex-shrink: 0; }
.ssd-rev__avatar--initial {
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 17px; line-height: 1;
  text-transform: uppercase; user-select: none;
}
.ssd-rev__who { flex: 1; min-width: 0; }
.ssd-rev__name { font-weight: 700; color: var(--ssd-ink); }
.ssd-rev__date { font-size: 12px; color: var(--ssd-muted); }
.ssd-rev__stars { color: var(--ssd-star); white-space: nowrap; }
.ssd-rev__comment { margin: 10px 0 0; color: var(--ssd-ink); line-height: 1.55; }

/* Location */
.ssd-d-addr { color: var(--ssd-ink); margin-bottom: 12px; }
.ssd-d-map { width: 100%; height: 320px; border-radius: 12px; background: #eef1f4; border: 1px solid var(--ssd-border); }
.ssd-d-mapcta { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
/* match the page's button language (.ssd-btn-app / .ssd-btn-ghost = 8px radius,
   base navy): the primary was a 25px pill in navy-hover, the secondary an 8px
   rect — unify both to 8px + base navy + centred icons. */
.ssd-d-mapcta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
}
.ssd-d-mapcta a i { font-size: 15px; line-height: 1; }
.ssd-d-mapcta a.btn_1 {                 /* Get Directions (primary) */
  background: var(--ss-navy);
  border: 1px solid var(--ss-navy);
}
.ssd-d-mapcta a.btn_1:hover,
.ssd-d-mapcta a.btn_1:focus { background: var(--ss-navy-hover); border-color: var(--ss-navy-hover); }
.ssd-d-mapcta .ssd-btn-ghost { border-color: var(--ss-navy); }   /* match navy */

/* Side booking card */
.ssd-d-bookcard { border: 1px solid var(--ssd-border); border-radius: 14px; padding: 18px; box-shadow: var(--ssd-card-shadow); text-align: center; }
.ssd-d-price { font-size: 22px; font-weight: 800; color: var(--ssd-ink); margin-bottom: 12px; }
.ssd-d-note { font-size: 12px; color: var(--ssd-muted); margin-top: 10px; }

/* Sticky bar (mobile) */
.ssd-d-stickybar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; background: #fff; border-top: 1px solid var(--ssd-border); padding: 10px 14px; align-items: center; justify-content: space-between; gap: 12px; box-shadow: 0 -2px 14px rgba(0,0,0,.1); }
.ssd-d-stickybar .ssd-btn-app { flex: 1; }

/* ============ RESPONSIVE — 6 tiers ============ */
@media (max-width: 1199px) { .ssd-d-side { flex-basis: 280px; } }
@media (max-width: 991px) {
  .ssd-d-wrap { flex-direction: column; }
  .ssd-d-side { display: none; }            /* replaced by sticky bar */
  .ssd-d-stickybar { display: flex; }
  .ssd-detail { --ssd-header-h: 76px; }    /* JS overwrites */
  .ssd-d-gallery { height: 320px; }
}
@media (max-width: 768px) {
  .ssd-detail { --ssd-header-h: 72px; }
  .ssd-d-gallery { flex-direction: column; height: auto; }
  .ssd-d-gallery__main { width: 100%; height: 230px; }
  .ssd-d-gallery__grid { flex-direction: row; height: 84px; }
  .ssd-d-amen { grid-template-columns: repeat(2,1fr); }
  .ssd-d-name { font-size: 22px; }
  .ssd-d-tab { font-size: 16px; }
}
@media (max-width: 575px) {
  .ssd-detail { --ssd-header-h: 66px; }
  .ssd-d-gallery__grid { display: none; }   /* main image only on phones */
  .ssd-d-gallery__main { border-radius: 12px; }
}
@media (max-width: 575px) {
  .ssd-d-tabs { overflow-x: auto; }
  .ssd-room__rates { grid-template-columns: 1fr; }   /* stack rate tiles */
  .ssd-room__foot { flex-direction: column; align-items: stretch; gap: 8px; }
  .ssd-room__foot .ssd-btn-app { width: 100%; }
  .ssd-room__cancel { justify-content: center; }
  .ssd-d-mapcta a { flex: 1; text-align: center; }
}
@media (max-width: 480px) {
  .ssd-d-amen { grid-template-columns: 1fr; }
  .ssd-d-map { height: 240px; }
}
@media (max-width: 400px) {
  .ssd-d-name { font-size: 20px; }
  .ssd-d-head { gap: 10px; }
}

/* ---------- Strike-through price on the detail page ----------
   The shared .ssd-price block lives in ssd-discovery.css (loaded first on
   this page). Only the host-specific sizing belongs here. */

/* Header "from" price — the struck original must not out-weigh the live
   number, so it stays small and muted while .ssd-now inherits the host. */
.ssd-d-price.ssd-price { flex-wrap: wrap; }

/* Side booking card: same treatment as the rate tiles — struck value on
   line 1 with the "from" label, price + marker on line 2. Done with a
   flex break rather than a column, so "from" stays attached to the value
   it qualifies instead of orphaning onto a line of its own.

   Deliberately NOT applied to the mobile sticky bar (same .ssd-d-price
   class, no --stack): that bar sits beside the Book button, and a
   two-line price would grow the fixed bar and eat the viewport. */
.ssd-d-price--stack.ssd-price { row-gap: 1px; }
.ssd-d-price--stack .ssd-pricegrp { flex-basis: 100%; }

/* Rate tile — struck value on its own line, price + marker on the next.
   The tile is a narrow column and the price is the thing being compared, so
   it gets a line to itself rather than sharing one with the old price. Only
   the inner price row changes; the label, badge and note are untouched. */
.ssd-rate__price.ssd-price {
  flex-direction: column;
  align-items: flex-start;
  row-gap: 1px;
}
.ssd-rate__price .ssd-was { font-size: 12.5px; }

/* A tile already carries the green "Best value" badge at its top. Keeping
   the saving chip neutral (--ssd-section) stops the two competing — one
   badge per tile earns the colour. */

/* ---- responsive: 6 tiers ---- */
@media (max-width: 1199px) { .ssd-rate__price .ssd-was { font-size: 12px; } }
@media (max-width: 991px)  { .ssd-d-price.ssd-price { gap: 5px; } }
@media (max-width: 768px)  { .ssd-rate__price.ssd-price { row-gap: 2px; } }
@media (max-width: 575px)  { .ssd-rate__price .ssd-was { font-size: 11.5px; } }
@media (max-width: 480px)  { .ssd-d-price .ssd-off { font-size: 9.5px; } }
@media (max-width: 400px)  {
  /* Narrowest phones: if either part has to go it must be the CHIP, never
     the struck original. "10% off" with no reference price is a discount
     claim the guest cannot check; the strike alone always reads. */
  .ssd-d-price .ssd-off { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   OFFER STRIP — advertised promo codes (Phase 2 §14)
   Deliberately unlike .ssd-price: a code is not the price until the app
   validates it, so it must never read as a struck rate. Dashed gold vs
   the solid slate of a real discount.
   ══════════════════════════════════════════════════════════════════════ */
.ssd-offers { margin: 0 0 14px; }

.ssd-offer {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border: 1.5px dashed var(--ss-gold, #c1a364);
  border-radius: var(--ssd-radius);
  background: rgba(193, 163, 100, 0.08);
}
.ssd-offer + .ssd-offer { margin-top: 10px; }

.ssd-offer__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--ssd-white);
  border: 1px solid rgba(193, 163, 100, 0.35);
  color: var(--ss-gold, #c1a364);
}
.ssd-offer__icon svg { width: 19px; height: 19px; }

.ssd-offer__text { flex: 1; min-width: 190px; }

.ssd-offer__headline {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--ssd-ink);
}
.ssd-offer__terms {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ssd-muted);
}

.ssd-offer__code {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 9px 13px;
  border: 1.5px dashed var(--ss-gold, #c1a364);
  border-radius: 10px;
  background: var(--ssd-white);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.ssd-offer__code:hover { background: rgba(193, 163, 100, 0.10); }
.ssd-offer__code.is-copied { border-color: var(--ssd-ok); }

.ssd-offer__code-text {
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: var(--ssd-ink);
}
.ssd-offer__copy {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ssd-muted);
}
.ssd-offer__code.is-copied .ssd-offer__copy { color: var(--ssd-ok); }

.ssd-offers__note {
  margin: 9px 0 0;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ssd-muted);
}

/* Room-card hint — muted, and outside the price block on purpose. */
.ssd-room__codehint {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ss-gold, #c1a364);
}

@media (max-width: 1199px) {
  .ssd-offer__headline { font-size: 13.5px; }
}
@media (max-width: 991px) {
  .ssd-offer { gap: 12px; padding: 13px 14px; }
}
@media (max-width: 768px) {
  .ssd-offer__text { min-width: 100%; order: 2; }
  .ssd-offer__code { order: 3; width: 100%; justify-content: space-between; }
  .ssd-offer__icon { order: 1; }
}
@media (max-width: 575px) {
  .ssd-offer { padding: 12px 13px; }
  .ssd-offer__terms { font-size: 11.5px; }
}
@media (max-width: 480px) {
  .ssd-offer__headline { font-size: 13px; }
  .ssd-offer__code-text { font-size: 13px; letter-spacing: 0.4px; }
}
@media (max-width: 400px) {
  .ssd-offer { gap: 10px; }
  .ssd-offer__icon { width: 34px; height: 34px; }
  .ssd-offers__note { font-size: 11px; }
}