/* Slip page layout: the original centred card (style.css) with a tighter header so the slip,
   the CTA and the states line fit one phone screen (stakeholder option B, 2026-11-14).
   The wrappers in slip-preview.html (.slip-head, .slip-media-wrap, .slip-media, .slip-cta-bar)
   are plain blocks here, so the page flows like the original markup. Loaded after style.css. */

body {
    padding-top: max(0.75rem, env(safe-area-inset-top));
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
}

.card { padding: 1.1rem 1.1rem 1rem; }
.card[hidden],
.slip-unavailable[hidden] { display: none !important; }

.slip-badge { margin-bottom: 0.5rem; padding: 0.3rem 0.7rem; font-size: 0.66rem; }
.card .fanduel-banner,
.card .kalshi-banner { margin-bottom: 0.7rem; border-radius: 12px; }
.card .fanduel-banner { padding: 0.5rem 1rem; }
.fanduel-logo-img { width: 52%; max-width: 52%; }

#slip-title { font-size: 1.3rem; }

/* The slip keeps the original contain-scaling: a tall slip shrinks to the height cap
   instead of pushing the CTA off screen, so there is no inner scrolling. */
.card .hero-image,
.card .hero-image-loading {
    width: 100%;
    max-height: 48dvh;
    margin: 0.7rem auto 0;
}
.slip-scroll-hint { display: none !important; }

.card .button {
    margin-top: 0.9rem;
    padding: 14px 16px;
    font-size: 1.05rem;
    white-space: nowrap;
}
.card .footer { margin-top: 0.9rem; padding-top: 0.7rem; font-size: 0.7rem; }
.footer-states { margin-bottom: 0.3rem; }
.footer-title:empty,
.footer-states:empty,
.footer-disclaimer:empty { display: none; }
.footer-terms-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* In-page "link unavailable" state (mirrors src/slip-unavailable.html) */
.slip-unavailable {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    width: 100%;
    max-width: 380px;
    padding: 16px;
    border: 1px solid #36312c;
    border-radius: 10px;
    background: #1f1c19;
    color: #e7e2dc;
    font-size: 14px;
    line-height: 1.4;
}
.slip-unavailable-ico {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid #36312c;
    display: grid;
    place-items: center;
    color: #a39b92;
}
.slip-unavailable-ico svg { width: 17px; height: 17px; }
.slip-unavailable-title { margin: 0 0 3px; font-size: 16px; font-weight: 700; }
.slip-unavailable-text { margin: 0; color: #a39b92; font-size: 13px; }