/* ============================================================
   QuizApp – Islamic Green Professional Theme
   Mobile-first, CSS-variable driven for easy product variants
   ============================================================ */

/* Hidden by default — blazor.webassembly.js reveals this (removes the inline
   `display: none` it sets via JS) only when a genuine unhandled exception occurs.
   Without this rule the div in index.html renders as a normal, permanently-visible
   <div> on every single page load regardless of whether anything is actually wrong. */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .reload {
    color: var(--color-primary, #0d7a4f);
    font-weight: 600;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

:root {
    --color-primary: #0d7a4f;
    --color-primary-dark: #1e6b3a;
    --color-primary-light: #1a9b68;
    --color-primary-soft: #e6f5ef;
    --color-bg: #001102;
    --color-card-body: #053819;
    --color-surface: #0c1710;
    --color-border: #d0e0d8;
    --color-text: ghostwhite;
    --color-text-muted: #9db5aa;
    --color-danger: #c0392b;
    --color-success: #27ae60;
    --color-warning: #f39c12;
    --color-gold: #d4a017;
    --color-star: #f1c40f;
    --color-link-on-dark: aqua;
    --font-sans: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --font-arabic: "Noto Naskh Arabic", "Amiri", "Scheherazade New", serif;
    --radius-sm: 0.375rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --shadow-sm: 0 1px 3px rgba(13, 122, 79, 0.08);
    --shadow-md: 0 4px 12px rgba(13, 122, 79, 0.12);
    --header-height: 3.5rem;
    --max-content-width: 720px;
    --nav-icon-size: 24px !important;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }

/* Blazor is an SPA — a hard reload never "refreshes" anything a user would want, it
   just wipes in-memory session/app state. Chrome's native pull-to-refresh gesture is
   too easy to trigger by accident on mobile (a normal scroll swipe overshooting past
   the top), so it's disabled here rather than left to accidentally log people out.
   `none` (not `contain`) on `html` specifically — `html` is the element tied to the
   viewport's own scroll in standards mode, and some Chrome versions only reliably
   suppress the native pull-to-refresh UI with `none`, not the weaker `contain`. */
html {
    overscroll-behavior-y: none;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    line-height: 1.5;
    min-height: 100vh;
}


h1, h2, h3, h4 {
    color: var(--color-primary-dark);
    font-weight: 650;
    margin-top: 0;
}
.page-title { color: var(--color-text); font-size: 1.3rem; font-weight: 600; margin-bottom: 0.4rem; }



a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-dark); text-decoration: underline; }
a.link-on-dark { color: var(--color-link-on-dark); }
a.link-on-dark:hover { color: var(--color-link-on-dark); opacity: 0.8; }
.arabic, [lang="ar"] { font-family: var(--font-arabic); direction: rtl; line-height: 1.8; }


.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: linear-gradient(rgba(0, 255, 111, 0.1), rgba(0, 255, 111, 0.1)), url('../images/Simple mosque silhouette - green roof2.jpg') center/cover no-repeat;
    color: var(--color-text);
}

.question-no-topic-container {
    background: linear-gradient(rgba(0, 255, 111, 0.1), rgba(0, 255, 122, 0.25));
    padding: 5px;
}

.sidebar { color: white; background-color:var(--color-bg); }
.nav-link { color: rgba(255,255,255,0.85) !important; border-radius: var(--radius-sm); padding: 0.6rem 1rem; }
.nav-link:hover, .nav-link.active { background: rgba(255,255,255,0.12); color: white !important; }
main { flex: 1; padding-bottom: 2rem; padding:0px !important;}
.top-row {
    background: linear-gradient(rgba(0, 17, 2, 0.95), rgba(0, 17, 2, 1.0));
    border-color: black;
    border-bottom: 1px solid var(--color-border);
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-inline: 0rem;
    border-top: none;
    border-radius: 25px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom: ridge;
    border-width: 1px;
    margin: 0px !important;
}
.content { max-width: var(--max-content-width); margin: 0 auto; padding: 1.25rem 1rem; }

