/*
 * MAR 10 Apparel — Night Mode (Stage 3B).
 * Loaded by mar10-theme-mode.php. Every rule is scoped to html[data-theme="dark"], so Day Mode
 * is untouched by construction. No Elementor global colours or theme options are modified.
 */

/* ==========================================================================
   1. Tokens and global variable overrides
   ========================================================================== */
html[data-theme="dark"] {
	color-scheme: dark;

	--mar10-bg: #121114;
	--mar10-surface: #1B1A1F;
	--mar10-surface-2: #24222A;
	--mar10-border: #6B6675;          /* controls / boundaries (≥ 3:1) */
	--mar10-divider: #34313B;         /* decorative only */
	--mar10-text: #ECEAF0;
	--mar10-muted: #A7A3AE;
	--mar10-heading: #FFFFFF;
	--mar10-accent: #A999C9;          /* text, focus — never a fill behind white text */
	--mar10-accent-fill: #7F6DA0;     /* filled accent buttons (white text 4.57:1) */
	--mar10-red: #E30613;             /* red fills with white text */
	--mar10-red-text: #FF4D55;        /* red text on dark */
	--mar10-footer: #1B1A1F;
	--mar10-illu: #F4F2F7;
	--mar10-input: #1F1D24;

	/* Theme palette (hostinger_ai_colors → --wp--preset--color--*) */
	--wp--preset--color--page-background: var(--mar10-bg);
	--wp--preset--color--page-text: var(--mar10-text);
	--wp--preset--color--color-1: var(--mar10-surface);
	--wp--preset--color--color-2: var(--mar10-footer);
	--wp--preset--color--color-3: var(--mar10-accent-fill);
	--wp--preset--color--dark: var(--mar10-text);
	--wp--preset--color--grey: var(--mar10-border);
	--wp--custom--form-field-background: var(--mar10-input);
	--wp--custom--form-field-border-color: var(--mar10-border);
}

/* Elementor kit #5 global colours (values only; the kit itself is not modified) */
html[data-theme="dark"] .elementor-kit-5 {
	--e-global-color-b5aeb33: var(--mar10-surface);      /* Color 1 */
	--e-global-color-c58817e: var(--mar10-footer);       /* Color 2 */
	--e-global-color-5420d44: var(--mar10-accent-fill);  /* Color 3 */
	--e-global-color-09cc561: var(--mar10-text);         /* Dark */
	--e-global-color-a495fd4: var(--mar10-border);       /* Grey */
	--e-global-color-dff8941: var(--mar10-surface);      /* Gradient color 1 */
	--e-global-color-a7b8c9d: var(--mar10-bg);           /* Page background */
	--e-global-color-b1c2d3e: var(--mar10-text);         /* Page text */
	--e-global-color-text: var(--mar10-muted);
	--e-global-color-secondary: var(--mar10-muted);
}

/* ==========================================================================
   2. Base
   ========================================================================== */
html[data-theme="dark"] body {
	background-color: var(--mar10-bg);
	color: var(--mar10-text);
}
html[data-theme="dark"] :where(h1, h2, h3, h4, h5, h6) {
	color: var(--mar10-heading);
}
html[data-theme="dark"] :focus-visible {
	outline: 2px solid var(--mar10-accent);
	outline-offset: 2px;
}
html[data-theme="dark"] .mar10-theme-toggle:focus-visible {
	outline-color: var(--mar10-accent);
}
html[data-theme="dark"] ::placeholder {
	color: var(--mar10-muted);
	opacity: 1;
}

/* Logo: black artwork on a transparent PNG → white. The only permitted inversion. */
html[data-theme="dark"] .wp-block-site-logo img {
	filter: invert(1);
}

/* ==========================================================================
   3. Header / navigation / Shop circles
   ========================================================================== */
html[data-theme="dark"] .wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: var(--mar10-surface) !important;
	border-color: var(--mar10-divider) !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
}
html[data-theme="dark"] .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
html[data-theme="dark"] .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content {
	background-color: rgba(236, 234, 240, 0.08);
}
html[data-theme="dark"] .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--mar10-bg) !important;
	color: var(--mar10-text) !important;
}
html[data-theme="dark"] .mar10-shop-menu__label {
	color: var(--mar10-text);
}
html[data-theme="dark"] .mar10-shop-menu__circle {
	border-color: rgba(255, 255, 255, 0.14);
}
html[data-theme="dark"] .mar10-shop-menu__item:hover .mar10-shop-menu__circle,
html[data-theme="dark"] .mar10-shop-menu__item:focus .mar10-shop-menu__circle {
	border-color: var(--mar10-text);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
}
html[data-theme="dark"] .mar10-shop-menu__item:hover .mar10-shop-menu__label,
html[data-theme="dark"] .mar10-shop-menu__item:focus .mar10-shop-menu__label {
	color: var(--mar10-accent);
}

