/*
 * s22-widget.css — Stay22 single-property embed (image + live price + deeplink).
 *
 * Framework-agnostic. The defaults below mirror the Bananarchy site design
 * system 1:1 so the widget feels native — same neobrutalist language as the
 * rest of the site: paper-yellow cards, 3px ink borders, hard offset shadows
 * in saffron/ink, DM Mono labels, Bagel Fat One sticker buttons. Override any
 * var in :root to re-theme for another brand/project.
 *
 * Geometry is uniform by design:
 *   - one standard layout (wide on desktop, stacked on mobile via breakpoint)
 *   - consistent image crop (object-fit cover over a fixed aspect box), so
 *     every card looks identical regardless of the source photo
 *   - reserved heights (measured) so CLS stays ~0 in every state
 *
 * Namespaced under .s22w to avoid collisions.
 */

:root {
  /* Bananarchy design tokens (mirror src/styles/global.css :root) */
  --s22-accent: #ff7a00;          /* --c-saffron */
  --s22-ink: #2b1340;             /* --c-ink */
  --s22-ink-soft: #4a2363;        /* --c-ink-soft */
  --s22-muted: #7a5d8f;
  --s22-paper: #fff0a8;           /* --c-paper card surface */
  --s22-lime: #d9f400;            /* --c-lime stamp/chip ink-on-lime */
  --s22-rose: #ffb3d9;            /* soft rose for chips */
  --s22-surface: #fffdf6;         /* skeleton shimmer light */
  --s22-border: var(--s22-ink);
  --s22-border-w: 3px;            /* --border-thick */
  --s22-radius: 0;                /* site is fully sharp-edged neobrutalist */
  --s22-shadow-card: 5px 5px 0 var(--s22-accent);   /* card: saffron offset */
  --s22-shadow-card-hover: 7px 7px 0 var(--s22-accent);
  --s22-shadow-btn: 4px 4px 0 var(--s22-ink);       /* CTA: ink offset */
  --s22-shadow-btn-hover: 6px 6px 0 var(--s22-ink);
  --s22-shadow-btn-active: 2px 2px 0 var(--s22-ink);
  --s22-font: "Space Grotesk", system-ui, sans-serif;   /* --f-body */
  --s22-font-display: "Bagel Fat One", "Cooper Black", serif; /* --f-display */
  --s22-font-mono: "DM Mono", ui-monospace, monospace;        /* --f-mono */
}

.s22-widget {
  margin: clamp(28px, 4vw, 44px) 0;
  font-family: var(--s22-font);
  color: var(--s22-ink);
}

/* Anti-CLS: reserve the footprint on the CONTAINER only before the card loads,
   so the empty plugin container never causes a shift. Once hydrated the card
   sizes to its content (no min-height on .s22w-card itself). */
.s22-widget { min-height: 545px; }
.s22w-state { min-height: 545px; }
@media (min-width: 560px) {
  .s22-widget[data-layout="wide"] { min-height: 320px; }
  .s22-widget[data-layout="wide"] .s22w-state { min-height: 320px; }
}
/* Once the JS sets data-state="ready", the container shrinks to the card's
   height. The CARD keeps a FIXED height equal to the skeleton's footprint so
   every card in a listicle is pixel-identical — a card without a live price
   (or badges/rating) must not render shorter than its neighbours (2026-08-13:
   A Good Place / One Life were 186px vs 282px on desktop, 460 vs 545 on
   mobile). The body's justify-content: space-between spreads the content to
   fill and the media stretches, so the extra space is absorbed evenly. Names
   are line-clamped to 2 lines, so content never exceeds the fixed height. */
.s22-widget[data-state="ready"] { min-height: 0 !important; }
.s22-widget[data-state="ready"] .s22w-card { height: 545px; }
@media (min-width: 560px) {
  .s22-widget[data-layout="wide"][data-state="ready"] .s22w-card { height: 320px; }
}

.s22-widget[hidden] { display: none; }

/* ============ card — native neobrutalist frame ============ */
.s22w-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--s22-paper);
  border: var(--s22-border-w) solid var(--s22-border);
  border-radius: var(--s22-radius);
  box-shadow: var(--s22-shadow-card);
  overflow: hidden;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.s22w-card:hover { box-shadow: var(--s22-shadow-card-hover); transform: translate(-2px, -2px); }
@media (min-width: 560px) {
  .s22w-card[data-layout="wide"] { flex-direction: row; }
  .s22w-card[data-layout="wide"] .s22w-media { width: 40%; flex: 0 0 40%; }
}

