/* class7-products.css
   Large Numbers (Class 7, Chapter 1), Tier 15 "Reading Data: Populations of Cities", Tier 16 "Patterns in Products
   (Multiplication Shortcuts)", Tier 17 "How Long Is the Product? (Digit Patterns)" and Tier 18 "Fascinating Facts
   (Big Multiplication and Division)". Pictures, the single-line answer chips and the native phone feel for the
   twenty-six popups (ids start with "lp"). The popup frame itself comes from the shared quiz css. */

.quiz-overlay[id^="lp"] .quiz-modal { -webkit-tap-highlight-color: transparent !important; overscroll-behavior: contain !important; }

/* ---------------- the picture card: matt paper, soft inner edge ---------------- */
.quiz-overlay[id^="lp"] .lp-stage {
    margin: 6px auto 12px !important;
    width: 100% !important;
    max-width: 560px !important;
    padding: 10px 10px 12px !important;
    border-radius: 24px !important;
    background: linear-gradient(180deg, #FFFAEB 0%, #EEF7FF 100%) !important;
    box-shadow: inset 0 0 0 1.5px rgba(122, 104, 214, .16), 0 8px 18px rgba(60, 58, 110, .10) !important;
    box-sizing: border-box !important;
}
.quiz-overlay[id^="lp"] .lp-svg {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 320px !important;
    overflow: visible !important;
    font-family: "Nunito", "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}
.quiz-overlay[id^="lp"] .lp-hint {
    margin-top: 6px !important;
    text-align: center !important;
    font-size: 13.5px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    color: #5A4FA0 !important;
}
.quiz-overlay[id^="lp"] .lp-speak {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-left: 6px !important;
    padding: 5px 12px !important;
    min-height: 32px !important;
    border: 0 !important;
    border-radius: 999px !important;
    font: inherit !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #fff !important;
    background: linear-gradient(180deg, #7CC6FF, #3F8FE0) !important;
    box-shadow: 0 3px 8px rgba(47, 134, 214, .35) !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
}
.quiz-overlay[id^="lp"] .lp-speak:active { transform: scale(.95) !important; }

/* odometer wheels roll, '?' stones glow softly, Hoppy bobs */
.quiz-overlay[id^="lp"] .lp-strip { transition: transform .75s cubic-bezier(.22, .8, .25, 1); }
.quiz-overlay[id^="lp"] .lp-late { transition: opacity .5s ease; }
.quiz-overlay[id^="lp"] .lp-pulse { animation: lpPulse 1.8s ease-in-out infinite !important; }
.quiz-overlay[id^="lp"] .lp-hop { animation: lpBob 1.6s ease-in-out infinite !important; }
@keyframes lpPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes lpBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* ---------------- the 4 answer chips: ONE line, always ---------------- */
.quiz-overlay[id^="lp"] .lp-picker,
.quiz-overlay[id^="lp"] [id$="Options"] {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 8px 0 6px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}
.quiz-overlay[id^="lp"] .lp-opt {
    position: relative !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 60px !important;
    margin: 0 !important;
    padding: 8px 2px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    border: 2px solid #CFC6F5 !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, #FFFFFF 0%, #F3EEFF 100%) !important;
    color: #2A2858 !important;
    font-family: "Nunito", "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
    font-weight: 800 !important;
    font-size: clamp(16px, 4.8vw, 22px) !important;
    line-height: 1.1 !important;
    box-shadow: 0 3px 0 #CFC6F5, 0 6px 12px rgba(60, 58, 110, .10) !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: transform .08s ease, box-shadow .08s ease, background .15s ease;
}
.quiz-overlay[id^="lp"] .lp-opt.lp-sm { font-size: clamp(14px, 4.1vw, 20px) !important; }
.quiz-overlay[id^="lp"] .lp-opt.lp-xs { font-size: clamp(13px, 3.6vw, 17px) !important; }
.quiz-overlay[id^="lp"] .lp-opt.lp-wrap { white-space: normal !important; font-size: clamp(14px, 4vw, 19px) !important; line-height: 1.15 !important; padding: 8px 4px !important; }
.quiz-overlay[id^="lp"] .lp-opt:active:not(:disabled) { transform: translateY(2px) scale(.97) !important; box-shadow: 0 1px 0 #CFC6F5, 0 2px 6px rgba(60, 58, 110, .12) !important; }
.quiz-overlay[id^="lp"] .lp-opt:disabled { cursor: default !important; }
.quiz-overlay[id^="lp"] .lp-opt:disabled:not(.is-correct):not(.is-wrong) { opacity: .55 !important; }
.quiz-overlay[id^="lp"] .lp-opt.is-correct {
    background: linear-gradient(180deg, #DDFBE8 0%, #9BEBB9 100%) !important;
    border-color: #2FB36A !important;
    color: #145A36 !important;
    box-shadow: 0 3px 0 #2FB36A, 0 6px 12px rgba(47, 179, 106, .25) !important;
    animation: lpPop .35s ease !important;
}
.quiz-overlay[id^="lp"] .lp-opt.is-wrong {
    background: linear-gradient(180deg, #FFE6E1 0%, #FFB8AA 100%) !important;
    border-color: #E5604D !important;
    color: #8A2616 !important;
    box-shadow: 0 3px 0 #E5604D, 0 6px 12px rgba(229, 96, 77, .22) !important;
    animation: lpShake .32s ease !important;
}
@keyframes lpPop { 0% { transform: scale(.94); } 60% { transform: scale(1.05); } 100% { transform: scale(1); } }
@keyframes lpShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* ---------------- phones ---------------- */
@media (max-width: 480px) {
    .quiz-overlay[id^="lp"] .lp-stage { border-radius: 20px !important; padding: 8px 6px 10px !important; margin-bottom: 10px !important; }
    .quiz-overlay[id^="lp"] .lp-hint { font-size: 12.5px !important; }
    .quiz-overlay[id^="lp"] .lp-picker,
.quiz-overlay[id^="lp"] [id$="Options"] { gap: 6px !important; }
    .quiz-overlay[id^="lp"] .lp-opt { min-height: 58px !important; border-radius: 14px !important; }
}
@media (max-width: 340px) {
    .quiz-overlay[id^="lp"] .lp-picker,
.quiz-overlay[id^="lp"] [id$="Options"] { gap: 4px !important; }
    .quiz-overlay[id^="lp"] .lp-let { display: none !important; }
}
/* ---------------- very small phones ---------------- */
@media (max-width: 360px) {
    .quiz-overlay[id^="lp"] .lp-opt { font-size: 15px !important; padding: 8px 1px !important; }
    .quiz-overlay[id^="lp"] .lp-opt.lp-sm, .quiz-overlay[id^="lp"] .lp-opt.lp-wrap { font-size: 13.5px !important; }
}
/* ---------------- tablets and desktops: bigger pictures, roomier chips ---------------- */
@media (min-width: 700px) {
    .quiz-overlay[id^="lp"] .lp-stage { max-width: 600px !important; padding: 14px 14px 16px !important; }
    .quiz-overlay[id^="lp"] .lp-svg { max-height: 360px !important; }
    .quiz-overlay[id^="lp"] .lp-hint { font-size: 15px !important; }
    .quiz-overlay[id^="lp"] .lp-picker,
.quiz-overlay[id^="lp"] [id$="Options"] { gap: 12px !important; }
    .quiz-overlay[id^="lp"] .lp-opt { min-height: 66px !important; }
    .quiz-overlay[id^="lp"] .lp-opt:hover:not(:disabled) { background: linear-gradient(180deg, #FFFFFF 0%, #E9E0FF 100%) !important; }
}
@media (prefers-reduced-motion: reduce) {
    .quiz-overlay[id^="lp"] .lp-strip, .quiz-overlay[id^="lp"] .lp-late { transition: none; }
    .quiz-overlay[id^="lp"] .lp-pulse, .quiz-overlay[id^="lp"] .lp-hop,
    .quiz-overlay[id^="lp"] .lp-opt.is-correct, .quiz-overlay[id^="lp"] .lp-opt.is-wrong { animation: none !important; }
}

/* probe: lets class7-products.js know this file really loaded */
.lp-probe { --lp-loaded: 1; }
/* keep the stage and the chip row a sensible width inside the wide themed popup */
.quiz-overlay[id^="lp"] .lp-picker,
.quiz-overlay[id^="lp"] [id$="Options"] { max-width: 620px !important; margin-left: auto !important; margin-right: auto !important; }
.quiz-overlay[id^="lp"] .lp-stage { margin-left: auto !important; margin-right: auto !important; }
.quiz-overlay[id^="lp"] .lp-hint { text-align: center !important; }
.quiz-overlay[id^="lp"] .lp-opt { word-break: keep-all !important; overflow-wrap: normal !important; hyphens: none !important; -webkit-text-size-adjust: 100% !important; }
/* native-app feel: no text selection on pictures, crisp tap response, smooth momentum scroll in the popup */
.quiz-overlay[id^="lp"] .quiz-modal { -webkit-overflow-scrolling: touch !important; }
.quiz-overlay[id^="lp"] .lp-stage { -webkit-user-select: none !important; user-select: none !important; }

/* the A-D number cards that follow the main picture: kept short so the answer chips stay on screen */
.quiz-overlay[id^="lp"] .lp-stage.lp-compact { margin-top: 0 !important; padding: 8px 8px 8px !important; }
.quiz-overlay[id^="lp"] .lp-stage.lp-compact .lp-svg { max-height: 196px !important; }
.quiz-overlay[id^="lp"] .lp-stage + .lp-stage { margin-top: -4px !important; }