/* Carousel pagination dots (Elementor/Swiper): black → light */
html[data-theme="dark"] .swiper-pagination-bullet {
	background: var(--mar10-text) !important;
	opacity: 0.35 !important;
}
html[data-theme="dark"] .swiper-pagination-bullet-active {
	opacity: 1 !important;
}

/* ==========================================================================
   4. Forms (site-wide)
   ========================================================================== */
html[data-theme="dark"] :where(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="search"], input[type="url"], input[type="date"], select, textarea) {
	background-color: var(--mar10-input);
	color: var(--mar10-text);
	border-color: var(--mar10-border);
}
html[data-theme="dark"] :where(input, select, textarea):focus-visible {
	border-color: var(--mar10-accent);
}
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple,
html[data-theme="dark"] .select2-dropdown {
	background-color: var(--mar10-input);
	border-color: var(--mar10-border);
	color: var(--mar10-text);
}
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--mar10-text);
}
html[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"],
html[data-theme="dark"] .select2-container--default .select2-results__option[data-selected="true"] {
	background-color: var(--mar10-surface-2);
}

/* ==========================================================================
   5. WooCommerce
   ========================================================================== */
html[data-theme="dark"] .woocommerce ul.products li.product .price,
html[data-theme="dark"] .woocommerce div.product p.price,
html[data-theme="dark"] .woocommerce div.product span.price,
html[data-theme="dark"] .wc-block-components-product-price {
	color: var(--mar10-text);
}
html[data-theme="dark"] .woocommerce .price del,
html[data-theme="dark"] .woocommerce .price del .amount {
	color: var(--mar10-muted);
	opacity: 1;
}
html[data-theme="dark"] .woocommerce a.button,
html[data-theme="dark"] .woocommerce button.button,
html[data-theme="dark"] .woocommerce input.button,
html[data-theme="dark"] .woocommerce .button {
	background-color: var(--mar10-surface-2);
	color: var(--mar10-text);
	border-color: var(--mar10-border);
}
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 .button:hover {
	background-color: #2E2B35;
	color: var(--mar10-heading);
}
html[data-theme="dark"] .woocommerce a.button.alt,
html[data-theme="dark"] .woocommerce button.button.alt,
html[data-theme="dark"] .woocommerce input.button.alt,
html[data-theme="dark"] .woocommerce .single_add_to_cart_button {
	background-color: var(--mar10-text) !important;
	color: var(--mar10-bg) !important;
	border-color: var(--mar10-text) !important;
}
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,
html[data-theme="dark"] .woocommerce-cart .cart-collaterals .cart_totals table,
html[data-theme="dark"] .woocommerce table.woocommerce-table,
html[data-theme="dark"] .woocommerce table.my_account_orders {
	border-color: var(--mar10-divider) !important;
}
html[data-theme="dark"] .woocommerce-message,
html[data-theme="dark"] .woocommerce-info,
html[data-theme="dark"] .woocommerce-error,
html[data-theme="dark"] .woocommerce-noreviews,
html[data-theme="dark"] .wc-block-components-notice-banner {
	background-color: var(--mar10-surface) !important;
	color: var(--mar10-text) !important;
	border-color: var(--mar10-divider) !important;
}
html[data-theme="dark"] .woocommerce div.product .woocommerce-tabs ul.tabs li {
	background-color: var(--mar10-surface);
	border-color: var(--mar10-divider);
}
html[data-theme="dark"] .woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background-color: var(--mar10-bg);
	border-bottom-color: var(--mar10-bg);
}
html[data-theme="dark"] .woocommerce div.product .woocommerce-tabs ul.tabs::before,
html[data-theme="dark"] .woocommerce div.product .woocommerce-tabs ul.tabs li::before,
html[data-theme="dark"] .woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	border-color: var(--mar10-divider);
}
html[data-theme="dark"] .woocommerce div.product .woocommerce-tabs ul.tabs li a {
	color: var(--mar10-text);
}
html[data-theme="dark"] .woocommerce .quantity .qty,
html[data-theme="dark"] .wc-block-components-quantity-selector,
html[data-theme="dark"] .wc-block-components-quantity-selector input {
	background-color: var(--mar10-input);
	color: var(--mar10-text);
	border-color: var(--mar10-border);
}
html[data-theme="dark"] .wc-block-components-quantity-selector button {
	color: var(--mar10-text);
}
html[data-theme="dark"] .woocommerce-MyAccount-navigation ul li a {
	color: var(--mar10-text);
}
html[data-theme="dark"] .woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
html[data-theme="dark"] .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background-color: var(--mar10-surface-2);
	color: var(--mar10-heading);
}
/* Checkout payment boxes: dark panel around; external iframes keep their own light rendering */
html[data-theme="dark"] .woocommerce-checkout #payment,
html[data-theme="dark"] .woocommerce-checkout #payment div.payment_box {
	background-color: var(--mar10-surface);
	color: var(--mar10-text);
}
html[data-theme="dark"] .woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--mar10-surface);
}
html[data-theme="dark"] .woocommerce-checkout #payment iframe,
html[data-theme="dark"] iframe[src*="paypal"],
html[data-theme="dark"] iframe[src*="midtrans"],
html[data-theme="dark"] iframe[src*="veritrans"] {
	color-scheme: light;
}
/* Mini-cart drawer */
html[data-theme="dark"] .wc-block-mini-cart__drawer .components-modal__content,
html[data-theme="dark"] .wc-block-components-drawer,
html[data-theme="dark"] .wc-block-mini-cart__template-part,
html[data-theme="dark"] .wp-block-woocommerce-mini-cart-contents {
	background-color: var(--mar10-surface) !important;
	color: var(--mar10-text) !important;
}
html[data-theme="dark"] .wc-block-components-drawer__screen-overlay {
	background-color: rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   6. Product-page Size Guide (mar10-app-api)
   ========================================================================== */
html[data-theme="dark"] #mar10-pdp-sg,
html[data-theme="dark"] [id^="mar10-pdp-sg"] {
	--pdpsg-ink: var(--mar10-text);
	--pdpsg-bg: var(--mar10-surface);
	--pdpsg-panel: var(--mar10-surface-2);
	--pdpsg-border: var(--mar10-divider);
	--pdpsg-muted: var(--mar10-muted);
}
html[data-theme="dark"] #mar10-pdp-sg-trigger {
	color: var(--mar10-text);
	border-color: var(--mar10-border);
}
html[data-theme="dark"] #mar10-pdp-sg-illu-wrap,
html[data-theme="dark"] #mar10-sg .sg-illu-wrap {
	background: var(--mar10-illu);
	border-radius: 12px;
	padding: 12px;
}

