/* =========================================================
   SolKids — Premium public stylesheet
   Palette matched to SolKids logo: orange · teal · pink · green · purple
   Fonts: Fraunces (display) + DM Sans (body) + Fredoka (accent)
   ========================================================= */

:root {
    /* Brand palette — derived from SolKids logo colors */
    --c-primary:        #14B8A6;  /* teal (logo K) — primary accent for text & UI */
    --c-primary-dark:   #0D9488;
    --c-secondary:      #14B8A6;  /* logo K — teal */
    --c-accent:         #F59E0B;  /* logo rays — gold */
    --c-purple:         #8B5CF6;  /* logo s, underline — purple */
    --c-mint:           #22C55E;  /* logo d — green */
    --c-pink:           #EC4899;  /* logo i — pink */

    --c-ink:            #1F2937;  /* logo dark elements */
    --c-ink-soft:       #4B5563;
    --c-ink-faint:      #9CA3AF;

    --c-bg:             #FFFBF5;  /* warm white */
    --c-bg-soft:        #FFF5EB;
    --c-bg-card:        #ffffff;
    --c-border:         #FDE8CD;
    --c-border-soft:    #FEF0DC;

    --c-success:        #22C55E;
    --c-warning:        #F59E0B;
    --c-danger:         #EF4444;

    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;

    --shadow-xs: 0 1px 2px rgba(31, 41, 55, .04);
    --shadow-sm: 0 4px 12px rgba(31, 41, 55, .06);
    --shadow-md: 0 10px 28px rgba(31, 41, 55, .10);
    --shadow-lg: 0 24px 60px rgba(31, 41, 55, .14);
    --shadow-glow: 0 12px 30px rgba(249, 115, 22, .28);

    --font-display: 'Fraunces', 'Fredoka', Georgia, serif;
    --font-fun:     'Fredoka', 'DM Sans', system-ui, sans-serif;
    --font-body:    'DM Sans', 'Inter', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
    font-family: var(--font-body);
    color: var(--c-ink);
    background: var(--c-bg);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--c-ink);
    line-height: 1.15;
    margin: 0 0 .5em;
    letter-spacing: -0.01em;
    font-weight: 600;
}
h1 { font-weight: 700; }

p { margin: 0 0 1em; }

a {
    color: var(--c-primary);
    text-decoration: none;
    transition: color .18s ease;
}
a:hover { color: var(--c-primary-dark); }

img { max-width: 100%; height: auto; display: block; }

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }

.muted { color: var(--c-ink-soft); }
.small { font-size: .85em; }

/* ----------------------------------------------------------
   Reusable utility — section eyebrow / pill labels
   ---------------------------------------------------------- */
.eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 999px;
    background: rgba(20, 184, 166, .13);   /* logo K — teal */
    color: #0F766E;                        /* teal-700 */
    font-family: var(--font-fun);
    font-weight: 600; font-size: .85rem;
    letter-spacing: .04em; text-transform: uppercase;
    margin-bottom: 14px;
}

/* ----------------------------------------------------------
   Icons
   ---------------------------------------------------------- */
.icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.icon-lg { width: 32px; height: 32px; }
.icon-xl { width: 48px; height: 48px; }

/* ----------------------------------------------------------
   Header / nav
   ---------------------------------------------------------- */
.site-header {
    background: rgba(253, 248, 240, .92);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--c-border-soft);
    position: sticky; top: 0; z-index: 50;
}
.header-inner {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 72px; gap: 16px;
}
.brand {
    display: flex; align-items: center; gap: 12px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--c-ink);
    flex-shrink: 0;
    text-decoration: none;
}
.brand:has(> svg.brand-svg:only-child),
.brand:has(> img.brand-logo:only-child) { gap: 0; }
.brand-mark {
    font-size: 1.7rem;
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--c-accent), var(--c-primary));
    box-shadow: var(--shadow-sm);
    color: white;
}
.brand-logo {
    height: 50px; width: auto; max-width: 200px;
    display: block; object-fit: contain;
}
.brand-svg {
    height: 50px; width: auto; max-width: 220px;
    display: block;
}
.brand-light { color: white; }
.brand-light .brand-svg text { fill: #fff !important; }
.brand-light .brand-svg circle[fill="#FB923C"] { fill: #FB923C; }
.brand-light .brand-svg circle[fill="#1F2937"] { fill: #fff; }
.brand-light .brand-svg path[stroke="#1F2937"] { stroke: #fff; }
.brand-light .brand-svg path[stroke="#8B5CF6"] { stroke: var(--c-accent); }

.site-nav {
    display: flex; align-items: center; gap: 2px;
    flex-wrap: nowrap;
}
.site-nav a {
    padding: 10px 14px;
    border-radius: 999px;
    color: var(--c-ink);
    font-weight: 500;
    font-size: .92rem;
    transition: background .18s, color .18s;
    white-space: nowrap;
}
.site-nav a:hover { background: var(--c-bg-soft); }
.site-nav a.active {
    background: var(--c-secondary); color: white;
}

/* Nav dropdown (Products mega-menu) */
.nav-dropdown { position: relative; }
.nav-dropdown-trigger { display: inline-flex; align-items: center; gap: 4px; }
.nav-dropdown-trigger svg { transition: transform .2s; flex-shrink: 0; }
.nav-dropdown-menu {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    min-width: 260px; padding: 8px;
    background: var(--c-bg-card); border: 1px solid var(--c-border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .2s, visibility .2s, transform .2s;
    transform: translateX(-50%) translateY(8px);
    z-index: 100;
    display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
}
/* Hover-i hap menunë VETËM në pajisje me maus real dhe në desktop —
   në touch (mobile/tablet) hapja bëhet me prekje (klasa .is-open nga JS),
   përndryshe hover-i "ngjitës" i prekjes lufton me toggle-in. */
@media (hover: hover) and (min-width: 921px) {
    .nav-dropdown:hover .nav-dropdown-trigger svg { transform: rotate(180deg); }
    .nav-dropdown:hover .nav-dropdown-menu {
        opacity: 1; visibility: visible; pointer-events: auto;
        transform: translateX(-50%) translateY(0);
    }
}
.nav-dd-item {
    padding: 10px 14px !important; border-radius: 10px !important;
    font-size: .88rem !important; font-weight: 500 !important;
    color: var(--c-ink) !important; white-space: nowrap;
    transition: background .15s;
}
.nav-dd-item:hover { background: var(--c-bg-soft) !important; }
.nav-dd-all {
    grid-column: 1 / -1;
    font-weight: 700 !important; border-bottom: 1px solid var(--c-border);
    border-radius: 10px 10px 0 0 !important; margin-bottom: 4px; padding-bottom: 12px !important;
}

/* Language switcher */
.lang-switch {
    display: flex; align-items: center; gap: 2px;
    padding: 3px;
    border: 1px solid var(--c-border);
    border-radius: 999px;
    background: white;
    margin-left: 6px;
    flex-shrink: 0;
}
.lang-switch a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px 5px 6px;
    border-radius: 999px;
    font-weight: 700; font-size: .78rem;
    color: var(--c-ink-soft);
    text-transform: uppercase; letter-spacing: .06em;
    text-align: center;
    line-height: 1;
}
.lang-switch a.active { background: var(--c-ink); color: white; }
.flag-svg {
    width: 18px; height: 13px;
    display: block;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.08);
    flex-shrink: 0;
}

.nav-toggle {
    display: none; background: none; border: 0; cursor: pointer;
    width: 44px; height: 44px; padding: 0; align-items: center; justify-content: center;
    color: var(--c-ink);
    border-radius: 12px;
}
.nav-toggle:active { background: var(--c-bg-soft); }

/* ===== Laptop i vogël: ngushto nav-in =====
   Dhjetë lidhje me fjalë shqipe kërkojnë rreth 1078px, plus 155px logo — pra
   nav-i i plotë do rreth 1250px. Kufijtë e vjetër (ngushtim nën 1100, sirtar
   nën 920) linin një zonë ku menyja s'nxinte dhe s'kishte ku të shkonte, ndaj
   dilte jashtë ekranit dhe e shtynte çdo faqe anash. */
@media (max-width: 1400px) {
    .site-nav a { padding: 9px 11px; font-size: .88rem; }
    .header-inner { gap: 8px; }
}

/* ===== Nën këtë gjerësi as nav-i i ngushtuar nuk nxë: sirtar ===== */
@media (max-width: 1249px) {
    .nav-toggle { display: inline-flex; }
    .brand-svg, .brand-logo { height: 38px; }
    .header-inner { min-height: 64px; }

    .site-nav {
        position: fixed;
        top: 64px; left: 0; right: 0;
        background: var(--c-bg-card);
        flex-direction: column;
        align-items: stretch;
        padding: 0 20px;
        gap: 4px;
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s ease, padding .3s ease;
        box-shadow: var(--shadow-lg);
        z-index: 49;
        visibility: hidden;
    }
    .site-nav.is-open {
        max-height: calc(100dvh - 64px);
        min-height: calc(100dvh - 64px);
        overflow-y: auto;
        padding: 20px 20px 32px;
        visibility: visible;
    }
    .site-nav a {
        width: 100%; text-align: left;
        padding: 14px 18px;
        font-size: 1.05rem;
        border-radius: 14px;
        min-height: 48px;
        display: flex; align-items: center;
    }
    .site-nav a.active { background: var(--c-secondary); color: white; }
    .lang-switch {
        margin: 16px 0 0;
        align-self: flex-start;
        padding: 4px;
    }
    .lang-switch a { padding: 8px 16px; font-size: .85rem; min-height: 36px; display: flex; align-items: center; }

    .nav-dropdown { width: 100%; }
    .nav-dropdown-trigger { width: 100%; justify-content: space-between; }
    /* Mobile drawer: submenu flows inline (no floating card), full width,
       forced with !important so the premium layer can't re-add card chrome. */
    .nav-dropdown-menu {
        position: static !important;
        transform: none !important;
        opacity: 1; visibility: visible; pointer-events: auto;
        min-width: 0 !important;
        width: 100%;
        border: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border-radius: 0 !important;
        padding: 0 0 0 10px;
        margin: 2px 0 6px;
        max-height: 0; overflow: hidden;
        transition: max-height .25s ease;
        grid-template-columns: 1fr !important;
        gap: 0;
    }
    .nav-dropdown.is-open .nav-dropdown-menu { max-height: 600px; }
    .nav-dropdown.is-open .nav-dropdown-trigger svg { transform: rotate(180deg); }
    .nav-dd-item { white-space: normal !important; }
    .nav-dd-all { border-bottom: 0; margin-bottom: 0; padding-bottom: 10px !important; }

    body.nav-open::after {
        content: '';
        position: fixed;
        inset: 64px 0 0;
        background: rgba(0,0,0,.3);
        z-index: 48;
        pointer-events: auto;
    }
}

/* ----------------------------------------------------------
   Flashes
   ---------------------------------------------------------- */
.flash {
    padding: 14px 18px;
    border-radius: var(--radius-md);
    margin: 18px 0;
    font-weight: 600;
    border: 1px solid transparent;
}
.flash-success { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.flash-error, .flash-danger { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.flash-info    { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }

/* ----------------------------------------------------------
   Buttons
   ---------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 26px;
    border-radius: 999px;
    font-weight: 600; font-family: var(--font-body);
    font-size: 1rem; line-height: 1;
    border: 0; cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
    text-align: center;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
    background: var(--c-secondary);
    color: white;
    box-shadow: 0 4px 14px rgba(20,184,166,.28);
}
.btn-primary:hover { background: #0D9488; color: white; }

.btn-secondary {
    background: var(--c-ink); color: white;
}
.btn-secondary:hover { background: #2a3556; color: white; }

.btn-ghost {
    background: transparent;
    color: var(--c-secondary);
    border: 2px solid var(--c-secondary);
}
.btn-ghost:hover { background: var(--c-secondary); border-color: transparent; color: #fff; }

.btn-outline {
    background: transparent;
    color: var(--c-secondary);
    border: 2px solid var(--c-secondary);
}
.btn-outline:hover {
    background: var(--c-secondary);
    border-color: transparent;
    color: #fff;
}

.btn-block { display: flex; width: 100%; }
.btn-sm { padding: 9px 16px; font-size: .9rem; }

/* ----------------------------------------------------------
   Hero slider
   ---------------------------------------------------------- */
.hero {
    background: linear-gradient(135deg, #fff4e0 0%, #ffe4d6 50%, #ffd8d2 100%);
    position: relative;
    overflow: hidden;
}
.hero::before {
    content: ''; position: absolute;
    width: 480px; height: 480px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(245, 158, 11, .35), transparent);
    top: -120px; right: -120px;
    pointer-events: none;
}
.hero::after {
    content: ''; position: absolute;
    width: 360px; height: 360px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(20, 184, 166, .25), transparent);
    bottom: -160px; left: -100px;
    pointer-events: none;
}
/* All slides are stacked in ONE grid cell so the slider always takes the height
   of the TALLEST slide — a constant height that never jumps when rotating, and
   recomputes correctly at every breakpoint (mobile / tablet / desktop). */
.slider { position: relative; display: grid; }
.slide {
    grid-area: 1 / 1;
    min-height: 540px;
    display: flex; align-items: center;
    background-size: cover; background-position: center;
    position: relative;
    opacity: 0; visibility: hidden;
    transition: opacity .6s ease, visibility 0s linear .6s;
}
.slide.is-active {
    opacity: 1; visibility: visible; z-index: 1;
    transition: opacity .6s ease, visibility 0s;
}
/* Premium DARK scrim: strong on the left (text side), fading to reveal the photo
   on the right. White text sits on top — cinematic look that pops against the
   platform's light background. */
.slide::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(100deg,
        rgba(17, 24, 39, .78) 0%,
        rgba(17, 24, 39, .55) 40%,
        rgba(17, 24, 39, .28) 68%,
        rgba(17, 24, 39, .12) 100%);
}
.slide-content { position: relative; z-index: 2; max-width: 720px; padding: 80px 24px; }
.slide-content .eyebrow {
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .28);
    color: #fff;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.slide-content h1 {
    font-size: clamp(2.2rem, 4vw + 1rem, 4rem);
    margin-bottom: .4em;
    color: #fff;
}
.slide-content p {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, .9);
    margin-bottom: 28px;
    max-width: 540px;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .3);
}
@keyframes fadeIn { from {opacity:0; transform:translateY(12px);} to {opacity:1; transform:none;} }

.slider-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: white; border: 0;
    width: 48px; height: 48px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    color: var(--c-ink); z-index: 3;
    display: flex; align-items: center; justify-content: center;
}
.slider-arrow:hover { background: var(--c-ink); color: white; }
.slider-prev { left: 20px; } .slider-next { right: 20px; }

.slider-dots {
    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 8px; z-index: 3;
}
.slider-dots button {
    width: 28px; height: 6px; border-radius: 999px; border: 0;
    background: rgba(255, 255, 255, .5); cursor: pointer; padding: 0;
    transition: background .25s, width .25s;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}
.slider-dots button.is-active { background: #fff; width: 36px; }

/* ----------------------------------------------------------
   Page hero (sub-pages)
   ---------------------------------------------------------- */
.page-hero {
    padding: 90px 0 70px;
    text-align: center;
    background: linear-gradient(135deg, var(--c-ink) 0%, #2c3a64 100%);
    color: white;
    position: relative;
    overflow: hidden;
}
.page-hero::before, .page-hero::after {
    content: ''; position: absolute; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(245, 158, 11, .25), transparent);
    pointer-events: none;
}
.page-hero::before { width: 480px; height: 480px; top: -200px; right: -120px; }
.page-hero::after  { width: 360px; height: 360px; bottom: -180px; left: -120px;
    background: radial-gradient(closest-side, rgba(249, 115, 22, .3), transparent); }
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 {
    color: white;
    font-size: clamp(2.2rem, 3vw + 1rem, 3.4rem);
    margin-bottom: 12px;
}
.page-hero p {
    color: rgba(255, 255, 255, .85);
    font-size: 1.15rem; max-width: 640px; margin: 0 auto;
}
.page-hero .eyebrow {
    background: rgba(255, 255, 255, .12);
    color: #5EEAD4;
}
.page-hero-alt {
    background: linear-gradient(135deg, #F97316 0%, #F59E0B 100%);
}
.page-hero-alt::before { background: radial-gradient(closest-side, rgba(255, 255, 255, .25), transparent); }
.page-hero-alt::after  { background: radial-gradient(closest-side, rgba(255, 255, 255, .2),  transparent); }

/* ----------------------------------------------------------
   Sections
   ---------------------------------------------------------- */
.section { padding: 96px 0; }
.section-tight { padding: 56px 0; }
.section-alt   { background: var(--c-bg-soft); }
.section-dark  { background: var(--c-ink); color: white; }
.section-dark h2 { color: white; }
.section-dark .muted { color: rgba(255, 255, 255, .7); }

.section-head {
    text-align: center; max-width: 640px; margin: 0 auto 56px;
}
.section-head h2 {
    font-size: clamp(2rem, 2.5vw + 1rem, 2.8rem);
}
.section-head p {
    color: var(--c-ink-soft);
    font-size: 1.1rem; margin-top: 8px;
}
.section-foot { text-align: center; margin-top: 48px; }

/* ── Blog thumbnails ───────────────────────────────────────────
   Every post card keeps a picture area so the grid stays even while photos
   are added gradually. Posts without a photo get a branded teal placeholder. */
a.card-media { display: block; }
.post-card .card-media.is-placeholder {
    background: linear-gradient(150deg, #CCFBF1 0%, #99F6E4 55%, #5EEAD4 100%);
}
.post-card .card-media.is-placeholder .card-media-placeholder {
    color: rgba(13, 148, 136, .5);
}
.post-card .card-media { transition: opacity .2s ease; }
.post-card:hover .card-media.is-placeholder { opacity: .92; }

/* ── Value presentation (what is SolKids) ──────────────────────── */
.value-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 8px;
}
.value-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
    padding: 26px 22px;
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-decoration: none; color: inherit;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.value-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 38px rgba(20, 184, 166, .16);
    border-color: color-mix(in srgb, var(--vc, var(--c-secondary)) 45%, transparent);
}
.value-ico {
    width: 54px; height: 54px; border-radius: 15px;
    display: grid; place-items: center; font-size: 1.65rem;
    background: color-mix(in srgb, var(--vc, var(--c-secondary)) 14%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vc, var(--c-secondary)) 20%, transparent);
}
.value-card h3 { margin: 0; font-size: 1.12rem; font-weight: 700; color: var(--c-ink); }
.value-card p { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--c-ink-soft); }
.value-card .value-more {
    margin-top: auto; padding-top: 6px;
    font-size: .82rem; font-weight: 700; letter-spacing: .01em;
    color: var(--vc, var(--c-secondary));
    display: inline-flex; align-items: center; gap: 5px;
    transition: gap .2s ease;
}
.value-card:hover .value-more { gap: 9px; }
.value-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
@media (max-width: 900px) { .value-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .value-grid { grid-template-columns: 1fr; gap: 14px; } }

/* ----------------------------------------------------------
   Fillo këtu — two roles, two first steps
   Only two cards, so they stay side by side longer than the value grid
   and stack at tablet width, where 1fr/1fr would squeeze the steps.
   ---------------------------------------------------------- */
.start-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 8px;
}
.start-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
    padding: 30px 26px 26px;
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.start-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 38px rgba(20, 184, 166, .16);
    border-color: color-mix(in srgb, var(--sc, var(--c-primary)) 45%, transparent);
}
.start-card-parent { --sc: #14B8A6; }
.start-card-child  { --sc: #8B5CF6; }
.start-ico {
    width: 56px; height: 56px; border-radius: 16px;
    display: grid; place-items: center; font-size: 1.7rem;
    background: color-mix(in srgb, var(--sc) 14%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sc) 20%, transparent);
}
.start-card h3 { margin: 0; font-size: 1.25rem; font-weight: 800; color: var(--c-ink); }
.start-lede { margin: 0; font-size: .93rem; line-height: 1.55; color: var(--c-ink-soft); }

/* Numbered steps — the number is drawn, so it stays put when the text wraps */
.start-steps {
    list-style: none; counter-reset: s; margin: 6px 0 4px; padding: 0;
    display: flex; flex-direction: column; gap: 11px; width: 100%;
}
.start-steps li {
    counter-increment: s;
    display: grid; grid-template-columns: 26px 1fr; gap: 11px; align-items: start;
    font-size: .92rem; line-height: 1.5; color: var(--c-ink-soft);
}
.start-steps li::before {
    content: counter(s);
    width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: .78rem; font-weight: 800; font-variant-numeric: tabular-nums;
    color: #fff; background: var(--sc);
}
.start-card .btn-block { margin-top: auto; }
.start-second {
    align-self: center;
    font-size: .84rem; font-weight: 600; color: var(--c-ink-soft);
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 5px;
    transition: gap .2s ease, color .2s ease;
}
.start-second:hover { color: var(--sc); gap: 9px; }

@media (max-width: 860px) { .start-grid { grid-template-columns: 1fr; gap: 16px; } }
@media (max-width: 480px) {
    .start-card { padding: 24px 20px 22px; }
    .start-card h3 { font-size: 1.15rem; }
}

/* ----------------------------------------------------------
   Sot — the daily hook. Three picks that change at midnight.
   ---------------------------------------------------------- */
.daily-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 8px; }
.daily-card {
    position: relative;
    display: flex; flex-direction: column; align-items: flex-start; gap: 9px;
    padding: 34px 22px 22px;
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-decoration: none; color: inherit;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.daily-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 38px rgba(20, 184, 166, .16);
    border-color: color-mix(in srgb, var(--dc) 45%, transparent);
}
.daily-tale { --dc: #14B8A6; }
.daily-chal { --dc: #F59E0B; }
.daily-word { --dc: #8B5CF6; }

/* The tag sits on the border — it is the "why today" label, so it reads first */
.daily-tag {
    position: absolute; top: -1px; left: 22px;
    transform: translateY(-50%);
    font-size: .66rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    color: #fff; background: var(--dc);
    padding: 4px 10px; border-radius: 99px;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--dc) 40%, transparent);
}
.daily-ico {
    width: 50px; height: 50px; border-radius: 14px;
    display: grid; place-items: center; font-size: 1.55rem;
    background: color-mix(in srgb, var(--dc) 14%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dc) 20%, transparent);
}
.daily-card h3 { margin: 0; font-size: 1.08rem; font-weight: 700; color: var(--c-ink); line-height: 1.3; }
.daily-card p { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--c-ink-soft); }
.daily-more {
    margin-top: auto; padding-top: 8px;
    font-size: .82rem; font-weight: 700; color: var(--dc);
    display: inline-flex; align-items: center; gap: 5px;
    transition: gap .2s ease;
}
.daily-card:hover .daily-more { gap: 9px; }

/* Word of the day reads as a flashcard, not a paragraph */
.daily-word-en { font-size: 1.5rem !important; letter-spacing: -.01em; }
.daily-word-sq { font-weight: 700; color: var(--dc) !important; font-size: .95rem !important; }
.daily-word-ex { font-style: italic; color: var(--c-ink) !important; }
.daily-word-tr { font-size: .82rem !important; opacity: .8; }

