/* ================================================================
   TIJU58 ONLINE EDUCATION — Etihad Airways Inspired Design v4.0
   Fonts  : Playfair Display (headings) / Lato (body)
   Light  : Warm Sand bg / Deep Charcoal / Warm Gold accent
   Dark   : Near-Black Warm / Dark Brown cards / Gold
   ================================================================ */

/* 1. Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Lato:wght@400;700&display=swap');

/* 2. Design Tokens */
:root {
    --clr-bg:        #F7F3ED;
    --clr-card:      #FFFFFF;
    --clr-primary:   #2D2926;
    --clr-primary-h: #1A1715;
    --clr-secondary: #C8973A;
    --clr-accent:    #C8973A;
    --clr-accent-h:  #A67A28;
    --clr-text:      #2D2926;
    --clr-text2:     #6B6560;
    --clr-border:    #E5DDD0;
    --clr-nav:       #2D2926;
    --clr-shadow:    rgba(45,41,38,.10);
    --clr-shadow-h:  rgba(45,41,38,.22);
    --clr-btn:       #C8973A;
    --clr-btn-h:     #A67A28;
    --clr-btn-text:  #FFFFFF;
    --radius:        12px;
    --radius-sm:     8px;
}
html.dark-mode {
    --clr-bg:        #0D0A08;
    --clr-card:      #1A1512;
    --clr-primary:   #C8973A;
    --clr-primary-h: #E0AC4A;
    --clr-secondary: #C8973A;
    --clr-accent:    #C8973A;
    --clr-accent-h:  #E0AC4A;
    --clr-text:      #F7F3ED;
    --clr-text2:     #B5A998;
    --clr-border:    #2D2620;
    --clr-nav:       #0D0A08;
    --clr-shadow:    rgba(0,0,0,.50);
    --clr-shadow-h:  rgba(0,0,0,.75);
    --clr-btn:       #C8973A;
    --clr-btn-h:     #E0AC4A;
    --clr-btn-text:  #FFFFFF;
}

/* 3. Base and Typography */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    font-family: 'Lato', system-ui, -apple-system, sans-serif;
    font-size:   16px;
    line-height: 1.7;
    color:       var(--clr-text);
    background-color: var(--clr-bg) !important;
    background-image: none !important;
    min-height:  100vh;
    -webkit-font-smoothing: antialiased;
    overflow-x:  hidden !important;
    max-width:   100vw;
}
html { overflow-x: hidden; }

/* Global image safety */
img, video, iframe, svg { max-width: 100%; }
img, video { height: auto; }

/* Prevent text overflow on all elements */
* { word-wrap: break-word; overflow-wrap: break-word; }

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    line-height: 1.25;
    color:       var(--clr-text);
    margin-bottom: 0.5em;
    overflow-wrap: break-word;
    word-break: break-word;
}
h1 { font-size: clamp(1.5rem, 5vw, 2.5rem); }
h2 { font-size: clamp(1.25rem, 4vw, 2rem); }
h3 { font-size: clamp(1.125rem, 3vw, 1.625rem); }
h4 { font-size: 1.25rem; }

p {
    font-family: 'Lato', system-ui, sans-serif;
    font-size:   1rem;
    line-height: 1.7;
    color:       var(--clr-text);
    overflow-wrap: break-word;
}
small, .text-sm { font-size: 0.875rem; }
.text-xs        { font-size: 0.8125rem; }

/* 4. Scrollbar */
::-webkit-scrollbar       { width: 10px; }
::-webkit-scrollbar-track { background: var(--clr-bg); }
::-webkit-scrollbar-thumb { background: var(--clr-accent); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--clr-primary); }
* { scrollbar-width: thin; scrollbar-color: var(--clr-accent) var(--clr-bg); }

/* 5. Site Wrapper */
.paper-container {
    background-color: var(--clr-bg) !important;
    background-image: none !important;
    border: none;
}
.paper-container::before,
.paper-container::after { display: none !important; }
.paper-container > *    { position: relative; z-index: 1; }

