/*
 * Mashin Irani — front-end fixes.
 * Modal close button: the sprite #i-close is stroke-based, but the frozen .close rule set no
 * svg size/stroke, so the × rendered invisible. Give it size + stroke color.
 */
.close { color: var(--text-secondary, #404751); }
.close svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.close:hover { color: var(--navy-900, #102134); }

/*
 * Wishlist heart button: sprite #i-heart is a solid silhouette, but the svg is a flex item inside
 * the display:flex .wish button and (having no viewBox / no intrinsic width) got shrunk by the flex
 * algorithm to ~2px wide — invisible. flex:none stops the shrink; render it as a gray outline that
 * fills red when saved (aria-pressed) or hovered. Site-wide (product cards appear across the site).
 */
button.wish svg {
	flex: none !important;
	width: 18px !important;
	height: 18px !important;
	fill: none !important;
	stroke: var(--slate-600, #404751) !important;
	stroke-width: 2 !important;
	stroke-linecap: round;
	stroke-linejoin: round;
}
button.wish:hover svg { stroke: var(--clay-error, #b4402e) !important; }
button.wish[aria-pressed="true"] svg { fill: var(--clay-error, #b4402e) !important; stroke: var(--clay-error, #b4402e) !important; }

/*
 * Header tweaks.
 * 1) Keep primary-nav labels on one line — «تست آزمایشگاه» was wrapping to two lines.
 * 2) Shrink the oversized «دریافت اکتان رایگان» CTA (was 19px / 218×55).
 * 3) The wallet now lives inside the account page, so hide the header wallet pill.
 */
.site-header nav.primary a { white-space: nowrap; }
.cta-hdr #ctaFreeOctane { font-size: .9rem; padding: 9px 16px; gap: 6px; }
.cta-hdr #ctaFreeOctane svg.icon { width: 16px !important; height: 16px !important; }
.wallet-pill { display: none !important; }

/*
 * Global accent recolor #c36 → #0E1D3B.
 * The Hello-Elementor parent theme's reset.css defaults unstyled links + buttons to #c36 (magenta):
 *   a{color:#c36}  [type=button],[type=submit],button{border:1px solid #c36;color:#c36}
 *   button:hover{background-color:#c36}
 * We can't edit the third-party parent theme (updates would revert it), so we override those exact
 * reset selectors here with the brand navy. Same specificity as reset.css but loaded later, so only the
 * still-magenta spots flip; intentionally-coloured links/buttons (higher specificity) keep their colour.
 * No !important — the theme's real styles are never clobbered. (reset's a:hover is #336, left untouched.)
 */
a { color: #0E1D3B; }
[type="button"], [type="submit"], button { border-color: #0E1D3B; color: #0E1D3B; }

/*
 * The reset's HOVER/FOCUS FILL is CANCELLED, not re-pointed.
 *
 * This used to read `background-color: #0E1D3B`, i.e. the magenta wash was merely repainted navy.
 * That was wrong twice over:
 *   1. This design's base rule is `button{border:0;background:none;color:inherit}` — a solid block
 *      fill on hover was never part of it. Component buttons carry a `.class button` (0,1,1) colour
 *      but no background, so the (0,1,1) global rule tied on specificity and won on source order,
 *      washing them dark while their text stayed --text-secondary grey. Worst offenders: the product
 *      tab bar (.tablist button), the review filter pills (.rev-filters button), the octane-calculator
 *      chips (.moc-chip), the wishlist button (.wish-btn) and every modal close (.close) — whose ×
 *      is --navy-900 and therefore went invisible on the dark fill.
 *   2. #0E1D3B is a LITERAL hex, so mirani-recolor.css cannot reach it. After the orange/goldenrod/grey
 *      re-theme it was the only navy left on the site, appearing only on hover.
 * Cancelling it restores the intended base; each component's own hover styling (below, and in the theme
 * sheets) then decides the affordance.
 */
[type="button"]:focus, [type="button"]:hover, [type="submit"]:focus, [type="submit"]:hover, button:focus, button:hover { background-color: transparent; }

/* Keyboard users lose nothing by dropping the fill — they gain a real focus ring instead. */
[type="button"]:focus-visible, [type="submit"]:focus-visible, button:focus-visible {
	outline: 2px solid var(--brand-primary, #D6431A);
	outline-offset: 2px;
}

/*
 * Single-product gallery thumbnails: uniform small squares, always sized for 4 across under the main
 * image — regardless of how many images the product has. The theme used `.gal-thumbs button{flex:1}`,
 * so 1 image filled the whole width and 3 images each took a third (big/inconsistent). Fix: each thumb
 * is a fixed 1/4-of-row square; the row scrolls (snap) when there are more than 4. (.gallery .gal-thumbs
 * out-specifies the theme rule, so no !important; click-to-swap + lightbox JS is untouched.)
 */
.gallery .gal-thumbs {
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 2px;
}
.gallery .gal-thumbs::-webkit-scrollbar { height: 6px; }
.gallery .gal-thumbs::-webkit-scrollbar-thumb { background: var(--border-strong, #c0b2a6); border-radius: 999px; }
.gallery .gal-thumbs button {
	flex: 0 0 calc((100% - (var(--space-3, 12px) * 3)) / 4);
	aspect-ratio: 1 / 1;
	scroll-snap-align: start;
}

/*
 * Gallery zoom button: the frozen markup references <use href="#i-zoom">, but the sprite has no
 * #i-zoom symbol (only #i-search), so the icon rendered as nothing. Hide the empty <svg> and draw the
 * magnifier via a mask (slate icon, turns white on hover to match .gal-zoom:hover). No theme edit.
 */
.gal-zoom > svg { display: none; }
.gal-zoom::after {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background: var(--slate-600, #404751);
	-webkit-mask: center / contain no-repeat;
	mask: center / contain no-repeat;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.35-4.35M11 8v6M8 11h6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.35-4.35M11 8v6M8 11h6'/%3E%3C/svg%3E");
}
.gal-zoom:hover::after { background: #fff; }

/*
 * Welcome/coupon popup close button (and any .close): the #i-close sprite has no viewBox, so inside the
 * display:flex .close button the flex algorithm shrinks it to ~2px wide (a thin sliver — invisible). flex:none
 * stops the shrink and the explicit size restores the visible ×. Same class of bug as .wish / .gal-zoom.
 */
.close svg { flex: none !important; width: 18px !important; height: 18px !important; }

/*
 * Designed buttons that carry an explicit type attribute lost their background fill.
 *
 * reset.css (hello-elementor, emitted AFTER mi.css):
 *     [type="button"],[type="submit"],button { background-color: transparent; border:1px solid #c36; color:#c36 }
 * mi.css:
 *     .btn-cta { background: var(--action-lead-magnet) }
 * Both selectors are specificity (0,1,0). Because reset.css comes later, the transparent background
 * WINS on any <button type="submit" class="btn btn-cta">, which then renders as invisible
 * navy-text-on-navy-panel — e.g. the /club/ wheel «چرخاندن» button and the /wholesale/ submit.
 * Buttons WITHOUT a type attribute (the header CTA) were never affected, which is why the breakage
 * looked page-specific rather than global.
 *
 * The block above ("Global accent recolor") also re-asserts colour/hover-fill on those same reset
 * selectors, so designed buttons additionally got a navy hover wash.
 *
 * Fix: re-assert each designed variant at (0,2,0) so it beats the reset regardless of source order.
 * No !important — anything more specific still wins.
 */
.btn.btn-cta {
	background: var(--action-lead-magnet, #896f3d);
	color: var(--navy-900, #102134);
	border-color: transparent;
}
.btn.btn-buy {
	background: var(--action-buy, #112250);
	color: var(--ivory-50, #F5F0E9);
	border-color: transparent;
}
.btn.btn-outline {
	background: transparent;
	border: 1.5px solid var(--border-strong, #C0B2A6);
	color: var(--text-primary, #102134);
}

/* The reset's hover fill (#0E1D3B) must not repaint a designed button either. */
.btn.btn-cta:hover,
.btn.btn-cta:focus {
	background-color: #6f5a31;
	color: var(--navy-900, #102134);
}
.btn.btn-buy:hover,
.btn.btn-buy:focus {
	background-color: var(--navy-900, #102134);
	color: var(--ivory-50, #F5F0E9);
}
.btn.btn-outline:hover,
.btn.btn-outline:focus {
	background-color: transparent;
	color: var(--navy-900, #102134);
}

/* Disabled designed buttons should read as disabled, not as unstyled. */
.btn:disabled,
.btn[disabled] {
	opacity: .55;
	cursor: not-allowed;
	transform: none;
}

/*
 * Hover affordance for the bare-button groups that the cancelled reset fill used to (badly) provide.
 * Each follows its OWN design language instead of one global wash:
 *   underline tabs  -> soft sunken tint, text darkens, grey underline hint
 *   pill chips      -> solid fill + light text, identical to `.chips button:hover` in pages/home.css
 *   segments/cards  -> tint + stronger border
 */

/*
 * Underline tab bars: the single-product tab strip (توضیحات محصول / مشخصات فنی / نحوهٔ مصرف / …).
 * (0,1,2) beats the theme's `.tablist button` (0,1,1). The active tab's `[aria-selected="true"]`
 * rule is (0,2,1), so its --navy-900 text and gold underline still win — only the tint reaches it.
 */
.tablist button {
	border-radius: var(--radius-md, 8px) var(--radius-md, 8px) 0 0;
	transition: background-color var(--duration-fast, .18s) ease, color var(--duration-fast, .18s) ease;
}
.tablist button:hover {
	background-color: var(--bg-sunken, #F1F2F5);
	color: var(--text-primary, #1A1D22);
	border-bottom-color: var(--border-strong, #D3D8DF);
}

/*
 * Review filter pills (همه / با عکس / با ویدیو / هم‌خودرو). Same shape and same `.on` fill as the
 * homepage `.chips`, so they get the homepage hover: filled, light text. `.rev-filters button.on`
 * is (0,2,1) and keeps its own fill when the already-selected pill is hovered.
 */
.rev-filters button:hover {
	background-color: var(--navy-900, #1A1D22);
	border-color: var(--navy-900, #1A1D22);
	color: var(--ivory-50, #F7F8FA);
}

/* Pack/size segmented control on the product page (۱ لیتری / کارتن ۴ عددی) — it had no hover at all. */
.opt .segs button:hover {
	background-color: var(--bg-sunken, #F1F2F5);
	border-color: var(--border-strong, #D3D8DF);
}

/*
 * SELECTED-STATE GUARDS. `[aria-selected="true"]` / `.on` and the `:hover` rules above land on the same
 * specificity (`:hover` counts in the class column), and this sheet loads after the theme's — so without
 * these the hover would strip the selected styling off the tab/segment you are pointing at. Re-assert it
 * one class higher.
 */
.tablist button[aria-selected="true"]:hover {
	color: var(--navy-900, #1A1D22);
	border-bottom-color: var(--gold-500, #B8860B);
}
.opt .segs button.on:hover {
	background-color: var(--n-100, #F1F2F5);
	border-color: var(--navy-800, #D6431A);
	color: var(--navy-900, #1A1D22);
}

/* Octane-calculator chips: keep the existing lift, add the colour change it was missing. */
.moc-chip:not(.is-on):hover {
	background-color: var(--bg-elevated, #fff);
	border-color: var(--border-strong, #D3D8DF);
}