/* ══════════════════════════════════════════════════════════════════
   PencilBox Frontend — Premium Layer (FINAL)
   --------------------------------------------------------------------
   Loads AFTER frontend/css/quiz.css. Brand palette matches the admin
   panel (navy #2c3e6b/#16213e, gold #f6c343/#d99a0a, red #e6394f/
   #b91c2c, gray #9ca3af/#6b7280) rather than this frontend's older,
   separate palette — kept consistent site-wide per your logo colors.

   HOW TO INCLUDE:
     1. Save as: public/frontend/css/frontend-premium.css
     2. In resources/views/layouts/frontend.blade.php <head>, right
        after the existing quiz.css link:
          <link rel="stylesheet" href="{{ asset('frontend/css/frontend-premium.css') }}">
   ══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   ROOT TOKEN OVERRIDE — this frontend's OWN design system (used by
   start.blade.php, result.blade.php, lobby.blade.php, etc.) already
   runs on CSS custom properties: --navy, --gold/--gold-tint/
   --gold-deep, --green/--green-tint, --maroon/--maroon-tint. Since
   those are plain CSS variables, redefining them HERE (loaded after
   quiz.css) recolors every page that uses them — inline
   stroke="var(--green)" SVGs included — without editing those
   templates at all.

   Mapping: --navy/--gold already roughly matched the brand, just
   tightened to the exact hex. --green (no true green in the brand
   palette) → gold, since it was always used for "positive/good"
   states (pass score, open-now banner, checkmarks) — same role gold
   already plays everywhere else on the site. --maroon → brand red,
   since it was always the "danger/incorrect/closed" color already.
   ══════════════════════════════════════════════════════════════════ */
:root {
    --navy: #2c3e6b;
    --gold: #f6c343;
    --gold-tint: #fdf3d9;
    --gold-deep: #d99a0a;
    --green: #d99a0a;
    --green-tint: #fdf3d9;
    --maroon: #b91c2c;
    --maroon-tint: #fdeaec;
}

/* ── attempt.blade.php / quiz-play.js — answer option colors and
   question-type badges are hardcoded hex in that file's own <style>
   block (not CSS variables), so they need a direct override here to
   land on the brand navy/gold/red/gray palette instead of the
   unrelated teal/orange/purple/olive/pink + blue/purple/teal/amber
   set they shipped with. Overriding here means quiz-play.js itself
   never needs to change — it only ever assigns these class NAMES,
   never the colors. */
.qp-opt-color-0 {
    background: #6b7ba8 !important;
}

.qp-opt-color-1 {
    background: #d99a0a !important;
}

.qp-opt-color-2 {
    background: #e6394f !important;
}

.qp-opt-color-3 {
    background: #6b7280 !important;
}

.qp-opt-color-4 {
    background: #8a5a1a !important;
}

.qp-type-single_choice {
    background: #2c3e6b !important;
    color: #fff !important;
}