.card, .question-container {
    background: none !important;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.card-header {
    background: var(--color-primary-soft);
    border-bottom: 1px solid var(--color-border);
    padding: 0.6rem 0.6rem;
    height: 5.0rem;
}

/* Small animated countdown ring (CountdownRing.razor) — drains clockwise via
   stroke-dashoffset, one tick per second, smoothed by the transition below. */
.countdown-ring {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}
.countdown-ring svg { transform: rotate(-90deg); }
.countdown-ring-bg, .countdown-ring-fg {
    fill: none;
    stroke-width: 4;
}
.countdown-ring-bg { stroke: rgba(255, 255, 255, 0.18); }
.countdown-ring-fg {
    stroke: var(--color-primary-light);
    stroke-linecap: round;
    transition: stroke-dashoffset 1s linear, stroke 0.3s ease;
}
.countdown-ring.countdown-ring-danger .countdown-ring-fg { stroke: var(--color-danger); }
.countdown-ring-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 700;
    color: mediumvioletred;
}

.card-header-small {
    background: #032106;
    border-bottom: 1px solid var(--color-border);
    color:white !important;
    padding: 0.6rem 0.6rem;
    height: 2.6rem !important;
}

.card-header h4 { margin: 0; font-size: 1.15rem; }
.card-header-small h4 {
    margin: 0;
    font-size: 1.15rem;
    color: white !important;
}

.card-body {
    padding: 1.25rem;
    background: linear-gradient(rgba(0, 255, 111, 0.1), rgba(0, 255, 122, 0.25)) !important;
}
.card-body-solid {
    padding: 1.25rem;
    background-color: #e4fae7 !important;
    color:black !important;
}