/* ==========================================================================
   7. Custom Sportswear page (#28) — --cs-ink is text AND a dark fill
   ========================================================================== */
html[data-theme="dark"] #custom-sportswear-page {
	--cs-ink: var(--mar10-text);
	--cs-bg: var(--mar10-bg);
	--cs-panel: var(--mar10-surface);
	--cs-border: var(--mar10-divider);
	--cs-muted: var(--mar10-muted);
}
html[data-theme="dark"] #custom-sportswear-page .cs-final-cta {
	background: var(--mar10-surface);
	border-top: 1px solid var(--mar10-divider);
	border-bottom: 1px solid var(--mar10-divider);
}
html[data-theme="dark"] #custom-sportswear-page .cs-final-cta .cs-btn-outline-dark {
	border-color: var(--mar10-text) !important;
	color: var(--mar10-text) !important;
}
html[data-theme="dark"] #custom-sportswear-page .cs-btn-dark,
html[data-theme="dark"] #custom-sportswear-page .cs-btn-outline-dark:hover,
html[data-theme="dark"] #custom-sportswear-page .cs-timeline-node,
html[data-theme="dark"] #custom-sportswear-page .cs-filter-btn[aria-pressed="true"] {
	color: var(--mar10-bg);
}
html[data-theme="dark"] #custom-sportswear-page .cs-hero-tagline {
	color: var(--mar10-red-text);
}

/* ==========================================================================
   8. Size Guide page (#29)
   ========================================================================== */
html[data-theme="dark"] #mar10-sg {
	--sg-ink: var(--mar10-text);
	--sg-bg: var(--mar10-bg);
	--sg-panel: var(--mar10-surface);
	--sg-border: var(--mar10-divider);
	--sg-border-strong: var(--mar10-text);
	--sg-muted: var(--mar10-muted);
}
html[data-theme="dark"] #mar10-sg .sg-tab[aria-selected="true"] {
	color: var(--mar10-bg);
}

