/* Farhina Core — dark mode (see class-dark-mode.php). Active only under html.fc-dark; light mode is untouched.
 * The Bazarak theme draws everything from RGB-triplet variables, so the palette swap below does most of the work;
 * the rest overrides colours that are hard-coded in this plugin's CSS, the theme or other plugins. */

html.fc-dark {
	color-scheme: dark;
	/* Neutral scale inverted: 50 is now the darkest surface tone, 900 the brightest text. */
	--color-neutral-50: 16 20 26;
	--color-neutral-100: 27 32 40;
	--color-neutral-200: 44 51 62;
	--color-neutral-300: 66 75 89;
	--color-neutral-400: 134 144 160;
	--color-neutral-500: 152 162 177;
	--color-neutral-600: 176 185 198;
	--color-neutral-700: 199 206 216;
	--color-neutral-800: 222 227 234;
	--color-neutral-900: 237 240 245;
	--color-neutral-950: 247 248 250;
	/* Brand teal: 600 slightly deeper so white button text stays readable; 700+ lighter because they are text colours. */
	--color-primary-50: 17 40 41;
	--color-primary-100: 20 53 53;
	--color-primary-200: 25 76 74;
	--color-primary-300: 35 106 101;
	--color-primary-400: 52 150 142;
	--color-primary-500: 31 158 148;
	--color-primary-600: 22 128 120;
	--color-primary-700: 92 206 197;
	--color-primary-800: 132 220 213;
	--color-primary-900: 174 233 228;
	--color-primary-950: 208 244 241;
	--surface-rgb: 23 28 36;
	--body-background: #0f1318;
	--box-background: #171c24;
	--box-border: rgb(var(--color-neutral-200) / .7);
	--fc-dk-text: #edf0f5;
	--fc-dk-mute: #a9b3c2;
	--fc-dk-card: #171c24;
	--fc-dk-card2: #1d232d;
	--fc-dk-line: #2c333e;
	--fc-dk-teal: #5ccec5;
}
html.fc-dark body { background-color: var(--body-background); }
html.fc-dark ::selection { background-color: rgb(92 206 197 / .3); }

