/*
Theme Name: AraShop
Theme URI: https://arashop.ir
Author: آرا
Author URI: https://arashop.ir
Description: پوسته‌ی فروشگاهی و رزرواسیون چندمنظوره با استایل گلس‌مورفیزم و لیکویید‌گلس. مناسب فروشگاه آنلاین، مطب، سالن زیبایی، باشگاه و هر کسب‌وکاری که نیاز به نوبت‌دهی آنلاین دارد. شامل پنل تنظیمات پوسته، دیزاین صفحات، تم‌ساز رنگی، سامانه پیامک و درگاه پرداخت.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: arashop
Tags: e-commerce, woocommerce, booking, rtl-language-support, mobile-first, glassmorphism, persian, custom-colors, block-styles
*/

/* ==========================================================================
   AraShop — Liquid Glass Design System
   --------------------------------------------------------------------------
   لایه ۱: فونت‌ها
   لایه ۲: توکن‌های طراحی (رنگ، شیشه، شعاع، ارتفاع، فاصله، حرکت)
   لایه ۳: ریست و تایپوگرافی پایه
   لایه ۴: پس‌زمینه‌ی «آرورا» که شیشه روی آن شکست نور پیدا می‌کند
   ========================================================================== */

/* ---------- 1. FONTS ---------- */
@font-face{
  font-family:'Vazirmatn'; font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/fonts/Vazirmatn-Regular.woff2') format('woff2');
}
@font-face{
  font-family:'Vazirmatn'; font-style:normal; font-weight:500; font-display:swap;
  src:url('assets/fonts/Vazirmatn-Medium.woff2') format('woff2');
}
@font-face{
  font-family:'Vazirmatn'; font-style:normal; font-weight:600; font-display:swap;
  src:url('assets/fonts/Vazirmatn-SemiBold.woff2') format('woff2');
}
@font-face{
  font-family:'Vazirmatn'; font-style:normal; font-weight:700; font-display:swap;
  src:url('assets/fonts/Vazirmatn-Bold.woff2') format('woff2');
}