/* Ikona s'del kurre jashte kutise, sado e gjere te jete permbajtja. */
.daily-ico { overflow: hidden; line-height: 1; }
.daily-fq { --dc: #EC4899; }
.daily-riddle { --dc: #0EA5E9; }
.daily-story  { --dc: #E11D48; }
.daily-book   { --dc: #A16207; }
.daily-tip    { --dc: #F59E0B; }

/* Gjegjëza mbi kartë: teksti i pyetjes, jo një titull — ndaj vjershues e i qetë. */
.daily-riddle-q { font-family: 'Fraunces', Georgia, serif; font-weight: 600 !important; font-size: 1rem !important; font-style: italic; }
.daily-fq-to { font-size:.76rem !important; font-weight:800; letter-spacing:.04em;
  text-transform:uppercase; color:var(--dc) !important; margin:0 !important; }
.daily-fq h3 { font-size:1.02rem !important; }
@media (min-width: 901px) { .daily-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px) { .daily-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .daily-grid { grid-template-columns: 1fr; gap: 22px; } }

/* ----------------------------------------------------------
   Rritja ime — the child's own progress. Streak, level, badges.
   ---------------------------------------------------------- */
.kid-progress {
    background: linear-gradient(160deg, #0D9488 0%, #14B8A6 55%, #2DD4BF 100%);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 22px 24px 24px;
    margin: 22px 0;
    box-shadow: 0 14px 34px rgba(13, 148, 136, .22);
}
.kid-progress .muted { color: rgba(255,255,255,.78) !important; }
.kid-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.kid-level { display: flex; align-items: center; gap: 13px; }
.kid-level-ico {
    width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center;
    font-size: 1.6rem; background: rgba(255,255,255,.18);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}
.kid-level strong { display: block; font-size: 1.15rem; font-weight: 800; }
.kid-level .muted { font-size: .84rem; }
.kid-streak { text-align: right; }
.kid-streak-num { display: block; font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; opacity: .55; }
.kid-streak.is-on .kid-streak-num { opacity: 1; }
.kid-streak .muted { font-size: .78rem; }

.kid-bar {
    height: 9px; border-radius: 99px; background: rgba(0,0,0,.18);
    margin: 16px 0 7px; overflow: hidden;
}
.kid-bar span { display: block; height: 100%; border-radius: 99px; background: #FBBF24; transition: width .5s ease; }
.kid-bar-txt { margin: 0; font-size: .84rem; color: rgba(255,255,255,.9); }
.kid-nudge {
    margin: 12px 0 0; font-size: .9rem; font-weight: 600;
    background: rgba(0,0,0,.16); border-radius: 10px; padding: 9px 13px;
}

.kid-daily { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.kid-daily-item {
    display: flex; align-items: center; gap: 10px;
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2);
    border-radius: 11px; padding: 10px 12px;
    text-decoration: none; color: #fff;
    transition: background .2s ease, transform .2s ease;
}
.kid-daily-item:hover { background: rgba(255,255,255,.24); transform: translateY(-2px); color: #fff; }
.kid-daily-item > span { font-size: 1.3rem; }
.kid-daily-item strong { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; opacity: .85; }
.kid-daily-item em { font-style: normal; font-size: .85rem; font-weight: 700; }

.kid-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.kid-badge {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(0,0,0,.18); border-radius: 99px; padding: 6px 13px;
    font-size: .8rem; opacity: .5;
}
/* An unearned badge shows how close it is — that is the pull */
.kid-badge i {
    position: absolute; left: 0; top: 0; bottom: 0;
    background: rgba(255,255,255,.14); border-radius: 99px;
}
.kid-badge b, .kid-badge em { position: relative; }
.kid-badge em { font-style: normal; font-weight: 700; }
.kid-badge.is-earned { opacity: 1; background: rgba(255,255,255,.24); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }

@media (max-width: 640px) {
    .kid-head { flex-direction: column; align-items: flex-start; gap: 10px; }
    .kid-streak { text-align: left; }
    .kid-daily { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------
   Product category filter bar
   ---------------------------------------------------------- */
.prod-cat-active {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 20px; flex-wrap: wrap; gap: 12px;
}
.prod-cat-active h2 { margin: 0; font-size: 1.4rem; }
.prod-cat-bar {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-bottom: 32px; padding-bottom: 20px;
    border-bottom: 1px solid var(--c-border);
}
.prod-cat-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 8px 16px; border-radius: 999px;
    font-size: .85rem; font-weight: 600;
    color: var(--c-ink); background: var(--c-bg-soft);
    border: 1.5px solid transparent;
    transition: all .18s; white-space: nowrap; cursor: pointer;
    text-decoration: none;
}
.prod-cat-chip:hover { border-color: var(--c-primary); color: var(--c-primary); }
.prod-cat-chip.is-active {
    background: var(--c-ink); color: white; border-color: var(--c-ink);
}

/* ----------------------------------------------------------
   Grids
   ---------------------------------------------------------- */
.grid { display: grid; gap: 28px; }
.grid-products   { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.grid-services   { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid-events     { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.grid-posts      { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.grid-activities { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
/* Homepage blog: 4 across on desktop, 2 columns on tablet & mobile (like the fun grid) */
.grid.home-blog-grid { grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 1024px) { .grid.home-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .grid.home-blog-grid { grid-template-columns: 1fr 1fr; gap: 12px; } }

/* ----------------------------------------------------------
   Cards
   ---------------------------------------------------------- */
.card {
    background: var(--c-bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
    display: flex; flex-direction: column;
    border: 1px solid var(--c-border-soft);
}
.card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
}
.card-media {
    aspect-ratio: 4 / 3; overflow: hidden;
    background: linear-gradient(135deg, var(--c-bg-soft), #fef0d6);
    position: relative;
}
.card-media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .5s ease;
}
.card:hover .card-media img { transform: scale(1.05); }

/* Clickable link cards (homepage events & services) */
a.card { text-decoration: none; color: inherit; }

/* Placeholder shown inside a media area before a photo is uploaded */
.card-media-placeholder {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255, 255, 255, .75);
    pointer-events: none;
}

/* A service card that has a photo uses a full media header like event cards */
.service-card.has-photo .card-media { aspect-ratio: 16 / 10; }
.service-card.has-photo .card-body { padding-top: 20px; }

.card-tag {
    position: absolute; top: 12px; left: 12px;
    padding: 4px 10px;
    background: rgba(31, 41, 55, .88);
    color: white;
    border-radius: 999px;
    font-size: .75rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .05em;
}
.btn-wishlist {
    position: absolute; top: 10px; right: 10px;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.85);
    border: none; border-radius: 50%;
    cursor: pointer; z-index: 2;
    backdrop-filter: blur(4px);
    transition: transform .2s ease, background .2s;
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.btn-wishlist:hover { transform: scale(1.15); background: rgba(255,255,255,.95); }
.btn-wishlist:active { transform: scale(.9); }
.btn-wishlist .heart-icon {
    fill: none; stroke: #9ca3af; stroke-width: 2;
    transition: fill .3s ease, stroke .3s ease;
}
.btn-wishlist.is-wishlisted .heart-icon {
    fill: #ef4444; stroke: #ef4444;
    animation: heartPop .4s ease;
}
@keyframes heartPop {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.3); }
    60%  { transform: scale(.9); }
    100% { transform: scale(1); }
}
.card-body {
    padding: 22px 24px 24px;
    display: flex; flex-direction: column; flex: 1;
}
.card-title {
    font-size: 1.2rem; margin-bottom: 8px;
    color: var(--c-ink);
}
.card-text {
    color: var(--c-ink-soft);
    flex: 1; margin: 0 0 16px;
    font-size: .95rem;
}
.card-foot {
    display: flex; flex-direction: column;
    gap: 12px;
}
.price {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--c-primary);
    font-size: 1.25rem;
}

/* Service card — refined */
.service-card .service-icon {
    width: 60px; height: 60px;
    margin: 20px 24px 0;
    border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--c-accent), var(--c-primary));
    color: white;
    font-size: 1.8rem;
    box-shadow: var(--shadow-sm);
}
.service-card:nth-child(3n+2) .service-icon {
    background: linear-gradient(135deg, var(--c-secondary), var(--c-purple));
}
.service-card:nth-child(3n+3) .service-icon {
    background: linear-gradient(135deg, var(--c-mint), var(--c-secondary));
}
.service-card .card-body { padding-top: 16px; }

/* Event card */
.event-card .card-media {
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, var(--c-secondary), var(--c-purple));
}
.event-meta {
    display: flex; flex-direction: column; gap: 6px;
    margin: 8px 0 12px;
    font-size: .9rem;
    color: var(--c-ink-soft);
}
.event-meta-row { display: flex; align-items: center; gap: 6px; }
.event-meta-row .icon { color: var(--c-primary); }

.event-date-pill {
    position: absolute; top: 14px; right: 14px;
    background: white;
    border-radius: 14px;
    padding: 8px 12px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    min-width: 58px;
}
.event-date-pill .day {
    display: block;
    font-family: var(--font-display);
    font-size: 1.4rem; font-weight: 700;
    color: var(--c-primary);
    line-height: 1;
}
.event-date-pill .month {
    display: block; font-size: .7rem;
    text-transform: uppercase; font-weight: 700;
    letter-spacing: .08em;
    color: var(--c-ink-soft);
    margin-top: 2px;
}

/* Activity card */
.activity-card {
    text-align: center; padding: 28px 22px;
    border-radius: var(--radius-lg);
    background: var(--c-bg-card);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--c-border-soft);
    transition: transform .2s ease;
}
.activity-card:hover { transform: translateY(-4px); }
.activity-card .icon-circle {
    width: 72px; height: 72px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-accent), var(--c-primary));
    color: white;
    font-size: 2.2rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-sm);
}
.activity-card:nth-child(4n+2) .icon-circle { background: linear-gradient(135deg, var(--c-secondary), var(--c-purple)); }
.activity-card:nth-child(4n+3) .icon-circle { background: linear-gradient(135deg, var(--c-mint), var(--c-secondary)); }
.activity-card:nth-child(4n+4) .icon-circle { background: linear-gradient(135deg, var(--c-purple), var(--c-primary)); }
.activity-card h3 { margin: 0 0 6px; font-size: 1.1rem; }
.activity-card .age { font-size: .8rem; color: var(--c-ink-faint); text-transform: uppercase; letter-spacing: .06em; }

/* Fun section — homepage activities */
.section-fun {
    background:
        radial-gradient(95% 120% at 50% -12%, rgba(20,184,166,.30) 0%, transparent 55%),
        linear-gradient(165deg, #0E3B3A 0%, #0C2E3C 52%, #0A2233 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.section-fun::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 12% 85%, rgba(45,212,191,.18) 0%, transparent 52%),
                radial-gradient(circle at 88% 18%, rgba(16,185,129,.14) 0%, transparent 50%),
                radial-gradient(circle at 55% 55%, rgba(20,184,166,.08) 0%, transparent 60%);
    pointer-events: none;
}
.section-fun .section-head { position: relative; z-index: 1; }
.section-fun .eyebrow { color: #5EEAD4; }
.section-fun h2 { color: #fff; }
.section-fun .section-head p { color: rgba(255,255,255,.7); }
.section-fun .grid-fun-cats { position: relative; z-index: 1; }
.section-fun .fun-cat-card {
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-color: rgba(255,255,255,.1);
}
.section-fun .fun-cat-card:hover {
    background: rgba(255,255,255,.15);
    border-color: var(--cat-color, rgba(255,255,255,.3));
    box-shadow: 0 12px 40px rgba(0,0,0,.3);
}
.section-fun .fun-cat-card h3 { color: var(--cat-color, #fbbf24); }
.section-fun .fun-cat-card p { color: rgba(255,255,255,.65); }
.section-fun .fun-cat-icon {
    background: rgba(255,255,255,.1);
    box-shadow: 0 4px 20px rgba(0,0,0,.2);
}
.section-fun .fun-cat-count {
    background: rgba(255,255,255,.1);
    color: var(--cat-color, #fbbf24);
}
.section-fun .section-foot { position: relative; z-index: 1; }
.section-fun .btn-ghost {
    color: #fff;
    border-color: rgba(255,255,255,.3);
}
.section-fun .btn-ghost:hover {
    background: rgba(255,255,255,.1);
    border-color: #fff;
}

/* Fun category cards — homepage */
.grid-fun-cats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.fun-cat-card {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; padding: 32px 20px 24px;
    background: linear-gradient(150deg, var(--c-secondary) 0%, #6366F1 50%, var(--c-purple) 100%);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: 0 14px 34px rgba(99, 102, 241, .24);
    transition: transform .2s, box-shadow .2s, border-color .2s;
    color: #fff; text-decoration: none;
}
.fun-cat-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 50px rgba(99, 102, 241, .34);
    border-color: rgba(255, 255, 255, .34);
    color: #fff;
}
.fun-cat-icon {
    width: 72px; height: 72px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem;
    background: rgba(255, 255, 255, .22);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .14), inset 0 1px 0 rgba(255, 255, 255, .25);
    margin-bottom: 16px;
    transition: transform .2s;
}
.fun-cat-card:hover .fun-cat-icon { transform: scale(1.1) rotate(-5deg); }
.fun-cat-card h3 {
    margin: 0 0 8px; font-size: 1.15rem; font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .28);
}
.fun-cat-card p {
    margin: 0; font-size: .9rem; color: #fff;
    line-height: 1.5;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.fun-cat-count {
    display: inline-block; margin-top: 14px;
    padding: 4px 14px; border-radius: 999px;
    font-size: .78rem; font-weight: 700; letter-spacing: .03em;
    background: rgba(255, 255, 255, .2);
    color: #fff;
}
/* Each fun card gets its own gradient built from the SolKids LOGO palette:
   orange #F97316, gold #F59E0B, teal #14B8A6, green #22C55E, purple #8B5CF6, pink #EC4899.
   Consistent 150° direction + white text (with soft shadow for the lighter hues). */
.grid-fun-cats .fun-cat-card:nth-child(8n+1) { background: linear-gradient(150deg, #F97316 0%, #F59E0B 100%); box-shadow: 0 14px 34px rgba(249,115,22,.26); }   /* orange → gold */
.grid-fun-cats .fun-cat-card:nth-child(8n+2) { background: linear-gradient(150deg, #8B5CF6 0%, #EC4899 100%); box-shadow: 0 14px 34px rgba(139,92,246,.26); }  /* purple → pink */
.grid-fun-cats .fun-cat-card:nth-child(8n+3) { background: linear-gradient(150deg, #14B8A6 0%, #22C55E 100%); box-shadow: 0 14px 34px rgba(20,184,166,.26); }   /* teal → green */
.grid-fun-cats .fun-cat-card:nth-child(8n+4) { background: linear-gradient(150deg, #EC4899 0%, #8B5CF6 100%); box-shadow: 0 14px 34px rgba(236,72,153,.24); }  /* pink → purple */
.grid-fun-cats .fun-cat-card:nth-child(8n+5) { background: linear-gradient(150deg, #F59E0B 0%, #F97316 50%, #EC4899 100%); box-shadow: 0 14px 34px rgba(249,115,22,.26); } /* gold → orange → pink */
.grid-fun-cats .fun-cat-card:nth-child(8n+6) { background: linear-gradient(150deg, #22C55E 0%, #14B8A6 100%); box-shadow: 0 14px 34px rgba(34,197,94,.24); }   /* green → teal */
.grid-fun-cats .fun-cat-card:nth-child(8n+7) { background: linear-gradient(150deg, #EC4899 0%, #F97316 100%); box-shadow: 0 14px 34px rgba(236,72,153,.24); }  /* pink → orange */
.grid-fun-cats .fun-cat-card:nth-child(8n+8) { background: linear-gradient(150deg, #8B5CF6 0%, #14B8A6 100%); box-shadow: 0 14px 34px rgba(139,92,246,.24); }  /* purple → teal */
@media (max-width: 900px) {
    .grid-fun-cats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    .grid-fun-cats { grid-template-columns: 1fr 1fr; gap: 12px; }
    .fun-cat-card { padding: 20px 14px 18px; }
    .fun-cat-icon { width: 56px; height: 56px; font-size: 1.6rem; margin-bottom: 12px; }
    .fun-cat-card h3 { font-size: 1rem; }
    .fun-cat-card p { font-size: .82rem; }
}

/* Post card */
.post-card .card-media { aspect-ratio: 16 / 10; }
.post-meta {
    display: flex; gap: 12px; align-items: center;
    font-size: .82rem; color: var(--c-ink-faint);
    margin-bottom: 8px;
}

/* services page — stats bar */
.svc-stats {
    background: var(--c-primary);
    padding: 32px 0;
    margin-top: -1px;
}
.svc-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    text-align: center;
}
.svc-stat-num {
    display: block;
    font-size: 2.2rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
}
.svc-stat-label {
    display: block;
    font-size: .85rem;
    color: rgba(255,255,255,.8);
    margin-top: 4px;
    font-weight: 500;
}

/* services page — card grid */
.svc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 28px;
}
.svc-card {
    background: var(--c-bg-card);
    border-radius: var(--radius-xl);
    padding: 32px 28px 28px;
    border: 1.5px solid var(--c-border-soft);
    display: flex;
    flex-direction: column;
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.svc-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    border-color: var(--c-primary);
}
.svc-card-header {
    text-align: center;
    margin-bottom: 18px;
}
.svc-card-icon-wrap {
    width: 72px; height: 72px;
    margin: 0 auto 14px;
    background: linear-gradient(135deg, var(--c-accent), var(--c-primary));
    border-radius: 20px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(var(--c-primary-rgb, 0,0,0), .15);
}
.svc-card-icon-wrap img {
    width: 100%; height: 100%; object-fit: cover; border-radius: 20px;
}
.svc-card-icon {
    font-size: 2rem;
    line-height: 1;
}
.svc-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--c-ink);
}
.svc-card-price {
    display: inline-block;
    background: var(--c-bg-soft);
    color: var(--c-primary);
    font-weight: 700;
    font-size: .85rem;
    padding: 4px 14px;
    border-radius: 999px;
}
.svc-card-desc {
    font-size: .9rem;
    line-height: 1.65;
    color: var(--c-ink-soft);
    margin-bottom: 16px;
    flex: 1;
}
.svc-card-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.svc-meta-tag {
    font-size: .78rem;
    font-weight: 600;
    color: var(--c-ink-soft);
    background: var(--c-bg-soft);
    padding: 4px 12px;
    border-radius: 999px;
}
.svc-card-features {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    display: grid;
    gap: 6px;
}
.svc-card-features li {
    font-size: .82rem;
    color: var(--c-ink-soft);
    padding-left: 22px;
    position: relative;
    line-height: 1.5;
}
.svc-card-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--c-primary);
    font-weight: 700;
    font-size: .8rem;
}
.svc-card-btn {
    margin-top: auto;
}

/* services page — bottom CTA */
.svc-cta {
    padding: 80px 0;
    background: var(--c-bg-soft);
}
.svc-cta-inner {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}
.svc-cta-inner h2 {
    font-size: 2rem;
    margin-bottom: 12px;
}
.svc-cta-inner p {
    color: var(--c-ink-soft);
    margin-bottom: 28px;
    line-height: 1.7;
}

/* services — tab bar */
.svc-tab-bar {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 40px;
}
.svc-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 32px;
    border: 2px solid var(--c-border);
    border-radius: 999px;
    background: var(--c-bg);
    color: var(--c-ink-soft);
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .25s ease;
}
.svc-tab-btn:hover {
    border-color: var(--c-secondary);
    color: var(--c-secondary);
}
.svc-tab-btn.is-active {
    background: var(--p-grad-mint);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(20,184,166,.28);
}
.svc-tab-btn.is-active:hover {
    color: #fff;
}
.svc-tab-panel[hidden] {
    display: none;
}

/* services — section headers */
.svc-section-header {
    text-align: center;
    margin-bottom: 40px;
}
.svc-section-header h2 {
    font-size: 2rem;
    margin: 10px 0 8px;
}
.svc-section-header p {
    color: var(--c-ink-soft);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.6;
}
.svc-section-badge {
    display: inline-block;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 5px 18px;
    border-radius: 999px;
    text-transform: uppercase;
}
.svc-badge-paid {
    background: linear-gradient(135deg, var(--c-primary), var(--c-secondary));
    color: #fff;
}
.svc-badge-free {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
}

/* services — free section */
.svc-free-section {
    background: linear-gradient(180deg, #ecfdf5 0%, var(--c-bg) 100%);
    padding-top: 60px;
}
.svc-card-free {
    position: relative;
    border-color: #10b981;
    overflow: hidden;
}
.svc-card-free:hover {
    border-color: #059669;
    box-shadow: 0 8px 30px rgba(16, 185, 129, .15);
}
.svc-card-free-ribbon {
    position: absolute;
    top: 16px; right: -32px;
    background: #10b981;
    color: #fff;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    padding: 4px 40px;
    transform: rotate(45deg);
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    z-index: 1;
}
.svc-icon-free {
    background: linear-gradient(135deg, #10b981, #059669) !important;
}
.svc-price-free {
    background: #ecfdf5 !important;
    color: #059669 !important;
    font-size: .9rem !important;
    font-weight: 800 !important;
}

@media (max-width: 760px) {
    .svc-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .svc-stat-num { font-size: 1.7rem; }
    .svc-grid { grid-template-columns: 1fr; }
    .svc-cta { padding: 50px 0; }
    .svc-cta-inner h2 { font-size: 1.5rem; }
}

/* legacy — keep for homepage service cards */
.grid-services-lg { display: grid; gap: 80px; }
.service-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
    align-items: center;
}
.service-row.reverse > .service-row-media { order: 2; }
.service-row-media {
    background: linear-gradient(135deg, var(--c-accent), var(--c-primary));
    border-radius: var(--radius-xl);
    aspect-ratio: 4/3;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}
.service-row-media img { width: 100%; height: 100%; object-fit: cover; }
.service-icon-lg { font-size: 7rem; }
.service-row-body h2 { font-size: 2.4rem; }

@media (max-width: 760px) {
    .service-row, .service-row.reverse { grid-template-columns: 1fr; gap: 32px; }
    .service-row.reverse > .service-row-media { order: 0; }
    .service-row-media { aspect-ratio: 16/10; }
}

/* ----------------------------------------------------------
   How it works
   ---------------------------------------------------------- */
.steps {
    display: grid; gap: 32px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.step {
    background: var(--c-bg-card);
    padding: 36px 28px;
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--c-border-soft);
    position: relative;
    transition: transform .25s ease;
}
.step:hover { transform: translateY(-4px); }
.step-num {
    width: 64px; height: 64px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
    color: white;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.8rem;
    margin: 0 auto 20px;
    box-shadow: var(--shadow-glow);
}
.step:nth-child(2) .step-num {
    background: linear-gradient(135deg, var(--c-secondary), var(--c-purple));
    box-shadow: 0 12px 30px rgba(20, 184, 166, .28);
}
.step:nth-child(3) .step-num {
    background: linear-gradient(135deg, var(--c-mint), var(--c-secondary));
    box-shadow: 0 12px 30px rgba(109, 199, 161, .28);
}
.step h3 { font-size: 1.3rem; }
.step:nth-child(4) .step-num {
    background: linear-gradient(135deg, #f59e0b, #f97316);
    box-shadow: 0 12px 30px rgba(245, 158, 11, .28);
}
.step:nth-child(5) .step-num {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    box-shadow: 0 12px 30px rgba(99, 102, 241, .28);
}
.step:nth-child(6) .step-num {
    background: linear-gradient(135deg, #ec4899, #f43f5e);
    box-shadow: 0 12px 30px rgba(236, 72, 153, .28);
}

/* ----------------------------------------------------------
   How It Works — Stats & Legal (inline)
   ---------------------------------------------------------- */
.how-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 16px;
    text-align: center;
    margin-top: 48px;
    padding-top: 40px;
    border-top: 2px solid var(--c-border, rgba(0,0,0,.06));
}
.stat-card {
    background: var(--c-bg-card);
    padding: 24px 12px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}
.stat-number {
    display: block;
    font-family: 'Fraunces', 'Nunito', serif;
    font-size: clamp(1.6rem, 2.5vw, 2.2rem);
    font-weight: 800;
    background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}
.stat-label {
    display: block;
    margin-top: 4px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--c-text-muted);
}
.how-policies {
    margin-top: 44px;
    text-align: center;
}
.how-policies-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 700;
    font-size: .95rem;
    color: var(--c-text);
    margin-bottom: 16px;
}
.how-policies-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
.how-policies-links a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--c-text);
    text-decoration: none;
    padding: 10px 20px;
    border-radius: var(--radius-lg);
    background: var(--c-bg-card);
    box-shadow: var(--shadow-card);
    border: 2px solid transparent;
    transition: transform .2s, border-color .2s, box-shadow .2s;
}
.how-policies-links a:hover {
    transform: translateY(-3px);
    border-color: var(--c-primary);
    box-shadow: var(--shadow-glow);
    color: var(--c-primary);
}
@media (max-width: 600px) {
    .how-policies-links { gap: 8px; }
    .how-policies-links a { font-size: .82rem; padding: 8px 14px; }
}

/* ----------------------------------------------------------
   Pagination
   ---------------------------------------------------------- */
.pagination {
    display: flex; justify-content: center; gap: 6px; margin-top: 56px;
    flex-wrap: wrap;
}
.page-link {
    padding: 10px 16px;
    border-radius: 12px;
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    color: var(--c-ink);
    font-weight: 600;
}
.page-link:hover { background: var(--c-bg-soft); color: var(--c-ink); }
.page-link.is-active {
    background: var(--c-secondary); color: white; border-color: var(--c-secondary);
}

/* ----------------------------------------------------------
   Contact
   ---------------------------------------------------------- */
.contact-grid {
    display: grid; gap: 48px;
    grid-template-columns: 1fr 1.4fr;
}
@media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-info {
    padding: 32px;
    background: var(--c-bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.contact-info-row {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 14px 0;
    border-bottom: 1px solid var(--c-border-soft);
}
.contact-info-row:last-child { border-bottom: 0; }
.contact-info-row .icon-circle {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--p-grad-mint);
    color: white;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(20, 184, 166, .25);
}
.contact-info-row .label { color: var(--c-ink-faint); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.contact-info-row .value { font-weight: 600; color: var(--c-ink); }

.contact-socials { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--c-border-soft); }
.contact-socials h3 { font-size: 1rem; margin-bottom: 14px; color: var(--c-ink); }
.contact-social-links { display: flex; flex-wrap: wrap; gap: 12px; }
/* Uniform social pills: clean card base + brand-coloured icon tile.
   The whole pill lights up teal on hover — one cohesive form. */
.contact-social-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 7px 20px 7px 7px;
    border-radius: 999px;
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    color: var(--c-ink);
    font-weight: 700;
    font-size: .9rem;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(31, 41, 55, .05);
    transition: transform .2s var(--p-ease), box-shadow .2s var(--p-ease),
                background .2s var(--p-ease), border-color .2s var(--p-ease), color .2s var(--p-ease);
}
/* the icon sits inside a rounded brand-colour tile */
.contact-social-btn svg {
    flex-shrink: 0;
    width: 34px; height: 34px;
    padding: 8px;
    border-radius: 10px;
    background: var(--c-secondary);
    color: #fff;
    box-sizing: border-box;
    transition: background .2s var(--p-ease);
}
.contact-social-btn:hover {
    transform: translateY(-3px);
    background: var(--p-grad-mint);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 26px rgba(20, 184, 166, .3);
}
.contact-social-btn:hover svg { background: rgba(255, 255, 255, .22); }

.social-follow-box { margin-top: 32px; text-align: center; }
.social-follow-box h3 { font-size: 1.05rem; margin-bottom: 14px; color: var(--c-ink); }
.social-follow-box .contact-social-links { justify-content: center; }

.contact-form, .modal-card form {
    display: flex; flex-direction: column; gap: 16px;
}
.contact-form { padding: 32px; background: var(--c-bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="number"], input[type="password"], input[type="date"], input[type="datetime-local"],
textarea, select {
    width: 100%;
    padding: 13px 16px;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--c-border);
    background: white;
    font: inherit;
    color: inherit;
    transition: border-color .18s, box-shadow .18s;
}
input:focus, textarea:focus, select:focus {
    outline: 0;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 4px rgba(249, 115, 22, .12);
}
label {
    display: flex; flex-direction: column; gap: 6px;
    font-weight: 600; color: var(--c-ink); font-size: .95rem;
}

.field-hint { display: block; font-size: .75rem; color: var(--c-ink-soft); margin-top: 2px; }
.form-feedback { min-height: 1.2em; }
.form-feedback.is-error   { color: var(--c-danger); }
.form-feedback.is-success { color: var(--c-success); }

/* ----------------------------------------------------------
   Article Layout (shared: blog + parenting)
   ---------------------------------------------------------- */
.article-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 48px;
    max-width: 1100px;
    margin: 0 auto;
    align-items: start;
}
.article-main { min-width: 0; }
.article-sidebar {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
@media (max-width: 900px) {
    .article-layout { grid-template-columns: 1fr; gap: 32px; }
    .article-sidebar { position: static; order: -1; }
}

/* Article hero image */
.article-hero-img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: var(--radius-lg, 16px);
    margin-bottom: 32px;
}

/* Article meta bar */
.article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--c-border, #e5e7eb);
    margin-bottom: 28px;
    font-size: .88rem;
    color: var(--c-muted, #6b7280);
}
.article-meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
}
.article-meta-item svg { opacity: .6; }

/* Article lead / summary */
.article-lead {
    font-size: 1.15rem;
    line-height: 1.75;
    color: var(--c-muted, #6b7280);
    font-style: italic;
    padding: 20px 24px;
    background: var(--c-surface, #f9fafb);
    border-left: 4px solid var(--c-primary, #F97316);
    border-radius: 0 var(--radius, 14px) var(--radius, 14px) 0;
    margin-bottom: 32px;
}

/* Article body (shared prose) */
.article-body {
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--c-text, #1f2937);
}
.article-body h2 {
    font-family: var(--ff-display, 'Fraunces', serif);
    font-size: 1.45rem;
    margin: 40px 0 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--c-primary-light, #fee2e2);
    color: var(--c-text, #1f2937);
}
.article-body h2:first-child { margin-top: 0; }
.article-body h3 {
    font-size: 1.15rem;
    margin: 28px 0 10px;
    font-weight: 700;
    color: var(--c-text, #374151);
}
.article-body p { margin: 0 0 18px; }
.article-body ul, .article-body ol { margin: 0 0 20px; padding-left: 24px; }
.article-body li { margin-bottom: 8px; line-height: 1.7; }
.article-body li strong { color: var(--c-text, #1f2937); }
.article-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: .92rem;
    border-radius: var(--radius, 14px);
    overflow: hidden;
}
.article-body th, .article-body td {
    padding: 12px 16px;
    border: 1px solid var(--c-border, #e5e7eb);
    text-align: left;
}
.article-body th {
    background: var(--c-primary, #F97316);
    color: #fff;
    font-weight: 600;
}
.article-body tr:nth-child(even) td { background: var(--c-surface, #f9fafb); }
.article-body blockquote {
    border-left: 4px solid var(--c-primary, #F97316);
    padding: 16px 24px;
    margin: 24px 0;
    background: #fef9f9;
    border-radius: 0 var(--radius, 14px) var(--radius, 14px) 0;
    font-style: italic;
}
.article-body a { color: var(--c-primary, #F97316); text-decoration: underline; text-underline-offset: 3px; }
.article-body a:hover { color: var(--c-primary-dark, #c33); }

/* Inline article images */
.article-inline-img {
    width: 100%;
    border-radius: var(--radius, 14px);
    margin: 24px 0;
    box-shadow: 0 4px 20px rgba(0,0,0,.08);
}
.article-img-caption {
    text-align: center;
    font-size: .85rem;
    color: var(--c-muted, #6b7280);
    margin: -16px 0 24px;
    font-style: italic;
}

/* Ad banner slots */
.ad-slot {
    background: var(--c-surface, #f9fafb);
    border: 2px dashed var(--c-border, #e5e7eb);
    border-radius: var(--radius, 14px);
    padding: 20px;
    text-align: center;
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-muted, #9ca3af);
    font-size: .8rem;
    overflow: hidden;
}
.ad-slot-inline {
    margin: 32px 0;
    min-height: 250px;
}
.ad-slot-sidebar {
    min-height: 250px;
}
.ad-slot-banner {
    min-height: 90px;
    margin: 32px 0;
}
.ad-slot img, .ad-slot iframe { max-width: 100%; border-radius: var(--radius, 14px); }

/* Table of Contents sidebar */
.toc-widget {
    background: #fff;
    border-radius: var(--radius, 14px);
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    padding: 20px;
}
.toc-widget h4 {
    font-family: var(--ff-display, 'Fraunces', serif);
    font-size: .95rem;
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--c-primary-light, #fee2e2);
}
.toc-list { list-style: none; padding: 0; margin: 0; }
.toc-list li { margin-bottom: 6px; }
.toc-list a {
    display: block;
    padding: 6px 10px;
    font-size: .88rem;
    color: var(--c-muted, #6b7280);
    border-radius: 6px;
    text-decoration: none;
    transition: all .2s;
    border-left: 2px solid transparent;
}
.toc-list a:hover, .toc-list a.active {
    background: var(--c-surface, #f9fafb);
    color: var(--c-primary, #F97316);
    border-left-color: var(--c-primary, #F97316);
}

/* Share buttons */
.share-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 0;
    border-top: 1px solid var(--c-border, #e5e7eb);
    margin-top: 32px;
}
.share-bar-label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--c-muted, #6b7280);
    margin-right: 4px;
}
.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--c-surface, #f3f4f6);
    color: var(--c-muted, #6b7280);
    text-decoration: none;
    transition: all .2s;
    border: none;
    cursor: pointer;
}
.share-btn:hover { background: var(--c-secondary, #14B8A6); color: #fff; }
.share-btn svg { width: 18px; height: 18px; }

/* Reading progress bar */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: var(--c-primary, #F97316);
    z-index: 9999;
    transition: width .1s linear;
    width: 0;
}

/* Related articles grid */
.related-articles { margin-top: 48px; }
.related-articles h3 {
    font-family: var(--ff-display, 'Fraunces', serif);
    font-size: 1.3rem;
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--c-primary-light, #fee2e2);
}

/* Legacy compat */
.post-detail { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.post-detail .post-image {
    width: 100%; aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: var(--radius-lg);
    margin-bottom: 32px;
}
.post-detail h1 { font-size: clamp(2rem, 3vw + 1rem, 3rem); }
.post-body p { font-size: 1.1rem; line-height: 1.8; }

/* ----------------------------------------------------------
   Footer
   ---------------------------------------------------------- */
.site-footer {
    background: var(--c-ink);
    color: rgba(255, 255, 255, .82);
    margin-top: 100px;
    position: relative;
}
.site-footer::before {
    content: '';
    position: absolute; top: -2px; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--c-primary), var(--c-accent), var(--c-secondary), var(--c-mint));
}
.footer-grid {
    display: grid; gap: 40px;
    padding: 72px 24px 44px;
    grid-template-columns: 1.5fr 1fr 1.3fr 1fr;
}
/* Quick-links list in two columns so the footer stays short */
.footer-links-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 28px;
}
.footer-links-2col li { margin: 0; }

/* ── Desktop footer refinement (premium, balanced) ───────────────── */
@media (min-width: 901px) {
    .footer-grid {
        grid-template-columns: 1.6fr 1fr 1.35fr 1.05fr;
        gap: 32px 56px;
        align-items: start;
        max-width: 1240px;
        margin: 0 auto;
        border-top: 1px solid rgba(255, 255, 255, .08);
    }
    .footer-col { min-width: 0; }
    .footer-col-brand { padding-right: 24px; }
    .footer-col-brand .footer-tag {
        max-width: 300px;
        line-height: 1.6;
        margin-top: 14px;
    }
    /* consistent column headings with a short accent underline */
    .footer-col h4 {
        position: relative;
        margin-bottom: 20px;
        padding-bottom: 12px;
        font-size: .82rem;
        letter-spacing: .09em;
        text-transform: uppercase;
    }
    .footer-col h4::after {
        content: "";
        position: absolute; left: 0; bottom: 0;
        width: 30px; height: 2px; border-radius: 2px;
        background: var(--c-secondary, #14B8A6);
    }
    .footer-col-contact p { margin: 0 0 12px; line-height: 1.5; }
    /* compact quick-links so the column height matches Contact / Follow us
       (override the base .footer-links li margin that made rows too tall) */
    .site-footer .footer-links-2col li { margin: 0; }
    .footer-links-2col { gap: 11px 32px; align-content: start; }
    .footer-links-2col a { line-height: 1.3; }
    /* social buttons become rounded pills sitting in a neat row */
    .footer-col-socials .socials {
        display: flex; flex-wrap: wrap; gap: 10px;
    }
    .footer-col-socials .socials li { margin: 0; }
    .footer-col-socials .socials a {
        display: inline-flex; align-items: center; gap: 8px;
        padding: 9px 15px; border-radius: 999px;
        background: rgba(255, 255, 255, .06);
        border: 1px solid rgba(255, 255, 255, .12);
        font-size: .85rem; line-height: 1;
        transition: transform .18s ease, background .18s ease, border-color .18s ease;
    }
    .footer-col-socials .socials a:hover {
        background: var(--c-primary, #F97316);
        border-color: var(--c-primary, #F97316);
        color: #fff; transform: translateY(-2px);
    }
}
/* Tablet & phones: 2-column layout with brand + socials spanning full width */
@media (max-width: 900px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 28px 20px;
        padding: 56px 20px 28px;
    }
    .footer-col-brand {
        grid-column: 1 / -1;
        text-align: center;
        padding-bottom: 8px;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
    }
    .footer-col-brand .brand {
        justify-content: center;
    }
    .footer-col-brand .footer-tag {
        max-width: 360px;
        margin: 10px auto 0;
    }
    .footer-col-socials {
        grid-column: 1 / -1;
    }
    .footer-col-socials .socials {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
        list-style: none;
        padding: 0; margin: 0;
    }
    .footer-col-socials .socials li { margin: 0; }
    .footer-col-socials .socials a {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 9px 14px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .06);
        border: 1px solid rgba(255, 255, 255, .12);
        font-size: .85rem;
        transition: background .15s, color .15s;
    }
    .footer-col-socials .socials a:hover {
        background: var(--c-accent);
        color: var(--c-ink);
        border-color: var(--c-accent);
    }
    .footer-bottom .container {
        flex-direction: column;
        gap: 6px;
        text-align: center;
    }
}

/* Phones: tighter typography + spacing */
@media (max-width: 480px) {
    .footer-grid {
        gap: 22px 14px;
        padding: 44px 14px 22px;
    }
    .footer-col h4 {
        font-size: .95rem;
        margin-bottom: 10px;
    }
    .footer-col p {
        font-size: .85rem;
        margin: 4px 0;
        line-height: 1.5;
    }
    .footer-links li { margin: 5px 0; }
    .footer-links a { font-size: .85rem; }
    .footer-tag { font-size: .88rem; }
    .site-footer { margin-top: 48px; }
    .footer-bottom { padding: 16px 0; font-size: .82rem; }
}

.footer-col h4 {
    color: white;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    margin-bottom: 16px;
}
.footer-col p { margin: 6px 0; }
.footer-tag {
    color: rgba(255, 255, 255, .65);
    font-style: italic;
    margin-top: 12px;
    line-height: 1.6;
}
.footer-links, .socials { list-style: none; padding: 0; margin: 0; }
.footer-links li, .socials li { margin: 8px 0; }
.footer-links a, .socials a, .site-footer a {
    color: rgba(255, 255, 255, .82);
}
.footer-links a:hover, .socials a:hover, .site-footer a:hover { color: var(--c-accent); }

.socials a {
    display: inline-flex; align-items: center; gap: 8px;
}

/* Article disclaimer (bottom of every article) */
.article-disclaimer {
    margin-top: 32px;
    padding: 20px 22px;
    background: #fef3cd;
    border: 1px solid #f0d68a;
    border-left: 4px solid #e6a817;
    border-radius: 10px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.article-disclaimer-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
    line-height: 1;
    margin-top: 2px;
}
.article-disclaimer p {
    margin: 0;
    font-size: .82rem;
    line-height: 1.7;
    color: #6b5a00;
}
/* Medical warning block (prominent) */
.medical-warning {
    margin-top: 32px;
    padding: 24px;
    background: linear-gradient(135deg, #fde8e8 0%, #fee2e2 100%);
    border: 2px solid #f87171;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(239, 68, 68, .12);
}
.medical-warning-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.medical-warning-icon {
    font-size: 1.6rem;
    flex-shrink: 0;
}
.medical-warning h3 {
    margin: 0;
    font-family: var(--font-display, 'Fraunces', serif);
    font-size: 1.15rem;
    color: #991b1b;
}
.medical-warning p {
    margin: 0;
    font-size: .9rem;
    line-height: 1.75;
    color: #7f1d1d;
    font-weight: 500;
}
.article-disclaimer-medical {
    background: #fef2f2;
    border-color: #fca5a5;
    border-left-color: #ef4444;
    margin-top: 16px;
}
.article-disclaimer-medical p {
    color: #7f1d1d;
}
@media (max-width: 600px) {
    .medical-warning { padding: 18px; }
    .medical-warning h3 { font-size: 1.05rem; }
}

.article-disclaimer-activity {
    background: #e8f4fd;
    border-color: #a8d4f0;
    border-left-color: #2196f3;
    margin-top: 32px;
}
.article-disclaimer-activity p {
    color: #0d47a1;
}
.article-disclaimer-recipe {
    background: #eef6ee;
    border-color: #b5d6b5;
    border-left-color: #4caf50;
    margin-top: 16px;
}
.article-disclaimer-recipe p {
    color: #2e5a2e;
}
.article-disclaimer-psychology {
    background: #f3e8ff;
    border-color: #c4b5fd;
    border-left-color: #8b5cf6;
}
.article-disclaimer-psychology p {
    color: #4c1d95;
}
@media (max-width: 600px) {
    .article-disclaimer { flex-direction: column; gap: 8px; padding: 16px; }
}

.footer-disclaimer {
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding: 26px 0;
}
.footer-disclaimer p {
    font-size: .76rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, .42);
    margin: 0 auto;
    max-width: 1000px;
    text-align: center;
}
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding: 22px 0;
    font-size: .9rem;
}
.footer-bottom .container {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 12px;
}
.admin-link {
    color: rgba(255, 255, 255, .45);
    font-size: .82rem;
}

/* ----------------------------------------------------------
   Floating Cart Button (FAB)
   ---------------------------------------------------------- */
.fab-cart {
    position: fixed;
    bottom: 24px; right: 24px;
    z-index: 90;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--c-primary);
    color: white;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
    text-decoration: none;
    opacity: 0;
    pointer-events: none;
    transform: scale(.6);
    transition: opacity .25s, transform .25s, background .18s, box-shadow .18s;
}
.fab-cart.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}
.fab-cart:hover {
    background: var(--c-primary-dark, #1a4a7a);
    box-shadow: 0 6px 24px rgba(0,0,0,.3);
    transform: scale(1.08);
}
.fab-cart svg { flex-shrink: 0; }
.fab-bounce { animation: fabPop .4s ease; }
@keyframes fabPop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.25); }
    100% { transform: scale(1); }
}
.fab-cart-badge {
    position: absolute;
    top: -2px; right: -2px;
    background: var(--c-accent, #f97316);
    color: white;
    font-size: .7rem;
    font-weight: 700;
    min-width: 20px; height: 20px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 5px;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
    line-height: 1;
}
@media (max-width: 600px) {
    .fab-cart { bottom: 18px; right: 16px; width: 50px; height: 50px; }
    .fab-cart svg { width: 22px; height: 22px; }
}

/* ----------------------------------------------------------
   Modal
   ---------------------------------------------------------- */
.modal {
    position: fixed; inset: 0; z-index: 100;
    display: none; align-items: center; justify-content: center;
    padding: 24px;
}
.modal.is-open { display: flex; }
.modal-overlay {
    position: absolute; inset: 0;
    background: rgba(31, 41, 55, .55);
    backdrop-filter: blur(4px);
}
.modal-card {
    position: relative;
    background: white;
    border-radius: var(--radius-xl);
    padding: 36px;
    max-width: 480px; width: 100%;
    box-shadow: var(--shadow-lg);
    animation: pop .25s ease;
    max-height: 92vh; overflow-y: auto;
}
@keyframes pop {
    from { transform: scale(.94); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
.modal-card h3 { margin-bottom: 6px; font-size: 1.5rem; }
.modal-product-name {
    color: var(--c-primary);
    font-weight: 600;
    margin: 0 0 20px;
}
.modal-close {
    position: sticky; top: 0; float: right;
    margin-top: -10px; margin-right: -10px; margin-bottom: -28px;
    background: var(--c-bg-soft);
    border: 0;
    width: 38px; height: 38px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--c-ink);
    display: flex; align-items: center; justify-content: center;
    z-index: 2;
    transition: background .18s;
}
.modal-close:hover { background: var(--c-accent); color: white; }

/* ----------------------------------------------------------
   Btn accent (golden 1-click)
   ---------------------------------------------------------- */
.btn-accent {
    background: linear-gradient(135deg, #2DD4BF, #14B8A6, #0D9488);
    color: white;
    box-shadow: 0 4px 16px rgba(20, 184, 166, .3);
    font-weight: 700;
}
.btn-accent:hover {
    background: linear-gradient(135deg, #14B8A6, #0D9488, #0F766E);
    box-shadow: 0 6px 22px rgba(20, 184, 166, .4);
    transform: translateY(-1px);
}
.btn-lg {
    padding: 14px 28px;
    font-size: 1.1rem;
}

/* ----------------------------------------------------------
   Quick Order 1-Click modal
   ---------------------------------------------------------- */
.modal-card-compact {
    max-width: 460px;
    padding: 28px 28px 24px;
}
.quick-order-header {
    text-align: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--c-border-soft);
}
.quick-order-badge {
    display: inline-block;
    background: linear-gradient(135deg, #f59e0b, #f97316);
    color: white;
    font-size: .75rem;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 20px;
    margin-bottom: 6px;
    letter-spacing: .3px;
    text-transform: uppercase;
}
.quick-order-product {
    font-size: 1.1rem;
    color: var(--c-ink);
    margin: 0 0 2px;
    line-height: 1.3;
}
.quick-order-price {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--c-primary);
    margin: 0;
    font-family: var(--font-fun);
}
.qo-form { display: flex; flex-direction: column; gap: 10px; }
.qo-form label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--c-ink-muted);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.qo-form input,
.qo-form select {
    font-size: .9rem;
    padding: 10px 12px;
}
.qo-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.qo-submit {
    margin-top: 4px;
    padding: 13px 24px;
    font-size: 1rem;
}
.qo-login-hint {
    text-align: center;
    font-size: .75rem;
    color: var(--c-ink-faint);
    margin: 10px 0 0;
}
.qo-payment { margin-top: 2px; }
.qo-payment-label {
    font-size: .8rem; font-weight: 600;
    color: var(--c-ink-muted);
    display: block; margin-bottom: 6px;
}
.qo-payment-options {
    display: flex; gap: 8px;
}
.qo-pay-option { cursor: pointer; flex: 1; }
.qo-pay-option input { position: absolute; opacity: 0; pointer-events: none; }
.qo-pay-card {
    display: flex; flex-direction: column; align-items: center;
    gap: 3px; padding: 10px 6px;
    border: 2px solid var(--c-border-soft);
    border-radius: 12px;
    font-size: .75rem; font-weight: 600;
    text-align: center;
    transition: border-color .2s, background .2s;
    color: var(--c-ink-muted);
}
.qo-pay-icon { font-size: 1.3rem; }
.qo-pay-option input:checked ~ .qo-pay-card {
    border-color: var(--c-primary);
    background: rgba(var(--c-primary-rgb, 42, 92, 150), .06);
    color: var(--c-primary);
}
.qo-bank-info {
    background: var(--c-bg-soft);
    border-radius: 10px;
    padding: 10px 12px;
    margin-top: 8px;
}
.qo-bank-detail {
    margin: 0 0 3px;
    font-size: .78rem;
    color: var(--c-ink-muted);
}
.qo-bank-detail code {
    font-size: .76rem;
    background: rgba(0,0,0,.05);
    padding: 1px 5px;
    border-radius: 4px;
}

/* Coupon input in checkout */
.qo-coupon-row { margin-top: 8px; }
.qo-points-row {
    margin-top: 10px; padding: 10px 12px; border-radius: 10px;
    background: #fffbeb; border: 1px solid #fde68a;
}
.qo-points-toggle { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9rem; cursor: pointer; }
.qo-points-input-wrap { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.qo-points-input-wrap input { width: 110px; padding: 8px 10px; border: 1px solid #fde68a; border-radius: 8px; font-weight: 700; }
.qo-points-hint { font-size: .8rem; color: #92400e; }

/* ── App-ready: zonat e sigurta të ekraneve me notch (iOS/Android) ── */
@supports (padding: env(safe-area-inset-top)) {
    .site-header { padding-top: env(safe-area-inset-top); }
    .fab-cart { bottom: calc(20px + env(safe-area-inset-bottom)); }
    .practice-chat-input { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}

/* ── Karta Diell (loyalty v2) ────────────────────────────── */
.sun-card {
    border-radius: 18px; padding: 24px 28px; color: #fff; margin-bottom: 22px;
    background: linear-gradient(135deg, #b45309, #f59e0b);
    box-shadow: 0 10px 30px rgba(180, 83, 9, .25);
}
.sun-card-silver   { background: linear-gradient(135deg, #475569, #94a3b8); box-shadow: 0 10px 30px rgba(71,85,105,.25); }
.sun-card-gold     { background: linear-gradient(135deg, #a16207, #fbbf24); box-shadow: 0 10px 30px rgba(161,98,7,.3); }
.sun-card-platinum { background: linear-gradient(135deg, #312e81, #7c3aed); box-shadow: 0 10px 30px rgba(49,46,129,.3); }
.sun-card-stars    { background: linear-gradient(135deg, #1d4ed8, #38bdf8); box-shadow: 0 10px 30px rgba(29,78,216,.25); }
.sun-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.sun-card-brand { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.sun-card-holder { margin: 4px 0 0; font-size: 1.25rem; }
.sun-card-tier { text-align: center; background: rgba(255,255,255,.16); border-radius: 12px; padding: 8px 14px; display: flex; flex-direction: column; line-height: 1.25; }
.sun-card-tier-icon { font-size: 1.5rem; }
.sun-card-tier-name { font-weight: 800; }
.sun-card-balance { margin: 18px 0 10px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sun-card-points { font-size: 2.6rem; font-weight: 800; line-height: 1; }
.sun-card-points-label { font-size: .95rem; opacity: .9; }
.sun-card-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: .85rem; opacity: .95; }
.sun-card-expiry { background: rgba(0,0,0,.22); padding: 4px 10px; border-radius: 20px; }
.kids-stars-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.kid-star-card {
    border: 1px solid var(--border, #eee); border-radius: 14px; padding: 16px;
    display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
    background: #fff;
}
.kid-star-icon { font-size: 1.8rem; }
.kid-star-level { font-size: .85rem; color: #1d4ed8; font-weight: 700; }
.kid-star-count { font-weight: 800; }
.qo-coupon-input-wrap { display: flex; gap: 6px; align-items: center; }
.qo-coupon-input-wrap input {
    flex: 1; font-family: var(--f-mono, monospace); font-weight: 600;
    letter-spacing: .05em;
}
.qo-coupon-result { font-size: .85rem; margin-top: 4px; min-height: 20px; }

/* ----------------------------------------------------------
   Cart page
   ---------------------------------------------------------- */
.cart-empty {
    text-align: center;
    padding: 60px 20px;
}
.cart-empty-icon { font-size: 3rem; margin-bottom: 12px; }
.cart-empty p { color: var(--c-ink-soft); margin-bottom: 20px; }

.cart-items { display: flex; flex-direction: column; gap: 16px; }
.cart-item {
    display: flex; align-items: center; gap: 16px;
    background: var(--c-bg-card);
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius-lg);
    padding: 16px;
    transition: box-shadow .2s;
}
.cart-item:hover { box-shadow: var(--shadow-sm); }
.cart-item-img {
    width: 72px; height: 72px;
    border-radius: var(--radius-md);
    overflow: hidden; flex-shrink: 0;
    background: var(--c-bg-soft);
}
.cart-item-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-info h4 {
    font-size: 1rem; margin: 0 0 4px;
    color: var(--c-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cart-item-info .price { font-size: .95rem; }
.cart-item-qty {
    display: flex; align-items: center; gap: 8px;
}
.qty-btn {
    width: 32px; height: 32px;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    background: var(--c-bg-soft);
    color: var(--c-ink);
    font-size: 1.1rem; font-weight: 700;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.qty-btn:hover { background: var(--c-border); }
.qty-val {
    font-weight: 700; font-size: 1rem;
    min-width: 24px; text-align: center;
}
.cart-item-subtotal {
    min-width: 90px; text-align: right;
}
.cart-item-subtotal .price { font-size: 1.1rem; }
.cart-item-remove {
    background: none; border: 0;
    color: var(--c-ink-faint);
    font-size: 1.1rem; cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    transition: color .15s, background .15s;
}
.cart-item-remove:hover { color: var(--c-danger); background: #fee2e2; }

.cart-summary {
    margin-top: 32px;
    padding: 24px;
    background: var(--c-bg-card);
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius-lg);
}
.cart-summary-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0;
}
.cart-total {
    font-size: 1.3rem; font-weight: 700;
    border-top: 2px solid var(--c-border-soft);
    padding-top: 16px;
}
.cart-total .price { font-size: 1.5rem; }
.cart-actions-bar {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; margin-top: 20px;
}

@media (max-width: 600px) {
    .cart-item {
        display: grid;
        grid-template-columns: 56px 1fr;
        grid-template-rows: auto auto auto;
        gap: 8px 12px;
        align-items: center;
    }
    .cart-item-img { width: 56px; height: 56px; grid-row: 1; grid-column: 1; }
    .cart-item-info { grid-row: 1; grid-column: 2; }
    .cart-item-info h4 { white-space: normal; font-size: .9rem; }
    .cart-item-qty { grid-row: 2; grid-column: 2; }
    .cart-item-subtotal { grid-row: 2; grid-column: 2; justify-self: end; min-width: auto; }
    .cart-item-remove { grid-row: 3; grid-column: 1 / -1; justify-self: start; }
    .cart-actions-bar { flex-direction: column; }
    .cart-actions-bar .btn { width: 100%; justify-content: center; }
}

/* ----------------------------------------------------------
   Breadcrumb
   ---------------------------------------------------------- */
.breadcrumb {
    padding: 14px 0;
    font-size: .85rem;
    color: var(--c-ink-soft);
}
.breadcrumb a { color: var(--c-ink-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--c-primary); }
.breadcrumb .sep { margin: 0 6px; opacity: .5; }
.breadcrumb [aria-current] { color: var(--c-ink); font-weight: 600; }

/* ----------------------------------------------------------
   Product Detail Page
   ---------------------------------------------------------- */
.pd-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}
.pd-gallery { position: sticky; top: 100px; }
.pd-main-img {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--c-bg-card);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--c-border-soft);
    /* wrap the photo at its own ratio — no empty letterbox, no cropping */
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
}
.pd-main-img img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 620px;
}
.pd-thumbs {
    display: flex; gap: 10px;
    margin-top: 14px;
}
.pd-thumb {
    width: 64px; height: 64px;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid var(--c-border-soft);
    cursor: pointer;
    background: var(--c-bg-card);
    padding: 0;
    transition: border-color .2s;
}
.pd-thumb.is-active,
.pd-thumb:hover { border-color: var(--c-primary); }
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ── Full-screen image lightbox (fits any uploaded photo ratio) ── */
.img-lightbox {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(15, 23, 42, .93);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    display: none; align-items: center; justify-content: center;
    padding: 40px; cursor: zoom-out;
}
.img-lightbox.is-open { display: flex; animation: lbFade .2s ease; }
@keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }
.img-lightbox img {
    max-width: 100%; max-height: 100%;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
    cursor: default;
}
.img-lightbox-close {
    position: absolute; top: 18px; right: 22px;
    width: 46px; height: 46px; border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff; font-size: 1.9rem; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.img-lightbox-close:hover { background: rgba(255, 255, 255, .28); }
@media (max-width: 480px) { .img-lightbox { padding: 16px; } }
.pd-thumb-video {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: var(--c-text-muted); font-size: .7rem; gap: 2px;
}
.pd-thumb-video svg { opacity: .7; }
.pd-thumb-video.is-active svg,
.pd-thumb-video:hover svg { opacity: 1; }
.pd-video {
    display: block;
    width: 100%; height: auto; max-height: 620px; object-fit: contain;
    border-radius: 18px; background: #000;
}

.pd-info { display: flex; flex-direction: column; gap: 12px; }
.pd-category {
    display: inline-block;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--c-primary);
    background: color-mix(in srgb, var(--c-primary) 10%, transparent);
    padding: 4px 12px;
    border-radius: 20px;
    width: fit-content;
}
.pd-title {
    font-family: var(--font-display);
    font-size: 1.8rem;
    line-height: 1.2;
    color: var(--c-ink);
    margin: 0;
}
.pd-sku {
    font-size: .82rem;
    color: var(--c-ink-soft);
    margin: 0;
}
.pd-short-desc {
    font-size: .95rem;
    line-height: 1.55;
    color: var(--c-ink-soft);
    margin: 0;
}
.pd-highlights {
    list-style: none; padding: 0; margin: 4px 0 0;
    display: flex; flex-direction: column; gap: 6px;
}
.pd-highlights li {
    font-size: .9rem;
    color: var(--c-ink);
    padding-left: 22px;
    position: relative;
    line-height: 1.4;
}
.pd-highlights li::before {
    content: '';
    position: absolute; left: 0; top: 7px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--c-primary);
}
.pd-price-box {
    background: color-mix(in srgb, var(--c-primary) 6%, var(--c-bg-card));
    border: 1px solid color-mix(in srgb, var(--c-primary) 18%, transparent);
    border-radius: 16px;
    padding: 18px 20px;
    display: flex; flex-direction: column; gap: 6px;
}
.pd-price {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 800;
    color: var(--c-primary);
}
.pd-actions {
    display: flex; gap: 12px;
}
.pd-actions .btn { flex: 1; justify-content: center; }
.pd-wishlist {
    display: flex; align-items: center; gap: 8px;
    background: none; border: none;
    font-size: .88rem;
    color: var(--c-ink-soft);
    cursor: pointer;
    padding: 6px 0;
    transition: color .2s;
}
.pd-wishlist:hover,
.pd-wishlist.is-wishlisted { color: var(--c-danger); }
.pd-wishlist .heart-icon { fill: currentColor; }

/* Card link styling */
.card-title-link { text-decoration: none; color: inherit; }
.card-title-link:hover .card-title { color: var(--c-primary); }
a.card-link { display: block; }
.product-card { position: relative; }
.product-card .btn-wishlist { position: absolute; top: 10px; right: 10px; z-index: 2; }

/* Tabs */
.pd-tabs-section { padding-top: 0; }
.pd-tabs {
    display: flex; gap: 0;
    border-bottom: 2px solid var(--c-border-soft);
    margin-bottom: 28px;
}
.pd-tab {
    padding: 12px 24px;
    background: none; border: none;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--c-ink-soft);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: color .2s, border-color .2s;
}
.pd-tab:hover { color: var(--c-ink); }
.pd-tab.is-active {
    color: var(--c-primary);
    border-bottom-color: var(--c-primary);
}
.pd-tab-panel { display: none; }
.pd-tab-panel.is-active { display: block; }

.pd-description {
    font-size: .95rem;
    line-height: 1.7;
    color: var(--c-ink);
    max-width: 720px;
}
.pd-desc-bullets {
    margin: 16px 0 0;
    padding-left: 20px;
}
.pd-desc-bullets li {
    margin-bottom: 6px;
    line-height: 1.5;
}

.pd-details-table {
    width: 100%;
    max-width: 500px;
    border-collapse: collapse;
}
.pd-details-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--c-border-soft);
    font-size: .92rem;
}
.pd-details-table td:first-child {
    font-weight: 600;
    color: var(--c-ink);
    width: 40%;
}
.pd-details-table td:last-child { color: var(--c-ink-soft); }


/* ==========================================================
   MOBILE-FIRST refinements
   - Reduce vertical rhythm
   - 16px input font-size to prevent iOS zoom on focus
   - Bottom-sheet modal
   - Larger tap targets
   - Filter pills scroll horizontally
   ========================================================== */

/* Inputs at 16px+ on mobile to prevent iOS auto-zoom */
@media (max-width: 760px) {
    input, textarea, select { font-size: 16px !important; }
    .container { padding: 0 18px; }
}

/* Tighter section / hero padding on phones */
@media (max-width: 760px) {
    .section { padding: 56px 0; }
    .section-tight { padding: 36px 0; }
    .section-head { margin-bottom: 36px; }
    .section-foot { margin-top: 28px; }

    .slide { min-height: 420px; }
    .slide-content { padding: 56px 18px 80px; }
    .slide-content h1 { font-size: clamp(1.7rem, 6vw + .5rem, 2.4rem); }
    .slide-content p { font-size: 1rem; }
    .slider-arrow { display: none; }
    .slider-dots { bottom: 18px; }

    .page-hero { padding: 56px 0 48px; }
    .page-hero h1 { font-size: clamp(1.8rem, 5vw + .5rem, 2.4rem); }
    .page-hero p  { font-size: 1rem; }

    .site-footer { margin-top: 64px; }
    .footer-grid { padding: 52px 18px 28px; gap: 28px; }

    /* Cards lean tighter */
    .card-body { padding: 18px 18px 20px; }
    .card-title { font-size: 1.1rem; }
    .grid { gap: 18px; }

    /* Buttons hit-friendly */
    .btn { min-height: 46px; padding: 12px 22px; }
    .btn-sm { min-height: 38px; padding: 8px 14px; }

    /* Product detail — single column on mobile */
    .pd-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .pd-gallery { position: static; }
    .pd-title { font-size: 1.4rem; }
    .pd-price { font-size: 1.7rem; }
    .pd-actions { flex-direction: column; }
    .pd-actions .btn { width: 100%; }
    .pd-tab { padding: 10px 16px; font-size: .9rem; }
    .breadcrumb { font-size: .78rem; padding: 10px 0; }
    .breadcrumb .sep { margin: 0 4px; }
}

/* Smaller phones: events + blog stay single column (info-dense),
   but products + services + activities stay 2-column for browsability */
@media (max-width: 480px) {
    .grid { gap: 14px; }
    .grid-products,
    .grid-services,
    .grid-activities {
        grid-template-columns: 1fr 1fr;
    }
    .grid-events { grid-template-columns: 1fr 1fr; }
    .grid-posts { grid-template-columns: 1fr; }

    .section { padding: 44px 0; }
    .step { padding: 28px 22px; }
    .contact-info { padding: 22px; }
    .contact-form { padding: 22px; }
}

/* ==========================================================
   PHONE: compact 2-col cards (products / services / activities)
   ========================================================== */
@media (max-width: 480px) {
    .container { padding: 0 14px; }

    /* All cards — tighten chrome */
    .card { border-radius: 18px; }
    .card-body { padding: 12px 12px 14px; }
    .card-title {
        font-size: .95rem;
        line-height: 1.25;
        margin-bottom: 6px;
        /* clamp to 2 lines so cards align */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .card-text {
        font-size: .8rem;
        line-height: 1.45;
        margin-bottom: 10px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    /* Product cards in the 2-col mobile grid: keep them compact */
    .product-card .card-text { -webkit-line-clamp: 2; margin-bottom: 8px; }
    .product-card .card-media { aspect-ratio: 5 / 4; }
    .card-foot {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }
    .price {
        font-size: 1rem;
        text-align: center;
        font-weight: 700;
    }
    .product-card .btn,
    .service-card .btn {
        width: 100%;
        padding: 8px 10px;
        font-size: .78rem;
        min-height: 36px;
        gap: 4px;
    }
    .product-card .btn .icon,
    .service-card .btn .icon { width: 14px; height: 14px; }

    /* Service card icon (homepage grid) */
    .service-card .service-icon {
        width: 44px; height: 44px;
        margin: 14px 12px 0;
        font-size: 1.35rem;
        border-radius: 14px;
    }

    /* Activity card — already small, just trim */
    .activity-card { padding: 18px 12px; }
    .activity-card .icon-circle {
        width: 52px; height: 52px;
        font-size: 1.65rem;
        margin-bottom: 12px;
    }
    .activity-card h3 { font-size: .92rem; margin-bottom: 4px; }
    .activity-card .age { font-size: .7rem; }

    /* Event card — compact for 2-col */
    .event-card .card-media { aspect-ratio: 4 / 3; }
    .event-date-pill {
        top: 8px; right: 8px;
        padding: 5px 8px;
        min-width: 42px;
        border-radius: 10px;
    }
    .event-date-pill .day { font-size: 1.05rem; }
    .event-date-pill .month { font-size: .6rem; margin-top: 1px; }
    .event-card .card-body { padding: 10px 10px 12px; }
    .event-card .card-title {
        font-size: .88rem;
        line-height: 1.25;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .event-meta { gap: 3px; margin: 6px 0 8px; font-size: .75rem; }
    .event-meta-row .icon { width: 12px; height: 12px; }
    .event-card .card-text {
        font-size: .78rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 8px;
    }
    .event-card .card-foot { flex-direction: column; gap: 4px; }
    .event-card .price { font-size: .9rem; text-align: center; }
    .event-card .btn {
        width: 100%;
        padding: 7px 8px;
        font-size: .75rem;
        min-height: 34px;
    }
}

/* ==========================================================
   PHONE: services.php alternating rows → stacked compact cards
   ========================================================== */
@media (max-width: 600px) {
    .grid-services-lg {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }
    .service-row,
    .service-row.reverse {
        display: grid;
        grid-template-columns: 80px 1fr;
        gap: 0 14px;
        align-items: center;
        background: var(--c-bg-card);
        border-radius: 18px;
        padding: 16px;
        box-shadow: var(--shadow-sm);
        border: 1px solid var(--c-border-soft);
        text-align: left;
    }
    .service-row.reverse > .service-row-media { order: 0; }
    .service-row-media {
        aspect-ratio: 1;
        width: 80px; height: 80px;
        border-radius: 16px;
        box-shadow: none;
        margin: 0;
        display: flex; align-items: center; justify-content: center;
    }
    .service-icon-lg { font-size: 2.6rem; }
    .service-row-body {
        padding: 0;
        display: flex; flex-direction: column;
        gap: 4px; align-items: flex-start;
    }
    .service-row-body .eyebrow { display: none; }
    .service-row-body h2 {
        font-size: 1.05rem;
        font-weight: 700;
        margin: 0;
        line-height: 1.3;
    }
    .service-row-body p {
        font-size: .82rem;
        line-height: 1.4;
        margin: 0;
        color: var(--c-ink-soft);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .service-row-body .btn {
        margin-top: 8px;
        padding: 8px 16px;
        font-size: .8rem;
        min-height: 36px;
    }
}

/* Extra-small phones (<360px) — fall back to single column */
@media (max-width: 359px) {
    .grid-products,
    .grid-services,
    .grid-services-lg,
    .grid-events,
    .grid-activities { grid-template-columns: 1fr; }
}

/* Modal becomes a bottom-sheet on phones */
@media (max-width: 600px) {
    .modal { padding: 0; align-items: flex-end; }
    .modal-card {
        max-width: 100%;
        width: 100%;
        max-height: 85vh;
        border-radius: 24px 24px 0 0;
        padding: 20px 18px 26px;
        animation: slideUp .28s ease;
    }
    .modal-card-compact { padding: 20px 18px 22px; }
    .modal-card form { gap: 10px; }
    .modal-close { top: 8px; right: 8px; width: 32px; height: 32px; }
    .quick-order-header { margin-bottom: 12px; padding-bottom: 10px; }
    .quick-order-product { font-size: 1rem; }
    .quick-order-price { font-size: 1.15rem; }
    .qo-row { gap: 8px; }
    .qo-form input, .qo-form select { padding: 9px 10px; font-size: .85rem; }
    .qo-submit { padding: 12px 20px; font-size: .95rem; }
    @keyframes slideUp {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }
}
@media (max-width: 340px) {
    .qo-row { grid-template-columns: 1fr; }
}

/* Filter pills scroll on phones rather than wrapping cramped */
@media (max-width: 500px) {
    .filter-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 8px;
        margin-left: -18px;
        margin-right: -18px;
        padding-left: 18px;
        padding-right: 18px;
    }
    .filter-bar::-webkit-scrollbar { display: none; }
    .filter-bar .page-link { flex-shrink: 0; }
}

/* Pagination compact on phones */
@media (max-width: 480px) {
    .pagination .page-link { padding: 8px 12px; font-size: .9rem; }
}

/* Lock html overflow when nav drawer is open (mobile only) */
body.nav-open { overflow: hidden; }

/* ==========================================================
   INFINITE SCROLL — sentinel + spinner
   ========================================================== */
.infinite-sentinel {
    display: flex; align-items: center; justify-content: center;
    gap: 12px;
    padding: 48px 0;
    color: var(--c-ink-faint);
    font-size: .95rem;
    cursor: default;
}
.infinite-spinner {
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 3px solid var(--c-border);
    border-top-color: var(--c-primary);
    animation: spin .8s linear infinite;
    flex-shrink: 0;
}
.infinite-sentinel:not(.is-loading) .infinite-spinner { opacity: .35; }
.infinite-sentinel.is-error {
    cursor: pointer;
    color: var(--c-danger);
}
.infinite-sentinel.is-error .infinite-spinner {
    border-color: var(--c-danger);
    border-top-color: transparent;
    animation: none;
}
.infinite-done {
    text-align: center;
    padding: 40px 0 0;
    font-size: 1rem;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================
   CUSTOMER ACCOUNT AREA
   ========================================================== */
.account-shell {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 32px;
    align-items: start;
}
@media (max-width: 880px) { .account-shell { grid-template-columns: 1fr; } }

.account-sidebar {
    background: var(--c-bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--c-border-soft);
    padding: 22px;
    position: sticky; top: 96px;
}
.account-sidebar-toggle {
    display: none;
}
@media (max-width: 880px) {
    .account-sidebar {
        position: static;
    }
    .account-sidebar-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 12px 0;
        background: none;
        border: none;
        cursor: pointer;
        font-size: .95rem;
        font-weight: 600;
        color: var(--c-ink);
    }
    .sidebar-toggle-arrow {
        transition: transform .25s ease;
        font-size: .75rem;
        color: var(--c-ink-soft);
    }
    .account-sidebar.sidebar-open .sidebar-toggle-arrow {
        transform: rotate(180deg);
    }
    .account-sidebar .account-greet,
    .account-sidebar .account-nav,
    .account-sidebar .account-children-box,
    .account-sidebar .account-supervisor-box {
        display: none;
    }
    .account-sidebar.sidebar-open .account-greet {
        display: flex;
    }
    .account-sidebar.sidebar-open .account-nav,
    .account-sidebar.sidebar-open .account-children-box,
    .account-sidebar.sidebar-open .account-supervisor-box {
        display: block;
    }
}

.account-greet {
    display: flex; align-items: center; gap: 12px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--c-border-soft);
    margin-bottom: 14px;
}
.account-type-badge {
    display: inline-block;
    font-size: .68rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--c-bg-soft);
    color: var(--c-ink-soft);
    margin-top: 2px;
}
.account-type-child {
    background: #fef3c7;
    color: #b45309;
}
.account-type-parent {
    background: #ecfdf5;
    color: #047857;
}
.account-type-biz {
    background: #eff6ff;
    color: #2563eb;
}
.account-avatar {
    width: 44px; height: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
    color: white; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
    text-transform: uppercase;
    flex-shrink: 0;
}
.account-greet small { display: block; font-size: .78rem; }
.account-greet strong { display: block; color: var(--c-ink); }

.account-nav { display: flex; flex-direction: column; gap: 2px; }
.account-nav a {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    color: var(--c-ink-soft);
    font-weight: 600;
    font-size: .95rem;
    transition: background .15s, color .15s;
}
.account-nav a:hover { background: var(--c-bg-soft); color: var(--c-ink); }
.account-nav a.active {
    background: var(--c-ink); color: white;
}
.account-nav .account-logout {
    margin-top: 8px;
    border-top: 1px solid var(--c-border-soft);
    padding-top: 16px;
    color: var(--c-danger);
}

/* Supervisor & Children sidebar boxes */
.account-supervisor-box,
.account-children-box {
    margin-top: 16px;
    padding: 14px;
    border-radius: var(--radius-lg);
    background: var(--c-bg-soft);
    border: 1px solid var(--c-border-soft);
}
.account-supervisor-box > small,
.account-children-box > small {
    display: block;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 8px;
}
.account-supervisor-info,
.account-child-item {
    display: flex;
    align-items: center;
    gap: 8px;
}
.account-child-item { margin-top: 6px; }
.account-avatar-sm {
    width: 28px; height: 28px;
    border-radius: 8px;
    font-size: .7rem;
    background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
    color: white;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
}
.account-supervisor-empty {
    text-align: center;
    padding: 18px 14px;
}
.account-supervisor-empty .btn { margin-top: 8px; }

/* Supervisor card in profile */
.supervisor-card {
    padding: 16px;
    border-radius: var(--radius-lg);
    background: var(--c-bg-soft);
    border: 1px solid var(--c-border-soft);
}
.supervisor-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Children grid (parent dashboard) */
.children-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}
.child-card { padding: 24px; }
.child-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.child-card-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    text-align: center;
    padding: 14px 0;
    border-top: 1px solid var(--c-border-soft);
    border-bottom: 1px solid var(--c-border-soft);
}
.child-stat-value {
    display: block;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--c-primary);
}
.child-stat-label {
    display: block;
    font-size: .7rem;
    color: var(--c-ink-soft);
    margin-top: 2px;
}
.child-card-footer {
    padding-top: 12px;
}

/* Child list in profile */
.child-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.child-list-item > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Nav badge (approval count) */
.account-nav .nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--c-danger);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    margin-left: 6px;
}

/* Approval cards */
.approval-list { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.approval-card {
    border: 1.5px solid var(--c-border-soft);
    border-radius: var(--radius-lg);
    padding: 16px;
    background: var(--c-bg-soft);
}
.approval-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.approval-child-badge {
    width: 32px; height: 32px;
    border-radius: 10px;
    background: linear-gradient(135deg, #f59e0b, #f97316);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .85rem;
}
.approval-detail {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 12px;
}
.approval-thumb {
    width: 60px; height: 60px;
    object-fit: cover;
    border-radius: var(--radius);
}
.approval-actions {
    display: flex;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--c-border-soft);
}

/* Badge for awaiting_approval status */
.badge-awaiting_approval {
    background: #fef3c7;
    color: #92400e;
}

.account-main {
    min-width: 0;
}
.account-page-head {
    margin-bottom: 24px;
}
.account-page-head h1 { font-size: clamp(1.6rem, 2vw + .5rem, 2.2rem); margin-bottom: 4px; }
.account-page-head p { margin: 0; }

.account-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}
.account-stat {
    display: block;
    background: var(--c-bg-card);
    border-radius: var(--radius-md);
    border: 1px solid var(--c-border-soft);
    padding: 22px;
    color: var(--c-ink);
    transition: transform .15s ease, box-shadow .15s ease;
}
.account-stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); color: var(--c-ink); }
.account-stat-label { display: block; color: var(--c-ink-soft); font-size: .9rem; font-weight: 600; }
.account-stat-value { display: block; font-family: var(--font-display); font-size: 2.2rem; font-weight: 700; margin-top: 4px; color: var(--c-primary); }

.account-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
@media (max-width: 880px) { .account-grid { grid-template-columns: 1fr; } }

.account-panel {
    background: var(--c-bg-card);
    border-radius: var(--radius-md);
    border: 1px solid var(--c-border-soft);
    padding: 24px;
    box-shadow: var(--shadow-sm);
}
.account-panel h2 { font-size: 1.2rem; margin-bottom: 16px; }
.account-panel form { display: flex; flex-direction: column; gap: 14px; }
.account-panel-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 14px; gap: 12px;
}
.account-panel-head h2 { margin: 0; font-size: 1.15rem; }

.account-list {
    list-style: none; padding: 0; margin: 0;
}
.account-list li {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--c-border-soft);
    align-items: center;
}
.account-list li:last-child { border-bottom: 0; }
.account-list small { display: block; margin-top: 2px; }

/* Wishlist page */
.wishlist-empty {
    text-align: center; padding: 60px 20px;
}
.wishlist-empty-icon { margin-bottom: 16px; opacity: .5; }
.wishlist-empty h3 { margin-bottom: 8px; }
.wishlist-empty .btn { margin-top: 20px; }
.wishlist-count {
    font-size: .9rem; color: var(--c-ink-faint);
    margin-bottom: 16px; font-weight: 600;
}
.wishlist-grid { margin-bottom: 40px; }

/* Data table reused from admin */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td {
    padding: 12px 10px; text-align: left;
    border-bottom: 1px solid var(--c-border-soft);
    vertical-align: middle;
}
.data-table th { font-size: .8rem; text-transform: uppercase; color: var(--c-ink-soft); letter-spacing: .04em; }
.thumb { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: var(--c-bg-soft); }

.table-wrap { overflow-x: auto; }

/* Badges */
.badge {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    font-weight: 700; font-size: .72rem;
    text-transform: uppercase; letter-spacing: .04em;
}
.badge-pending,   .badge-unpaid    { background: #fef3c7; color: #92400e; }
.badge-completed, .badge-confirmed, .badge-paid { background: #d1fae5; color: #065f46; }
.badge-cancelled, .badge-refunded  { background: #fee2e2; color: #991b1b; }

/* Header cart toggle */
.cart-toggle {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    color: var(--c-ink);
    transition: background .15s, color .15s;
    margin-left: 4px;
}
.cart-toggle:hover { background: var(--c-bg-soft); color: var(--c-primary); }
.cart-toggle svg { width: 22px; height: 22px; }
.cart-badge {
    position: absolute; top: 2px; right: 0;
    min-width: 18px; height: 18px;
    background: var(--c-primary);
    color: white;
    font-size: .7rem; font-weight: 700;
    line-height: 18px; text-align: center;
    border-radius: 999px;
    padding: 0 5px;
    pointer-events: none;
    animation: pop .25s ease;
}

/* Card actions (two buttons stacked) */
.card-actions {
    display: flex; flex-direction: column; gap: 6px;
    flex: 1; min-width: 0;
}
.card-actions .btn { justify-content: center; white-space: nowrap; }
.btn-add-cart.is-added { background: var(--c-success); color: white; }

/* Header account chip */
.account-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px 6px 6px;
    background: var(--c-bg-soft);
    border: 1px solid var(--c-border);
    border-radius: 999px;
    color: var(--c-ink);
    font-weight: 600; font-size: .9rem;
    margin-left: 6px;
    transition: background .15s;
}
.account-chip:hover { background: var(--c-accent); color: var(--c-ink); }
.account-chip .account-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    font-size: .85rem;
}
.account-chip-guest {
    padding: 10px 20px;
    background: var(--p-grad-mint);
    color: #fff;
    font-weight: 700;
    letter-spacing: .01em;
    box-shadow: 0 4px 14px rgba(20, 184, 166, .3);
    border: 0;
}
.account-chip-guest:hover {
    background: linear-gradient(135deg, #14B8A6, #0D9488, #0F766E);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 14px 32px rgba(20, 184, 166, .42);
}
.account-chip-guest:active { transform: translateY(0); }

/* Auth: Google Sign-In wrapper + divider */
.auth-box {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    margin-bottom: 22px;
}
.auth-box .g_id_signin { display: flex; justify-content: center; }
.auth-google-wrap {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    margin-bottom: 4px; width: 100%;
}
.auth-google-wrap .g_id_signin { display: flex; justify-content: center; width: 100%; max-width: 100%; overflow: hidden; }
.auth-google-wrap .g_id_signin iframe { max-width: 100% !important; }
.auth-google-terms {
    font-size: .75rem; color: var(--c-ink-faint); text-align: center;
    margin: 4px 0 0; line-height: 1.45;
}
.auth-google-terms a { color: var(--c-primary); text-decoration: underline; }
.auth-google-terms-warn { color: var(--c-primary); font-weight: 600; font-size: .8rem; }
.auth-divider {
    display: flex; align-items: center; gap: 12px;
    margin: 0 0 22px; color: var(--c-ink-faint);
    font-size: .82rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .08em;
}
.auth-divider::before,
.auth-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--c-border);
}
.auth-divider span { white-space: nowrap; }

/* Auth tabs (Child / Parent / Business) */
.auth-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 24px;
    background: var(--c-bg-soft);
    border-radius: var(--radius-lg);
    padding: 4px;
}
.auth-tab {
    flex: 1;
    padding: 12px 16px;
    border: none;
    background: transparent;
    border-radius: calc(var(--radius-lg) - 2px);
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    color: var(--c-ink-soft);
    cursor: pointer;
    transition: all .2s ease;
}
.auth-tab.is-active {
    background: #fff;
    color: var(--c-primary);
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.auth-tab:hover:not(.is-active) {
    color: var(--c-ink);
}
.auth-tabs-3 .auth-tab {
    padding: 12px 10px;
    font-size: .84rem;
}
.auth-child-fields,
.auth-biz-fields {
    border: 1.5px solid var(--c-border-soft);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 8px;
    background: var(--c-bg-soft);
}
.auth-section-divider,
.auth-biz-divider {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--c-primary);
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1.5px solid var(--c-border-soft);
}
.auth-child-fields label,
.auth-biz-fields label {
    margin-bottom: 12px;
}
.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 480px) {
    .form-row-2 { grid-template-columns: 1fr; }
}

/* Terms / Disclaimer checkbox */
.auth-terms-box {
    margin: 16px 0 20px;
    padding: 16px;
    background: var(--c-bg-soft, #f8f8f6);
    border-radius: var(--radius, 14px);
    border: 1px solid var(--c-border, #e5e5e0);
}
.auth-terms-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: .9rem;
    line-height: 1.5;
}
.auth-terms-check input[type="checkbox"] {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--c-primary, #F97316);
}
.auth-terms-check strong { color: var(--c-primary, #F97316); }
.auth-terms-details {
    margin-top: 10px;
}
.auth-terms-details summary {
    cursor: pointer;
    font-size: .82rem;
    color: var(--c-primary, #F97316);
    font-weight: 600;
    user-select: none;
}
.auth-terms-details summary:hover { text-decoration: underline; }
.auth-terms-content {
    margin-top: 10px;
    padding: 14px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid var(--c-border, #e5e5e0);
    max-height: 200px;
    overflow-y: auto;
}
.auth-terms-content p {
    font-size: .8rem;
    line-height: 1.7;
    color: var(--c-muted, #6b7280);
    margin: 0;
}

/* Disclaimer modal (first-login pop-up) */
.disclaimer-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(4px);
    animation: fadeIn .3s ease;
    padding: 20px;
}
.disclaimer-overlay.disclaimer-closing {
    animation: fadeOut .3s ease forwards;
}
.disclaimer-modal {
    background: #fff;
    border-radius: 16px;
    padding: 36px 32px 28px;
    max-width: 520px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    animation: slideUp .35s ease;
}
.disclaimer-closing .disclaimer-modal {
    animation: slideDown .3s ease forwards;
}
.disclaimer-modal-icon {
    font-size: 2.5rem;
    margin-bottom: 10px;
}
.disclaimer-modal h2 {
    font-family: var(--font-display, 'Fraunces', serif);
    font-size: 1.5rem;
    color: var(--c-text, #1e293b);
    margin: 0 0 6px;
}
.disclaimer-modal-intro {
    color: var(--c-muted, #6b7280);
    font-size: .95rem;
    margin: 0 0 20px;
}
.disclaimer-modal-body {
    text-align: left;
    margin-bottom: 24px;
}
.disclaimer-modal-body p {
    font-size: .9rem;
    line-height: 1.7;
    color: var(--c-text, #1e293b);
    margin: 0 0 12px;
    padding-left: 16px;
    border-left: 3px solid var(--c-primary, #f97316);
}
.disclaimer-modal-body p:last-child { margin-bottom: 0; }
.disclaimer-modal-btn {
    width: 100%;
    padding: 14px 24px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 10px;
}
@keyframes slideUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideDown {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(30px); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes fadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@media (max-width: 600px) {
    .disclaimer-modal { padding: 28px 20px 22px; }
    .disclaimer-modal h2 { font-size: 1.25rem; }
}

/* Booking contact type selector */
.booking-contact-type {
    display: flex;
    gap: 0;
    margin-bottom: 16px;
    background: var(--c-bg-soft);
    border-radius: var(--radius);
    padding: 3px;
}
.booking-ct-btn {
    flex: 1;
    padding: 8px 12px;
    border: none;
    background: transparent;
    border-radius: calc(var(--radius) - 2px);
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    color: var(--c-ink-soft);
    cursor: pointer;
    transition: all .2s ease;
}
.booking-ct-btn.is-active {
    background: #fff;
    color: var(--c-secondary);
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

/* ==========================================================
   ACTIVITY DETAIL PAGE
   ========================================================== */
.text-body p {
    font-size: 1.1rem;
    line-height: 1.85;
    margin: 0 0 1.2em;
    color: var(--c-ink);
}
.text-body p:first-letter {
    font-family: var(--font-display);
    font-size: 2.2em;
    float: left;
    line-height: 1;
    padding: 8px 12px 0 0;
    color: var(--c-primary);
    font-weight: 700;
}

/* Story parts list */
.story-parts {
    display: flex; flex-direction: column;
    gap: 14px; margin-top: 32px;
}
.story-part {
    display: flex; align-items: center; gap: 18px;
    padding: 20px 22px;
    background: var(--c-bg-card);
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    color: var(--c-ink);
    transition: transform .15s, box-shadow .15s;
}
.story-part:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    color: var(--c-ink);
    border-color: var(--c-primary);
}
.story-part-num {
    width: 56px; height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
    color: white;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-weight: 700; font-size: 1.6rem;
    flex-shrink: 0;
    box-shadow: var(--shadow-glow);
}
.story-part h3 { margin: 0 0 4px; font-size: 1.15rem; }
.story-part p  { margin: 0; font-size: .9rem; }
.story-part-arrow {
    margin-left: auto;
    font-size: 1.6rem;
    color: var(--c-ink-faint);
    font-weight: 700;
}
.story-part:hover .story-part-arrow {
    color: var(--c-primary);
    transform: translateX(4px);
}

.story-nav {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; margin-top: 40px;
    flex-wrap: wrap;
}
.story-nav .btn {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================================
   COLORING GAME
   ========================================================== */
.coloring-game {
    background: var(--c-bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--c-border-soft);
    padding: 22px;
    box-shadow: var(--shadow-sm);
    margin: 28px 0;
}
.coloring-toolbar {
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px; flex-wrap: wrap;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--c-border-soft);
}
.coloring-palette {
    display: flex; flex-wrap: wrap; gap: 8px;
}
.coloring-swatch {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.08);
    padding: 0;
    transition: transform .15s, border-color .15s;
}
.coloring-swatch:hover { transform: scale(1.1); }
.coloring-swatch.is-selected {
    border-color: var(--c-ink);
    transform: scale(1.15);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.1), 0 0 0 3px rgba(31,41,55,.12);
}
.coloring-actions { display: flex; gap: 8px; }

.coloring-canvas {
    background: linear-gradient(135deg, #fefce8, #fef3f2);
    border-radius: var(--radius-md);
    padding: 20px;
    display: flex; justify-content: center;
    overflow: hidden;
}
.coloring-canvas svg {
    width: 100%; max-width: 480px; height: auto;
    display: block;
}
.coloring-canvas .paint {
    cursor: pointer;
    transition: filter .15s;
}
.coloring-canvas .paint:hover {
    filter: brightness(1.05) drop-shadow(0 0 4px rgba(0,0,0,.1));
}
.coloring-hint {
    margin: 12px 0 6px;
    text-align: center;
    font-size: .88rem;
}

@media (max-width: 600px) {
    .coloring-toolbar { flex-direction: column; align-items: stretch; }
    .coloring-palette { justify-content: center; }
    .coloring-actions { justify-content: center; }
    .coloring-swatch { width: 32px; height: 32px; }
    .text-body p { font-size: 1rem; line-height: 1.75; }
    .text-body p:first-letter { font-size: 2em; padding: 6px 10px 0 0; }
    .story-part { padding: 16px; gap: 12px; }
    .story-part-num { width: 48px; height: 48px; font-size: 1.35rem; }
    .story-part h3 { font-size: 1rem; }
    .story-nav .btn { width: 100%; max-width: 100%; }
}

/* ==========================================================
   DEVELOPMENTAL GAMES
   ========================================================== */
.game-shell {
    background: var(--c-bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--c-border-soft);
    padding: 28px;
    box-shadow: var(--shadow-sm);
    margin-top: 28px;
}

.game-menu { text-align: center; padding: 24px 0; }
.game-menu h2 { font-size: clamp(1.6rem, 2vw + .5rem, 2.2rem); }
.game-menu .game-options {
    margin: 20px 0;
    display: flex; flex-direction: column; gap: 10px;
    align-items: center;
}
.game-options strong { color: var(--c-ink-soft); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }
.game-choice-row {
    display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}
.game-choice-row .btn.is-selected {
    background: var(--c-ink); color: white; border-color: var(--c-ink);
}

.game-hud {
    display: flex; justify-content: space-around; gap: 12px;
    background: var(--c-bg-soft);
    padding: 12px 18px;
    border-radius: var(--radius-md);
    margin-bottom: 22px;
    flex-wrap: wrap;
    font-size: .95rem;
}
.game-hud strong { color: var(--c-primary); font-family: var(--font-display); }

/* Memory match */
.memory-board {
    display: grid; gap: 10px;
    max-width: 540px; margin: 0 auto;
}
.memory-card {
    aspect-ratio: 1;
    perspective: 700px;
    cursor: pointer;
}
.memory-card-inner {
    position: relative; width: 100%; height: 100%;
    transition: transform .45s;
    transform-style: preserve-3d;
}
.memory-card.is-open  .memory-card-inner,
.memory-card.is-matched .memory-card-inner { transform: rotateY(180deg); }
.memory-card-front,
.memory-card-back {
    position: absolute; inset: 0;
    backface-visibility: hidden;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: clamp(1.6rem, 6vw, 2.6rem);
    font-weight: 700;
}
.memory-card-front {
    background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
    color: white;
}
.memory-card-back {
    background: var(--c-bg-soft);
    border: 2px solid var(--c-border);
    transform: rotateY(180deg);
}
.memory-card.is-matched .memory-card-back {
    background: #ecfdf5;
    border-color: #10b981;
    animation: matchPulse .5s ease;
}
@keyframes matchPulse {
    0% { transform: rotateY(180deg) scale(1); }
    50% { transform: rotateY(180deg) scale(1.15); }
    100% { transform: rotateY(180deg) scale(1); }
}

/* Math */
.math-question {
    text-align: center;
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.4rem);
    font-weight: 700;
    color: var(--c-ink);
    background: var(--c-bg-soft);
    padding: 36px 18px;
    border-radius: var(--radius-lg);
    margin-bottom: 22px;
}
.math-question strong { color: var(--c-primary); }
.math-choices {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    max-width: 480px; margin: 0 auto;
}
.math-choice {
    font-size: 1.4rem !important;
    padding: 18px !important;
    min-height: 56px;
}
.math-choice.is-correct { background: #d1fae5 !important; color: #065f46 !important; border-color: #22C55E !important; }
.math-choice.is-wrong   { background: #fee2e2 !important; color: #991b1b !important; border-color: #F97316 !important; }

/* Shapes */
.shapes-field {
    position: relative;
    width: 100%; aspect-ratio: 4/3;
    background: linear-gradient(135deg, #fef3f2, #eff6ff);
    border-radius: var(--radius-lg);
    border: 1px solid var(--c-border-soft);
    overflow: hidden;
}
.shape-target {
    position: absolute;
    width: 56px; height: 56px;
    background: none; border: 0; padding: 0; cursor: pointer;
    transition: transform .15s, opacity .25s;
}
.shape-target:hover { transform: translate(-50%,-50%) scale(1.1) !important; }
.shape-target.is-hit  { opacity: .15; transform: translate(-50%,-50%) scale(0.6) !important; }
.shape-target.is-miss { animation: shakeFade .5s ease forwards; }
@keyframes shakeFade {
    0%   { transform: translate(-50%,-50%) scale(1) rotate(0); }
    25%  { transform: translate(-65%,-50%) scale(1) rotate(-10deg); }
    75%  { transform: translate(-35%,-50%) scale(1) rotate(10deg); }
    100% { transform: translate(-50%,-50%) scale(.4); opacity: .2; }
}

/* Animals */
.animal-emoji {
    font-size: clamp(5rem, 18vw, 9rem);
    text-align: center;
    background: var(--c-bg-soft);
    padding: 28px;
    border-radius: var(--radius-lg);
    margin-bottom: 18px;
}
.animal-prompt { text-align: center; font-size: 1.1rem; margin-bottom: 18px; }
.animal-choices {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    max-width: 480px; margin: 0 auto;
}
.animal-choice { font-size: 1rem !important; padding: 14px !important; min-height: 50px; }
.animal-choice.is-correct { background: #d1fae5 !important; color: #065f46 !important; border-color: #22C55E !important; }
.animal-choice.is-wrong   { background: #fee2e2 !important; color: #991b1b !important; border-color: #F97316 !important; }

/* ==========================================================
   COLORING — extra controls (mode toggle, brush sizes, canvas overlay)
   ========================================================== */
.coloring-mode {
    display: inline-flex; gap: 4px;
    background: var(--c-bg-soft);
    padding: 4px;
    border-radius: 999px;
    border: 1px solid var(--c-border);
}
.coloring-mode .mode-btn {
    border: 0; background: transparent; cursor: pointer;
    padding: 8px 14px;
    border-radius: 999px;
    font-weight: 700;
    font-size: .82rem;
    color: var(--c-ink-soft);
    display: inline-flex; align-items: center; gap: 6px;
    line-height: 1; min-height: 36px;
    font-family: inherit;
}
.coloring-mode .mode-btn.is-selected {
    background: var(--c-ink); color: white;
    box-shadow: 0 4px 12px rgba(31, 41, 55, .15);
}
.coloring-brush-sizes {
    display: inline-flex; gap: 6px;
    align-items: center;
}
.coloring-brush-sizes[hidden] { display: none; }
.coloring-brush-sizes .size-btn {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1.5px solid var(--c-border);
    background: white;
    cursor: pointer;
    font-size: 1rem;
    color: var(--c-ink);
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0;
}
.coloring-brush-sizes .size-btn.is-selected {
    background: var(--c-ink); color: white;
    border-color: var(--c-ink);
}
.coloring-brush-sizes .size-btn[data-size="6"]  { font-size: .8rem; }
.coloring-brush-sizes .size-btn[data-size="22"] { font-size: 1.3rem; }

.coloring-canvas {
    position: relative;
    background: linear-gradient(135deg, #fefce8, #fef3f2);
    border-radius: var(--radius-md);
    padding: 20px;
    overflow: hidden;
    touch-action: none;
}
/* SVG wrap creates a stacking context (z-index: 0) so the layered
   children below show in the correct order regardless of outer z values. */
.coloring-svg-wrap {
    position: relative;
    display: grid;
    place-items: center;
    z-index: 0;
}
/* All SVGs and the canvas occupy the same grid cell — they overlap exactly. */
.coloring-svg-wrap > svg,
.coloring-svg-wrap > canvas {
    grid-area: 1 / 1;
    width: 100%;
    max-width: 460px;
    height: auto;
    display: block;
}
/* Z order inside the wrap:
     1 → original SVG (fills + outlines, user taps here)
     2 → brush canvas (paint goes ABOVE fills but BELOW outlines)
     3 → outline overlay (strokes only, ALWAYS on top, no pointer events) */
.coloring-svg-original    { z-index: 1; }
.coloring-overlay         { z-index: 2; pointer-events: none; touch-action: none; }
.coloring-overlay.is-active { pointer-events: auto; cursor: crosshair; }
.coloring-outline-overlay { z-index: 3; pointer-events: none; }
/* Canvas dimensions are set by JS via style.width/height so it covers the SVG exactly. */
.coloring-canvas .paint { cursor: pointer; transition: filter .15s; touch-action: manipulation; }
.coloring-canvas .paint:hover { filter: brightness(1.05); }

/* Game result panel */
.game-result, .game-result-summary {
    margin-top: 24px;
    text-align: center;
    background: linear-gradient(135deg, #fef3c7, #fce7f3);
    border-radius: var(--radius-lg);
    padding: 28px;
    border: 1px solid var(--c-border-soft);
}
.game-result-summary h2 { font-size: 4rem; margin: 0; }
.game-result h3 { font-size: 1.6rem; margin-bottom: 12px; }
.game-result-score { font-size: 1.2rem; }
.game-result-badges {
    margin-top: 18px;
    padding: 18px;
    background: white;
    border-radius: var(--radius-md);
}
.game-result-badges h4 { margin-bottom: 12px; }
.game-result-badge {
    padding: 10px;
    margin: 6px 0;
    background: #fef3c7;
    border-radius: 10px;
    font-weight: 600;
}
.game-result-badge code {
    background: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-family: monospace;
    color: var(--c-primary);
    font-weight: 700;
    letter-spacing: .04em;
}
.game-result-actions {
    margin-top: 18px;
    display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}

/* ==========================================================
   REWARDS PAGE
   ========================================================== */
.rewards-hero {
    background: linear-gradient(135deg, #fef3c7, #fce7f3);
    border-radius: var(--radius-lg);
    padding: 28px;
    margin-bottom: 28px;
    display: grid; grid-template-columns: auto 1fr; gap: 28px;
    align-items: center;
}
@media (max-width: 600px) { .rewards-hero { grid-template-columns: 1fr; text-align: center; } }
.rewards-pts {
    display: flex; flex-direction: column; align-items: center;
    background: white; border-radius: var(--radius-lg);
    padding: 22px 32px; box-shadow: var(--shadow-sm);
}
.rewards-pts-num {
    font-family: var(--font-display);
    font-size: 3rem; font-weight: 700;
    color: var(--c-primary); line-height: 1;
}
.rewards-pts-label {
    text-transform: uppercase; letter-spacing: .06em;
    font-size: .8rem; color: var(--c-ink-soft); font-weight: 700; margin-top: 4px;
}
.rewards-progress-label {
    display: flex; justify-content: space-between; gap: 12px;
    margin-bottom: 8px; font-size: .9rem;
}
.rewards-progress-bar {
    background: rgba(255, 255, 255, .6);
    border-radius: 999px;
    height: 14px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08);
}
.rewards-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--c-accent), var(--c-primary));
    border-radius: 999px;
    transition: width .4s ease;
}

.coupon-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}
.coupon-card {
    display: flex; gap: 14px;
    background: linear-gradient(135deg, var(--c-bg-soft), #fef3c7);
    border-radius: var(--radius-md);
    padding: 18px;
    border: 2px dashed var(--c-accent);
}
.coupon-icon {
    font-size: 2.4rem;
    flex-shrink: 0;
}
.coupon-body h3 { font-size: 1.05rem; margin-bottom: 4px; }
.coupon-code {
    display: inline-block;
    padding: 6px 14px;
    background: var(--c-ink);
    color: white;
    border-radius: 8px;
    font-family: monospace;
    font-weight: 700;
    letter-spacing: .1em;
    margin: 8px 0 4px;
}

.badge-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
}
.badge-card {
    background: var(--c-bg-card);
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius-md);
    padding: 20px 16px;
    text-align: center;
    display: flex; flex-direction: column; gap: 6px;
    transition: transform .2s;
}
.badge-card:hover { transform: translateY(-3px); }
.badge-icon {
    font-size: 3rem;
    margin-bottom: 4px;
}

/* ==========================================================
   ARGËTIM — comprehensive mobile polish
   ========================================================== */

/* Tighter activity cards on phones (already 2-col from earlier work) */
@media (max-width: 480px) {
    .activity-card {
        padding: 16px 10px;
        border-radius: 18px;
    }
    .activity-card .icon-circle {
        width: 48px; height: 48px;
        font-size: 1.5rem;
        margin-bottom: 10px;
    }
    .activity-card h3 {
        font-size: .9rem;
        line-height: 1.2;
        margin-bottom: 4px;
        min-height: 2.2em;
    }
    .activity-card .age { font-size: .68rem; }
    .activity-card .activity-cta {
        font-size: .82rem;
        margin-top: 10px;
    }
}

/* Activity detail page — tighter on phones */
@media (max-width: 600px) {
    .game-shell { padding: 14px; }
    .game-menu h2 { font-size: 1.3rem; }
    .game-menu .game-options { margin: 14px 0; }
    .game-options strong { font-size: .75rem; }
    .game-choice-row { gap: 6px; }
    .game-choice-row .btn { padding: 8px 12px !important; font-size: .8rem !important; min-height: 36px; }

    .game-hud {
        gap: 6px; padding: 10px 12px;
        font-size: .82rem;
    }

    /* Memory — fewer columns / smaller cards */
    .memory-board { gap: 6px; max-width: 100%; }
    .memory-card-front, .memory-card-back {
        font-size: clamp(1.2rem, 7vw, 2rem);
        border-radius: 10px;
    }

    /* Math */
    .math-question {
        font-size: clamp(1.7rem, 8vw, 2.4rem);
        padding: 22px 12px;
    }
    .math-choice {
        font-size: 1.15rem !important;
        padding: 12px !important;
        min-height: 50px;
    }

    /* Shapes — make shapes a bit bigger on phone, keep field shorter */
    .shapes-field { aspect-ratio: 1 / 1; }
    .shape-target { width: 44px; height: 44px; }

    /* Animals */
    .animal-emoji { font-size: clamp(4.5rem, 22vw, 7rem); padding: 18px; }
    .animal-prompt { font-size: 1rem; margin-bottom: 12px; }
    .animal-choice {
        font-size: .92rem !important;
        padding: 10px !important;
        min-height: 44px;
    }

    /* Coloring — toolbar stacks on small phones */
    .coloring-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding-bottom: 12px;
    }
    .coloring-palette {
        justify-content: center;
        gap: 6px;
    }
    .coloring-swatch {
        width: 30px; height: 30px;
    }
    .coloring-mode { align-self: center; }
    .coloring-brush-sizes { align-self: center; }
    .coloring-actions {
        justify-content: center;
        width: 100%;
    }
    .coloring-actions .btn {
        flex: 1;
    }
    .coloring-canvas { padding: 14px; }
    .coloring-overlay {
        inset: 14px;
        width: calc(100% - 28px);
        height: calc(100% - 28px);
    }
    .coloring-hint { font-size: .8rem; }

    /* Game result on phone */
    .game-result, .game-result-summary { padding: 20px 14px; }
    .game-result-summary h2 { font-size: 3rem; }
    .game-result h3 { font-size: 1.3rem; }
    .game-result-actions .btn { flex: 1; min-width: 120px; }
}

/* Tiny phones (<400px) — collapse memory grid to 3 cols even for harder modes */
@media (max-width: 400px) {
    .memory-board { grid-template-columns: repeat(3, 1fr) !important; }
    .math-choices { gap: 8px; }
}

/* ==========================================================
   EXTRA GAMES — puzzle, maze, simon, balloon, etc.
   ========================================================== */

/* Puzzle */
.puzzle-picker {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    gap: 6px; margin-top: 8px;
    max-height: 220px; overflow-y: auto;
    padding: 4px;
}
.puzzle-pick {
    width: 100%; aspect-ratio: 1;
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem;
    padding: 0;
}
.puzzle-pick.is-selected { border-color: var(--c-ink); transform: scale(1.05); }

.puzzle-area {
    display: grid; grid-template-columns: 1fr;
    gap: 16px; margin-top: 6px;
}
.puzzle-ref {
    display: flex; align-items: center; gap: 12px;
    background: var(--c-bg-soft);
    padding: 8px 14px;
    border-radius: 12px;
    margin: 0 auto;
    max-width: 360px;
    border: 1px solid var(--c-border-soft);
}
.puzzle-ref-thumb {
    width: 56px; height: 56px;
    border-radius: 8px;
    background-size: cover; background-position: center;
    border: 2px solid var(--c-ink);
    flex-shrink: 0;
}
.puzzle-ref-label { font-size: .85rem; color: var(--c-ink-soft); font-weight: 600; }

.puzzle-board {
    display: grid;
    gap: 2px;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 10px;
    aspect-ratio: 1;
    border: 3px solid var(--c-ink);
    border-radius: 16px;
    background-color: #fff;
    background-size: calc(100% - 20px) calc(100% - 20px);
    background-position: 10px 10px;
    background-repeat: no-repeat;
    box-shadow: 0 6px 20px rgba(31, 41, 55, .08);
}
.puzzle-slot {
    background: rgba(255, 255, 255, 0.35);
    border: 1.5px dashed rgba(31, 41, 55, 0.18);
    border-radius: 4px;
    transition: background .15s, border-color .15s;
    overflow: hidden;
    position: relative;
}
.puzzle-slot.is-over {
    background: rgba(255, 220, 100, 0.55);
    border-color: #f59e0b; border-style: solid;
}
.puzzle-slot.shake { animation: slotShake .32s ease; border-color: #ef4444; border-style: solid; }
@keyframes slotShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}
/* Once placed, the piece fills the slot edge-to-edge — no internal border interrupts the picture. */
.puzzle-slot > .puzzle-piece {
    width: 100%; height: 100%;
    cursor: default;
    border: 0; border-radius: 2px;
    box-shadow: none;
    transform: none !important;
    background-color: #fff;
}

.puzzle-tray {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
    gap: 10px;
    background: linear-gradient(180deg, var(--c-bg-soft), rgba(255, 255, 255, .6));
    border-radius: 14px;
    padding: 14px;
    min-height: 100px;
    max-width: 500px;
    margin: 0 auto;
    border: 1.5px solid var(--c-border);
    box-shadow: inset 0 2px 6px rgba(31, 41, 55, .06);
}
.puzzle-piece {
    aspect-ratio: 1;
    width: 100%;
    border: 1.5px solid rgba(31, 41, 55, 0.32);
    border-radius: 8px;
    cursor: grab;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: #fff;
    box-shadow: 0 4px 10px rgba(31, 41, 55, .14), inset 0 0 0 1px rgba(255, 255, 255, .35);
    transition: transform .15s ease, box-shadow .15s ease;
    padding: 0;
    touch-action: manipulation;
}
.puzzle-piece:hover {
    transform: translateY(-3px) rotate(-1deg);
    box-shadow: 0 8px 16px rgba(31, 41, 55, .22), inset 0 0 0 1px rgba(255, 255, 255, .35);
}
.puzzle-piece.is-selected {
    transform: scale(1.08);
    box-shadow: 0 0 0 3px var(--c-primary), 0 8px 16px rgba(31, 41, 55, .22);
    border-color: var(--c-primary);
}
.puzzle-piece.is-dragging { opacity: 0.45; transform: scale(0.95); }
.puzzle-piece.is-placed   {
    border-color: transparent;
    cursor: default;
    box-shadow: none;
}
.puzzle-piece:active { cursor: grabbing; }

/* Maze */
.maze-canvas { display: flex; justify-content: center; background: var(--c-bg-soft); padding: 16px; border-radius: 14px; }
.maze-svg { width: 100%; max-width: 380px; height: auto; }
.maze-controls {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 8px; max-width: 220px; margin: 18px auto 0;
}
.maze-controls .dpad {
    aspect-ratio: 1;
    border-radius: 12px;
    background: var(--c-ink);
    color: white;
    font-size: 1.6rem;
    border: 0; cursor: pointer; font-weight: 700;
    min-height: 56px;
}
.maze-controls .dpad:active { transform: scale(.94); }

/* Simon Says */
.simon-board {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    max-width: 320px; margin: 0 auto;
    aspect-ratio: 1;
}
.simon-pad {
    border: 0; border-radius: 18px; cursor: pointer;
    box-shadow: inset 0 -6px 0 rgba(0,0,0,.18);
    transition: filter .15s, transform .1s;
    min-height: 100px;
}
.simon-pad.is-active { filter: brightness(1.5); transform: scale(.97); }

/* Whack-a-mole */
.mole-field {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
    max-width: 380px; margin: 0 auto;
}
.mole-hole {
    aspect-ratio: 1; border-radius: 50%;
    background: linear-gradient(180deg, #92400e, #44230a);
    border: 0; cursor: pointer; position: relative; overflow: hidden;
    box-shadow: inset 0 8px 12px rgba(0,0,0,.4);
}
.mole-hole .mole {
    position: absolute; bottom: -50%; left: 0; right: 0;
    font-size: 3rem; line-height: 1;
    transition: bottom .2s ease-out;
}
.mole-hole.is-up .mole { bottom: 10%; }
.mole-hole.is-hit { background: linear-gradient(180deg, #f59e0b, #b45309); }

/* Balloon pop */
.balloon-field {
    position: relative; width: 100%;
    height: 420px;
    background: linear-gradient(180deg, #e0f2fe, #bae6fd);
    border-radius: 18px;
    overflow: hidden;
}
.balloon-target {
    position: absolute;
    width: 56px; height: 72px;
    border: 0; padding: 0;
    border-radius: 50%;
    cursor: pointer;
    font-size: 2.6rem; line-height: 1;
    color: transparent; /* hide emoji background, show ::before */
    transition: bottom 5s linear;
}
.balloon-target.is-popped { transform: scale(1.5); opacity: 0; transition: all .2s; }

/* Connect dots */
.dots-svg {
    width: 100%; max-width: 480px; height: auto;
    background: var(--c-bg-soft); border-radius: 14px;
    display: block; margin: 0 auto;
}
.dot-group { cursor: pointer; }
.dot-group circle { fill: var(--c-ink); transition: fill .15s; }
.dot-group.is-next circle { fill: var(--c-primary); transform-origin: center; animation: dotPulse 1s ease-in-out infinite; }
.dot-group.is-done circle { fill: var(--c-secondary); }
@keyframes dotPulse { 50% { r: 4; } }

/* Counting / Pattern */
.counting-prompt, .pattern-row {
    text-align: center;
    font-size: 1.3rem;
    margin: 8px 0 14px;
}
.pattern-row {
    font-size: clamp(1.6rem, 6vw, 2.4rem);
    letter-spacing: .15em;
    padding: 18px;
    background: var(--c-bg-soft);
    border-radius: 14px;
    margin-bottom: 18px;
}

/* Tic Tac Toe */
.ttt-board {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
    max-width: 280px; margin: 0 auto;
    background: var(--c-ink); padding: 6px; border-radius: 14px;
}
.ttt-cell {
    aspect-ratio: 1;
    background: white; border: 0; border-radius: 8px;
    font-size: 2.6rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.ttt-cell:hover { background: var(--c-bg-soft); }
.ttt-msg {
    text-align: center; font-size: 1.2rem; font-weight: 700;
    color: var(--c-primary);
    margin-bottom: 12px;
}

/* Color mix */
.colormix-q {
    display: flex; gap: 14px; align-items: center; justify-content: center;
    font-size: 2rem; margin: 12px 0 18px;
}
.cm-swatch {
    width: 70px; height: 70px; border-radius: 50%;
    box-shadow: inset 0 0 0 2px rgba(0,0,0,.1);
}
.cm-q { font-family: var(--font-display); font-size: 3rem; color: var(--c-primary); }
.cm-choices {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    max-width: 460px; margin: 0 auto;
}
.cm-choice {
    border: 2px solid var(--c-border);
    border-radius: 14px;
    padding: 18px;
    cursor: pointer;
    color: var(--c-ink);
    font-weight: 700;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.5);
    min-height: 64px;
}
.cm-choice.is-correct { box-shadow: 0 0 0 4px #22C55E; }
.cm-choice.is-wrong   { box-shadow: 0 0 0 4px #F97316; }

/* Time */
.clock-svg {
    width: 100%; max-width: 240px; height: auto;
    display: block; margin: 0 auto 18px;
}

/* Spot diff */
.sd-scenes {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.sd-scene {
    aspect-ratio: 1;
    position: relative;
    background: linear-gradient(180deg, #c8e6ff, #d9f4d8);
    border-radius: 14px; overflow: hidden;
    border: 2px solid var(--c-ink);
}
.sd-item {
    position: absolute; transform: translate(-50%, -50%);
    border: 0; background: transparent;
    font-size: clamp(1.4rem, 5vw, 2rem);
    cursor: pointer; padding: 6px;
    transition: filter .15s;
}
.sd-scene:first-child .sd-item { cursor: default; }
.sd-item.is-found { filter: drop-shadow(0 0 6px gold); animation: foundPulse .6s; }
@keyframes foundPulse { 50% { transform: translate(-50%, -50%) scale(1.5); } }

/* Audio story */
.audiostory-controls {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 16px;
    background: var(--c-bg-soft);
    border-radius: 12px;
    margin-bottom: 18px;
    align-items: center;
}
.audiostory-text {
    background: white; border-radius: 12px;
    padding: 24px;
    box-shadow: var(--shadow-sm);
}

/* Shape sorter */
.shapesorter-slots, .shapesorter-tray {
    display: flex; flex-wrap: wrap; gap: 10px;
    justify-content: center;
    padding: 14px;
    border-radius: 14px;
}
.shapesorter-slots { background: var(--c-bg-soft); margin-bottom: 12px; }
.shapesorter-tray  { background: rgba(255,255,255,.6); border: 2px dashed var(--c-border); }
.ss-slot {
    width: 70px; height: 70px;
    border-radius: 12px;
}
.ss-slot.is-over { background: rgba(255,220,100,.4); }
.ss-piece {
    width: 70px; height: 70px;
    border: 0; background: transparent;
    cursor: grab;
    padding: 0;
}
.ss-piece.is-selected { box-shadow: 0 0 0 3px var(--c-primary); border-radius: 12px; }
.ss-piece.is-placed   { cursor: default; }
.ss-slot svg, .ss-piece svg { width: 100%; height: 100%; }

/* Word match */
.wm-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
    max-width: 520px; margin: 0 auto;
}
.wm-col { display: flex; flex-direction: column; gap: 8px; }
.wm-pic, .wm-word {
    padding: 16px; border: 2px solid var(--c-border);
    border-radius: 12px; background: white; cursor: pointer;
    font-size: 1.1rem; font-weight: 600;
    min-height: 56px;
    transition: background .15s;
}
.wm-pic { font-size: 2.2rem; }
.wm-pic:hover, .wm-word:hover { background: var(--c-bg-soft); }
.wm-pic.is-picked, .wm-word.is-picked { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(249,115,22,.15); }
.wm-pic.is-matched, .wm-word.is-matched { background: #d1fae5; border-color: #22C55E; }
.wm-pic.is-wrong, .wm-word.is-wrong { background: #fee2e2; border-color: #F97316; }

/* Sudoku */
.sudoku-board {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 4px; max-width: 320px; margin: 0 auto;
    background: var(--c-ink); padding: 4px; border-radius: 12px;
}
.sud-cell {
    aspect-ratio: 1; background: white;
    border: 0; border-radius: 6px;
    font-size: 2rem;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
}
.sud-cell.is-fixed { background: var(--c-bg-soft); }

/* Letter / number trace */
.trace-area {
    display: flex; justify-content: center;
    padding: 16px; background: var(--c-bg-soft);
    border-radius: 14px; margin-bottom: 12px;
}
.trace-svg {
    width: 100%; max-width: 320px;
    aspect-ratio: 1;
    touch-action: none;
}

/* Mobile polish for new games */
@media (max-width: 600px) {
    .puzzle-area { gap: 12px; }
    .puzzle-board { max-width: 320px; padding: 4px; }
    .puzzle-piece { width: 50px; height: 50px; }
    .simon-board { max-width: 280px; gap: 8px; }
    .simon-pad { min-height: 80px; }
    .mole-field { gap: 10px; max-width: 320px; }
    .balloon-field { height: 340px; }
    .balloon-target { width: 44px; height: 60px; font-size: 2.2rem; }
    .ttt-board { max-width: 240px; gap: 4px; }
    .ttt-cell { font-size: 2rem; }
    .cm-swatch { width: 56px; height: 56px; }
    .cm-q { font-size: 2.4rem; }
    .cm-choice { padding: 14px; min-height: 56px; font-size: .9rem; }
    .clock-svg { max-width: 200px; }
    .wm-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .wm-pic, .wm-word { padding: 12px; font-size: 1rem; }
    .wm-pic { font-size: 1.8rem; }
    .sudoku-board { max-width: 280px; }
    .sud-cell { font-size: 1.6rem; }
    .ss-slot, .ss-piece { width: 56px; height: 56px; }
    .maze-controls .dpad { min-height: 50px; font-size: 1.4rem; }
}

@media (max-width: 1249px) {
    .account-chip-desktop { display: none; }
}

/* ----------------------------------------------------------
   LMS — Course pages (kid-friendly colorful design)
   ---------------------------------------------------------- */

/* Module color palette */
:root {
    --mod-1: #6366f1; --mod-1-soft: rgba(99,102,241,.10);
    --mod-2: #f59e0b; --mod-2-soft: rgba(245,158,11,.10);
    --mod-3: #10b981; --mod-3-soft: rgba(16,185,129,.10);
    --mod-4: #ec4899; --mod-4-soft: rgba(236,72,153,.10);
    --mod-5: #3b82f6; --mod-5-soft: rgba(59,130,246,.10);
    --mod-6: #8b5cf6; --mod-6-soft: rgba(139,92,246,.10);
}

/* Course level badges */
.course-level-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 99px; font-size: .85rem; font-weight: 700;
    animation: levelPulse 2s ease-in-out infinite;
}
.level-beginner { background: linear-gradient(135deg, #d1fae5, #a7f3d0); color: #065f46; }
.level-intermediate { background: linear-gradient(135deg, #dbeafe, #93c5fd); color: #1e40af; }
.level-advanced { background: linear-gradient(135deg, #fce7f3, #f9a8d4); color: #9d174d; }
@keyframes levelPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.03); } }

/* Age badge on course cards */
.course-age-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: var(--radius-md); font-size: .8rem; font-weight: 600;
    background: var(--c-accent); color: white;
}

/* Overview stats — colorful cards */
.course-overview-stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
    text-align: center; margin: 32px 0;
}
.co-stat {
    padding: 24px 12px; border-radius: var(--radius-lg);
    position: relative; overflow: hidden;
    transition: transform .2s;
}
.co-stat:hover { transform: translateY(-4px); }
.co-stat:nth-child(1) { background: linear-gradient(135deg, #ede9fe, #c4b5fd); }
.co-stat:nth-child(2) { background: linear-gradient(135deg, #fef3c7, #fcd34d); }
.co-stat:nth-child(3) { background: linear-gradient(135deg, #dbeafe, #93c5fd); }
.co-stat:nth-child(4) { background: linear-gradient(135deg, #d1fae5, #6ee7b7); }
.co-stat-num { display: block; font-size: 2rem; font-weight: 800; color: var(--c-ink); font-family: var(--f-display); }
.co-stat-label { font-size: .85rem; color: var(--c-ink-soft); font-weight: 600; }

/* Floating decorative shapes */
.co-stat::after {
    content: ''; position: absolute; width: 60px; height: 60px;
    border-radius: 50%; opacity: .15; right: -10px; top: -10px;
    background: currentColor;
}

/* Course outline — colorful module cards */
.course-outline { display: flex; flex-direction: column; gap: 20px; margin-bottom: 40px; }
.co-module {
    background: white; border-radius: var(--radius-lg); overflow: hidden;
    border: 2px solid transparent; transition: border-color .2s, box-shadow .2s;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.co-module:hover { box-shadow: 0 6px 20px rgba(0,0,0,.1); }
.co-module:nth-child(6n+1) { border-left: 4px solid var(--mod-1); }
.co-module:nth-child(6n+2) { border-left: 4px solid var(--mod-2); }
.co-module:nth-child(6n+3) { border-left: 4px solid var(--mod-3); }
.co-module:nth-child(6n+4) { border-left: 4px solid var(--mod-4); }
.co-module:nth-child(6n+5) { border-left: 4px solid var(--mod-5); }
.co-module:nth-child(6n+6) { border-left: 4px solid var(--mod-6); }

.co-module-head {
    padding: 18px 20px; display: flex; align-items: center; gap: 14px;
    font-size: 1rem; font-weight: 600;
}
.co-module-icon {
    width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center;
    justify-content: center; font-size: 1.5rem; flex-shrink: 0;
}
.co-module:nth-child(6n+1) .co-module-icon { background: var(--mod-1-soft); }
.co-module:nth-child(6n+2) .co-module-icon { background: var(--mod-2-soft); }
.co-module:nth-child(6n+3) .co-module-icon { background: var(--mod-3-soft); }
.co-module:nth-child(6n+4) .co-module-icon { background: var(--mod-4-soft); }
.co-module:nth-child(6n+5) .co-module-icon { background: var(--mod-5-soft); }
.co-module:nth-child(6n+6) .co-module-icon { background: var(--mod-6-soft); }
.co-module-num {
    width: 28px; height: 28px; border-radius: 50%; color: white;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .8rem; flex-shrink: 0;
}
.co-module:nth-child(6n+1) .co-module-num { background: var(--mod-1); }
.co-module:nth-child(6n+2) .co-module-num { background: var(--mod-2); }
.co-module:nth-child(6n+3) .co-module-num { background: var(--mod-3); }
.co-module:nth-child(6n+4) .co-module-num { background: var(--mod-4); }
.co-module:nth-child(6n+5) .co-module-num { background: var(--mod-5); }
.co-module:nth-child(6n+6) .co-module-num { background: var(--mod-6); }
.co-module-meta { margin-left: auto; font-size: .82rem; color: var(--c-ink-soft); font-weight: 400; }
.co-lesson-list { list-style: none; padding: 8px 20px 16px 20px; margin: 0; display: grid; gap: 6px; }
.co-lesson-list li {
    padding: 10px 14px; color: var(--c-ink); font-size: .9rem;
    background: var(--c-bg-soft); border-radius: var(--radius-md);
    display: flex; align-items: center; gap: 8px;
}
.co-lesson-list li .lesson-icon { font-size: 1.1rem; flex-shrink: 0; }
.co-lesson-list li .lesson-duration { margin-left: auto; font-size: .78rem; color: var(--c-ink-soft); }

/* Enroll CTA — colorful */
.course-enroll-cta {
    text-align: center; padding: 40px 24px; margin-top: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #fbbf24 100%);
    border-radius: var(--radius-lg); position: relative; overflow: hidden;
}
.course-enroll-cta::before {
    content: '🎉'; position: absolute; font-size: 4rem; opacity: .12;
    left: 10%; top: 50%; transform: translateY(-50%);
}
.course-enroll-cta::after {
    content: '🌟'; position: absolute; font-size: 3rem; opacity: .12;
    right: 10%; top: 30%;
}

/* Learning layout */
.course-layout { display: grid; grid-template-columns: 300px 1fr; min-height: calc(100vh - 80px); }

/* Sidebar */
.course-sidebar { background: var(--c-bg-soft); border-right: 1px solid var(--c-border); overflow-y: auto; padding-bottom: 20px; }
.cs-header { padding: 20px; border-bottom: 1px solid var(--c-border); }
.cs-course-title { font-weight: 700; font-size: 1rem; color: var(--c-ink); text-decoration: none; display: block; margin-bottom: 12px; }
.cs-progress { display: flex; align-items: center; gap: 10px; }
.cs-progress-bar { flex: 1; height: 10px; background: var(--c-border); border-radius: 99px; overflow: hidden; }
.cs-progress-fill {
    height: 100%; border-radius: 99px; transition: width .5s ease;
    background: linear-gradient(90deg, #10b981, #34d399, #6ee7b7);
    background-size: 200% 100%;
    animation: progressShine 2s ease infinite;
}
@keyframes progressShine { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.cs-progress-text { font-size: .85rem; font-weight: 700; color: #059669; min-width: 36px; }

.cs-nav { padding: 12px 0; }
.cs-module { margin-bottom: 4px; }
.cs-module-title { padding: 10px 20px; font-size: .85rem; font-weight: 700; color: var(--c-ink-soft); text-transform: uppercase; letter-spacing: .03em; }
.cs-module.is-done .cs-module-title { color: #059669; }
.cs-lesson { display: flex; align-items: center; gap: 8px; padding: 8px 20px 8px 28px; font-size: .9rem; color: var(--c-ink); text-decoration: none; transition: background .15s; }
.cs-lesson:hover { background: rgba(0,0,0,.04); }
.cs-lesson.is-active { background: white; font-weight: 600; border-left: 3px solid var(--c-primary); }
.cs-lesson.is-done { color: #059669; }
.cs-lesson-check { flex-shrink: 0; width: 20px; text-align: center; font-size: .8rem; }
.cs-quiz { font-style: italic; }
.cs-cert { padding: 16px 20px; }

/* Upsell banner */
.cs-upsell {
    margin: 0 16px 16px; padding: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: var(--radius-lg); color: #fff; text-align: center;
}
.cs-upsell-badge { font-size: 2rem; margin-bottom: 4px; }
.cs-upsell h4 { margin: 0 0 6px; font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; opacity: .85; }
.cs-upsell-title { font-weight: 700; font-size: 1.05rem; margin: 0 0 6px; }
.cs-upsell-price { font-size: .9rem; opacity: .9; margin: 0 0 12px; }
.cs-upsell .btn { background: #fff; color: #764ba2; font-weight: 700; border: none; }
.cs-upsell .btn:hover { background: #f0f0f0; }

/* Content area */
.course-content { padding: 40px; overflow-y: auto; max-width: 860px; }
.cc-header { margin-bottom: 24px; }
.cc-header h1 { font-size: 1.8rem; margin: 0 0 8px; }
.cc-video { position: relative; padding-bottom: 56.25%; margin-bottom: 24px; border-radius: var(--radius-lg); overflow: hidden; background: #000; }
.cc-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Lesson content — rich visual styles */
.cc-body { line-height: 1.8; font-size: 1.05rem; color: var(--c-ink); }
.cc-body h2 { font-size: 1.5rem; margin: 28px 0 14px; color: var(--c-primary); font-family: var(--f-display); }
.cc-body h3 { font-size: 1.25rem; margin: 24px 0 12px; color: var(--c-secondary); }
.cc-body p { margin: 0 0 16px; }
.cc-body strong { color: var(--c-ink); }

/* Vocabulary cards in lessons */
.vocab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; margin: 20px 0; }
.vocab-card {
    background: white; border: 2px solid var(--c-border); border-radius: var(--radius-lg);
    padding: 16px 12px; text-align: center; transition: transform .2s, box-shadow .2s;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.vocab-card:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 8px 20px rgba(0,0,0,.1); }
.vocab-card .vocab-emoji { font-size: 2.5rem; margin-bottom: 6px; line-height: 1.2; }
.vocab-card .vocab-en { font-weight: 700; font-size: .95rem; color: var(--c-primary); line-height: 1.3; }
.vocab-card .vocab-phonetic { font-size: .78rem; color: #8b5cf6; font-style: italic; font-family: var(--f-accent); line-height: 1.2; }
.vocab-card .vocab-al { font-size: .85rem; color: var(--c-ink-soft); font-weight: 500; line-height: 1.3; }

/* Math number counting cards */
.num-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; margin: 20px 0; }
.num-card {
    background: white; border: 2px solid var(--c-border); border-radius: var(--radius-lg);
    padding: 14px 10px; text-align: center; display: flex; flex-direction: column;
    align-items: center; gap: 6px; transition: transform .2s, box-shadow .2s;
}
.num-card:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 8px 20px rgba(0,0,0,.1); }
.num-big {
    min-width: 48px; height: 48px; border-radius: 50%; background: var(--c-primary); color: white;
    font-size: 1.5rem; font-weight: 900; font-family: var(--f-accent); display: flex;
    align-items: center; justify-content: center; padding: 0 10px; flex-shrink: 0;
}
.num-card:nth-child(even) .num-big { background: var(--c-secondary); }
.num-card:nth-child(3n) .num-big { background: var(--c-accent, #f59e0b); }
.num-visual { font-size: 1.2rem; line-height: 1.5; letter-spacing: 1px; min-height: 24px; }
.num-word { font-weight: 700; font-size: .9rem; color: var(--c-ink-soft); }

/* Math equation visual cards */
.math-equations { display: flex; flex-direction: column; gap: 16px; margin: 20px 0; }
.math-eq {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    background: white; border: 2px solid var(--c-border); border-radius: var(--radius-lg);
    padding: 16px 12px; flex-wrap: wrap; transition: transform .2s, box-shadow .2s;
}
.math-eq:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.math-group { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.math-group .math-obj { font-size: 1.4rem; line-height: 1.4; letter-spacing: 2px; text-align: center; }
.math-op {
    font-size: 1.8rem; font-weight: 900; color: var(--c-primary); font-family: var(--f-accent);
}
.math-result {
    font-size: 1.8rem; font-weight: 900; color: #fff; font-family: var(--f-accent);
    background: linear-gradient(135deg, var(--c-primary), var(--c-secondary));
    min-width: 46px; height: 46px; border-radius: 50%; display: flex;
    align-items: center; justify-content: center; padding: 0 8px;
}
.math-label { font-weight: 700; font-size: .8rem; color: var(--c-ink-soft); margin-top: 2px; }

/* Math multiplication table */
.times-table { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; margin: 16px 0; }
.times-cell {
    background: white; border: 2px solid var(--c-border); border-radius: var(--radius-md);
    padding: 10px 6px; text-align: center; font-weight: 700; font-size: .95rem;
    font-family: var(--f-accent); color: var(--c-primary); transition: transform .2s;
}
.times-cell:hover { transform: scale(1.05); background: var(--c-bg-soft); }

/* Division groups visual */
.div-visual { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 8px 0; }
.div-group {
    background: var(--c-bg-soft); border: 2px dashed var(--c-primary); border-radius: var(--radius-lg);
    padding: 8px 10px; text-align: center; font-size: 1.3rem; letter-spacing: 2px;
}

/* Dialogue boxes in lessons */
.dialogue-box { background: var(--c-bg-soft); border-radius: var(--radius-lg); padding: 20px; margin: 20px 0; }
.dialogue-line { display: flex; gap: 12px; margin-bottom: 12px; align-items: flex-start; }
.dialogue-line:last-child { margin-bottom: 0; }
.dialogue-avatar {
    width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center;
    justify-content: center; font-size: 1.1rem; flex-shrink: 0;
}
.dialogue-avatar.avatar-a { background: linear-gradient(135deg, #c4b5fd, #8b5cf6); }
.dialogue-avatar.avatar-b { background: linear-gradient(135deg, #fcd34d, #f59e0b); }
.dialogue-bubble {
    background: white; padding: 10px 16px; border-radius: 16px 16px 16px 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06); flex: 1;
}
.dialogue-bubble .en { font-weight: 600; color: var(--c-ink); }
.dialogue-bubble .al { font-size: .85rem; color: var(--c-ink-soft); font-style: italic; }
.dialogue-bubble .phonetic { font-size: .78rem; color: #8b5cf6; font-style: italic; font-family: var(--f-accent); display: block; margin-top: 2px; }

/* Info/tip boxes in lessons */
.lesson-tip {
    background: linear-gradient(135deg, #eff6ff, #dbeafe); border-left: 4px solid #3b82f6;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: 14px 18px; margin: 20px 0; font-size: .95rem;
}
.lesson-tip::before { content: '💡 '; font-size: 1.1rem; }
.lesson-fun {
    background: linear-gradient(135deg, #fef3c7, #fde68a); border-left: 4px solid #f59e0b;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: 14px 18px; margin: 20px 0; font-size: .95rem;
}
.lesson-fun::before { content: '🎮 '; font-size: 1.1rem; }

/* Animated floating emojis for fun */
@keyframes float { 0%,100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-12px) rotate(5deg); } }
.cc-body .float-emoji { display: inline-block; animation: float 3s ease-in-out infinite; font-size: 2rem; }

.cc-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--c-border); }
.badge-completed { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: #d1fae5; color: #065f46; border-radius: var(--radius-md); font-weight: 600; font-size: .9rem; }

/* Quiz form — colorful */
.quiz-form { max-width: 700px; }
.quiz-question {
    background: white; border: 2px solid var(--c-border); border-radius: var(--radius-lg);
    padding: 24px; margin-bottom: 20px; position: relative; overflow: hidden;
}
.quiz-question::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
}
.quiz-question:nth-child(3n+1)::before { background: linear-gradient(90deg, var(--mod-1), var(--mod-5)); }
.quiz-question:nth-child(3n+2)::before { background: linear-gradient(90deg, var(--mod-2), var(--mod-3)); }
.quiz-question:nth-child(3n+3)::before { background: linear-gradient(90deg, var(--mod-4), var(--mod-6)); }
.qq-text { font-size: 1.1rem; margin: 0 0 16px; font-weight: 600; }
.qq-options { display: flex; flex-direction: column; gap: 10px; }
.qq-option {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px;
    border: 2px solid var(--c-border); border-radius: var(--radius-lg);
    cursor: pointer; transition: all .2s;
}
.qq-option:hover { border-color: var(--c-primary); background: rgba(99,102,241,.04); transform: translateX(4px); }
.qq-option input[type="radio"] { accent-color: var(--c-primary); width: 18px; height: 18px; }
.qq-option span { font-size: .95rem; }
.qq-option.qq-correct { border-color: #10b981; background: rgba(16,185,129,.1); }
.qq-option.qq-correct::after { content: ' ✅'; }
.qq-option.qq-wrong { border-color: #F97316; background: rgba(249,115,22,.1); }
.qq-option.qq-wrong::after { content: ' ❌'; }

.quiz-result { padding: 28px; border-radius: var(--radius-lg); margin-bottom: 20px; text-align: center; }
.quiz-result h3 { margin: 0 0 8px; font-size: 1.4rem; font-family: var(--f-display); }
.quiz-result-pass {
    background: linear-gradient(135deg, rgba(16,185,129,.12), rgba(52,211,153,.12));
    border: 2px solid #10b981; color: #059669;
}
.quiz-result-fail {
    background: linear-gradient(135deg, rgba(249,115,22,.12), rgba(252,165,165,.12));
    border: 2px solid #F97316; color: #dc2626;
}

/* My courses in account */
.my-courses-grid { display: grid; gap: 20px; }
.my-course-card {
    background: white; border: 2px solid var(--c-border); border-radius: var(--radius-lg);
    padding: 24px; transition: box-shadow .2s;
}
.my-course-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.mc-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.mc-title { margin: 0; font-size: 1.1rem; }
.mc-badge { font-size: .78rem; padding: 4px 12px; border-radius: 99px; white-space: nowrap; font-weight: 600; }
.mc-badge-done { background: linear-gradient(135deg, #d1fae5, #a7f3d0); color: #065f46; }
.mc-badge-active { background: linear-gradient(135deg, #e0e7ff, #c7d2fe); color: #4338ca; }
.mc-stats { display: flex; gap: 8px; font-size: .85rem; color: var(--c-text-light); margin-bottom: 12px; }
.mc-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.mc-progress-bar { flex: 1; height: 12px; background: var(--c-border); border-radius: 99px; overflow: hidden; }
.mc-progress-fill { height: 100%; background: linear-gradient(90deg, #10b981, #34d399); border-radius: 99px; transition: width .3s; }
.mc-progress-text { font-size: .85rem; font-weight: 700; color: #059669; }
.mc-actions { display: flex; gap: 8px; margin-bottom: 10px; }
.mc-enrolled-date { font-size: .8rem; }

@media (max-width: 760px) {
    .course-layout { grid-template-columns: 1fr; }
    .course-sidebar { max-height: 50vh; border-right: 0; border-bottom: 1px solid var(--c-border); }
    .course-content { padding: 16px; }
    .course-overview-stats { grid-template-columns: repeat(2, 1fr); }
    .my-course-card { flex-direction: column; align-items: stretch; }
    .vocab-grid { grid-template-columns: repeat(2, 1fr); }
    .num-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .num-visual { font-size: 1rem; }
    .math-eq { padding: 14px 10px; gap: 8px; }
    .math-group .math-obj { font-size: 1.2rem; letter-spacing: 1px; }
    .math-op { font-size: 1.5rem; }
    .math-result { font-size: 1.5rem; min-width: 40px; height: 40px; }
    .div-group { padding: 6px 8px; font-size: 1.1rem; letter-spacing: 1px; }
    .div-visual { gap: 6px; }
    .times-table { grid-template-columns: repeat(3, 1fr); }
}

/* ================================================================
   Puzzle Feature
   ================================================================ */
.puzzle-page { padding-top: 20px; }
.puzzle-page .container { max-width: 900px; }

/* Upload setup view — centered column */
#pz-upload { max-width: 620px; margin: 0 auto; }

/* Hero */
.pz-hero { text-align: center; margin-bottom: 28px; }
.pz-hero h1 { font-family: var(--f-accent); font-size: 2.2rem; color: var(--c-ink); margin-bottom: 8px; }
.pz-hero p { color: var(--c-ink-soft); font-size: 1.05rem; max-width: 480px; margin: 0 auto; }

/* Upload zone */
.pz-upload-zone {
    border: 3px dashed var(--c-border); border-radius: var(--radius-xl, 16px);
    background: var(--c-bg-soft); cursor: pointer; transition: border-color .2s, background .2s;
    position: relative; overflow: hidden; min-height: 220px;
    display: flex; align-items: center; justify-content: center;
}
.pz-upload-zone:hover, .pz-upload-zone.is-dragover {
    border-color: var(--c-primary); background: color-mix(in srgb, var(--c-primary) 6%, white);
}
.pz-upload-inner { text-align: center; padding: 40px 20px; width: 100%; }
.pz-upload-icon { font-size: 3rem; display: block; margin-bottom: 8px; }
.pz-upload-text { font-weight: 600; font-size: 1.05rem; color: var(--c-ink); margin-bottom: 4px; }
.pz-upload-hint { font-size: .85rem; color: var(--c-ink-soft); }
.pz-upload-preview {
    max-width: 100%; max-height: 300px; object-fit: contain;
    border-radius: var(--radius-lg); margin: 16px auto; display: block;
}

/* Size selector */
.pz-sizes { display: flex; gap: 12px; justify-content: center; margin: 24px 0; flex-wrap: wrap; }
.pz-size-opt { cursor: pointer; }
.pz-size-opt input { display: none; }
.pz-size-card {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 16px 24px; border: 2px solid var(--c-border); border-radius: var(--radius-lg);
    background: white; transition: border-color .2s, box-shadow .2s, transform .15s;
    min-width: 110px;
}
.pz-size-opt:hover .pz-size-card { border-color: var(--c-primary); transform: translateY(-2px); }
.pz-size-opt.is-selected .pz-size-card {
    border-color: var(--c-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 20%, transparent);
}
.pz-size-pieces { font-family: var(--f-accent); font-size: 1.8rem; font-weight: 700; color: var(--c-primary); line-height: 1; }
.pz-size-label { font-weight: 600; font-size: .9rem; color: var(--c-ink); }
.pz-size-price { font-size: .85rem; color: var(--c-ink-soft); font-weight: 500; }

/* Generate button */
.pz-btn-start {
    display: block; margin: 0 auto 16px; min-width: 240px; font-size: 1.1rem;
    transition: opacity .2s, transform .15s;
}
.pz-btn-start:disabled { opacity: .5; cursor: not-allowed; }

/* Content policy */
.pz-content-policy {
    background: #fef3c7; border: 1px solid #fbbf24; border-radius: 8px;
    padding: 10px 16px; margin: 12px auto; max-width: 500px; text-align: center;
}
.pz-content-policy p { margin: 0; font-size: .82rem; color: #92400e; line-height: 1.4; }

/* Feedback */
.pz-feedback { text-align: center; font-size: .9rem; min-height: 20px; }
.pz-feedback.pz-error { color: #dc2626; font-weight: 600; }

/* Loading */
.pz-loader { text-align: center; padding: 80px 20px; }
.pz-loader-spinner {
    width: 56px; height: 56px; border: 4px solid var(--c-border);
    border-top-color: var(--c-primary); border-radius: 50%;
    animation: pz-spin 0.8s linear infinite; margin: 0 auto 16px;
}
@keyframes pz-spin { to { transform: rotate(360deg); } }
.pz-loader-text { font-weight: 600; color: var(--c-ink-soft); font-size: 1.05rem; }

/* Play view */
.pz-play-header {
    display: flex; align-items: center; gap: 16px; justify-content: center;
    padding: 12px 0; margin-bottom: 12px; flex-wrap: wrap;
}
.pz-timer { font-family: var(--f-accent); font-size: 1.2rem; font-weight: 700; color: var(--c-primary); }
.pz-progress { font-weight: 600; color: var(--c-ink-soft); }

/* Puzzle container */
.pz-container { touch-action: none; user-select: none; -webkit-user-select: none; }

/* Board */
.pz-board {
    position: relative; margin: 0 auto; border-radius: 8px;
    background-size: cover; background-position: center;
    box-shadow: inset 0 0 0 2px rgba(0,0,0,.08);
    overflow: visible;
}
.pz-board::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: rgba(255,255,255,.75); z-index: 1; pointer-events: none;
    transition: background .3s;
}
.pz-board.pz-hint::before { background: rgba(255,255,255,.4); }
.pz-board.pz-complete { opacity: 0; transition: opacity .3s; }

/* Individual piece */
.pz-piece {
    cursor: grab; filter: drop-shadow(1px 1px 2px rgba(0,0,0,.25));
    transition: transform .15s ease, filter .15s;
    flex-shrink: 0;
}
.pz-piece:hover:not(.is-placed):not(.is-dragging) {
    filter: drop-shadow(2px 2px 6px rgba(0,0,0,.35));
    transform: scale(1.05);
}
.pz-piece.is-dragging {
    cursor: grabbing; z-index: 1000 !important;
    filter: drop-shadow(3px 3px 10px rgba(0,0,0,.4));
    transform: scale(1.08);
}
.pz-piece.is-placed {
    cursor: default; filter: drop-shadow(0 0 1px rgba(0,0,0,.15));
    pointer-events: none; z-index: 3 !important;
}

/* Piece tray */
.pz-tray {
    display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
    padding: 16px 8px; margin-top: 16px;
    background: var(--c-bg-soft); border-radius: var(--radius-lg);
    border: 2px dashed var(--c-border); min-height: 80px;
    max-height: 340px; overflow-y: auto;
}

/* Completion view */
.pz-complete-inner { text-align: center; padding: 40px 20px; }
.pz-complete-anim { font-size: 4rem; animation: pz-bounce .6s ease; }
@keyframes pz-bounce {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); opacity: 1; }
}
.pz-complete-inner h2 { font-family: var(--f-accent); color: var(--c-primary); margin: 12px 0 8px; }
.pz-complete-time { font-size: 1.1rem; color: var(--c-ink-soft); font-weight: 600; margin-bottom: 20px; }
.pz-done-img { max-width: 320px; width: 100%; border-radius: var(--radius-lg); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.pz-complete-preview { margin: 20px 0; }

/* Checkout */
.pz-checkout-inner { max-width: 820px; margin: 0 auto; }
.pz-checkout-inner h2 { font-family: var(--f-accent); margin-bottom: 20px; }
.pz-checkout-grid { display: grid; grid-template-columns: 1fr 280px; gap: 24px; align-items: start; }
.pz-order-form label { display: block; margin-bottom: 12px; font-weight: 500; font-size: .9rem; color: var(--c-ink-soft); }
.pz-order-form input, .pz-order-form select {
    display: block; width: 100%; padding: 10px 12px; margin-top: 4px;
    border: 1.5px solid var(--c-border); border-radius: var(--radius-md);
    font-size: .95rem; transition: border-color .2s;
}
.pz-order-form input:focus, .pz-order-form select:focus { border-color: var(--c-primary); outline: none; }
.pz-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Shipping & payment selectors */
.pz-shipping-opts, .pz-payment-opts { margin: 16px 0; }
.pz-shipping-label { font-weight: 600; font-size: .9rem; color: var(--c-ink); display: block; margin-bottom: 8px; }
.pz-ship-opt {
    display: block; padding: 10px 14px; border: 1.5px solid var(--c-border);
    border-radius: var(--radius-md); margin-bottom: 6px; cursor: pointer; transition: border-color .2s;
}
.pz-ship-opt:hover { border-color: var(--c-primary); }
.pz-ship-opt.is-selected { border-color: var(--c-primary); background: color-mix(in srgb, var(--c-primary) 5%, white); }
.pz-ship-opt input { display: none; }
.pz-ship-opt span { font-size: .92rem; }

/* Order summary */
.pz-order-summary {
    background: var(--c-bg-soft); border-radius: var(--radius-lg);
    padding: 16px; margin: 20px 0;
}
.pz-sum-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: .92rem; }
.pz-sum-total { border-top: 2px solid var(--c-border); margin-top: 6px; padding-top: 10px; font-weight: 700; font-size: 1.05rem; color: var(--c-primary); }

.pz-checkout-preview { text-align: center; position: sticky; top: 20px; }
.pz-checkout-pieces { font-weight: 600; color: var(--c-ink-soft); margin-top: 8px; }

/* Order confirmation */
.pz-order-done { text-align: center; padding: 60px 20px; }
.pz-order-done-icon { font-size: 3.5rem; margin-bottom: 12px; }
.pz-order-done h2 { font-family: var(--f-accent); color: var(--c-primary); margin-bottom: 10px; }

/* Mobile */
@media (max-width: 760px) {
    .pz-hero h1 { font-size: 1.6rem; }
    .pz-sizes { gap: 8px; }
    .pz-size-card { padding: 12px 16px; min-width: 90px; }
    .pz-size-pieces { font-size: 1.4rem; }
    .pz-checkout-grid { grid-template-columns: 1fr; }
    .pz-checkout-preview { position: static; }
    .pz-form-row { grid-template-columns: 1fr; gap: 0; }
    .pz-tray { max-height: 220px; }
    .pz-done-img { max-width: 240px; }
}

/* ================================================================
   LOYALTY POINTS SYSTEM
   ================================================================ */

/* Header badge */
.loyalty-badge {
    display: inline-flex; align-items: center; gap: 3px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #78350f; font-size: .7rem; font-weight: 700;
    padding: 2px 8px; border-radius: 99px; margin-left: 4px;
    line-height: 1.3;
}

/* Points summary section */
.loyalty-summary {
    display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
    margin-bottom: 28px;
}
.loyalty-type-cards {
    display: flex; flex-direction: column; gap: 10px;
}
.loyalty-type-card {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 18px; border-radius: var(--radius-lg);
    border: 2px solid transparent;
}
.loyalty-type-icon { font-size: 1.6rem; flex-shrink: 0; }
.loyalty-type-value {
    font-family: var(--f-accent); font-size: 1.5rem; font-weight: 700;
    color: var(--c-ink); line-height: 1; min-width: 40px;
}
.loyalty-type-label { font-weight: 600; font-size: .9rem; color: var(--c-ink); }
.loyalty-type-hint { font-size: .75rem; color: var(--c-ink-soft); display: block; margin-top: 2px; }

.loyalty-type-gold   { background: linear-gradient(135deg, #fef9e7, #fef3c7); border-color: #f59e0b; }
.loyalty-type-silver { background: linear-gradient(135deg, #f8fafc, #e2e8f0); border-color: #94a3b8; }
.loyalty-type-normal { background: linear-gradient(135deg, #eff6ff, #dbeafe); border-color: #3b82f6; }

/* Reward total card */
.loyalty-reward-total {
    background: var(--c-bg-soft); border-radius: var(--radius-xl);
    padding: 24px; text-align: center;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.loyalty-reward-num {
    font-family: var(--f-accent); font-size: 2.5rem; font-weight: 700;
    color: var(--c-primary); line-height: 1.1; margin-bottom: 4px;
}
.loyalty-reward-label { font-weight: 600; color: var(--c-ink-soft); font-size: .95rem; margin-bottom: 16px; }
.loyalty-all-unlocked { color: var(--c-accent); font-weight: 600; margin: 0; }

/* Progress bar */
.loyalty-progress-wrap { width: 100%; max-width: 280px; }
.loyalty-progress-label {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: .8rem; color: var(--c-ink-soft); margin-bottom: 6px;
}
.loyalty-progress-bar {
    height: 10px; background: var(--c-border); border-radius: 99px; overflow: hidden;
}
.loyalty-progress-fill {
    height: 100%; border-radius: 99px; transition: width .5s;
    background: linear-gradient(90deg, #f59e0b, #ef4444);
}

/* Info box */
.loyalty-info-box {
    background: var(--c-bg-soft); border-radius: var(--radius-lg);
    padding: 12px 18px; margin-bottom: 24px; cursor: pointer;
}
.loyalty-info-box summary {
    font-weight: 600; font-size: .95rem; color: var(--c-primary);
    list-style: none;
}
.loyalty-info-box summary::-webkit-details-marker { display: none; }
.loyalty-info-content { padding-top: 12px; }
.loyalty-info-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.loyalty-info-grid h4 { font-size: .9rem; margin-bottom: 4px; }
.loyalty-info-grid p { font-size: .8rem; color: var(--c-ink-soft); margin: 0; line-height: 1.4; }

/* Tier cards */
.loyalty-tiers-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.loyalty-tier-card {
    text-align: center; padding: 20px 14px; border-radius: var(--radius-lg);
    background: white; border: 2px solid var(--c-border);
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    transition: transform .15s, box-shadow .2s;
}
.loyalty-tier-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.loyalty-tier-icon { font-size: 2rem; }
.loyalty-tier-card h3 { font-size: .95rem; margin: 0; color: var(--c-ink); }
.loyalty-tier-desc { font-size: .78rem; color: var(--c-ink-soft); margin: 0; line-height: 1.3; flex-grow: 1; }
.loyalty-tier-req { font-weight: 700; font-size: .85rem; color: var(--c-primary); }
.loyalty-tier-details { display: flex; flex-direction: column; gap: 2px; font-size: .72rem; color: var(--c-ink-soft); }
.loyalty-tier-badge {
    display: inline-block; padding: 4px 12px; border-radius: 99px;
    font-size: .8rem; font-weight: 600; background: #d1fae5; color: #065f46;
}
.loyalty-tier-badge-locked { background: #f1f5f9; color: #64748b; }

.loyalty-tier-locked { opacity: .5; filter: grayscale(.3); }
.loyalty-tier-unlocked { border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(239,68,68,.12); }
.loyalty-tier-claimed { border-color: #10b981; }

/* Coupon cards */
.loyalty-coupons-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.loyalty-coupon-card {
    display: flex; gap: 12px; padding: 14px; border-radius: var(--radius-lg);
    background: var(--c-bg-soft); border: 1px solid var(--c-border);
}
.loyalty-coupon-icon { font-size: 1.8rem; flex-shrink: 0; }
.loyalty-coupon-body h3 { font-size: .95rem; margin: 0 0 6px; }
.loyalty-coupon-code {
    display: inline-block; padding: 4px 12px; border-radius: 6px;
    background: white; border: 2px dashed var(--c-primary); font-family: var(--f-mono, monospace);
    font-weight: 700; font-size: .95rem; color: var(--c-primary);
    cursor: pointer; transition: background .2s;
}
.loyalty-coupon-code:hover { background: #fef3c7; }
.loyalty-coupon-meta { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.loyalty-coupon-meta small { color: var(--c-ink-soft); font-size: .75rem; }

/* History table */
.loyalty-history-table-wrap { overflow-x: auto; }
.loyalty-history-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.loyalty-history-table th {
    text-align: left; padding: 8px 12px; background: var(--c-bg-soft);
    font-weight: 600; color: var(--c-ink-soft); font-size: .8rem;
    border-bottom: 2px solid var(--c-border);
}
.loyalty-history-table td {
    padding: 8px 12px; border-bottom: 1px solid var(--c-border);
}
.text-success { color: #16a34a; font-weight: 600; }
.text-danger  { color: #dc2626; font-weight: 600; }

/* Responsive */
@media (max-width: 768px) {
    .loyalty-summary { grid-template-columns: 1fr; }
    .loyalty-type-card { padding: 10px 14px; }
    .loyalty-type-value { font-size: 1.2rem; }
    .loyalty-info-grid { grid-template-columns: 1fr; }
    .loyalty-tiers-grid { grid-template-columns: repeat(2, 1fr); }
    .loyalty-reward-num { font-size: 2rem; }
}
@media (max-width: 480px) {
    .loyalty-tiers-grid { grid-template-columns: 1fr; }
    .loyalty-coupons-grid { grid-template-columns: 1fr; }
}

/* ─── Parenting Page ─── */
.parenting-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 28px;
}
/* Members-only gate shown to guests under the parenting banner */
.parenting-locked {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
    background: var(--c-bg-card);
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius-lg);
    padding: 48px 32px;
    box-shadow: var(--shadow-sm);
}
.parenting-locked-icon { font-size: 3rem; display: block; margin-bottom: 14px; }
.parenting-locked h2 { font-size: 1.5rem; margin: 0 0 10px; color: var(--c-ink); }
.parenting-locked p { color: var(--c-ink-soft); line-height: 1.7; margin: 0 auto 24px; max-width: 430px; }
.parenting-locked-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Ftesa aty ku pritet artikulli për vizitorin. Zbehja sipër e bën të qartë se
   teksti vazhdon — një prerje e thatë duket si faqe e prishur, jo si ftesë. */
.article-gate {
    position: relative;
    margin: 8px 0 0;
    padding: 56px 24px 32px;
    text-align: center;
    background: var(--c-bg-card);
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.article-gate::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: -72px;
    height: 72px;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, var(--c-bg-card));
}
.article-gate-eyebrow {
    margin: 0 0 6px;
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-ink-soft);
}
.article-gate > p { color: var(--c-ink-soft); line-height: 1.7; margin: 0 auto 20px; max-width: 440px; }
.article-gate-title {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 10px !important;
    color: var(--c-ink) !important;
    max-width: none !important;
}
.article-gate-toc {
    list-style: none;
    margin: 0 auto 22px;
    padding: 0;
    max-width: 420px;
    text-align: left;
}
.article-gate-toc li {
    position: relative;
    padding: 6px 0 6px 26px;
    color: var(--c-ink);
    font-size: .94rem;
    line-height: 1.5;
    border-bottom: 1px dashed var(--c-border-soft);
}
.article-gate-toc li:last-child { border-bottom: 0; }
.article-gate-toc li::before {
    content: '🔒';
    position: absolute;
    left: 0;
    font-size: .8rem;
    opacity: .55;
}
.article-gate-foot { font-size: .88rem; margin-top: 18px !important; }

/* Referencat. `anywhere` është rrjetë sigurie: çdo adresë e gjatë e shkruar
   dorazi thyhet në vend që ta shtyjë faqen anash në telefon. */
.art-refs { padding-left: 1.25em; }
.art-refs li { margin-bottom: 10px; line-height: 1.6; }
.article-body .art-refs a { overflow-wrap: anywhere; }
.art-ref-host {
    display: inline-block;
    font-size: .82rem;
    color: var(--c-ink-soft);
    white-space: nowrap;
}

/* Ftesa rri brenda .article-body, ku `.article-body a` (0,2,0) mund `.btn-*`
   (0,1,0) — pa këto rregulla butonat dalin si lidhje teksti pa sfond. */
.article-body .article-gate .btn { text-decoration: none; }
.article-body .article-gate .btn-primary {
    background: var(--c-secondary);
    color: #fff;
    box-shadow: 0 4px 14px rgba(20,184,166,.28);
}
.article-body .article-gate .btn-primary:hover { background: #0D9488; color: #fff; }
.article-body .article-gate .btn-ghost { color: var(--c-ink); }

@media (max-width: 560px) {
    .article-gate { padding: 48px 16px 26px; }
    .article-gate-title { font-size: 1.15rem; }
}
.parenting-card {
    background: #fff;
    border-radius: var(--radius, 14px);
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    overflow: hidden;
    transition: box-shadow .2s, transform .2s;
}
.parenting-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.1); transform: translateY(-2px); }
.parenting-card-head {
    display: block;
    padding: 28px 24px 18px;
    text-decoration: none;
    color: inherit;
    background: linear-gradient(135deg, var(--c-primary-soft, #fff5f5), #fff);
}
.parenting-card-icon { font-size: 2.4rem; display: block; margin-bottom: 8px; }
.parenting-card-head h2 { font-family: var(--ff-display, 'Fraunces', serif); font-size: 1.35rem; margin: 0 0 6px; }
.parenting-card-desc { font-size: .88rem; color: var(--c-muted, #6b7280); margin: 0; line-height: 1.5; }
.parenting-sub-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 20px 20px;
}
.parenting-sub-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: 20px;
    background: var(--c-bg-soft, #f8f8f6);
    font-size: .82rem;
    color: var(--c-text, #1f2937);
    text-decoration: none;
    transition: background .2s, color .2s;
}
.parenting-sub-link:hover { background: var(--c-primary, #F97316); color: #fff; }

/* Subcategory grid */
.parenting-sub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 18px;
}
.parenting-sub-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 28px 18px;
    background: #fff;
    border-radius: var(--radius, 14px);
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    text-decoration: none;
    color: inherit;
    transition: box-shadow .2s, transform .2s;
}
.parenting-sub-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.1); transform: translateY(-2px); }
.parenting-sub-icon { font-size: 2rem; margin-bottom: 10px; }
.parenting-sub-card h3 { font-family: var(--ff-display, 'Fraunces', serif); font-size: 1.05rem; margin: 0 0 6px; }
.parenting-art-count { font-size: .82rem; color: var(--c-primary, #F97316); font-weight: 600; }
.parenting-art-count.muted { color: var(--c-muted, #6b7280); font-weight: 400; }

/* Articles */
.articles-list { display: flex; flex-direction: column; gap: 24px; }
.article-card {
    background: #fff;
    border-radius: var(--radius, 14px);
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    overflow: hidden;
}
.article-thumb {
    width: 100%;
    max-height: 280px;
    object-fit: cover;
}
.article-body { padding: 24px; }
.article-body h3 { font-family: var(--ff-display, 'Fraunces', serif); margin: 0 0 8px; font-size: 1.3rem; }
.article-summary { color: var(--c-muted, #6b7280); margin: 0 0 14px; font-size: .92rem; line-height: 1.6; }
.article-content.prose { line-height: 1.75; font-size: .95rem; }
.article-content.prose p { margin: 0 0 14px; }
.article-content.prose h4 { margin: 20px 0 8px; font-weight: 700; }

/* Parenting single article — now uses shared .article-* classes */
.parenting-article-full { max-width: 100%; margin: 0; padding: 0; }
.parenting-related { margin-top: 48px; }
.parenting-related h3 { font-family: var(--ff-display, 'Fraunces', serif); margin: 0 0 20px; font-size: 1.2rem; }

/* Empty state */
.empty-state {
    text-align: center;
    padding: 60px 24px;
    color: var(--c-muted, #6b7280);
}
.empty-state .empty-icon { font-size: 3rem; margin-bottom: 12px; }
.empty-state h3 { font-family: var(--ff-display, 'Fraunces', serif); color: var(--c-text, #1f2937); margin: 0 0 8px; }
.empty-state p { max-width: 420px; margin: 0 auto; line-height: 1.6; }

/* Hero extras */
.back-link {
    display: inline-block;
    margin-bottom: 10px;
    color: rgba(255,255,255,.8);
    text-decoration: none;
    font-size: .9rem;
}
.back-link:hover { color: #fff; }
.hero-icon { margin-right: 8px; }

@media (max-width: 768px) {
    .parenting-grid { grid-template-columns: 1fr; }
    .parenting-sub-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .parenting-sub-grid { grid-template-columns: 1fr; }
}

/* ===========================================================
   FAMILY DASHBOARD
   =========================================================== */

/* ── Family panel ─────────────────────────────────────────── */
.family-panel { padding: 28px; }
.family-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.family-form-grid .span-2 { grid-column: span 2; }
.family-form-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
}
.family-save-status {
    font-size: .875rem;
    font-weight: 500;
    transition: opacity .3s;
}
.family-save-status.success { color: var(--c-success, #10b981); }
.family-save-status.error   { color: var(--c-error, #ef4444); }

.family-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}
.family-section-head h2 { margin: 0; }
.family-section-head p  { margin: 4px 0 0; }
.family-section-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* ── Child profile cards ──────────────────────────────────── */
.child-profiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
}
.child-card {
    background: var(--c-bg-soft, #f8f8fa);
    border: 1px solid var(--c-border-soft, #e8e8ec);
    border-radius: var(--radius-lg, 16px);
    padding: 20px;
    transition: box-shadow .2s;
}
.child-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.06);
}
.child-card-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.child-card-avatar {
    width: 56px; height: 56px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--c-accent, #6366f1);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 700;
    flex-shrink: 0;
}
.child-card-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.child-card-info { flex: 1; min-width: 0; }
.child-card-info h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--c-ink, #1F2937);
}
.child-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
    font-size: .8rem;
    color: var(--c-muted, #6b7280);
}
.child-card-meta span + span::before {
    content: '·';
    margin-right: 6px;
}
.child-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 12px;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.child-badge-linked {
    background: #dbeafe;
    color: #1d4ed8;
}
.child-card-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.child-card-actions .btn-sm {
    padding: 4px 8px;
    font-size: .78rem;
}
.child-card-actions .btn-sm svg {
    width: 14px; height: 14px;
}
.btn-danger { color: var(--c-error, #ef4444) !important; }
.btn-danger:hover { background: #fef2f2 !important; }

.child-card-details {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--c-border-soft, #e8e8ec);
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: .85rem;
}
.child-detail strong {
    color: var(--c-ink, #1F2937);
    font-weight: 600;
}
.child-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}
.tag {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: .75rem;
    font-weight: 500;
}
.tag-interest { background: #ede9fe; color: #5b21b6; }
.tag-sport    { background: #dcfce7; color: #166534; }
.tag-hobby    { background: #fef3c7; color: #92400e; }

.child-card-sizes {
    display: flex;
    gap: 16px;
    margin-top: 10px;
    font-size: .8rem;
    color: var(--c-muted, #6b7280);
}

/* ── Empty state ──────────────────────────────────────────── */
.empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 48px 24px;
    color: var(--c-muted, #6b7280);
}
.empty-state-icon {
    margin: 0 auto 12px;
    width: 48px; height: 48px;
    opacity: .4;
}
.empty-state-icon svg { width: 100%; height: 100%; }

/* ── Child form modal (large) ─────────────────────────────── */
.modal-content {
    position: relative;
    background: white;
    border-radius: var(--radius-xl, 20px);
    max-width: 600px; width: 100%;
    box-shadow: var(--shadow-lg);
    animation: pop .25s ease;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    z-index: 1;
}
.modal-lg { max-width: 720px; }
.modal-sm { max-width: 420px; }

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px 16px;
    border-bottom: 1px solid var(--c-border-soft, #e8e8ec);
}
.modal-header h2 { margin: 0; font-size: 1.25rem; }
.modal-body {
    padding: 20px 28px;
    overflow-y: auto;
    flex: 1;
}
.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 28px 20px;
    border-top: 1px solid var(--c-border-soft, #e8e8ec);
}

/* ── Child fieldsets ──────────────────────────────────────── */
.child-fieldset {
    border: 1px solid var(--c-border-soft, #e8e8ec);
    border-radius: var(--radius-md, 12px);
    padding: 18px 20px;
    margin-bottom: 16px;
}
.child-fieldset legend {
    font-weight: 700;
    font-size: .9rem;
    padding: 0 8px;
    color: var(--c-ink, #1F2937);
}
.child-fields-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.child-fields-grid .span-2 { grid-column: span 2; }
.child-fields-grid label {
    font-size: .85rem;
    font-weight: 500;
}
.child-fields-grid textarea {
    resize: vertical;
    min-height: 50px;
}

/* ── Account nav icons ────────────────────────────────────── */
.account-nav a svg {
    width: 16px; height: 16px;
    vertical-align: -2px;
    margin-right: 4px;
    opacity: .6;
}
.account-nav a.active svg { opacity: 1; }

/* ── Family responsive ────────────────────────────────────── */
@media (max-width: 760px) {
    .family-form-grid {
        grid-template-columns: 1fr;
    }
    .family-form-grid .span-2 { grid-column: span 1; }
    .family-section-head {
        flex-direction: column;
    }
    .child-profiles-grid {
        grid-template-columns: 1fr;
    }
    .child-card-header {
        flex-wrap: wrap;
    }
    .child-card-actions {
        width: 100%;
        justify-content: flex-end;
    }
}
@media (max-width: 600px) {
    .family-panel { padding: 18px; }
    .modal-content {
        max-width: 100%;
        border-radius: var(--radius-lg, 16px) var(--radius-lg, 16px) 0 0;
        max-height: 95vh;
    }
    .modal-header { padding: 16px 18px 12px; }
    .modal-body { padding: 16px 18px; }
    .modal-footer { padding: 12px 18px 16px; }
    .child-fields-grid {
        grid-template-columns: 1fr;
    }
    .child-fields-grid .span-2 { grid-column: span 1; }
    .family-section-actions {
        width: 100%;
    }
    .family-section-actions .btn {
        flex: 1;
        justify-content: center;
    }
}

/* ── Onboarding wizard ────────────────────────────────────── */
.onboarding-section {
    min-height: 80vh;
    display: flex;
    align-items: center;
}
.onboarding-container {
    max-width: 520px;
}
.onboarding-header {
    text-align: center;
    margin-bottom: 32px;
}
.onboarding-logo {
    width: 56px; height: 56px;
    margin: 0 auto 16px;
    background: var(--c-accent, #6366f1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.onboarding-logo svg { width: 28px; height: 28px; }
.onboarding-header h1 {
    font-size: 1.75rem;
    margin: 0 0 8px;
}

.onboarding-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 28px;
}
.onboarding-step-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: .4;
    transition: opacity .3s;
}
.onboarding-step-indicator.active,
.onboarding-step-indicator.done { opacity: 1; }
.step-num {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--c-bg-soft, #f0f0f4);
    color: var(--c-ink, #1F2937);
    font-weight: 700;
    font-size: .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.onboarding-step-indicator.active .step-num {
    background: var(--c-accent, #6366f1);
    color: white;
}
.onboarding-step-indicator.done .step-num {
    background: var(--c-success, #10b981);
    color: white;
}
.step-label {
    font-size: .85rem;
    font-weight: 600;
}
.onboarding-step-line {
    width: 48px;
    height: 2px;
    background: var(--c-border-soft, #e8e8ec);
    margin: 0 12px;
    transition: background .3s;
}
.onboarding-step-line.done {
    background: var(--c-success, #10b981);
}

.onboarding-panel {
    background: white;
    border-radius: var(--radius-xl, 20px);
    padding: 32px;
    box-shadow: var(--shadow-md);
}
.onboarding-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.onboarding-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.onboarding-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
}
@media (max-width: 480px) {
    .onboarding-panel { padding: 22px 18px; }
    .onboarding-row-2 { grid-template-columns: 1fr; }
    .step-label { display: none; }
}

/* ===========================================================
   FAMILY CALENDAR
   =========================================================== */
.cal-panel { padding: 24px; }

.cal-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.cal-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}
.cal-nav-btn {
    width: 32px; height: 32px;
    padding: 0;
    font-size: 1.2rem;
    border-radius: 50%;
}
.cal-month-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    min-width: 160px;
    text-align: center;
}
.cal-toolbar-actions {
    display: flex;
    gap: 8px;
}

/* Calendar grid */
.cal-grid { margin-bottom: 24px; }
.cal-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--c-muted, #6b7280);
    margin-bottom: 4px;
}
.cal-weekend { color: var(--c-accent, #6366f1); }
.cal-body {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.cal-day {
    aspect-ratio: 1;
    border-radius: var(--radius-md, 12px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 6px 4px;
    cursor: pointer;
    transition: background .15s;
    min-height: 48px;
}
.cal-day:hover { background: var(--c-bg-soft, #f0f0f4); }
.cal-day-empty { cursor: default; }
.cal-day-empty:hover { background: transparent; }
.cal-day-today {
    background: var(--c-accent, #6366f1);
    color: white;
}
.cal-day-today:hover { background: var(--c-accent, #6366f1); filter: brightness(1.1); }
.cal-day-num {
    font-size: .82rem;
    font-weight: 600;
    line-height: 1;
}
.cal-day-dots {
    display: flex;
    gap: 3px;
    margin-top: 4px;
    flex-wrap: wrap;
    justify-content: center;
}
.cal-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    display: block;
}

/* Agenda list */
.cal-agenda { border-top: 1px solid var(--c-border-soft, #e8e8ec); padding-top: 16px; }
.cal-agenda h3 { font-size: 1rem; margin: 0 0 12px; }
.cal-agenda-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-md, 12px);
    cursor: pointer;
    transition: background .15s;
}
.cal-agenda-item:hover { background: var(--c-bg-soft, #f0f0f4); }
.cal-agenda-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.cal-agenda-info { flex: 1; min-width: 0; }
.cal-agenda-info strong { font-size: .9rem; }
.cal-agenda-info small { color: var(--c-muted, #6b7280); }
.cal-agenda-date {
    font-size: .78rem;
    color: var(--c-muted, #6b7280);
    white-space: nowrap;
}

/* Checkbox label */
.cal-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .85rem;
    cursor: pointer;
}
.cal-checkbox input { width: auto; margin: 0; }

/* Sync */
.cal-sync-url {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}
.cal-sync-url input {
    flex: 1;
    font-size: .78rem;
    padding: 8px 10px;
}
.cal-sync-actions {
    margin-top: 12px;
    display: flex;
    gap: 8px;
}

/* Calendar responsive */
@media (max-width: 760px) {
    .cal-toolbar { flex-direction: column; align-items: stretch; }
    .cal-toolbar-actions { justify-content: flex-end; }
}
@media (max-width: 600px) {
    .cal-panel { padding: 16px; }
    .cal-day {
        min-height: 36px;
        padding: 4px 2px;
    }
    .cal-day-num { font-size: .72rem; }
    .cal-dot { width: 4px; height: 4px; }
}

/* ===========================================================
   NOTIFICATIONS
   =========================================================== */
.account-greet { position: relative; }
.notif-bell {
    position: absolute;
    top: 8px; right: 8px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--c-muted, #6b7280);
    transition: color .15s;
}
.notif-bell:hover { color: var(--c-accent, #6366f1); }
.notif-bell svg { width: 20px; height: 20px; }
.notif-badge {
    position: absolute;
    top: -2px; right: -4px;
    background: var(--c-error, #ef4444);
    color: white;
    font-size: .65rem;
    font-weight: 700;
    min-width: 16px; height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
}

.notif-panel {
    background: white;
    border: 1px solid var(--c-border-soft, #e8e8ec);
    border-radius: var(--radius-lg, 16px);
    box-shadow: var(--shadow-lg);
    margin-bottom: 12px;
    overflow: hidden;
}
.notif-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--c-border-soft, #e8e8ec);
    font-size: .9rem;
}
.notif-panel-list { max-height: 240px; overflow-y: auto; }
.notif-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background .15s;
    font-size: .85rem;
}
.notif-item:hover { background: var(--c-bg-soft, #f0f0f4); }
.notif-item.notif-read { opacity: .5; }
.notif-icon { font-size: 1.2rem; flex-shrink: 0; }
.notif-text { flex: 1; min-width: 0; }

/* ===========================================================
   LEGAL PAGES
   =========================================================== */
.legal-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.legal-card {
    background: white;
    border: 1px solid var(--c-border-soft, #e8e8ec);
    border-radius: var(--radius-lg, 16px);
    padding: 32px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .2s, transform .2s;
}
.legal-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}
.legal-card-icon { font-size: 2.4rem; display: block; margin-bottom: 12px; }
.legal-card h2 {
    font-size: 1.2rem;
    margin: 0 0 8px;
    color: var(--c-text, #1a1a2e);
}
.legal-card p {
    font-size: .9rem;
    color: var(--c-muted, #6b7280);
    margin: 0 0 16px;
    line-height: 1.5;
}
.legal-card-link {
    font-size: .85rem;
    font-weight: 600;
    color: var(--c-accent, #6366f1);
}

.legal-content {
    max-width: 800px;
}
.legal-content h2 {
    font-size: 1.3rem;
    margin: 36px 0 12px;
    color: var(--c-text, #1a1a2e);
    padding-bottom: 8px;
    border-bottom: 2px solid var(--c-border-soft, #e8e8ec);
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content p {
    font-size: .95rem;
    line-height: 1.7;
    color: var(--c-text-body, #374151);
    margin: 0 0 14px;
}
.legal-content ul {
    margin: 0 0 16px;
    padding-left: 24px;
}
.legal-content li {
    font-size: .95rem;
    line-height: 1.7;
    color: var(--c-text-body, #374151);
    margin-bottom: 6px;
}
.legal-content a {
    color: var(--c-accent, #6366f1);
    text-decoration: underline;
}
.legal-back {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--c-border-soft, #e8e8ec);
}

.footer-legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 8px;
}
.footer-legal-links a {
    font-size: .8rem;
    color: rgba(255,255,255,.6);
    text-decoration: none;
    transition: color .15s;
}
.footer-legal-links a:hover { color: white; }

@media (max-width: 600px) {
    .legal-cards { grid-template-columns: 1fr; }
    .legal-card { padding: 24px; }
    .legal-content h2 { font-size: 1.15rem; }
}

/* ===========================================================
   PARENT DASHBOARD V2 — Common
   =========================================================== */
.account-nav-section {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--c-muted, #6b7280);
    padding: 14px 16px 4px;
    margin-top: 4px;
}
.dash-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.dash-child-select {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.dash-filter-bar {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.btn-xs {
    padding: 4px 10px;
    font-size: .75rem;
    border-radius: 20px;
}
.dash-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}
.dash-table th, .dash-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--c-border-soft, #e8e8ec);
}
.dash-table th { font-size: .75rem; text-transform: uppercase; color: var(--c-muted, #6b7280); }
.empty-state {
    text-align: center;
    padding: 48px 16px;
}
.empty-state p:first-child { font-size: 3rem; margin-bottom: 8px; }
.empty-state h3 { margin: 0 0 12px; }
.legal-disclaimer-box {
    margin-top: 32px;
    padding: 16px 20px;
    background: #fef3c7;
    border-radius: var(--radius-lg, 12px);
    border-left: 4px solid #f59e0b;
    font-size: .85rem;
    line-height: 1.6;
}
.legal-disclaimer-box p { margin: 0; }

/* ===========================================================
   DOCUMENTS
   =========================================================== */
.doc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.doc-category {
    background: white;
    border: 1px solid var(--c-border-soft, #e8e8ec);
    border-radius: var(--radius-lg, 12px);
    padding: 20px;
}
.doc-category.has-docs { border-color: var(--c-accent, #6366f1); border-width: 2px; }
.doc-category-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.doc-category-icon { font-size: 1.5rem; }
.doc-category-head h3 { font-size: .95rem; margin: 0; flex: 1; }
.doc-count {
    background: var(--c-accent, #6366f1);
    color: white;
    font-size: .7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
}
.doc-empty { font-size: .85rem; margin: 0; }
.doc-list { display: flex; flex-direction: column; gap: 8px; }
.doc-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--c-bg-soft, #f5f5f8);
    border-radius: 8px;
    font-size: .85rem;
}
.doc-item-icon { font-size: 1.2rem; flex-shrink: 0; }
.doc-item-info { flex: 1; min-width: 0; }
.doc-item-info strong { display: block; }
.doc-item-info small { display: block; }
.doc-item-actions { display: flex; gap: 4px; flex-shrink: 0; }

/* ===========================================================
   MEDICAL RECORDS
   =========================================================== */
.med-records { display: flex; flex-direction: column; gap: 12px; }
.med-record {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 20px;
    background: white;
    border: 1px solid var(--c-border-soft, #e8e8ec);
    border-radius: var(--radius-lg, 12px);
}
.med-record-icon { font-size: 1.5rem; flex-shrink: 0; padding-top: 2px; }
.med-record-body { flex: 1; min-width: 0; }
.med-record-body strong { display: block; margin-bottom: 4px; }
.med-record-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: .8rem;
    color: var(--c-muted, #6b7280);
}
.med-value {
    font-weight: 700;
    color: var(--c-accent, #6366f1);
}
.med-notes { font-size: .85rem; color: var(--c-text-body, #374151); margin: 6px 0 0; }
.med-next {
    display: inline-block;
    margin-top: 6px;
    color: var(--c-accent, #6366f1);
    font-weight: 600;
}

/* ===========================================================
   GROWTH TRACKER
   =========================================================== */
.growth-charts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 32px;
}
.growth-chart-box {
    background: white;
    border: 1px solid var(--c-border-soft, #e8e8ec);
    border-radius: var(--radius-lg, 12px);
    padding: 20px;
}
.growth-chart-box h3 { margin: 0 0 12px; font-size: 1rem; }
.growth-chart-full { grid-column: 1 / -1; }
.growth-table-wrap {
    background: white;
    border: 1px solid var(--c-border-soft, #e8e8ec);
    border-radius: var(--radius-lg, 12px);
    padding: 20px;
}
.growth-table-wrap h3 { margin: 0 0 16px; font-size: 1rem; }

/* ===========================================================
   MILESTONES
   =========================================================== */
.milestone-progress {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
    padding: 16px 20px;
    background: white;
    border: 1px solid var(--c-border-soft, #e8e8ec);
    border-radius: var(--radius-lg, 12px);
}
.milestone-progress-bar {
    flex: 1;
    height: 12px;
    background: var(--c-bg-soft, #f0f0f4);
    border-radius: 6px;
    overflow: hidden;
}
.milestone-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #a855f7);
    border-radius: 6px;
    transition: width .5s ease;
}
.milestone-progress-text { font-weight: 700; font-size: .9rem; white-space: nowrap; }
.milestone-section {
    margin-bottom: 24px;
}
.milestone-section h2 { font-size: 1.1rem; margin: 0 0 12px; }
.milestone-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px;
}
.milestone-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: white;
    border: 1px solid var(--c-border-soft, #e8e8ec);
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.milestone-item:hover { border-color: var(--c-accent, #6366f1); }
.milestone-item.achieved { background: #f0fdf4; border-color: #86efac; }
.milestone-item input[type=checkbox] { display: none; }
.milestone-check { font-size: 1.2rem; flex-shrink: 0; }
.milestone-label strong { display: block; font-size: .9rem; }
.milestone-label small { display: block; }

/* ===========================================================
   FAMILY BUDGET
   =========================================================== */
.budget-nav {
    display: flex;
    align-items: center;
    gap: 12px;
}
.budget-nav strong { font-size: 1rem; }
.budget-overview {
    background: white;
    border: 1px solid var(--c-border-soft, #e8e8ec);
    border-radius: var(--radius-lg, 12px);
    padding: 24px;
    margin-bottom: 24px;
}
.budget-set-form { display: flex; flex-direction: column; gap: 6px; }
.budget-set-form label { font-size: .85rem; font-weight: 600; }
.budget-input-row { display: flex; gap: 8px; align-items: center; }
.budget-input-row input { max-width: 160px; }
.budget-meter { margin-top: 20px; }
.budget-meter-bar {
    height: 16px;
    background: var(--c-bg-soft, #f0f0f4);
    border-radius: 8px;
    overflow: hidden;
}
.budget-meter-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #6366f1);
    border-radius: 8px;
    transition: width .5s ease;
}
.budget-meter-fill.over { background: linear-gradient(90deg, #ef4444, #f97316); }
.budget-meter-labels {
    display: flex;
    justify-content: space-between;
    font-size: .8rem;
    margin-top: 6px;
    color: var(--c-muted, #6b7280);
}
.budget-categories {
    background: white;
    border: 1px solid var(--c-border-soft, #e8e8ec);
    border-radius: var(--radius-lg, 12px);
    padding: 20px;
    margin-bottom: 24px;
}
.budget-categories h3 { margin: 0 0 16px; font-size: 1rem; }
.budget-cat-grid { display: flex; flex-direction: column; gap: 10px; }
.budget-cat-item {
    display: flex;
    align-items: center;
    gap: 12px;
}
.budget-cat-icon {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px; color: white; font-size: 1.1rem;
}
.budget-cat-info { flex: 1; min-width: 0; }
.budget-cat-info strong { font-size: .85rem; display: block; margin-bottom: 4px; }
.budget-cat-bar {
    height: 6px;
    background: var(--c-bg-soft, #f0f0f4);
    border-radius: 3px;
    overflow: hidden;
}
.budget-cat-bar div { height: 100%; border-radius: 3px; }
.budget-cat-amt { font-weight: 700; font-size: .85rem; white-space: nowrap; }
.budget-entries {
    background: white;
    border: 1px solid var(--c-border-soft, #e8e8ec);
    border-radius: var(--radius-lg, 12px);
    padding: 20px;
}
.budget-entries h3 { margin: 0 0 16px; font-size: 1rem; }
.budget-entry {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--c-border-soft, #e8e8ec);
}
.budget-entry:last-child { border-bottom: 0; }
.budget-entry-icon { font-size: 1.2rem; }
.budget-entry-info { flex: 1; min-width: 0; }
.budget-entry-info strong { display: block; font-size: .9rem; }
.budget-entry-info small { display: block; }
.budget-entry-amt { font-weight: 700; color: #ef4444; }

/* ===========================================================
   GIFT WISHLISTS
   =========================================================== */
.gw-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}
.gw-list-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 28px 20px;
    background: white;
    border: 1px solid var(--c-border-soft, #e8e8ec);
    border-radius: var(--radius-lg, 12px);
    text-decoration: none;
    color: inherit;
    transition: box-shadow .2s, transform .2s;
}
.gw-list-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.gw-list-icon { font-size: 2.5rem; }
.gw-list-card h3 { font-size: 1rem; margin: 0; }
.gw-list-card small { color: var(--c-muted, #6b7280); font-size: .8rem; }
.gw-list-progress {
    font-size: .75rem;
    font-weight: 700;
    color: var(--c-accent, #6366f1);
    margin-top: 4px;
}
.gw-header { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.gw-header h2 { margin: 0 0 6px; }
.gw-meta { display: flex; gap: 16px; font-size: .85rem; color: var(--c-muted, #6b7280); }
.gw-share { min-width: 240px; }
.gw-share label { display: block; margin-bottom: 4px; font-size: .8rem; }
.gw-items { display: flex; flex-direction: column; gap: 8px; }
.gw-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: white;
    border: 1px solid var(--c-border-soft, #e8e8ec);
    border-radius: 10px;
}
.gw-item.purchased { opacity: .5; }
.gw-check, .gw-check-static { font-size: 1.2rem; cursor: pointer; background: none; border: none; flex-shrink: 0; }
.gw-item-info { flex: 1; min-width: 0; }
.gw-item-info strong { display: block; }
.gw-item-info small { display: block; }
.gw-price { font-weight: 700; font-size: .9rem; white-space: nowrap; }
.gw-priority { font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 20px; }
.gw-priority-high { background: #fef2f2; color: #dc2626; }
.gw-priority-medium { background: #fffbeb; color: #d97706; }
.gw-priority-low { background: #f0fdf4; color: #16a34a; }

/* ===========================================================
   PERSONAL LIBRARY
   =========================================================== */
.lib-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}
.lib-card {
    background: white;
    border: 1px solid var(--c-border-soft, #e8e8ec);
    border-radius: var(--radius-lg, 12px);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lib-card.is-fav { border-color: #f59e0b; }
.lib-card-head { display: flex; justify-content: space-between; align-items: center; }
.lib-type-badge {
    font-size: .75rem;
    padding: 2px 8px;
    background: var(--c-bg-soft, #f0f0f4);
    border-radius: 20px;
}
.lib-fav-btn { background: none; border: none; font-size: 1.1rem; cursor: pointer; }
.lib-card h3 { font-size: .95rem; margin: 0; }
.lib-card p { font-size: .8rem; margin: 0; line-height: 1.5; }
.lib-card-actions { display: flex; gap: 6px; margin-top: auto; }

/* ===========================================================
   AI CHAT
   =========================================================== */
.ai-chat-container {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 20px;
    min-height: 500px;
}
.ai-chat-sidebar {
    background: white;
    border: 1px solid var(--c-border-soft, #e8e8ec);
    border-radius: var(--radius-lg, 12px);
    padding: 20px;
    overflow-y: auto;
}
.ai-chat-sidebar h3 { font-size: .85rem; margin: 0 0 10px; color: var(--c-muted, #6b7280); text-transform: uppercase; letter-spacing: .05em; }
.ai-child-list { display: flex; flex-direction: column; gap: 4px; }
.ai-child-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: .85rem;
    transition: background .15s;
}
.ai-child-option:hover { background: var(--c-bg-soft, #f0f0f4); }
.ai-child-option input[type=radio] { accent-color: var(--c-accent, #6366f1); }
.ai-quick-questions { display: flex; flex-direction: column; gap: 6px; }
.ai-quick-btn {
    text-align: left;
    background: var(--c-bg-soft, #f0f0f4);
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: .8rem;
    cursor: pointer;
    transition: border-color .15s;
}
.ai-quick-btn:hover { border-color: var(--c-accent, #6366f1); }
.ai-chat-main {
    display: flex;
    flex-direction: column;
    background: white;
    border: 1px solid var(--c-border-soft, #e8e8ec);
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
}
.ai-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 55vh;
    max-height: 72vh;
}
.ai-msg { display: flex; gap: 10px; }
.ai-msg-avatar { font-size: 1.4rem; flex-shrink: 0; padding-top: 2px; }

/* ----------------------------------------------------------
   Fytyra e Solit — një foto, tri madhësi.
   Madhësia vjen inline nga soli_avatar($px), sepse vendos thirrësi sa e madhe
   i duhet; këtu rri vetëm forma, që të jetë e njëjtë kudo.
   ---------------------------------------------------------- */
.soli-face {
    border-radius: 50%;
    object-fit: cover;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-primary) 30%, transparent);
}
.ai-msg-avatar .soli-face { display: block; }

/* Titulli: fotoja rreshtohet me tekstin, jo mbi vijën bazë */
.soli-title { display: flex; align-items: center; gap: 12px; }

/* Menuja: fotoja e vogël rri në një rresht me etiketën */
.nav-soli { display: flex; align-items: center; gap: 8px; }
.nav-soli .soli-face { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--c-primary) 35%, transparent); }
.ai-msg-content {
    padding: 12px 16px;
    border-radius: 12px;
    font-size: .9rem;
    line-height: 1.6;
    max-width: 80%;
}
.ai-msg-user .ai-msg-content {
    background: var(--c-accent, #6366f1); color: white; margin-left: auto;
    max-width: 65%; border-bottom-right-radius: 4px;
}
.ai-msg-bot .ai-msg-content {
    background: var(--c-bg-soft, #f0f0f4);
    max-width: 92%; border-bottom-left-radius: 4px;
    padding: 14px 18px;
}
/* Structured answer content */
.ai-msg-content .ai-ul { margin: 6px 0 10px; padding-left: 18px; }
.ai-msg-content .ai-ul li { margin: 5px 0; }
.ai-msg-content .ai-ul li::marker { color: var(--c-accent, #6366f1); }
.ai-msg-content a { color: var(--c-accent, #6366f1); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.ai-msg-content strong { color: var(--c-ink, #1f2430); }
.ai-privacy-note {
    margin-top: 16px; padding: 8px 10px; border-radius: 8px;
    background: #f0fdf4; color: #166534; font-size: .78rem; line-height: 1.4;
}
.ai-typing .ai-msg-content { opacity: .6; font-style: italic; }
.ai-streaming { min-height: 24px; }
.ai-cursor { opacity: .5; font-style: italic; }
.ai-streaming::after { content: '▊'; animation: ai-blink .6s infinite; color: var(--c-accent, #6366f1); }
@keyframes ai-blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
.ai-msg-content .ai-list-item { display: block; padding-left: 1em; text-indent: -1em; }
.ai-msg-content .ai-list-item::before { content: '• '; color: var(--c-accent, #6366f1); font-weight: 700; }
.ai-msg-content .ai-hr { border: none; border-top: 1px solid var(--c-border-soft, #e8e8ec); margin: 8px 0; }
.ai-chat-input {
    display: flex;
    gap: 8px;
    padding: 16px 20px;
    border-top: 1px solid var(--c-border-soft, #e8e8ec);
}
.ai-chat-input input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--c-border-soft, #e8e8ec);
    border-radius: 8px;
    font-size: .9rem;
}

/* ===========================================================
   RECOMMENDATIONS
   =========================================================== */
.rec-child-profile {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: white;
    border: 1px solid var(--c-border-soft, #e8e8ec);
    border-radius: var(--radius-lg, 12px);
    margin-bottom: 24px;
}
.rec-child-avatar {
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    background: var(--c-accent, #6366f1);
    color: white; font-size: 1.4rem; font-weight: 700;
    border-radius: 50%;
}
.rec-child-profile h3 { margin: 0; }
.rec-child-profile p { margin: 0; }
.rec-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.rec-tag {
    font-size: .7rem;
    padding: 2px 8px;
    background: var(--c-bg-soft, #f0f0f4);
    border-radius: 20px;
    color: var(--c-muted, #6b7280);
}
.rec-section { margin-bottom: 32px; }
.rec-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.rec-section-head h2 { font-size: 1.15rem; margin: 0; }
.rec-scroll {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
}
.rec-card {
    flex: 0 0 180px;
    scroll-snap-align: start;
    background: white;
    border: 1px solid var(--c-border-soft, #e8e8ec);
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .2s;
}
.rec-card:hover { box-shadow: var(--shadow-lg); }
.rec-card-img {
    height: 120px;
    background-size: cover;
    background-position: center;
    background-color: var(--c-bg-soft, #f0f0f4);
}
.rec-card h4 {
    font-size: .85rem;
    margin: 0;
    padding: 10px 12px 6px;
    line-height: 1.3;
}
.rec-price {
    display: block;
    padding: 0 12px 10px;
    font-size: .8rem;
    font-weight: 700;
    color: var(--c-accent, #6366f1);
}

/* ===========================================================
   DASHBOARD V2 — RESPONSIVE
   =========================================================== */
/* Below 1250px the account nav + AI sidebar squeeze the chat too much —
   stack the AI sidebar on top and let the conversation take full width. */
@media (max-width: 1250px) {
    .ai-chat-container { grid-template-columns: 1fr; }
    .ai-chat-sidebar { max-height: none; }
    .ai-child-list { flex-direction: row; flex-wrap: wrap; gap: 8px; }
    .ai-child-option { padding: 6px 12px; border: 1px solid var(--c-border-soft, #e8e8ec); border-radius: 20px; }
    .ai-quick-questions { display: flex; flex-wrap: wrap; gap: 8px; }
    .ai-quick-btn { width: auto; }
}
@media (max-width: 760px) {
    .growth-charts { grid-template-columns: 1fr; }
    .doc-grid { grid-template-columns: 1fr; }
    .gw-list-grid { grid-template-columns: 1fr 1fr; }
    .gw-header { flex-direction: column; }
    .budget-input-row { flex-wrap: wrap; }
}
@media (max-width: 480px) {
    .milestone-grid { grid-template-columns: 1fr; }
    .gw-list-grid { grid-template-columns: 1fr; }
    .lib-grid { grid-template-columns: 1fr; }
    .rec-card { flex: 0 0 150px; }
    .rec-card-img { height: 90px; }
    .ai-chat-messages { padding: 12px; }
    .ai-msg-content { max-width: 95%; }
    .gw-item { flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════════════════
   ENGLISH PRACTICE — Landing & Chat
   ═══════════════════════════════════════════════════════════ */

/* ── Landing: Character cards ────────────────────────────── */
.practice-characters {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 16px;
    max-width: 700px;
    margin: 0 auto 32px;
}
.practice-char-card {
    display: flex; flex-direction: column; align-items: center;
    gap: 6px; padding: 20px 12px;
    background: #fff; border: 2px solid var(--border);
    border-radius: 16px; cursor: pointer;
    transition: border-color .2s, transform .15s, box-shadow .2s;
}
.practice-char-card:hover {
    border-color: var(--primary);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
}
.practice-char-card.is-active {
    border-color: var(--primary);
    background: var(--primary-light, #fff5f5);
    box-shadow: 0 4px 16px rgba(249,115,22,.15);
}
.practice-char-emoji { font-size: 2.4rem; }
.practice-char-emoji.has-img { font-size: 0; line-height: 0; }
.practice-char-img {
    width: 78px; height: 78px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    background: #fff;
    box-shadow: 0 2px 8px rgba(31,41,55,.12);
}
.practice-char-card.is-featured .practice-char-img {
    box-shadow: 0 3px 12px rgba(249,115,22,.35);
    outline: 3px solid rgba(249,115,22,.5);
    outline-offset: 1px;
}
.practice-char-name { font-size: .95rem; color: var(--ink); }
.practice-char-type { font-size: .75rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; }

/* Soli — the SolKids mascot & star English tutor: featured card */
.practice-char-card.is-featured {
    position: relative;
    border-color: transparent;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, #FDBA74, #F97316, #F59E0B) border-box;
    box-shadow: 0 8px 26px rgba(249, 115, 22, .22);
}
.practice-char-card.is-featured:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 34px rgba(249, 115, 22, .3);
}
.practice-char-card.is-featured .practice-char-emoji {
    filter: drop-shadow(0 3px 10px rgba(245, 158, 11, .5));
}
.practice-char-card.is-featured .practice-char-type {
    color: #EA580C;
    font-weight: 700;
}
.practice-char-badge {
    position: absolute;
    top: -12px; left: 50%; transform: translateX(-50%);
    white-space: nowrap;
    background: linear-gradient(135deg, #F97316, #F59E0B);
    color: #fff;
    font-size: .72rem; font-weight: 800;
    letter-spacing: .03em;
    padding: 5px 12px; border-radius: 999px;
    box-shadow: 0 3px 10px rgba(249, 115, 22, .35);
}

/* ── Landing: Scenario cards ─────────────────────────────── */
.practice-scenarios {
    display: flex; flex-direction: column; gap: 12px;
    max-width: 700px; margin: 0 auto 32px;
}
.practice-scenario-card {
    display: flex; align-items: center; gap: 16px;
    padding: 18px 20px;
    background: #fff; border: 1px solid var(--border);
    border-radius: 14px; text-decoration: none; color: var(--ink);
    transition: border-color .2s, box-shadow .2s, transform .15s;
}
.practice-scenario-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 16px rgba(0,0,0,.06);
    transform: translateY(-2px);
}
.practice-scenario-card.is-completed {
    border-color: #22c55e; background: #f0fdf4;
}
.practice-scenario-icon { font-size: 2rem; flex-shrink: 0; }
.practice-scenario-info { flex: 1; min-width: 0; }
.practice-scenario-info h3 { font-size: 1.05rem; margin: 0 0 4px; font-weight: 600; }
.practice-scenario-info p { font-size: .85rem; color: var(--ink-faint); margin: 0 0 8px; }
.practice-scenario-meta { display: flex; gap: 12px; font-size: .78rem; color: var(--ink-faint); flex-wrap: wrap; }
.practice-done-badge { color: #22c55e; font-weight: 600; }
.practice-progress-badge { color: var(--primary); font-weight: 600; }
.practice-scenario-arrow { color: var(--ink-faint); flex-shrink: 0; }

/* ── Landing: Login hint ─────────────────────────────────── */
.practice-login-hint {
    text-align: center; padding: 20px;
    background: #fffbeb; border: 1px solid #fde68a;
    border-radius: 12px; margin-bottom: 32px;
    max-width: 700px; margin-left: auto; margin-right: auto;
}
.practice-login-hint p { margin: 0 0 12px; }

/* ── Landing: How it works ───────────────────────────────── */
.practice-how-it-works { max-width: 700px; margin: 0 auto; }
.practice-steps-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 20px; margin-top: 20px;
}
.practice-step-card {
    text-align: center; padding: 24px 16px;
    background: #fff; border: 1px solid var(--border);
    border-radius: 14px;
}
.practice-step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--primary); color: #fff;
    font-weight: 700; font-size: 1.1rem; margin-bottom: 10px;
}
.practice-step-card h3 { font-size: .95rem; margin: 0 0 6px; }
.practice-step-card p { font-size: .82rem; color: var(--ink-faint); margin: 0; }

/* ═══════════════════════════════════════════════════════════
   CHAT PAGE
   ═══════════════════════════════════════════════════════════ */
.practice-chat-page {
    display: flex; flex-direction: column;
    height: calc(100vh - 70px);
    max-width: 700px; margin: 0 auto;
    overflow: hidden;
}
body:has(.practice-chat-page) footer,
body:has(.practice-chat-page) .site-footer { display: none; }

/* ── Header ──────────────────────────────────────────────── */
.practice-chat-header {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; border-bottom: 1px solid var(--border);
    background: #fff; flex-shrink: 0;
}
.practice-back-btn {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .85rem; color: var(--ink-faint); text-decoration: none;
}
.practice-back-btn:hover { color: var(--primary); }
.practice-chat-title {
    flex: 1; display: flex; align-items: center; gap: 6px;
    font-size: 1rem;
}
.practice-chat-stats {
    display: flex; gap: 12px; font-size: .82rem;
}
.practice-step-label { color: var(--ink-faint); }
.practice-score-label { color: var(--primary); font-weight: 600; }

/* ── Progress bar ────────────────────────────────────────── */
.practice-progress-bar {
    height: 4px; background: var(--border); flex-shrink: 0;
}
.practice-progress-fill {
    height: 100%; background: var(--primary);
    transition: width .4s ease;
}

/* ── Chat body ───────────────────────────────────────────── */
.practice-chat-body {
    flex: 1; overflow-y: auto;
    padding: 20px 16px; display: flex; flex-direction: column; gap: 16px;
}

/* ── Messages ────────────────────────────────────────────── */
.practice-msg { display: flex; gap: 10px; animation: practiceSlide .3s ease; }
.practice-msg-character { align-items: flex-start; }
.practice-msg-user { justify-content: flex-end; }
.practice-msg-user .practice-bubble {
    background: var(--primary); color: #fff; border-radius: 16px 16px 4px 16px;
}

.practice-char-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    background: #f3f4f6; display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; flex-shrink: 0;
    overflow: hidden;
}
.practice-msg-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.practice-bubble {
    background: #fff; border: 1px solid var(--border);
    border-radius: 16px 16px 16px 4px; padding: 12px 16px;
    max-width: 85%; position: relative;
}
.practice-char-label { font-size: .78rem; color: var(--primary); display: block; margin-bottom: 4px; }
.practice-msg-en { font-size: 1.05rem; margin: 0 0 4px; font-weight: 500; }
.practice-msg-sq { font-size: .82rem; color: var(--ink-faint); margin: 0; font-style: italic; }

.practice-tts-btn {
    position: absolute; top: 8px; right: 8px;
    background: none; border: none; cursor: pointer;
    font-size: 1.1rem; opacity: .6; transition: opacity .2s;
}
.practice-tts-btn:hover { opacity: 1; }

/* ── Feedback ────────────────────────────────────────────── */
.practice-feedback {
    padding: 10px 16px; border-radius: 10px;
    font-weight: 600; font-size: .9rem;
    animation: practiceSlide .2s ease;
}
.practice-feedback.is-correct { background: #dcfce7; color: #166534; }
.practice-feedback.is-wrong { background: #fee2e2; color: #991b1b; }
.practice-pts-badge {
    background: #22c55e; color: #fff; padding: 2px 8px;
    border-radius: 20px; font-size: .78rem; margin-left: 8px;
}

/* Suggestion under the learner's answer + replay-aloud button */
.practice-suggest {
    padding: 10px 14px; border-radius: 10px;
    background: #fef9c3; color: #713f12;
    border: 1px dashed #eab308;
    font-size: .88rem; line-height: 1.5;
    animation: practiceSlide .2s ease;
}
.practice-suggest em { font-style: normal; font-weight: 700; }
.practice-suggest.is-alt {
    background: #f0f9ff; color: #075985; border-color: #38bdf8;
    margin-top: 8px; font-weight: 500;
}
.practice-say-btn {
    background: none; border: none; cursor: pointer;
    font-size: 1.05rem; margin-left: 8px; padding: 0 4px;
    vertical-align: middle; opacity: .75; transition: opacity .15s, transform .15s;
}
.practice-say-btn:hover { opacity: 1; transform: scale(1.15); }

/* ── Input area ──────────────────────────────────────────── */
.practice-chat-input {
    border-top: 1px solid var(--border);
    padding: 16px; background: #fafafa; flex-shrink: 0;
}

/* ── Choices ──────────────────────────────────────────────── */
.practice-choices {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.practice-choice-btn {
    padding: 12px 16px; border: 2px solid var(--border);
    border-radius: 12px; background: #fff;
    font-size: .95rem; cursor: pointer; font-weight: 500;
    transition: border-color .2s, background .2s, transform .1s;
}
.practice-choice-btn:hover {
    border-color: var(--primary); transform: translateY(-1px);
}
.practice-choice-btn.is-correct {
    border-color: #22c55e; background: #dcfce7; color: #166534;
}
.practice-choice-btn.is-wrong {
    border-color: #ef4444; background: #fee2e2; color: #991b1b;
    animation: practiceShake .4s;
}

/* ── Voice ───────────────────────────────────────────────── */
.practice-voice-wrap { display: flex; flex-direction: column; gap: 12px; }
.practice-mic-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 24px; border: 2px solid var(--primary);
    border-radius: 30px; background: #fff;
    font-size: 1rem; font-weight: 600; color: var(--primary);
    cursor: pointer; transition: all .2s; align-self: center;
}
.practice-mic-btn:hover { background: var(--primary); color: #fff; }
.practice-mic-btn.is-recording {
    background: var(--primary); color: #fff;
    animation: practicePulse 1.2s infinite;
}
.practice-mic-icon { font-size: 1.3rem; }
.practice-voice-status { text-align: center; font-size: .85rem; color: var(--ink-faint); min-height: 20px; }
.practice-voice-fallback { text-align: center; color: var(--ink-faint); font-size: .85rem; }

/* ── Type input ──────────────────────────────────────────── */
.practice-type-wrap { margin-top: 8px; }
.practice-type-form {
    display: flex; gap: 8px;
}
.practice-type-input {
    flex: 1; padding: 10px 14px; border: 1px solid var(--border);
    border-radius: 10px; font-size: .95rem;
}
.practice-type-input:focus { border-color: var(--primary); outline: none; }

/* ── Listen ──────────────────────────────────────────────── */
.practice-listen-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 20px; border: 2px solid var(--secondary);
    border-radius: 24px; background: #fff;
    font-size: .95rem; cursor: pointer; color: var(--secondary);
    margin-bottom: 8px; align-self: center;
}
.practice-listen-btn:hover { background: var(--secondary); color: #fff; }

/* ── Hint ────────────────────────────────────────────────── */
.practice-hint {
    margin-top: 10px; padding: 8px 12px;
    background: #fffbeb; border-radius: 8px;
    font-size: .82rem; color: #92400e;
}
.practice-hint-label { font-weight: 600; }
.practice-hint-btn {
    margin-top: 10px; padding: 8px 14px;
    background: #fffbeb; border: 1.5px dashed #f4b13e; border-radius: 8px;
    font-size: .82rem; font-weight: 600; color: #92400e; cursor: pointer;
}
.practice-hint-btn:hover { background: #fef3c7; }
.practice-hint-used {
    display: block; margin-top: 10px; padding: 8px 12px;
    background: #f3f4f6; border-radius: 8px;
    font-size: .8rem; color: #6b7280; font-style: italic;
}

/* ── Input divider ────────────────────────────────────────── */
.practice-input-divider {
    display: flex; align-items: center; gap: 12px;
    margin: 12px 0 10px; color: var(--ink-faint); font-size: .78rem;
}
.practice-input-divider::before,
.practice-input-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--border);
}
.practice-alt-inputs {
    display: flex; flex-direction: column; gap: 10px; align-items: center;
}
.practice-alt-inputs .practice-type-form { width: 100%; }

/* ── Skip ────────────────────────────────────────────────── */
.practice-skip-btn {
    display: block; margin: 12px auto 0;
    background: none; border: none;
    color: var(--ink-faint); font-size: .8rem; cursor: pointer;
}
.practice-skip-btn:hover { color: var(--primary); }

/* ── Animations ──────────────────────────────────────────── */
@keyframes practiceSlide {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes practiceShake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-6px); }
    75%      { transform: translateX(6px); }
}
@keyframes practicePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(249,115,22,.4); }
    50%      { box-shadow: 0 0 0 12px rgba(249,115,22,0); }
}
.pulse { animation: practicePulse 1s infinite; }

/* ── Level Selector ──────────────────────────────────────── */
.practice-levels {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
    max-width: 720px; margin: 0 auto;
}
.practice-level-btn {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 16px 12px; border-radius: 14px;
    border: 2px solid var(--border); background: #fff;
    cursor: pointer; transition: all .2s;
    text-align: center;
}
.practice-level-btn:hover { border-color: var(--accent); transform: translateY(-2px); }
.practice-level-btn.is-active {
    border-color: var(--primary); background: var(--primary-light, #fef3e2);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb, 237,149,45), .15);
}
.practice-level-icon { font-size: 1.8rem; }
.practice-level-btn strong { font-size: .95rem; color: var(--ink); }
.practice-level-desc { font-size: .78rem; color: var(--ink-faint); }
.practice-level-ages {
    font-size: .7rem; color: var(--ink-faint);
    background: var(--bg-alt, #f5f0e8); padding: 2px 8px; border-radius: 8px;
    margin-top: 4px;
}
.practice-level-badge {
    display: inline-block; font-size: .65rem; font-weight: 600;
    padding: 2px 8px; border-radius: 6px; margin-left: 6px;
    vertical-align: middle;
}
.practice-level-badge.level-1 { background: #e8f5e9; color: #2e7d32; }
.practice-level-badge.level-2 { background: #fff3e0; color: #e65100; }
.practice-level-badge.level-3 { background: #fce4ec; color: #c62828; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .practice-characters { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .practice-char-emoji { font-size: 2rem; }
    .practice-char-card { padding: 14px 8px; }
    .practice-steps-grid { grid-template-columns: 1fr; }
    .practice-chat-page { height: calc(100vh - 60px); }
    .practice-chat-header { padding: 8px 12px; }
    .practice-choices { grid-template-columns: 1fr; }
    .practice-levels { grid-template-columns: 1fr; max-width: 400px; }
}
@media (max-width: 480px) {
    .practice-characters { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .practice-char-card { padding: 10px 6px; border-radius: 12px; }
    .practice-char-emoji { font-size: 1.6rem; }
    .practice-char-name { font-size: .82rem; }
    .practice-scenario-card { padding: 14px; gap: 12px; }
    .practice-scenario-icon { font-size: 1.6rem; }
    .practice-scenario-info h3 { font-size: .95rem; }
    .practice-bubble { max-width: 90%; padding: 10px 12px; }
    .practice-levels { gap: 8px; }
    .practice-level-btn { padding: 12px 8px; }
    .practice-level-icon { font-size: 1.4rem; }
}


/* =========================================================
   ✦ PREMIUM V3 — "Playground World"
   A bold, immersive kids-meets-luxury visual system.
   Decorative shapes · Organic dividers · Confident color
   CSS-only — zero HTML changes
   ========================================================= */

/* ────────────────────────────────────────────────────────────
   1. DESIGN TOKENS
   ──────────────────────────────────────────────────────────── */
:root {
    --p-shadow:       0 4px 6px rgba(31,41,55,.03), 0 12px 40px rgba(31,41,55,.07);
    --p-shadow-hover: 0 8px 16px rgba(31,41,55,.05), 0 24px 64px rgba(31,41,55,.12);
    --p-shadow-glow:  0 8px 30px rgba(249,115,22,.18);
    --p-shadow-gold:  0 8px 30px rgba(245,158,11,.2);
    --p-shadow-blue:  0 8px 30px rgba(20,184,166,.18);
    --p-ease:  cubic-bezier(.23, 1, .32, 1);
    --p-bounce: cubic-bezier(.34, 1.56, .64, 1);
    --p-grad-fire:   linear-gradient(135deg, #FB923C, #F97316, #EA580C);  /* logo orange */
    --p-grad-mint:   linear-gradient(135deg, #2DD4BF, #14B8A6, #0D9488);  /* logo K — mint→teal */
    --p-grad-sunset: linear-gradient(135deg, #F97316, #EC4899, #8B5CF6); /* logo orange→pink→purple */
    --p-grad-ocean:  linear-gradient(135deg, #14B8A6, #06B6D4, #8B5CF6); /* logo teal→cyan→purple */
    --p-grad-forest: linear-gradient(135deg, #22C55E, #14B8A6, #06B6D4); /* logo green→teal→cyan */
    --p-grad-candy:  linear-gradient(135deg, #EC4899, #8B5CF6, #6366F1); /* logo pink→purple */
    --p-grad-gold:   linear-gradient(135deg, #FBBF24, #F59E0B, #F97316); /* logo gold→orange */
    --p-grad-ink:    linear-gradient(160deg, #111827, #1F2937 50%, #374151); /* logo ink */
    --p-dot: radial-gradient(circle, var(--c-border) 1px, transparent 1px);
}

/* ────────────────────────────────────────────────────────────
   2. BODY — Subtle mesh + dot pattern
   ──────────────────────────────────────────────────────────── */
body {
    text-rendering: optimizeLegibility;
    background-color: var(--c-bg);
    background-image:
        var(--p-dot),
        radial-gradient(ellipse at 15% 50%, rgba(249,115,22,.03) 0%, transparent 60%),
        radial-gradient(ellipse at 85% 30%, rgba(139,92,246,.03) 0%, transparent 60%);
    background-size: 24px 24px, 100% 100%, 100% 100%;
    background-attachment: fixed;
}

/* ────────────────────────────────────────────────────────────
   3. HEADER — Frosted glass with personality
   ──────────────────────────────────────────────────────────── */
.site-header {
    background: rgba(255,251,245,.75);
    backdrop-filter: saturate(200%) blur(28px);
    -webkit-backdrop-filter: saturate(200%) blur(28px);
    border-bottom: 1px solid rgba(253,232,205,.4);
    box-shadow: 0 1px 0 rgba(255,255,255,.6), 0 4px 24px rgba(31,41,55,.04);
}
.header-inner { min-height: 76px; }

.brand-mark {
    background: var(--p-grad-sunset);
    box-shadow: 0 4px 16px rgba(249,115,22,.35), inset 0 2px 0 rgba(255,255,255,.3);
    border-radius: 14px;
    transition: transform .4s var(--p-bounce), box-shadow .3s;
}
.brand:hover .brand-mark {
    transform: scale(1.12) rotate(-6deg);
    box-shadow: 0 8px 28px rgba(249,115,22,.45), inset 0 2px 0 rgba(255,255,255,.3);
}

.site-nav a {
    font-weight: 600;
    transition: all .2s var(--p-ease);
    position: relative;
}
.site-nav a::after {
    content: '';
    position: absolute;
    bottom: 4px; left: 50%; right: 50%;
    height: 3px;
    border-radius: 3px;
    background: var(--p-grad-mint);
    transition: left .3s var(--p-ease), right .3s var(--p-ease);
    opacity: 0;
}
.site-nav a:hover { background: transparent; color: var(--c-primary); }
.site-nav a:hover::after { left: 12px; right: 12px; opacity: 1; }
.site-nav a.active {
    background: var(--p-grad-mint);
    color: white;
    box-shadow: 0 4px 14px rgba(20,184,166,.28), inset 0 1px 0 rgba(255,255,255,.1);
}
.site-nav a.active::after { display: none; }

.nav-dropdown-menu {
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(237,226,207,.35);
    box-shadow: 0 24px 80px rgba(31,41,55,.15);
}

.lang-switch {
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    background: rgba(255,255,255,.85);
}
.lang-switch a.active {
    background: var(--p-grad-ink);
    box-shadow: 0 2px 8px rgba(31,41,55,.2);
}

/* ────────────────────────────────────────────────────────────
   4. HERO — Vibrant playground gradient + floating shapes
   ──────────────────────────────────────────────────────────── */
.hero {
    background:
        radial-gradient(ellipse at 20% 60%, rgba(249,115,22,.12) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 25%, rgba(139,92,246,.08) 0%, transparent 45%),
        radial-gradient(ellipse at 50% 90%, rgba(20,184,166,.07) 0%, transparent 50%),
        linear-gradient(170deg, #FFFBF5 0%, #FFF0DB 25%, #FFE4C8 50%, #FFDBC4 75%, #FFE8D6 100%);
    position: relative;
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute;
    width: 800px; height: 800px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(249,115,22,.14), rgba(245,158,11,.08), transparent 70%);
    top: -300px; right: -200px;
    animation: floatOrb 18s ease-in-out infinite;
    pointer-events: none;
}
.hero::after {
    content: '';
    position: absolute;
    width: 600px; height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139,92,246,.1), rgba(20,184,166,.08), transparent 70%);
    bottom: -300px; left: -150px;
    animation: floatOrb 22s ease-in-out infinite reverse;
    pointer-events: none;
}
@keyframes floatOrb {
    0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
    25%      { transform: translate(50px, -40px) scale(1.08) rotate(5deg); }
    50%      { transform: translate(-30px, 30px) scale(.94) rotate(-3deg); }
    75%      { transform: translate(40px, 15px) scale(1.04) rotate(2deg); }
}

.slide { min-height: 600px; }

/* Distinct themed gradient per slide (shown when no photo is uploaded).
   Uses background-image longhand so an uploaded photo (inline background-image)
   cleanly overrides it while keeping the .slide cover/center sizing. */
.slide:nth-child(1) { background-image: linear-gradient(135deg, #FFF4E0 0%, #FFE4C8 45%, #FFD3BC 100%); }
.slide:nth-child(2) { background-image: linear-gradient(135deg, #FFF7E2 0%, #FFEBBE 45%, #FFDDA0 100%); }
.slide:nth-child(3) { background-image: linear-gradient(135deg, #E3F7F3 0%, #C5EEE7 45%, #ABE6DC 100%); }
.slide:nth-child(4) { background-image: linear-gradient(135deg, #FDE7F2 0%, #F1DFFB 45%, #E6D4FF 100%); }
.slide:nth-child(5) { background-image: linear-gradient(135deg, #E8F7E6 0%, #D2F0CE 45%, #BEE9B8 100%); }
.slide:nth-child(6) { background-image: linear-gradient(135deg, #E2F2F7 0%, #DCE0FB 45%, #D3D6FE 100%); }

.slide-content { padding: 100px 24px 110px; }
/* Text shadow keeps the white heading crisp over any photo */
.slide-content h1 { text-shadow: 0 2px 18px rgba(0,0,0,.4); }

/* Slider — responsive heights + a more even DARK scrim where text spans full width */
@media (max-width: 768px) {
    .slide { min-height: 480px; }
    .slide::before {
        background: linear-gradient(165deg,
            rgba(17,24,39,.62) 0%,
            rgba(17,24,39,.45) 45%,
            rgba(17,24,39,.64) 100%);
    }
    .slide-content { padding: 72px 20px 88px; }
}
@media (max-width: 480px) {
    .slide { min-height: 430px; }
}
.slide-content .eyebrow {
    background: rgba(255,255,255,.16);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.28);
    color: #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
    font-size: .82rem;
}
.slide-content h1 {
    font-size: clamp(2.8rem, 5vw + 1rem, 5rem);
    letter-spacing: -0.04em;
    line-height: 1.05;
    color: #fff;
    -webkit-text-fill-color: #fff;
}
.slide-content p {
    font-size: 1.3rem;
    line-height: 1.65;
    max-width: 500px;
}

.slider-arrow {
    width: 54px; height: 54px;
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.4);
    box-shadow: 0 4px 20px rgba(31,41,55,.08);
    transition: all .3s var(--p-ease);
}
.slider-arrow:hover {
    background: var(--c-ink);
    color: white;
    transform: translateY(-50%) scale(1.12);
    box-shadow: 0 8px 32px rgba(31,41,55,.2);
}

.slider-dots button {
    height: 5px;
    border-radius: 999px;
    transition: all .35s var(--p-bounce);
}
.slider-dots button.is-active {
    background: var(--p-grad-mint);
    width: 44px;
    box-shadow: 0 2px 10px rgba(20,184,166,.5);
}

/* ────────────────────────────────────────────────────────────
   5. PAGE HERO — Immersive dark gradient + glow orbs
   ──────────────────────────────────────────────────────────── */
.page-hero {
    background: linear-gradient(160deg, #1F2937 0%, #312E81 35%, #5B21B6 55%, #7C3AED 75%, #8B5CF6 100%);
    padding: 115px 0 95px;
    overflow: hidden;
}
.page-hero::before {
    width: 650px; height: 650px;
    background: radial-gradient(circle, rgba(249,115,22,.2), rgba(245,158,11,.12), transparent 65%);
    animation: floatOrb 20s ease-in-out infinite;
}
.page-hero::after {
    width: 550px; height: 550px;
    background: radial-gradient(circle, rgba(20,184,166,.15), rgba(34,197,94,.1), transparent 65%);
    animation: floatOrb 26s ease-in-out infinite reverse;
}
.page-hero h1 {
    font-size: clamp(2.6rem, 3.5vw + 1rem, 4rem);
    letter-spacing: -0.03em;
    text-shadow: 0 2px 12px rgba(0,0,0,.2);
}
.page-hero p {
    font-size: 1.2rem;
    color: rgba(255,255,255,.78);
    line-height: 1.7;
}
.page-hero .eyebrow {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    color: #5EEAD4;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 12px rgba(0,0,0,.1);
}
.page-hero-alt {
    background: linear-gradient(160deg, #EA580C 0%, #F97316 25%, #F59E0B 60%, #FBBF24 100%);
}

/* Brand-teal hero — the logo's K. For pages that speak as SolKids itself
   (signing up, policies), where the playful orange of the fun sections would
   be the wrong voice. Same shape as .page-hero-alt, brand colour instead. */
.page-hero-mint {
    background: linear-gradient(160deg, #0D9488 0%, #14B8A6 45%, #2DD4BF 100%);
}
.page-hero-mint::before { background: radial-gradient(closest-side, rgba(255, 255, 255, .22), transparent); }
.page-hero-mint::after  { background: radial-gradient(closest-side, rgba(255, 255, 255, .18), transparent); }

/* Category banner PHOTO (admin-managed). The photo is set inline via
   background-image; a dark scrim keeps the white heading/subtitle readable and
   the decorative orbs are hidden so the image reads cleanly on every device. */
.page-hero[data-hero-photo] {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.page-hero[data-hero-photo]::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: auto; height: auto;
    border-radius: 0;
    background: linear-gradient(180deg, rgba(17,24,39,.48) 0%, rgba(17,24,39,.66) 100%);
    animation: none;
}
.page-hero[data-hero-photo]::after { display: none; }

/* ────────────────────────────────────────────────────────────
   6. SECTION HEADINGS — Bold with gradient accent bar
   ──────────────────────────────────────────────────────────── */
.section-head h2 {
    font-size: clamp(2.2rem, 3vw + 1rem, 3.2rem);
    letter-spacing: -0.03em;
    position: relative;
}
.section-head h2::after {
    content: '';
    display: block;
    width: 64px; height: 5px;
    border-radius: 3px;
    background: linear-gradient(90deg, #2DD4BF, #14B8A6, #0D9488);
    margin: 18px auto 0;
}
.section-dark .section-head h2::after,
.section-fun .section-head h2::after {
    background: linear-gradient(90deg, #5EEAD4, #2DD4BF, #14B8A6);
}
.section-head p {
    font-size: 1.15rem;
    max-width: 560px;
    margin-left: auto; margin-right: auto;
    line-height: 1.75;
}

/* ────────────────────────────────────────────────────────────
   7. SECTIONS — Decorated backgrounds
   ──────────────────────────────────────────────────────────── */
.section { padding: 100px 0; }

.section-alt {
    background:
        radial-gradient(ellipse at 90% 10%, rgba(245,158,11,.06) 0%, transparent 50%),
        radial-gradient(ellipse at 10% 90%, rgba(20,184,166,.05) 0%, transparent 50%),
        linear-gradient(180deg, #f3e8d6 0%, #FFF5EB 30%, #FFFBF5 100%);
    position: relative;
}
.section-alt::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 80px;
    background: linear-gradient(180deg, var(--c-bg), transparent);
    pointer-events: none;
    z-index: 1;
}

.section-dark {
    background: var(--p-grad-ink);
}

/* Section with decorative dots on alternating sections */
.section:nth-of-type(even)::after {
    content: '';
    position: absolute;
    top: 20px; right: 40px;
    width: 120px; height: 120px;
    background: var(--p-dot);
    background-size: 16px 16px;
    opacity: .25;
    pointer-events: none;
}

/* ────────────────────────────────────────────────────────────
   8. BUTTONS — Bold, tactile, alive
   ──────────────────────────────────────────────────────────── */
.btn {
    font-weight: 700;
    letter-spacing: .015em;
    transition: transform .25s var(--p-bounce), box-shadow .25s var(--p-ease), background .2s;
    position: relative;
    overflow: hidden;
}
.btn::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 45%;
    background: linear-gradient(180deg, rgba(255,255,255,.22), transparent);
    pointer-events: none;
    border-radius: inherit;
}
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(0) scale(.96); }

.btn-primary {
    background: var(--p-grad-mint);
    color: white;
    box-shadow: 0 4px 14px rgba(20,184,166,.28), 0 10px 36px rgba(20,184,166,.14), inset 0 1px 0 rgba(255,255,255,.2);
    padding: 15px 32px;
    font-size: 1.02rem;
}
.btn-primary:hover {
    background: linear-gradient(135deg, #14B8A6, #0D9488, #0F766E);
    box-shadow: 0 6px 22px rgba(20,184,166,.36), 0 16px 46px rgba(13,148,136,.22);
    color: white;
}

.btn-secondary {
    background: var(--p-grad-ink);
    color: white;
    box-shadow: 0 4px 16px rgba(31,41,55,.15), inset 0 1px 0 rgba(255,255,255,.05);
}
.btn-secondary:hover {
    box-shadow: 0 8px 32px rgba(31,41,55,.22);
    color: white;
}

.btn-ghost {
    border: 2.5px solid var(--c-secondary);
    color: var(--c-secondary);
    font-weight: 700;
    transition: all .25s var(--p-ease);
}
.btn-ghost:hover {
    background: var(--p-grad-mint);
    color: white;
    border-color: transparent;
    box-shadow: 0 6px 24px rgba(20,184,166,.28);
}

.btn-accent {
    background: var(--p-grad-mint);
    color: white;
    box-shadow: 0 4px 14px rgba(20,184,166,.28), 0 10px 36px rgba(20,184,166,.14), inset 0 1px 0 rgba(255,255,255,.2);
    position: relative;
    overflow: hidden;
}
/* Commerce buttons keep the distinct gold "buy" accent */
.btn-quick-order, #cartCheckout {
    background: var(--p-grad-gold);
    box-shadow: 0 4px 14px rgba(245,158,11,.3), 0 10px 36px rgba(245,158,11,.12), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-quick-order:hover, #cartCheckout:hover {
    background: linear-gradient(135deg, #F59E0B, #F97316, #EA580C);
    box-shadow: 0 6px 20px rgba(245,158,11,.38), 0 14px 44px rgba(245,158,11,.2);
}
/* Add to Cart now uses the teal button color like the rest */
.btn-add-cart {
    background: var(--p-grad-mint);
    color: #fff;
    box-shadow: 0 4px 14px rgba(20,184,166,.28), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-add-cart:hover {
    background: linear-gradient(135deg, #14B8A6, #0D9488, #0F766E);
    color: #fff;
}
.btn-accent::after {
    content: '';
    position: absolute;
    top: -50%; left: -70%;
    width: 220%; height: 220%;
    background: linear-gradient(65deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
    animation: btnShimmer 2.8s ease-in-out infinite;
}
@keyframes btnShimmer {
    0%   { transform: translateX(-100%) rotate(20deg); }
    100% { transform: translateX(100%) rotate(20deg); }
}
.btn-accent:hover {
    box-shadow: 0 6px 20px rgba(20,184,166,.36), 0 14px 44px rgba(20,184,166,.2);
}

/* ────────────────────────────────────────────────────────────
   9. CARDS — Layered depth + colored accent
   ──────────────────────────────────────────────────────────── */
.card {
    border: 1px solid rgba(237,226,207,.3);
    box-shadow: var(--p-shadow);
    border-radius: var(--radius-xl);
    transition: transform .4s var(--p-ease), box-shadow .4s var(--p-ease), border-color .3s;
    overflow: hidden;
    position: relative;
}
.card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--p-grad-sunset);
    opacity: 0;
    transition: opacity .3s;
    z-index: 3;
}
.card:hover::after { opacity: 1; }
.card:hover {
    transform: translateY(-10px);
    box-shadow: var(--p-shadow-hover);
    border-color: transparent;
}

.card:nth-child(3n+2)::after { background: var(--p-grad-ocean); }
.card:nth-child(3n+3)::after { background: var(--p-grad-forest); }

.card-media {
    position: relative;
    overflow: hidden;
}
.card-media::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 90px;
    background: linear-gradient(to top, var(--c-bg-card) 5%, transparent);
    pointer-events: none;
    z-index: 1;
}
.card-media img {
    transition: transform .7s var(--p-ease);
}
.card:hover .card-media img { transform: scale(1.08); }

.card-tag {
    background: var(--p-grad-ink);
    box-shadow: 0 2px 10px rgba(0,0,0,.2);
    font-size: .72rem;
    letter-spacing: .07em;
    padding: 5px 12px;
}

.card-body { padding: 22px 26px 28px; }

.card-title {
    font-size: 1.22rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.price {
    font-size: 1.4rem;
    font-weight: 800;
    background: var(--p-grad-fire);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.btn-wishlist {
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.5);
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
    width: 40px; height: 40px;
    transition: transform .3s var(--p-bounce), box-shadow .25s;
}
.btn-wishlist:hover {
    transform: scale(1.2);
    box-shadow: 0 6px 20px rgba(0,0,0,.12);
    background: white;
}

/* ────────────────────────────────────────────────────────────
   10. SERVICE CARDS — Premium depth + animated accent
   ──────────────────────────────────────────────────────────── */
.svc-card {
    border: 1px solid rgba(237,226,207,.25);
    box-shadow: var(--p-shadow);
    border-radius: var(--radius-xl);
    transition: all .4s var(--p-ease);
    position: relative;
    overflow: hidden;
}
.svc-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--p-grad-sunset);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s var(--p-ease);
}
.svc-card:hover::before { transform: scaleX(1); }
.svc-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--p-shadow-hover);
    border-color: transparent;
}
.svc-card:nth-child(3n+2)::before { background: var(--p-grad-ocean); }
.svc-card:nth-child(3n+3)::before { background: var(--p-grad-forest); }

.svc-card-icon-wrap {
    background: var(--p-grad-sunset);
    box-shadow: 0 8px 28px rgba(249,115,22,.3), inset 0 2px 0 rgba(255,255,255,.25);
    border-radius: 24px;
    width: 80px; height: 80px;
    transition: transform .4s var(--p-bounce);
}
.svc-card:hover .svc-card-icon-wrap {
    transform: scale(1.12) rotate(-6deg);
}
.svc-card:nth-child(3n+2) .svc-card-icon-wrap {
    background: var(--p-grad-ocean);
    box-shadow: 0 8px 28px rgba(99,102,241,.25), inset 0 2px 0 rgba(255,255,255,.2);
}
.svc-card:nth-child(3n+3) .svc-card-icon-wrap {
    background: var(--p-grad-forest);
    box-shadow: 0 8px 28px rgba(16,185,129,.25), inset 0 2px 0 rgba(255,255,255,.2);
}

.svc-card-features li::before {
    color: var(--c-success);
    font-weight: 900;
}
.svc-card-price {
    font-weight: 800;
}

/* Stats bar — bold banded gradient */
.svc-stats {
    background: linear-gradient(135deg, #F97316 0%, #EC4899 50%, #8B5CF6 100%);
    position: relative;
    overflow: hidden;
}
.svc-stats::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.1) 0%, transparent 40%, rgba(0,0,0,.05) 100%);
    pointer-events: none;
}
.svc-stat-num {
    font-size: 2.6rem; font-weight: 900;
    text-shadow: 0 2px 4px rgba(0,0,0,.1);
}

/* ────────────────────────────────────────────────────────────
   11. SERVICE ICON CARDS (homepage)
   ──────────────────────────────────────────────────────────── */
.service-card .service-icon {
    border-radius: 22px;
    width: 66px; height: 66px;
    box-shadow: 0 8px 24px rgba(0,0,0,.15), inset 0 2px 0 rgba(255,255,255,.2);
    transition: transform .4s var(--p-bounce);
}
.service-card:hover .service-icon {
    transform: scale(1.12) rotate(-6deg);
}

/* ────────────────────────────────────────────────────────────
   12. ACTIVITY CARDS
   ──────────────────────────────────────────────────────────── */
.activity-card {
    box-shadow: var(--p-shadow);
    border: 1px solid rgba(237,226,207,.25);
    border-radius: var(--radius-xl);
    transition: all .35s var(--p-ease);
    position: relative;
    overflow: hidden;
}
.activity-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--p-grad-gold);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .35s var(--p-ease);
}
.activity-card:hover::before { transform: scaleX(1); }
.activity-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--p-shadow-hover);
}
.activity-card .icon-circle {
    width: 82px; height: 82px;
    font-size: 2.5rem;
    box-shadow: 0 8px 28px rgba(0,0,0,.15), inset 0 2px 0 rgba(255,255,255,.2);
    transition: transform .4s var(--p-bounce);
}
.activity-card:hover .icon-circle {
    transform: scale(1.14) rotate(-6deg);
}

/* ────────────────────────────────────────────────────────────
   13. FUN SECTION — Deep space + glowing cards
   ──────────────────────────────────────────────────────────── */
.section-fun {
    background: linear-gradient(170deg, #111827 0%, #1F2937 20%, #312E81 50%, #4C1D95 75%, #5B21B6 100%);
}
.section-fun::before {
    background:
        radial-gradient(circle at 8% 75%, rgba(249,115,22,.08) 0%, transparent 35%),
        radial-gradient(circle at 88% 12%, rgba(20,184,166,.1) 0%, transparent 35%),
        radial-gradient(circle at 45% 50%, rgba(245,158,11,.05) 0%, transparent 45%),
        radial-gradient(circle at 25% 25%, rgba(34,197,94,.07) 0%, transparent 30%),
        radial-gradient(circle at 70% 80%, rgba(236,72,153,.06) 0%, transparent 30%);
}

.section-fun .fun-cat-card {
    background: rgba(255,255,255,.04);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.06);
    transition: all .35s var(--p-ease);
}
.section-fun .fun-cat-card:hover {
    background: rgba(255,255,255,.1);
    border-color: var(--cat-color, rgba(255,255,255,.2));
    box-shadow: 0 16px 56px rgba(0,0,0,.35), 0 0 80px color-mix(in srgb, var(--cat-color, #fbbf24) 15%, transparent);
    transform: translateY(-8px) scale(1.02);
}
.section-fun .fun-cat-icon {
    width: 82px; height: 82px;
    font-size: 2.3rem;
    background: rgba(255,255,255,.06);
    box-shadow: 0 4px 24px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08);
}
.section-fun .fun-cat-card:hover .fun-cat-icon {
    background: rgba(255,255,255,.1);
    box-shadow: 0 8px 32px rgba(0,0,0,.3), 0 0 40px color-mix(in srgb, var(--cat-color, #fbbf24) 10%, transparent);
}
.section-fun .fun-cat-count {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.08);
}
.section-fun .btn-ghost {
    border-color: rgba(255,255,255,.2);
}
.section-fun .btn-ghost:hover {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.4);
    color: white;
    box-shadow: 0 4px 20px rgba(255,255,255,.06);
}

/* ────────────────────────────────────────────────────────────
   14. FUN CAT CARDS (light context)
   ──────────────────────────────────────────────────────────── */
.fun-cat-card {
    box-shadow: var(--p-shadow);
    border: 2px solid transparent;
    border-radius: var(--radius-xl);
    transition: all .35s var(--p-ease);
}
.fun-cat-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--p-shadow-hover);
}
.fun-cat-icon {
    width: 82px; height: 82px;
    font-size: 2.3rem;
    transition: transform .4s var(--p-bounce);
}
.fun-cat-card:hover .fun-cat-icon {
    transform: scale(1.16) rotate(-8deg);
}
.fun-cat-count {
    font-weight: 800;
    letter-spacing: .04em;
}

/* ────────────────────────────────────────────────────────────
   15. EVENT DATE PILL
   ──────────────────────────────────────────────────────────── */
.event-date-pill {
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.5);
    box-shadow: 0 4px 20px rgba(0,0,0,.1);
    border-radius: 16px;
}
.event-date-pill .day { font-size: 1.6rem; }

/* ────────────────────────────────────────────────────────────
   16. CATEGORY CHIPS
   ──────────────────────────────────────────────────────────── */
.prod-cat-chip {
    transition: all .25s var(--p-ease);
    box-shadow: 0 2px 6px rgba(0,0,0,.04);
    font-weight: 700;
}
.prod-cat-chip:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(249,115,22,.1);
    background: white;
    border-color: var(--c-primary);
}
.prod-cat-chip.is-active {
    background: var(--p-grad-ink);
    color: white;
    border-color: transparent;
    box-shadow: 0 6px 22px rgba(31,41,55,.2);
}

/* ────────────────────────────────────────────────────────────
   17. EYEBROW
   ──────────────────────────────────────────────────────────── */
.eyebrow {
    background: linear-gradient(135deg, rgba(20,184,166,.12), rgba(20,184,166,.04));
    border: 1px solid rgba(20,184,166,.16);
    font-weight: 700;
    letter-spacing: .05em;
    box-shadow: 0 2px 8px rgba(20,184,166,.06);
}

/* ────────────────────────────────────────────────────────────
   18. STEPS / HOW IT WORKS
   ──────────────────────────────────────────────────────────── */
.step {
    box-shadow: var(--p-shadow);
    border: 1px solid rgba(237,226,207,.25);
    border-radius: var(--radius-xl);
    transition: all .35s var(--p-ease);
}
.step:hover {
    transform: translateY(-8px);
    box-shadow: var(--p-shadow-hover);
}
.step-num {
    border-radius: 22px;
    width: 72px; height: 72px;
    font-size: 2.1rem;
    box-shadow: var(--p-shadow-glow), inset 0 2px 0 rgba(255,255,255,.2);
}

/* "How it works in detail" CTA under the homepage steps */
.how-cta {
    text-align: center;
    margin-top: 44px;
}
.how-cta .btn {
    background: transparent;
    color: var(--c-secondary);
    border: 2px solid var(--c-secondary);
    padding: 14px 34px;
}
.how-cta .btn:hover {
    background: var(--p-grad-mint);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 14px rgba(20,184,166,.3);
}

/* ────────────────────────────────────────────────────────────
   18b. HOW-IT-WORKS DETAIL PAGE (si-funksionon.php)
   ──────────────────────────────────────────────────────────── */
.howto-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 780px;
    margin: 0 auto;
}
.howto-item {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    background: var(--c-bg-card);
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius-lg);
    padding: 26px 28px;
    box-shadow: var(--shadow-sm);
    transition: transform .25s var(--p-ease, ease), box-shadow .25s var(--p-ease, ease);
}
.howto-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.howto-num {
    flex: 0 0 auto;
    width: 56px; height: 56px;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-weight: 700; font-size: 1.5rem;
    color: #fff;
    box-shadow: var(--shadow-glow);
}
.howto-item:nth-child(1) .howto-num { background: var(--p-grad-fire); }
.howto-item:nth-child(2) .howto-num { background: var(--p-grad-ocean); }
.howto-item:nth-child(3) .howto-num { background: var(--p-grad-forest); }
.howto-item:nth-child(4) .howto-num { background: var(--p-grad-gold); }
.howto-item:nth-child(5) .howto-num { background: var(--p-grad-candy); }
.howto-item:nth-child(6) .howto-num { background: var(--p-grad-sunset); }
.howto-body h2,
.howto-body h3 {
    margin: 3px 0 8px;
    font-size: 1.2rem;
    font-family: var(--font-display);
    color: var(--c-ink);
}
.howto-body p {
    margin: 0;
    color: var(--c-ink-soft);
    line-height: 1.7;
}

/* FAQ accordion (native <details>) */
.howto-faq {
    max-width: 780px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.howto-faq details {
    background: var(--c-bg-card);
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius-md);
    padding: 4px 20px;
    box-shadow: var(--shadow-xs);
    transition: box-shadow .2s ease;
}
.howto-faq details[open] {
    box-shadow: var(--shadow-sm);
    border-color: var(--c-border);
}
.howto-faq summary {
    cursor: pointer;
    list-style: none;
    padding: 16px 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--c-ink);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.howto-faq summary::-webkit-details-marker { display: none; }
.howto-faq summary::after {
    content: '+';
    font-size: 1.5rem;
    line-height: 1;
    color: var(--c-primary);
    transition: transform .2s ease;
    flex: 0 0 auto;
}
.howto-faq details[open] summary::after { transform: rotate(45deg); }
.howto-faq details p {
    margin: 0 0 18px;
    color: var(--c-ink-soft);
    line-height: 1.7;
}

@media (max-width: 480px) {
    .howto-item {
        padding: 18px 18px;
        gap: 16px;
        border-radius: var(--radius-md);
    }
    .howto-num {
        width: 46px; height: 46px;
        font-size: 1.2rem;
        border-radius: 13px;
    }
    .howto-body h2,
    .howto-body h3 { font-size: 1.05rem; }
    .howto-body p { font-size: .9rem; }
    .how-cta .btn { width: 100%; }
    .howto-faq summary { font-size: .95rem; }
}

/* ────────────────────────────────────────────────────────────
   19. FOOTER — Deep, rich, animated
   ──────────────────────────────────────────────────────────── */
.site-footer {
    background: linear-gradient(180deg, #1F2937 0%, #111827 60%, #0F172A 100%);
    margin-top: 0;
    position: relative;
}
.site-footer::before {
    height: 4px;
    background: linear-gradient(90deg,
        #F97316, #F59E0B, #22C55E,
        #14B8A6, #EC4899, #8B5CF6, #F97316);
    background-size: 400% 100%;
    animation: rainbowSlide 8s linear infinite;
}
@keyframes rainbowSlide {
    0%   { background-position: 0% 50%; }
    100% { background-position: 400% 50%; }
}

.footer-grid { padding: 96px 24px 56px; }

.footer-col h4 {
    font-size: 1.1rem;
    position: relative;
    padding-bottom: 16px;
    margin-bottom: 22px;
}
.footer-col h4::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 30px; height: 3px;
    border-radius: 2px;
    background: var(--p-grad-mint);
}

.footer-links a {
    transition: all .2s var(--p-ease);
    display: inline-block;
    padding: 3px 0;
}
.footer-links a:hover {
    color: white;
    transform: translateX(5px);
}

.footer-tag { opacity: .65; line-height: 1.75; }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.05);
    padding: 24px 0;
}

/* ────────────────────────────────────────────────────────────
   20. MODAL
   ──────────────────────────────────────────────────────────── */
.modal-overlay {
    background: rgba(17,24,39,.6);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.modal-card {
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 32px 100px rgba(0,0,0,.3), 0 8px 32px rgba(0,0,0,.15);
    border-radius: var(--radius-xl);
}
@keyframes pop {
    from { transform: scale(.88) translateY(24px); opacity: 0; }
    to   { transform: scale(1) translateY(0); opacity: 1; }
}

/* ────────────────────────────────────────────────────────────
   21. FAB CART
   ──────────────────────────────────────────────────────────── */
.fab-cart {
    box-shadow: 0 8px 32px rgba(249,115,22,.3), 0 4px 12px rgba(249,115,22,.15);
    transition: transform .3s var(--p-bounce), box-shadow .3s;
}
.fab-cart:hover {
    transform: scale(1.14);
    box-shadow: 0 12px 44px rgba(249,115,22,.35), 0 6px 18px rgba(249,115,22,.2);
}

/* ────────────────────────────────────────────────────────────
   22. FORMS
   ──────────────────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"],
textarea,
select {
    border-radius: var(--radius-sm);
    border: 2px solid var(--c-border);
    padding: 14px 18px;
    transition: border-color .2s, box-shadow .2s, background .2s;
    background: white;
    font-size: .95rem;
}
input:focus, textarea:focus, select:focus {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 4px rgba(249,115,22,.08);
    outline: none;
    background: #fffbf7;
}

/* ────────────────────────────────────────────────────────────
   23. FLASH MESSAGES
   ──────────────────────────────────────────────────────────── */
.flash {
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0,0,0,.05);
    animation: flashSlide .4s var(--p-ease) both;
}
@keyframes flashSlide {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ────────────────────────────────────────────────────────────
   24. BLOG / POST CARDS
   ──────────────────────────────────────────────────────────── */
.post-card .card-media { aspect-ratio: 16 / 9; }
.post-meta {
    font-weight: 600;
    color: var(--c-primary);
    opacity: .75;
}

/* ────────────────────────────────────────────────────────────
   25. SCROLLBAR
   ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--c-bg); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--c-border), var(--c-ink-faint));
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--c-ink-soft); }

/* ────────────────────────────────────────────────────────────
   26. SELECTION + FOCUS
   ──────────────────────────────────────────────────────────── */
::selection {
    background: rgba(249,115,22,.15);
    color: var(--c-ink);
}
:focus-visible {
    outline: 3px solid rgba(249,115,22,.35);
    outline-offset: 2px;
}

/* ────────────────────────────────────────────────────────────
   27. SMOOTH SCROLL
   ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* ────────────────────────────────────────────────────────────
   28. RESPONSIVE
   ──────────────────────────────────────────────────────────── */
@media (max-width: 1249px) {
    .site-nav a::after { display: none; }
    .site-nav.is-open {
        background: rgba(255,255,255,.97);
        backdrop-filter: blur(32px);
        -webkit-backdrop-filter: blur(32px);
        box-shadow: 0 24px 80px rgba(31,41,55,.12);
    }
    .site-nav a:hover { background: var(--c-bg-soft); color: var(--c-ink); }
}

@media (max-width: 480px) {
    .section { padding: 72px 0; }
    .card { border-radius: var(--radius-lg); }
    .card-body { padding: 18px 20px 22px; }
    .svc-card { border-radius: var(--radius-lg); }
    .slide-content h1 { line-height: 1.1; }
    .slide-content { padding: 72px 20px 80px; }
    .section-head h2::after { width: 44px; height: 4px; }
    .page-hero { padding: 80px 0 64px; }

    /* How-it-works: compact 2-col cards with clamped teaser text.
       Full detail lives on si-funksionon.php (linked via .how-cta). */
    .steps {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .step {
        padding: 18px 14px 16px;
        border-radius: var(--radius-md);
    }
    .step-num {
        width: 42px; height: 42px;
        font-size: 1.15rem;
        border-radius: 13px;
        margin-bottom: 12px;
    }
    .step h3 {
        font-size: .98rem;
        margin-bottom: 5px;
    }
    .step p {
        font-size: .8rem;
        line-height: 1.45;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* ── FOOTER MOBILE PREMIUM ── */
    .site-footer {
        margin-top: 0;
    }
    .site-footer::before {
        height: 3px;
    }
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 48px 24px 24px;
        text-align: center;
    }
    .footer-col-brand {
        grid-column: 1;
        padding-bottom: 28px;
        margin-bottom: 28px;
        border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .footer-col-brand .brand {
        justify-content: center;
    }
    .footer-col-brand .brand-mark {
        width: 48px;
        height: 48px;
    }
    /* Wide logo image keeps its aspect ratio — don't squish into a square */
    .footer-col-brand .brand img,
    .footer-col-brand .brand-logo,
    .footer-col-brand .brand-svg {
        width: auto;
        height: 46px;
        max-width: 190px;
    }
    .footer-tag {
        font-size: .88rem;
        margin: 12px auto 0;
        max-width: 280px;
        opacity: .55;
    }

    .footer-col-contact {
        padding: 24px 0;
        border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .footer-col-contact h4 {
        margin-bottom: 16px;
    }
    .footer-col-contact h4::after {
        left: 50%;
        transform: translateX(-50%);
    }
    .footer-col-contact p {
        font-size: .88rem;
        margin: 8px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    .footer-col-contact a {
        font-size: .88rem;
    }

    .footer-col-links {
        padding: 24px 0;
        border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .footer-col-links h4 {
        margin-bottom: 16px;
    }
    .footer-col-links h4::after {
        left: 50%;
        transform: translateX(-50%);
    }
    .footer-links {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px 12px;
    }
    .footer-links li {
        margin: 0;
    }
    .footer-links a {
        font-size: .88rem;
        padding: 8px 0;
        display: block;
    }
    .footer-links a:hover {
        transform: none;
    }

    .footer-col-socials {
        grid-column: 1;
        padding: 24px 0 8px;
    }
    .footer-col-socials h4 {
        margin-bottom: 16px;
    }
    .footer-col-socials h4::after {
        left: 50%;
        transform: translateX(-50%);
    }
    .footer-col-socials .socials {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
    }
    .footer-col-socials .socials li {
        margin: 0;
    }
    .footer-col-socials .socials a {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 10px 16px;
        border-radius: 999px;
        background: rgba(255,255,255,.06);
        border: 1px solid rgba(255,255,255,.1);
        font-size: .82rem;
        font-weight: 500;
        transition: all .2s ease;
    }
    .footer-col-socials .socials a:hover {
        background: var(--c-primary);
        color: white;
        border-color: var(--c-primary);
    }

    .footer-disclaimer {
        padding: 20px 24px;
        border-top: 1px solid rgba(255,255,255,.06);
    }
    .footer-disclaimer p {
        font-size: .7rem;
        line-height: 1.65;
        text-align: center;
        color: rgba(255,255,255,.3);
    }

    .footer-bottom {
        padding: 20px 24px;
        border-top: 1px solid rgba(255,255,255,.06);
    }
    .footer-bottom .container {
        flex-direction: column;
        align-items: center;
        gap: 14px;
        text-align: center;
    }
    .footer-bottom span {
        font-size: .82rem;
        color: rgba(255,255,255,.5);
    }
    .footer-legal-links {
        justify-content: center;
        gap: 6px 14px;
    }
    .footer-legal-links a {
        font-size: .78rem;
        padding: 4px 0;
    }
    .admin-link {
        font-size: .72rem;
        opacity: .25;
    }
}


/* ----------------------------------------------------------
   Pyetja e familjes — e vetmja faqe qe te kerkon te mbyllesh ekranin.
   Prandaj eshte e madhe dhe bosh: nje pyetje, nje buton.
   ---------------------------------------------------------- */
.fq-card { background: linear-gradient(160deg,#0D9488,#14B8A6 55%,#2DD4BF); color:#fff;
  border-radius: var(--radius-lg); padding: 30px 28px; box-shadow: 0 14px 34px rgba(13,148,136,.22); }
.fq-card.is-done { background: linear-gradient(160deg,#334155,#475569); }
.fq-dir { display:inline-block; font-size:.76rem; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; background:rgba(255,255,255,.2); padding:5px 12px; border-radius:99px; }
.fq-text { font-size:1.5rem; line-height:1.35; font-weight:800; margin:16px 0 12px; }
.fq-hint, .fq-done { font-size:.92rem; color:rgba(255,255,255,.9); margin:0 0 16px; }
.fq-card textarea { width:100%; border-radius:10px; border:1px solid rgba(255,255,255,.3);
  background:rgba(0,0,0,.15); color:#fff; padding:11px 13px; font-size:.92rem; margin-bottom:12px; }
.fq-card textarea::placeholder { color:rgba(255,255,255,.6); }
.fq-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:16px; }
.fq-stats div { background:var(--c-bg-card); border:1px solid var(--c-border); border-radius:12px;
  padding:14px; text-align:center; }
.fq-stats strong { display:block; font-size:1.4rem; font-weight:800; color:var(--c-primary); }
.fq-stats span { font-size:.78rem; color:var(--c-ink-soft); }
@media (max-width:480px){ .fq-text{font-size:1.25rem} }

/* ----------------------------------------------------------
   LIBRI I PËRRALLAVE
   Përralla lexohej si faqe interneti: tekst i thatë, gjerësi e plotë, pa
   frymë. Askush s'ulet ta lexojë atë. Këtu bëhet libër — letër e ngrohtë,
   shkronjë me serif, rreshta të gjerë, dhe ilustrime që e ndajnë historinë.
   ---------------------------------------------------------- */
.storybook {
    max-width: 660px;               /* ~65 karaktere për rresht — gjatësia që lexohet pa lodhur syrin */
    margin: 0 auto;
    padding: 44px 40px 36px;
    background:
        radial-gradient(ellipse at top, rgba(255,255,255,.9), transparent 60%),
        linear-gradient(175deg, #FFFBF4 0%, #FDF6E9 100%);
    border: 1px solid #EFE3CE;
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(120,90,40,.05), 0 18px 46px rgba(120,90,40,.10);
    position: relative;
}
/* Kurrizi i librit — sugjeron letër të palosur, pa u bërë imitim i lirë */
.storybook::before {
    content: ""; position: absolute; left: 14px; top: 18px; bottom: 18px; width: 2px;
    background: linear-gradient(180deg, transparent, rgba(180,140,80,.18), transparent);
    border-radius: 2px;
}
.storybook p {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.14rem;
    line-height: 1.9;               /* frymë mes rreshtave — kjo është gjysma e leximit */
    color: #3B3128;
    margin: 0 0 1.35em;
    text-align: justify;
    hyphens: auto;
}
/* Shkronja e madhe e hapjes — sinjali që kjo është përrallë, jo artikull */
.storybook-open::first-letter {
    float: left;
    font-family: Georgia, serif;
    font-size: 3.5rem;
    line-height: .84;
    font-weight: 700;
    color: var(--c-primary, #14B8A6);
    padding: 6px 12px 0 0;
}
.storybook-hero, .storybook-fig { margin: 0 0 1.6em; }
.storybook-fig { margin: 1.8em 0; }
.storybook-hero img, .storybook-fig img {
    width: 100%; height: auto; display: block;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(120,90,40,.16);
}
.storybook-end {
    text-align: center; margin: 2.2em 0 0 !important;
    font-family: Georgia, serif; font-style: italic;
    color: #A08A63 !important; font-size: 1rem !important;
}
.storybook-end span {
    display: inline-block; padding: 0 18px;
    border-top: 1px solid #E8DAC0; padding-top: 14px;
}
@media (max-width: 640px) {
    .storybook { padding: 30px 22px 26px; border-radius: 14px; }
    .storybook::before { display: none; }
    .storybook p { font-size: 1.06rem; line-height: 1.85; text-align: left; }
    .storybook-open::first-letter { font-size: 2.9rem; }
}

/* ══════════════════════════════════════════════════════════════════════
   FLIP-BOOK — libri që kthen fletë
   ══════════════════════════════════════════════════════════════════════ */

.fb-section { padding-top: 24px; }

.fb-crumbs { margin-bottom: 18px; }
.fb-crumbs a { color: var(--c-muted, #6b7280); text-decoration: none; font-size: .93rem; }
.fb-crumbs a:hover { color: var(--c-primary); }

.fb { max-width: 1040px; margin: 0 auto; }

/* Skena mban thellësinë; pa perspektivë kthimi duket i sheshtë, si letër e prerë. */
.fb-stage {
    position: relative;
    perspective: 2200px;
    aspect-ratio: 3 / 4;
    margin: 0 auto;
    max-width: 560px;
}
/* `width: 100%` duhet i shprehur: pa të, `min-height` bashkë me `aspect-ratio`
   e rrit GJERËSINË (900px mbi një ekran 768px) dhe faqja del me rrëshqitje
   anash. Me gjerësinë të fiksuar, raporti prek vetëm lartësinë — dhe kufiri
   i poshtëm e mban faqen aq të lartë sa numri poshtë të mos pritet në tablet. */
.fb.is-spread .fb-stage {
    width: 100%;
    max-width: 1040px;
    aspect-ratio: 3 / 2;
    min-height: 600px;
}

.fb-book { position: absolute; inset: 0; transform-style: preserve-3d; }

/* Hija poshtë librit — pa të, libri duket i ngjitur mbi faqe. */
.fb-book::after {
    content: '';
    position: absolute;
    left: 6%; right: 6%; bottom: -18px; height: 26px;
    background: radial-gradient(ellipse at center, rgba(0,0,0,.28), transparent 72%);
    z-index: 0; pointer-events: none;
}

/* ── Fleta ─────────────────────────────────────────────────────────── */

.fb-leaf {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    transform-origin: left center;
    transform-style: preserve-3d;
    transition: transform .78s cubic-bezier(.36, .18, .28, 1);
}
.fb.is-spread .fb-leaf { left: 50%; width: 50%; }
.fb-leaf.turned { transform: rotateY(-180deg); }

/* Kush ka çaktivizuar lëvizjet nuk duhet detyruar t'i shohë. */
.fb.no-motion .fb-leaf { transition: none; }

.fb-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: hidden;
    border-radius: 4px 12px 12px 4px;
}
.fb-face-back { transform: rotateY(180deg); border-radius: 12px 4px 4px 12px; }

/* Ana që rri e kthyer nga ana tjetër fshihet nga syri me `backface-visibility`,
   por jo nga miu: ajo vazhdon t'i kapë klikimet dhe bllokon çdo buton apo link
   që ndodhet pas saj — pikërisht ata të kopertinës së fundit. */
.fb-leaf:not(.turned) .fb-face-back  { pointer-events: none; }
.fb-leaf.turned       .fb-face-front { pointer-events: none; }

/* Në një faqe të vetme s'ka anë të pasme për të lexuar — mbetet letra bosh. */
.fb:not(.is-spread) .fb-face-back { background: #f6efdd; }

.fb-page { position: absolute; inset: 0; display: flex; flex-direction: column; }

/* ── Letra ─────────────────────────────────────────────────────────── */

.fb-paper {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 40px 38px 42px;
    background: var(--paper, linear-gradient(178deg, #fffdf6 0%, #fdf6e4 58%, #f7ecd4 100%));
    color: var(--paper-ink, #3b2d1a);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
}

/* Titulli që lexohet nga programet e ekranit dhe nga Google, por nuk shihet —
   për kopertinat ku titulli është tashmë i vizatuar brenda figurës. */
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

/* ── Skena e faqes ────────────────────────────────────────────────────
   Elementet rrinë vetëm në brezin rreth buzëve; qendra i lihet tekstit.
   Zbutja e lehtë i bën të duken të vizatuara mbi letër e jo të ngjitura. */

.fb-scene {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.fb-scene-el {
    position: absolute;
    display: block;
    filter: blur(.4px);
}
.fb-scene-el svg { display: block; width: 100%; height: auto; }

/* Kur skena është ndezur, teksti fiton pak peshë që të mos humbasë mbi ngjyrë. */
.fb-paper:has(.fb-scene) .fb-text p { color: var(--paper-ink); }

/* ── Korniza e faqes ──────────────────────────────────────────────────
   Vizatohet vetëm një qoshe dhe rrotullohet katër herë; kështu korniza rri
   e njëjtë në çdo cep dhe nuk shtrembërohet kur faqja ndryshon përmasë. */

.fb-frame {
    position: absolute;
    inset: 16px;
    pointer-events: none;
    color: var(--paper-trim, #c9a961);
    opacity: .75;
}
/* Ngjyra dhe rrumbullakimi rrinë këtu; stilin dhe trashësinë e vijës i sjell
   vetë korniza, që një kornizë e re të mos kërkojë rresht të ri te CSS-ja. */
.fb-frame { border-color: currentColor; border-radius: 3px; }

.fb-corner { position: absolute; }
/* Qosha e vizatuar është ajo lart-majtas; të tjerat janë e njëjta e rrotulluar. */
.fb-corner:nth-child(1) { top: -1px;    left: -1px; }
.fb-corner:nth-child(2) { top: -1px;    right: -1px;  transform: rotate(90deg); }
.fb-corner:nth-child(3) { bottom: -1px; right: -1px;  transform: rotate(180deg); }
.fb-corner:nth-child(4) { bottom: -1px; left: -1px;   transform: rotate(270deg); }

/* Qoshet dhe skena duhen mbi letrën por poshtë tekstit, që të mos bllokojnë
   përzgjedhjen. Të dyja duhen përjashtuar nga `position: relative` — kur skena
   e humbi `absolute`, ajo u rrafshua në lartësi zero dhe `overflow: hidden` i
   preu të gjitha elementet, ndaj faqja dukej krejt bosh. */
.fb-paper > .fb-frame,
.fb-paper > .fb-scene { z-index: 0; }

/* `.fb-fig-full` përjashtohet bashkë me to: ajo duhet të mbetet absolute për
   të mbuluar gjithë letrën. Kur e kapte ky rregull, figura kthehej në rrjedhë
   dhe mbulonte vetëm gjysmën e faqes. */
.fb-paper > *:not(.fb-frame):not(.fb-scene):not(.fb-fig-full):not(.fb-fig-bg) {
    position: relative;
    z-index: 1;
}
.fb-paper > .fb-fig-full { z-index: 1; }

/* Hija e kurrizit: ana ku letra futet te lidhja e librit. */
.fb-face-front .fb-paper { box-shadow: inset 14px 0 26px -18px rgba(90, 60, 20, .55); }
.fb-face-back  .fb-paper { box-shadow: inset -14px 0 26px -18px rgba(90, 60, 20, .55); }
.fb:not(.is-spread) .fb-paper { box-shadow: inset 0 0 30px -18px rgba(90, 60, 20, .5); }

.fb-heading {
    font-family: var(--paper-font, 'Fraunces', Georgia, serif);
    font-size: calc(1.42rem * var(--paper-size, 1));
    line-height: 1.28;
    color: var(--paper-ink, #4a3418);
    margin: 0 0 .7em;
    text-align: center;
}
.fb-heading::after {
    content: '';
    display: block;
    width: 46px; height: 2px;
    margin: .5em auto 0;
    background: linear-gradient(90deg, transparent, var(--paper-trim, #c9a961), transparent);
}

/* Teksti mban gjithë hapësirën që mbetet dhe e shpërndan sipas `valign` —
   pa këtë, një faqe me katër paragrafë linte një bosh të madh poshtë. */
.fb-text { flex: 1; display: flex; flex-direction: column; }
.fb-va-center .fb-text { justify-content: center; }
.fb-va-top    .fb-text { justify-content: flex-start; }

.fb-text p {
    font-family: var(--paper-font, Georgia, 'Times New Roman', serif);
    font-size: calc(1.04rem * var(--paper-size, 1));
    line-height: 1.78;
    color: var(--paper-ink, #3b2d1a);
    margin: 0 0 1.05em;
    text-align: justify;
    hyphens: auto;
}
.fb-text p:last-child { margin-bottom: 0; }

.fb-al-left    .fb-text p { text-align: left;    hyphens: none; }
.fb-al-center  .fb-text p { text-align: center;  hyphens: none; }
.fb-al-justify .fb-text p { text-align: justify; hyphens: auto; }
.fb-open::first-letter {
    float: left;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 3.1rem;
    line-height: .82;
    padding: .06em .1em 0 0;
    color: #a8763a;
}

.fb-fig { margin: 0 0 1.2em; }
.fb-fig img {
    width: 100%; height: auto; display: block;
    border-radius: 8px;
    object-fit: var(--img-fit, cover);
    object-position: var(--img-pos, center);
}
/* Fotoja që mbush gjerësinë del jashtë hapësirës së letrës, ndaj i kthen
   mbrapsht saktësisht aq sa është ajo hapësirë. */
/* Fotoja që mbush faqen mbulon gjithë letrën, pa u varur nga hapësirat e saj.
   Me margjina negative do të duhej një vlerë tjetër për çdo ekran, dhe në
   telefon mbetej gjithnjë një rrip letre i pambuluar poshtë. */
.fb-fig-full {
    position: absolute;
    inset: 0;
    margin: 0;
}
.fb-fig-full img { border-radius: 0; width: 100%; height: 100%; }

/* Fotoja sipër tekstit merr një pjesë të caktuar të faqes dhe jo më shumë —
   pa kufi, një ilustrim i gjatë e nxjerr gjithë përrallën jashtë faqes. */
.fb-fig-top { flex: none; height: 32%; }
.fb-fig-top img { height: 100%; }
.fb-fig-side {
    float: right; width: 42%; margin: 0 0 .8em 1.1em;
}
.fb-fig-side img { border-radius: 8px; }

/* ── Fotoja si skicë ──────────────────────────────────────────────────
   Një fotografi e plotë mbi një faqe me vizatime pastel duket e ngjitur nga
   jashtë. Maska e tret drejtkëndëshin dhe ngjyrat qetësohen: fotoja pushon së
   dukuri fotografi dhe fillon të duket vizatim i vetë faqes. */

.fb-fig.is-sketch img {
    border-radius: 0;
    filter: saturate(.55) contrast(.86) brightness(1.12);
    opacity: .8;
    -webkit-mask-image: radial-gradient(ellipse 74% 70% at 50% 48%, #000 42%, transparent 100%);
            mask-image: radial-gradient(ellipse 74% 70% at 50% 48%, #000 42%, transparent 100%);
}

.fb-fig.is-soft img {
    filter: saturate(.68) contrast(.9) brightness(1.08);
    opacity: .88;
}

/* Aq e zbehtë sa mbi të shkruhet lirshëm. */
.fb-fig.is-faded img {
    border-radius: 0;
    filter: saturate(.4) brightness(1.2) contrast(.82);
    opacity: .26;
    -webkit-mask-image: radial-gradient(ellipse 84% 80% at 50% 50%, #000 40%, transparent 100%);
            mask-image: radial-gradient(ellipse 84% 80% at 50% 50%, #000 40%, transparent 100%);
}

/* ── Fotoja si sfond i faqes ──────────────────────────────────────────
   Rri poshtë tekstit dhe mbulon gjithë letrën. Zbehja këtu nuk është zgjedhje
   estetike por kusht: mbi të shkruhet, dhe një fëmijë duhet ta lexojë atë që
   shkruhet. Prandaj `bg` e detyron zbehjen edhe kur stili thotë ndryshe. */

.fb-fig-bg {
    position: absolute;
    inset: 0;
    margin: 0;
    z-index: 0;
    pointer-events: none;
}
.fb-fig-bg img {
    width: 100%; height: 100%;
    border-radius: 0;
    object-fit: var(--img-fit, cover);
    object-position: var(--img-pos, center);
    filter: saturate(.62) brightness(1.1) contrast(.9);
    /* Sa duket fotoja — vjen nga zbehja që cakton admini për librin ose faqen. */
    opacity: var(--img-show, .42);
    -webkit-mask-image: radial-gradient(ellipse 92% 88% at 50% 50%, #000 46%, transparent 100%);
            mask-image: radial-gradient(ellipse 92% 88% at 50% 50%, #000 46%, transparent 100%);
}
/* Vello letre e përqendruar aty ku rrjedh teksti dhe e hollë nga buzët: kështu
   figura duket vërtet, por fjalët nuk bien kurrë mbi pjesën e saj të ngarkuar.
   Zbehja e njëtrajtshme e bënte foton pothuajse të padukshme. */
.fb-fig-bg::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 74% 58% at 50% 50%,
        rgba(255, 255, 255, .82) 0%,
        rgba(255, 255, 255, .62) 55%,
        rgba(255, 255, 255, .1) 100%);
}

/* Mbi një faqe me foto poshtë, zbehet FOTOJA — kurrë shkrimi. Teksti merr
   bojën e plotë dhe një kufi të hollë letre rreth shkronjave, që të mbetet i
   prerë edhe aty ku figura poshtë ka ngjyrë. */
.fb-paper:has(.fb-fig-bg) .fb-text p,
.fb-paper:has(.fb-fig-bg) .fb-heading {
    color: var(--paper-ink);
    text-shadow:
         0 1px 0 rgba(255, 255, 255, .9),
         0 -1px 0 rgba(255, 255, 255, .7),
         1px 0 0 rgba(255, 255, 255, .7),
        -1px 0 0 rgba(255, 255, 255, .7);
}
.fb-paper:has(.fb-fig-bg) .fb-open::first-letter { text-shadow: 0 1px 2px rgba(255, 255, 255, .95); }

/* Folioja rri në rrjedhë, jo absolute: brenda letrës që rrëshqet, një element
   absolut zbret bashkë me tekstin dhe përplaset me linkun poshtë. `.fb-text`
   e shtyn atë vetvetiu në fund kur faqja është e shkurtër. */
.fb-folio {
    margin-top: 12px;
    text-align: center;
    font-family: Georgia, serif;
    font-size: .82rem;
    color: #a08a63;
}

.fb-source {
    align-self: center;
    margin-top: 14px;
    font-size: .78rem;
    color: #a08a63;
    text-decoration: none;
    border-bottom: 1px dotted #c9a961;
}
.fb-source:hover { color: #7a5a28; }

.fb-dedication .fb-text p { text-align: center; font-style: italic; }

/* ── Gjegjëza ──────────────────────────────────────────────────────── */

.fb-riddle { text-align: center; margin-top: auto; padding-top: 14px; }
.fb-reveal {
    background: #fff8e7;
    border: 1.5px dashed #c9a961;
    color: #7a5a28;
    font-family: 'Fraunces', Georgia, serif;
    font-size: .92rem;
    padding: 9px 20px;
    border-radius: 99px;
    cursor: pointer;
    transition: background .2s, transform .2s;
}
.fb-reveal:hover { background: #fdf0d2; transform: translateY(-1px); }
.fb-answer {
    margin: 14px 0 0;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.5rem;
    color: #7a5a28;
}

/* ── Kopertina ─────────────────────────────────────────────────────── */

.fb-cover {
    background: var(--cover-bg, linear-gradient(160deg, #1e2a5a, #4a2c6d));
    color: var(--cover-ink, #fdf6e3);
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 34px;
    /* Kurrizi i librit — vija ku lidhen fletët. */
    border-left: 7px solid rgba(0, 0, 0, .28);
    /* Pa `position: absolute` këtu, kopertina bie jashtë fletës: `.fb-cover`
       vjen pas `.fb-page` në fletë dhe me të njëjtën specifikë e mund atë. */
    overflow: hidden;
}
.fb-cover::before {
    content: '';
    position: absolute; inset: 16px;
    border: 1.5px solid rgba(255, 255, 255, .26);
    border-radius: 5px;
    pointer-events: none;
}
/* Vendosja e fotos e cakton admini: si ulet mbi kopertinë, ku qendërzohet
   dhe sa zbeht. Prandaj vjen nga variabla, jo nga vlera të ngurta. */
.fb-cover-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: var(--cover-fit, cover);
    object-position: var(--cover-pos, center);
    opacity: var(--cover-op, .38);
}

/* Perdja mbi foto: pa të, një fotografi e ndritshme e gëlltit titullin.
   Me `--cover-veil: 0` ajo zhduket krejt për kush e do foton të pastër. */
.fb-cover-veil {
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, calc(var(--cover-veil, .35) * .55)) 0%,
        rgba(0, 0, 0, var(--cover-veil, .35)) 100%);
    pointer-events: none;
}

.fb-cover-inner { position: relative; }

/* Ku ulet blloku i titullit mbi kopertinë. */
.fb-cover.fb-align-top    { justify-content: flex-start; padding-top: 58px; }
.fb-cover.fb-align-bottom { justify-content: flex-end;   padding-bottom: 58px; }
.fb-cover-emoji { font-size: 3.4rem; display: block; margin-bottom: .3em; }
.fb-cover-title {
    /* Rregulli global i h1 e bën tekstin të errët; mbi kopertinë ai duhet
       të marrë ngjyrën e zgjedhur, përndryshe titulli humbet në sfond. */
    color: var(--cover-ink, #fdf6e3);
    font-family: var(--cover-font, 'Fraunces', Georgia, serif);
    font-size: calc(2.05rem * var(--cover-size, 1));
    line-height: 1.2;
    margin: 0 0 .35em;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}
.fb-cover-sub {
    color: var(--cover-sub, #fdf6e3);
    font-family: var(--cover-font, 'Fraunces', Georgia, serif);
    font-size: 1rem; opacity: .92; margin: 0 0 1.1em; font-style: italic;
}
.fb-cover-rule {
    display: block; width: 62px; height: 2px; margin: 0 auto 1.1em;
    background: currentColor; opacity: .5;
}
.fb-cover-brand { font-family: 'Fredoka', sans-serif; letter-spacing: .16em; font-size: .84rem; opacity: .85; margin: 0; }
.fb-cover-age { font-size: .76rem; opacity: .65; margin: .5em 0 0; }

/* ── Skicaturat ────────────────────────────────────────────────────── */

/* Vizatimet marrin ngjyrën e bojës së letrës, jo një ngjyrë të vetën — kështu
   duken të vizatuara me të njëjtin lapsin si teksti rreth tyre. */
.fb-art {
    display: block;
    text-align: center;
    color: var(--paper-trim, #b08d52);
    margin: 0 0 .1em;
    line-height: 0;
}
.fb-art-bottom { margin: .8em 0 0; }
.fb-art svg { display: inline-block; opacity: .85; }
.bk-rule { color: var(--paper-trim, #c9a961); display: block; margin: 1.1em auto .1em; opacity: .8; }

.fb-open::first-letter { color: var(--paper-trim, #a8763a); }
.fb-folio { color: var(--paper-trim, #a08a63); }
.fb-source { color: var(--paper-trim, #a08a63); border-bottom-color: var(--paper-trim, #c9a961); }

/* ── Kopertina e pasme ─────────────────────────────────────────────── */

.fb-backcover {
    border-left: 0;
    border-right: 7px solid rgba(0, 0, 0, .28);
    /* Kopertina e pasme mban katër blloqe teksti dhe dy butona; në ekrane të
       ulëta ato s'hyjnë dot. `.fb-cover` i pret me `overflow: hidden`, ndaj
       këtu duhet lejuar rrëshqitja — përndryshe butonat zhduken pa gjurmë. */
    overflow-y: auto;
    align-items: center;
    padding: 30px 26px;
}
.fb-back-inner {
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    max-width: 34ch;
    margin: auto 0;
    color: var(--cover-ink, #fdf6e3);
    font-family: var(--cover-font, 'Fraunces', Georgia, serif);
}
.fb-end-mark { font-size: .92rem; letter-spacing: .12em; opacity: .8; margin: 0 0 1.1em; }
.fb-back-quote { font-style: italic; font-size: .98rem; line-height: 1.6; margin: 0 0 1.1em; opacity: .95; }
.fb-back-kids {
    font-size: .92rem; line-height: 1.65; margin: 0 0 1.1em;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 10px;
    background: rgba(255, 255, 255, .08);
}
.fb-back-rule {
    display: block; width: 54px; height: 1.5px;
    background: currentColor; opacity: .45; margin: 0 0 1.1em;
}
.fb-back-about { font-size: .82rem; line-height: 1.65; opacity: .82; margin: 0 0 1.1em; }
.fb-back-brand {
    font-family: 'Fredoka', sans-serif; letter-spacing: .12em;
    font-size: .92rem; margin: 0 0 1.2em; opacity: .95;
}
.fb-back-brand span { opacity: .6; }

.fb-end-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* Kur kopertina e fundit është vepër e gatshme, butonat rrinë vetëm — dhe
   zbresin poshtë, që të mos mbulojnë fjalët e vizatuara në mes të saj. */
.fb-end-actions.is-alone {
    margin-top: auto;
    padding-top: 62%;
}
.fb-end-actions.is-alone .btn-on-cover {
    background: rgba(0, 0, 0, .42);
    border-color: rgba(255, 255, 255, .45);
    color: #fff;
    backdrop-filter: blur(3px);
}
.fb-end-actions.is-alone .btn-on-cover:hover { background: rgba(0, 0, 0, .58); }
.btn-on-cover {
    border-color: rgba(255, 255, 255, .5);
    color: var(--cover-ink, #fff);
    background: rgba(255, 255, 255, .1);
}
.btn-on-cover:hover { background: rgba(255, 255, 255, .22); color: var(--cover-ink, #fff); }

/* ── Komandat ──────────────────────────────────────────────────────── */

.fb-controls {
    display: flex; align-items: center; justify-content: center; gap: 18px;
    margin-top: 34px;
}
.fb-nav {
    width: 46px; height: 46px;
    border-radius: 50%;
    border: 1.5px solid var(--c-primary);
    background: #fff;
    color: var(--c-primary);
    font-size: 1.7rem; line-height: 1;
    cursor: pointer;
    transition: background .2s, color .2s, transform .2s;
}
.fb-nav:hover { background: var(--c-primary); color: #fff; transform: translateY(-2px); }
.fb.at-start .fb-prev,
.fb.at-end .fb-next { opacity: .3; pointer-events: none; }
.fb-counter { font-family: Georgia, serif; color: var(--c-muted, #6b7280); font-size: .95rem; min-width: 72px; text-align: center; }

.fb-hint { text-align: center; color: var(--c-muted, #9ca3af); font-size: .85rem; margin-top: 12px; transition: opacity .4s; }
.fb-hint.is-gone { opacity: 0; }

.fb-about { max-width: 660px; margin: 54px auto 0; text-align: center; }
.fb-about h2 { font-family: 'Fraunces', Georgia, serif; font-size: 1.3rem; margin-bottom: .5em; }
.fb-about p { color: var(--c-muted, #6b7280); line-height: 1.75; }

/* ── Tablet ────────────────────────────────────────────────────────── */

/* Kufiri 760px përputhet me SPREAD_FROM te flipbook.js — po t'i largosh,
   CSS-ja do të stiliste një faqe ndërsa skripti do të kishte ndërtuar dy. */
@media (max-width: 1080px) and (min-width: 760px) {
    .fb-paper { padding: 26px 22px 32px; }
    .fb-text p { font-size: .93rem; line-height: 1.68; text-align: left; hyphens: none; }
    .fb-heading { font-size: 1.18rem; }
    .fb-open::first-letter { font-size: 2.6rem; }
    .fb-cover-title { font-size: 1.7rem; }
}

/* ── Telefon ───────────────────────────────────────────────────────── */

@media (max-width: 759px) {
    /* Në telefon lartësia vjen nga ekrani, jo nga një raport i fiksuar: me
       3/4.2 faqja mbetej 532px mbi një ekran 812px dhe pothuajse çdo faqe
       kërkonte rrëshqitje brenda vetes — që e prish ndjesinë e librit. */
    .fb-stage { max-width: 100%; aspect-ratio: auto; height: min(78vh, 680px); min-height: 440px; }
    .fb-paper { padding: 32px 24px 40px; }
    .fb-text p { font-size: 1.02rem; line-height: 1.76; text-align: left; hyphens: none; }
    .fb-heading { font-size: 1.26rem; }
    .fb-open::first-letter { font-size: 2.7rem; }
    .fb-cover-title { font-size: 1.72rem; }
    .fb-cover-emoji { font-size: 2.8rem; }
    .fb-face, .fb-face-back { border-radius: 10px; }
    .fb-controls { gap: 14px; margin-top: 26px; }
}

@media (max-width: 420px) {
    .fb-paper { padding: 26px 18px 36px; }
    .fb-text p { font-size: .96rem; line-height: 1.72; }
}

/* ── Rafti i librave ───────────────────────────────────────────────── */

.shelf {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 34px 26px;
}

.shelf-book { text-decoration: none; display: block; }

.shelf-cover {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    aspect-ratio: 3 / 4;
    padding: 26px 20px;
    border-radius: 4px 10px 10px 4px;
    overflow: hidden;
    background: var(--cover-bg);
    color: var(--cover-ink);
    /* Kurrizi majtas dhe hija poshtë — pa to kopertina duket kartë, jo libër. */
    border-left: 6px solid rgba(0, 0, 0, .3);
    box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5);
    transition: transform .25s ease, box-shadow .25s ease;
}
.shelf-book:hover .shelf-cover {
    transform: translateY(-6px) rotate(-.6deg);
    box-shadow: 0 18px 34px -12px rgba(0, 0, 0, .55);
}
.shelf-cover::before {
    content: '';
    position: absolute; inset: 11px;
    border: 1.2px solid rgba(255, 255, 255, .28);
    border-radius: 4px;
}
.shelf-cover img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: var(--cover-fit, cover);
    object-position: var(--cover-pos, center);
    opacity: var(--cover-op, .38);
}
.shelf-veil {
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, calc(var(--cover-veil, .35) * .5)) 0%,
        rgba(0, 0, 0, var(--cover-veil, .35)) 100%);
}
.shelf-cover-in { position: relative; }
/* ── Ftesa për ta personalizuar një libër ──────────────────────────── */

.make-yours {
    display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
    background: linear-gradient(140deg, #f6f0fd 0%, #fdf0f7 55%, #eef5fd 100%);
    border: 1.5px solid #e3d9f5;
    border-radius: 18px;
    padding: 26px 28px;
    margin-bottom: 30px;
}
.make-yours-cover {
    width: 128px; aspect-ratio: 3/4; object-fit: cover; flex: none;
    border-radius: 3px 8px 8px 3px; border-left: 5px solid rgba(0, 0, 0, .3);
    box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5);
    transform: rotate(-2deg);
}
.make-yours-text { flex: 1; min-width: 260px; }
.make-yours-tag {
    display: inline-block; background: #fff; color: #7c3aed;
    border: 1px solid #ddd6fe; border-radius: 99px;
    padding: 3px 12px; font-size: .72rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px;
}
.make-yours h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.5rem; line-height: 1.25; margin: 0 0 .4em; color: #3b2f4e;
}
.make-yours p { color: #5b5170; line-height: 1.7; margin: 0 0 1em; }
.make-yours-actions { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 560px) {
    .make-yours { padding: 22px 18px; gap: 18px; }
    .make-yours-cover { width: 96px; margin: 0 auto; }
    .make-yours h3 { font-size: 1.28rem; }
}

/* ── Ftesa për librin fizik, poshtë lexuesit ───────────────────────── */

.fb-buy {
    max-width: 640px;
    margin: 46px auto 0;
    padding: 30px 26px;
    text-align: center;
    background: linear-gradient(160deg, #fffdf6, #fdf3e2);
    border: 1.5px solid #e8dac0;
    border-radius: 16px;
}
.fb-buy-mark { font-size: 2rem; display: block; margin-bottom: .2em; }
.fb-buy h2 { font-family: 'Fraunces', Georgia, serif; font-size: 1.4rem; margin: 0 0 .4em; color: #4a3418; }
.fb-buy p { color: #5c4526; line-height: 1.7; margin: 0 0 .8em; }
.fb-buy-meta { font-size: .88rem; color: #8a7350 !important; }
.fb-buy-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }

/* ── Porosia e librit fizik ────────────────────────────────────────── */

.order-head { display: flex; gap: 20px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.order-cover {
    width: 96px; aspect-ratio: 3/4; object-fit: cover;
    border-radius: 2px 6px 6px 2px; border-left: 4px solid rgba(0,0,0,.3);
    box-shadow: 0 6px 16px -6px rgba(0,0,0,.45);
}
.order-note {
    background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534;
    border-radius: 10px; padding: 12px 16px; font-size: .9rem; line-height: 1.6;
}
.order-errors {
    background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c;
    border-radius: 10px; padding: 12px 16px; margin-bottom: 14px;
}
.order-errors p { margin: 0 0 4px; font-size: .9rem; }
.order-form { padding: 22px; margin-top: 16px; }
.order-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* WhatsApp mban ngjyrën e vet: njerëzit e njohin butonin para se ta lexojnë. */
.btn-wa { background: #25D366; color: #fff; border-color: #25D366; }
.btn-wa:hover { background: #1da851; border-color: #1da851; color: #fff; }
.btn-wa::before { content: '💬'; margin-right: 6px; }

.order-done { text-align: center; padding: 40px 20px; }
.order-done-mark { font-size: 2rem; color: #c9a961; display: block; margin-bottom: .2em; }
.order-done h1 { font-family: 'Fraunces', Georgia, serif; margin: 0 0 .3em; }
.order-uid {
    display: inline-block; background: #f3f4f6; border-radius: 99px;
    padding: 5px 16px; font-family: monospace; font-size: .95rem; margin: 0 0 1em;
}
.order-done .btn { margin: 6px 4px 0; }

.shelf-tag {
    position: absolute; top: 10px; left: 12px;
    background: rgba(255, 255, 255, .92);
    color: #7c3aed;
    border-radius: 99px;
    padding: 3px 10px;
    font-size: .7rem; font-weight: 700;
    letter-spacing: .02em;
}
.shelf-price {
    position: absolute; top: 10px; right: 10px;
    background: rgba(0, 0, 0, .45);
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 99px;
    padding: 3px 10px;
    font-size: .76rem; font-weight: 600;
}
.shelf-emoji { font-size: 2.3rem; display: block; margin-bottom: .35em; }
.shelf-title {
    display: block;
    font-family: var(--cover-font, 'Fraunces', Georgia, serif);
    color: var(--cover-ink, inherit);
    font-size: calc(1.12rem * var(--cover-size, 1));
    line-height: 1.25;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.shelf-sub {
    display: block; font-size: .8rem; opacity: .85; margin-top: .5em; font-style: italic;
    color: var(--cover-sub, inherit);
    font-family: var(--cover-font, 'Fraunces', Georgia, serif);
}

/* ── Kategoritë e raftit ───────────────────────────────────────────── */

.shelf-section + .shelf-section { margin-top: 64px; }
.shelf-head {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.5rem;
    margin: 0 0 .3em;
}
.shelf-head-tag {
    font-family: 'Fredoka', sans-serif;
    font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
    background: #ecfdf5; color: #047857;
    border: 1px solid #a7f3d0;
    border-radius: 99px; padding: 3px 11px;
}
.shelf-head-tag.is-paid { background: #fff7ed; color: #b45309; border-color: #fed7aa; }
.shelf-lead { color: var(--c-muted, #6b7280); margin: 0 0 24px; }

.shelf-soon {
    border: 1.5px dashed #e5e7eb;
    border-radius: 14px;
    padding: 30px 26px;
    text-align: center;
    color: var(--c-muted, #6b7280);
}
.shelf-soon-mark { display: block; font-size: 1.4rem; color: #c9a961; margin-bottom: .4em; }
.shelf-soon p { margin: 0 0 .8em; font-weight: 600; }
.shelf-soon ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}
.shelf-soon li {
    background: #f9fafb; border: 1px solid #eee; border-radius: 99px;
    padding: 6px 14px; font-size: .86rem;
}

.shelf-meta {
    display: block;
    margin-top: 12px;
    font-size: .82rem;
    color: var(--c-muted, #6b7280);
    text-align: center;
}
.shelf-kind { color: var(--c-primary); font-weight: 600; }
.shelf-dot { opacity: .5; margin: 0 5px; }

@media (max-width: 560px) {
    .shelf { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
    .shelf-title { font-size: 1rem; }
    .shelf-emoji { font-size: 1.9rem; }
}

/* ══════════════════════════════════════════════════════════════════════
   NIVELET E LOJËRAVE — harta e progresionit
   ══════════════════════════════════════════════════════════════════════ */

.lvl-map {
    background: linear-gradient(160deg, #f8fafc, #eef2f7);
    border: 1.5px solid #e2e8f0;
    border-radius: 16px;
    padding: 16px 18px;
    margin-bottom: 18px;
}
.lvl-map-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; margin-bottom: 12px;
}

.lvl-row { display: flex; gap: 10px; flex-wrap: wrap; }

.lvl {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    min-width: 58px; padding: 10px 8px;
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    text-decoration: none;
    transition: transform .18s, border-color .18s, box-shadow .18s;
}
.lvl:hover { transform: translateY(-2px); border-color: var(--c-primary); }

.lvl-n { font-size: 1.15rem; font-weight: 700; color: #334155; line-height: 1; }
.lvl-stars { font-size: .78rem; color: #f59e0b; letter-spacing: 1px; }

/* Niveli ku ndodhet tani — duhet gjetur me një shikim. */
.lvl.is-current {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 18%, transparent);
}
.lvl.is-done { background: #f0fdf4; border-color: #86efac; }
.lvl.is-done .lvl-n { color: #15803d; }

/* I mbyllur: i dukshëm por qartazi i paarritshëm — fëmija sheh se ka rrugë
   përpara, pa u ngatërruar që s'hapet. */
.lvl.is-locked { opacity: .45; cursor: not-allowed; background: #f1f5f9; }
.lvl.is-locked .lvl-stars { color: #cbd5e1; }

.lvl-now { margin: 12px 0 0; font-size: .92rem; color: var(--c-muted, #64748b); }

.lvl-guest {
    background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
    border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; font-size: .92rem;
}

/* Njoftimi kur hapet një nivel i ri — pas lojës, brenda rezultatit. */
.lvl-unlocked {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border: 1.5px solid #6ee7b7;
    border-radius: 12px;
    padding: 14px 16px;
    margin-top: 12px;
    text-align: center;
    color: #065f46;
    font-weight: 600;
}
.lvl-earned { font-size: 1.5rem; letter-spacing: 3px; color: #f59e0b; }

@media (max-width: 480px) {
    .lvl { min-width: 50px; padding: 8px 6px; }
    .lvl-n { font-size: 1rem; }
}

/* ── Faqja e gjegjëzës ─────────────────────────────────────────────── */
.riddle-page {
    max-width: 560px; margin: 0 auto;
    text-align: center;
    background: linear-gradient(165deg, #fffdf6, #fdf3e2);
    border: 1.5px solid #e8dac0;
    border-radius: 20px;
    padding: 40px 32px;
}
.riddle-mark { font-size: 2.6rem; display: block; margin-bottom: .3em; }
.riddle-text {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.4rem; line-height: 1.7; color: #4a3418;
    margin-bottom: 1.4em;
}
/* MOS i vër `display` elementit <details>: një `inline-block` ose `flex` këtu
   e prish fshehjen që bën vetë browseri. Qendërzimi vjen nga prindi.

   Dhe fshehja shprehet HAPUR këtu, në vend që t'i besohet sjelljes së
   nënkuptuar të <details>: disa shfletues nuk e fshehin përmbajtjen, dhe një
   gjegjëz me përgjigjen gjithnjë të dukshme s'vlen fare. Kjo rrugë punon edhe
   pa JavaScript. */
.riddle-reveal:not([open]) .riddle-answer { display: none; }
.riddle-reveal summary {
    cursor: pointer; list-style: none;
    display: inline-block;
    background: #fff8e7; border: 1.5px dashed #c9a961; color: #7a5a28;
    font-family: 'Fraunces', Georgia, serif; font-size: 1rem;
    padding: 10px 24px; border-radius: 99px;
    transition: background .2s, transform .2s;
}
.riddle-reveal summary::-webkit-details-marker { display: none; }
.riddle-reveal summary:hover { background: #fdf0d2; transform: translateY(-1px); }
.riddle-reveal[open] summary { display: none; }
.riddle-answer {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.9rem; color: #7a5a28; margin: .3em 0 0;
    animation: riddlePop .3s ease;
}
@keyframes riddlePop { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ── Këshilla e ditës (faqe publike) ───────────────────────────────── */
.tip-day {
    background: linear-gradient(165deg, #fffdf7, #fdf5e8);
    border: 1.5px solid #f0e2c8;
    border-radius: 20px;
    padding: 34px 30px;
}
.tip-day-tag {
    display: inline-block; background: #fff; color: #b45309;
    border: 1px solid #fde68a; border-radius: 99px;
    padding: 4px 14px; font-size: .8rem; font-weight: 700;
}
.tip-day-date { color: var(--c-ink-soft); font-size: .82rem; margin: 8px 0 0; }
.tip-day-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.7rem; line-height: 1.25; margin: .4em 0 .3em; color: var(--c-ink);
}
.tip-day-sum { color: var(--c-ink-soft); font-size: .95rem; margin: 0 0 1.2em; }

/* Vetë këshilla — kjo është ajo që vizitori merr falas, ndaj lexohet e para. */
.tip-day-body {
    background: #fff; border-left: 4px solid var(--c-accent);
    border-radius: 10px; padding: 18px 20px;
}
.tip-day-body p { margin: 0; font-size: 1.05rem; line-height: 1.75; color: var(--c-ink); }

.tip-day-more { margin-top: 22px; padding-top: 18px; border-top: 1px dashed #e8dac0; }
.tip-day-more p { color: var(--c-ink-soft); font-size: .92rem; margin: 0 0 12px; }
.tip-day-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.tip-day-tomorrow { text-align: center; color: var(--c-ink-soft); font-size: .85rem; margin: 18px 0 0; }

@media (max-width: 560px) {
    .tip-day { padding: 26px 20px; }
    .tip-day-title { font-size: 1.4rem; }
}

/* ── Mini-menuja e Argëtimit ───────────────────────────────────────────
   Rri ngjitur lart kur rrëshqet faqja: fëmija duhet ta ndërrojë llojin
   pa u kthyer në krye. */
.act-filter {
    position: sticky;
    /* Koka e faqes është vetë ngjitëse dhe 77px e lartë; me `top: 8px` menuja
       rrëshqiste poshtë saj dhe dukej vetëm gjysma. */
    top: 85px;
    z-index: 20;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 12px;
    margin-bottom: 26px;
    background: rgba(255, 251, 245, .92);
    backdrop-filter: blur(8px);
    border: 1px solid #f0e6d8;
    border-radius: 99px;
}

.act-chip {
    display: inline-flex; align-items: center; gap: 7px;
    background: #fff;
    border: 1.5px solid #e8dfd3;
    border-radius: 99px;
    padding: 9px 16px;
    font-size: .92rem; font-weight: 600;
    color: var(--c-ink);
    cursor: pointer;
    transition: background .18s, border-color .18s, transform .18s;
}
.act-chip:hover { border-color: var(--c-primary); transform: translateY(-1px); }

.act-chip.is-on {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
}

/* Numri thotë sa ka brenda — kështu zgjedhja bëhet e ditur, jo me hamendje. */
.act-chip-n {
    background: #f3f4f6; color: var(--c-ink-soft);
    border-radius: 99px; padding: 1px 8px;
    font-size: .76rem; font-weight: 700;
}
.act-chip.is-on .act-chip-n { background: rgba(255, 255, 255, .28); color: #fff; }

@media (max-width: 760px) {
    /* Rrëshqitja anash e priste butonin në mes dhe dukej e prishur. Me emra
       të shkurtër, të gjashtë hyjnë në dy rreshta — asgjë e prerë, dhe rri
       rreth 110px, jo 268px si me emrat e plotë. */
    .act-filter {
        gap: 6px;
        padding: 10px 8px;
        border-radius: 16px;
    }
    .act-chip { padding: 7px 12px; font-size: .82rem; gap: 5px; }
    .act-chip-n { padding: 1px 6px; font-size: .72rem; }
}