/* ==========================================================================
   Step Ahead IELTS — Ad slots (teacher-managed own banners)
   Empty slots stay hidden (display:none default); .sa-ad-slot-filled is
   added by js/ads.js only when real content arrives from the server.
   ========================================================================== */

.sa-ad-slot {
    display: none; /* collapsed until filled — zero layout impact */
}

.sa-ad-slot.sa-ad-slot-filled {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-radius: 10px;
}

/* Dashboard-top: breathing room under the header */
main.dashboard-grid .sa-ad-slot.sa-ad-slot-filled,
.container > .sa-ad-slot.sa-ad-slot-filled {
    margin: 0 0 1rem;
}

/* Result-bottom: floats above the fixed copyright footer */
.sa-ad-slot.sa-ad-slot-filled[data-slot="result-bottom"] {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 28px;
    z-index: 30;
    max-width: min(720px, calc(100vw - 24px));
    box-shadow: 0 6px 24px rgba(15, 23, 42, 0.18);
    background: var(--light, #fff);
}

/* Rotation: stacked slides, only the active one visible (fade via opacity) */
.sa-ad-slot.sa-ad-rotating {
    position: relative;
}

.sa-ad-slot .sa-ad-rotate-item {
    display: none;
}

.sa-ad-slot .sa-ad-rotate-item.sa-ad-rotate-active {
    display: block;
    animation: sa-ad-fade 0.6s ease;
}

@keyframes sa-ad-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Login-top: slim strip inside the auth card, above the logo.
   Transparent background — the banner's own gradient IS the visual; a white
   slot box behind it just reads as a broken empty card. Copy may wrap to two
   lines on narrow cards, so the cap is generous but bloat-proof. */
.sa-ad-slot.sa-ad-slot-filled[data-slot="login-top"] {
    max-height: 150px;
    margin: 0 0 0.9rem;
    overflow: hidden;
    background: transparent;
}

.sa-ad-slot.sa-ad-slot-filled[data-slot="login-top"] img {
    border-radius: 8px;
    max-height: 102px;
    object-fit: contain;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
}

/* CTA chips must never wrap mid-word ("WhatsApp to / buy") — keep each pill
   on one line; the surrounding sentence text may still wrap. */
.sa-ad-slot.sa-ad-slot-filled[data-slot="login-top"] span {
    white-space: nowrap;
    display: inline-block;
}

/* Login-side: desktop-only branding panel beside the auth card.
   Flex row backdrop already centers the card; order-2 puts the ad to its
   right, order-1 keeps the card in front for keyboard/autofill focus.
   align-items:center on the backdrop makes a TALL panel push the login card
   half off-screen; centering the two items against each other with
   align-self:center keeps the CARD visually centered no matter the
   ad panel height. */
#student-auth-overlay {
    gap: 28px;
    align-items: center; /* cross-axis centering of the card+panel pair */
}

#student-auth-overlay .sa-ad-slot.sa-ad-slot-filled[data-slot="login-side"] {
    order: 2;
    align-self: center;
    flex: 0 0 auto;
    width: min(340px, 30vw);
    max-height: min(640px, 82vh); /* never taller than the viewport */
    overflow: hidden;
    border-radius: 14px;
    background: var(--light, #fff);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}

#student-auth-overlay .sa-ad-slot.sa-ad-slot-filled[data-slot="login-side"] img {
    border-radius: 14px;
    max-height: calc(min(640px, 82vh) - 8px);
    width: auto;
    max-width: 100%;
    object-fit: contain;
    margin: 0 auto;
}

.auth-dialog-card {
    order: 1;
}

/* Login-side is a desktop-only placement — mobile keeps the clean single card */
@media (max-width: 900px) {
    #student-auth-overlay .sa-ad-slot[data-slot="login-side"] {
        display: none !important; /* even if filled */
    }
}

/* Login-bottom: one-line footer strip under the auth card (offers/disclaimers).
   Even slimmer than login-top — it sits outside the card on the backdrop.
   Absolute bottom-anchored, so an unstyled white div can never end up
   floating in the middle of the dark backdrop like a broken card. */
#student-auth-overlay .sa-ad-slot.sa-ad-slot-filled[data-slot="login-bottom"] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 14px;
    max-width: min(860px, calc(100vw - 24px));
    max-height: 64px;
    overflow: hidden;
    z-index: 1;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
}

#student-auth-overlay .sa-ad-slot.sa-ad-slot-filled[data-slot="login-bottom"] img {
    max-height: 48px;
    width: auto;
    margin: 0 auto;
}

/* NO flex on the inner div — flex turns inline links/text nodes into stacked
   items ("Instagram / & / Facebook" on separate lines). Plain centered text
   with comfortable line-height flows the sentence naturally. */
#student-auth-overlay .sa-ad-slot.sa-ad-slot-filled[data-slot="login-bottom"] > div {
    text-align: center;
    font-size: 12.5px;
    line-height: 1.55;
    padding: 6px 12px;
    color: #334155;
}

/* Keep the tall register tab from colliding with the bottom strip: extra
   scroll padding when the slot is actually filled. */
#student-auth-overlay:has(.sa-ad-slot-filled[data-slot="login-bottom"]) {
    padding-bottom: 84px;
}
/* Banner images inside any slot behave */
.sa-ad-slot img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
}

/* Only TOP-LEVEL banner links become block (whole-banner wrappers).
   Must NOT hit nested links — an EARN-FREE-TESTS banner legitimately
   contains inline Google/Insta/FB links, and `a { display:block }` on
   those shatters the copy onto separate lines. (Nested <a> inside <a>
   is invalid HTML and the parser splits it anyway — content must use a
   <div> wrapper whenever a banner contains its own links.) */
.sa-ad-slot > a,
.sa-ad-slot > .sa-ad-rotate-item > a {
    display: block;
}

/* ── Portrait rotate-hint banner (test.html) ───────────────────────────── */
#portrait-rotate-hint {
    position: fixed;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    z-index: 9999;
    display: none; /* controlled by orientation media query + JS dismiss */
    align-items: center;
    gap: 0.5rem;
    background: rgba(15, 23, 42, 0.92);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
    max-width: calc(100vw - 20px);
}

#portrait-rotate-hint .rotate-hint-icon {
    font-size: 1rem;
    animation: sa-rotate-wiggle 1.6s ease-in-out infinite;
}

#portrait-rotate-hint .rotate-hint-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.95rem;
    cursor: pointer;
    padding: 0 0 0 0.35rem;
    line-height: 1;
}

@keyframes sa-rotate-wiggle {
    0%, 100% { transform: rotate(0deg); }
    35% { transform: rotate(-35deg); }
    65% { transform: rotate(35deg); }
}

/* Only portrait phones in the exam UI get the hint */
@media (orientation: portrait) and (max-width: 768px) {
    body.exam-body #portrait-rotate-hint.sa-rotate-visible {
        display: inline-flex;
    }
}