.qp-type-multiple_choice {
    background: linear-gradient(135deg, #52606d, #374151) !important;
    color: #fff !important;
}

.qp-type-matching {
    background: #e6394f !important;
    color: #fff !important;
}

.qp-type-true_false {
    background: #f6c343 !important;
    color: #16213e !important;
}

/* Correct-answer feedback — a SCOPED exception to the --green→gold
   remap above. Everywhere else (start.blade.php's pass-score badge,
   checkmarks, etc.) gold reasonably stands in for "no true green in
   the brand palette", but here "correct answer" is such a strong
   universal green convention that keeping it gold (indistinguishable
   from the option's own normal color) actively hurt the feedback —
   it didn't read as "you got this right" at a glance. */
.qp-option-row.qp-correct {
    background: #16a34a !important;
}

/* Selected-answer ring/checkmark — was gold (var(--gold)), which
   collided with option-1's own gold background (qp-opt-color-1),
   making the "selected" indicator invisible on that one option. White
   contrasts against every option color (navy-slate, gold, red, gray,
   brown), so this works universally regardless of which color slot
   the selected option happens to land on. */
.qp-option-row.qp-selected {
    box-shadow: inset 0 0 0 3px #fff !important;
}

.qp-option-row.qp-selected::after {
    background: #fff !important;
    color: #16213e !important;
}

/* ── attempt.blade.php — premium header (progress row + top controls).
   These are two separate sibling <div>s in the actual markup (no
   shared wrapper to touch), so "one unified card" is achieved by
   giving both the same background/shadow/side-padding and removing
   the gap between them — they read as one continuous surface without
   any blade/JS changes. ── */
.qp-progress-row {
    background: #fff;
    border-radius: 16px 16px 0 0;
    padding: 14px 18px 6px;
    margin-bottom: 0 !important;
    box-shadow: 0 4px 16px rgba(22, 33, 62, .08);
}

.qp-top-controls {
    background: #fff;
    border-radius: 0 0 16px 16px;
    padding: 6px 18px 14px !important;
    box-shadow: 0 4px 16px rgba(22, 33, 62, .08);
}

.qp-progress-track {
    height: 9px !important;
    background: #eef1f5 !important;
}

.qp-progress-fill {
    background: linear-gradient(90deg, #f6c343, #d99a0a) !important;
    box-shadow: 0 0 10px rgba(217, 154, 10, .5);
    position: relative;
}

.qp-progress-pct {
    font-weight: 800 !important;
    color: #8a5a1a !important;
}

.qp-mute-btn {
    background: linear-gradient(135deg, #2c3e6b, #16213e) !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(22, 33, 62, .25);
}

.qp-quiz-title-sm {
    font-weight: 700 !important;
    color: #16213e !important;
}

.qp-body,
.site-footer,
.topbar-wrap,
.infostrip {
    position: relative;
    z-index: 1;
}

/* ── Whole-page decorative background blobs — the divs for these
   (.bg-blob / .bg-blob-1..4) live in layouts/frontend.blade.php, fixed
   to the viewport corners behind every page's content.

   Uses a radial-gradient fade instead of filter:blur() — animating a
   blurred (filter) element's transform is what caused the torn/
   glitchy edges some browsers showed during the drift animation.
   A radial-gradient achieves the same soft/blurred-edge LOOK without
   an actual blur filter, so the transform animation composites
   cleanly with no rendering artifacts. */
.bg-blob {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    animation: pbxBlobFloat 10s ease-in-out infinite;
}

/* Colors matched exactly to the reference image: cream/tan (top-left),
   sage green (top-right), dusty pink (bottom-right), pale lavender-gray
   (bottom-left) — not the admin brand palette, this is purely
   decorative background texture on the student-facing quiz pages. */
.bg-blob-1 {
    width: 260px;
    height: 260px;
    top: -60px;
    left: -60px;
    background: radial-gradient(circle, rgba(244, 223, 168, .55) 0%, rgba(244, 223, 168, .55) 50%, rgba(244, 223, 168, 0) 100%);
}

.bg-blob-2 {
    width: 300px;
    height: 300px;
    top: -80px;
    right: -80px;
    background: radial-gradient(circle, rgba(168, 192, 154, .48) 0%, rgba(168, 192, 154, .48) 50%, rgba(168, 192, 154, 0) 100%);
}

.bg-blob-3 {
    width: 240px;
    height: 240px;
    bottom: -60px;
    right: 80px;
    background: radial-gradient(circle, rgba(232, 169, 170, .48) 0%, rgba(232, 169, 170, .48) 50%, rgba(232, 169, 170, 0) 100%);
}

.bg-blob-4 {
    width: 180px;
    height: 180px;
    bottom: -40px;
    left: 60px;
    background: radial-gradient(circle, rgba(184, 184, 200, .48) 0%, rgba(184, 184, 200, .48) 50%, rgba(184, 184, 200, 0) 100%);
}

.bg-blob-1 {
    animation-delay: 0s;
}

.bg-blob-2 {
    animation-delay: 2.5s;
}

.bg-blob-3 {
    animation-delay: 5s;
}

.bg-blob-4 {
    animation-delay: 7.5s;
}

/* Gentle drift — translate only (no blur filter, no scale), so it
   composites cleanly with no tearing/glitching. */
@keyframes pbxBlobFloat {

    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(14px, -12px, 0);
    }
}

@media (max-width: 600px) {

    .bg-blob-1,
    .bg-blob-2 {
        width: 140px;
        height: 140px;
    }

    .bg-blob-3,
    .bg-blob-4 {
        width: 120px;
        height: 120px;
    }
}

.infostrip {
    background: linear-gradient(90deg, #16213e, #1c2a4d);
}

.info-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.info-ic {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    background: rgba(246, 195, 67, .18) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    flex-shrink: 0;
}

/* Force the icon glyph itself gold — a theme rule elsewhere was
   giving the phone icon specifically its own color (showing pink
   instead of matching the clock/email icons), breaking the
   consistent look. !important + targeting the icon directly wins
   over that. */
.info-ic i,
.info-ic .icon {
    color: #f6c343 !important;
}

.socials a {
    transition: all .15s;
}

.socials a:hover {
    transform: translateY(-2px);
}

/* ── start.blade.php / result.blade.php — a couple of spots use a
   hardcoded second gradient color instead of the --navy variable, so
   the :root override above doesn't reach them on its own. ── */
.qs-icon-badge {
    background: linear-gradient(135deg, #2c3e6b 0%, #16213e 100%) !important;
    box-shadow: 0 12px 24px -8px rgba(22, 33, 62, .4) !important;
}

.qs-stat-blue {
    background: #eaeef5 !important;
    color: #16213e !important;
}

/* Explicit brand mapping for the 4 stat tiles (was leaning on the
   --green/--maroon variable override alone) — Questions=navy info,
   Duration=gold neutral-positive, Pass score=gold (the "good" tier
   color everywhere else on the site), Attempts=red (matches the
   quiz-card "Live/danger" language, since "limited attempts" is the
   more cautionary stat of the four). */
.qs-stat-gold {
    background: #fdf3d9 !important;
    color: #8a5a1a !important;
}

.qs-stat-green {
    background: #fdf3d9 !important;
    color: #8a5a1a !important;
}

.qs-stat-maroon {
    background: #fdeaec !important;
    color: #b91c2c !important;
}

.qs-schedule-open {
    background: #fdf3d9 !important;
    color: #8a5a1a !important;
}

.qs-schedule-closed {
    background: #fdeaec !important;
    color: #b91c2c !important;
}

.qs-schedule-waiting {
    background: #eaeef5 !important;
    color: #16213e !important;
}

.qs-btn-start {
    transition: transform .15s, box-shadow .15s !important;
}

.qs-btn-start:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 24px -8px rgba(22, 33, 62, .5) !important;
}

/* New: subject/category tag + certificate/leaderboard badges — reuses
   the SAME classes already defined for the quiz listing cards
   (.card-subject-tag / .feature-badge), so this page visually matches
   the card it was clicked FROM instead of introducing a third look. */
.qs-subject-tag {
    margin-bottom: 6px;
}

.qs-badges-row {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin: 4px 0 18px;
    flex-wrap: wrap;
}

.topbar-wrap {
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 16px rgba(22, 33, 62, .08);
    border-bottom: 1px solid #f1f2f7;
    position: sticky;
    top: 0;
    z-index: 50;
}

.topbar {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}

.brand {
    transition: transform .2s;
}

.brand:hover {
    transform: scale(1.03);
}

.mainnav a {
    position: relative;
    transition: color .15s;
}

.mainnav a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #f6c343, #d99a0a);
    border-radius: 2px;
    transition: width .25s;
}

.mainnav a:hover::after,
.mainnav a.active::after {
    width: 100%;
}

/* User chip (logged-in avatar dropdown trigger) */
.user-chip-btn {
    box-shadow: 0 2px 8px rgba(22, 33, 62, .06);
    transition: box-shadow .15s;
}

.user-chip-btn:hover {
    box-shadow: 0 4px 14px rgba(22, 33, 62, .1);
}

.user-avatar {
    background: linear-gradient(135deg, #2c3e6b, #16213e) !important;
    border: 2px solid #f6c343;
}

.cta-mini {
    background: linear-gradient(135deg, #f6c343, #d99a0a) !important;
    color: #16213e !important;
    border-radius: 999px !important;
    padding: 10px 24px !important;
    font-weight: 800 !important;
    font-size: 13.5px !important;
    letter-spacing: .01em;
    box-shadow: 0 6px 16px rgba(217, 154, 10, .3);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: transform .15s, box-shadow .15s;
    text-decoration: none !important;
}

.cta-mini:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(217, 154, 10, .4);
    color: #16213e !important;
}

.cta-mini:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(217, 154, 10, .3);
}


/* ── Hero ── */
.hero-banner {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #16213e, #2c3e6b) !important;
}

.hero-blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.hero-blob-1 {
    width: 320px;
    height: 320px;
    top: -100px;
    left: 10%;
    background: radial-gradient(circle, rgba(246, 195, 67, .35) 0%, rgba(246, 195, 67, 0) 70%);
}

.hero-blob-2 {
    width: 280px;
    height: 280px;
    bottom: -120px;
    right: 8%;
    background: radial-gradient(circle, rgba(230, 57, 79, .28) 0%, rgba(230, 57, 79, 0) 70%);
}

@media (max-width: 600px) {
    .hero-blob-1 {
        width: 180px;
        height: 180px;
        top: -40px;
        left: -30px;
    }

    .hero-blob-2 {
        width: 160px;
        height: 160px;
        bottom: -60px;
        right: -40px;
    }
}

.hero-grid {
    position: relative;
    z-index: 1;
}

.eyebrow {
    color: #f6c343 !important;
}

.headline em {
    color: #f6c343 !important;
}

.orbit-core {
    box-shadow: 0 12px 28px -10px rgba(22, 33, 62, .35);
}

.orbit-node {
    animation: pbxFloat 3.6s ease-in-out infinite;
}

.orbit-node.n1 {
    animation-delay: 0s;
}

.orbit-node.n2 {
    animation-delay: .5s;
}

.orbit-node.n3 {
    animation-delay: 1s;
}

.orbit-node.n4 {
    animation-delay: 1.5s;
}

.orbit-node.n5 {
    animation-delay: 2s;
}

@keyframes pbxFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }
}


