/* Sponsor cards on app pages. Shared by the app and the Control Center's
   brand preview, so what the admin sees is exactly what phones show. */
.promo-slot { margin: 0 0 6px; transition: opacity .25s ease, transform .25s ease; }
.promo-slot-out { opacity: 0; transform: scale(.98); }
#home-pandals-list > .promo-slot { margin: 0; }
.promo-card { position: relative; border-radius: 14px; cursor: default; animation: promo-in .35s ease; -webkit-tap-highlight-color: transparent; }
.promo-card[role="button"] { cursor: pointer; }
.promo-card[role="button"]:active { transform: scale(.99); }
/* Sponsored badge: small, legible, unmistakably an ad. */
.promo-flag { display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px 2px 5px; border-radius: 999px; font: 800 8.5px/1.2 system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; background: rgba(15,23,42,.06); color: #475569; border: 1px solid rgba(15,23,42,.08); }
.dark .promo-flag { background: rgba(255,255,255,.08); color: #CBD5E1; border-color: rgba(255,255,255,.12); }
.promo-flag svg { color: #F59E0B; }
.promo-close { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; border: 0; cursor: pointer; background: rgba(15,23,42,.55); color: #fff; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 3; }
.promo-close:active { transform: scale(.9); }
.promo-cta { flex-shrink: 0; display: inline-flex; align-items: center; gap: 3px; padding: 5px 9px; border-radius: 999px; background: var(--promo-accent, #D8232A); color: #fff; font: 800 9.5px/1 system-ui, sans-serif; box-shadow: 0 2px 6px rgba(0,0,0,.18); white-space: nowrap; }
/* Plain card (no banner image): compact & slender */
.promo-plain { display: flex; align-items: center; gap: 8px; padding: 7px 32px 7px 9px; min-height: 48px; background: linear-gradient(100deg, color-mix(in srgb, var(--promo-accent, #D8232A) 10%, #fff) 0%, #fff 70%); border: 1px solid color-mix(in srgb, var(--promo-accent, #D8232A) 22%, #E2E8F0); box-shadow: 0 1px 3px rgba(15,23,42,.06); }
.dark .promo-plain { background: linear-gradient(100deg, color-mix(in srgb, var(--promo-accent, #D8232A) 22%, #1E293B) 0%, #1E293B 70%); border-color: #334155; }
.promo-plain .promo-close { top: 50%; transform: translateY(-50%); right: 8px; width: 20px; height: 20px; background: rgba(15,23,42,.08); color: #475569; }
.dark .promo-plain .promo-close { background: rgba(255,255,255,.1); color: #CBD5E1; }
.promo-logo { width: 38px; height: 38px; border-radius: 10px; object-fit: contain; background: #fff; flex-shrink: 0; border: 1px solid #F1F5F9; padding: 2px; }
.promo-logo-text { display: grid; place-items: center; font: 800 13px/1 system-ui, sans-serif; color: var(--promo-accent, #D8232A); }
.promo-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.promo-name { font: 800 11.5px/1.2 system-ui, sans-serif; color: #0F172A; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.dark .promo-name { color: #F8FAFC; }
.promo-tagline { font: 500 10px/1.25 system-ui, sans-serif; color: #475569; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dark .promo-tagline { color: #CBD5E1; }
/* Banner card: slender 3.8:1 ratio, max-height 94px to prevent pushing Start Hopping below fold */
.promo-banner { overflow: hidden; aspect-ratio: 3.8 / 1; max-height: 94px; background: #0F172A; box-shadow: 0 2px 8px rgba(15,23,42,.12); }
.promo-banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.promo-banner .promo-flag { position: absolute; top: 6px; left: 6px; z-index: 2; background: rgba(15,23,42,.62); color: #fff; border-color: rgba(255,255,255,.18); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.promo-banner-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding: 14px 9px 5px; }
.promo-banner:not(.promo-banner-clean).promo-text-light .promo-banner-foot { background: linear-gradient(to top, rgba(2,6,23,.78), rgba(2,6,23,0)); }
.promo-banner:not(.promo-banner-clean).promo-text-dark .promo-banner-foot { background: linear-gradient(to top, rgba(255,255,255,.9), rgba(255,255,255,0)); }
.promo-banner-brand { display: flex; align-items: center; gap: 6px; min-width: 0; }
.promo-banner-brand img { width: 24px; height: 24px; border-radius: 6px; object-fit: contain; background: #fff; padding: 2px; flex-shrink: 0; }
.promo-banner-text { display: flex; flex-direction: column; min-width: 0; }
.promo-banner-text strong { font: 800 11.5px/1.15 system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.promo-banner-text small { font: 500 9px/1.2 system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .92; }
.promo-text-light .promo-banner-text { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.promo-text-dark .promo-banner-text { color: #0F172A; }
@keyframes promo-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes promo-crossfade { from { opacity: 0.35; transform: scale(0.995); } to { opacity: 1; transform: none; } }
.promo-fade-in { animation: promo-crossfade 0.45s ease-out; }

/* Offers rail (Home) with balanced breathing room */
.promo-offers-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; padding: 0 2px; }
.promo-offers-head span { font: 800 11px/1 system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #64748B; }
.promo-offers-head small { font: 700 8.5px/1 system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #94A3B8; }
.promo-offers-row { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 4px 16px 8px; scroll-snap-type: x mandatory; }
.promo-offers-row::-webkit-scrollbar { display: none; }
.promo-offer { flex: 0 0 auto; width: 220px; scroll-snap-align: start; display: flex; gap: 10px; align-items: center; text-align: left; padding: 11px 12px; border-radius: 14px; border: 1px dashed color-mix(in srgb, var(--promo-accent, #D8232A) 55%, #fff); background: linear-gradient(110deg, color-mix(in srgb, var(--promo-accent, #D8232A) 12%, #fff), #fff 80%); cursor: pointer; font-family: inherit; box-shadow: 0 1px 3px rgba(15,23,42,.04); }
.dark .promo-offer { background: linear-gradient(110deg, color-mix(in srgb, var(--promo-accent, #D8232A) 25%, #1E293B), #1E293B 80%); border-color: #475569; }
.promo-offer img, .promo-offer i { width: 38px; height: 38px; border-radius: 10px; object-fit: contain; background: #fff; flex-shrink: 0; display: grid; place-items: center; font: 800 12px/1 system-ui, sans-serif; font-style: normal; color: var(--promo-accent, #D8232A); border: 1px solid #F1F5F9; }
.promo-offer span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.promo-offer b { font: 800 11.5px/1.2 system-ui, sans-serif; color: #0F172A; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dark .promo-offer b { color: #F8FAFC; }
.promo-offer small { font: 600 9.5px/1.2 system-ui, sans-serif; color: #64748B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Offer sheet */
#promo-offer-sheet { position: fixed; inset: 0; z-index: 4000; display: flex; align-items: flex-end; justify-content: center; }
#promo-offer-sheet .pos-backdrop { position: absolute; inset: 0; background: rgba(2,6,23,.55); }
#promo-offer-sheet .pos-card { position: relative; width: 100%; max-width: 480px; background: #fff; border-radius: 22px 22px 0 0; padding: 16px 16px calc(18px + env(safe-area-inset-bottom, 0px)); animation: promo-in .25s ease; font-family: system-ui, sans-serif; }
.dark #promo-offer-sheet .pos-card { background: #0F172A; color: #F8FAFC; }
.pos-top { display: flex; align-items: center; gap: 10px; }
.pos-top img { width: 40px; height: 40px; border-radius: 10px; object-fit: contain; border: 1px solid #F1F5F9; background: #fff; }
.pos-top div { flex: 1; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.pos-top b { font-size: 13px; }
.pos-top button { border: 0; background: #F1F5F9; width: 30px; height: 30px; border-radius: 999px; cursor: pointer; font-size: 13px; }
.pos-card h3 { font-size: 18px; font-weight: 800; margin: 12px 0 4px; line-height: 1.2; }
.pos-card p { font-size: 13px; color: #475569; line-height: 1.4; }
.dark .pos-card p { color: #CBD5E1; }
.pos-places { font-size: 11.5px; color: #64748B; margin-top: 6px; }
.pos-code { width: 100%; margin-top: 14px; padding: 14px; border-radius: 14px; border: 2px dashed var(--promo-accent, #D8232A); background: color-mix(in srgb, var(--promo-accent, #D8232A) 8%, #fff); color: var(--promo-accent, #D8232A); font: 800 13px/1.2 system-ui, sans-serif; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pos-code.revealed strong { font-size: 22px; letter-spacing: .12em; }
.pos-code small { font-size: 10.5px; font-weight: 600; opacity: .8; }
.pos-terms { font-size: 10.5px; color: #94A3B8; margin-top: 10px; line-height: 1.4; }
.pos-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; font-size: 11px; color: #64748B; }

/* Title sponsor ("Presented by") */
.promo-presented { display: inline-flex; align-items: center; gap: 6px; margin-top: 5px; padding: 3px 9px 3px 7px; border-radius: 999px; border: 1px solid #E2E8F0; background: #fff; font: 600 9.5px/1 system-ui, sans-serif; color: #64748B; cursor: pointer; }
.dark .promo-presented { background: #1E293B; border-color: #334155; color: #94A3B8; }
.promo-presented img { height: 16px; max-width: 60px; object-fit: contain; }
.promo-presented b { font-weight: 800; color: #0F172A; }
.dark .promo-presented b { color: #F8FAFC; }

/* Ad carousel: stacked cards, one visible; slides vertically on its own,
   horizontally when swiped. */
.promo-carousel { position: relative; }
.promo-stage { display: grid; overflow: hidden; border-radius: 14px; }
.promo-item { grid-area: 1 / 1; min-width: 0; visibility: hidden; pointer-events: none; will-change: transform; }
.promo-item.is-active { visibility: visible; pointer-events: auto; }
.promo-item > .promo-card { height: 100%; animation: none; }
.promo-dots { display: flex; justify-content: center; gap: 4px; padding-top: 4px; }
.promo-dot { width: 5px; height: 5px; padding: 0; border: 0; border-radius: 999px; background: rgba(15,23,42,.18); cursor: pointer; transition: width .25s ease, background .25s ease; }
.promo-dot.is-active { width: 14px; background: var(--season-accent, #D8232A); }
.dark .promo-dot { background: rgba(255,255,255,.22); }
.dark .promo-dot.is-active { background: var(--season-accent, #D8232A); }
.promo-dot::before { content: ""; display: block; margin: -6px; height: 17px; }