/* ===================================================================== CSK Arena — DARK THEME Activated by html[data-theme="dark"] (toggle button in the header, choice saved in localStorage as "csk-theme"). Light theme = default, nothing here applies unless data-theme="dark" is set. How it works: the theme's colours are CSS variables, so dark mode just re-maps them. Surfaces that are *meant* to stay black (top bar, mega menu, footer, hero banners, icon circles) get the original palette back, so they look exactly as in the light theme. ===================================================================== */ html[data-theme="dark"]{ color-scheme:dark; --csk-white:#121212; --csk-black:#f3f3f3; --csk-light:#1b1b1b; --csk-border:#2c2c2c; --csk-gray:#a8a8a8; } html[data-theme="dark"] body{background:#121212;color:#f3f3f3;} /* ---- surfaces that stay black in both themes ---- */ html[data-theme="dark"] .csk-topbar, html[data-theme="dark"] .csk-nav-wrap, html[data-theme="dark"] .csk-footer, html[data-theme="dark"] .csk-reel-section, html[data-theme="dark"] .csk-promo-card, html[data-theme="dark"] .csk-about-hero, html[data-theme="dark"] .csk-blog-hero, html[data-theme="dark"] .csk-post-hero, html[data-theme="dark"] .csk-policy-hero, html[data-theme="dark"] .csk-contact-hero, html[data-theme="dark"] .csk-faq-hero, html[data-theme="dark"] .csk-help-hero, html[data-theme="dark"] .csk-cart-trust-strip, html[data-theme="dark"] .csk-mv-icon, html[data-theme="dark"] .csk-contact-card-icon, html[data-theme="dark"] .csk-help-cat-icon, html[data-theme="dark"] .csk-charge-icon, html[data-theme="dark"] .csk-review-user .csk-avatar, html[data-theme="dark"] .csk-founder-avatar, html[data-theme="dark"] .csk-contact-social a, html[data-theme="dark"] .csk-faq-tab.is-active, html[data-theme="dark"] .csk-cat-card .csk-cat-img.is-fallback{ --csk-white:#ffffff; --csk-black:#000000; --csk-light:#f7f7f7; --csk-border:#2a2a2a; --csk-gray:#6b6b6b; } /* dropdown sub-menus inside the black nav bar follow the dark theme */ html[data-theme="dark"] .csk-primary-nav .sub-menu:not(.csk-shop-panel){ --csk-white:#1c1c1c;--csk-black:#f3f3f3;--csk-light:#262626;--csk-border:#2c2c2c; } /* ---- text on yellow stays dark in both themes ---- */ html[data-theme="dark"] .csk-search-form button, html[data-theme="dark"] .csk-cart-count, html[data-theme="dark"] .csk-skip-link, html[data-theme="dark"] .csk-badge, html[data-theme="dark"] .csk-add-cart:hover, html[data-theme="dark"] .csk-promo-card.is-yellow, html[data-theme="dark"] .csk-reel-tag, html[data-theme="dark"] .csk-reel-nav button:hover, html[data-theme="dark"] .csk-btn:hover, html[data-theme="dark"] .csk-social-icons a:hover, html[data-theme="dark"] .csk-newsletter-form button, html[data-theme="dark"] .woocommerce a.button:hover, html[data-theme="dark"] .woocommerce button.button:hover, html[data-theme="dark"] .woocommerce input.button:hover, html[data-theme="dark"] .woocommerce span.onsale, html[data-theme="dark"] .csk-blog-cat-tag, html[data-theme="dark"] .csk-pagination .page-numbers.current, html[data-theme="dark"] .csk-pagination .page-numbers:hover, html[data-theme="dark"] .csk-post-cat-tag, html[data-theme="dark"] a.csk-cart-upsell-add:hover, html[data-theme="dark"] .csk-contact-social a:hover, html[data-theme="dark"] .csk-policy-updated, html[data-theme="dark"] .csk-pdp-gallery-col span.onsale, html[data-theme="dark"] .csk-pdp button.single_add_to_cart_button:hover, html[data-theme="dark"] .csk-pdp-sticky-bar-btn:hover{color:#111111;} html[data-theme="dark"] .csk-search-form button svg{stroke:#111;} /* ---- logo (white-background JPG) sits on a soft white chip ---- */ html[data-theme="dark"] .csk-logo img, html[data-theme="dark"] .csk-offcanvas-head img{background:#fff;border-radius:8px;padding:3px 8px;} /* ---- header / inputs / cards ---- */ html[data-theme="dark"] .csk-header{border-bottom-color:#2c2c2c;} html[data-theme="dark"] .csk-header.is-stuck{box-shadow:0 2px 14px rgba(0,0,0,.6);} html[data-theme="dark"] .csk-search-form{border-color:#f3f3f3;} html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea{color:#f3f3f3;} html[data-theme="dark"] .csk-search-form input[type="search"]::placeholder{color:#8a8a8a;} html[data-theme="dark"] .csk-offcanvas{box-shadow:2px 0 18px rgba(0,0,0,.7);} html[data-theme="dark"] .csk-bottom-nav{box-shadow:0 -4px 18px rgba(0,0,0,.6);} html[data-theme="dark"] .csk-msearch{box-shadow:0 8px 24px rgba(0,0,0,.7);} html[data-theme="dark"] .csk-pdp-sticky-bar{box-shadow:0 -4px 18px rgba(0,0,0,.6);} html[data-theme="dark"] .csk-hero-dots li{border-color:#f3f3f3;} html[data-theme="dark"] .woocommerce-message,html[data-theme="dark"] .woocommerce-info,html[data-theme="dark"] .woocommerce-error{background:#1b1b1b;color:#f3f3f3;} html[data-theme="dark"] .woocommerce table.shop_table,html[data-theme="dark"] .woocommerce table.shop_table td,html[data-theme="dark"] .woocommerce table.shop_table th{border-color:#2c2c2c;} html[data-theme="dark"] .select2-dropdown,html[data-theme="dark"] .select2-container--default .select2-selection--single{background:#1b1b1b;color:#f3f3f3;border-color:#3a3a3a;} html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered{color:#f3f3f3;} /* ---- My Account + login (own "Shopify-style" variables) ---- */ html[data-theme="dark"] body.csk-acc-page,html[data-theme="dark"] body.woocommerce-account{background:#121212;} html[data-theme="dark"] .cska,html[data-theme="dark"] .cskc{ --cska-text:243,243,243;--cska-line:rgba(243,243,243,.14);--cska-field:rgba(243,243,243,.55);--cska-muted:rgba(243,243,243,.72); --cskc-text:243,243,243;--cskc-line:rgba(243,243,243,.14);--cskc-field:rgba(243,243,243,.55);--cskc-muted:rgba(243,243,243,.72); background:#121212; } html[data-theme="dark"] .cska-btn,html[data-theme="dark"] .cska-content .csk-btn,html[data-theme="dark"] .cska-content a.button,html[data-theme="dark"] .cska-content button.button,html[data-theme="dark"] .cska-content .woocommerce-button,html[data-theme="dark"] .cskc-checkout{color:#111!important;} html[data-theme="dark"] .cska-btn--outline,html[data-theme="dark"] .cska-btn--outline:hover,html[data-theme="dark"] .cska-content .csk-btn-outline,html[data-theme="dark"] .cska-content .csk-btn-outline:hover, html[data-theme="dark"] .cska-content .cska-ocard-actions a.button:not(.view),html[data-theme="dark"] .cska-content .cska-ocard-actions a.button:not(.view):hover{background:#1b1b1b;color:#f3f3f3!important;} html[data-theme="dark"] .cska input,html[data-theme="dark"] .cska select,html[data-theme="dark"] .cska textarea,html[data-theme="dark"] .cska-content form input,html[data-theme="dark"] .cska-content form select,html[data-theme="dark"] .cska-content form textarea, html[data-theme="dark"] .cskc input,html[data-theme="dark"] .cskc-qty,html[data-theme="dark"] .cskc-coupon-apply,html[data-theme="dark"] .cska-divider span, html[data-theme="dark"] .cska-bar,html[data-theme="dark"] .cska-ocard,html[data-theme="dark"] .cska-thumb,html[data-theme="dark"] .cska-content .csk-address-tile,html[data-theme="dark"] .cska-content .woocommerce-message,html[data-theme="dark"] .cska-content .woocommerce-error, html[data-theme="dark"] body.woocommerce-account .woocommerce-message,html[data-theme="dark"] body.woocommerce-account .woocommerce-error, html[data-theme="dark"] .cska-content .select2-container--default .select2-selection--single{background:#1b1b1b!important;color:#f3f3f3;} html[data-theme="dark"] .cska-divider span{background:#121212!important;} html[data-theme="dark"] .cska-bar,html[data-theme="dark"] .cska-ocard,html[data-theme="dark"] .cska-thumb,html[data-theme="dark"] .cska-content form input,html[data-theme="dark"] .cska-content form select,html[data-theme="dark"] .cska-content form textarea, html[data-theme="dark"] .cska-content .csk-address-tile,html[data-theme="dark"] .cska-content address{border-color:#2f2f2f!important;} html[data-theme="dark"] .cska-bar .cska-nav a:hover,html[data-theme="dark"] .cska-bar .cska-nav li.is-active a{background:#262626;} html[data-theme="dark"] .cska-content form input:focus,html[data-theme="dark"] .cska-content form select:focus,html[data-theme="dark"] .cska-content form textarea:focus{border-color:#f3f3f3!important;box-shadow:0 0 0 1px #f3f3f3!important;} html[data-theme="dark"] .cska-content form input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #1b1b1b inset!important;-webkit-text-fill-color:#f3f3f3;} html[data-theme="dark"] body.woocommerce-account .woocommerce-ResetPassword,html[data-theme="dark"] body.woocommerce-account .woocommerce-ResetPassword label{color:#f3f3f3;} html[data-theme="dark"] body.woocommerce-account .woocommerce-ResetPassword input.input-text{background:#1b1b1b;color:#f3f3f3;} html[data-theme="dark"] body.woocommerce-account .woocommerce-ResetPassword button.button,html[data-theme="dark"] body.woocommerce-account .woocommerce-ResetPassword .woocommerce-Button{background:#f3f3f3;color:#111;} html[data-theme="dark"] .cskc-checkout:hover,html[data-theme="dark"] .cskc-coupon-apply:hover{background:var(--csk-yellow);color:#111!important;} /* ===================================================================== AUTO-AUDIT: neutral dark-grey hard-coded text colours that vanish on dark (generated from every theme stylesheet; lighter equivalents) ===================================================================== */ html[data-theme="dark"] .csk-review-card p, html[data-theme="dark"] .csk-about-cta p, html[data-theme="dark"] .csk-post-content{color:#e0e0e0;} html[data-theme="dark"] .csk-blog-card-body p, html[data-theme="dark"] .csk-mv-card p, html[data-theme="dark"] .csk-thankyou-notice, html[data-theme="dark"] .csk-contact-sidebar-card p, html[data-theme="dark"] .csk-faq-cta p, html[data-theme="dark"] .csk-help-cta p, html[data-theme="dark"] .csk-policy-contact p, html[data-theme="dark"] .csk-charge-card p{color:#c6c6c6;} html[data-theme="dark"] .csk-story-content p, html[data-theme="dark"] .csk-founder-content p, html[data-theme="dark"] .csk-auth-remember, html[data-theme="dark"] .csk-cart-tier strong, html[data-theme="dark"] .csk-hours-list li, html[data-theme="dark"] .csk-faq-answer-inner, html[data-theme="dark"] .csk-policy-section > p, html[data-theme="dark"] .csk-policy-list li, html[data-theme="dark"] .csk-policy-callout p, html[data-theme="dark"] .csk-policy-table th, html[data-theme="dark"] .csk-policy-table td, html[data-theme="dark"] .csk-pdp .woocommerce-product-details__short-description, html[data-theme="dark"] .woocommerce-tabs .panel{color:#d4d4d4;} html[data-theme="dark"] .csk-cart-tier, html[data-theme="dark"] .csk-cart-tier span, html[data-theme="dark"] .csk-contact-card p, html[data-theme="dark"] .csk-contact-form-wrap > p, html[data-theme="dark"] .csk-help-cat-card p{color:#b4b4b4;} html[data-theme="dark"] body.woocommerce-account .woocommerce-error, html[data-theme="dark"] body.woocommerce-account .woocommerce-message, html[data-theme="dark"] body.woocommerce-account .woocommerce-info, html[data-theme="dark"] body.woocommerce-account .woocommerce-ResetPassword, html[data-theme="dark"] body.woocommerce-account .woocommerce-ResetPassword input.input-text, html[data-theme="dark"] body.woocommerce-account .woocommerce-ResetPassword button.button:hover, html[data-theme="dark"] body.woocommerce-account .woocommerce-ResetPassword .woocommerce-Button:hover, html[data-theme="dark"] body.csk-acc-page .select2-results__option--highlighted[aria-selected], html[data-theme="dark"] body.csk-acc-page .select2-results__option--highlighted.select2-results__option--selectable{color:#f3f3f3;} /* ---- manual fixes found in the audit ---- */ html[data-theme="dark"] .csk-policy-callout,html[data-theme="dark"] .csk-charge-card.is-free{background:#1d1b12;border-color:#3a3320;} html[data-theme="dark"] .csk-policy-callout p,html[data-theme="dark"] .csk-policy-callout strong,html[data-theme="dark"] .csk-charge-card.is-free p{color:#dcdcdc;} html[data-theme="dark"] .csk-pdp-save-badge{background:#12301d;color:#4cd98a;} html[data-theme="dark"] .csk-pdp .stock.in-stock{color:#4cd98a;} html[data-theme="dark"] .csk-pdp .stock.out-of-stock{color:#ff7b7b;} html[data-theme="dark"] .csk-cart-progress.is-complete .csk-cart-progress-msg{color:#4cd98a;} html[data-theme="dark"] .csk-required,html[data-theme="dark"] .cska-content form label .required{color:#ff7b7b;} html[data-theme="dark"] .csk-thankyou-icon--failed{background:#3a1a1a;color:#ff7b7b;} html[data-theme="dark"] .csk-review-dots span{background:#3a3a3a;} html[data-theme="dark"] .csk-review-dots span.is-active{background:var(--csk-yellow);} html[data-theme="dark"] .csk-auth-tab[data-tab="login"]{color:#bdbdbd;} html[data-theme="dark"] a.cskc-remove:hover{color:rgba(243,243,243,.65);} html[data-theme="dark"] .cskc-backorder{color:#f0a64a;} html[data-theme="dark"] .cska-alert.is-error,html[data-theme="dark"] .cska-content .woocommerce-error,html[data-theme="dark"] body.woocommerce-account .woocommerce-error,html[data-theme="dark"] .cskc-notice--error{color:#ff8a8a;border-color:#ff8a8a;} html[data-theme="dark"] .cska-alert.is-success,html[data-theme="dark"] .cska-content .woocommerce-message,html[data-theme="dark"] body.woocommerce-account .woocommerce-message,html[data-theme="dark"] .cskc-notice--success{color:#5fd68a;border-color:#5fd68a;} html[data-theme="dark"] .cska-status-refunded,html[data-theme="dark"] .cska-content .csk-order-status-refunded,html[data-theme="dark"] .cskc-tag{background:rgba(243,243,243,.1);} html[data-theme="dark"] .cskc-qty-btn:hover{background:rgba(243,243,243,.08);} html[data-theme="dark"] .cska-content .select2-container--default .select2-selection--single .select2-selection__rendered{color:#f3f3f3;} html[data-theme="dark"] body.csk-acc-page .select2-dropdown{background:#1b1b1b;color:#f3f3f3;border-color:#3a3a3a;} html[data-theme="dark"] body.csk-acc-page .select2-search--dropdown .select2-search__field{background:#121212;color:#f3f3f3;border-color:#3a3a3a;} html[data-theme="dark"] body.csk-acc-page .select2-results__option--highlighted.select2-results__option--selectable{background:#2a2a2a!important;color:#f3f3f3!important;} html[data-theme="dark"] .cska-content [class*="cska"] [style*="background"],html[data-theme="dark"] .cska-content table th{border-color:#2f2f2f;} /* ---- safety net: native form controls anywhere (low specificity so theme rules still win) ---- */ html[data-theme="dark"] :where(input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=range]):not([type=hidden]),textarea,select){background-color:#1b1b1b;color:#f3f3f3;border-color:#3a3a3a;} html[data-theme="dark"] ::placeholder{color:#8d8d8d;opacity:1;} html[data-theme="dark"] .csk-search-form input,html[data-theme="dark"] .csk-newsletter-form input{background:transparent;} html[data-theme="dark"] select option{background:#1b1b1b;color:#f3f3f3;} /* ---- WooCommerce core UI the theme does not restyle ---- */ html[data-theme="dark"] .woocommerce nav.woocommerce-pagination ul,html[data-theme="dark"] .woocommerce nav.woocommerce-pagination ul li{border-color:#2c2c2c;} html[data-theme="dark"] .woocommerce nav.woocommerce-pagination ul li a,html[data-theme="dark"] .woocommerce nav.woocommerce-pagination ul li span{background:#1b1b1b;color:#f3f3f3;} html[data-theme="dark"] .woocommerce nav.woocommerce-pagination ul li a:hover,html[data-theme="dark"] .woocommerce nav.woocommerce-pagination ul li span.current{background:var(--csk-yellow);color:#111;} html[data-theme="dark"] .woocommerce-result-count,html[data-theme="dark"] .woocommerce-ordering select,html[data-theme="dark"] .woocommerce-breadcrumb,html[data-theme="dark"] .woocommerce-breadcrumb a{color:#bdbdbd;} html[data-theme="dark"] .woocommerce-ordering select{color:#f3f3f3;} html[data-theme="dark"] .woocommerce #reviews #comments ol.commentlist li .comment-text{border-color:#2c2c2c;} html[data-theme="dark"] .woocommerce #reviews #comments ol.commentlist li .meta,html[data-theme="dark"] .woocommerce-review__published-date,html[data-theme="dark"] .woocommerce-review__author{color:#bdbdbd;} html[data-theme="dark"] .woocommerce-Reviews-title,html[data-theme="dark"] .comment-reply-title,html[data-theme="dark"] .comment-form label{color:#f3f3f3;} html[data-theme="dark"] .woocommerce .quantity .qty{background:#1b1b1b;color:#f3f3f3;border-color:#3a3a3a;} html[data-theme="dark"] .woocommerce table.shop_attributes th,html[data-theme="dark"] .woocommerce table.shop_attributes td{color:#e0e0e0;border-color:#2c2c2c;background:transparent;} html[data-theme="dark"] .woocommerce table.shop_attributes tr:nth-child(even) td,html[data-theme="dark"] .woocommerce table.shop_attributes tr:nth-child(even) th{background:rgba(255,255,255,.03);} html[data-theme="dark"] .woocommerce-product-attributes-item__label{color:#f3f3f3;} html[data-theme="dark"] .woocommerce div.product p.price,html[data-theme="dark"] .woocommerce div.product span.price{color:inherit;} html[data-theme="dark"] .woocommerce .woocommerce-error::before,html[data-theme="dark"] .woocommerce .woocommerce-message::before,html[data-theme="dark"] .woocommerce .woocommerce-info::before{color:var(--csk-yellow);} html[data-theme="dark"] .wp-block-image figcaption,html[data-theme="dark"] .wp-caption-text{color:#bdbdbd;} html[data-theme="dark"] .csk-post-content a,html[data-theme="dark"] .csk-policy-section a,html[data-theme="dark"] .csk-story-content a{color:var(--csk-yellow);} html[data-theme="dark"] .csk-post-content,html[data-theme="dark"] .csk-post-content p,html[data-theme="dark"] .csk-post-content li,html[data-theme="dark"] .csk-post-content h2,html[data-theme="dark"] .csk-post-content h3,html[data-theme="dark"] .csk-post-content h4{color:#e0e0e0;} html[data-theme="dark"] .csk-post-content h2,html[data-theme="dark"] .csk-post-content h3,html[data-theme="dark"] .csk-post-content h4{color:#f3f3f3;} html[data-theme="dark"] .csk-post-content blockquote{border-left-color:var(--csk-yellow);background:#1b1b1b;color:#e0e0e0;} html[data-theme="dark"] .csk-post-content table th,html[data-theme="dark"] .csk-post-content table td{border-color:#2c2c2c;} html[data-theme="dark"] .csk-post-content pre,html[data-theme="dark"] .csk-post-content code{background:#1b1b1b;color:#e0e0e0;} html[data-theme="dark"] .csk-policy-table th{background:#1f1f1f;} html[data-theme="dark"] .csk-policy-table th,html[data-theme="dark"] .csk-policy-table td{border-color:#2c2c2c;} /* ===================================================================== FILLED FORM TEXT — typed / saved values in every field stay light. Forced (!important + text-fill) because WooCommerce core, browser autofill and the account styles all try to paint field text black. Applies to My Account (profile, addresses, login), cart drawer, search, reviews, contact form etc. Checkout/pay stay light-themed. ===================================================================== */ html[data-theme="dark"] body:not(.csk-sc-page):not(.csk-pay-page) :is(input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=range]):not([type=hidden]):not([type=file]),textarea,select){ color:#f3f3f3!important; -webkit-text-fill-color:#f3f3f3!important; caret-color:#F9B233; } html[data-theme="dark"] body:not(.csk-sc-page):not(.csk-pay-page) :is(input,textarea,select):disabled, html[data-theme="dark"] body:not(.csk-sc-page):not(.csk-pay-page) :is(input,textarea):read-only{ color:#cfcfcf!important;-webkit-text-fill-color:#cfcfcf!important;opacity:1; } html[data-theme="dark"] body:not(.csk-sc-page):not(.csk-pay-page) :is(input,textarea,select):-webkit-autofill, html[data-theme="dark"] body:not(.csk-sc-page):not(.csk-pay-page) :is(input,textarea,select):-webkit-autofill:hover, html[data-theme="dark"] body:not(.csk-sc-page):not(.csk-pay-page) :is(input,textarea,select):-webkit-autofill:focus{ -webkit-text-fill-color:#f3f3f3!important; -webkit-box-shadow:0 0 0 1000px #1b1b1b inset!important; box-shadow:0 0 0 1000px #1b1b1b inset!important; caret-color:#F9B233; } html[data-theme="dark"] body:not(.csk-sc-page):not(.csk-pay-page) .select2-container--default .select2-selection--single .select2-selection__rendered, html[data-theme="dark"] body:not(.csk-sc-page):not(.csk-pay-page) .select2-container--default .select2-selection--single .select2-selection__placeholder{ color:#f3f3f3!important; } html[data-theme="dark"] body:not(.csk-sc-page):not(.csk-pay-page) .select2-container--default .select2-selection--single .select2-selection__arrow b{border-color:#f3f3f3 transparent transparent transparent;} html[data-theme="dark"] body:not(.csk-sc-page):not(.csk-pay-page) .woocommerce-input-wrapper, html[data-theme="dark"] body:not(.csk-sc-page):not(.csk-pay-page) .woocommerce-input-wrapper > strong, html[data-theme="dark"] body:not(.csk-sc-page):not(.csk-pay-page) address{color:#f3f3f3;} /* floating labels / hints inside account forms */ html[data-theme="dark"] .cska-content form label, html[data-theme="dark"] .cska-content form legend, html[data-theme="dark"] .cska-content .csk-account-password-fieldset legend{color:rgba(243,243,243,.85);} html[data-theme="dark"] .cska-content form em, html[data-theme="dark"] .cska-content form small, html[data-theme="dark"] .cska-content form .description{color:rgba(243,243,243,.7);} /* ===================================================================== LOGO CHIP (dark mode) — the logo is a white-background JPG, so on dark pages it sits on a rounded white chip. Same look on every page: header, menu, My Account/login, About page, footer. ===================================================================== */ html[data-theme="dark"] .csk-logo img, html[data-theme="dark"] .csk-logo .custom-logo, html[data-theme="dark"] .csk-offcanvas-head img, html[data-theme="dark"] .cska-logo img, html[data-theme="dark"] .cska-lostlogo .cska-logo img, html[data-theme="dark"] .csk-footer-logo img{background:#fff;border-radius:10px;padding:3px 8px;box-sizing:content-box;} html[data-theme="dark"] .csk-story-media img{background:#fff;border-radius:14px;} html[data-theme="dark"] .cska-bar .cska-logo img{height:40px;} /* ===================================================================== CHECKOUT (Shopify-style) + PAYMENT PAGE — real dark theme The checkout is driven by --sc-* variables plus a lot of hard-coded #fff / #333 / #000, so each is re-mapped here. Placed last on purpose. ===================================================================== */ html[data-theme="dark"] body.csk-sc-page, html[data-theme="dark"] body.csk-pay-page{background:#121212;color:#f0f0f0;} html[data-theme="dark"] .csk-sc{ --sc-border:#3a3a3a;--sc-line:#2c2c2c;--sc-text:#f0f0f0;--sc-muted:#a9a9a9; --sc-side:#171717;--sc-err:#ff7b7b;--sc-link:#F9B233;--sc-link-dark:#FFD66B; --csk-fee-ok:#4cd98a;--csk-fee-bad:#ff7b7b; color:#f0f0f0; } html[data-theme="dark"] .csk-sc-side{background:#171717;border-color:#2c2c2c;} html[data-theme="dark"] .csk-sc-header,html[data-theme="dark"] .csk-sc-footer,html[data-theme="dark"] .csk-sc-summary{border-color:#2c2c2c;} html[data-theme="dark"] .csk-sc-section h2, html[data-theme="dark"] .csk-sc-section-head h2{color:#f3f3f3;} html[data-theme="dark"] .csk-sc-section-head a{color:#F9B233;} html[data-theme="dark"] .csk-sc-section-head a:hover{color:#FFD66B;} /* fields: inputs, selects, textareas, select2, read-only boxes */ html[data-theme="dark"] body.csk-sc-page .csk-sc .form-row input.input-text, html[data-theme="dark"] body.csk-sc-page .csk-sc .form-row input[type=email], html[data-theme="dark"] body.csk-sc-page .csk-sc .form-row input[type=tel], html[data-theme="dark"] body.csk-sc-page .csk-sc .form-row input[type=text], html[data-theme="dark"] body.csk-sc-page .csk-sc .form-row input[type=password], html[data-theme="dark"] body.csk-sc-page .csk-sc .form-row textarea.input-text, html[data-theme="dark"] body.csk-sc-page .csk-sc .form-row select, html[data-theme="dark"] body.csk-sc-page .csk-sc .csk-sc-side .csk-sc-field input, html[data-theme="dark"] body.csk-sc-page .csk-sc .select2-container .select2-selection--single, html[data-theme="dark"] body.csk-sc-page .csk-sc .form-row.csk-ro-select .woocommerce-input-wrapper, html[data-theme="dark"] body.csk-sc-page .csk-sc .form-row:has(> .woocommerce-input-wrapper > strong) .woocommerce-input-wrapper{ background-color:#1b1b1b!important;color:#f0f0f0!important;-webkit-text-fill-color:#f0f0f0; border-color:#3a3a3a!important; } html[data-theme="dark"] body.csk-sc-page .csk-sc .input-text:-webkit-autofill, html[data-theme="dark"] body.csk-sc-page .csk-sc input:-webkit-autofill{ -webkit-text-fill-color:#f0f0f0!important;-webkit-box-shadow:0 0 0 1000px #1b1b1b inset!important;box-shadow:0 0 0 1000px #1b1b1b inset!important; } html[data-theme="dark"] body.csk-sc-page .csk-sc .form-row input.input-text:focus, html[data-theme="dark"] body.csk-sc-page .csk-sc .form-row textarea.input-text:focus, html[data-theme="dark"] body.csk-sc-page .csk-sc .form-row select:focus, html[data-theme="dark"] body.csk-sc-page .csk-sc .csk-sc-side .csk-sc-field input:focus{border-color:#F9B233!important;} html[data-theme="dark"] body.csk-sc-page .csk-sc .form-row.csk-has-error input.input-text, html[data-theme="dark"] body.csk-sc-page .csk-sc .form-row.csk-has-error select, html[data-theme="dark"] body.csk-sc-page .csk-sc .form-row.csk-has-error .select2-container .select2-selection--single{border-color:#ff7b7b!important;} html[data-theme="dark"] body.csk-sc-page .csk-sc .form-row.woocommerce-validated input.input-text, html[data-theme="dark"] body.csk-sc-page .csk-sc .form-row.woocommerce-invalid:not(.csk-has-error) input.input-text{border-color:#3a3a3a!important;} html[data-theme="dark"] .csk-sc .select2-container .select2-selection__rendered, html[data-theme="dark"] .csk-sc .form-row .woocommerce-input-wrapper strong{color:#f0f0f0!important;} html[data-theme="dark"] .csk-sc .form-row > label, html[data-theme="dark"] .csk-sc-field label{color:#a9a9a9!important;} /* lighter chevrons / search icon so they show on dark fields */ html[data-theme="dark"] .csk-sc .form-row select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23c9c9c9' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 14px center; } html[data-theme="dark"] .csk-sc .select2-container .select2-selection__arrow{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23c9c9c9' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:center; } /* read-only Country box: no chevron/pattern, just the value (same as light theme) */ html[data-theme="dark"] .csk-sc .form-row.csk-ro-select .woocommerce-input-wrapper, html[data-theme="dark"] body .csk-sc .form-row:has(> .woocommerce-input-wrapper > strong) .woocommerce-input-wrapper{ background-image:none!important; } html[data-theme="dark"] .csk-sc #billing_address_1, html[data-theme="dark"] .csk-sc #shipping_address_1, html[data-theme="dark"] body .csk-sc #billing_address_1.input-text, html[data-theme="dark"] body .csk-sc #shipping_address_1.input-text{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23c9c9c9' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E")!important; background-repeat:no-repeat!important;background-position:right 14px center!important; } html[data-theme="dark"] .csk-sc-help{color:#a9a9a9;} html[data-theme="dark"] .csk-sc-help:hover,html[data-theme="dark"] .csk-sc-help:focus-visible,html[data-theme="dark"] .csk-sc-help.is-open{color:#f3f3f3;} html[data-theme="dark"] .csk-sc-help::after{background:#f3f3f3;color:#111;} html[data-theme="dark"] .csk-sc input[type=checkbox]{background:#1b1b1b;border-color:#5a5a5a;} html[data-theme="dark"] .csk-sc input[type=checkbox]:hover{border-color:#8a8a8a;} html[data-theme="dark"] .csk-sc input[type=checkbox]:checked{background-color:#F9B233;border-color:#F9B233;} /* order summary (right column / mobile summary) */ html[data-theme="dark"] .csk-sc-thumb{background:#1b1b1b;border-color:rgba(255,255,255,.15);} html[data-theme="dark"] .csk-sc-qty{background:rgba(90,90,90,.95);color:#fff;} html[data-theme="dark"] .csk-sc-toggle{background:#171717;color:#F9B233;} html[data-theme="dark"] .csk-sc-apply{background:#2a2a2a;color:#777;} html[data-theme="dark"] .csk-sc-apply:not(:disabled){background:#F9B233;color:#111;} html[data-theme="dark"] .csk-sc-apply:not(:disabled):hover{background:#E8960C;} html[data-theme="dark"] .csk-sc-coupon-msg.is-ok{color:#5fd68a;} html[data-theme="dark"] body .csk-sc .csk-sc-side tfoot tr.order-total th, html[data-theme="dark"] body .csk-sc .csk-sc-side tfoot tr.order-total td, html[data-theme="dark"] body .csk-sc .csk-sc-side tfoot tr.order-total td *{color:#fff!important;} html[data-theme="dark"] body .csk-sc .csk-sc-side tfoot tr.order-total td::before{color:#a9a9a9!important;} html[data-theme="dark"] .csk-sc-side .woocommerce-checkout-review-order-table tfoot tr.fee th, html[data-theme="dark"] .csk-sc-side .woocommerce-checkout-review-order-table tfoot tr.fee td{color:inherit;} /* payment methods */ html[data-theme="dark"] .csk-sc ul.wc_payment_methods li.wc_payment_method{background:#1b1b1b;border-color:#3a3a3a;} html[data-theme="dark"] .csk-sc ul.wc_payment_methods li.wc_payment_method > label::before{background:#1b1b1b;border-color:#6a6a6a;} html[data-theme="dark"] .csk-sc ul.wc_payment_methods li.wc_payment_method > input:checked + label{background:#2a2410;} html[data-theme="dark"] .csk-sc ul.wc_payment_methods li.wc_payment_method > input:checked + label::before{border-color:#F9B233;} html[data-theme="dark"] .csk-sc .payment_box{background:#222!important;color:#d0d0d0;border-top-color:#3a3a3a;} html[data-theme="dark"] .csk-sc .payment_box p,html[data-theme="dark"] .csk-sc .payment_box label{color:#d0d0d0;} html[data-theme="dark"] .csk-sc ul.wc_payment_methods li.wc_payment_method img{background:#fff;border-radius:4px;padding:1px 3px;} html[data-theme="dark"] .csk-sc .blockUI.blockOverlay{background:rgba(18,18,18,.65)!important;} /* notices */ html[data-theme="dark"] .csk-sc .woocommerce-error{background:#3a1a1a;color:#ff8a8a;border-color:#ff7b7b;} html[data-theme="dark"] .csk-sc .woocommerce-message, html[data-theme="dark"] .csk-sc .woocommerce-info{background:#1b1b1b;color:#f0f0f0;border-color:#3a3a3a;} /* logo chip on checkout + payment */ html[data-theme="dark"] .csk-sc-logo img, html[data-theme="dark"] .csk-pay-logo img, html[data-theme="dark"] body .csk-pay .csk-pay-logo img{background:#fff;border-radius:10px;padding:3px 8px;box-sizing:content-box;} /* select2 dropdown list (opens outside .csk-sc, appended to ) */ html[data-theme="dark"] .select2-results__option{color:#f0f0f0;} html[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected=true], html[data-theme="dark"] .select2-container--default .select2-results__option--selected{background:#2a2a2a;color:#f0f0f0;} html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected], html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{background:#F9B233!important;color:#111!important;} html[data-theme="dark"] .select2-search--dropdown .select2-search__field{background:#121212;color:#f0f0f0;border-color:#3a3a3a;} /* ---- payment page (Razorpay redirect) ---- */ html[data-theme="dark"] body.csk-pay-page .csk-pay{color:#e0e0e0;} html[data-theme="dark"] body.csk-pay-page .csk-pay h2.csk-pay-title{color:#f3f3f3;} html[data-theme="dark"] body.csk-pay-page .csk-pay p.csk-pay-sub, html[data-theme="dark"] body.csk-pay-page .csk-pay .csk-pay-inner > p:not(.csk-pay-sub){color:#a9a9a9!important;} html[data-theme="dark"] body.csk-pay-page .csk-pay ul.order_details{background:#1b1b1b;border-color:#3a3a3a;} html[data-theme="dark"] body.csk-pay-page .csk-pay ul.order_details li{color:#a9a9a9!important;border-bottom-color:#2c2c2c!important;} html[data-theme="dark"] body.csk-pay-page .csk-pay ul.order_details li strong{color:#f0f0f0!important;} html[data-theme="dark"] body.csk-pay-page .csk-pay ul.order_details li.total strong, html[data-theme="dark"] body.csk-pay-page .csk-pay ul.order_details li.total strong *{color:#fff!important;} html[data-theme="dark"] body.csk-pay-page .csk-pay #msg-razorpay-success, html[data-theme="dark"] body.csk-pay-page .csk-pay .woocommerce-info, html[data-theme="dark"] body.csk-pay-page .csk-pay .woocommerce-message{background:#2a2410!important;color:#f0f0f0!important;border-color:#3a3a3a!important;} html[data-theme="dark"] body.csk-pay-page .csk-pay .woocommerce-error{background:#3a1a1a;color:#ff8a8a;border-color:#ff7b7b;} html[data-theme="dark"] body.csk-pay-page .csk-pay #btn-razorpay-cancel{background:#1b1b1b!important;color:#f3f3f3!important;border-color:#f3f3f3!important;} html[data-theme="dark"] body.csk-pay-page .csk-pay #btn-razorpay-cancel:hover{background:#f3f3f3!important;color:#111!important;border-color:#f3f3f3!important;} html[data-theme="dark"] body.csk-pay-page .csk-pay .csk-pay-footer a{color:#F9B233;} html[data-theme="dark"] .csk-pdp-device{background:#1a1a1a;border-color:#2e2e2e;} html[data-theme="dark"] .csk-pdp-device-label{color:#ffffff;} html[data-theme="dark"] .csk-pdp-select{background:#111111;color:#ffffff;border-color:#333333;} html[data-theme="dark"] .csk-pdp-select-wrap::after{border-color:#ffffff;}