/* ── Search dock ── */
.search-dock-wrap {
    margin-bottom: 20px;
}

.search-dock {
    box-shadow: 0 10px 30px -12px rgba(22, 33, 62, .18) !important;
    border-radius: 16px !important;
}

.search-dock .filter:focus,
.search-card:focus-within {
    box-shadow: 0 0 0 3px rgba(246, 195, 67, .25);
}

/* Access code box — ALWAYS visible, sits directly under the search
   card with a clear, consistent gap (not crammed against it). */
.code-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fdf3d9;
    border: 1.5px dashed #d99a0a;
    border-radius: 12px;
    padding: 13px 18px;
    margin: 20px 0;
}

.code-box i {
    color: #8a5a1a;
    font-size: 17px;
    flex-shrink: 0;
}

.code-box-label {
    font-size: 12.5px;
    font-weight: 700;
    color: #8a5a1a;
    white-space: nowrap;
}

.code-box input {
    flex: 1;
    min-width: 100px;
    border: 1px solid #f6d998;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    background: #fff;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.code-box input:focus {
    outline: none;
    border-color: #d99a0a;
}

.code-box button {
    background: linear-gradient(135deg, #f6c343, #d99a0a);
    border: none;
    color: #16213e;
    font-weight: 800;
    font-size: 12.5px;
    padding: 9px 16px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: transform .15s;
}

.code-box button:hover {
    transform: translateY(-1px);
}

/* Category chips — clear gap above (from the code box) AND below
   (before whatever comes next: active-filter chips or the notice bar). */
.chip-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin: 0 0 20px;
    padding-bottom: 4px;
}

