/**
 * Night mode: the page, and every colour variable the panel sets on a part of
 * the site (header, footer, shop, product, cart, account…). The panel writes
 * those on the element itself, so they are overridden here with !important.
 * Colours written inside each stylesheet come from its «.dark.css» companion
 * (tools/build-dark.py). The same night palette is used in both.
 */

html[data-farin-theme="dark"] {
	color-scheme: dark;
	--farin-night-page: #121019;
	--farin-night-surface: #1b1726;
	--farin-night-soft: #241f31;
	--farin-night-line: #342d46;
	--farin-night-text: #ece9f2;
	--farin-night-muted: #a59fb8;
}

html[data-farin-theme="dark"] body {
	background-color: var(--farin-night-page) !important;
	color: var(--farin-night-text);
}

html[data-farin-theme="dark"] body,
html[data-farin-theme="dark"] body * {
	--fh-panel: var(--farin-night-surface) !important;
	--fh-layer: var(--farin-night-surface) !important;
	--fh-soft: var(--farin-night-soft) !important;
	--fh-line: var(--farin-night-line) !important;
	--fh-fg: var(--farin-night-text) !important;
	--ff-panel: var(--farin-night-surface) !important;
	--ff-layer: var(--farin-night-surface) !important;
	--ff-card: var(--farin-night-soft) !important;
	--ff-soft: var(--farin-night-soft) !important;
	--ff-line: var(--farin-night-line) !important;
	--ff-fg: var(--farin-night-text) !important;
	--ff-ink: var(--farin-night-text) !important;
	--ff-muted: var(--farin-night-muted) !important;
	--ff-bar: var(--farin-night-page) !important;
	--ff-bar-fg: var(--farin-night-muted) !important;
	--fc-card: var(--farin-night-surface) !important;
	--fc-soft: var(--farin-night-soft) !important;
	--fc-line: var(--farin-night-line) !important;
	--fc-muted: var(--farin-night-muted) !important;
	--fc-text: var(--farin-night-text) !important;
	--fp-card: var(--farin-night-surface) !important;
	--fp-soft: var(--farin-night-soft) !important;
	--fp-line: var(--farin-night-line) !important;
	--fp-muted: var(--farin-night-muted) !important;
	--fs-card: var(--farin-night-surface) !important;
	--fs-soft: var(--farin-night-soft) !important;
	--fs-line: var(--farin-night-line) !important;
	--fs-muted: var(--farin-night-muted) !important;
	--fa-ink: var(--farin-night-text) !important;
	--fa-soft: var(--farin-night-soft) !important;
	--fa-line: var(--farin-night-line) !important;
	--fa-muted: var(--farin-night-muted) !important;
	--fl-ink: var(--farin-night-text) !important;
	--fl-line: var(--farin-night-line) !important;
	--fl-muted: var(--farin-night-muted) !important;
	--fpo-ink: var(--farin-night-text) !important;
	--fpo-soft: var(--farin-night-soft) !important;
	--fpo-line: var(--farin-night-line) !important;
	--fpo-muted: var(--farin-night-muted) !important;
	--fbb-bg: var(--farin-night-surface) !important;
	--fbb-fg: var(--farin-night-muted) !important;
	--soon-text: var(--farin-night-text) !important;
	--soon-muted: var(--farin-night-muted) !important;
	--soon-line: var(--farin-night-line) !important;
}

/* Form fields WordPress and WooCommerce draw themselves. */
html[data-farin-theme="dark"] input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="range"], [type="color"]),
html[data-farin-theme="dark"] select,
html[data-farin-theme="dark"] textarea {
	background-color: var(--farin-night-soft);
	border-color: var(--farin-night-line);
	color: var(--farin-night-text);
}

html[data-farin-theme="dark"] ::placeholder {
	color: var(--farin-night-muted);
}

/* Day and night logos: both printed, one shown. */
html:not([data-farin-theme="dark"]) .farin-logo--night,
html[data-farin-theme="dark"] .farin-logo--day {
	display: none !important;
}