/* media — consistent crop via aspect box + absolutely-filled image */
.s22w-media {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--s22-surface);
  aspect-ratio: 16 / 9;   /* standard 16:9 on mobile — fills card better */
}
.s22w-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 280ms ease;
}
.s22w-media:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .s22w-media img { transition: none; }
  .s22w-media:hover img { transform: none; }
}
@media (min-width: 560px) {
  .s22w-card[data-layout="wide"] .s22w-media { aspect-ratio: auto; align-self: stretch; min-height: 200px; }
}
.s22w-media .s22w-placeholder {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(45deg, var(--s22-paper) 0 12px, var(--s22-surface) 12px 24px);
  color: var(--s22-muted);
  font-family: var(--s22-font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* kind / type badge — native ink/lime stamp overlaid on the photo */
.s22w-kind {
  position: absolute;
  top: 10px; left: 10px;
  padding: 3px 10px;
  background: var(--s22-ink);
  color: var(--s22-lime);
  font-family: var(--s22-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  transform: rotate(-2deg);
}

/* body */
.s22w-body {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 16px 14px;
  min-width: 0;
  border-top: 2px solid var(--s22-ink);
}
@media (min-width: 560px) {
  .s22w-card[data-layout="wide"] .s22w-body {
    padding: 18px 22px 16px;
    border-top: none;
    border-left: 2px solid var(--s22-ink);
  }
}
.s22w-eyebrow {
  margin: 0;
  font-family: var(--s22-font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--s22-ink-soft);
}
.s22w-name {
  margin: 0;
  font-family: var(--s22-font);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.3px;
  color: var(--s22-ink);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
a.s22w-name { text-decoration: none; }
a.s22w-name:hover { color: var(--s22-accent); text-decoration: underline; text-underline-offset: 3px; }

/* rating row */
.s22w-rating { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-size: 13px; }
.s22w-score {
  display: inline-flex; align-items: center;
  padding: 3px 9px;
  background: var(--s22-ink);
  color: var(--s22-lime);
  font-family: var(--s22-font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
}
.s22w-stars { color: var(--s22-accent); letter-spacing: 1px; font-size: 15px; }
.s22w-count { color: var(--s22-muted); font-size: 12px; }

/* badges (free cancellation / instant book) — native chips */
.s22w-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.s22w-badge {
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--s22-font-mono);
  letter-spacing: 0.5px;
  border: 2px solid var(--s22-ink);
  border-left: 4px solid var(--s22-accent);
}
.s22w-badge[data-tone="lime"] { background: var(--s22-lime); color: var(--s22-ink); }
.s22w-badge[data-tone="rose"] { background: var(--s22-rose); color: var(--s22-ink); }

/* neighbourhood / address detail */
.s22w-address {
  margin: 0;
  font-family: var(--s22-font-mono);
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--s22-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* price + CTA footer — stacked on mobile, side-by-side on wide layout */
.s22w-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 2px dashed color-mix(in srgb, var(--s22-ink) 15%, transparent);
}
@media (min-width: 560px) {
  .s22w-card[data-layout="wide"] .s22w-footer {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
  }
}
.s22w-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.s22w-from { font-size: 12px; color: var(--s22-muted); }
.s22w-amount { font-size: 26px; font-weight: 800; color: var(--s22-ink); font-family: var(--s22-font-display); letter-spacing: -0.5px; }
.s22w-per { font-size: 11px; color: var(--s22-muted); font-family: var(--s22-font-mono); letter-spacing: 0.5px; }
.s22w-total { font-size: 11px; font-family: var(--s22-font-mono); color: var(--s22-ink-soft); }
.s22w-total::before { content: "\00b7  "; }

/* CTA — matches the site's Join button (.btn--saffron + body font).
   Explicit color/decoration overrides beat .article-body a { color: rose; text-decoration: underline }
   in global.css without needing !important — same specificity, later source order wins. */
.s22w-cta,
.s22w-cta:link,
.s22w-cta:visited {
  display: flex; align-items: center; justify-content: center;
  width: 100%; box-sizing: border-box;   /* full-width in stacked mobile footer */
  padding: 13px 24px;
  background: var(--s22-accent);
  color: var(--s22-ink);
  font-family: var(--s22-font);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border: var(--s22-border-w) solid var(--s22-border);
  box-shadow: var(--s22-shadow-btn);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
@media (min-width: 560px) {
  .s22w-card[data-layout="wide"] .s22w-cta,
  .s22w-card[data-layout="wide"] .s22w-cta:link,
  .s22w-card[data-layout="wide"] .s22w-cta:visited {
    width: auto; min-width: 160px;
  }
}
.s22w-cta:hover, .s22w-cta:focus-visible { color: var(--s22-ink); text-decoration: none; transform: translate(-2px, -2px); box-shadow: var(--s22-shadow-btn-hover); }
.s22w-cta:active { color: var(--s22-ink); text-decoration: none; transform: translate(2px, 2px); box-shadow: var(--s22-shadow-btn-active); }

/* ============ states ============ */

/* Skeleton reuses the real card structure so its footprint == the card's. */
.s22w-card--skeleton { pointer-events: none; }
.s22w-card--skeleton:hover { transform: none; box-shadow: var(--s22-shadow-card); }
.s22w-sk-media {
  background: linear-gradient(100deg, var(--s22-paper) 30%, var(--s22-surface) 50%, var(--s22-paper) 70%);
  background-size: 200% 100%;
  animation: s22w-shimmer 1.1s infinite linear;
}
.s22w-card--skeleton .s22w-body { gap: 8px; }
.s22w-sk-line {
  display: block;
  height: 12px;
  background: linear-gradient(100deg, var(--s22-paper) 30%, var(--s22-surface) 50%, var(--s22-paper) 70%);
  background-size: 200% 100%;
  animation: s22w-shimmer 1.1s infinite linear;
}
.s22w-sk-eyebrow { width: 34%; height: 10px; }
.s22w-sk-name { width: 72%; height: 18px; }
.s22w-sk-rating { width: 46%; }
.s22w-sk-badges { width: 62%; }
.s22w-sk-price { width: 56%; height: 20px; }
.s22w-sk-cta { width: 46%; height: 36px; align-self: flex-end; }
.s22w-sk-status {
  margin: 2px 0 0;
  font-family: var(--s22-font);
  font-size: 12px;
  letter-spacing: 0.3px;
  color: var(--s22-ink-soft);
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .s22w-sk-media, .s22w-sk-line { animation: none; }
}

@keyframes s22w-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* error / empty / no-price */
.s22w-state {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px;
  background: var(--s22-paper);
  border: var(--s22-border-w) dashed var(--s22-ink-soft);
  border-radius: var(--s22-radius);
  box-shadow: var(--s22-shadow-card);
  color: var(--s22-ink-soft);
  font-size: 14px;
  text-align: center;
}
.s22w-state button {
  padding: 7px 14px;
  background: var(--s22-accent);
  color: var(--s22-ink);
  font-family: var(--s22-font-mono);
  font-weight: 700;
  border: var(--s22-border-w) solid var(--s22-ink);
  box-shadow: 3px 3px 0 var(--s22-ink);
  cursor: pointer;
}
.s22w-state button:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--s22-ink); }

/* ==========================================================================
   VARIANT THEMES
   Each variant is scoped to [data-variant="x"] on .s22w-card so no existing
   cards (no data-variant attr) are affected.
   ========================================================================== */

/* ── Scrim overlay — shared by variants A and C ──────────────────────────── */
/* .s22w-scrim sits inside .s22w-media (position:relative, overflow:hidden).
   It spans the full bottom area of the photo with a dark gradient, and holds
   the property name + rating so they visually live "on the image". */
.s22w-scrim {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 2;
  padding: 40px 14px 12px;
  background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.3) 70%, transparent 100%);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Name in scrim: white, same weight as normal but lighter bg makes it pop */
.s22w-scrim .s22w-name {
  font-size: 18px;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  -webkit-line-clamp: 2;
}
.s22w-scrim a.s22w-name:hover { color: var(--s22-lime); }
/* Rating inside scrim */
.s22w-scrim .s22w-rating { gap: 5px 6px; }
.s22w-scrim .s22w-score {
  background: var(--s22-ink);
  color: var(--s22-lime);
  font-size: 12px;
  padding: 2px 7px;
}
.s22w-scrim .s22w-stars { font-size: 13px; color: var(--s22-lime); }
.s22w-scrim .s22w-count { color: rgba(255,255,255,0.65); font-size: 11px; }

/* On wide desktop layout the scrim covers the left panel image */



/* ── VARIANT B — Clean Modern (Booking.com / Agoda layout) ───────────────── */

/* ── Card container ──────────────────────────────────────────────── */
.s22w-card[data-variant="b"] {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  overflow: hidden;
}
.s22w-card[data-variant="b"]:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

/* ── Media (Image) ────────────────────────────────────────────────── */
.s22w-card[data-variant="b"] .s22w-media {
  position: relative;
  display: block;
}
@media (min-width: 560px) {
  .s22w-card[data-layout="wide"][data-variant="b"] .s22w-media {
    width: 32%;
    min-width: 200px;
    align-self: stretch;
    min-height: 100%;
  }
  .s22w-card[data-layout="wide"][data-variant="b"] .s22w-media img {
    height: 100%;
    object-fit: cover;
  }
}

/* ── Body ────────────────────────────────────────────────────────── */
.s22w-card[data-variant="b"] .s22w-body {
  display: flex;
  flex-direction: column;
  padding: 16px;
  flex: 1;
}
@media (min-width: 560px) {
  .s22w-card[data-layout="wide"][data-variant="b"] .s22w-body {
    padding: 18px 22px;
    border-top: none;
    border-left: 1px solid #f3f4f6;
  }
}

/* ── Main Container inside body ──────────────────────────────────── */
.s22w-card[data-variant="b"] .s22w-b-main {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
  gap: 12px;
}

/* ── Header: Title Group (Left) + Rating Badge (Right) ────────────── */
.s22w-card[data-variant="b"] .s22w-b-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.s22w-card[data-variant="b"] .s22w-b-title-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

/* ── Typography ──────────────────────────────────────────────────── */
.s22w-card[data-variant="b"] .s22w-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.8px;
  color: #6b7280;
  text-transform: uppercase;
  margin: 0;
}
.s22w-card[data-variant="b"] .s22w-name {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: #111827;
  letter-spacing: -0.2px;
  margin: 0;
  text-decoration: none;
}
.s22w-card[data-variant="b"] .s22w-name:hover {
  color: #0284c7;
}
.s22w-card[data-variant="b"] .s22w-address {
  font-size: 12px;
  color: #4b5563;
  margin: 2px 0 0 0;
}

/* ── Booking.com Rating Box (Top Right) ───────────────────────────── */
.s22w-card[data-variant="b"] .s22w-b-rating {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.s22w-card[data-variant="b"] .s22w-b-rating-labels {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  line-height: 1.2;
}
.s22w-card[data-variant="b"] .s22w-score-label {
  font-size: 13px;
  font-weight: 700;
  color: #111827;
}
.s22w-card[data-variant="b"] .s22w-count {
  font-size: 11px;
  color: #6b7280;
}
.s22w-card[data-variant="b"] .s22w-score--pill {
  background: #008009 !important;
  color: #ffffff !important;
  border-radius: 6px 6px 6px 0;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 8px;
  line-height: 1;
}

/* ── Badges ──────────────────────────────────────────────────────── */
.s22w-card[data-variant="b"] .s22w-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.s22w-card[data-variant="b"] .s22w-badge {
  border: none;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
}
.s22w-card[data-variant="b"] .s22w-badge[data-tone="lime"] {
  background: #ecfdf5;
  color: #047857;
}
.s22w-card[data-variant="b"] .s22w-badge[data-tone="rose"] {
  background: #eff6ff;
  color: #1d4ed8;
}

/* ── Bottom Bar: Price (Left) + CTA Button (Right) ────────────────── */
.s22w-card[data-variant="b"] .s22w-b-bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: 12px;
  border-top: 1px solid #f3f4f6;
  gap: 12px;
  margin-top: 4px;
}
.s22w-card[data-variant="b"] .s22w-price {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.s22w-card[data-variant="b"] .s22w-amount {
}
/* ── CTA Button ── site Join-button treatment (saffron + ink, 3px ink border,
   hard offset shadow) — founder-approved 2026-08-07 */
.s22w-card[data-variant="b"] .s22w-cta,
.s22w-card[data-variant="b"] .s22w-cta:link,
.s22w-card[data-variant="b"] .s22w-cta:visited {
  background: #ff7a00;
  color: #2b1340;
  border: 3px solid #2b1340;
  border-radius: 0;
  font-family: "Bagel Fat One", "Cooper Black", serif;
  font-weight: 800;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 4px 4px 0 #2b1340;
  padding: 10px 18px;
  text-decoration: none;
  white-space: nowrap;
}
.s22w-card[data-variant="b"] .s22w-cta:hover {
  background: #ff7a00;
  color: #2b1340;
  box-shadow: 6px 6px 0 #2b1340;
  transform: translate(-2px, -2px);
}

/* ── Responsive adjustments for mobile & small screens ──────────── */
@media (max-width: 559px) {
  .s22w-card[data-variant="b"] .s22w-b-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .s22w-card[data-variant="b"] .s22w-b-rating {
    flex-direction: row-reverse;
    align-self: flex-start;
  }
  .s22w-card[data-variant="b"] .s22w-b-rating-labels {
    align-items: flex-start;
    text-align: left;
  }
  .s22w-card[data-variant="b"] .s22w-b-bottom {
    padding-top: 10px;
    align-items: center;
  }
  .s22w-card[data-variant="b"] .s22w-cta {
    padding: 10px 16px;
    font-size: 13px;
  }
  .s22w-card[data-variant="b"] .s22w-amount {
    font-size: 20px;
  }
}

.s22w-card[data-variant="b"] .s22w-cta:active {
  color: #2b1340;
  box-shadow: 2px 2px 0 #2b1340;
  transform: translate(2px, 2px);
}

/* ── Kind badge ──────────────────────────────────────────────────── */
.s22w-card[data-variant="b"] .s22w-kind {
  background: #1a7a4e;
  color: #ffffff;
  border-radius: 20px;
  transform: none;
  letter-spacing: 1px;
  font-size: 10px;
}

/* ── Unified Option B Widget Design System (Stay22 Maps & GYG Cards) ──────── */
.stay22-map {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  margin-block: clamp(28px, 4vw, 44px);
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  height: 340px;
  min-height: 340px;
}
@media (min-width: 700px) {
  .stay22-map { height: 420px; min-height: 420px; }
}
@media (min-width: 1024px) {
  .stay22-map { height: 460px; min-height: 460px; }
}

.stay22-map-bar {
  flex: 0 0 auto;
  padding: 10px 16px;
  background: #ffffff;
  color: #1e293b;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  border-bottom: 1px solid #f1f5f9;
}

.stay22-map iframe {
  flex: 1;
  min-height: 0;
  width: 100%;
  border: none;
}

.gyg-widget-container,
.gyg-widget {
  position: relative;
  width: 100%;
  margin-block: 24px;
}

.gyg-widget-container iframe,
.gyg-widget iframe {
  border: none !important;
  width: 100% !important;
  margin-bottom: 0 !important;
}


.gyg-widget-card a,
.gyg-widget-card a:visited {
  color: #1e293b;
  text-decoration: none;
  font-weight: 700;
}
.gyg-widget-card a:hover {
  color: #ff7a00;
}
.gyg-widget-card button,
.gyg-widget-card .gyg-button,
.gyg-widget-card [class*="btn"],
.gyg-widget-card [class*="cta"] {
  background-color: #ff7a00 !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
}

/* Single Activity Card Sizing Constraint (Tight box, no massive whitespace) */
.gyg-widget-card[data-single="true"] {
  max-width: 680px;
  margin-inline: auto;
}

/* Remove "Powered by GetYourGuide. Join our travel affiliate program" attribution footer */
.gyg-widget-card [class*="powered"],
.gyg-widget-card [class*="affiliate"],
.gyg-widget-card [class*="footer"],
.gyg-widget-card iframe + p,
.gyg-widget-card iframe + div,
.gyg-widget-card .gyg-widget + p,
.gyg-widget-card noscript {
  display: none !important;
}

/* ── VARIANT TALL — same clean-modern card (variant b), taller to match the GYG
   availability widget height (~365px) so mixed widget stacks stay balanced.
   Rendered by the runtime as data-variant="b" + data-tall="true", so it inherits
   ALL variant-b styling (white card, Join CTA, badges) — this marker only adds
   height. Founder-approved 2026-08-07. */
.s22w-card[data-tall="true"] {
  min-height: 365px;
}

/* ── Stay22 map click-to-activate overlay ─────────────────────────────
   Scroll/touch over the map scrolls the page (no hijack); the map becomes
   interactive (pan, pins, +/− zoom) on first click; it deactivates on mouse
   leave / page scroll. Founder-approved 2026-08-07. */
.stay22-map { position: relative; }
.stay22-map-overlay {
  position: absolute; inset: 0; z-index: 5;
  cursor: pointer; background: transparent;
}
.stay22-map[data-active="true"] .stay22-map-overlay { display: none; }
.stay22-map-hint {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 6;
  padding: 4px 12px; background: var(--c-ink, #2b1340); color: var(--c-lime, #d9f400);
  font-family: "DM Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: 1px;
  text-transform: uppercase; pointer-events: none; white-space: nowrap;
}
.stay22-map[data-active="true"] .stay22-map-hint { display: none; }