.chip {
    flex-shrink: 0;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    color: #475569;
    font-size: 12.5px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, color .15s, border-color .15s;
}

.chip:hover {
    border-color: #2c3e6b;
    color: #2c3e6b;
}

.chip.active {
    background: linear-gradient(135deg, #2c3e6b, #16213e);
    color: #fff;
    border-color: transparent;
}

/* Single shared gap value — used identically on every stacked block
   (code box, chip row via margin above, notice bar, continue banner,
   trending section) so there is exactly ONE number controlling all of
   these gaps, guaranteeing they stay visually equal no matter how many
   blocks appear before "All assessments". */
.qp-section-gap {
    margin-bottom: 20px;
}

/* Active-filter chips */
.active-filters {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 12px 0 4px;
    flex-wrap: wrap;
}

.af-chip {
    background: #eaeef5;
    color: #16213e;
    font-size: 11.5px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.af-chip a {
    color: #16213e;
    text-decoration: none;
    font-weight: 800;
    opacity: .6;
}

.af-chip a:hover {
    opacity: 1;
}

.clear-all {
    font-size: 12px;
    color: #b91c2c;
    font-weight: 700;
    text-decoration: none;
}

.clear-all:hover {
    text-decoration: underline;
}


/* ── Notice bar (progress-tracking / guest banner) ── */
.notice {
    transition: box-shadow .15s, transform .15s;
    box-shadow: 0 3px 14px rgba(22, 33, 62, .07) !important;
    border-radius: 14px !important;
    padding: 16px 20px !important;
}

.notice:hover {
    box-shadow: 0 8px 24px rgba(22, 33, 62, .12) !important;
    transform: translateY(-1px);
}

.notice-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.notice-dot {
    width: 40px !important;
    height: 40px !important;
    border-radius: 11px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none !important;
    background: linear-gradient(135deg, #2c3e6b, #16213e);
}

.notice-dot::before {
    content: '\2713';
    color: #fff;
    font-weight: 800;
    font-size: 15px;
}

.notice-title {
    font-size: 14px;
    font-weight: 700;
}

.notice-link {
    font-weight: 800 !important;
    transition: transform .15s;
    display: inline-block;
}

.notice-link:hover {
    transform: translateX(2px);
}


/* ── Continue banner ── */
.continue-banner {
    background: #fff;
    border-left: 4px solid #f6c343;
    border-radius: 14px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 3px 14px rgba(22, 33, 62, .07);
}

.continue-ring {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.continue-ring span {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: #8a5a1a;
}

.continue-banner b {
    font-size: 13px;
    color: #1e293b;
}

.continue-banner p {
    font-size: 12px;
    color: #64748b;
    margin: 2px 0 0;
}

.continue-btn {
    margin-left: auto;
    background: linear-gradient(135deg, #f6c343, #d99a0a);
    color: #16213e;
    font-weight: 800;
    font-size: 12px;
    border: none;
    padding: 9px 16px;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .15s;
}

.continue-btn:hover {
    transform: translateY(-1px);
    color: #16213e;
}


/* ── Section title ── */
.section-title {
    font-family: 'Fraunces', serif;
    font-size: 18px;
    color: #16213e;
    margin: 0 0 14px;
    padding-left: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-title i {
    color: #d99a0a;
}

/* Result-count line + card grid — must share the exact same left
   edge as the "All assessments" heading above them (they were
   drifting right relative to it). */
#quizResults,
.result-count {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

.result-count {
    margin-bottom: 14px;
}


/* ── Trending carousel ── */
.trend-row {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 6px;
}

.trend-card {
    flex-shrink: 0;
    width: 220px;
    background: #fff;
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 4px 16px rgba(22, 33, 62, .07);
    text-decoration: none;
    border-top: 3px solid #e6394f;
    transition: transform .15s, box-shadow .15s;
    display: block;
}

.trend-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(22, 33, 62, .14);
}

.trend-count {
    font-size: 10px;
    font-weight: 800;
    color: #b91c2c;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.trend-title {
    font-size: 13px;
    font-weight: 700;
    color: #16213e;
    margin-bottom: 3px;
}

.trend-meta {
    font-size: 11px;
    color: #94a3b8;
}


/* ── Quiz card grid — base layout (display/columns/gap/max-width/
   margin/padding) is already defined by the site's own quiz.css
   (.grid rule) — not duplicated here. This only ADDS the responsive
   breakpoints quiz.css's fixed 3-column rule didn't have. */
@media (max-width: 900px) {
    .grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .grid {
        grid-template-columns: 1fr !important;
    }
}

.card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 3px 14px rgba(22, 33, 62, .07);
    border: 1px solid #f1f2f7;
    transition: transform .18s, box-shadow .18s;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(22, 33, 62, .14);
}

.card-top {
    height: 68px;
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 14px;
    background-size: cover;
    background-position: center;
}

.card-ic {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
}

.type-pill {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 3px 9px;
    border-radius: 20px;
}

/* Dot before the label — added ONLY here (CSS ::before), never as
   literal text in the blade template, so there is exactly one place
   that can ever render it (no risk of it appearing twice). */
.type-pill::before {
    content: '\25CF';
    margin-right: 4px;
    font-size: 7px;
    vertical-align: middle;
}

.card-body {
    padding: 14px 16px 16px;
}

.card-tag-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3px;
}

.card-subject-tag {
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #d99a0a;
}

.diff-pill {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 2px 8px;
    border-radius: 20px;
}

.card-title {
    font-family: 'Fraunces', serif;
    font-size: 14px;
    font-weight: 700;
    color: #16213e;
    margin-bottom: 7px;
    line-height: 1.3;
    min-height: 36px;
}

.card-desc {
    font-size: 11px;
    color: #64748b;
    line-height: 1.4;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Schedule-window note — a tinted box (matching the quiz type's own
   color) instead of plain colored text, so "Opens ..." reads as its
   own distinct piece of info rather than blending into the meta row. */
.card-schedule-note {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 700;
    margin-bottom: 10px;
    padding: 6px 10px;
    border-radius: 8px;
}

/* Boxed stat grid — Attempts / Avg score / Your attempts. Subtle 1px
   border added (was flat-fill only) for a bit more definition. */
.qstat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin: 8px 0 10px;
}

.qstat {
    background: #f8f9fc;
    border: 1px solid #eef0f6;
    border-radius: 9px;
    padding: 8px 4px 7px;
    text-align: center;
}

.qstat b {
    display: block;
    font-size: 14px;
    color: #16213e;
    font-weight: 800;
    line-height: 1.2;
}

.qstat span {
    font-size: 8px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-weight: 700;
    margin-top: 1px;
    display: block;
}

/* Feature badges — Certificate / Leaderboard */
.card-feature-badges {
    display: flex;
    gap: 5px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.feature-badge {
    font-size: 9px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 3px;
}

.feature-badge.cert {
    background: #fdf3d9;
    color: #8a5a1a;
}

.feature-badge.leaderboard {
    background: #eaeef5;
    color: #16213e;
}

.card-meta {
    display: flex;
    gap: 8px;
    font-size: 10.5px;
    color: #64748b;
    margin-bottom: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.card-meta span {
    display: flex;
    align-items: center;
    gap: 3px;
}

.card-meta .muted {
    color: #b1b8c4;
}

.progress-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.progress-track {
    flex: 1;
    height: 6px;
    background: #f1f5f9;
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    border-radius: 4px;
}

.progress-fill.not-started {
    width: 0 !important;
}

.progress-fill.in-progress {
    background: linear-gradient(90deg, #f6c343, #d99a0a);
}

.progress-fill.completed {
    background: linear-gradient(90deg, #2c3e6b, #16213e);
}

.progress-label {
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
}

.progress-label.in-progress {
    color: #8a5a1a;
}

.progress-label.completed {
    color: #16213e;
}

.progress-label.not-started {
    color: #94a3b8;
}

.card-cta {
    display: block;
    text-align: center;
    background: linear-gradient(135deg, #f6c343, #d99a0a);
    color: #16213e;
    font-weight: 800;
    font-size: 13px;
    padding: 10px;
    border-radius: 10px;
    text-decoration: none;
    transition: transform .15s;
}

.card-cta:hover {
    transform: translateY(-1px);
    color: #16213e;
}

.card-cta-disabled {
    background: #f1f5f9 !important;
    color: #94a3b8 !important;
    cursor: not-allowed;
}


/* ── Footer ── */
.site-footer {
    border-top: 3px solid transparent;
    border-image: linear-gradient(90deg, #f6c343, #16213e, #e6394f) 1;
}

.footer-socials a,
.socials a {
    transition: background .15s, transform .15s;
}

.footer-socials a:hover,
.socials a:hover {
    background: #f6c343;
    color: #16213e;
    transform: translateY(-2px);
}

.footer-col a {
    transition: color .15s, padding-left .15s;
}

.footer-col a:hover {
    color: #f6c343;
    padding-left: 3px;
}

.footer-col h4 {
    display: flex;
    align-items: center;
    gap: 7px;
}

.footer-col h4 i {
    color: #d99a0a;
    font-size: 14px;
}

/* Small gold accent underline beneath each footer heading — gives
   each column a clear visual anchor instead of the heading floating
   with nothing distinguishing it from the links below. */
.footer-col h4 {
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 18px !important;
}

.footer-col h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 28px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, #f6c343, #d99a0a);
}

.brand-lockup {
    font-size: 17px !important;
}

/* Subtle decorative blob behind the footer content — same visual
   language as the rest of the site, very low opacity so it reads as
   texture, not a distraction. */
.site-footer {
    position: relative;
    overflow: hidden;
}

.site-footer::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -60px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(246, 195, 67, .08) 0%, rgba(246, 195, 67, 0) 70%);
    pointer-events: none;
}

.footer-top {
    position: relative;
    z-index: 1;
    padding-top: 48px !important;
    padding-bottom: 36px !important;
}

.footer-contact:hover .footer-contact-ic {
    background: #f6c343;
    color: #16213e;
}

.footer-contact-ic {
    transition: background .15s, color .15s;
}

.footer-contact {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}

.footer-contact-ic {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: #fdf3d9;
    color: #8a5a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.footer-bottom {
    background: linear-gradient(90deg, #16213e, #1c2a4d);
    color: rgba(255, 255, 255, .75);
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}

.footer-bottom strong {
    color: #f6c343;
}


/* ── Empty state ── */
.empty-state {
    padding: 48px 20px;
    grid-column: 1 / -1;
}


/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — tablet (≤900px) and mobile (≤600px). Card grid already
   has its own breakpoints above; this covers everything else on the
   page (hero, search/code/chips, notice bars, trending).
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .hero-grid {
        flex-direction: column;
        text-align: left;
        gap: 24px;
    }

    .hero-visual {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 8px;
    }

    .headline {
        font-size: 26px !important;
    }

    .search-dock {
        flex-wrap: wrap;
    }

    .search-card {
        flex-basis: 100%;
    }

    .search-dock .filter {
        flex: 1;
        min-width: 130px;
    }

    .notice,
    .continue-banner {
        flex-wrap: wrap;
        row-gap: 10px;
    }

    .notice-link,
    .continue-btn {
        margin-left: 0 !important;
        width: 100%;
        text-align: center;
    }

    .trend-card {
        width: 200px;
    }
}

@media (max-width: 600px) {
    .hero {
        padding: 32px 0 44px;
    }

    .headline {
        font-size: 22px !important;
    }

    .hero-stats {
        flex-wrap: wrap;
        gap: 16px !important;
    }

    .search-dock-wrap .container {
        padding-left: 14px;
        padding-right: 14px;
    }

    .search-card {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .search-dock select.filter {
        width: 100%;
    }

    .code-box {
        flex-wrap: wrap;
    }

    .code-box-label {
        width: 100%;
        margin-bottom: 2px;
    }

    .code-box input {
        flex-basis: 100%;
    }

    .code-box button {
        flex: 1;
        justify-content: center;
    }

    .chip-row {
        margin-top: 12px;
    }

    .chip {
        font-size: 11.5px;
        padding: 7px 13px;
    }

    .notice-left {
        flex: 1;
        min-width: 0;
    }

    .notice-title {
        font-size: 13px;
    }

    .notice-sub {
        font-size: 10.5px;
    }

    .continue-ring {
        width: 38px;
        height: 38px;
    }

    .continue-ring span {
        width: 30px;
        height: 30px;
    }

    .trend-row {
        gap: 10px;
    }

    .trend-card {
        width: 170px;
        padding: 11px;
    }

    .section-title {
        font-size: 16px;
    }

    .mainnav {
        display: none;
    }

    /* base theme's hamburger/mobile-menu already covers navigation at this width */

    /* The mobile-menu (opened via the hamburger) already has its own
       Login/Register link — showing the topbar's cta-mini button
       AND the hamburger side-by-side was cramped/redundant. */
    .topbar-right>.cta-mini {
        display: none;
    }
}