.question-meta { color: #000; font-weight: bold; }

.video-embed-16x9 {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;
}
.video-embed-16x9 iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.topics-list { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; }
.topic-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    background: var(--color-surface);
    color: var(--color-text);
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.topic-card:hover { border-color: var(--color-primary-light); background: var(--color-primary-dark); color: var(--color-text); text-decoration: none; }
.topic-card-name { font-weight: 600; }
.topic-card-count { color: var(--color-text-muted); font-size: 0.9rem; }

.answer-options { display: flex; flex-direction: column; gap: 0.6rem; }
.answer-card {
    display: flex; align-items: flex-start; gap: 0.75rem;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.9rem 1rem;
    background: var(--color-surface);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
    user-select: none;
}
/* must check the backcolor when hovering form selecting ::after darkgreen */
.answer-card:hover { border-color: var(--color-primary-light); background: var(--color-primary-dark); }
.answer-card.selected {
    border-color: var(--color-primary);
    background: var(--color-primary-dark);
    box-shadow: 0 0 0 3px rgba(13, 122, 79, 0.18);
}


.answer-card.correct { border-color: var(--color-success); background: #e8f8ef; }
.answer-card.incorrect { border-color: var(--color-danger); background: #fdecea; }
.answer-card .form-check-input { margin-top: 0.25rem; accent-color: var(--color-primary); }

.true-false .btn { min-width: 7rem; font-weight: 600; }
.true-false .btn.active { background: var(--color-primary); border-color: var(--color-primary); color: white; }

.btn-primary {
    background-color: var(--color-primary); border-color: var(--color-primary);
    color: white; font-weight: 600; border-radius: var(--radius-md);
    padding: 0.6rem 1.4rem; transition: background-color 0.15s;
}
.btn-primary:hover:not(:disabled) { background-color: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.btn-primary:disabled { opacity: 0.65; }
.btn-outline-primary { color: var(--color-primary); border-color: var(--color-primary); border-radius: var(--radius-md); }
.btn-outline-primary:hover { background: var(--color-primary); color: white; }
.btn-secondary { background: #6c757d; border-color: #6c757d; color: white; border-radius: var(--radius-md); }

.score-display {
    font-weight: 400;
    color: var(--color-text);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
}
    .score-display::before {
        font-size: 1.2rem;
        content: "★";
        color: var(--color-gold);
    }


.tokens-display {
    font-weight: 400;
    color: var(--color-text);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    /* .top-row (MainLayout.razor) lays Tokens/Points out side-by-side (flex row), not
       stacked — this needs a right margin, not a bottom one, to create visible spacing. */
    margin: 0 1.25rem 0 0;
}

.level-display {
    font-weight: 400;
    color: var(--color-text);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 1.25rem 0 0;
}
    .level-display::before {
        font-size: 1.2rem;
        content: "⬆";
        color: var(--color-primary-light);
    }

/* .top-row is justify-content: flex-end, so its children pack to the right by default.
   margin-right: auto claims all the leftover space on this child's right side, which
   pushes .back-home itself to the far left while leaving Tokens/Points packed to the
   right as before. !important because the element also carries Bootstrap's "m-0"
   utility class (margin: 0 !important), which would otherwise win. */
.back-home {
    margin-right: auto !important;
}

    .tokens-display::before {
        font-size: 1.0rem;
        content: "🪙";
        color: var(--color-gold);
    }


.alert-success { background: #e8f8ef; border: 1px solid var(--color-success); color: #1e6b3a; border-radius: var(--radius-md); }
.alert-danger { background: #fdecea; border: 1px solid var(--color-danger); color: #922b21; border-radius: var(--radius-md); }

.media-item { margin-bottom: 1rem; }
.media-caption { font-size: 0.9rem; color: var(--color-text-muted); margin-bottom: 0.4rem; }
.audio-player .btn { display: inline-flex; align-items: center; gap: 0.4rem; }

.sequence-list, .matching-grid { display: flex; flex-direction: column; gap: 0.5rem; }
.sequence-item, .matching-item {
    border: 2px solid var(--color-border); border-radius: var(--radius-md);
    padding: 0.75rem 1rem; background: var(--color-surface); cursor: grab;
}
.sequence-item.dragging { opacity: 0.6; border-style: dashed; }
.matching-row {
    display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.75rem;
    align-items: center; margin-bottom: 0.6rem;
}
.matching-left, .matching-right {
    border: 2px solid var(--color-border); border-radius: var(--radius-md);
    padding: 0.6rem 0.9rem; background: var(--color-surface); text-align: center;
}
.matching-left.selected, .matching-right.selected {
    border-color: var(--color-primary); background: var(--color-primary-soft);
}
.matching-left.disabled, .matching-right.disabled {
    pointer-events: none; opacity: 0.7;
}

/* ============================================================
   Answer feedback pop-up (QuestionContainer / AnswerFeedbackPopup)
   A bottom sheet fixed to the viewport — its bottom edge is always the
   screen's bottom edge by construction (position: fixed + bottom: 0),
   no viewport-height math needed. Diagonal top corners via clip-path
   instead of the app's usual rounded style.
   ============================================================ */
.answer-feedback-backdrop {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1040;
    /* Visual dimming only — answer options are already disabled via the Disabled
       parameter once feedback is showing, so this doesn't need to intercept clicks.
       Without this, it silently swallows clicks on anything still visible beneath it
       (e.g. QuizPlay's own Prev/Next bar), which looks like a dead, broken button. */
    pointer-events: none;
}
.answer-feedback-popup {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1041;
    max-width: var(--max-content-width);
    margin-top: 0 auto;
    margin-left: 0 auto;
    margin-right: 0 auto;
    margin-bottom: 1px;
    background: var(--color-surface);
    border-width: 3px;
    border-style: outset;
    border-color: var(--color-border);
    border-radius: 6px;
    box-shadow: var(--shadow-md);
    padding: 1.5rem 1.5rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
    animation: feedback-slide-up 0.2s ease-out;
    /*clip-path: polygon( 10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px );*/
}
@keyframes feedback-slide-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
.feedback-stars {
    text-align: center;
    font-size: 2rem;
    letter-spacing: 0.25em;
    margin-bottom: 0.5rem;
}
.feedback-stars .star-filled { color: var(--color-gold); }
.feedback-stars .star-empty { color: var(--color-text-muted); opacity: 0.4; }
.feedback-points {
    text-align: center;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: var(--color-gold);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
    margin-bottom: 0.5rem;
    /* Delayed to start after .answer-feedback-popup's own 0.2s slide-up finishes —
       otherwise the pop's dramatic small-to-large growth happens while the popup is
       still off-screen sliding into view, so only its already-mostly-grown tail end
       is visible. `backwards` holds the 0% keyframe (scaled down, invisible) during
       the delay instead of flashing the full-size text before the pop starts. */
    animation: pointsPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s backwards;
}
@keyframes pointsPop {
    0% { transform: scale(0.4); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
.feedback-result-row {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    font-size: 1.25rem; font-weight: 650; margin-bottom: 0.5rem;
}
.answer-feedback-popup.is-correct .feedback-result-row { color: var(--color-success); }
.answer-feedback-popup.is-incorrect .feedback-result-row { color: var(--color-danger); }
.feedback-explanation {
    color: var(--color-text); text-align: center; margin: 0 0 1rem;
}
.feedback-next-btn { border-width: 1px; border-style: outset; }

.form-control {
    border: 1.5px solid var(--color-border); 
    border-radius: var(--radius-md); 
    padding: 0.6rem 0.9rem;
}
.form-control:focus {
    border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(13, 122, 79, 0.15); outline: none;
}
.form-control-rr {
    flex: 1;
    min-width: 180px !important; /* reasonable minimum on small viewports */
    border: 1.5px solid var(--color-border);
    padding: 0.6rem 0.9rem;
    border-top-right-radius: var(--radius-md) !important;
    border-bottom-right-radius: var(--radius-md) !important;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    padding: 0.6rem 0.9rem;
    color: black;
}

@media (max-width: 640px) {
    .content { padding: 1rem 0.75rem; }
    .card-header h4 { font-size: 1.05rem; }
    .answer-card { padding: 0.8rem; }
    .matching-row { grid-template-columns: 1fr; gap: 0.35rem; }
}

.text-muted { color: var(--color-text-muted) !important; }
.mt-3 { margin-top: 1rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.d-grid { display: grid; }
.gap-2 { gap: 0.5rem; }
.col-6 { width: 50%; }
.mx-auto { margin-left: auto; margin-right: auto; }
.w-100 { width: 100%; }
.img-fluid { max-width: 100%; height: auto; }
.rounded { border-radius: var(--radius-md); }
.rounded-right {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

.d-flex { display: flex; }
.align-items-center { align-items: center; }
.justify-content-between { justify-content: space-between; }
.btn-group-sm .btn { padding: 0.2rem 0.5rem; font-size: 0.85rem; }
.list-unstyled { list-style: none; padding-left: 0; }
.opacity-50 { opacity: 0.5; }
.row { display: flex; flex-wrap: wrap; margin: 0 -0.5rem; }
.g-2 > * { padding: 0 0.5rem; }
.col-6 { flex: 0 0 50%; max-width: 50%; }

/* ---------- Arabic font loading ---------- */
/* Primary: Noto Naskh Arabic (loaded via Google Fonts in index.html) */
/* Fallback stack already defined in :root --font-arabic */

.arabic,
[lang="ar"],
.rtl {
    font-family: "Noto Naskh Arabic", "Amiri", "Scheherazade New", "Traditional Arabic", serif;
    direction: rtl;
    text-align: right;
    line-height: 1.9;
    letter-spacing: 0;
}

/* Mixed content: Arabic segments inside English questions */
.mixed-ar {
    font-family: "Noto Naskh Arabic", "Amiri", serif;
    direction: rtl;
    display: inline-block;
    margin-inline: 0.15em;
}

/* Ensure option text and headers can contain Arabic cleanly */
.answer-card label,
.card-header h4,
.instruction,
.sequence-item,
.matching-left,
.matching-right {
    font-family: var(--font-sans), "Noto Naskh Arabic", "Amiri", serif;
}

/* Text sitting on the dark card-body background needs an explicit light color —
   Bootstrap's own default form-check-label/body text color otherwise wins (it sets an
   explicit color rather than just inheriting), rendering these almost unreadable against
   the dark green background. card-header h4 is NOT included here on purpose: it sits on
   the light --color-primary-soft header background and needs its existing darker color. */
.answer-card label,
.answer-card .form-check-label,
.instruction,
.sequence-item,
.matching-left,
.matching-right,
.true-false .btn,
.audio-player,
.text-passage {
    color: gainsboro !important;
}
.answer-card.correct label,
.answer-card.correct .form-check-label { color: #1e6b3a !important; }
.answer-card.incorrect label,
.answer-card.incorrect .form-check-label { color: #922b21 !important; }

/* ---------- Sequence drag-and-drop polish ---------- */
.sequence-item {
    cursor: grab;
    transition: box-shadow 0.15s, border-color 0.15s, transform 0.1s;
}
.sequence-item:active {
    cursor: grabbing;
}
.sequence-item.dragging {
    opacity: 0.55;
    border-style: dashed;
    transform: scale(0.98);
}
.sequence-item.drag-over {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(13, 122, 79, 0.2);
}
.drag-handle {
    color: var(--color-text-muted);
    font-size: 1.1rem;
    cursor: grab;
    user-select: none;
    padding: 0 0.25rem;
}
/* 44px is the standard minimum touch-target size (WCAG 2.5.5 / Apple & Google HIG) —
   the previous .btn-group-sm sizing (0.2rem padding, 0.85rem font) was well under that,
   easy to miss or mis-tap on a phone. Sequence questions lean on these buttons more on
   mobile, where native HTML5 drag-and-drop doesn't work at all (touch doesn't fire
   dragstart/dragover/drop, regardless of the draggable attribute). */
.sequence-move-buttons .btn {
    min-width: 44px;
    min-height: 44px;
    font-size: 1.4rem;
    line-height: 1;
    padding: 0.4rem 0.75rem;
}
.flex-grow-1 { flex-grow: 1; }
.ms-2 { margin-inline-start: 0.5rem; }


/* Normalize navbar item vertical alignment */
.navbar-nav .nav-item {
    display: flex;
    align-items: stretch;
}

    /* Make both <a.nav-link> and <button.nav-link> identical in vertical layout */
    .navbar-nav .nav-item > .nav-link {
        display: flex;
        align-items: center;
        line-height: 1.5;
        margin: 0;
    }

/* Keep logout button reset */
.logout-btn {
    appearance: none;
    -webkit-appearance: none;
    background: transparent !important;
    border: 0;
    color: rgba(255,255,255,0.85) !important;
    padding: 0.6rem 1rem;
    border-radius: var(--radius-sm);
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    /* ensure same typography as nav links */
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: 1.5;
}

    /* restore hover/focus behavior */
    .logout-btn:hover,
    .logout-btn:focus-visible {
        background: rgba(255,255,255,0.12) !important;
        color: #fff !important;
    }

/* Arabic passage/paragraph shown above a question's media (see QuestionContainer.razor).
   Noto Naskh Arabic is loaded via Google Fonts in index.html; Amiri and native system
   Arabic fonts are fallbacks in case the web font fails to load. */
.arabic-text {
    font-family: 'Scheherazade New', 'Noto Naskh Arabic', 'Amiri', 'Traditional Arabic', 'Segoe UI', serif;
    font-size: 28px;
    font-weight: bold;
    line-height: 1.9;
    direction: rtl;
    text-align: right;
    margin-bottom: 1rem;
}

/* ============================================================
   Auth forms (Login.razor / Register.razor) — previously two
   near-duplicate embedded <style> blocks per page, consolidated
   into one shared set of classes used by both.
   ============================================================ */
.form-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.form-row .form-control {
    flex: 1;
    min-width: 180px; /* reasonable minimum on small viewports */
}
.form-row-label {
    display: inline-block;
    width: 140px;
    border-radius: var(--radius-md);
}

/* Numeric stepper (Donation amount, etc.) — a plain text input's native spinner
   arrows are effectively invisible against this app's styling and don't render at
   all on mobile, so this replaces them with large, unambiguous tap targets. */
.amount-stepper {
    display: flex;
    align-items: stretch;
    flex: 1;
    min-width: 180px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.amount-stepper-btn {
    flex: 0 0 3rem;
    min-width: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 0;
    font-size: 1.1rem;
    padding: 0;
}
.amount-stepper-btn:hover:not(:disabled) { background: var(--color-primary-dark); }
.amount-stepper-btn:disabled { opacity: 0.5; }
.amount-stepper-input {
    flex: 1;
    min-width: 0;
    border: none;
    border-left: 1.5px solid var(--color-border);
    border-right: 1.5px solid var(--color-border);
    border-radius: 0;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: black;
    padding: 0.6rem 0.5rem;
}
.amount-stepper-input:focus {
    outline: none;
    box-shadow: none;
    background: var(--color-primary-soft);
}

/* ============================================================
   Quiz play page (QuizPlay.razor)
   ============================================================ */
.quiz-nav-btn {
    background-color: #2f3e46;
    border-color: #2f3e46;
    color: #ffffff;
    width: 150px;
    padding-top: 0.40rem;
    padding-bottom: 0.40rem;
    min-height: 1.25rem;
    line-height: 1.2;
}
.quiz-nav-btn:hover:not(:disabled),
.quiz-nav-btn:focus-visible:not(:disabled) {
    background-color: #3d4f58;
    border-color: #3d4f58;
    color: #ffffff;
}
.quiz-nav-btn:disabled {
    background-color: #adb5bd;
    border-color: #adb5bd;
    color: #f8f9fa;
    opacity: 1;
}

/* ============================================================
   Leaderboard page (Leaderboard.razor)
   ============================================================ */
.leaderboard-wrap {
    width: 100%;
    background-color: transparent !important;
    margin: 0px !important;
    padding: 0px !important;
}
.leaderboard-table {
    color: var(--color-text);
}
.leaderboard-table th,
.leaderboard-table td {
    text-align: left;
    border-bottom: 1px solid #d8ead8;
}
.leaderboard-table th.col-rank, .leaderboard-table td.col-rank { width: 70px; }
.leaderboard-table th.col-player, .leaderboard-table td.col-player { width: 300px; }
.leaderboard-table th.col-country, .leaderboard-table td.col-country { width: 300px; }
.leaderboard-table th.col-points, .leaderboard-table td.col-points { width: 70px; }
.leaderboard-table tbody td:last-child { text-align: center; }
.leaderboard-table tbody tr:nth-child(odd) { background-color: #02210e; }
.leaderboard-table tbody tr:nth-child(even) { background-color: #043a1c; }
.leaderboard-you-badge { color: gainsboro; }

/* ============================================================
   Question feedback alert (QuestionContainer.razor)
   ============================================================ */
.feedback-alert { padding-left: 1rem; padding-right: 1rem; }

/* ============================================================
   Audio player (MediaPlayer.razor)
   ============================================================ */
.audio-player-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.audio-play-btn {
    height: 40px;
    padding: 0.25rem 0.5rem;
    flex: 0 0 40%;
    background-color: dodgerblue;
    border-color: darkblue;
}
.audio-element {
    height: 40px;
    width: 40%;
    max-width: 250px;
    display: inline-block;
}

/* ============================================================
   Mobile-first nav icons (NavMenu.razor) — 48x48 icon glyphs via
   Bootstrap Icons (linked in index.html), with a text label that
   hides below the icon on narrow viewports so the nav stays
   compact and thumb-friendly on mobile.
   ============================================================ */
.nav-icon-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    padding: 0.4rem 0.6rem !important;
    min-width: var(--nav-icon-size) !important;
}
.nav-icon-link .bi {
    font-size: var(--nav-icon-size) !important;
    line-height: 1;
}
.nav-icon-label {
    font-size: 0.7rem;
    white-space: nowrap;
}

@media (max-width: 480px) {
    :root { --nav-icon-size: 24px !important; }
    .nav-icon-label { display: none; }
}

/* Account dropdown (login/avatar icon → Logout / Settings / About / Buy Subscription) */
.account-menu { position: relative; }
.account-menu-toggle {
    background: transparent;
    border: 0;
    cursor: pointer;
    position: relative;
    z-index: 1051; /* above .account-menu-backdrop so it stays independently clickable */
}
/* Transparent full-viewport click-catcher — see NavMenu.razor's account-menu-backdrop
   comment. Sits above the rest of the page but below the toggle button/panel. */
.account-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1049;
    background: transparent;
}
/* position:fixed anchored to the viewport corner — deliberately NOT position:absolute
   relative to .account-menu. The mobile collapsed navbar reflows this button's ancestor
   chain (see NavMenu.razor comment on why the two <ul> lists got merged into one), and
   an absolute-positioned panel inherited whatever offset quirks that produced, ending up
   rendered mostly off-screen. Anchoring to the viewport instead makes this immune to any
   ancestor's layout state. */
.account-menu-panel {
    position: fixed;
    top: 4.25rem;
    right: 0.75rem;
    left: auto;
    max-width: calc(100vw - 1.5rem);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    min-width: 200px;
    width: max-content;
    z-index: 1050;
    overflow: hidden;
}
.account-menu-panel a,
.account-menu-panel button {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.7rem 1rem;
    background: transparent;
    border: 0;
    color: var(--color-text) !important;
    text-align: left;
    cursor: pointer;
    font-size: 0.95rem;
}
.account-menu-panel a:hover,
.account-menu-panel button:hover {
    background: rgba(255, 255, 255, 0.08);
    text-decoration: none;
}
.account-menu-panel .bi { font-size: 1.1rem; width: 1.4rem; text-align: center; }

/* ============================================================
   Settings page account details (Settings.razor)
   ============================================================ */
.settings-list {
    display: grid;
    grid-template-columns: 160px 1fr;
    row-gap: 0.6rem;
    column-gap: 1rem;
    margin: 0;
}
.settings-list dt {
    color: var(--color-text-muted);
    font-weight: 600;
}
.settings-list dd {
    margin: 0;
}
@media (max-width: 480px) {
    .settings-list {
        grid-template-columns: 1fr;
        row-gap: 0.2rem;
    }
    .settings-list dd {
        margin-bottom: 0.5rem;
    }
}

.NavBarCustomBackGround {
    background-color:rgb(10, 20, 10); /*linear-gradient(rgba(13, 122, 79, 0.25), rgba(13, 122, 79, 0.5));*/
    border-color: darkgreen;
}

/* Country picker (Register) + flag rendering (Leaderboard, Settings) */
.country-select { width: 100%; }
.country-select .dropdown-toggle::after { float: right; margin-top: 0.5em; }
.country-select-menu {
    width: 100%;
    min-width: 280px;
    max-height: 340px;
    overflow-y: auto;
    padding-top: 0.5rem;
}
.country-select-list { max-height: 260px; overflow-y: auto; }
.fi { border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15); }

.white-border{
    border: 1px solid white;
}

.labeltext-container {
    padding: .25rem;
    background-color: var(--color-card-body);
    border-radius: var(--radius-md);
}

/* Animation effects */

.attention-div {
    border: 2px solid whitesmoke;
    animation: pulse-border 5.0s infinite;
}

@keyframes pulse-border {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(0, 123, 255, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
    }
}

/* The container hiding the text until it slides into position */
.slide-in-container {
    overflow: hidden;
}

/* The text animation class */
.slide-in-text {
    animation: slideInLeft 0.9s ease-out forwards;
}

/* The motion blueprint */
@keyframes slideInLeft {
    0% {
        transform: translateX(-100%); /* Start completely off-screen to the left */
        opacity: 0; /* Invisible at the start */
    }

    100% {
        transform: translateX(0); /* End at its normal position */
        opacity: 1; /* Fully visible */
    }
}