/* 6. Navbar */
nav, .navbar-shadow {
    background-color: var(--clr-nav) !important;
    background:       var(--clr-nav) !important;
    border:           none !important;
    border-radius:    0 !important;
    box-shadow:       0 2px 20px var(--clr-shadow) !important;
    border-bottom:    3px solid var(--clr-accent) !important;
    width:            100%;
    overflow-x:       hidden;
}
/* ── T58 Brand Logo ──────────────────────────────────── */
.site-logo-link {
    display:        flex;
    align-items:    center;
    gap:            12px;
    text-decoration: none;
    border-left:    none;
    padding-left:   0;
}
.site-logo-link img,
.site-logo-img {
    height: 64px;
    width: auto;
    display: block;
    flex-shrink: 0;
}
footer .site-logo-link img,
footer .site-logo-img {
    height: 54px;
    width: auto;
    display: block;
}
@media (max-width: 640px) {
    .site-logo-link img,
    .site-logo-img { height: 48px; }
    footer .site-logo-link img,
    footer .site-logo-img { height: 40px; }
}
/* Brand name text beside logo */
.site-brand-text {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    white-space:    nowrap;
}
.site-brand-name {
    font-family:    'Playfair Display', Georgia, serif;
    font-weight:    700;
    font-size:      clamp(1rem, 2.5vw, 1.25rem);
    letter-spacing: 3px;
    color:          #C9A84C;
    line-height:    1.1;
    text-transform: uppercase;
}
.site-brand-sub {
    font-family:    'Lato', sans-serif;
    font-size:      clamp(0.55rem, 1.5vw, 0.65rem);
    letter-spacing: 5px;
    color:          #E8C97A;
    line-height:    1;
    text-transform: uppercase;
    opacity:        0.85;
}
footer .site-brand-name { color: #C9A84C; font-size: clamp(0.9rem, 2vw, 1.1rem); }
footer .site-brand-sub  { color: #E8C97A; }
.site-logo-icon { flex-shrink: 0; display: block; }
nav .site-logo-icon  { width: 42px; height: 42px; }
footer .site-logo-icon { width: 34px; height: 34px; }
.site-brand-divider { display: none; }
footer .site-brand-divider { display: none; }
.site-brand-text {
    display:        flex;
    flex-direction: column;
    gap:            1px;
    white-space:    nowrap;
}
.site-brand-name {
    font-family:    'Playfair Display', Georgia, serif;
    font-weight:    700;
    font-size:      clamp(0.8125rem, 2.5vw, 1rem);
    letter-spacing: 4px;
    color:          #FFFFFF;
    line-height:    1.15;
}
.site-brand-sub {
    font-family:    'Lato', sans-serif;
    font-size:      clamp(0.5rem, 1.5vw, 0.5625rem);
    letter-spacing: 5px;
    color:          #C9A84C;
    line-height:    1;
    text-transform: uppercase;
}
footer .site-brand-name { font-size: clamp(0.75rem, 2vw, 0.875rem); }
footer .site-brand-sub  { font-size: 0.5rem; }

/* Legacy support */
.logo-button {
    font-family:    'Playfair Display', serif !important;
    font-weight:    700 !important;
    font-size:      clamp(0.875rem, 3vw, 1.35rem) !important;
    letter-spacing: 2px !important;
    color:          #FFFFFF !important;
    box-shadow:     none !important;
    text-transform: uppercase !important;
    white-space:    nowrap;
}
.nav-link {
    font-family:      'Lato', sans-serif !important;
    font-size:        0.9375rem !important;
    font-weight:      500 !important;
    color:            rgba(255,255,255,.9) !important;
    padding:          0.5rem 0.875rem !important;
    border-radius:    6px !important;
    background-color: transparent !important;
    position: relative;
}
.nav-link:hover, .nav-link:focus {
    background-color: rgba(200,151,58,.20) !important;
    color:            #FFFFFF !important;
    font-weight:      700 !important;
    transform:        none !important;
}
.nav-link-button {
    font-family:      'Lato', sans-serif !important;
    font-size:        0.9375rem !important;
    font-weight:      700 !important;
    background-color: var(--clr-btn) !important;
    color:            var(--clr-btn-text) !important;
    border-radius:    8px !important;
    padding:          0.5rem 1.25rem !important;
    box-shadow:       0 2px 10px rgba(200,151,58,.30) !important;
}
.nav-link-button:hover {
    background-color: var(--clr-btn-h) !important;
    color:            var(--clr-btn-text) !important;
    box-shadow:       0 4px 16px rgba(200,151,58,.55) !important;
    transform:        translateY(-1px) !important;
}
nav .bg-green-600 { background-color: var(--clr-btn) !important; color: var(--clr-btn-text) !important; }
nav .bg-red-600   { background-color: #DC2626 !important; }

/* Global button color enforcement — override ALL Tailwind colour classes */
.hero-button,
.hero-button.bg-red-600,
.hero-button.bg-green-600,
.hero-button.bg-blue-600 {
    background-color: var(--clr-btn) !important;
    color:            var(--clr-btn-text) !important;
}
/* Ensure inline gradient buttons on course cards also look right on hover */
[style*="background:linear-gradient(135deg,#2D2926,#C8973A)"]:hover,
[style*="background:#C8973A"]:hover {
    opacity: 0.92;
}
/* nav login/logout buttons: enforce gold for Login, keep red for Logout */
.nav-link-button.bg-green-600 { background-color: var(--clr-btn) !important; }
/* All .big-btn (English pages) → Etihad gold if no inline style */
.big-btn { background: linear-gradient(135deg, #2D2926, #C8973A); }

/* 7. Mobile Menu */
#mobile-menu { transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out !important; }
#mobile-menu.hidden       { max-height: 0; opacity: 0; }
#mobile-menu:not(.hidden) { max-height: 500px; opacity: 1; }

/* === NAVBAR / FOOTER SVG ICONS ===
   Light theme → gold icons / Dark theme → white icons
   ─────────────────────────────────────────────────── */

/* === NAV LINK ICONS (injected by nav-icons.js) ===
   Layout : [icon] [text]  — flex row, 6px gap
   Colour : gold (light) / white (dark)
   ─────────────────────────────────────────────── */

/* Light theme: nav-link icons = gold */
nav .nav-link .nav-icon {
    color:       var(--clr-accent) !important;
    flex-shrink: 0;
    transition:  color 0.2s ease !important;
}
/* nav-link-button icons = always white (sits on gold/charcoal bg) */
nav .nav-link-button .nav-icon {
    color:       #FFFFFF !important;
    flex-shrink: 0;
}
/* Welcome/user span icon */
nav span .nav-icon {
    color:       rgba(255,255,255,0.75) !important;
    flex-shrink: 0;
}
/* Dark mode: all nav-link icons → white */
html.dark-mode nav .nav-link .nav-icon {
    color: #FFFFFF !important;
}
html.dark-mode nav span .nav-icon {
    color: rgba(255,255,255,0.85) !important;
}

/* T58 brand logo — rect + gold text (light mode) */
nav .site-logo-icon rect,
footer .site-logo-icon rect {
    fill:   #111 !important;
    stroke: var(--clr-accent) !important;
}
nav .site-logo-icon text,
footer .site-logo-icon text {
    fill: var(--clr-accent) !important;
}
nav .site-logo-icon line,
footer .site-logo-icon line {
    stroke: var(--clr-accent) !important;
}
/* Dark mode: keep same look — dark bg + gold accent */
html.dark-mode nav .site-logo-icon rect,
html.dark-mode footer .site-logo-icon rect {
    fill:   #111 !important;
    stroke: var(--clr-accent) !important;
}
html.dark-mode nav .site-logo-icon text,
html.dark-mode footer .site-logo-icon text {
    fill: var(--clr-accent) !important;
}
/* Legacy: old circle logo support (remove after full migration) */
nav svg circle,
footer svg circle {
    fill:   var(--clr-accent) !important;
    stroke: rgba(255,255,255,0.30) !important;
}
nav svg text,
footer svg text {
    fill: #1A1512 !important;
}
html.dark-mode nav svg circle,
html.dark-mode footer svg circle {
    fill:   #FFFFFF !important;
    stroke: var(--clr-accent) !important;
}
html.dark-mode nav svg text,
html.dark-mode footer svg text {
    fill: #1A1512 !important;
}

/* Burger / hamburger menu icon */
#burger-menu {
    color: var(--clr-accent) !important;   /* gold in light mode */
}
html.dark-mode #burger-menu {
    color: #FFFFFF !important;             /* white in dark mode */
}

/* Footer social / contact SVG icons */
footer .w-5,
footer .w-7 {
    color: var(--clr-accent) !important;   /* gold in light mode */
}
html.dark-mode footer .w-5,
html.dark-mode footer .w-7 {
    color: #FFFFFF !important;             /* white in dark mode */
}

/* 8. Hero Section */
.hero-section {
    background:       url('img/hero-bg.svg') center center / cover no-repeat !important;
    border-bottom:    3px solid var(--clr-accent) !important;
    padding:          3rem 1rem;
    position:         relative;
    overflow:         hidden;
    width:            100%;
}
@media (min-width: 640px)  { .hero-section { padding: 4rem 1.5rem; } }
@media (min-width: 1024px) { .hero-section { padding: 5rem 2rem; } }
.hero-section::before {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(45,41,38,0.82) 0%,
        rgba(61,53,48,0.72) 50%,
        rgba(200,151,58,0.18) 100%);
    z-index: 0;
}
.hero-section::after { display: none !important; }
.hero-section > *    { position: relative; z-index: 1; }

.hero-title {
    font-family:       'Playfair Display', serif !important;
    font-size:         clamp(1.5rem, 5vw, 2.75rem) !important;
    font-weight:       700 !important;
    color:             #FFFFFF !important;
    -webkit-text-stroke: none !important;
    text-shadow:       0 2px 20px rgba(0,0,0,.35) !important;
    line-height:       1.2 !important;
    animation:         fadeInUp 0.8s ease-out;
    overflow-wrap:     break-word;
}
.hero-subtitle {
    font-family:       'Lato', sans-serif !important;
    font-size:         clamp(0.9375rem, 2.5vw, 1.125rem) !important;
    font-weight:       400 !important;
    color:             rgba(255,255,255,.92) !important;
    -webkit-text-stroke: none !important;
    text-shadow:       none !important;
    line-height:       1.75 !important;
    animation:         fadeInUp 1s ease-out;
}
.hero-button {
    font-family:      'Lato', sans-serif !important;
    font-size:        clamp(0.9375rem, 2.5vw, 1.0625rem) !important;
    font-weight:      700 !important;
    background-color: var(--clr-btn) !important;
    color:            var(--clr-btn-text) !important;
    border-radius:    10px !important;
    padding:          0.75rem 1.75rem !important;
    box-shadow:       0 4px 20px rgba(200,151,58,.45) !important;
    border:           none !important;
    animation:        fadeInUp 1.2s ease-out;
    white-space:      nowrap;
    display:          inline-block;
}
.hero-button:hover {
    background-color: var(--clr-btn-h) !important;
    transform:        translateY(-3px) !important;
    box-shadow:       0 8px 28px rgba(200,151,58,.65) !important;
}

/* 9. Hero Image */
.comic-image {
    border:        4px solid var(--clr-accent) !important;
    border-radius: 16px !important;
    box-shadow:    0 8px 40px rgba(0,0,0,.2) !important;
    filter:        none !important;
}
.image-wrapper { position: relative; display: inline-block; }
.staple, .staple-top, .staple-bottom,
.bandaid, .bandaid-top, .bandaid-bottom { display: none !important; }

/* 10. Section Titles */
.section-title {
    font-family:    'Playfair Display', serif !important;
    font-size:      2rem !important;
    font-weight:    700 !important;
    color:          var(--clr-primary) !important;
    text-shadow:    none !important;
    letter-spacing: -0.01em;
}
html.dark-mode .section-title { color: var(--clr-accent) !important; }

/* 11. Cards */
.video-card {
    background-color: var(--clr-card) !important;
    border:           1px solid var(--clr-border) !important;
    border-radius:    var(--radius) !important;
    box-shadow:       0 4px 24px var(--clr-shadow) !important;
}
.video-card:hover {
    box-shadow: 0 10px 36px var(--clr-shadow-h) !important;
    transform:  translateY(-5px);
}
.stat-card {
    background-color: var(--clr-card) !important;
    border:           1px solid var(--clr-border) !important;
    border-radius:    var(--radius) !important;
    box-shadow:       0 2px 12px var(--clr-shadow) !important;
    cursor:           pointer;
}
.stat-card:hover {
    box-shadow: 0 8px 28px var(--clr-shadow-h) !important;
    transform:  translateY(-4px);
}

/* 12. Video Player */
.preview-section, .premium-section { position: relative; z-index: 1; }
.premium-card    { position: relative; }
.locked-overlay  { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 5; }
.video-wrapper   { position: relative; overflow: hidden; border-radius: 10px; }
.video-wrapper iframe { border: 3px solid var(--clr-accent) !important; border-radius: 10px !important; }
.preview-video   { height: 200px; }
@media (min-width: 768px) { .preview-video { height: 460px; } }
.plyr { --plyr-color-main: var(--clr-accent); border-radius: 10px; overflow: hidden; }

/* 13. Buttons */
button, .btn { font-family: 'Lato', sans-serif; font-size: 1rem; font-weight: 700; cursor: pointer; }

/* 14. Forms */
input, textarea, select {
    font-family:      'Lato', sans-serif !important;
    font-size:        1rem !important;
    color:            var(--clr-text) !important;
    background-color: var(--clr-card) !important;
    border-color:     var(--clr-border) !important;
    border-radius:    var(--radius-sm) !important;
}
input::placeholder, textarea::placeholder { color: var(--clr-text2) !important; opacity: 1; }

/* 15. Animations */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 16. Transitions */
* {
    transition: background-color 0.2s ease, color 0.15s ease,
                border-color 0.2s ease, box-shadow 0.2s ease !important;
}
a, button, .nav-link, .hero-button, .video-card, .stat-card, .nav-link-button, .lesson-row {
    transition: background-color 0.2s ease, color 0.15s ease,
                border-color 0.2s ease, box-shadow 0.2s ease,
                transform 0.2s ease !important;
}

/* 17. Testimonials — Student Photo Wall (.tmw-*) */
.tmw-section {
    background:  #ffffff;
    overflow:    hidden;
    border-top:  4px solid #e5e7eb;
}
.tmw-wrap {
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-height:      580px;
    max-width:       1400px;
    margin:          0 auto;
    padding:         0;
}
/* ── Photo sides ── */
.tmw-side {
    flex:        0 0 160px;
    display:     flex;
    gap:         10px;
    overflow:    hidden;
    padding:     36px 6px;
    align-self:  stretch;
    align-items: flex-start;
}
.tmw-col {
    flex:           1 1 0;
    display:        flex;
    flex-direction: column;
    gap:            12px;
    padding-top:    var(--col-pt, 0px);
    overflow:       hidden;
}
/* ── Photo card ── */
.tmw-card {
    border-radius: 14px;
    overflow:      hidden;
    box-shadow:    0 4px 18px rgba(0,0,0,0.10);
    transform:     rotate(var(--r, 0deg));
    transition:    transform .3s ease, box-shadow .3s ease;
    flex-shrink:   0;
    position:      relative;
}
.tmw-card:hover {
    transform:  rotate(0deg) scale(1.05) !important;
    box-shadow: 0 18px 52px rgba(0,0,0,0.22);
    z-index:    10;
}
.tmw-card--hero {
    box-shadow: 0 16px 48px rgba(0,0,0,0.22);
    z-index:    2;
}
.tmw-card img {
    display:     block;
    width:       100%;
    height:      130px;
    object-fit:  cover;
    user-select: none;
    pointer-events: none;
}
/* ── Center text ── */
.tmw-center {
    flex:       0 0 420px;
    text-align: center;
    padding:    56px 32px;
    z-index:    5;
}
.tmw-badge {
    display:        inline-block;
    border:         1.5px solid #d1d5db;
    border-radius:  999px;
    padding:        5px 22px;
    font-size:      0.8rem;
    color:          #6b7280;
    margin-bottom:  22px;
    background:     #ffffff;
    letter-spacing: .04em;
}
.tmw-title {
    font-size:     clamp(1.75rem, 3vw, 2.6rem);
    font-weight:   800;
    line-height:   1.18;
    color:         #111827;
    margin-bottom: 16px;
    font-family:   'Playfair Display', Georgia, serif;
}
.tmw-muted {
    color:       #9ca3af;
    font-weight: 700;
}
.tmw-sub {
    color:         #6b7280;
    font-size:     1rem;
    line-height:   1.65;
    max-width:     320px;
    margin:        0 auto 32px;
}
.tmw-cta {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    background:      #111827;
    color:           #ffffff;
    font-weight:     700;
    padding:         14px 30px;
    border-radius:   999px;
    font-size:       0.95rem;
    text-decoration: none;
    transition:      background .2s, transform .2s, box-shadow .2s;
    box-shadow:      0 4px 18px rgba(0,0,0,0.18);
}
.tmw-cta:hover {
    background:  #C8973A;
    transform:   translateY(-2px);
    box-shadow:  0 10px 30px rgba(200,151,58,0.38);
    color:       #ffffff;
}
/* ── Dark mode ── */
html.dark-mode .tmw-section   { background: #1a1512; border-top-color: #2d2926; }
html.dark-mode .tmw-badge     { background: #2d2926; border-color: #3d3530; color: #a09080; }
html.dark-mode .tmw-title     { color: #F7F3ED; }
html.dark-mode .tmw-muted     { color: #6b7280; }
html.dark-mode .tmw-sub       { color: #9ca3af; }
html.dark-mode .tmw-cta       { background: #C8973A; }
html.dark-mode .tmw-cta:hover { background: #b8872a; }
/* ── Responsive ── */
@media (max-width: 900px) {
    .tmw-side   { display: none; }
    .tmw-center { flex: 0 0 auto; width: 100%; padding: 52px 24px; }
    .tmw-wrap   { min-height: auto; }
}
@media (min-width: 901px) and (max-width: 1100px) {
    .tmw-center  { flex: 0 0 300px; }
    .tmw-card img { height: 105px; }
}

/* === DARK MODE OVERRIDES === */
html.dark-mode * {
    transition: background-color 0.25s ease, color 0.2s ease,
                border-color 0.2s ease, box-shadow 0.2s ease !important;
}
html.dark-mode body { background-color: var(--clr-bg) !important; background-image: none !important; color: var(--clr-text) !important; }
html.dark-mode .paper-container { background-color: var(--clr-bg) !important; background-image: none !important; border-color: var(--clr-border) !important; }
html.dark-mode .bg-white    { background-color: var(--clr-card) !important; }
html.dark-mode .bg-gray-50  { background-color: #150F0A !important; }
html.dark-mode .bg-gray-100 { background-color: #100C09 !important; }
html.dark-mode .bg-gray-200 { background-color: #0D0A08 !important; }
html.dark-mode .bg-gray-300 { background-color: #0A0705 !important; }
html.dark-mode .bg-gray-400 { background-color: var(--clr-bg) !important; }
html.dark-mode .text-gray-900,
html.dark-mode .text-gray-800 { color: var(--clr-text) !important; }
html.dark-mode .text-gray-700,
html.dark-mode .text-gray-600 { color: var(--clr-text2) !important; }
html.dark-mode .text-gray-500 { color: #8a7a6e !important; }
html.dark-mode .text-black    { color: var(--clr-text) !important; }
html.dark-mode .border-gray-200 { border-color: var(--clr-border) !important; }
html.dark-mode .border-gray-300 { border-color: #3D2E22 !important; }
html.dark-mode input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]):not([type=range]),
html.dark-mode textarea,
html.dark-mode select { background-color: #1e1510 !important; color: var(--clr-text) !important; border-color: var(--clr-border) !important; }
html.dark-mode input::placeholder, html.dark-mode textarea::placeholder { color: #5a4a3e !important; opacity: 1; }
html.dark-mode table { border-color: var(--clr-border) !important; }
html.dark-mode thead th { background-color: #150F0A !important; color: var(--clr-text2) !important; border-color: var(--clr-border) !important; }
html.dark-mode tbody tr { background-color: var(--clr-card) !important; }
html.dark-mode tbody tr:nth-child(even) { background-color: #150F0A !important; }
html.dark-mode tbody tr:hover { background-color: #1e1510 !important; }
html.dark-mode td { color: var(--clr-text) !important; border-color: var(--clr-border) !important; }
html.dark-mode .bg-red-100    { background-color: #2d0a0a !important; }
html.dark-mode .bg-green-100  { background-color: #0a2010 !important; }
html.dark-mode .bg-yellow-100 { background-color: #2d1a00 !important; }
html.dark-mode .bg-blue-50,
html.dark-mode .bg-blue-100   { background-color: #100C09 !important; }
html.dark-mode .text-red-700   { color: #fca5a5 !important; }
html.dark-mode .text-green-700 { color: #86efac !important; }
html.dark-mode .text-yellow-700 { color: #fde047 !important; }
html.dark-mode .text-blue-700  { color: #93c5fd !important; }
html.dark-mode .shadow-md,
html.dark-mode .shadow-lg,
html.dark-mode .shadow-xl,
html.dark-mode .shadow-2xl { box-shadow: 0 8px 32px rgba(0,0,0,.65) !important; }
html.dark-mode section { background-color: transparent !important; }
html.dark-mode .video-card { background-color: var(--clr-card) !important; border-color: var(--clr-border) !important; }
html.dark-mode .stat-card  { background-color: var(--clr-card) !important; border-color: var(--clr-border) !important; }
html.dark-mode .bg-red-600 { background-color: #7f1d1d !important; }
html.dark-mode #contact .max-w-6xl { background: linear-gradient(to bottom, var(--clr-card) 0%, var(--clr-bg) 100%) !important; border-color: var(--clr-border) !important; }
html.dark-mode #contact [class*=bg-white] { background: #150F0A !important; border-color: var(--clr-border) !important; }
html.dark-mode #contact h2, html.dark-mode #contact h3 { color: var(--clr-text) !important; }
html.dark-mode #contact p,  html.dark-mode #contact label { color: var(--clr-text2) !important; }
html.dark-mode #contact strong { color: var(--clr-text2) !important; }
html.dark-mode #contact span.text-base.font-semibold { color: var(--clr-text) !important; }
html.dark-mode #contact .border-t { border-color: var(--clr-border) !important; }
html.dark-mode .contact-section { border-color: var(--clr-border) !important; }
html.dark-mode #contactForm input,
html.dark-mode #contactForm textarea { background-color: #1e1510 !important; color: var(--clr-text) !important; border-color: #3D2E22 !important; }
html.dark-mode #contactForm input::placeholder,
html.dark-mode #contactForm textarea::placeholder { color: #5a4a3e !important; }
html.dark-mode .lesson-row:hover { background: #1e1510 !important; border-color: var(--clr-accent) !important; }

/* Dark Mode Toggle Button */
#dm-toggle {
    position: fixed; bottom: 24px; right: 24px; z-index: 9999;
    width: 54px; height: 54px; border-radius: 50%;
    border: 2px solid rgba(200,151,58,.40); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; line-height: 1;
    background: linear-gradient(135deg, #2D2926 0%, #C8973A 100%);
    box-shadow: 0 4px 20px rgba(0,0,0,.4);
    transition: transform 0.2s, box-shadow 0.2s !important;
    user-select: none;
}
#dm-toggle:hover { transform: scale(1.15); box-shadow: 0 6px 28px rgba(200,151,58,.55); }
#dm-toggle .dm-tip {
    position: absolute; right: 62px; white-space: nowrap;
    background: #2D2926; color: #F7F3ED;
    font-family: 'Lato', sans-serif; font-size: 12px; font-weight: 700;
    padding: 4px 10px; border-radius: 6px; pointer-events: none;
    opacity: 0; transition: opacity 0.2s !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
#dm-toggle:hover .dm-tip { opacity: 1; }

/* === ADMIN PAGES === */
.paper-container.border-8 {
    border-color:  var(--clr-accent) !important;
    border-width:  4px !important;
    border-radius: var(--radius) !important;
}
.bg-red-600    { background-color: #991B1B !important; }
.bg-blue-100   { background-color: #F7F3ED !important; }
.bg-green-100  { background-color: #F0FDF4 !important; }
.bg-purple-100 { background-color: #FDF8F0 !important; }
.bg-yellow-100 { background-color: #FEF9ED !important; }
html.dark-mode .bg-blue-100   { background-color: #1a1208 !important; }
html.dark-mode .bg-green-100  { background-color: #0a2010 !important; }
html.dark-mode .bg-purple-100 { background-color: #1a1208 !important; }
html.dark-mode .bg-yellow-100 { background-color: #2d1a00 !important; }

/* === ASL PAGES === */
.lesson-row {
    background:    var(--clr-card);
    border:        1px solid var(--clr-border);
    border-radius: 10px;
    padding:       1rem 1.5rem;
    margin-bottom: 0.75rem;
    cursor:        pointer;
}
.lesson-row:hover {
    background:   #F7F3ED !important;
    border-color: var(--clr-accent) !important;
    transform:    translateX(5px);
    box-shadow:   0 4px 16px var(--clr-shadow) !important;
}

/* === RESPONSIVE === */
@media (max-width: 1024px) {
    h1, .hero-title    { font-size: clamp(1.5rem, 4vw, 2rem) !important; }
    h2, .section-title { font-size: clamp(1.25rem, 3.5vw, 1.75rem) !important; }
    h3                 { font-size: clamp(1.125rem, 2.5vw, 1.375rem) !important; }
}
@media (max-width: 768px) {
    html, body        { font-size: 15px; }
    h1, .hero-title    { font-size: clamp(1.375rem, 5vw, 1.875rem) !important; line-height: 1.3 !important; }
    h2, .section-title { font-size: clamp(1.25rem, 4.5vw, 1.5rem) !important; }
    h3                 { font-size: 1.25rem !important; }
    p, .hero-subtitle  { font-size: 0.9375rem !important; }
    .hero-button       { font-size: 0.9375rem !important; padding: 0.6875rem 1.375rem !important; }
    .nav-link          { font-size: 0.875rem !important; }
    .nav-link-button   { font-size: 0.875rem !important; padding: 0.5rem 1rem !important; }
    .logo-button       { font-size: 1.0rem !important; letter-spacing: 1px !important; }
    .comic-image       { width: 100%; max-width: 420px; border-width: 3px !important; }
    .image-wrapper     { width: 100%; display: flex; justify-content: center; }
    .video-wrapper iframe { border: 2px solid var(--clr-accent) !important; }
    .premium-card      { margin-bottom: 1.5rem; }
    .paper-container.border-8 { border-width: 2px !important; }
    /* Hero button group: stack on narrow */
    .hero-button + a, a + .hero-button { margin-top: 0.75rem; }
}
@media (max-width: 640px) {
    html, body        { font-size: 14px; }
    h1, .hero-title    { font-size: clamp(1.25rem, 6vw, 1.625rem) !important; }
    h2, .section-title { font-size: clamp(1.125rem, 5vw, 1.375rem) !important; }
    .hero-subtitle     { font-size: 0.875rem !important; }
    .hero-button       { font-size: 0.9rem !important; padding: 0.625rem 1.125rem !important; }
    .navbar-shadow     { padding: 0.75rem 0 !important; }
    .logo-button       { font-size: 0.9rem !important; }
    .nav-link          { font-size: 0.8125rem !important; }
    .nav-link-button   { font-size: 0.8125rem !important; }
    footer             { padding: 1.25rem 1rem; }
    footer .grid       { gap: 1.5rem; }
    /* tmw mobile handled by its own media queries */
    /* Make quiz answer buttons single column on very small phones */
    .quiz-answer-grid,
    #answersGrid       { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
    h1, .hero-title { font-size: clamp(1.125rem, 7vw, 1.375rem) !important; }
    .logo-button    { font-size: 0.8125rem !important; padding: 0.5rem 0.75rem !important; }
    .nav-link       { font-size: 0.75rem !important; }
    .nav-link-button { font-size: 0.75rem !important; padding: 0.375rem 0.625rem !important; }
    .hero-button:hover, .nav-link:hover, .nav-link-button:hover { transform: none !important; }
    .eng-card, .video-card, .stat-card { margin-left: 0 !important; margin-right: 0 !important; }
    /* Tables: force horizontal scroll wrapper */
    .overflow-x-auto { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
}

/* Flex wrap safety for nav items */
.flex.items-center.justify-between { flex-wrap: nowrap; min-width: 0; }
.flex.items-center.justify-between > div:first-child { flex-shrink: 1; min-width: 0; overflow: hidden; }

/* Clamp nav logo text to not overflow */
nav .text-xl, nav .text-2xl, nav .text-3xl {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: min(200px, 50vw);
}

/* Quiz answer grid — start at 2 cols, collapse to 1 on mobile */
#answersGrid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 480px) { #answersGrid { grid-template-columns: 1fr; } }

/* Full-width sections never exceed viewport */
section, main, footer, header, nav { max-width: 100vw; overflow-x: hidden; }

/* Form input legibility */
input[type=text], input[type=email], input[type=password],
input[type=number], input[type=search], textarea, select {
    color: #2D2926 !important;
}
html.dark-mode input[type=text], html.dark-mode input[type=email],
html.dark-mode input[type=password], html.dark-mode input[type=number],
html.dark-mode input[type=search], html.dark-mode textarea,
html.dark-mode select { color: #F7F3ED !important; }

/* ═══════════════════════════════════════════════════════
   PARROT THEME — White Parrot palette
   Nav/Footer: #730202  |  Sections: #F7F3ED (cream)  |  Buttons: #D91A1A
   Text: #D9BB29 (gold)  |  Cards: #730202 (dark red, yellow text)
   ═══════════════════════════════════════════════════════ */
html[data-theme="parrot"] {
    --clr-bg:        #0D0D0D;
    --clr-card:      #730202;
    --clr-primary:   #D9BB29;
    --clr-primary-h: #E8CC45;
    --clr-secondary: #D91A1A;
    --clr-accent:    #D91A1A;
    --clr-accent-h:  #F03030;
    --clr-text:      #D9BB29;
    --clr-text2:     #C4A820;
    --clr-border:    #333333;
    --clr-nav:       #730202;
    --clr-shadow:    rgba(0,0,0,.50);
    --clr-shadow-h:  rgba(0,0,0,.75);
    --clr-btn:       #D91A1A;
    --clr-btn-h:     #F03030;
    --clr-btn-text:  #FFFFFF;
}
/* Parrot + dark-mode — muted variant */
html[data-theme="parrot"].dark-mode {
    --clr-bg:        #050505;
    --clr-card:      #4A0101;
    --clr-text:      #D9BB29;
    --clr-text2:     #A09020;
    --clr-border:    #222222;
    --clr-nav:       #4A0101;
    --clr-shadow:    rgba(0,0,0,.70);
    --clr-shadow-h:  rgba(0,0,0,.85);
}

/* ── Parrot: Tailwind bg/text overrides ── */
/* Cream backgrounds for content areas */
html[data-theme="parrot"] .bg-white,
html[data-theme="parrot"] .bg-blue-50,
html[data-theme="parrot"] .bg-blue-100,
html[data-theme="parrot"] .bg-green-100,
html[data-theme="parrot"] .bg-purple-100,
html[data-theme="parrot"] .bg-yellow-100   { background-color: #F7F3ED !important; }

/* ── Parrot: Section backgrounds → cream ── */
html[data-theme="parrot"] .preview-section,
html[data-theme="parrot"] .premium-section { background-color: #F7F3ED !important; }

/* ── Parrot: Card backgrounds → dark red ── */
html[data-theme="parrot"] .premium-card { background-color: #730202 !important; border-color: #D91A1A !important; }
html[data-theme="parrot"] .video-card { background-color: #730202 !important; }
html[data-theme="parrot"] .eng-free-card { background-color: #730202 !important; border-color: #D91A1A !important; }
html[data-theme="parrot"] .eng-header-bar { background: #4A0101 !important; }
html[data-theme="parrot"] .eng-free-badge { background: #D91A1A !important; }
html[data-theme="parrot"] .eng-free-card .eng-stat-box { background: #4A0101 !important; border-color: #730202 !important; }
html[data-theme="parrot"] .eng-free-card .eng-stat-num { color: #D9BB29 !important; }
html[data-theme="parrot"] .eng-free-card .eng-stat-lbl { color: #C4A820 !important; }
html[data-theme="parrot"] .eng-free-card .eng-check-row { color: #D9BB29 !important; border-bottom-color: #4A0101 !important; }
html[data-theme="parrot"] .eng-free-card .eng-check-dot { background: #D91A1A !important; }
html[data-theme="parrot"] .eng-cta-btn { background: #D91A1A !important; color: #FFFFFF !important; }
html[data-theme="parrot"] .eng-cta-btn:hover { background: #F03030 !important; }
html[data-theme="parrot"] .eng-topic-pill { background: rgba(217,26,26,0.15) !important; color: #D9BB29 !important; border-color: rgba(217,26,26,0.30) !important; }

html[data-theme="parrot"] .bg-gray-50,
html[data-theme="parrot"] .bg-gray-100,
html[data-theme="parrot"] .bg-gray-200,
html[data-theme="parrot"] .bg-gray-300,
html[data-theme="parrot"] .bg-gray-400       { background-color: var(--clr-bg) !important; }
html[data-theme="parrot"] .text-gray-900,
html[data-theme="parrot"] .text-gray-800     { color: #0D0D0D !important; }
html[data-theme="parrot"] .text-gray-700,
html[data-theme="parrot"] .text-gray-600     { color: #333333 !important; }
html[data-theme="parrot"] .text-gray-500     { color: #555555 !important; }
html[data-theme="parrot"] .text-black        { color: #0D0D0D !important; }
html[data-theme="parrot"] .border-gray-200,
html[data-theme="parrot"] .border-gray-300   { border-color: var(--clr-border) !important; }

/* ── Parrot: Card text → yellow on dark-red ── */
html[data-theme="parrot"] .video-card,
html[data-theme="parrot"] .video-card h1, html[data-theme="parrot"] .video-card h2,
html[data-theme="parrot"] .video-card h3, html[data-theme="parrot"] .video-card h4,
html[data-theme="parrot"] .video-card p,  html[data-theme="parrot"] .video-card span,
html[data-theme="parrot"] .video-card div,
html[data-theme="parrot"] .premium-card,
html[data-theme="parrot"] .premium-card h1, html[data-theme="parrot"] .premium-card h2,
html[data-theme="parrot"] .premium-card h3, html[data-theme="parrot"] .premium-card h4,
html[data-theme="parrot"] .premium-card p,  html[data-theme="parrot"] .premium-card span,
html[data-theme="parrot"] .premium-card div,
html[data-theme="parrot"] .eng-free-card,
html[data-theme="parrot"] .eng-free-card h3, html[data-theme="parrot"] .eng-free-card p,
html[data-theme="parrot"] .stat-card,
html[data-theme="parrot"] .stat-card h1, html[data-theme="parrot"] .stat-card h2,
html[data-theme="parrot"] .stat-card h3, html[data-theme="parrot"] .stat-card h4,
html[data-theme="parrot"] .stat-card p,  html[data-theme="parrot"] .stat-card span,
html[data-theme="parrot"] .stat-card div,
html[data-theme="parrot"] .lesson-row,
html[data-theme="parrot"] .lesson-row span,
html[data-theme="parrot"] .lesson-row div {
    color: #D9BB29 !important;
}
html[data-theme="parrot"].dark-mode .video-card,
html[data-theme="parrot"].dark-mode .video-card h1, html[data-theme="parrot"].dark-mode .video-card h2,
html[data-theme="parrot"].dark-mode .video-card h3, html[data-theme="parrot"].dark-mode .video-card h4,
html[data-theme="parrot"].dark-mode .video-card p,  html[data-theme="parrot"].dark-mode .video-card span,
html[data-theme="parrot"].dark-mode .video-card div,
html[data-theme="parrot"].dark-mode .premium-card,
html[data-theme="parrot"].dark-mode .premium-card h1, html[data-theme="parrot"].dark-mode .premium-card h2,
html[data-theme="parrot"].dark-mode .premium-card h3, html[data-theme="parrot"].dark-mode .premium-card h4,
html[data-theme="parrot"].dark-mode .premium-card p,  html[data-theme="parrot"].dark-mode .premium-card span,
html[data-theme="parrot"].dark-mode .premium-card div,
html[data-theme="parrot"].dark-mode .eng-free-card,
html[data-theme="parrot"].dark-mode .eng-free-card h3, html[data-theme="parrot"].dark-mode .eng-free-card p,
html[data-theme="parrot"].dark-mode .stat-card,
html[data-theme="parrot"].dark-mode .stat-card h1, html[data-theme="parrot"].dark-mode .stat-card h2,
html[data-theme="parrot"].dark-mode .stat-card h3, html[data-theme="parrot"].dark-mode .stat-card h4,
html[data-theme="parrot"].dark-mode .stat-card p,  html[data-theme="parrot"].dark-mode .stat-card span,
html[data-theme="parrot"].dark-mode .stat-card div,
html[data-theme="parrot"].dark-mode .lesson-row,
html[data-theme="parrot"].dark-mode .lesson-row span,
html[data-theme="parrot"].dark-mode .lesson-row div {
    color: #C4A820 !important;
}
/* Keep button text white inside cards */
html[data-theme="parrot"] .video-card a[class*="bg-"],
html[data-theme="parrot"] .video-card button,
html[data-theme="parrot"] .premium-card a[style*="background"],
html[data-theme="parrot"] .premium-card button[onclick],
html[data-theme="parrot"] .stat-card a[class*="bg-"],
html[data-theme="parrot"] .stat-card button {
    color: var(--clr-btn-text) !important;
}

/* ── Parrot: Hero overlay gradient ── */
html[data-theme="parrot"] .hero-section::before {
    background: linear-gradient(135deg,
        rgba(115, 2, 2, 0.88) 0%,
        rgba(13, 13, 13, 0.78) 50%,
        rgba(217, 26, 26, 0.22) 100%) !important;
}
/* ── Parrot: Hero text → white bold ── */
html[data-theme="parrot"] .hero-title {
    color: #FFFFFF !important;
    font-weight: 800 !important;
    text-shadow: 0 3px 24px rgba(0,0,0,.55) !important;
}
html[data-theme="parrot"] .hero-subtitle {
    color: rgba(255,255,255,.95) !important;
    font-weight: 600 !important;
    text-shadow: 0 2px 12px rgba(0,0,0,.40) !important;
}
/* ── Parrot: Hero animated wave SVG background ── */
html[data-theme="parrot"] .hero-section {
    background: #0D0D0D !important;
    position: relative;
    overflow: hidden;
}
html[data-theme="parrot"] .hero-section::after {
    display: block !important;
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 700' preserveAspectRatio='none'%3E%3Cpath d='M0 350 Q150 250 300 350 T600 350 T900 350 T1200 350 T1500 350 T1800 350' fill='none' stroke='%23D91A1A' stroke-width='2' opacity='0.25'/%3E%3Cpath d='M0 300 Q150 200 300 300 T600 300 T900 300 T1200 300 T1500 300 T1800 300' fill='none' stroke='%23D9BB29' stroke-width='1.5' opacity='0.18'/%3E%3Cpath d='M0 400 Q150 300 300 400 T600 400 T900 400 T1200 400 T1500 400 T1800 400' fill='none' stroke='%23D91A1A' stroke-width='1.5' opacity='0.15'/%3E%3Cpath d='M0 250 Q150 150 300 250 T600 250 T900 250 T1200 250 T1500 250 T1800 250' fill='none' stroke='%23D9BB29' stroke-width='1' opacity='0.12'/%3E%3Cpath d='M0 450 Q150 350 300 450 T600 450 T900 450 T1200 450 T1500 450 T1800 450' fill='none' stroke='%23730202' stroke-width='2.5' opacity='0.20'/%3E%3Cpath d='M0 200 Q150 100 300 200 T600 200 T900 200 T1200 200 T1500 200 T1800 200' fill='none' stroke='%23730202' stroke-width='1' opacity='0.10'/%3E%3Cpath d='M0 500 Q150 400 300 500 T600 500 T900 500 T1200 500 T1500 500 T1800 500' fill='none' stroke='%23D9BB29' stroke-width='1.5' opacity='0.12'/%3E%3C/svg%3E") repeat-x !important;
    background-size: 1800px 100% !important;
    animation: parrotWaveScroll 12s linear infinite !important;
    pointer-events: none !important;
}
@keyframes parrotWaveScroll {
    0%   { background-position-x: 0; }
    100% { background-position-x: -1800px; }
}
html[data-theme="parrot"] .hero-button {
    box-shadow: 0 4px 20px rgba(217, 26, 26, .45) !important;
}
html[data-theme="parrot"] .hero-button:hover {
    box-shadow: 0 8px 28px rgba(217, 26, 26, .65) !important;
}

/* ── Parrot: Nav links & buttons ── */
html[data-theme="parrot"] .nav-link { color: #FFFFFF !important; }
html[data-theme="parrot"] nav .text-white,
html[data-theme="parrot"] nav span { color: #FFFFFF !important; }
html[data-theme="parrot"] .nav-link:hover,
html[data-theme="parrot"] .nav-link:focus {
    background-color: rgba(217, 26, 26, .25) !important;
}
html[data-theme="parrot"] .nav-link-button {
    background: #D91A1A !important;
    box-shadow: 0 2px 10px rgba(217, 26, 26, .30) !important;
}
html[data-theme="parrot"] .nav-link-button:hover {
    box-shadow: 0 4px 16px rgba(217, 26, 26, .55) !important;
}
html[data-theme="parrot"] nav .nav-link .nav-icon {
    color: #D9BB29 !important;
}
html[data-theme="parrot"] nav svg circle,
html[data-theme="parrot"] footer svg circle {
    fill: #D91A1A !important;
    stroke: rgba(217, 187, 41, .30) !important;
}
html[data-theme="parrot"] nav svg text,
html[data-theme="parrot"] footer svg text {
    fill: #FFFFFF !important;
}
html[data-theme="parrot"] #burger-menu {
    color: #D9BB29 !important;
}
html[data-theme="parrot"] footer .w-5,
html[data-theme="parrot"] footer .w-7 {
    color: #D9BB29 !important;
}
html[data-theme="parrot"] footer h3 { color: #FFFFFF !important; }
html[data-theme="parrot"] footer p { color: #D9BB29 !important; }
html[data-theme="parrot"] footer li a { color: #D9BB29 !important; }
html[data-theme="parrot"] footer li a:hover { color: #FFFFFF !important; }
html[data-theme="parrot"] footer span { color: #FFFFFF !important; }

/* ── Parrot: Gradient buttons ── */
html[data-theme="parrot"] .big-btn {
    background: linear-gradient(135deg, #730202, #D91A1A) !important;
}
html[data-theme="parrot"] [style*="background:linear-gradient(135deg,#2D2926,#C8973A)"],
html[data-theme="parrot"] [style*="background: linear-gradient(135deg,#2D2926,#C8973A)"] {
    background: linear-gradient(135deg, #730202, #D91A1A) !important;
}
html[data-theme="parrot"] [style*="background:#C8973A"],
html[data-theme="parrot"] [style*="background: #C8973A"] {
    background: #D91A1A !important;
}

/* ── Parrot: Section titles → black on cream ── */
html[data-theme="parrot"] .section-title {
    color: #0D0D0D !important;
}

/* ── Parrot: Testimonial section → cream ── */
html[data-theme="parrot"] .tmw-section  { background: #F7F3ED !important; border-top-color: #E5DDD0 !important; }
html[data-theme="parrot"] .tmw-title    { color: #0D0D0D !important; }
html[data-theme="parrot"] .tmw-muted    { color: #333333 !important; }
html[data-theme="parrot"] .tmw-sub      { color: #555555 !important; }
html[data-theme="parrot"] .tmw-badge    { background: #730202 !important; border-color: #D91A1A !important; color: #D9BB29 !important; }
html[data-theme="parrot"] .tmw-cta      { background: #D91A1A !important; }
html[data-theme="parrot"] .tmw-cta:hover { background: #F03030 !important; box-shadow: 0 10px 30px rgba(217,26,26,.38) !important; }

/* ── Parrot: Dark mode toggle button ── */
html[data-theme="parrot"] #dm-toggle {
    background: linear-gradient(135deg, #730202 0%, #D91A1A 100%) !important;
    border-color: rgba(217, 26, 26, .40) !important;
}
html[data-theme="parrot"] #dm-toggle:hover {
    box-shadow: 0 6px 28px rgba(217, 26, 26, .55) !important;
}
html[data-theme="parrot"] #dm-toggle .dm-tip {
    background: #730202 !important;
}

/* ── Parrot: Scrollbar ── */
html[data-theme="parrot"] ::-webkit-scrollbar-thumb       { background: #D91A1A !important; }
html[data-theme="parrot"] ::-webkit-scrollbar-thumb:hover  { background: #730202 !important; }

/* ── Parrot: Input fields ── */
html[data-theme="parrot"] input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]):not([type=range]),
html[data-theme="parrot"] textarea,
html[data-theme="parrot"] select {
    background-color: #FFFFFF !important;
    color: #0D0D0D !important;
    border-color: #E5DDD0 !important;
}
html[data-theme="parrot"] input::placeholder,
html[data-theme="parrot"] textarea::placeholder {
    color: #888 !important;
}

/* ── Parrot: Contact section → cream ── */
html[data-theme="parrot"] #contact .max-w-6xl { background: linear-gradient(to bottom, #F7F3ED 0%, #EDE8DC 100%) !important; border-color: #E5DDD0 !important; }
html[data-theme="parrot"] #contact [class*=bg-white] { background: #F7F3ED !important; border-color: #E5DDD0 !important; }
html[data-theme="parrot"] #contact h2, html[data-theme="parrot"] #contact h3 { color: #0D0D0D !important; }
html[data-theme="parrot"] #contact p,  html[data-theme="parrot"] #contact label { color: #1A1A1A !important; }
html[data-theme="parrot"] #contact strong { color: #0D0D0D !important; }
html[data-theme="parrot"] #contact span { color: #0D0D0D !important; }
html[data-theme="parrot"] #contactForm input,
html[data-theme="parrot"] #contactForm textarea { background-color: #FFFFFF !important; color: #0D0D0D !important; border-color: #E5DDD0 !important; }
html[data-theme="parrot"] #contactForm input::placeholder,
html[data-theme="parrot"] #contactForm textarea::placeholder { color: #666 !important; }

/* ── Parrot: Shadows ── */
html[data-theme="parrot"] .shadow-md,
html[data-theme="parrot"] .shadow-lg,
html[data-theme="parrot"] .shadow-xl,
html[data-theme="parrot"] .shadow-2xl { box-shadow: 0 8px 32px rgba(0,0,0,.15) !important; }

/* ── Parrot: Tables — cream rows, black text ── */
html[data-theme="parrot"] table          { border-color: #E5DDD0 !important; }
html[data-theme="parrot"] thead th       { background-color: #730202 !important; color: #FFFFFF !important; border-color: #4A0101 !important; }
html[data-theme="parrot"] tbody tr       { background-color: #F7F3ED !important; }
html[data-theme="parrot"] tbody tr:nth-child(even) { background-color: #EDE8DC !important; }
html[data-theme="parrot"] tbody tr:hover { background-color: #E5DDD0 !important; }
html[data-theme="parrot"] td             { color: #0D0D0D !important; border-color: #E5DDD0 !important; }

/* ── Parrot: Admin pages ── */
html[data-theme="parrot"] .paper-container.border-8 {
    border-color: #D91A1A !important;
}
html[data-theme="parrot"] .bg-red-600 { background-color: #730202 !important; }

/* ── Parrot + dark-mode: surfaces → dark muted ── */
html[data-theme="parrot"].dark-mode .bg-white,
html[data-theme="parrot"].dark-mode .bg-blue-50,
html[data-theme="parrot"].dark-mode .bg-blue-100,
html[data-theme="parrot"].dark-mode .bg-green-100,
html[data-theme="parrot"].dark-mode .bg-purple-100,
html[data-theme="parrot"].dark-mode .bg-yellow-100   { background-color: #1A1208 !important; }
html[data-theme="parrot"].dark-mode .preview-section,
html[data-theme="parrot"].dark-mode .premium-section { background-color: #1A1208 !important; }
html[data-theme="parrot"].dark-mode .premium-card { background-color: #4A0101 !important; }
html[data-theme="parrot"].dark-mode .video-card { background-color: #4A0101 !important; }
html[data-theme="parrot"].dark-mode .eng-free-card { background-color: #4A0101 !important; }

/* ── Parrot + dark-mode: contact ── */
html[data-theme="parrot"].dark-mode #contact .max-w-6xl { background: linear-gradient(to bottom, #1A1208 0%, #0D0D0D 100%) !important; }
html[data-theme="parrot"].dark-mode #contact [class*=bg-white] { background: #1A1208 !important; }
html[data-theme="parrot"].dark-mode #contact h2, html[data-theme="parrot"].dark-mode #contact h3 { color: #D9BB29 !important; }
html[data-theme="parrot"].dark-mode #contact p, html[data-theme="parrot"].dark-mode #contact label { color: #C4A820 !important; }
html[data-theme="parrot"].dark-mode #contactForm input,
html[data-theme="parrot"].dark-mode #contactForm textarea { background-color: #0D0D0D !important; color: #D9BB29 !important; border-color: #333 !important; }

/* ── Parrot + dark-mode: tables ── */
html[data-theme="parrot"].dark-mode thead th       { background-color: #4A0101 !important; color: #D9BB29 !important; }
html[data-theme="parrot"].dark-mode tbody tr       { background-color: #1A1208 !important; }
html[data-theme="parrot"].dark-mode tbody tr:nth-child(even) { background-color: #140E04 !important; }
html[data-theme="parrot"].dark-mode tbody tr:hover { background-color: #1E1610 !important; }
html[data-theme="parrot"].dark-mode td             { color: #C4A820 !important; }

/* ── Parrot: Lesson row hover ── */
html[data-theme="parrot"] .lesson-row:hover {
    background: #EDE8DC !important;
    border-color: #D91A1A !important;
}
html[data-theme="parrot"].dark-mode .lesson-row:hover {
    background: #1A1208 !important;
    border-color: #D91A1A !important;
}

/* ═══════════════════════════════════════════════════════
   NEWSLETTER SUBSCRIBE SECTION — Theme-aware
   Etihad: Charcoal→Gold gradient  |  Parrot: DarkRed→Red gradient
   ═══════════════════════════════════════════════════════ */
.nl-subscribe {
    padding: 44px 20px;
    text-align: center;
    background: linear-gradient(135deg, #2D2926 0%, #443B34 40%, #C8973A 100%);
}
.nl-subscribe h3 {
    color: #FFFFFF;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 8px;
    font-family: 'Playfair Display', serif;
}
.nl-subscribe .nl-desc {
    color: rgba(255,255,255,0.88);
    font-size: 14px;
    margin: 0 0 20px;
}
.nl-subscribe .nl-form {
    display: flex;
    gap: 0;
    max-width: 480px;
    margin: 0 auto;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,0.20);
}
.nl-subscribe .nl-form input[type="email"] {
    flex: 1;
    border: none;
    padding: 14px 18px;
    font-size: 15px;
    outline: none;
    min-width: 0;
    font-family: inherit;
    background: #FFFFFF;
    color: #2D2926;
}
.nl-subscribe .nl-form input[type="email"]::placeholder {
    color: #9A9490;
}
.nl-subscribe .nl-btn {
    border: none;
    background: #C8973A;
    color: #FFFFFF;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    transition: background 0.25s, transform 0.15s;
    letter-spacing: 0.3px;
}
.nl-subscribe .nl-btn:hover {
    background: #A67A28;
    transform: translateX(2px);
}
.nl-subscribe .nl-privacy {
    color: rgba(255,255,255,0.55);
    font-size: 11px;
    margin: 14px 0 0;
}
.nl-subscribe .nl-privacy a {
    color: rgba(255,255,255,0.78);
    text-decoration: underline;
}
.nl-subscribe .nl-privacy a:hover {
    color: #FFFFFF;
}

/* ── Etihad dark mode ── */
html.dark-mode .nl-subscribe {
    background: linear-gradient(135deg, #0D0A08 0%, #1A1512 40%, #C8973A 100%);
}
html.dark-mode .nl-subscribe .nl-form input[type="email"] {
    background: #1A1512;
    color: #F7F3ED;
    border-right: 1px solid #2D2620;
}
html.dark-mode .nl-subscribe .nl-form input[type="email"]::placeholder {
    color: #6B6560;
}

/* ── Parrot theme ── */
html[data-theme="parrot"] .nl-subscribe {
    background: linear-gradient(135deg, #4A0101 0%, #730202 40%, #D91A1A 100%);
}
html[data-theme="parrot"] .nl-subscribe h3 {
    color: #D9BB29;
}
html[data-theme="parrot"] .nl-subscribe .nl-desc {
    color: rgba(255,255,255,0.90);
}
html[data-theme="parrot"] .nl-subscribe .nl-btn {
    background: #D9BB29;
    color: #4A0101;
}
html[data-theme="parrot"] .nl-subscribe .nl-btn:hover {
    background: #E8CC45;
}
html[data-theme="parrot"] .nl-subscribe .nl-form input[type="email"] {
    background: #FFFFFF;
    color: #2D2926;
}
html[data-theme="parrot"] .nl-subscribe .nl-privacy {
    color: rgba(217,187,41,0.55);
}
html[data-theme="parrot"] .nl-subscribe .nl-privacy a {
    color: rgba(217,187,41,0.78);
}

/* ── Parrot + dark mode ── */
html[data-theme="parrot"].dark-mode .nl-subscribe {
    background: linear-gradient(135deg, #1A0000 0%, #4A0101 40%, #730202 100%);
}
html[data-theme="parrot"].dark-mode .nl-subscribe h3 {
    color: #D9BB29;
}
html[data-theme="parrot"].dark-mode .nl-subscribe .nl-desc {
    color: rgba(217,187,41,0.80);
}
html[data-theme="parrot"].dark-mode .nl-subscribe .nl-btn {
    background: #D91A1A;
    color: #FFFFFF;
}
html[data-theme="parrot"].dark-mode .nl-subscribe .nl-btn:hover {
    background: #F03030;
}
html[data-theme="parrot"].dark-mode .nl-subscribe .nl-form input[type="email"] {
    background: #0D0D0D;
    color: #D9BB29;
    border-right: 1px solid #333;
}
html[data-theme="parrot"].dark-mode .nl-subscribe .nl-form input[type="email"]::placeholder {
    color: #6B6560;
}