/* ============================================================
   Choice × MySWIMPass — supplemental styles (loads after styles.css)
   ============================================================ */

/* Co-brand lockup */
.brand-x { font-size:1.3rem; opacity:.45; font-weight:300; }
.site-header.on-hero .brand-x { color:#fff; }
.cobrand { display:inline-flex; align-items:center; }
.cobrand .cb-logo {
  display:flex; flex-direction:column; line-height:1; text-align:left;
  border:2px dashed rgba(255,255,255,.7); border-radius:10px; padding:6px 12px; color:#fff;
}
.cobrand .cb-logo b { font-size:1rem; font-weight:800; letter-spacing:-.01em; }
.cobrand .cb-logo small { font-size:.52rem; text-transform:uppercase; letter-spacing:.14em; opacity:.85; margin-top:2px; }
.cobrand.dark .cb-logo { border-color:var(--line); color:var(--deep); background:var(--foam); }
.cobrand.dark .cb-logo small { color:var(--mist); }

/* Concept banner */
.concept-banner{ background:linear-gradient(90deg,#063970,#0a5cbf); color:#fff; text-align:center; font-size:.86rem; padding:9px 16px; font-weight:600; }
.concept-banner b{ color:var(--sun); }

/* Brand badge on card */
.badge-brand{ position:absolute; top:12px; left:12px; background:rgba(255,255,255,.94); color:var(--deep);
  font-size:.68rem; font-weight:800; padding:5px 10px; border-radius:var(--r-pill); box-shadow:var(--shadow-sm); }

/* amenity chips with icons */
.tag{ display:inline-flex; align-items:center; gap:5px; }
.tag svg{ opacity:.8; }

/* Pricing tiers */
.price-tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:760px; margin:0 auto; }
.price-tier{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 20px; text-align:center; box-shadow:var(--shadow-sm); position:relative; overflow:hidden; }
.price-tier .amt{ font-size:2.6rem; font-weight:800; color:var(--deep); line-height:1; margin:8px 0 4px; }
.price-tier .amt.free{ color:var(--aqua); }
.price-tier .who{ font-weight:700; font-size:1.05rem; }
.price-tier .sub{ color:var(--mist); font-size:.85rem; }
.price-tier .ic{ font-size:1.8rem; }
.price-tier.pop::before{ content:"Most popular"; position:absolute; top:12px; right:-32px; background:var(--sun); color:#6a4b00; font-size:.62rem; font-weight:800; padding:4px 40px; transform:rotate(45deg); }
@media(max-width:640px){ .price-tiers{ grid-template-columns:1fr; } }

/* State browse grid */
.state-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.state-cell{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:14px 16px;
  border:1px solid var(--line); border-radius:var(--r-md); background:#fff; font-weight:700; color:var(--ink);
  box-shadow:var(--shadow-sm); transition:transform .15s ease, border-color .15s ease; cursor:pointer; }
.state-cell:hover{ transform:translateY(-3px); border-color:var(--azure); color:var(--deep); }
.state-cell.live{ background:var(--grad-water); color:#fff; border-color:transparent; }
.state-cell.live:hover{ color:#fff; }
.state-cell .cnt{ font-size:.72rem; font-weight:800; background:rgba(255,255,255,.25); padding:2px 8px; border-radius:999px; }
.state-cell:not(.live) .cnt{ background:var(--foam); color:var(--azure); }
.state-cell.soon{ opacity:.62; cursor:default; }
.state-cell.soon:hover{ transform:none; border-color:var(--line); color:var(--ink); }

/* Guest steppers on booking + checkout */
.tier-row{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--line); }
.tier-row:last-child{ border-bottom:0; }
.tier-row .lbl b{ display:block; }
.tier-row .lbl small{ color:var(--mist); }
.tier-row .price-badge{ font-weight:800; color:var(--deep); margin-right:6px; }
.tier-row .price-badge.free{ color:var(--aqua); }

/* gallery labels */
.gallery .cell .glabel{ position:absolute; left:10px; bottom:10px; background:rgba(6,57,112,.82); color:#fff;
  font-size:.72rem; font-weight:700; padding:4px 10px; border-radius:999px; }

/* included amenities row on hotel page */
.included{ display:flex; gap:22px; flex-wrap:wrap; margin:12px 0 4px; }
.included .item{ display:flex; align-items:center; gap:8px; font-weight:700; color:var(--deep); }
.included .item .ic{ width:38px;height:38px;border-radius:10px;background:var(--foam);display:grid;place-items:center;color:var(--azure); }

/* nav CTA */
.nav-cta{ background:var(--grad-cta); color:#fff !important; padding:8px 16px; border-radius:var(--r-pill); font-weight:700; }
.site-header.on-hero .nav-cta{ color:#fff !important; }
.nav-cta:hover{ color:#fff !important; opacity:.92; }

/* Partner page */
.roi-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); padding:34px; }
.roi-grid{ display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center; }
@media(max-width:860px){ .roi-grid{ grid-template-columns:1fr; } }
.roi-control{ margin-bottom:20px; }
.roi-control label{ display:flex; justify-content:space-between; font-weight:700; color:var(--ink); margin-bottom:8px; }
.roi-control label .v{ color:var(--deep); }
.roi-control input[type=range]{ width:100%; accent-color:var(--azure); }
.roi-out{ background:var(--grad-hero); color:#fff; border-radius:var(--r-xl); padding:32px; text-align:center; position:relative; overflow:hidden; }
.roi-out .big{ font-size:3rem; font-weight:800; line-height:1; margin:6px 0; }
.roi-out .lbl{ text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; opacity:.85; }
.roi-breakdown{ display:grid; gap:8px; margin-top:20px; text-align:left; }
.roi-breakdown .r{ display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.18); font-size:.92rem; }
.roi-breakdown .r b{ font-weight:800; }
.stat-band{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media(max-width:760px){ .stat-band{ grid-template-columns:1fr 1fr; } }
.stat-band .s{ text-align:center; }
.stat-band .s b{ font-size:2.2rem; color:var(--deep); display:block; line-height:1; }
.stat-band .s span{ color:var(--slate); font-size:.85rem; }

/* pitch note callout */
.pitch-note{ background:var(--foam); border:1px dashed var(--azure); border-radius:var(--r-md); padding:12px 16px; font-size:.84rem; color:var(--slate); }
.pitch-note b{ color:var(--deep); }