/* 
   Premium Dark Mode Styles for CardVerse (Deep Green Theme)
*/

/* Core variables for Greenish Dark Mode */
html[data-bs-theme="dark"] {
    --cv-dark-bg: #0c1815;       /* Very dark slate with a subtle emerald hint */
    --cv-dark-surface: #12201d;  /* Elevated slate-green surface */
    --cv-dark-surface-2: #182b27; /* Lighter surface for inputs/buttons */
    --cv-dark-border: #223b35;   /* Subtle slate-green borders */
    --cv-dark-text-main: #f8f9fa; /* Crisp white for text */
    --cv-dark-text-muted: #a7f3d0; /* Very soft pale green for muted text */
}

/* Global Overrides (Canvas) */
html[data-bs-theme="dark"] body {
    background-color: var(--cv-dark-bg) !important;
    background-image: url("data:image/svg+xml,%3Csvg width='160' height='160' viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.02' stroke='none'%3E%3Cpath transform='translate(15, 15) scale(1.1) rotate(-10)' d='M3 3h18a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm17 9H4v7h16v-7zm0-4V5H4v3h16z'/%3E%3Cpath transform='translate(100, 15) scale(1.1) rotate(25)' d='M14 8.94V3a2 2 0 0 0-4 0v5.94L2 14v2l8-2.52V18l-3 2v2l5-1.5 5 1.5v-2l-3-2v-4.58l8 2.52v-2L14 8.94z'/%3E%3Ctext transform='translate(75, 75) scale(1.2) rotate(10)' font-size='20' font-family='Arial, sans-serif' font-weight='900'%3E%E0%A7%B3%3C/text%3E%3Cpath transform='translate(125, 70) scale(1.1) rotate(-15)' d='M22 7h-2V6a3 3 0 0 0-3-3H3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-1h2a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1zm-4 11a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v12zm2-2h-2V9h2v7zm-5-3a1 1 0 1 0 0-2 1 1 0 0 0 0 2z'/%3E%3Cpath transform='translate(20, 80) scale(1) rotate(-20)' d='M10.9 2.1l9.899 1.415 1.414 9.9-9.192 9.192a1 1 0 0 1-1.414 0l-9.9-9.9a1 1 0 0 1 0-1.414L10.9 2.1zm2.815 2.815L4.522 14.1l7.071 7.071 9.192-9.192-.99-6.93-6.93-.99zM15 11a2 2 0 1 1 0-4 2 2 0 0 1 0 4z'/%3E%3Cpath transform='translate(100, 120) scale(1.1) rotate(-5)' d='M16.05 12.05L21 17l-4.95 4.95-1.414-1.414 2.536-2.536H4v-2h13.172l-2.536-2.536 1.414-1.414zm-8.1-10l1.414 1.414L6.828 6H20v2H6.828l2.536 2.536L7.95 11.95 3 7l4.95-4.95z'/%3E%3Cpath transform='translate(45, 125) scale(1.1) rotate(15)' d='M6.5 7h11V5a5.5 5.5 0 0 0-11 0v2zm-2 0V5a7.5 7.5 0 0 1 15 0v2h3v14a1 1 0 0 1-1 1H2.5a1 1 0 0 1-1-1V7h3zm14 2H5.5v10h13V9z'/%3E%3C/g%3E%3C/svg%3E") !important;
}

html[data-bs-theme="dark"] .main-wrapper,
html[data-bs-theme="dark"] .hero-boxed,
html[data-bs-theme="dark"] .blog-area {
    background-color: var(--cv-dark-bg) !important;
    background-image: none !important;
    border-color: var(--cv-dark-border) !important;
    color: var(--cv-dark-text-main) !important;
}

/* Typography */
html[data-bs-theme="dark"] h1, 
html[data-bs-theme="dark"] h2, 
html[data-bs-theme="dark"] h3, 
html[data-bs-theme="dark"] h4, 
html[data-bs-theme="dark"] h5, 
html[data-bs-theme="dark"] h6,
html[data-bs-theme="dark"] .h1, 
html[data-bs-theme="dark"] .h2, 
html[data-bs-theme="dark"] .h3, 
html[data-bs-theme="dark"] .h4, 
html[data-bs-theme="dark"] .h5, 
html[data-bs-theme="dark"] .h6 {
    color: var(--cv-dark-text-main) !important;
}

html[data-bs-theme="dark"] .trust-badge-hero {
    color: #4ade80 !important;
}

html[data-bs-theme="dark"] p,
html[data-bs-theme="dark"] span:not(.badge):not(.sub-title),
html[data-bs-theme="dark"] .text-muted,
html[data-bs-theme="dark"] .text-secondary,
html[data-bs-theme="dark"] .vp-desc,
html[data-bs-theme="dark"] .promo-desc,
html[data-bs-theme="dark"] .popular-guide-card span {
    color: var(--cv-dark-text-muted) !important;
}

html[data-bs-theme="dark"] .text-dark,
html[data-bs-theme="dark"] .hero-headline,
html[data-bs-theme="dark"] .vp-title,
html[data-bs-theme="dark"] .promo-title {
    color: var(--cv-dark-text-main) !important;
}

