/*
 * PyGuru portal — light/dark toggle (matches admin pyadmin toggle).
 *
 * Strategy:
 * - Dark mode darkens the PAGE background only.
 * - Cards/panels that already use light surfaces (#fff / gradient-box-w) KEEP
 *   dark text (do NOT remap --color-heading-wv / --gradient-box-w globally —
 *   that forced white text onto light cards).
 * - Only translucent dark cards + page-level heroes get light text overrides.
 */

:root {
    --pyguru-toggle-cream: #fff8f0;
    --pyguru-toggle-cream-hover: #fffef9;
    --pyguru-toggle-faint-red: rgba(255, 1, 79, 0.32);
    --pyguru-toggle-faint-red-strong: rgba(255, 1, 79, 0.55);
}

html[data-pyguru-theme="dark"] {
    color-scheme: dark;
}

html[data-pyguru-theme="dark"] body {
    background-color: #212428;
    color: var(--color-body, #878e99);
}

/* Page-level titles on dark background (not inside light cards/banners) */
html[data-pyguru-theme="dark"] .section-title .title,
html[data-pyguru-theme="dark"] .section-title h2.title,
html[data-pyguru-theme="dark"] .section-title h3.title,
html[data-pyguru-theme="dark"] .section-title h4.title {
    color: #ffffff !important;
}

/* Detail heroes sit on LIGHT banners — keep dark ink */
html[data-pyguru-theme="dark"] .book-hero-title,
html[data-pyguru-theme="dark"] .course-hero-title,
html[data-pyguru-theme="dark"] .book-hero-banner .book-hero-title,
html[data-pyguru-theme="dark"] .course-hero-banner .course-hero-title {
    color: #0f172a !important;
}

html[data-pyguru-theme="dark"] .book-hero-chip,
html[data-pyguru-theme="dark"] .course-hero-chip {
    color: #475569 !important;
}

/* Bootstrap utilities ONLY when sitting on the page (not inside light cards/modals) */
html[data-pyguru-theme="dark"] body > .main-page-wrapper .text-dark,
html[data-pyguru-theme="dark"] body > .main-page-wrapper .text-black {
    color: #ffffff !important;
}

html[data-pyguru-theme="dark"] .modal .text-dark,
html[data-pyguru-theme="dark"] .modal .text-black,
html[data-pyguru-theme="dark"] .modal .text-black-50,
html[data-pyguru-theme="dark"] .modal .text-muted,
html[data-pyguru-theme="dark"] .book-glass-card .text-dark,
html[data-pyguru-theme="dark"] .course-glass-card .text-dark,
html[data-pyguru-theme="dark"] .book-card .text-dark,
html[data-pyguru-theme="dark"] .course-card .text-dark {
    color: #0f172a !important;
}

html[data-pyguru-theme="dark"] body > .main-page-wrapper .text-black-50,
html[data-pyguru-theme="dark"] body > .main-page-wrapper .text-muted,
html[data-pyguru-theme="dark"] body > .main-page-wrapper .text-secondary {
    color: #c4cfde !important;
}

/* Nav + footer on dark chrome */
html[data-pyguru-theme="dark"] .rn-header .primary-menu > .nav-item > .nav-link {
    color: var(--color-lightn, #c4cfde);
}

html[data-pyguru-theme="dark"] .popup-mobile-menu .menu-top .discription,
html[data-pyguru-theme="dark"] .popup-mobile-menu .primary-menu .nav-link {
    color: var(--color-lightn, #c4cfde);
}

html[data-pyguru-theme="dark"] .footer-style-2 .menu-wrapper .menu-footer li a,
html[data-pyguru-theme="dark"] .footer-style-2 .copyright .description,
html[data-pyguru-theme="dark"] .footer-style-2 .copyright .description a {
    color: var(--color-body, #878e99);
}

html[data-pyguru-theme="dark"] .footer-style-2 .menu-wrapper .menu-title h6 {
    color: var(--color-heading, #ffffff);
}

/* Keep header-right controls aligned; prevent invisible close-menu from clipping */
.rn-header .header-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.75rem;
    flex-wrap: nowrap;
    overflow: visible !important;
    position: relative;
    z-index: 5;
}

.rn-header .header-right > .close-menu {
    width: auto !important;
    max-width: none;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.rn-header .header-wrapper.menu-open .header-right > .close-menu {
    pointer-events: auto;
}

.rn-header .header-right > .rn-btn,
.rn-header .header-right > .hamberger-menu,
.rn-header .header-right > .pyguru-theme-toggle-btn {
    align-self: center;
    flex-shrink: 0;
    position: relative;
    z-index: 6;
}

/* Theme toggle — perfect circle (admin-matched), beat competing header button/i rules */
.rn-header .header-right .pyguru-theme-toggle-btn,
.rn-header .header-right #pyguru-theme-toggle,
button.pyguru-theme-toggle-btn,
#pyguru-theme-toggle {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    vertical-align: middle;
    text-align: center;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 20 !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    float: none !important;
    background: var(--pyguru-toggle-cream) !important;
    color: var(--pyguru-toggle-faint-red-strong) !important;
    border: 1.5px solid var(--pyguru-toggle-faint-red) !important;
    box-shadow:
        0 2px 8px rgba(255, 1, 79, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.15s ease !important;
}

.rn-header .header-right .pyguru-theme-toggle-btn::before,
.rn-header .header-right .pyguru-theme-toggle-btn::after,
.rn-header .header-right #pyguru-theme-toggle::before,
.rn-header .header-right #pyguru-theme-toggle::after,
button.pyguru-theme-toggle-btn::before,
button.pyguru-theme-toggle-btn::after,
#pyguru-theme-toggle::before,
#pyguru-theme-toggle::after {
    content: none !important;
    display: none !important;
}

.rn-header .header-right .pyguru-theme-toggle-btn i,
.rn-header .header-right #pyguru-theme-toggle i,
button.pyguru-theme-toggle-btn i,
#pyguru-theme-toggle i {
    font-size: 1rem !important;
    line-height: 1 !important;
    display: block !important;
    pointer-events: none !important;
    position: static !important;
    top: auto !important;
    color: inherit !important;
    z-index: auto !important;
}

.rn-header .header-right .pyguru-theme-toggle-btn:hover,
.rn-header .header-right #pyguru-theme-toggle:hover,
.rn-header .header-right .pyguru-theme-toggle-btn:focus,
.rn-header .header-right #pyguru-theme-toggle:focus,
button.pyguru-theme-toggle-btn:hover,
#pyguru-theme-toggle:hover,
button.pyguru-theme-toggle-btn:focus,
#pyguru-theme-toggle:focus {
    background: var(--pyguru-toggle-cream-hover) !important;
    color: var(--color-primary, #ff014f) !important;
    border-color: rgba(255, 1, 79, 0.45) !important;
    box-shadow:
        0 4px 14px rgba(255, 1, 79, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
    outline: none !important;
    text-decoration: none !important;
    transform: none !important;
}

.rn-header .header-right .pyguru-theme-toggle-btn:active,
.rn-header .header-right #pyguru-theme-toggle:active,
button.pyguru-theme-toggle-btn:active,
#pyguru-theme-toggle:active {
    transform: scale(0.96) !important;
}

/* Dark theme — same cream button with deeper shadow */
[data-pyguru-theme="dark"] .pyguru-theme-toggle-btn,
[data-pyguru-theme="dark"] #pyguru-theme-toggle {
    background: var(--pyguru-toggle-cream) !important;
    color: var(--pyguru-toggle-faint-red-strong) !important;
    border-color: var(--pyguru-toggle-faint-red) !important;
    box-shadow:
        0 2px 10px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
}

[data-pyguru-theme="dark"] .pyguru-theme-toggle-btn:hover,
[data-pyguru-theme="dark"] #pyguru-theme-toggle:hover {
    background: var(--pyguru-toggle-cream-hover) !important;
    color: var(--color-primary, #ff014f) !important;
}

/* Dark mode: nav dropdowns (navbar.css defaults assume light) */
[data-pyguru-theme="dark"] .primary-menu > .pyguru-nav-dropdown .dropdown-toggle {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(33, 36, 40, 0.92);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
    color: var(--color-lightn, #c4cfde) !important;
}

[data-pyguru-theme="dark"] .primary-menu > .pyguru-nav-dropdown .dropdown-toggle b {
    color: var(--color-primary, #ff014f);
}

[data-pyguru-theme="dark"] .primary-menu > .pyguru-nav-dropdown .dropdown-menu {
    border-color: rgba(255, 255, 255, 0.08);
    background: #212428;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.45);
}

[data-pyguru-theme="dark"] .primary-menu > .pyguru-nav-dropdown .dropdown-menu .dropdown-item,
[data-pyguru-theme="dark"] .primary-menu > .pyguru-nav-dropdown .dropdown-menu .nav-link {
    color: var(--color-lightn, #c4cfde) !important;
}

[data-pyguru-theme="dark"] .primary-menu > .pyguru-nav-dropdown .dropdown-menu .dropdown-item:hover,
[data-pyguru-theme="dark"] .primary-menu > .pyguru-nav-dropdown .dropdown-menu .dropdown-item:focus,
[data-pyguru-theme="dark"] .primary-menu > .pyguru-nav-dropdown .dropdown-menu .nav-link:hover,
[data-pyguru-theme="dark"] .primary-menu > .pyguru-nav-dropdown .dropdown-menu .nav-link:focus {
    background: rgba(255, 1, 79, 0.14) !important;
    color: #fff !important;
}

[data-pyguru-theme="dark"] .primary-menu > .pyguru-nav-dropdown:not(.pyguru-nav-dropdown--enquiry) .dropdown-menu .nav-item:last-child .dropdown-item,
[data-pyguru-theme="dark"] .primary-menu > .pyguru-nav-dropdown:not(.pyguru-nav-dropdown--enquiry) .dropdown-menu .nav-item:last-child .nav-link {
    color: #ff8a8a !important;
}

[data-pyguru-theme="dark"] .popup-mobile-menu .primary-menu > .pyguru-nav-dropdown .dropdown-menu {
    background: rgba(33, 36, 40, 0.85);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}


/* Translucent listing cards (dark glass) need light ink */
html[data-pyguru-theme="dark"] .book-card,
html[data-pyguru-theme="dark"] .course-card,
html[data-pyguru-theme="dark"] .quiz-card,
html[data-pyguru-theme="dark"] .submitted-quiz-card {
    border-color: rgba(255, 255, 255, 0.14);
}

html[data-pyguru-theme="dark"] .book-card .book-title-text,
html[data-pyguru-theme="dark"] .course-card .course-title-text,
html[data-pyguru-theme="dark"] .quiz-card .quiz-detail-value.quiz-topic-text,
html[data-pyguru-theme="dark"] .submitted-quiz-card__detail-value--topic {
    color: #f8fafc !important;
}

html[data-pyguru-theme="dark"] .book-card .book-detail-value,
html[data-pyguru-theme="dark"] .book-card .book-detail-value.author-name,
html[data-pyguru-theme="dark"] .course-card .course-detail-value,
html[data-pyguru-theme="dark"] .course-card .course-detail-value.instructor-name,
html[data-pyguru-theme="dark"] .quiz-card .quiz-detail-value,
html[data-pyguru-theme="dark"] .submitted-quiz-card__detail-value {
    color: #e2e8f0 !important;
}

html[data-pyguru-theme="dark"] .book-card .price-del,
html[data-pyguru-theme="dark"] .course-card .price-del {
    color: #94a3b8 !important;
}

html[data-pyguru-theme="dark"] .book-card .book-rating-chip__score,
html[data-pyguru-theme="dark"] .book-card .book-rating-chip__label,
html[data-pyguru-theme="dark"] .course-card .rating-text {
    color: #e2e8f0 !important;
}

html[data-pyguru-theme="dark"] .book-card .book-detail-row,
html[data-pyguru-theme="dark"] .course-card .course-detail-row,
html[data-pyguru-theme="dark"] .quiz-card .quiz-detail-row,
html[data-pyguru-theme="dark"] .submitted-quiz-card__detail-row {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

html[data-pyguru-theme="dark"] .book-card .book-footer,
html[data-pyguru-theme="dark"] .course-card .course-footer,
html[data-pyguru-theme="dark"] .submitted-quiz-card__footer {
    border-top-color: rgba(255, 255, 255, 0.1);
}

/* Listing filters on dark page */
html[data-pyguru-theme="dark"] .pybook-filter-form select,
html[data-pyguru-theme="dark"] .pybook-filter-form input[type="text"],
html[data-pyguru-theme="dark"] .pybook-custom-select__trigger,
html[data-pyguru-theme="dark"] .user-books-filter-form select,
html[data-pyguru-theme="dark"] .user-books-filter-form input[type="text"],
html[data-pyguru-theme="dark"] .pylearn-filter-form select,
html[data-pyguru-theme="dark"] .pylearn-filter-form input[type="text"],
html[data-pyguru-theme="dark"] .pylearn-custom-select__trigger,
html[data-pyguru-theme="dark"] .user-courses-filter-form select,
html[data-pyguru-theme="dark"] .user-courses-filter-form input[type="text"],
html[data-pyguru-theme="dark"] .pyquiz-filter-form select,
html[data-pyguru-theme="dark"] .pyquiz-filter-form input[type="text"],
html[data-pyguru-theme="dark"] .pyquiz-custom-select__trigger {
    color: var(--color-lightn, #c4cfde) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    background: rgba(255, 255, 255, 0.04) !important;
}

html[data-pyguru-theme="dark"] .pybook-custom-select__option,
html[data-pyguru-theme="dark"] .pylearn-custom-select__option,
html[data-pyguru-theme="dark"] .pyquiz-custom-select__option {
    color: #0f172a;
}

html[data-pyguru-theme="dark"] .pybook-custom-select__menu,
html[data-pyguru-theme="dark"] .pylearn-custom-select__menu,
html[data-pyguru-theme="dark"] .pyquiz-custom-select__menu {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.12);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

html[data-pyguru-theme="dark"] .refer-code-toggle {
    color: #94a3b8 !important;
}

html[data-pyguru-theme="dark"] .refer-code-toggle:hover,
html[data-pyguru-theme="dark"] .refer-code-toggle.is-open {
    color: #f8fafc !important;
}

/*
 * Services cards — listing CSS uses --color-heading-wv / --color-body-white
 * (dark ink). In dark mode .rn-blog uses dark neumorphic bg, so force light ink.
 */
html[data-pyguru-theme="dark"] .pycode-services .pycode-services-card__title,
html[data-pyguru-theme="dark"] .pycode-services .pycode-services-card__title a {
    color: #ffffff !important;
}

html[data-pyguru-theme="dark"] .pycode-services .pycode-services-card__title a:hover {
    color: var(--color-primary, #ff014f) !important;
}

html[data-pyguru-theme="dark"] .pycode-services .pycode-services-card__description,
html[data-pyguru-theme="dark"] .pycode-services .pycode-services-card__meta-row .meta span,
html[data-pyguru-theme="dark"] .pycode-services-empty h3 {
    color: #c4cfde !important;
}

html[data-pyguru-theme="dark"] .pycode-services .rn-blog.pycode-services-card:hover {
    box-shadow:
        10px 10px 19px #1c1e22,
        -10px -10px 19px #262a2e,
        0 14px 32px rgba(255, 1, 79, 0.18);
}

/* Tagline sits on the dark page bg (not inside light cards) */
html[data-pyguru-theme="dark"] .service-details-page .service-detail-tagline {
    color: #c4cfde !important;
}

/* Responsive sizing — stay aligned next to Donate / hamburger */
@media only screen and (max-width: 1199px) {
    .rn-header .header-right {
        gap: 0.55rem;
    }

    .rn-header .header-right .pyguru-theme-toggle-btn,
    .rn-header .header-right #pyguru-theme-toggle,
    button.pyguru-theme-toggle-btn,
    #pyguru-theme-toggle {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        max-width: 36px !important;
        max-height: 36px !important;
    }

    .rn-header .header-right .pyguru-theme-toggle-btn i,
    .rn-header .header-right #pyguru-theme-toggle i {
        font-size: 0.9rem !important;
    }
}

@media only screen and (max-width: 575px) {
    .rn-header .header-right {
        gap: 0.4rem;
        margin-right: -8px;
    }

    .rn-header .header-right .pyguru-theme-toggle-btn,
    .rn-header .header-right #pyguru-theme-toggle,
    button.pyguru-theme-toggle-btn,
    #pyguru-theme-toggle {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        max-width: 34px !important;
        max-height: 34px !important;
    }
}