/*
 * OSTADEEZ — scheme-driven surfaces.
 *
 * THE STANDARD: a surface belongs here when it is drawn by a PLUGIN that ships its own literal
 * colours and therefore cannot follow the token swap on its own. Everything in this file does one
 * thing — hand that surface a `--ostz-*` token instead of the colour it shipped with.
 *
 * Nothing here invents a colour. If a rule below contains a hex value, it is wrong.
 */

/* ---------------------------------------------------------------- the toggle */

.ostz-scheme {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--ostz-line-strong);
	border-radius: 10px;
	background: transparent;
	color: var(--ostz-text-dim);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	transition: color .18s ease, border-color .18s ease;
}

.ostz-scheme:hover {
	color: var(--ostz-accent);
	border-color: var(--ostz-accent);
}

/* One glyph per scheme: the icon shows what a click will GIVE you, not where you are. */
.ostz-scheme-sun {
	display: none;
}

.ostz-scheme-moon {
	display: inline;
}

[data-theme='light'] .ostz-scheme-sun {
	display: inline;
}

[data-theme='light'] .ostz-scheme-moon {
	display: none;
}

/* ---------------------------------------------------------------- category chips
   ⚠ THE SPECIFICITY TRAP, caught by flipping to light and measuring: `.ostz a { color: inherit }`
   in the main sheet scores 0-1-1 and therefore BEATS `.ostz-chip` at 0-1-0, so the chips never
   used their own colour token at all — they inherited, and in light mode read as near-white text
   on a near-white surface. Nothing errored; the rule that lost is still right there in the file.

   Fixed by selecting the chip through its own class WITH the root class (0-2-0), which is the
   house rule: every styled child gets its own class and is selected by it. */

.ostz .ostz-chip {
	color: var(--ostz-text-dim);
}

.ostz .ostz-chip:hover,
.ostz .ostz-chip-on {
	color: var(--ostz-text);
}

.ostz .ostz-chip-count {
	color: var(--ostz-text-faint);
}

/* ---------------------------------------------------------------- the filter rail
   The search plugin paints its sidebar in its own stylesheet, which is why the rail stayed light
   on a dark page. These hand it the tokens; the values still live in one place.

   ⚠ THE CLASS NAMES BELOW WERE READ OFF THE RENDERED PAGE, not carried over. The previous
   version of this block styled `dms-sidebar-box__body`, `dms-widget` and `dm-search-widget` —
   names this plugin version does not emit — so it painted nothing at all while looking correct
   in the file. Measured result before the fix: accordion titles at 1.14 contrast, i.e. invisible,
   and white toggle pills. A rule that matches nothing fails silently and forever. */

.ostz-filters .dms-sidebar-box,
.ostz-filters .dms-sidebar-box__header,
.ostz-filters .dms-sidebar-box__plain,
.ostz-filters .dms-card,
.ostz-filters .dms-card__body {
	background: transparent;
	color: var(--ostz-text);
	border-color: var(--ostz-line);
}

/* The rail is already a panel; a second panel inside it is a box in a box. */
.ostz-filters .dms-sidebar-box {
	border: 0;
	padding: 0;
	box-shadow: none;
}

/* The plugin prints its own «فیلترها» heading, and the rail header above it says the same word.
   One heading per thing. */
.ostz-filters .dms-sidebar-box__header {
	display: none;
}

/* Same duplication one level down: the card repeats the accordion's own title. */
.ostz-filters .dms-card__header {
	display: none;
}

.ostz-filters .dms-accordion-item {
	border: 0;
	border-block-end: 1px solid var(--ostz-line);
	background: transparent;
}

.ostz-filters .dms-accordion-item:last-child {
	border-block-end: 0;
}

.ostz-filters .dms-accordion-item__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 44px;
	padding: 8px 4px;
	border: 0;
	background: transparent;
	color: var(--ostz-text);
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 700;
	cursor: pointer;
}

.ostz-filters .dms-accordion-item__title {
	color: var(--ostz-text);
}

.ostz-filters .dms-accordion-item__chevron {
	color: var(--ostz-text-faint);
}

.ostz-filters .dms-accordion-item__body {
	padding-block-end: var(--ostz-space-2);
}

/* Stock switches. The plugin's pill is a light-theme control — grey track, white knob — which
   reads as a disabled input on a dark surface. */
.ostz-filters .dms-switch-row {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 36px;
	color: var(--ostz-text-dim);
	font-size: 13px;
}

.ostz-filters .dms-switch {
	accent-color: var(--ostz-accent);
	background: var(--ostz-bg-sunken);
	border: 1px solid var(--ostz-line-strong);
}

.ostz-filters .dms-switch:checked {
	background: var(--ostz-accent);
	border-color: var(--ostz-accent);
}