/* Elevated Surfaces & Cards */
html[data-bs-theme="dark"] .card,
html[data-bs-theme="dark"] .blog-card,
html[data-bs-theme="dark"] .value-props-container,
html[data-bs-theme="dark"] .contact-form,
html[data-bs-theme="dark"] .contact-info,
html[data-bs-theme="dark"] .bg-light,
html[data-bs-theme="dark"] .bg-white:not(.hero-boxed):not(.main-wrapper):not(.blog-area) {
    background-color: var(--cv-dark-surface) !important;
    border: 1px solid var(--cv-dark-border) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.3) !important;
}

html[data-bs-theme="dark"] .blog-card a {
    border: none !important;
    outline: none !important;
}

/* Promo Box */
html[data-bs-theme="dark"] .promo-box {
    background: linear-gradient(145deg, var(--cv-dark-surface) 0%, var(--cv-dark-bg) 100%);
    border: 1px solid var(--cv-dark-border);
}

/* Feature Icons (Value Props) */
html[data-bs-theme="dark"] .vp-icon-square {
    background-color: var(--cv-dark-surface-2) !important;
    color: #4ade80 !important;
}
html[data-bs-theme="dark"] .vp-item:hover .vp-icon-square {
    background-color: #4ade80 !important;
    color: #064e3b !important;
}

/* Hero Buttons */
html[data-bs-theme="dark"] .hero-btn-secondary {
    background-color: var(--cv-dark-surface-2) !important;
    color: var(--cv-dark-text-main) !important;
    border-color: var(--cv-dark-border) !important;
}
html[data-bs-theme="dark"] .hero-btn-secondary:hover {
    background-color: var(--cv-dark-border) !important;
}

/* Navigation & Header */
html[data-bs-theme="dark"] .navbar,
html[data-bs-theme="dark"] .navbar-collapse {
    background-color: var(--cv-dark-surface) !important;
    border-bottom: none !important;
}

/* Invert Logo to Light Mode */
html[data-bs-theme="dark"] .logo-brand img {
    filter: brightness(0) invert(1);
}

html[data-bs-theme="dark"] .navbar-light .navbar-nav .nav-link,
html[data-bs-theme="dark"] .nav-link.text-dark {
    color: var(--cv-dark-text-main) !important;
}
html[data-bs-theme="dark"] .navbar-light .navbar-nav .nav-link:hover,
html[data-bs-theme="dark"] .nav-link.text-dark:hover {
    color: #4ade80 !important;
}

/* Buttons */
html[data-bs-theme="dark"] .btn-light {
    background-color: var(--cv-dark-surface-2) !important;
    border-color: var(--cv-dark-border) !important;
    color: var(--cv-dark-text-main) !important;
}
html[data-bs-theme="dark"] .btn-light:hover {
    background-color: var(--cv-dark-border) !important;
    color: #4ade80 !important;
}
html[data-bs-theme="dark"] .btn-outline-light {
    border-color: var(--cv-dark-border) !important;
    color: var(--cv-dark-text-main) !important;
}
html[data-bs-theme="dark"] .btn-outline-light:hover {
    background-color: var(--cv-dark-surface-2) !important;
    color: #4ade80 !important;
}

/* Inputs, Forms & Search */
html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select,
html[data-bs-theme="dark"] .header-search-box {
    background-color: var(--cv-dark-surface-2) !important;
    border-color: var(--cv-dark-border) !important;
    color: var(--cv-dark-text-main) !important;
}
html[data-bs-theme="dark"] .form-control:focus,
html[data-bs-theme="dark"] .form-select:focus {
    background-color: var(--cv-dark-surface-2) !important;
    border-color: #4ade80 !important;
    box-shadow: 0 0 0 0.25rem rgba(74, 222, 128, 0.25) !important;
}
html[data-bs-theme="dark"] .header-search-box input {
    color: var(--cv-dark-text-main) !important;
}
html[data-bs-theme="dark"] .header-search-box i {
    color: var(--cv-dark-text-muted) !important;
}
html[data-bs-theme="dark"] .search-results-dropdown {
    background-color: var(--cv-dark-surface) !important;
    border: 1px solid var(--cv-dark-border) !important;
}

/* Theme Toggle Icons */
#theme-toggle-desktop, #theme-toggle-mobile {
    color: #111827;
    transition: all 0.3s ease;
}
html[data-bs-theme="dark"] #theme-toggle-desktop,
html[data-bs-theme="dark"] #theme-toggle-mobile,
html[data-bs-theme="dark"] .header-right-action {
    color: var(--cv-dark-text-main) !important;
}

/* Quiz Specific */
html[data-bs-theme="dark"] .card-select input:checked+label {
    border: 2px solid #4ade80 !important;
    background-color: var(--cv-dark-surface-2) !important;
    color: #4ade80 !important;
}
html[data-bs-theme="dark"] #theme-toggle-desktop:hover,
html[data-bs-theme="dark"] #theme-toggle-mobile:hover,
html[data-bs-theme="dark"] .header-right-action:hover {
    color: #4ade80 !important;
}