/* ==========================================================================
   Faranetwork — "Fara Glass" design system · CORE
   --------------------------------------------------------------------------
   Taken 1:1 from maintenance.html: sky-blue glass, drifting blurred blobs,
   dotted grid, particle network, shimmer lines, diamond dividers, gradient
   type, spring easing. RTL-first (logical properties); also safe in LTR.
   Files:  fn-core.css (tokens/base/bg/buttons/forms)  →  fn-components.css
           (Elementor blocks)  →  fn-woodmart.css  →  fn-woocommerce.css
   ========================================================================== */

@font-face {
	font-family: 'Vazirmatn';
	src: url('../fonts/Vazirmatn-variable.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* ---------- 1. Tokens ---------- */
:root {
	/* sky scale (maintenance.html palette) */
	--fn-sky-50: #f0f9ff;
	--fn-sky-100: #e0f2fe;
	--fn-sky-200: #bae6fd;
	--fn-sky-300: #7dd3fc;
	--fn-sky-400: #38bdf8;
	--fn-sky-500: #0ea5e9;
	--fn-sky-600: #0284c7;
	--fn-sky-700: #0369a1;
	--fn-sky-900: #0c4a6e;
	--fn-indigo: #6366f1;
	--fn-ink: #0f172a;
	--fn-navy: #0b1e3a;
	--fn-text: #1e293b;
	--fn-slate: #475569;
	--fn-mute: #94a3b8;
	--fn-ok: #22c55e;
	--fn-warn: #f59e0b;
	--fn-err: #ef4444;

	/* legacy names (kept so the old templates / plugin snippets keep working) */
	--fn-primary: var(--fn-sky-500);
	--fn-primary-dark: var(--fn-sky-600);
	--fn-primary-light: var(--fn-sky-400);
	--fn-soft: var(--fn-sky-300);
	--fn-bg: var(--fn-sky-50);
	--fn-bg-2: var(--fn-sky-100);
	--fn-heading: var(--fn-ink);
	--fn-muted: #64748b;
	--fn-border: #dbeafe;
	--fn-accent: var(--fn-indigo);
	--fn-success: var(--fn-ok);

	/* gradients */
	--fn-grad: linear-gradient(135deg, var(--fn-sky-400), var(--fn-sky-500));
	--fn-grad-text: linear-gradient(135deg, var(--fn-ink), var(--fn-sky-400), var(--fn-indigo));
	--fn-grad-page: linear-gradient(160deg, #eff8ff 0%, #e0f2fe 35%, #f0f9ff 70%, #fdf8ff 100%);
	--fn-grad-ocean: linear-gradient(155deg, #0b1e3a 0%, #0c3a63 52%, #0369a1 100%);

	/* glass */
	--fn-glass: rgba(255, 255, 255, .75);
	--fn-glass-soft: rgba(255, 255, 255, .55);
	--fn-glass-brd: rgba(56, 189, 248, .14);
	--fn-blur: 28px;

	/* shape */
	--fn-r-xs: 12px;
	--fn-r-sm: 16px;
	--fn-r: 24px;
	--fn-r-lg: 32px;
	--fn-r-xl: 40px;
	--fn-radius: var(--fn-r);

	/* depth (card recipe from maintenance.html) */
	--fn-shadow-card:
		0 30px 80px rgba(56, 189, 248, .10),
		0 15px 40px rgba(0, 0, 0, .05),
		0 0 0 1px rgba(56, 189, 248, .06),
		inset 0 1px 0 rgba(255, 255, 255, .9);
	--fn-shadow-soft: 0 8px 30px rgba(56, 189, 248, .08), 0 2px 8px rgba(0, 0, 0, .03);
	--fn-shadow-hover: 0 22px 60px rgba(56, 189, 248, .20), 0 6px 16px rgba(0, 0, 0, .05);
	--fn-shadow: var(--fn-shadow-soft);
	--fn-shadow-sm: 0 2px 10px rgba(14, 165, 233, .08);
	--fn-glow: 0 10px 30px rgba(14, 165, 233, .35);

	/* motion */
	--fn-ease: cubic-bezier(.16, 1, .3, 1);

	/* layout */
	--fn-max: 1240px;
	--fn-gutter: clamp(16px, 3vw, 28px);

	--fn-font: 'Vazirmatn', Tahoma, 'Segoe UI', sans-serif;
}

/* ---------- 2. Push the tokens into WoodMart's & Elementor's variables ----------
   `html:root` out-ranks WoodMart's inline `:root{}` theme-settings block. */
html:root {
	--wd-primary-color: var(--fn-sky-500);
	--wd-alternative-color: var(--fn-sky-600);
	--wd-link-color: var(--fn-sky-600);
	--wd-link-color-hover: var(--fn-sky-500);
	--wd-text-color: var(--fn-text);
	--wd-title-color: var(--fn-ink);
	--wd-entities-title-color: var(--fn-ink);
	--wd-entities-title-color-hover: var(--fn-sky-600);
	--wd-widget-title-color: var(--fn-ink);
	--btn-accented-bgcolor: var(--fn-sky-500);
	--btn-accented-bgcolor-hover: var(--fn-sky-600);
	--btn-accented-color: #fff;
	--btn-default-bgcolor: var(--fn-sky-100);
	--btn-default-bgcolor-hover: var(--fn-sky-200);
	--btn-default-color: var(--fn-sky-700);
	--btn-default-brd-radius: 999px;
	--btn-accented-brd-radius: 999px;
	--wd-text-font: var(--fn-font);
	--wd-title-font: var(--fn-font);
	--wd-entities-title-font: var(--fn-font);
	--wd-alternative-font: var(--fn-font);
	--wd-widget-title-font: var(--fn-font);
	--wd-brd-radius: 18px;
	--wd-form-brd-radius: 16px;
	--wd-form-brd-color: rgba(56, 189, 248, .28);
	--wd-form-brd-color-focus: var(--fn-sky-400);
	--wd-form-bg: rgba(255, 255, 255, .82);
	--wd-form-color: var(--fn-text);
}
/* Elementor global colours/fonts → follow the brand (beats `.elementor-kit-N{}`) */
html body[class*="elementor-kit-"] {
	--e-global-color-primary: #0ea5e9;
	--e-global-color-secondary: #0284c7;
	--e-global-color-text: #1e293b;
	--e-global-color-accent: #38bdf8;
	--e-global-typography-primary-font-family: 'Vazirmatn';
	--e-global-typography-secondary-font-family: 'Vazirmatn';
	--e-global-typography-text-font-family: 'Vazirmatn';
	--e-global-typography-accent-font-family: 'Vazirmatn';
}

/* The site's own custom Elementor global colours (kit 6) drive the header, footer, archive and prices —
   re-point them at the brand palette so every template follows the new look. */
html body[class*="elementor-kit-"] {
	--e-global-color-5192aa7: #0284c7; /* was #3da7d4 · menu / prices / pagination */
	--e-global-color-a71fb67: #0f172a; /* was #333a73 · titles, icons */
	--e-global-color-f2360f5: #0284c7; /* was #333a73 · buttons, current item */
	--e-global-color-1edf927: #f59e0b; /* was #fba834 · promo accent */
	--e-global-color-f686161: #eef6fd; /* was #f1f1f1 */
	--e-global-color-efcb428: #0f172a; /* was #282929 */
	--e-global-color-cbcaca8: #cbd5e1; /* was #d1cbcb */
}
/* YITH filters + wishlist ship burgundy/charcoal defaults */
html:root {
	--yith-wcan-filters_colors_titles: #0f172a;
	--yith-wcan-filters_colors_background: transparent;
	--yith-wcan-filters_colors_accent: #0ea5e9;
	--yith-wcan-filters_colors_accent_r: 14;
	--yith-wcan-filters_colors_accent_g: 165;
	--yith-wcan-filters_colors_accent_b: 233;
	--yith-wcan-labels_style_background_hover: #0ea5e9;
	--yith-wcan-labels_style_background_active: #0ea5e9;
	--yith-wcan-anchors_style_text: #475569;
	--yith-wcan-anchors_style_text_hover: #0284c7;
	--yith-wcan-anchors_style_text_active: #0284c7;
	--add-to-wishlist-icon-color: #ef4444;
	--added-to-wishlist-icon-color: #ef4444;
	--color-add-to-wishlist-background: #0ea5e9;
	--color-add-to-wishlist-border: #0ea5e9;
	--color-add-to-wishlist-background-hover: #0284c7;
	--color-add-to-wishlist-border-hover: #0284c7;
	--color-add-to-cart-background: #0ea5e9;
	--color-add-to-cart-border: #0ea5e9;
	--color-add-to-cart-background-hover: #0284c7;
	--color-add-to-cart-border-hover: #0284c7;
	--rounded-corners-radius: 999px;
	--add-to-cart-rounded-corners-radius: 999px;
}

/* ---------- 3. Base ---------- */
html { scroll-behavior: smooth; }
body {
	font-family: var(--fn-font);
	color: var(--fn-text);
	line-height: 1.95;
	background: var(--fn-grad-page) fixed;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
body,
button, input, select, textarea,
h1, h2, h3, h4, h5, h6,
.title, .wd-entities-title, .widget-title, .wd-nav a, .whb-column a, .price, .amount,
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-text-editor, .elementor-button, .elementor-icon-box-title,
.elementor-icon-box-description, .elementor-counter-title, .elementor-counter-number-wrapper,
.elementor-tab-title, .elementor-tab-content, .elementor-testimonial-content,
.woocommerce, .woocommerce-page {
	font-family: var(--fn-font);
}
h1, h2, h3, h4, h5, h6 { color: var(--fn-ink); font-weight: 800; letter-spacing: 0; }
a { transition: color .25s var(--fn-ease); }
::selection { background: rgba(56, 189, 248, .28); color: var(--fn-ink); }
:focus-visible { outline: 3px solid rgba(56, 189, 248, .55); outline-offset: 3px; border-radius: 6px; }

/* let the animated background show through WoodMart's wrappers */
html body .website-wrapper,
html body .main-page-wrapper,
html body .wd-page-content,
html body .site-content { background: transparent; }
.website-wrapper { position: relative; z-index: 1; }

/* ---------- 4. Animated background layer (injected in wp_footer) ---------- */
.fn-bg {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}
.fn-bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.fn-bg::after { /* dotted grid */
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(56, 189, 248, .05) 1px, transparent 1px);
	background-size: 28px 28px;
}
.fn-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(120px);
	will-change: transform;
}
.fn-blob--a { width: 600px; height: 600px; background: rgba(56, 189, 248, .12); top: -200px; inset-inline-end: -150px; animation: fnBlob 18s ease-in-out infinite alternate; }
.fn-blob--b { width: 500px; height: 500px; background: rgba(14, 165, 233, .09); bottom: -200px; inset-inline-start: -150px; animation: fnBlob 14s ease-in-out infinite alternate-reverse; }
.fn-blob--c { width: 350px; height: 350px; background: rgba(125, 211, 252, .14); top: 30%; inset-inline-start: 62%; animation: fnBlob 22s ease-in-out infinite; }
.fn-waves { position: absolute; bottom: 0; left: 0; width: 100%; height: 180px; opacity: .5; }
.fn-waves svg { width: 100%; height: 100%; display: block; }
.fn-waves .w1 { animation: fnWave 10s ease-in-out infinite; }
.fn-waves .w2 { animation: fnWave 14s ease-in-out infinite reverse; }
.fn-bg-line { position: absolute; bottom: 0; inset-inline: 0; height: 3px; background: linear-gradient(90deg, transparent, rgba(56, 189, 248, .25), rgba(14, 165, 233, .2), rgba(125, 211, 252, .15), transparent); }

@media (max-width: 768px) {
	.fn-blob { display: none; }
	.fn-waves { height: 110px; }
}

/* ---------- 5. Keyframes (names reused everywhere) ---------- */
@keyframes fnBlob { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(60px, -40px) scale(1.15); } 100% { transform: translate(-30px, 20px) scale(.95); } }
@keyframes fnWave { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-3%); } }
@keyframes fnLine { 0% { background-position: 0% 0; opacity: .7; } 50% { background-position: 100% 0; opacity: 1; } 100% { background-position: 0% 0; opacity: .7; } }
@keyframes fnShimmer { 0% { transform: translate(-100%, -100%) rotate(45deg); } 100% { transform: translate(100%, 100%) rotate(45deg); } }
@keyframes fnSpin { to { transform: rotate(360deg); } }
@keyframes fnFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes fnAura { 0%, 100% { transform: scale(1); opacity: .7; } 50% { transform: scale(1.2); opacity: 1; } }
@keyframes fnSparkle { 0%, 100% { opacity: .4; transform: translateY(0) scale(.8); } 50% { opacity: 1; transform: translateY(-8px) scale(1.4); } }
@keyframes fnRise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fnEnter { from { opacity: 0; transform: translateY(60px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes fnShine { 0% { left: -100%; } 100% { left: 100%; } }
@keyframes fnDiamond { 0%, 100% { transform: rotate(45deg) scale(1); opacity: .8; } 50% { transform: rotate(45deg) scale(1.3); opacity: 1; } }
@keyframes fnPing { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(2.5); opacity: 0; } }
@keyframes fnGradShift { 0%, 100% { background-position: 0% center; } 50% { background-position: 100% center; } }
@keyframes fnMarquee { to { transform: translateX(-50%); } }
@keyframes fnDash { to { stroke-dashoffset: -60; } }
@keyframes fnTravel { from { inset-inline-start: 12%; } to { inset-inline-start: 88%; } }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---------- 6. Buttons (WoodMart, WooCommerce, Elementor, ours) ---------- */
.btn, .button, .wd-button-wrapper a, .elementor-button,
.single_add_to_cart_button, .checkout-button, .wc-block-components-button,
input[type="submit"], button[type="submit"], .fn-submit {
	font-family: var(--fn-font);
	font-weight: 700;
	border-radius: 999px;
	text-decoration: none;
	transition: transform .35s var(--fn-ease), box-shadow .35s var(--fn-ease), background .3s, color .3s, border-color .3s;
}
.btn-color-primary, .button.alt, .single_add_to_cart_button, .checkout-button,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce #respond input#submit,
input[type="submit"], .fn-submit,
.wd-add-btn-replace .add_to_cart_button {
	background: var(--fn-grad) var(--fn-sky-500);
	color: #fff;
	border: 0;
	box-shadow: var(--fn-glow);
}
.btn-color-primary:hover, .button.alt:hover, .single_add_to_cart_button:hover, .checkout-button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
input[type="submit"]:hover, .fn-submit:hover {
	background: linear-gradient(135deg, #0ea5e9, #0284c7) #0284c7;
	color: #fff;
	transform: translateY(-3px);
	box-shadow: 0 16px 40px rgba(14, 165, 233, .45);
}
.btn-color-primary:active, .button.alt:active, .single_add_to_cart_button:active { transform: translateY(0); }

/* ---------- 7. Forms (WoodMart / WooCommerce / our forms) ---------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"],
input[type="number"], input[type="search"], textarea, select,
.select2-container--default .select2-selection--single {
	background: var(--wd-form-bg, rgba(255, 255, 255, .82));
	border: 1px solid rgba(56, 189, 248, .28);
	border-radius: var(--fn-r-sm);
	color: var(--fn-text);
	font-family: var(--fn-font);
	transition: border-color .25s, box-shadow .25s, background .25s;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):focus, textarea:focus, select:focus {
	border-color: var(--fn-sky-400);
	background: #fff;
	box-shadow: 0 0 0 4px rgba(56, 189, 248, .16);
	outline: none;
}
::placeholder { color: #9fb1c7; opacity: 1; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--fn-sky-500); }

.fn-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.fn-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: .9rem; color: var(--fn-slate); }
.fn-form label.fn-wide, .fn-form .fn-wide { grid-column: 1 / -1; }
.fn-form input, .fn-form select, .fn-form textarea { width: 100%; padding: 13px 16px; font-weight: 400; font-size: .95rem; }
.fn-form textarea { min-height: 140px; resize: vertical; }
.fn-form .fn-submit { grid-column: 1 / -1; justify-self: start; padding: 14px 36px; cursor: pointer; font-size: 1rem; }
.fn-hp { position: absolute !important; inset-inline-start: -9999px; width: 1px; height: 1px; opacity: 0; }
.fn-alert { grid-column: 1 / -1; margin: 0; padding: 14px 18px; border-radius: var(--fn-r-sm); font-weight: 600; font-size: .92rem; }
.fn-alert--ok { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.fn-alert--err { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
@media (max-width: 640px) { .fn-form { grid-template-columns: 1fr; } .fn-form .fn-submit { justify-self: stretch; } }

/* ---------- 8. Floating WhatsApp ---------- */
.fn-wa {
	position: fixed;
	bottom: 22px;
	inset-inline-start: 22px;
	z-index: 998;
	width: 56px; height: 56px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: linear-gradient(135deg, #34d399, #22c55e);
	color: #fff;
	box-shadow: 0 12px 30px rgba(34, 197, 94, .4);
	transition: transform .35s var(--fn-ease);
}
.fn-wa::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #22c55e; animation: fnPing 2.4s cubic-bezier(0, 0, .2, 1) infinite; }
.fn-wa:hover { transform: translateY(-4px) scale(1.06); color: #fff; }
.fn-wa svg { width: 28px; height: 28px; fill: currentColor; }
/* The Quick Chat plugin draws a second WhatsApp button (bottom-left, always-open "چگونه می‌توانم کمک کنم؟" bubble) that sat on top of the
   phone tab bar and the page text. One button is enough — keep this theme's, and only when it exists so the plugin stays a fallback. */
body.fn-theme:has(.fn-wa) .qlwapp { display: none !important; }

/* ---------- 9. Utilities ---------- */
.fn-grad { background: var(--fn-grad-text); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: fnGradShift 4s ease-in-out infinite; }
.fn-grad-sky { background: linear-gradient(135deg, #38bdf8, #0ea5e9); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.fn-ltr { direction: ltr; unicode-bidi: isolate; }
@media (max-width: 767px) { .fn-hide-sm { display: none !important; } }
@media (min-width: 768px) { .fn-show-sm { display: none !important; } }