/* ---------- 2. DESIGN TOKENS ---------- */
:root{
  /* رنگ برند — این دو مقدار از پنل «دیزاین صفحات ← تم رنگی» بازنویسی می‌شوند
     و بقیه‌ی سایه‌روشن‌ها با color-mix از روی همین‌ها ساخته می‌شوند. */
  --ara-primary:#6C4CF1;
  --ara-accent:#00C2A8;

  /* مشتقات رنگ اصلی */
  --ara-primary-700:color-mix(in srgb, var(--ara-primary) 74%, #000);
  --ara-primary-600:color-mix(in srgb, var(--ara-primary) 88%, #000);
  --ara-primary-400:color-mix(in srgb, var(--ara-primary) 76%, #fff);
  --ara-primary-200:color-mix(in srgb, var(--ara-primary) 32%, #fff);
  --ara-primary-100:color-mix(in srgb, var(--ara-primary) 15%, #fff);
  --ara-primary-tint:color-mix(in srgb, var(--ara-primary) 10%, transparent);
  --ara-primary-glow:color-mix(in srgb, var(--ara-primary) 42%, transparent);

  --ara-accent-700:color-mix(in srgb, var(--ara-accent) 74%, #000);
  --ara-accent-400:color-mix(in srgb, var(--ara-accent) 74%, #fff);
  --ara-accent-100:color-mix(in srgb, var(--ara-accent) 15%, #fff);
  --ara-accent-tint:color-mix(in srgb, var(--ara-accent) 12%, transparent);
  --ara-accent-glow:color-mix(in srgb, var(--ara-accent) 40%, transparent);

  /* رنگ‌های معنایی */
  --ara-success:#12A150;
  --ara-success-tint:color-mix(in srgb, #12A150 12%, transparent);
  --ara-warning:#E0900B;
  --ara-warning-tint:color-mix(in srgb, #E0900B 14%, transparent);
  --ara-danger:#E5484D;
  --ara-danger-tint:color-mix(in srgb, #E5484D 12%, transparent);
  --ara-info:#0B8AE0;
  --ara-info-tint:color-mix(in srgb, #0B8AE0 12%, transparent);

  /* پایه‌ی روشن */
  --ara-bg:#F3F1FB;
  --ara-bg-deep:#E9E6F7;
  --ara-ink:#171233;
  --ara-ink-soft:#4C4767;
  --ara-ink-mute:#7C7797;
  --ara-on-primary:#ffffff;
  --ara-on-accent:#04201C;

  /* شیشه — هسته‌ی سیستم طراحی
     glass-bg   : بدنه‌ی نیمه‌شفاف
     glass-line : لبه‌ی روشن (specular edge) که حس ضخامت شیشه می‌دهد
     glass-glare: بازتاب نور روی سطح
     blur       : شدت مات‌شدگی پس‌زمینه (از پنل مدیریت قابل تنظیم) */
  --ara-glass-bg:rgba(255,255,255,.58);
  --ara-glass-bg-strong:rgba(255,255,255,.78);
  --ara-glass-bg-soft:rgba(255,255,255,.38);
  --ara-glass-line:rgba(255,255,255,.75);
  --ara-glass-line-soft:rgba(255,255,255,.42);
  --ara-glass-glare:rgba(255,255,255,.55);
  --ara-glass-inner:rgba(255,255,255,.9);
  --ara-glass-shade:rgba(23,18,51,.10);
  --ara-blur:20px;
  --ara-blur-sm:10px;
  --ara-blur-lg:34px;
  --ara-saturate:165%;

  /* خطوط و جداکننده‌ها */
  --ara-line:rgba(23,18,51,.10);
  --ara-line-strong:rgba(23,18,51,.18);

  /* شعاع — squircle-مانند و سخاوتمند، مطابق زبان لیکویید گلس */
  --ara-r-xs:10px;
  --ara-r-sm:14px;
  --ara-r-md:20px;
  --ara-r-lg:26px;
  --ara-r-xl:34px;
  --ara-r-2xl:44px;
  --ara-r-pill:999px;

  /* ارتفاع (Elevation) — سایه‌ی رنگی هم‌خانواده‌ی برند، نه خاکستری خنثی */
  --ara-e1:0 1px 2px rgba(23,18,51,.06), 0 2px 8px rgba(23,18,51,.05);
  --ara-e2:0 2px 6px rgba(23,18,51,.07), 0 10px 24px rgba(23,18,51,.09);
  --ara-e3:0 6px 14px rgba(23,18,51,.09), 0 22px 48px rgba(23,18,51,.13);
  --ara-e4:0 10px 24px rgba(23,18,51,.12), 0 40px 80px rgba(23,18,51,.18);
  --ara-e-primary:0 10px 30px var(--ara-primary-glow);
  --ara-e-accent:0 10px 30px var(--ara-accent-glow);

  /* فاصله‌گذاری (مقیاس ۴ پایه) */
  --ara-s1:4px;  --ara-s2:8px;  --ara-s3:12px; --ara-s4:16px;
  --ara-s5:20px; --ara-s6:24px; --ara-s7:32px; --ara-s8:40px;
  --ara-s9:56px; --ara-s10:72px; --ara-s11:96px;

  /* حرکت */
  --ara-ease:cubic-bezier(.22,.68,.32,1);
  --ara-ease-out:cubic-bezier(.16,1,.3,1);
  --ara-spring:cubic-bezier(.34,1.56,.64,1);
  --ara-t-fast:.16s;
  --ara-t:.28s;
  --ara-t-slow:.5s;

  /* چیدمان */
  --ara-container:1240px;
  --ara-container-narrow:820px;
  --ara-gutter:16px;
  --ara-header-h:68px;
  --ara-bottomnav-h:66px;

  /* تایپوگرافی سیال — بین موبایل و دسکتاپ به‌صورت پیوسته تغییر می‌کند */
  --ara-font:'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, sans-serif;
  --ara-fs-xs:clamp(11px, .68rem + .1vw, 12.5px);
  --ara-fs-sm:clamp(12.5px, .76rem + .12vw, 14px);
  --ara-fs-base:clamp(14px, .84rem + .16vw, 15.5px);
  --ara-fs-md:clamp(15px, .9rem + .2vw, 17px);
  --ara-fs-lg:clamp(17px, 1rem + .35vw, 20px);
  --ara-fs-xl:clamp(20px, 1.1rem + .7vw, 26px);
  --ara-fs-2xl:clamp(24px, 1.2rem + 1.35vw, 38px);
  --ara-fs-3xl:clamp(30px, 1.3rem + 2.4vw, 56px);
}

/* ---------- تم تاریک ---------- */
[data-ara-theme="dark"]{
  --ara-bg:#0B0918;
  --ara-bg-deep:#070512;
  --ara-ink:#F2F0FF;
  --ara-ink-soft:#B9B4D6;
  --ara-ink-mute:#8A85A8;

  --ara-glass-bg:rgba(255,255,255,.07);
  --ara-glass-bg-strong:rgba(255,255,255,.12);
  --ara-glass-bg-soft:rgba(255,255,255,.045);
  --ara-glass-line:rgba(255,255,255,.16);
  --ara-glass-line-soft:rgba(255,255,255,.09);
  --ara-glass-glare:rgba(255,255,255,.14);
  --ara-glass-inner:rgba(255,255,255,.18);
  --ara-glass-shade:rgba(0,0,0,.45);

  --ara-line:rgba(255,255,255,.10);
  --ara-line-strong:rgba(255,255,255,.18);

  --ara-primary-100:color-mix(in srgb, var(--ara-primary) 26%, #16122b);
  --ara-primary-200:color-mix(in srgb, var(--ara-primary) 40%, #16122b);
  --ara-accent-100:color-mix(in srgb, var(--ara-accent) 24%, #16122b);

  --ara-e1:0 1px 2px rgba(0,0,0,.4);
  --ara-e2:0 4px 12px rgba(0,0,0,.45);
  --ara-e3:0 12px 34px rgba(0,0,0,.55);
  --ara-e4:0 20px 60px rgba(0,0,0,.65);
}

/* ---------- 3. RESET & BASE ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--ara-header-h) + 16px);
}
body{
  margin:0;
  min-height:100vh;
  font-family:var(--ara-font);
  font-size:var(--ara-fs-base);
  line-height:1.75;
  color:var(--ara-ink);
  background:var(--ara-bg);
  direction:rtl;
  text-align:right;
  overflow-x:hidden;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding-bottom:var(--ara-bottomnav-h);
  transition:background-color var(--ara-t) var(--ara-ease), color var(--ara-t) var(--ara-ease);
}
img,svg,video,canvas{ max-width:100%; height:auto; display:block; }
img{ border-radius:inherit; }
a{ color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent; }
ul,ol{ margin:0; padding:0; list-style:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:0; padding:0; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
table{ border-collapse:collapse; width:100%; }
hr{ border:0; border-top:1px solid var(--ara-line); margin:var(--ara-s6) 0; }

h1,h2,h3,h4,h5,h6{
  margin:0 0 .5em;
  font-weight:700;
  line-height:1.32;
  letter-spacing:-.015em;
  color:var(--ara-ink);
  text-wrap:balance;
}
h1{ font-size:var(--ara-fs-3xl); }
h2{ font-size:var(--ara-fs-2xl); }
h3{ font-size:var(--ara-fs-xl); }
h4{ font-size:var(--ara-fs-lg); }
h5,h6{ font-size:var(--ara-fs-md); }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }
small{ font-size:var(--ara-fs-xs); }
strong,b{ font-weight:700; }

::selection{ background:var(--ara-primary); color:var(--ara-on-primary); }

:focus-visible{
  outline:2px solid var(--ara-primary);
  outline-offset:3px;
  border-radius:4px;
}

/* اسکرول‌بار نازک هم‌رنگ برند (وبکیت) */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:color-mix(in srgb, var(--ara-primary) 34%, transparent);
  border-radius:999px; border:3px solid transparent; background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{ background:color-mix(in srgb, var(--ara-primary) 55%, transparent); background-clip:content-box; }

/* ---------- چیدمان پایه ---------- */
.ara-container{
  width:100%;
  max-width:var(--ara-container);
  margin-inline:auto;
  padding-inline:var(--ara-gutter);
}
.ara-container-narrow{ max-width:var(--ara-container-narrow); }
.ara-main{ display:block; min-height:40vh; }
.ara-section{ padding-block:var(--ara-s9); }
.ara-section-sm{ padding-block:var(--ara-s7); }

.ara-sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.ara-skip{
  position:absolute; inset-inline-start:-9999px; top:0; z-index:999;
  background:var(--ara-primary); color:var(--ara-on-primary);
  padding:12px 20px; border-radius:0 0 var(--ara-r-sm) var(--ara-r-sm); font-weight:700;
}
.ara-skip:focus{ inset-inline-start:16px; }

/* ---------- 4. AURORA BACKGROUND ----------
   لکه‌های رنگی نرم و ثابت پشت کل صفحه. شیشه‌ها روی همین‌ها شکست نور
   پیدا می‌کنند — بدون این لایه، گلس‌مورفیزم صرفاً یک سطح خاکستری است. */
.ara-aurora{
  position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, var(--ara-primary) 8%, transparent), transparent 60%),
    var(--ara-bg);
}
.ara-aurora span{
  position:absolute; display:block; border-radius:50%;
  filter:blur(70px); opacity:.5; will-change:transform;
}
.ara-aurora span:nth-child(1){
  width:46vw; height:46vw; min-width:320px; min-height:320px;
  inset-inline-end:-8vw; top:-10vh;
  background:var(--ara-primary);
  animation:ara-drift-a 26s var(--ara-ease) infinite alternate;
}
.ara-aurora span:nth-child(2){
  width:38vw; height:38vw; min-width:280px; min-height:280px;
  inset-inline-start:-6vw; top:32vh;
  background:var(--ara-accent); opacity:.38;
  animation:ara-drift-b 32s var(--ara-ease) infinite alternate;
}
.ara-aurora span:nth-child(3){
  width:40vw; height:40vw; min-width:300px; min-height:300px;
  inset-inline-end:16vw; bottom:-14vh;
  background:color-mix(in srgb, var(--ara-primary) 50%, var(--ara-accent));
  opacity:.3;
  animation:ara-drift-c 38s var(--ara-ease) infinite alternate;
}
[data-ara-theme="dark"] .ara-aurora span{ opacity:.34; }
[data-ara-theme="dark"] .ara-aurora span:nth-child(2){ opacity:.26; }
[data-ara-theme="dark"] .ara-aurora span:nth-child(3){ opacity:.22; }

@keyframes ara-drift-a{ to{ transform:translate3d(-6vw, 6vh, 0) scale(1.12); } }
@keyframes ara-drift-b{ to{ transform:translate3d(5vw, -7vh, 0) scale(1.16); } }
@keyframes ara-drift-c{ to{ transform:translate3d(-4vw, -5vh, 0) scale(1.1); } }

/* حالت «پس‌زمینه ساده» — از پنل مدیریت، برای سایت‌هایی که آرورا نمی‌خواهند */
body.ara-plain-bg .ara-aurora span{ display:none; }

/* ---------- دسترس‌پذیری: احترام به کاهش حرکت ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .ara-aurora span{ animation:none!important; }
}

/* ---------- دسترس‌پذیری: کنتراست بالا ---------- */
@media (prefers-contrast:more){
  :root{
    --ara-glass-bg:rgba(255,255,255,.94);
    --ara-glass-bg-strong:rgba(255,255,255,.98);
    --ara-line:rgba(23,18,51,.3);
    --ara-ink-soft:#2C2748;
  }
  [data-ara-theme="dark"]{
    --ara-glass-bg:rgba(18,15,36,.95);
    --ara-glass-bg-strong:rgba(18,15,36,.99);
  }
}

@media (min-width:768px){
  :root{ --ara-gutter:24px; }
  body{ padding-bottom:0; }
}
@media (min-width:1280px){
  :root{ --ara-gutter:32px; }
}

/* ---------- چاپ ---------- */
@media print{
  .ara-aurora,.ara-header,.ara-footer,.ara-bottomnav,.ara-fab,.ara-drawer,.ara-scrim{ display:none!important; }
  body{ background:#fff; color:#000; padding:0; }
  .ara-glass,.ara-card{ box-shadow:none!important; border:1px solid #ccc!important; background:#fff!important; }
}