/* Text meant to stay white (buttons, badges and labels on teal, photos or gradients). */
html.fc-dark .text-surface,
html.fc-dark .hover\:text-surface:hover,
html.fc-dark .group:hover .group-hover\:text-surface { color: #fff; }
/* Teal as a text colour: the lighter 700 tone (the 600 tone is tuned as a button background for white text). */
html.fc-dark .text-primary-600,
html.fc-dark .hover\:text-primary-600:hover,
html.fc-dark .group:hover .group-hover\:text-primary-600 { color: rgb(var(--color-primary-700)); }
html.fc-dark .button, html.fc-dark button.button, html.fc-dark a.button { color: #fff; }
html.fc-dark .bazarak-product-card-title, html.fc-dark .woocommerce-loop-product__title { color: var(--fc-dk-text) !important; }
/* Elements that are dark on purpose stay dark (the inverted scale would make them light). */
html.fc-dark .bg-neutral-950 { background-color: #0b0e12; }
html.fc-dark .bg-neutral-900 { background-color: #1b212b; }
html.fc-dark .bg-neutral-800 { background-color: #252c37; }
html.fc-dark .bg-neutral-950\/50 { background-color: rgb(0 0 0 / .6); }
html.fc-dark .bg-neutral-950\/45 { background-color: rgb(0 0 0 / .55); }
/* Tailwind status colours: lighter tones read better on dark. */
html.fc-dark .text-emerald-600, html.fc-dark .text-emerald-700 { color: #34d399; }
html.fc-dark .text-amber-600, html.fc-dark .text-amber-700 { color: #fbbf24; }
html.fc-dark .text-red-500, html.fc-dark .text-red-600, html.fc-dark .text-rose-500, html.fc-dark .text-rose-600 { color: #f87171; }
html.fc-dark .bg-emerald-50 { background-color: rgb(16 185 129 / .12); }
html.fc-dark .bg-amber-50 { background-color: rgb(245 158 11 / .12); }
html.fc-dark .bg-red-50, html.fc-dark .bg-rose-50 { background-color: rgb(239 68 68 / .12); }

/* Forms (WooCommerce and theme). */
html.fc-dark input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
html.fc-dark select, html.fc-dark textarea { color: var(--fc-dk-text); }
html.fc-dark ::placeholder { color: #8a94a6; opacity: 1; }

/* Images: dim bright product photos a little so they do not glare on a dark page. */
html.fc-dark .bazarak-product-card img,
html.fc-dark .woocommerce-product-gallery img,
html.fc-dark .product-gallery img { filter: brightness(.94); }

/* ---- farhina-core: storefront.css ---- */
html.fc-dark .bazarak-product-card { border-color: var(--fc-dk-line) !important; background-color: var(--fc-dk-card) !important; box-shadow: none !important; }
html.fc-dark .bazarak-product-card .aspect-square { background-color: #eef1f4 !important; }
html.fc-dark .bazarak-categories-widget > .grid > a > div:first-child { background: rgb(var(--color-primary-50)) !important; box-shadow: 0 0 0 2px var(--body-background), 0 0 0 4px rgb(92 206 197 / .35); }
html.fc-dark .elementor-element-fa51003 .bazarak-media-cta { background: linear-gradient(135deg, #12292a 0%, #151c24 55%, #171c24 100%) !important; }
html.fc-dark .elementor-element-fa51003 .bazarak-media-cta h1::before { border-color: rgb(92 206 197 / .3); background: var(--fc-dk-card); color: var(--fc-dk-teal); }
html.fc-dark .elementor-element-fa51003 .bazarak-media-cta ul > li { border-color: var(--fc-dk-line); background: rgb(23 28 36 / .85); color: var(--fc-dk-text); }
html.fc-dark .elementor-element-fa51003 .bazarak-media-cta ul > li > span:first-child { background: rgb(var(--color-primary-100)) !important; color: var(--fc-dk-teal) !important; }
html.fc-dark .elementor-element-fa51003 .bazarak-media-cta .group::after { background: rgb(23 28 36 / .94); color: var(--fc-dk-teal); }
html.fc-dark .wp-block-details { border-color: var(--fc-dk-line); background: var(--fc-dk-card); }
html.fc-dark .wp-block-details > summary { color: var(--fc-dk-text); }

/* ---- farhina-core: mobile header, buy bar ---- */
html.fc-dark [data-bazarak-sticky-header].fixed { background-color: var(--fc-dk-card) !important; box-shadow: 0 8px 24px -16px rgb(0 0 0 / .8); }
html.fc-dark .fbb { background: rgb(23 28 36 / .96); border-top-color: var(--fc-dk-line); box-shadow: 0 -14px 34px -20px rgb(0 0 0 / .8); }
html.fc-dark .fbb__price { color: var(--fc-dk-text); }
html.fc-dark .fbb__incart { color: var(--fc-dk-teal); }
html.fc-dark .fbb-on [data-bazarak-single-cart-form] [data-bazarak-product-card-cart][data-context="single"] > [data-bazarak-card-cart-quantity] { border-color: rgb(var(--color-primary-300)); background: rgb(var(--color-primary-50)); }

/* ---- farhina-core: product page additions ---- */
html.fc-dark .fpe-chip { background: #222a35; color: #cbd3df; }
html.fc-dark a.fpe-chip:hover { background: #2a3340; }
html.fc-dark .fpe-chip--brand { background: rgb(92 206 197 / .14); color: var(--fc-dk-teal); }
html.fc-dark a.fpe-chip--brand:hover { background: rgb(92 206 197 / .22); }
html.fc-dark .fpe-chip--ok { background: rgb(52 211 153 / .13); color: #6ee7b7; }
html.fc-dark .fpe-chip--warn { background: rgb(248 113 113 / .13); color: #fca5a5; }
html.fc-dark .fpe-chip--seal { background: rgb(251 146 60 / .13); color: #fdba74; }
html.fc-dark .fpe-chip--review { background: rgb(251 191 36 / .13); color: #fcd34d; }
html.fc-dark a.fpe-chip--review:hover { background: rgb(251 191 36 / .2); }
html.fc-dark .fpe-chip--date { background: rgb(56 189 248 / .13); color: #7dd3fc; }
html.fc-dark .fpe-card, html.fc-dark .fpe-inst, html.fc-dark .fpe-rs { border-color: var(--fc-dk-line); background: var(--fc-dk-card); }
html.fc-dark .fpe-rs__score strong { color: var(--fc-dk-text); }
html.fc-dark .fpe-cashback { background: linear-gradient(135deg, rgb(52 211 153 / .1), rgb(92 206 197 / .1)); border-color: rgb(92 206 197 / .25); }
html.fc-dark .fpe-cashback strong { color: var(--fc-dk-teal); }
html.fc-dark .fpe-keyspecs__grid > div { background: var(--fc-dk-card2); }
html.fc-dark .fpe-inst__icon { background: rgb(92 206 197 / .14); color: var(--fc-dk-teal); }
html.fc-dark .fpe-stars { color: #3a4350; }
html.fc-dark .fpe-rs__row i { background: #2a313c; }
html.fc-dark .fpe-rs__cta { border-top-color: var(--fc-dk-line); }

/* ---- farhina-core: checkout ---- */
html.fc-dark .input-postcode-invalid { background-color: rgb(239 68 68 / .1) !important; }
html.fc-dark .fpe-card__title, html.fc-dark .fpe-keyspecs__grid dd, html.fc-dark .fpe-inst__text b { color: var(--fc-dk-text); }
html.fc-dark .fpe-keyspecs__grid dt, html.fc-dark .fpe-inst__text small { color: var(--fc-dk-mute); }
html.fc-dark .fpe-inst__text small .woocommerce-Price-amount { color: var(--fc-dk-teal); }
html.fc-dark .wp-block-details > :not(summary) { color: var(--fc-dk-mute); }
html.fc-dark .wp-block-details[open] > summary, html.fc-dark .wp-block-details a { color: var(--fc-dk-teal); }
html.fc-dark .woocommerce-Price-currencySymbol { color: var(--fc-dk-mute); }

/* Content links (no class) and teal on teal states. */
html.fc-dark a:not([class]) { color: var(--fc-dk-teal); }
html.fc-dark .text-primary-300 { color: rgb(var(--color-primary-400)); }
html.fc-dark .bg-primary-600, html.fc-dark .\!bg-primary-600 { color: #fff; }
html.fc-dark [data-fc-nav-tracking][aria-current="page"], html.fc-dark [data-fc-nav-tracking][aria-current="page"] span { color: var(--fc-dk-teal); }

/* ---- farhina-core: contact page ---- */
html.fc-dark .farhina-contact-hub .bg-gradient-to-br.from-white { background-image: linear-gradient(to bottom right, var(--fc-dk-card), var(--fc-dk-card), rgb(var(--color-primary-50) / .5)); }
html.fc-dark .farhina-contact-hub .bg-gradient-to-r.from-primary-50 { background-image: linear-gradient(to bottom right, rgb(var(--color-primary-50)), var(--fc-dk-card), rgb(var(--color-primary-50) / .5)); }
html.fc-dark .farhina-contact-hub .border-emerald-200 { border-color: rgb(52 211 153 / .3); }
html.fc-dark .farhina-contact-hub .bg-emerald-50\/90 { background-color: rgb(52 211 153 / .1); }
html.fc-dark .farhina-contact-hub .text-emerald-800, html.fc-dark .farhina-contact-hub .text-emerald-700 { color: #6ee7b7; }
html.fc-dark .farhina-contact-hub .text-sky-700 { color: #7dd3fc; }
html.fc-dark .farhina-contact-hub .text-indigo-700 { color: #a5b4fc; }
html.fc-dark .farhina-contact-hub .text-orange-700 { color: #fdba74; }
html.fc-dark .farhina-contact-hub .text-primary-700 { color: var(--fc-dk-teal); }
html.fc-dark .farhina-contact-hub input:focus, html.fc-dark .farhina-contact-hub textarea:focus { background-color: var(--fc-dk-card2) !important; }
html.fc-dark .farhina-contact-hub [class*="bg-primary-600"] *, html.fc-dark .farhina-contact-hub .bg-primary-600 { color: #fff; }

/* ---- Order tracker plugin (popup and page) ---- */
html.fc-dark .fsot__dialog, html.fc-dark .fsot__panel, html.fc-dark .fsot__card { background: var(--fc-dk-card) !important; color: var(--fc-dk-text); }
html.fc-dark .fsot input, html.fc-dark .fsot__dialog input { background: var(--fc-dk-card2) !important; border-color: var(--fc-dk-line) !important; color: var(--fc-dk-text) !important; }
html.fc-dark .fsot__field-hint { color: var(--fc-dk-mute) !important; }

/* ---- Voorodak SMS login ---- */
html.fc-dark .voorodak, html.fc-dark .voorodak-default { background: var(--body-background) !important; color: var(--fc-dk-text); }
html.fc-dark .voorodak__wrapper-main-box, html.fc-dark .voorodak-back { background: var(--fc-dk-card) !important; border-color: var(--fc-dk-line) !important; color: var(--fc-dk-text) !important; }
html.fc-dark .voorodak input { background: var(--fc-dk-card2) !important; border-color: var(--fc-dk-line) !important; color: var(--fc-dk-text) !important; }

/* ---- TorobPay instalment widget ---- */
html.fc-dark .torobpay-widget { background: var(--fc-dk-card2) !important; border-color: var(--fc-dk-line) !important; color: var(--fc-dk-text) !important; }
html.fc-dark [role="tab"][aria-selected="true"] { color: #fff !important; }
html.fc-dark .fsot__label-row, html.fc-dark .fsot__label-row span { color: var(--fc-dk-text) !important; }
html.fc-dark .farhina-contact-hub .bg-neutral-100 span { color: var(--fc-dk-teal); }
html.fc-dark .voorodak__wrapper-main-box-title { color: var(--fc-dk-text) !important; }
html.fc-dark .voorodak p { color: var(--fc-dk-mute) !important; }
html.fc-dark .torobpay-widget *:not(svg):not(path):not(img) { color: var(--fc-dk-text) !important; }

/* ---- Theme chooser (both modes) ---- */
.fc-dm { position: relative; }
.fc-dm-btn .fc-dm-i--moon, html.fc-dark .fc-dm-btn .fc-dm-i--sun { display: none; }
html.fc-dark .fc-dm-btn .fc-dm-i--moon { display: block; }
.fc-dm-pop { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 90; display: grid; gap: 2px; min-width: 150px; padding: 6px; border: 1px solid rgb(var(--color-neutral-200)); border-radius: 18px; background: rgb(var(--surface-rgb)); box-shadow: 0 18px 40px -18px rgb(15 23 42 / .35); }
.fc-dm-pop[hidden] { display: none; }
.fc-dm-pop button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 12px; font: inherit; font-size: 13px; font-weight: 600; color: rgb(var(--color-neutral-700)); text-align: start; }
.fc-dm-pop button:hover { background: rgb(var(--color-neutral-100)); }
.fc-dm-pop button.is-active { background: rgb(var(--color-primary-50)); color: rgb(var(--color-primary-700)); }
.fc-dm-seg { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; padding: 8px 8px 8px 12px; border-radius: 16px; background: rgb(var(--surface-rgb)); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05); }
.fc-dm-seg__label { font-size: 13px; font-weight: 700; color: rgb(var(--color-neutral-700)); white-space: nowrap; }
.fc-dm-seg__opts { display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: rgb(var(--color-neutral-100)); }
.fc-dm-seg__opts button { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 9px; border-radius: 9px; font: inherit; font-size: 12px; font-weight: 600; color: rgb(var(--color-neutral-500)); }
.fc-dm-seg__opts button svg { width: 15px; height: 15px; }
.fc-dm-seg__opts button.is-active { background: rgb(var(--surface-rgb)); color: rgb(var(--color-primary-700)); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
html.fc-dark .fc-dm-seg__opts button.is-active { background: #2a323e; color: var(--fc-dk-teal); }
html.fc-dark .fc-dm-pop button.is-active { color: var(--fc-dk-teal); }
/* View-transition cross-fade when switching. */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; }
/* The logo's thin dark-teal wordmark: lift it so it reads on dark backgrounds. */
html.fc-dark .bazarak-site-logo, html.fc-dark .fsf-logo-img { filter: brightness(1.45) saturate(1.1); }
/* Desktop top bar: its colour comes from the theme settings as an inline style. */
html.fc-dark header > .hidden.lg\:block.text-tiny[style*="background-color"] { background-color: rgb(var(--color-primary-600)) !important; }
html.fc-dark .fbb__hint { color: var(--fc-dk-mute); }
html.fc-dark .voorodak form button { background-color: #2563eb !important; border-color: #2563eb !important; }