/* Theme Name: Astra Child Theme URI: https://wpastra.com/ Description: Astra Child Theme with dark mode, language switcher (EN/AR/FR), and RTL support. Author: Sara Toumi - TCF Canada Template: astra Version: 1.0.0 Text Domain: astra-child */ /* ========================================================= IMPORT PARENT THEME ========================================================= */ @import url("../astra/style.css"); /* ========================================================= CSS CUSTOM PROPERTIES — LIGHT MODE (default) ========================================================= */ :root { --brand: #c8102e; --brand-hover: #a50d26; --bg: #ffffff; --bg-secondary: #f5f5f5; --surface: #ffffff; --border: #e0e0e0; --text-primary: #111111; --text-secondary: #555555; --nav-bg: #ffffff; --nav-text: #111111; --nav-shadow: 0 2px 12px rgba(0,0,0,0.08); --toggle-bg: #e0e0e0; --toggle-knob: #ffffff; --dropdown-bg: #ffffff; --dropdown-shadow: 0 8px 24px rgba(0,0,0,0.12); --transition: 0.3s ease; } /* ========================================================= DARK MODE OVERRIDES (class added by JS to ) ========================================================= */ html.dark-mode { --bg: #0f0f0f; --bg-secondary: #1a1a1a; --surface: #1e1e1e; --border: #2e2e2e; --text-primary: #f0f0f0; --text-secondary: #bbbbbb; --nav-bg: #141414; --nav-text: #f0f0f0; --nav-shadow: 0 2px 12px rgba(0,0,0,0.4); --toggle-bg: #c8102e; --toggle-knob: #ffffff; --dropdown-bg: #1e1e1e; --dropdown-shadow: 0 8px 24px rgba(0,0,0,0.5); /* Override Elementor global color system */ --e-global-color-primary: var(--brand); --e-global-color-secondary: var(--text-secondary); --e-global-color-text: var(--text-primary); --e-global-color-accent: var(--text-secondary); --e-global-color-astglobalcolor0: var(--bg); --e-global-color-astglobalcolor1: var(--text-primary); --e-global-color-astglobalcolor2: var(--text-secondary); --e-global-color-astglobalcolor3: var(--surface); --e-global-color-astglobalcolor4: var(--text-primary); --e-global-color-astglobalcolor5: var(--text-secondary); --e-global-color-astglobalcolor6: var(--border); --e-global-color-astglobalcolor7: var(--bg-secondary); --e-global-color-astglobalcolor8: var(--bg); --e-con-bg-color: var(--bg); } /* .tc-preserve-brand — add to Elementor's CSS Classes to skip dark mode */ html.dark-mode .tc-preserve-brand { background-color: unset !important; background-image: unset !important; } html.dark-mode .tc-preserve-brand .elementor-heading-title, html.dark-mode .tc-preserve-brand .elementor-text-editor, html.dark-mode .tc-preserve-brand .elementor-widget-text-editor, html.dark-mode .tc-preserve-brand .elementor-widget-text-editor p, html.dark-mode .tc-preserve-brand .elementor-widget-container p, html.dark-mode .tc-preserve-brand .elementor-widget-container span, html.dark-mode .tc-preserve-brand .elementor-icon-list-text, html.dark-mode .tc-preserve-brand .elementor-counter-title, html.dark-mode .tc-preserve-brand .elementor-counter-number, html.dark-mode .tc-preserve-brand .elementor-testimonial-content, html.dark-mode .tc-preserve-brand .elementor-price-list-header, html.dark-mode .tc-preserve-brand .elementor-price-list-price { color: inherit !important; background-color: transparent !important; } /* Apply theme colors globally */ html.dark-mode body { background-color: var(--bg) !important; color: var(--text-primary) !important; } html.dark-mode .site-header, html.dark-mode #masthead, html.dark-mode .ast-primary-header-bar { background-color: var(--nav-bg) !important; box-shadow: var(--nav-shadow) !important; } html.dark-mode .main-header-menu .menu-item > a, html.dark-mode .main-header-menu > li > a, html.dark-mode #site-navigation .menu-item > a { color: var(--nav-text) !important; } html.dark-mode .main-header-menu .menu-item > a:hover, html.dark-mode .main-header-menu > li > a:hover { color: var(--brand) !important; } html.dark-mode .entry-content, html.dark-mode .entry-title, html.dark-mode h1, html.dark-mode h2, html.dark-mode h3, html.dark-mode h4, html.dark-mode p { color: var(--text-primary) !important; } html.dark-mode .ast-container, html.dark-mode .entry-content, html.dark-mode article, html.dark-mode .site-content { background-color: var(--bg) !important; } /* Cards, boxes, tutor LMS elements */ html.dark-mode .tutor-card, html.dark-mode .tutor-course-card, html.dark-mode .tutor-course-details-tab-content, html.dark-mode .tutor-dashboard-content, html.dark-mode .tutor-wrap, html.dark-mode .course-card, html.dark-mode .tutor-course-filter-wrap, html.dark-mode .tutor-course-archive-filter-wrap, html.dark-mode .tutor-course-archive-results-wrap, html.dark-mode .tutor-course-archive-filters-wrap, html.dark-mode .tutor-course-topic, html.dark-mode .tutor-course-content-list-item, html.dark-mode .tutor-accordion-item, html.dark-mode .tutor-accordion-item-header, html.dark-mode .tutor-course-sidebar-card, html.dark-mode .tutor-course-sidebar-card-body, html.dark-mode .tutor-single-course-segment, html.dark-mode .tutor-dashboard-permalinks, html.dark-mode .tutor-question, html.dark-mode .tutor-quiz-question, html.dark-mode .woocommerce-account .woocommerce, html.dark-mode .wc-block-components-product-price { background-color: var(--surface) !important; color: var(--text-primary) !important; border-color: var(--border) !important; } html.dark-mode input, html.dark-mode textarea, html.dark-mode select { background-color: var(--surface) !important; color: var(--text-primary) !important; border-color: var(--border) !important; } html.dark-mode footer, html.dark-mode .site-footer, html.dark-mode #colophon { background-color: var(--bg-secondary) !important; color: var(--text-secondary) !important; border-top: 1px solid var(--border) !important; } /* ========================================================= DARK MODE — ELEMENTOR CONTAINERS (skip .tc-preserve-brand) ========================================================= */ /* Main sections — force dark bg unless explicitly branded */ html.dark-mode .elementor-section:not(.tc-preserve-brand), html.dark-mode .elementor-top-section:not(.tc-preserve-brand), html.dark-mode .e-con:not(.tc-preserve-brand), html.dark-mode .e-con-inner:not(.tc-preserve-brand), html.dark-mode .e-con-boxed:not(.tc-preserve-brand), html.dark-mode .e-con-full:not(.tc-preserve-brand), html.dark-mode .e-flex:not(.tc-preserve-brand), html.dark-mode .e-grid:not(.tc-preserve-brand) { background-color: var(--bg) !important; background-image: none !important; } /* Surface containers (inner content areas, slightly lighter) */ html.dark-mode .elementor-widget-container, html.dark-mode .elementor-widget-wrap, html.dark-mode .elementor-column-wrap { background-color: transparent !important; } /* ========================================================= DARK MODE — ELEMENTOR TEXT / HEADINGS ========================================================= */ html.dark-mode .elementor-heading-title, html.dark-mode .elementor-icon-list-text, html.dark-mode .elementor-text-editor, html.dark-mode .elementor-widget-text-editor, html.dark-mode .elementor-widget-text-editor p, html.dark-mode .elementor-widget-text-editor span, html.dark-mode .elementor-counter-title, html.dark-mode .elementor-counter-number, html.dark-mode .elementor-testimonial-content, html.dark-mode .elementor-testimonial-name, html.dark-mode .elementor-testimonial-job, html.dark-mode .elementor-tab-title, html.dark-mode .elementor-toggle-title, html.dark-mode .elementor-accordion-title, html.dark-mode .elementor-price-list-header, html.dark-mode .elementor-price-list-description, html.dark-mode .elementor-price-list-price, html.dark-mode .elementor-alert-title, html.dark-mode .elementor-alert-description, html.dark-mode .elementor-tabs-content-wrapper, html.dark-mode .elementor-widget-container p, html.dark-mode .elementor-widget-container span, html.dark-mode .elementor-widget-container li, html.dark-mode .elementor-widget-container div:not([class]), html.dark-mode .elementor-icon-box-title, html.dark-mode .elementor-icon-box-description, html.dark-mode .elementor-image-box-title, html.dark-mode .elementor-image-box-description, html.dark-mode .elementor-progress-percentage, html.dark-mode .elementor-star-rating__title, html.dark-mode .elementor-blockquote__content, html.dark-mode .elementor-author-box__name, html.dark-mode .elementor-author-box__bio, html.dark-mode .elementor-inline-items { color: var(--text-primary) !important; } /* Links inside text widgets */ html.dark-mode .elementor-text-editor a, html.dark-mode .elementor-widget-text-editor a { color: var(--brand) !important; } html.dark-mode .elementor-text-editor a:hover, html.dark-mode .elementor-widget-text-editor a:hover { color: var(--brand-hover) !important; } /* ========================================================= DARK MODE — ELEMENTOR BUTTONS ========================================================= */ html.dark-mode .elementor-button-wrapper .elementor-button, html.dark-mode .elementor-button { background-color: var(--brand) !important; color: #ffffff !important; border-color: var(--brand) !important; } html.dark-mode .elementor-button-wrapper .elementor-button:hover, html.dark-mode .elementor-button:hover { background-color: var(--brand-hover) !important; } /* Secondary / outline buttons — keep outline visible */ html.dark-mode .elementor-button.elementor-button-outline { background-color: transparent !important; color: var(--brand) !important; border-color: var(--brand) !important; } html.dark-mode .elementor-button.elementor-button-outline:hover { background-color: var(--brand) !important; color: #ffffff !important; } /* ========================================================= DARK MODE — ELEMENTOR FORMS ========================================================= */ html.dark-mode .elementor-field-group input, html.dark-mode .elementor-field-group textarea, html.dark-mode .elementor-field-group select, html.dark-mode .elementor-form-fields-wrapper input, html.dark-mode .elementor-form-fields-wrapper textarea, html.dark-mode .elementor-field-textual { background-color: var(--surface) !important; color: var(--text-primary) !important; border-color: var(--border) !important; } html.dark-mode .elementor-field-group input::placeholder, html.dark-mode .elementor-field-group textarea::placeholder, html.dark-mode .elementor-field-textual::placeholder { color: var(--text-secondary) !important; } html.dark-mode .elementor-field-group label, html.dark-mode .elementor-field-label { color: var(--text-primary) !important; } /* ========================================================= DARK MODE — ELEMENTOR CARDS / BOXES / GRIDS ========================================================= */ html.dark-mode .elementor-cta, html.dark-mode .elementor-flip-box, html.dark-mode .elementor-flip-box__front, html.dark-mode .elementor-flip-box__back, html.dark-mode .elementor-price-table, html.dark-mode .elementor-price-table__header, html.dark-mode .elementor-price-table__footer, html.dark-mode .elementor-post__card, html.dark-mode .elementor-portfolio-item__overlay { background-color: var(--surface) !important; border-color: var(--border) !important; } html.dark-mode .elementor-flip-box__layer__title, html.dark-mode .elementor-flip-box__layer__description, html.dark-mode .elementor-price-table__heading, html.dark-mode .elementor-price-table__subheading, html.dark-mode .elementor-price-table__price, html.dark-mode .elementor-price-table__features-list li, html.dark-mode .elementor-price-table__footer .elementor-price-table__button, html.dark-mode .elementor-post__title a, html.dark-mode .elementor-post__excerpt p { color: var(--text-primary) !important; } html.dark-mode .elementor-post__title a:hover { color: var(--brand) !important; } /* ========================================================= DARK MODE — ELEMENTOR NAV / MENU / ICONS / DIVIDERS ========================================================= */ html.dark-mode .elementor-nav-menu--dropdown { background-color: var(--surface) !important; border-color: var(--border) !important; } html.dark-mode .elementor-nav-menu--dropdown .elementor-item { color: var(--text-primary) !important; } html.dark-mode .elementor-nav-menu--dropdown .elementor-item:hover, html.dark-mode .elementor-nav-menu--dropdown .elementor-item.highlighted { background-color: var(--bg-secondary) !important; color: var(--brand) !important; } html.dark-mode .elementor-icon i, html.dark-mode .elementor-icon svg { color: var(--text-primary) !important; } html.dark-mode .elementor-divider-separator { border-color: var(--border) !important; } /* ========================================================= DARK MODE — ELEMENTOR CAROUSELS / SLIDES ========================================================= */ html.dark-mode .elementor-slides .slick-slide, html.dark-mode .elementor-carousel-item { background-color: var(--surface) !important; } /* ========================================================= DARK MODE — ELEMENTOR MISC ========================================================= */ html.dark-mode .elementor-widget-image img { opacity: 0.95; transition: opacity var(--transition); } html.dark-mode .elementor-background-overlay { background-color: rgba(0,0,0,0.5) !important; } html.dark-mode .elementor-lightbox { background-color: rgba(0,0,0,0.92) !important; } html.dark-mode .elementor-widget-counter .elementor-counter-number-wrapper { color: var(--brand) !important; } /* ========================================================= DARK MODE — TABS / ACCORDIONS / TOGGLES ========================================================= */ html.dark-mode .elementor-tabs-wrapper, html.dark-mode .elementor-tab-content, html.dark-mode .elementor-toggle-item, html.dark-mode .elementor-accordion-item { background-color: var(--surface) !important; border-color: var(--border) !important; } html.dark-mode .elementor-tab-title.elementor-active, html.dark-mode .elementor-accordion-item .elementor-active .elementor-accordion-title { background-color: var(--bg-secondary) !important; } /* ========================================================= DARK MODE — VIDEO / YOUTUBE / IFRAME EMBEDS ========================================================= */ html.dark-mode .elementor-widget-video .elementor-wrapper, html.dark-mode .elementor-widget-video, html.dark-mode .elementor-video-wrapper { background-color: #000 !important; } html.dark-mode .elementor-custom-embed-play i, html.dark-mode .elementor-custom-embed-play svg { color: #ffffff !important; filter: drop-shadow(0 0 4px rgba(0,0,0,0.6)); } html.dark-mode .elementor-custom-embed-image-overlay img { opacity: 0.85; } /* ========================================================= DARK MODE — COUNTERS / PROGRESS BARS ========================================================= */ html.dark-mode .elementor-progress-bar { background-color: var(--brand) !important; } html.dark-mode .elementor-progress-wrapper { background-color: var(--bg-secondary) !important; } /* ========================================================= DARK MODE — TUTOR LMS EXPANDED ========================================================= */ html.dark-mode .tutor-course-filter-wrap, html.dark-mode .tutor-course-archive-filter-wrap, html.dark-mode .tutor-course-archive-results-wrap, html.dark-mode .tutor-course-archive-filters-wrap { background-color: var(--surface) !important; border-color: var(--border) !important; } html.dark-mode .tutor-course-card:hover, html.dark-mode .tutor-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.5) !important; } html.dark-mode .tutor-course-title a { color: var(--text-primary) !important; } html.dark-mode .tutor-course-title a:hover { color: var(--brand) !important; } html.dark-mode .tutor-course-instructors-wrap, html.dark-mode .tutor-course-meta, html.dark-mode .tutor-course-rating-count, html.dark-mode .tutor-course-details-info, html.dark-mode .tutor-meta-value, html.dark-mode .tutor-meta-key, html.dark-mode .tutor-course-level, html.dark-mode .tutor-course-duration { color: var(--text-secondary) !important; } html.dark-mode .tutor-course-content-title, html.dark-mode .tutor-course-topic-title, html.dark-mode .tutor-lesson-title, html.dark-mode .tutor-quiz-title, html.dark-mode .tutor-assignment-title { color: var(--text-primary) !important; } html.dark-mode .tutor-course-topic, html.dark-mode .tutor-course-content-list-item, html.dark-mode .tutor-accordion-item, html.dark-mode .tutor-accordion-item-header { background-color: var(--surface) !important; border-color: var(--border) !important; } html.dark-mode .tutor-accordion-item-body-content { background-color: var(--bg) !important; color: var(--text-primary) !important; } html.dark-mode .tutor-course-benefits-list li, html.dark-mode .tutor-course-requirements-list li, html.dark-mode .tutor-course-target-audience-list li { color: var(--text-primary) !important; } html.dark-mode .tutor-course-sidebar-card, html.dark-mode .tutor-course-sidebar-card-body { background-color: var(--surface) !important; border-color: var(--border) !important; color: var(--text-primary) !important; } html.dark-mode .tutor-course-sidebar-card-footer { background-color: var(--bg-secondary) !important; border-color: var(--border) !important; } html.dark-mode .tutor-single-course-segment { background-color: var(--surface) !important; border-color: var(--border) !important; } /* Tutor LMS quiz / lesson */ html.dark-mode .tutor-question, html.dark-mode .tutor-quiz-question, html.dark-mode .tutor-quiz-btn-group button { background-color: var(--surface) !important; color: var(--text-primary) !important; border-color: var(--border) !important; } html.dark-mode .tutor-quiz-question-item label { color: var(--text-primary) !important; } html.dark-mode .tutor-quiz-btn-group .tutor-btn-primary { background-color: var(--brand) !important; border-color: var(--brand) !important; color: #ffffff !important; } /* Tutor LMS dashboard / profile */ html.dark-mode .tutor-dashboard-permalinks, html.dark-mode .tutor-dashboard-content, html.dark-mode .tutor-dashboard-setting-title, html.dark-mode .tutor-dashboard-setting-content { background-color: var(--surface) !important; border-color: var(--border) !important; } /* Dashboard header (user info bar) — must match main page bg, not surface */ html.dark-mode .tutor-dashboard-header { background-color: var(--bg) !important; border-color: var(--border) !important; } html.dark-mode .tutor-dashboard-permalinks li a { color: var(--text-primary) !important; } html.dark-mode .tutor-dashboard-permalinks li.active a, html.dark-mode .tutor-dashboard-permalinks li a:hover { color: var(--brand) !important; background-color: var(--bg-secondary) !important; } html.dark-mode .tutor-dashboard-info-table thead th { background-color: var(--bg-secondary) !important; color: var(--text-primary) !important; border-color: var(--border) !important; } html.dark-mode .tutor-dashboard-info-table tbody td { background-color: var(--surface) !important; color: var(--text-primary) !important; border-color: var(--border) !important; } html.dark-mode .tutor-dashboard-info-table tbody tr:hover td { background-color: var(--bg-secondary) !important; } /* Tutor LMS video player wrapper */ html.dark-mode .tutor-video-player { background-color: #000 !important; } html.dark-mode .plyr--video { background-color: #000 !important; } /* ========================================================= DARK MODE — WOOCOMMERCE EXPANDED ========================================================= */ html.dark-mode .woocommerce, html.dark-mode .woocommerce-page { color: var(--text-primary) !important; } html.dark-mode .woocommerce ul.products li.product, html.dark-mode .woocommerce-page ul.products li.product { background-color: var(--surface) !important; border-color: var(--border) !important; } html.dark-mode .woocommerce ul.products li.product .price, html.dark-mode .woocommerce ul.products li.product .woocommerce-loop-product__title, html.dark-mode .woocommerce-Price-amount { color: var(--text-primary) !important; } html.dark-mode .woocommerce div.product .product_title, html.dark-mode .woocommerce div.product p.price, html.dark-mode .woocommerce div.product span.price { color: var(--text-primary) !important; } html.dark-mode .woocommerce-tabs, html.dark-mode .woocommerce-tabs ul.tabs, html.dark-mode .woocommerce-tabs ul.tabs li, html.dark-mode .woocommerce-tabs .panel { background-color: var(--surface) !important; border-color: var(--border) !important; color: var(--text-primary) !important; } html.dark-mode .woocommerce-tabs ul.tabs li.active { background-color: var(--bg) !important; border-bottom-color: var(--bg) !important; } html.dark-mode .woocommerce table.shop_table, html.dark-mode .woocommerce table.shop_table th, html.dark-mode .woocommerce table.shop_table td { background-color: var(--surface) !important; color: var(--text-primary) !important; border-color: var(--border) !important; } html.dark-mode .woocommerce-checkout-review-order, html.dark-mode .woocommerce-order-details, html.dark-mode .woocommerce-customer-details { background-color: var(--surface) !important; color: var(--text-primary) !important; border-color: var(--border) !important; } html.dark-mode .woocommerce-MyAccount-navigation { background-color: var(--surface) !important; border-color: var(--border) !important; } html.dark-mode .woocommerce-MyAccount-navigation ul li a { color: var(--text-primary) !important; } html.dark-mode .woocommerce-MyAccount-navigation ul li.is-active a, html.dark-mode .woocommerce-MyAccount-navigation ul li a:hover { color: var(--brand) !important; } html.dark-mode .woocommerce-message, html.dark-mode .woocommerce-info { background-color: var(--surface) !important; color: var(--text-primary) !important; border-color: var(--border) !important; } /* ========================================================= DARK MODE — ASTRA EXPANDED ========================================================= */ html.dark-mode .ast-separate-container .ast-article-post, html.dark-mode .ast-separate-container .ast-article-single { background-color: var(--surface) !important; border-color: var(--border) !important; } html.dark-mode .ast-separate-container .blog-layout-1, html.dark-mode .ast-separate-container .ast-blog-featured-section-wrapper { background-color: transparent !important; } html.dark-mode .ast-pagination .page-numbers { background-color: var(--surface) !important; color: var(--text-primary) !important; border-color: var(--border) !important; } html.dark-mode .ast-pagination .page-numbers.current { background-color: var(--brand) !important; color: #ffffff !important; } html.dark-mode .sidebar-main .widget, html.dark-mode #secondary .widget { background-color: var(--surface) !important; color: var(--text-primary) !important; border-color: var(--border) !important; } html.dark-mode .sidebar-main .widget-title, html.dark-mode #secondary .widget-title { color: var(--text-primary) !important; } html.dark-mode .ast-single-post .entry-meta, html.dark-mode .ast-single-post .entry-meta a { color: var(--text-secondary) !important; } html.dark-mode .ast-related-post-title { color: var(--text-primary) !important; } html.dark-mode .ast-author-box { background-color: var(--surface) !important; border-color: var(--border) !important; } html.dark-mode .ast-author-box .ast-author-info { color: var(--text-primary) !important; } html.dark-mode .ast-breadcrumbs-wrapper span, html.dark-mode .ast-breadcrumbs-wrapper a { color: var(--text-secondary) !important; } html.dark-mode .ast-scroll-to-top-wrap .ast-scroll-top-icon { background-color: var(--brand) !important; color: #ffffff !important; } /* ========================================================= DARK MODE — COMMON / GENERIC ========================================================= */ html.dark-mode table th, html.dark-mode table td { border-color: var(--border) !important; } html.dark-mode table thead th { background-color: var(--bg-secondary) !important; color: var(--text-primary) !important; } html.dark-mode table tbody td { background-color: var(--surface) !important; color: var(--text-primary) !important; } html.dark-mode a:not(.elementor-button):not(.tutor-btn-primary):not(.wp-block-button__link) { color: var(--brand); } html.dark-mode a:hover:not(.elementor-button):not(.tutor-btn-primary):not(.wp-block-button__link) { color: var(--brand-hover); } html.dark-mode blockquote, html.dark-mode .wp-block-quote { background-color: var(--surface) !important; color: var(--text-primary) !important; border-color: var(--brand) !important; } html.dark-mode .wp-block-pullquote { background-color: var(--surface) !important; color: var(--text-primary) !important; border-color: var(--border) !important; } html.dark-mode pre, html.dark-mode code, html.dark-mode .wp-block-code { background-color: var(--bg-secondary) !important; color: var(--text-primary) !important; } html.dark-mode hr, html.dark-mode .wp-block-separator { border-color: var(--border) !important; } html.dark-mode .wp-block-table figcaption, html.dark-mode .wp-block-image figcaption, html.dark-mode .wp-block-gallery figcaption { color: var(--text-secondary) !important; } /* ========================================================= DARK MODE — MODALS / DIALOGS / POP-UPS ========================================================= */ html.dark-mode .elementor-popup-modal .dialog-widget-content, html.dark-mode .elementor-location-popup, html.dark-mode .e-off-canvas, html.dark-mode .tutor-modal-content, html.dark-mode .tutor-modal-header, html.dark-mode .tutor-modal-body, html.dark-mode .tutor-modal-footer, html.dark-mode .iziModal, html.dark-mode .iziModal-header { background-color: var(--surface) !important; color: var(--text-primary) !important; } html.dark-mode .tutor-modal-close { color: var(--text-primary) !important; } html.dark-mode .tutor-modal-close:hover { color: var(--brand) !important; } /* ========================================================= RTL SUPPORT — Arabic ========================================================= */ html[dir="rtl"] body { font-family: 'Cairo', 'Tajawal', sans-serif; } html[dir="rtl"] .ast-primary-header-bar .ast-flex { flex-direction: row-reverse; } html[dir="rtl"] .main-header-menu { direction: rtl; } html[dir="rtl"] .lang-switcher-dropdown, html[dir="rtl"] #tc-controls { left: 16px; right: auto; } /* ========================================================= DARK MODE — CUSTOM HEADER #sara-toumi-header ========================================================= */ html.dark-mode #sara-toumi-header { --color-bg: var(--nav-bg); --color-border: var(--border); --color-text: var(--text-primary); --color-text-muted: var(--text-secondary); } html.dark-mode #sara-toumi-header .site-nav { background: var(--nav-bg) !important; border-bottom-color: var(--border) !important; } html.dark-mode #sara-toumi-header .nav-logo-name { color: var(--text-primary) !important; } html.dark-mode #sara-toumi-header .nav-link { color: var(--text-secondary) !important; } html.dark-mode #sara-toumi-header .nav-link:hover, html.dark-mode #sara-toumi-header .nav-link.active { color: var(--brand) !important; background: rgba(200, 16, 46, 0.12) !important; } html.dark-mode #sara-toumi-header .btn-primary { background: var(--brand) !important; } html.dark-mode #sara-toumi-header .btn-primary:hover { background: var(--brand-hover) !important; } html.dark-mode #sara-toumi-header .cart-btn { background: transparent !important; color: var(--text-primary) !important; border-color: var(--border) !important; } html.dark-mode #sara-toumi-header .cart-btn:hover { background: rgba(200, 16, 46, 0.12) !important; border-color: var(--brand) !important; color: var(--brand) !important; } html.dark-mode #sara-toumi-header .hamburger-btn { color: var(--text-primary) !important; } html.dark-mode #sara-toumi-header .mobile-menu { background: var(--nav-bg) !important; border-top-color: var(--border) !important; } html.dark-mode #sara-toumi-header .tc-lang-btn { color: var(--nav-text); border-color: var(--border); } html.dark-mode #sara-toumi-header .tc-lang-btn:hover { color: var(--brand); border-color: var(--brand); } /* ========================================================= NAV CONTROLS WRAPPER (dark toggle + language switcher injected by JS) ========================================================= */ #tc-controls { display: inline-flex; align-items: center; gap: 8px; margin: 0; flex-shrink: 0; vertical-align: middle; } /* --- Dark Mode Toggle (icon button) --- */ #tc-dark-toggle { width: 38px; height: 38px; border-radius: 50%; background: transparent; border: 1.5px solid var(--border); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; line-height: 1; transition: border-color var(--transition), color var(--transition); flex-shrink: 0; outline: none; padding: 0; color: var(--nav-text); } #tc-dark-toggle:hover { border-color: var(--brand); color: var(--brand); } #tc-dark-toggle .tc-toggle-icon { position: static; font-size: 17px; line-height: 1; pointer-events: none; } #tc-dark-toggle .tc-icon-sun { display: inline; } #tc-dark-toggle .tc-icon-moon { display: none; } html.dark-mode #tc-dark-toggle .tc-icon-sun { display: none; } html.dark-mode #tc-dark-toggle .tc-icon-moon { display: inline; } /* Mobile dark toggle — same style, smaller */ #tc-dark-toggle-mob { background: none; border: none; cursor: pointer; font-size: 18px; padding: 0; line-height: 1; color: var(--nav-text); display: inline-flex; align-items: center; } #tc-dark-toggle-mob .tc-icon-sun { display: inline; } #tc-dark-toggle-mob .tc-icon-moon { display: none; } html.dark-mode #tc-dark-toggle-mob .tc-icon-sun { display: none; } html.dark-mode #tc-dark-toggle-mob .tc-icon-moon { display: inline; } /* --- Language Switcher --- */ .tc-lang-switcher { position: relative; } .tc-lang-btn { display: flex; align-items: center; gap: 5px; padding: 5px 10px; background: transparent; border: 1.5px solid var(--border); border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--nav-text); transition: border-color var(--transition), color var(--transition), background var(--transition); letter-spacing: 0.5px; } .tc-lang-btn:hover { border-color: var(--brand); color: var(--brand); } .tc-lang-btn .tc-flag { font-size: 16px; line-height: 1; } .tc-lang-btn .tc-chevron { font-size: 9px; transition: transform var(--transition); opacity: 0.6; } .tc-lang-switcher.open .tc-chevron { transform: rotate(180deg); } /* Dropdown */ .tc-lang-dropdown { position: absolute; top: calc(100% + 8px); right: 0; background: var(--dropdown-bg); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--dropdown-shadow); overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--transition), transform var(--transition), visibility var(--transition); z-index: 9999; min-width: 140px; } .tc-lang-switcher.open .tc-lang-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .tc-lang-option { display: flex; align-items: center; gap: 9px; padding: 10px 14px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--text-primary); transition: background var(--transition), color var(--transition); white-space: nowrap; border: none; background: transparent; width: 100%; text-align: left; } html[dir="rtl"] .tc-lang-option { text-align: right; flex-direction: row-reverse; } .tc-lang-option:hover { background: var(--bg-secondary); color: var(--brand); } .tc-lang-option.active { color: var(--brand); font-weight: 700; } .tc-lang-option .tc-opt-flag { font-size: 18px; } @media (max-width: 480px) { #tc-controls { gap: 7px; margin: 0; } .tc-lang-btn span:not(.tc-flag):not(.tc-chevron) { display: none; } } /* ========================================================= DARK MODE — COMPREHENSIVE ELEMENTOR FIX v2 Root cause: Elementor sets backgrounds in THREE ways: 1. Inline style="" on the element → JS patcher handles 2. A generated stylesheet (.elementor-kit-NNN) → CSS vars handle 3. A parent container's CSS var that cascades down → needs explicit override Strategy: We don't fight inline styles with CSS (we lose). Instead we paint EVERYTHING dark via the cascade, then restore only the intentionally-branded exceptions. The JS patcher still handles truly inline overrides. ========================================================= */ /* --- 1. PAINT THE WHOLE CANVAS DARK --- */ /* Every Elementor container/section that isn't explicitly branded */ html.dark-mode .elementor-location-header ~ *, html.dark-mode .elementor-section-wrap, html.dark-mode #page, html.dark-mode .site, html.dark-mode .ast-container, html.dark-mode main, html.dark-mode .content-area, html.dark-mode .site-primary { background-color: var(--bg) !important; } /* --- 2. EVERY ELEMENTOR CONTAINER TYPE --- */ html.dark-mode .e-con:not(.tc-preserve-brand), html.dark-mode .e-con-inner:not(.tc-preserve-brand), html.dark-mode .e-con-boxed:not(.tc-preserve-brand), html.dark-mode .e-con-full:not(.tc-preserve-brand), html.dark-mode .e-flex:not(.tc-preserve-brand), html.dark-mode .e-grid:not(.tc-preserve-brand), html.dark-mode .elementor-section:not(.tc-preserve-brand), html.dark-mode .elementor-top-section:not(.tc-preserve-brand), html.dark-mode .elementor-inner-section:not(.tc-preserve-brand), html.dark-mode .elementor-column:not(.tc-preserve-brand), html.dark-mode .elementor-column-wrap:not(.tc-preserve-brand), html.dark-mode .elementor-widget-wrap:not(.tc-preserve-brand), html.dark-mode .elementor-widget-container:not(.tc-preserve-brand) { background-color: var(--bg) !important; background-image: none !important; /* Override the CSS custom property Elementor uses for container bg */ --e-con-bg-color: var(--bg) !important; --background-color: var(--bg) !important; } /* --- 3. ALL TEXT INSIDE ELEMENTOR --- */ html.dark-mode .elementor-section:not(.tc-preserve-brand) *, html.dark-mode .e-con:not(.tc-preserve-brand) * { color: var(--text-primary) !important; } /* --- 4. RESTORE EXCEPTIONS (order matters — these must come AFTER) --- */ /* 4a. Brand sections (red backgrounds) keep their colors */ html.dark-mode .tc-preserve-brand, html.dark-mode .tc-preserve-brand * { /* Intentionally left blank — these elements are opted-out of dark mode */ } /* 4b. Brand-red heading text that Elementor explicitly colored */ html.dark-mode .elementor-heading-title, html.dark-mode .elementor-counter-number-wrapper { /* Inherits from parent rule above — override only if it was brand red */ } /* 4c. Buttons must keep their colors */ html.dark-mode .elementor-button-wrapper .elementor-button, html.dark-mode .elementor-button, html.dark-mode a.elementor-button { background-color: var(--brand) !important; color: #ffffff !important; border-color: var(--brand) !important; } html.dark-mode .elementor-button.elementor-button-outline, html.dark-mode a.elementor-button.elementor-button-outline { background-color: transparent !important; color: var(--brand) !important; border-color: var(--brand) !important; } /* 4d. Intentionally dark Elementor widgets (icon boxes with dark bg set by design) */ /* These are the dark cards on your About page — they look correct already */ /* They have inline style="background-color:#1a1a1a" etc. which the JS patcher will NOT override because isLightComputed() will return false for them */ /* 4e. Images, videos, iframes — never colorize these */ html.dark-mode .elementor-section img, html.dark-mode .e-con img, html.dark-mode .elementor-section iframe, html.dark-mode .e-con iframe, html.dark-mode .elementor-section video, html.dark-mode .e-con video { background-color: transparent !important; background-image: unset !important; } /* 4f. Forms */ html.dark-mode .elementor-field-group input, html.dark-mode .elementor-field-group textarea, html.dark-mode .elementor-field-group select, html.dark-mode .elementor-field-textual { background-color: var(--surface) !important; color: var(--text-primary) !important; border-color: var(--border) !important; } /* --- 5. INLINE STYLE OVERRIDES VIA ATTRIBUTE SELECTORS --- These target the exact pattern Elementor uses in its generated HTML. They only work for background-color and color, not background-image, but they're a reliable CSS-only catch for the most common cases. The :not() chain prevents collateral damage. */ html.dark-mode [style*="background-color: rgb"]:not(.tc-preserve-brand):not([class*="elementor-button"]):not(#tc-controls):not(#tc-controls *):not(input):not(textarea):not(select):not([class*="whatsapp"]):not([id*="whatsapp"]):not([class*="wpcwb"]):not([class*="wpwb"]):not([class*="wab-"]) { background-color: var(--bg) !important; } html.dark-mode [style*="background-color:#fff"]:not(.tc-preserve-brand):not([class*="elementor-button"]):not(#tc-controls):not(#tc-controls *), html.dark-mode [style*="background-color: #fff"]:not(.tc-preserve-brand):not([class*="elementor-button"]):not(#tc-controls):not(#tc-controls *), html.dark-mode [style*="background-color:#FFF"]:not(.tc-preserve-brand):not([class*="elementor-button"]):not(#tc-controls):not(#tc-controls *), html.dark-mode [style*="background-color: #FFF"]:not(.tc-preserve-brand):not([class*="elementor-button"]):not(#tc-controls):not(#tc-controls *), html.dark-mode [style*="background-color:#ffffff"]:not(.tc-preserve-brand):not([class*="elementor-button"]):not(#tc-controls):not(#tc-controls *), html.dark-mode [style*="background-color: #ffffff"]:not(.tc-preserve-brand):not([class*="elementor-button"]):not(#tc-controls):not(#tc-controls *), html.dark-mode [style*="background-color:#FFFFFF"]:not(.tc-preserve-brand):not([class*="elementor-button"]):not(#tc-controls):not(#tc-controls *), html.dark-mode [style*="background-color: #FFFFFF"]:not(.tc-preserve-brand):not([class*="elementor-button"]):not(#tc-controls):not(#tc-controls *) { background-color: var(--bg) !important; } /* Text color overrides — dark text that Elementor hardcoded */ html.dark-mode [style*="color: rgb(0"]:not(.tc-preserve-brand):not([class*="elementor-button"]):not(#tc-controls):not(#tc-controls *), html.dark-mode [style*="color:rgb(0"]:not(.tc-preserve-brand):not([class*="elementor-button"]):not(#tc-controls):not(#tc-controls *), html.dark-mode [style*="color: #000"]:not(.tc-preserve-brand):not([class*="elementor-button"]):not(#tc-controls):not(#tc-controls *), html.dark-mode [style*="color:#000"]:not(.tc-preserve-brand):not([class*="elementor-button"]):not(#tc-controls):not(#tc-controls *), html.dark-mode [style*="color: #111"]:not(.tc-preserve-brand):not([class*="elementor-button"]):not(#tc-controls):not(#tc-controls *), html.dark-mode [style*="color:#111"]:not(.tc-preserve-brand):not([class*="elementor-button"]):not(#tc-controls):not(#tc-controls *), html.dark-mode [style*="color: #333"]:not(.tc-preserve-brand):not([class*="elementor-button"]):not(#tc-controls):not(#tc-controls *), html.dark-mode [style*="color:#333"]:not(.tc-preserve-brand):not([class*="elementor-button"]):not(#tc-controls):not(#tc-controls *), html.dark-mode [style*="color: #444"]:not(.tc-preserve-brand):not([class*="elementor-button"]):not(#tc-controls):not(#tc-controls *), html.dark-mode [style*="color:#444"]:not(.tc-preserve-brand):not([class*="elementor-button"]):not(#tc-controls):not(#tc-controls *), html.dark-mode [style*="color: #555"]:not(.tc-preserve-brand):not([class*="elementor-button"]):not(#tc-controls):not(#tc-controls *), html.dark-mode [style*="color:#555"]:not(.tc-preserve-brand):not([class*="elementor-button"]):not(#tc-controls):not(#tc-controls *) { color: var(--text-primary) !important; } /* Restore white text on brand/dark backgrounds */ html.dark-mode .tc-preserve-brand *, html.dark-mode [style*="background-color:#c8102e"] *, html.dark-mode [style*="background-color: #c8102e"] * { color: #ffffff !important; } /* --- 6. ELEMENTOR KIT / GLOBAL STYLE OVERRIDES --- Elementor generates a stylesheet with :root-level custom properties AND injects them on .elementor-kit-NNN. We override both. */ html.dark-mode [class*="elementor-kit-"] { --e-global-color-text: var(--text-primary) !important; --e-global-color-primary: var(--brand) !important; --e-global-color-secondary: var(--text-secondary) !important; --e-global-color-accent: var(--text-secondary) !important; } /* ========================================================= DARK MODE — TUTOR LMS COURSE ARCHIVE + FILTER SIDEBAR ========================================================= */ /* Filter sidebar — labels, checkboxes, headings */ html.dark-mode .tutor-course-filter-wrap, html.dark-mode .tutor-course-archive-filter-wrap, html.dark-mode .tutor-course-archive-filters-wrap, html.dark-mode .tutor-course-filter, html.dark-mode .tutor-filter-sidebar, html.dark-mode .tutor-sidebar, html.dark-mode .tutor-sidebar-widget, html.dark-mode .tutor-course-filter-body, html.dark-mode .tutor-course-filter-header { background-color: var(--surface) !important; color: var(--text-primary) !important; border-color: var(--border) !important; } /* ALL text inside the filter area */ html.dark-mode .tutor-course-filter-wrap *, html.dark-mode .tutor-course-archive-filter-wrap *, html.dark-mode .tutor-course-archive-filters-wrap *, html.dark-mode .tutor-filter-sidebar *, html.dark-mode .tutor-sidebar *, html.dark-mode .tutor-sidebar-widget * { color: var(--text-primary) !important; } /* Filter headings (Type, Category, Tag, Level) */ html.dark-mode .tutor-course-filter-wrap h3, html.dark-mode .tutor-course-filter-wrap h4, html.dark-mode .tutor-course-filter-wrap label, html.dark-mode .tutor-course-filter-wrap span, html.dark-mode .tutor-course-archive-filters-wrap h3, html.dark-mode .tutor-course-archive-filters-wrap h4, html.dark-mode .tutor-course-archive-filters-wrap label, html.dark-mode .tutor-course-archive-filters-wrap span, html.dark-mode .tutor-filter-sidebar h3, html.dark-mode .tutor-filter-sidebar h4, html.dark-mode .tutor-filter-sidebar label, html.dark-mode .tutor-filter-sidebar span { color: var(--text-primary) !important; } /* Checkboxes */ html.dark-mode .tutor-course-filter-wrap input[type="checkbox"], html.dark-mode .tutor-course-archive-filters-wrap input[type="checkbox"], html.dark-mode .tutor-filter-sidebar input[type="checkbox"] { accent-color: var(--brand); } /* Course cards in archive */ html.dark-mode .tutor-card, html.dark-mode .tutor-course-card, html.dark-mode .tutor-course-list-item, html.dark-mode .tutor-archive-course-card { background-color: var(--surface) !important; border-color: var(--border) !important; color: var(--text-primary) !important; } /* ALL text inside course cards */ html.dark-mode .tutor-card *, html.dark-mode .tutor-course-card *, html.dark-mode .tutor-course-list-item *, html.dark-mode .tutor-archive-course-card * { color: var(--text-primary) !important; } /* Course card footer — price area */ html.dark-mode .tutor-card-footer, html.dark-mode .tutor-course-card-footer, html.dark-mode .tutor-course-price, html.dark-mode .tutor-price, html.dark-mode .tutor-fs-5, html.dark-mode .tutor-fw-bold, html.dark-mode [class*="tutor-price"], html.dark-mode [class*="tutor-course-price"] { color: var(--text-primary) !important; background-color: transparent !important; } /* "30% Booked" progress text */ html.dark-mode .tutor-course-booked-percentage, html.dark-mode .tutor-booked-percentage, html.dark-mode [class*="booked"], html.dark-mode .tutor-card-footer span, html.dark-mode .tutor-course-card-footer span { color: var(--text-secondary) !important; } /* Sort dropdown (Release Date newest first) */ html.dark-mode .tutor-course-sort-filter, html.dark-mode .tutor-course-archive-results-wrap, html.dark-mode .tutor-archive-sort, html.dark-mode select.tutor-select, html.dark-mode .tutor-select-wrap, html.dark-mode .tutor-select-wrap select { background-color: var(--surface) !important; color: var(--text-primary) !important; border-color: var(--border) !important; } /* View Cart button outline style */ html.dark-mode .tutor-btn-outline-primary { color: var(--brand) !important; border-color: var(--brand) !important; background-color: transparent !important; } html.dark-mode .tutor-btn-outline-primary:hover { background-color: var(--brand) !important; color: #ffffff !important; } /* ========================================================= DARK MODE — TUTOR LMS STUDENT DASHBOARD ========================================================= */ /* Dashboard stat cards */ html.dark-mode .tutor-dashboard-overview-card, html.dark-mode .tutor-stats-card, html.dark-mode [class*="tutor-dashboard"] .tutor-card, html.dark-mode .tutor-dashboard-overview { background-color: var(--surface) !important; border-color: var(--border) !important; } html.dark-mode .tutor-dashboard-overview-card *, html.dark-mode .tutor-stats-card *, html.dark-mode [class*="tutor-dashboard"] .tutor-card * { color: var(--text-primary) !important; } /* Icon circle backgrounds in stat cards */ html.dark-mode .tutor-dashboard-overview-card .tutor-icon-wrap, html.dark-mode .tutor-dashboard-overview-card .tutor-dashboard-overview-icon, html.dark-mode [class*="tutor-icon-bg"] { background-color: rgba(200, 16, 46, 0.15) !important; } /* Dashboard header area (name, stars, buttons) */ html.dark-mode .tutor-dashboard-header, html.dark-mode .tutor-dashboard-instructor-header, html.dark-mode .tutor-dashboard-user-header { background-color: var(--bg) !important; color: var(--text-primary) !important; } html.dark-mode .tutor-dashboard-header * { color: var(--text-primary) !important; } /* "New Bundle" / "New Course" outline buttons in header */ html.dark-mode .tutor-btn-outline-primary, html.dark-mode button.tutor-btn-outline-primary, html.dark-mode a.tutor-btn-outline-primary { color: var(--brand) !important; border-color: var(--brand) !important; background-color: transparent !important; } /* Sidebar nav items */ html.dark-mode .tutor-dashboard-permalinks, html.dark-mode .tutor-dashboard-nav { background-color: var(--surface) !important; } html.dark-mode .tutor-dashboard-permalinks *, html.dark-mode .tutor-dashboard-nav * { color: var(--text-primary) !important; } html.dark-mode .tutor-dashboard-permalinks li.tutor-is-active > a, html.dark-mode .tutor-dashboard-nav li.tutor-is-active > a, html.dark-mode .tutor-dashboard-permalinks li > a.tutor-is-active { color: var(--brand) !important; background-color: rgba(200, 16, 46, 0.1) !important; } /* ========================================================= DARK MODE — WHATSAPP FLOATING BUTTON FIX (v4 — clean) RULE: Only target dedicated WA plugin elements by their specific plugin class names. NEVER use [class*="whatsapp"] a because that catches any inside any element that has "whatsapp" in its class — including footer phone links. ========================================================= */ /* Wrapper elements — transparent bg, no glow */ html.dark-mode .wpcwb-button, html.dark-mode .wpcwb-floating-btn, html.dark-mode .wcb-whatsapp, html.dark-mode .wab-button, html.dark-mode .whatsapp-chatbox { background-color: transparent !important; box-shadow: none !important; } /* The actual floating button circle — green with glow */ html.dark-mode .wpcwb-button > a, html.dark-mode .wpcwb-floating-btn > a, html.dark-mode .wcb-whatsapp > a, html.dark-mode .wab-button > a, html.dark-mode .whatsapp-chat-button > a { background-color: #25D366 !important; box-shadow: 0 4px 20px rgba(37, 211, 102, 0.5) !important; } /* Icon inside stays white and bg transparent */ html.dark-mode .wpcwb-button > a *, html.dark-mode .wpcwb-floating-btn > a *, html.dark-mode .wcb-whatsapp > a *, html.dark-mode .wab-button > a *, html.dark-mode .whatsapp-chat-button > a * { color: #ffffff !important; fill: #ffffff !important; background-color: transparent !important; box-shadow: none !important; } /* ========================================================= DARK MODE — TARGETED FIXES v3 ========================================================= */ /* --- FIX: Level badge circles (A1/A2/B1/B2) --- These are Elementor icon-box or custom HTML elements with a light-pink/brand bg. Our nuclear rule kills their background. Restore brand-tinted circle backgrounds. */ html.dark-mode .elementor-icon-box-icon .elementor-icon, html.dark-mode .elementor-icon-box-icon, html.dark-mode [class*="level-badge"], html.dark-mode [class*="tc-level"], html.dark-mode .tc-badge { background-color: rgba(200, 16, 46, 0.15) !important; color: var(--brand) !important; } /* Elementor icon-box title (Level A1 - Foundation etc.) */ html.dark-mode .elementor-icon-box-title, html.dark-mode .elementor-icon-box-title a, html.dark-mode .elementor-icon-box-description { color: var(--text-primary) !important; } /* --- FIX: Sort dropdown menu (white bg in dark mode) --- Tutor LMS renders a custom dropdown, not a native Course The text is a direct child — color on label covers it */ html.dark-mode .tutor-course-filter label, html.dark-mode .tutor-course-filter-form label { color: var(--text-primary) !important; } /* Checkboxes */ html.dark-mode .tutor-form-check-input { accent-color: var(--brand); border-color: var(--border) !important; } /* Sidebar container background */ html.dark-mode .tutor-course-filter-container, html.dark-mode .tutor-course-filter { background-color: transparent !important; } /* ── .tutor-color-black CLASS ──────────────────────────── Tutor uses this utility class for dark text on: course title, price, "30% Booked", instructor name etc. In dark mode it must become light. */ html.dark-mode .tutor-color-black { color: var(--text-primary) !important; } /* ── SORT DROPDOWN ─────────────────────────────────────── Tutor's custom select: .tutor-js-form-select with inner .tutor-form-select-dropdown > .tutor-form-select-options */ html.dark-mode .tutor-form-control.tutor-form-select, html.dark-mode .tutor-js-form-select, html.dark-mode .tutor-form-select-label { background-color: var(--surface) !important; color: var(--text-primary) !important; border-color: var(--border) !important; } html.dark-mode .tutor-form-select-dropdown, html.dark-mode .tutor-form-select-options { background-color: var(--surface) !important; border-color: var(--border) !important; } html.dark-mode .tutor-form-select-option { background-color: var(--surface) !important; color: var(--text-primary) !important; } html.dark-mode .tutor-form-select-option:hover, html.dark-mode .tutor-form-select-option.is-active { background-color: var(--bg-secondary) !important; color: var(--brand) !important; } html.dark-mode .tutor-form-select-option span { color: inherit !important; } /* ── COURSE CARD PRICE + BOOKED ───────────────────────── .tutor-course-price.tutor-color-black → covered above .tutor-fs-7.tutor-color-black ("30% Booked") → covered above */ /* Course card footer divider */ html.dark-mode .tutor-course-card .tutor-card-footer, html.dark-mode .tutor-card-footer { border-top-color: var(--border) !important; background-color: transparent !important; } /* ── "Courses" heading above the filter on mobile ───────── */ html.dark-mode .tutor-fs-3.tutor-fw-medium.tutor-color-black { color: var(--text-primary) !important; } /* ========================================================= DARK MODE — TUTOR LMS (exact selectors from real HTML) ========================================================= */ /* Override Tutor's own CSS variables at :root level */ html.dark-mode { --tutor-color-gray: #1e1e1e !important; --tutor-border-color: #2e2e2e !important; --tutor-body-color: #f0f0f0 !important; } /* ── COURSES PAGE: sidebar strip color mismatch ────────── The gray left column (.tutor-col-3) uses --tutor-color-gray as its background in Tutor's stylesheet. Overriding the var above fixes it, but add explicit fallback too. */ html.dark-mode .tutor-course-filter-container, html.dark-mode .tutor-col-3.tutor-course-filter-container { background-color: var(--bg) !important; } html.dark-mode .tutor-wrap.tutor-courses-wrap, html.dark-mode .course-archive-page { background-color: var(--bg) !important; } /* ── DASHBOARD: header strip (Kareem Ahmed bar) ────────── Exact class from HTML: .tutor-frontend-dashboard-header wraps .tutor-dashboard-header — both must match page bg */ html.dark-mode .tutor-frontend-dashboard-header { background-color: var(--bg) !important; border-color: var(--border) !important; } html.dark-mode .tutor-header-left-side.tutor-dashboard-header { background-color: var(--bg) !important; border: none !important; } /* Username "Kareem Ahmed" — .tutor-color-black covered globally above, but add the specific dashboard class for extra specificity */ html.dark-mode .tutor-dashboard-header-username { color: var(--text-primary) !important; } /* Dashboard title "Dashboard" text */ html.dark-mode .tutor-dashboard-title { color: var(--text-primary) !important; } /* ── DASHBOARD: stat cards ─────────────────────────────── Each stat card is .tutor-card containing a flex row */ html.dark-mode .tutor-card { background-color: var(--surface) !important; border-color: var(--border) !important; } /* Stat numbers (0, 1, £0.00) */ html.dark-mode .tutor-card .tutor-fs-3.tutor-fw-bold, html.dark-mode .tutor-card .tutor-fs-4.tutor-fw-bold { color: var(--text-primary) !important; } /* Stat labels ("Enrolled Courses", "Active Courses" etc.) These use .tutor-color-secondary — override it */ html.dark-mode .tutor-color-secondary { color: var(--text-secondary) !important; } html.dark-mode .tutor-color-muted { color: var(--text-secondary) !important; } /* ── DASHBOARD: left nav menu ────────────────────────────*/ html.dark-mode .tutor-dashboard-left-menu { background-color: var(--surface) !important; } html.dark-mode .tutor-dashboard-left-menu a, html.dark-mode .tutor-dashboard-left-menu span { color: var(--text-primary) !important; } html.dark-mode .tutor-dashboard-menu-divider-header { color: var(--text-secondary) !important; } /* Active nav item */ html.dark-mode .tutor-dashboard-left-menu .is-active a, html.dark-mode .tutor-dashboard-left-menu li.tutor-is-active > a { color: var(--brand) !important; } /* ── ICONIC BUTTONS (bell, filter toggle) ──────────────── .tutor-iconic-btn-secondary uses --tutor-color-gray as bg */ html.dark-mode .tutor-iconic-btn-secondary { background-color: var(--surface) !important; color: var(--text-primary) !important; border-color: var(--border) !important; } /* ── DASHBOARD CONTENT AREA ──────────────────────────────*/ html.dark-mode .tutor-dashboard-content, html.dark-mode .tutor-dashboard-content-inner { background-color: var(--bg) !important; } /* ── TUTOR WRAP (page background) ────────────────────────*/ html.dark-mode .tutor-wrap.tutor-frontend-dashboard { background-color: var(--bg) !important; } /* ========================================================= DARK MODE — DASHBOARD, CART & CHECKOUT (from real HTML) ========================================================= */ /* ── DASHBOARD: blue active line fix ──────────────────── The active item uses class "active" and Tutor renders a left border via --ast-global-color-2 (blue). Override it. */ html.dark-mode .tutor-dashboard-left-menu li.tutor-dashboard-menu-item.active, html.dark-mode .tutor-dashboard-left-menu li.tutor-dashboard-menu-item.active a { border-color: var(--brand) !important; color: var(--brand) !important; } /* The blue line itself is a left border on the li */ html.dark-mode .tutor-dashboard-left-menu li.active { border-left-color: var(--brand) !important; } /* Also catch Astra's --ast-global-color-2 blue reference */ html.dark-mode { --ast-global-color-2: var(--brand) !important; } /* ── CART PAGE ─────────────────────────────────────────── .tutor-cart-page, .tutor-cart-page-wrapper, .tutor-cart-course-item, .tutor-cart-summery */ html.dark-mode .tutor-cart-page, html.dark-mode .tutor-cart-page-wrapper { background-color: var(--bg) !important; } html.dark-mode .tutor-cart-course-item { background-color: var(--surface) !important; border-color: var(--border) !important; } html.dark-mode .tutor-cart-course-item * { color: var(--text-primary) !important; } /* Course info meta text (16h, Beginner) */ html.dark-mode .tutor-cart-course-info li { color: var(--text-secondary) !important; } /* Summary box */ html.dark-mode .tutor-cart-summery { background-color: var(--surface) !important; border-color: var(--border) !important; } html.dark-mode .tutor-cart-summery * { color: var(--text-primary) !important; } html.dark-mode .tutor-cart-summery-item { border-color: var(--border) !important; } /* "1 Course in Cart" and "Summary:" headings */ html.dark-mode .tutor-cart-page .tutor-color-black, html.dark-mode .tutor-cart-page .tutor-fs-3 { color: var(--text-primary) !important; } /* Remove button */ html.dark-mode .tutor-cart-remove-button { color: var(--brand) !important; } /* ── CHECKOUT PAGE ─────────────────────────────────────── .tutor-checkout-page, .tutor-checkout-container, .tutor-checkout-details, .tutor-checkout-billing */ /* Top spacing — checkout content sits too close to header */ html.dark-mode .tutor-checkout-page, .tutor-checkout-page { padding-top: 2.5rem !important; } html.dark-mode .tutor-checkout-page, html.dark-mode .tutor-checkout-container { background-color: var(--bg) !important; } /* Order details left panel */ html.dark-mode .tutor-checkout-details, html.dark-mode .tutor-checkout-details-inner { background-color: var(--surface) !important; border-color: var(--border) !important; } html.dark-mode .tutor-checkout-details *, html.dark-mode .tutor-checkout-details-inner * { color: var(--text-primary) !important; } html.dark-mode .tutor-checkout-course-item { border-color: var(--border) !important; } /* "Order Details" heading */ html.dark-mode .tutor-checkout-page .tutor-color-black, html.dark-mode .tutor-checkout-page .tutor-border-bottom { color: var(--text-primary) !important; border-color: var(--border) !important; } /* Billing address form */ html.dark-mode .tutor-checkout-billing, html.dark-mode #tutor-checkout-billing-address { background-color: var(--surface) !important; border-color: var(--border) !important; } html.dark-mode .tutor-checkout-billing *, html.dark-mode #tutor-checkout-billing-address * { color: var(--text-primary) !important; } /* Form inputs inside billing */ html.dark-mode .tutor-checkout-page input[type="text"], html.dark-mode .tutor-checkout-page input[type="email"], html.dark-mode .tutor-checkout-page input[type="tel"], html.dark-mode .tutor-checkout-page select, html.dark-mode .tutor-checkout-page .tutor-form-control { background-color: var(--bg) !important; color: var(--text-primary) !important; border-color: var(--border) !important; } html.dark-mode .tutor-checkout-page input::placeholder { color: var(--text-secondary) !important; } /* Payment method section */ html.dark-mode .tutor-checkout-payment-method, html.dark-mode #tutor-checkout-payment { background-color: var(--surface) !important; border-color: var(--border) !important; } html.dark-mode .tutor-checkout-payment-method *, html.dark-mode #tutor-checkout-payment * { color: var(--text-primary) !important; } /* Payment option selected state */ html.dark-mode .tutor-checkout-payment-item.is-active, html.dark-mode .tutor-payment-item-wrap.is-active { background-color: var(--bg-secondary) !important; border-color: var(--brand) !important; } /* InstaPlay / payment instruction box */ html.dark-mode .tutor-checkout-page .tutor-card, html.dark-mode .tutor-checkout-page [class*="payment-instruction"], html.dark-mode .tutor-checkout-page [class*="instapay"] { background-color: var(--surface) !important; border-color: var(--border) !important; color: var(--text-primary) !important; } html.dark-mode .tutor-checkout-page .tutor-card * { color: var(--text-primary) !important; } /* Divider lines inside checkout */ html.dark-mode .tutor-checkout-page hr, html.dark-mode .tutor-checkout-page .tutor-divider { border-color: var(--border) !important; } /* ========================================================= DARK MODE — PAYMENT METHOD + DASHBOARD SIDEBAR v2 ========================================================= */ /* ── CHECKOUT: Payment method label (exact from HTML) ────