.ostz-filters a,
.ostz-filters span,
.ostz-filters label,
.ostz-filters h2,
.ostz-filters h3,
.ostz-filters h4 {
	color: inherit;
}

/*
 * ⚠ Checkbox rhythm. The plugin ships generous padding meant for a full-width sidebar; in a
 * 268px rail it turns six categories into a scroll. Tightened to a 30px row, which is still a
 * comfortable touch target on a phone — going below that trades a real usability property for
 * density, which is not a trade worth making.
 */
.ostz-filters li,
.ostz-filters .dms-term-item {
	margin: 0;
}

.ostz-filters li label,
.ostz-filters .dms-term-item label {
	gap: 8px;
	padding: 4px 4px;
	min-height: 30px;
	line-height: 1.5;
}

.ostz-filters input[type='checkbox'],
.ostz-filters input[type='radio'] {
	accent-color: var(--ostz-accent);
	margin: 0;
}

.ostz-filters .dms-term-count,
.ostz-filters .dms-count {
	color: var(--ostz-text-faint);
	font-size: 12px;
	margin-inline-start: auto;
}

/* ---------------------------------------------------------------- the search modal
   Renders into every page's footer, so it is a sitewide surface, not a shop one. Measured on the
   rendered page: a white submit face, a #888 close control and a #3e68ff «show all results»
   button — three of the plugin's own defaults, none of them in this palette. */

.ostz .dm-search-modal__panel,
.ostz .dm-search-modal__box {
	background: var(--ostz-bg-raised);
	border-color: var(--ostz-line);
	color: var(--ostz-text);
}

.ostz .dm-search-modal__close {
	color: var(--ostz-text-dim);
	background: transparent;
}

.ostz .dm-search-form__input {
	background: var(--ostz-bg-sunken);
	border-color: var(--ostz-line-strong);
	color: var(--ostz-text);
}

.ostz .dm-search-form__submit {
	background: var(--ostz-accent);
	color: var(--ostz-accent-ink);
	border-color: var(--ostz-accent);
}

.ostz .dm-search-more-btn {
	background: var(--ostz-accent);
	color: var(--ostz-accent-ink);
}

/* ---------------------------------------------------------------- the cart drawer
   The cart-modal plugin is fully settings-driven and emits `--dm-scm-*` custom properties from
   values saved in the database. Saved values are static, so the drawer could not follow the
   scheme — these point the same variables at the tokens instead. */

.dm-scm-drawer,
.dm-scm-drawer-content,
.dm-scm-modal,
.dm-scm-overlay,
body {
	--dm-scm-bg: var(--ostz-bg-raised);
	--dm-scm-bg-alt: var(--ostz-bg-raised-2);
	--dm-scm-panel: var(--ostz-bg-raised);
	--dm-scm-surface: var(--ostz-bg-raised);
	--dm-scm-box: var(--ostz-bg-sunken);
	--dm-scm-text: var(--ostz-text);
	--dm-scm-text-light: var(--ostz-text-dim);
	--dm-scm-muted: var(--ostz-text-dim);
	--dm-scm-border: var(--ostz-line);
	--dm-scm-primary: var(--ostz-accent);
	--dm-scm-primary-text: var(--ostz-accent-ink);
	--dm-scm-danger: var(--ostz-danger);
}

.dm-scm-drawer-content,
.dm-scm-drawer-header,
.dm-scm-drawer-body,
.dm-scm-drawer-footer,
.dm-scm-modal {
	background: var(--ostz-bg-raised);
	color: var(--ostz-text);
	border-color: var(--ostz-line);
}

.dm-scm-drawer-header,
.dm-scm-drawer-footer {
	border-color: var(--ostz-line);
}

.dm-scm-drawer-content a,
.dm-scm-modal a {
	color: var(--ostz-accent);
}

/* ---------------------------------------------------------------- the login controls
   ⚠ The OTP button is the single most important control in the purchase path, and it was wearing
   the plugin's own colour rather than the site's. Both entry points get the same treatment: the
   modal that opens anywhere on the site, and the standalone forced-login page, which never loads
   the theme stylesheet and so is handed the same variables through the plugin's own hook. */

.dml-btn-primary,
.dml-btn.dml-btn-primary,
button.dml-btn-primary {
	background: var(--ostz-gradient);
	border-color: transparent;
	color: var(--ostz-accent-ink);
	font-family: inherit;
	font-weight: 700;
}

.dml-btn-primary:hover {
	filter: brightness(1.08);
	color: var(--ostz-accent-ink);
}

.dml-btn:not(.dml-btn-primary) {
	background: var(--ostz-bg-raised-2);
	border-color: var(--ostz-line-strong);
	color: var(--ostz-text);
	font-family: inherit;
}

.dml-btn:not(.dml-btn-primary):hover {
	border-color: var(--ostz-accent);
	color: var(--ostz-accent);
}