/* ---------- The header key ---------- */

/* A <button> among link icons: none of the browser's own frame or grey fill. */
.farin-daynight {
	position: relative;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.farin-daynight:focus:not(:focus-visible) {
	outline: none;
}

.farin-daynight__moon,
.farin-daynight__sun {
	display: grid;
	place-items: center;
	transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.2s ease;
}

.farin-daynight__sun {
	position: absolute;
	inset: 0;
	opacity: 0;
	transform: rotate(-90deg) scale(0.6);
}

html[data-farin-theme="dark"] .farin-daynight__moon {
	opacity: 0;
	transform: rotate(90deg) scale(0.6);
}

html[data-farin-theme="dark"] .farin-daynight__sun {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.farin-daynight__moon,
	.farin-daynight__sun {
		transition: none;
	}
}

/* The glass bottom bar at night: a darker pane, quieter edges. */
html[data-farin-theme="dark"] .fbb--glass {
	border-color: rgb(255 255 255 / 0.1);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 12px 32px rgb(0 0 0 / 0.4);
}

html[data-farin-theme="dark"] .fbb--glass .fbb__lens {
	border-color: rgb(255 255 255 / 0.12);
	background: rgb(255 255 255 / 0.1);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12);
}

/* Night for parts tinted from a panel colour (the dark builder cannot follow color-mix). */
html[data-farin-theme="dark"] .fc-cross {
	background: color-mix(in srgb, var(--fc-accent) 10%, var(--farin-night-surface));
}

html[data-farin-theme="dark"] .fs-hero {
	--fs-hero1: var(--farin-night-soft) !important;
	--fs-hero2: color-mix(in srgb, var(--fs-accent) 18%, var(--farin-night-surface)) !important;
	--fs-hero-ink: var(--farin-night-text) !important;
}

html[data-farin-theme="dark"] .fs-hero__art {
	opacity: 0.92;
}

html[data-farin-theme="dark"] .fs-promo {
	border-color: color-mix(in srgb, var(--t1) 28%, var(--farin-night-line));
	background-color: color-mix(in srgb, var(--t1) 12%, var(--farin-night-surface));
	color: var(--farin-night-text) !important;
}

html[data-farin-theme="dark"] .fs-promo i {
	background: color-mix(in srgb, var(--t1) 24%, var(--farin-night-surface));
	color: color-mix(in srgb, var(--t1) 55%, #fff);
}

html[data-farin-theme="dark"] .fs-dd__btn,
html[data-farin-theme="dark"] .fs-dd__menu {
	background: var(--farin-night-surface);
	color: var(--farin-night-text);
}

html[data-farin-theme="dark"] .fs-dd__menu button {
	color: var(--farin-night-text);
}

/* «اسلاید محصولات» at night: the glass sits on a dark tint, its cards a faint frost. */
html[data-farin-theme="dark"] .fhm-products {
	--fpr-arrow-bg: var(--farin-night-surface);
	--fpr-arrow-fg: var(--farin-night-text);
	--fpr-glass1: color-mix(in srgb, var(--fhm-accent) 22%, var(--farin-night-page)) !important;
	--fpr-glass2: var(--farin-night-surface) !important;
}

html[data-farin-theme="dark"] .fhm-products.is-glass .fs-card {
	border-color: rgb(255 255 255 / 0.1);
	background: rgb(255 255 255 / 0.05);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
}

html[data-farin-theme="dark"] .fhm-products.is-glass .fs-card__media,
html[data-farin-theme="dark"] .fhm-products.is-glass .fhm-products__arrow {
	background: rgb(255 255 255 / 0.06);
}

html[data-farin-theme="dark"] .fhm-products.is-glass.no-bg .fs-card {
	border-color: rgb(255 255 255 / 0.1);
	background: linear-gradient(160deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.03));
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08);
}

html[data-farin-theme="dark"] .fhm-products.is-glass.no-bg .fs-card__media {
	background: rgb(255 255 255 / 0.05);
}