/* ==========================================================================
   9. Mobile App page (#234) — --mal-ink is text AND a dark fill
   ========================================================================== */
html[data-theme="dark"] #mar10-app-landing {
	--mal-ink: var(--mar10-text);
	--mal-bg: var(--mar10-bg);
	--mal-panel: var(--mar10-surface);
	--mal-border: var(--mar10-divider);
	--mal-muted: var(--mar10-muted);
}
html[data-theme="dark"] #mar10-app-landing .mal-store-btn {
	background: #000;
	color: #fff;
	border: 1px solid var(--mar10-divider);
}
html[data-theme="dark"] #mar10-app-landing .mal-store-btn:hover {
	background: var(--mar10-surface-2);
}
html[data-theme="dark"] #mar10-app-landing .mal-cta {
	background: var(--mar10-surface);
	border-top: 1px solid var(--mar10-divider);
}
html[data-theme="dark"] #mar10-app-landing .mal-cta .mal-store-btn {
	background: #fff;
	color: var(--mar10-bg);
	border-color: #fff;
}
html[data-theme="dark"] #mar10-app-landing .mal-cta .mal-store-btn:hover {
	background: var(--mar10-illu);
}
html[data-theme="dark"] #mar10-app-landing .mal-cta .mal-store-btn-text small {
	color: #5B6168;
}
html[data-theme="dark"] #mar10-app-landing .mal-phone,
html[data-theme="dark"] #mar10-app-landing .mal-phone-notch {
	background: #000;
}
html[data-theme="dark"] #mar10-app-landing .mal-phone {
	box-shadow: 0 0 0 1px var(--mar10-divider), 0 30px 60px rgba(0, 0, 0, 0.6);
}
html[data-theme="dark"] #mar10-app-landing .mal-phone-screen {
	background: linear-gradient(180deg, #20242a, #000 55%);
}
html[data-theme="dark"] #mar10-app-landing .mal-benefit-icon {
	background: var(--mar10-surface-2);
}

/* ==========================================================================
   10. Newsletter (Hostinger Reach)
   ========================================================================== */
html[data-theme="dark"] .hostinger-reach-block-subscription-form input {
	background-color: var(--mar10-input) !important;
	color: var(--mar10-text) !important;
	border-color: var(--mar10-border) !important;
}
html[data-theme="dark"] .hostinger-reach-block-subscription-form input:focus-visible {
	border-color: var(--mar10-accent) !important;
}
html[data-theme="dark"] .hostinger-reach-block-submit.has-background:hover {
	background-color: #6B5B8E !important;   /* darker filled accent; white text ≥ 4.5:1 */
}

/* ==========================================================================
   11. WhatsApp popup (card only; green branding kept)
   ========================================================================== */
html[data-theme="dark"] .wa__popup_chat_box {
	background-color: var(--mar10-surface) !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
}
html[data-theme="dark"] .wa__popup_content,
html[data-theme="dark"] .wa__popup_content_list {
	background-color: var(--mar10-surface) !important;
}
html[data-theme="dark"] .wa__popup_content_item .wa__stt {
	background-color: var(--mar10-surface-2) !important;
	border-color: var(--mar10-divider) !important;
}
html[data-theme="dark"] .wa__popup_notice,
html[data-theme="dark"] .wa__popup_content_item .wa__member_duty,
html[data-theme="dark"] .wa__popup_content_item .wa__member_status {
	color: var(--mar10-muted) !important;
}
html[data-theme="dark"] .wa__popup_content_item .wa__member_name {
	color: var(--mar10-text) !important;
}

/* ==========================================================================
   12. Footer (colour via --wp--preset--color--color-2 above) + separation
   ========================================================================== */
html[data-theme="dark"] footer > .wp-block-group {
	border-top: 1px solid var(--mar10-divider);
}

/* ==========================================================================
   13. WooCommerce Coming Soon page (only reachable in Night with a saved preference)
   ========================================================================== */
/* Social icons there use an inline style: color: var(--wp--preset--color--contrast, #111111).
   The variable is defined only inside the Coming Soon block, so nothing else on the site changes. */
html[data-theme="dark"] .woocommerce-coming-soon-default,
html[data-theme="dark"] .wp-block-woocommerce-coming-soon {
	--wp--preset--color--contrast: var(--mar10-text);
}