/* ============================================================
   Sevin — main stylesheet (extracted from the old inline <style>
   blocks). Loaded once in <head> via <link rel="stylesheet">.
   ============================================================ */

:root{
  color-scheme:light;
  --primary:#0eaf8f; --primary-dark:#0a8a71; --primary-soft:#e2f7f2;
  --ink:#12211e; --ink-2:#5a6f6a; --ink-3:#8aa09a;
  --surface:#f3f9f7; --card:#ffffff; --line:#e2ecea; --error:#c62f2f;
  --e1:0 1px 2px rgba(18,33,30,.06),0 2px 8px rgba(18,33,30,.05);
  --e2:0 4px 16px rgba(18,33,30,.10);
  --e3:0 8px 28px rgba(18,33,30,.14);
  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:28px; --r-full:999px;
  --ease:cubic-bezier(.2,0,0,1); --dur:200ms;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:Inter,Vazirmatn,system-ui,sans-serif; font-size:16px; line-height:1.55;
  color:var(--ink); display:flex; flex-direction:column; min-height:100dvh;
  background:
    radial-gradient(900px 420px at 12% -8%, #d8f4ec 0%, transparent 60%),
    radial-gradient(900px 420px at 88% -8%, #e3f2fb 0%, transparent 60%),
    var(--surface);
  background-repeat: no-repeat;
  background-attachment: fixed;
}
[dir="rtl"] body{font-family:Vazirmatn,Inter,system-ui,sans-serif}
.material-symbols-rounded{font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
  font-size:22px; line-height:1; user-select:none}
header{
  display:flex; align-items:center; gap:12px;
  padding:10px 20px; min-height:62px;
  background:rgba(255,255,255,.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line); position:relative; z-index:20;
}
.logo{display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.15rem}
.logo .mark{width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--primary),#12c9a5); color:#fff; box-shadow:var(--e1)}
.logo .mark .material-symbols-rounded{font-size:20px}
.spacer{flex:1}
.loc{display:flex; align-items:center; gap:6px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-full);
  padding:4px 6px 4px 12px; box-shadow:var(--e1); font-size:.82rem; color:var(--ink-2)}
[dir="rtl"] .loc{padding:4px 12px 4px 6px}
.loc .material-symbols-rounded{font-size:17px; color:var(--primary)}
.loc select{border:none; background:transparent; font-family:inherit; font-size:.82rem;
  color:var(--ink); padding:8px 2px; cursor:pointer; outline:none; max-width:150px}

/* ---------------- کشور قابل جستجو در هدر ---------------- */
.region-combo{position:relative}
.region-trigger{display:flex; align-items:center; gap:2px; border:none; background:transparent;
  font-family:inherit; font-size:.82rem; font-weight:600; color:var(--ink); cursor:pointer; padding:8px 2px}
.region-caret{font-size:16px !important; color:var(--ink-3) !important}
.region-dropdown{position:absolute; top:calc(100% + 8px); left:0; width:270px; max-height:320px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--e3);
  padding:8px; z-index:70; display:flex; flex-direction:column; gap:6px}
[dir="rtl"] .region-dropdown{left:auto; right:0}
.region-dropdown[hidden]{display:none}
.region-search{width:100%; height:38px; padding:0 10px; border:1.5px solid var(--line); border-radius:10px;
  font-family:inherit; font-size:.85rem; outline:none; transition:border var(--dur)}
.region-search:focus{border-color:var(--primary)}
.region-list{max-height:250px; overflow-y:auto; display:flex; flex-direction:column; gap:2px}
.region-item{padding:8px; border-radius:var(--r-sm); cursor:pointer; font-size:.85rem; color:var(--ink);
  transition:background var(--dur) var(--ease)}
.region-item:hover, .region-item.active{background:var(--primary-soft)}
.region-empty{font-size:.82rem; color:var(--ink-3); padding:10px 8px; text-align:center}
.login{display:flex; align-items:center; gap:8px; min-height:44px; padding:0 16px;
  border:none; border-radius:var(--r-full); background:transparent;
  font-family:inherit; font-size:.88rem; font-weight:600; color:var(--ink-2); cursor:pointer;
  transition:background var(--dur) var(--ease)}
.login:hover{background:var(--primary-soft)}
.login .avatar{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;background:#fff}
.login .avatar .material-symbols-rounded{font-size:18px;color:var(--ink-3)}

/* ---------------- Phase 2: auth modal ---------------- */
.modal-overlay{position:fixed; inset:0; background:rgba(18,33,30,.45); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; z-index:100; padding:20px}
.modal-overlay[hidden]{display:none}
.modal{background:var(--card); border-radius:var(--r-xl); box-shadow:var(--e3);
  width:100%; max-width:380px; padding:32px 28px 26px; position:relative;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px}
.modal-close{position:absolute; top:14px; right:14px; border:none; background:transparent;
  color:var(--ink-3); cursor:pointer; width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; transition:background var(--dur) var(--ease)}
[dir="rtl"] .modal-close{right:auto; left:14px}
.modal-close:hover{background:var(--primary-soft)}
.modal-logo{display:flex; align-items:center; gap:8px; font-weight:800; font-size:1.05rem; margin-bottom:8px}
.modal-logo .mark{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--primary),#12c9a5); color:#fff}
.modal-logo .mark .material-symbols-rounded{font-size:17px}
.modal h2{font-size:1.12rem; margin-top:6px}
.modal p{color:var(--ink-2); font-size:.88rem; margin-bottom:16px}
.auth-btn-slot{width:100%; display:flex; justify-content:center; min-height:44px}
.auth-btn{width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
  min-height:44px; border-radius:var(--r-full); border:1px solid var(--line); background:#fff;
  font-family:inherit; font-size:.92rem; font-weight:600; color:var(--ink); cursor:pointer;
  transition:background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); margin-top:10px}
.auth-btn:hover{box-shadow:var(--e1)}
.fb-btn{color:#1877F2; border-color:#dbe7fb}
.fb-btn:hover{background:#f0f6ff}
.auth-note{font-size:.76rem; color:var(--ink-3); margin-top:14px; line-height:1.4}

/* ---------------- Phase 2: account / hamburger menu ---------------- */
.acct-wrap{position:relative}
.acct-menu{position:absolute; top:calc(100% + 8px); right:0; width:290px; max-height:70vh; overflow-y:auto;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--e3);
  padding:14px; z-index:50; display:flex; flex-direction:column; gap:2px}
[dir="rtl"] .acct-menu{right:auto; left:0}
.acct-menu[hidden]{display:none}
.acct-name{font-weight:700; font-size:.95rem}
.acct-email{font-size:.78rem; color:var(--ink-3); margin-bottom:2px; word-break:break-all}
.acct-sep{height:1px; background:var(--line); margin:8px 0}
.acct-hist-title{font-size:.74rem; font-weight:700; color:var(--ink-2); text-transform:uppercase;
  letter-spacing:.03em; margin-bottom:2px}
.hist-list{display:flex; flex-direction:column; gap:2px; max-height:230px; overflow-y:auto}
.hist-item{padding:8px; border-radius:var(--r-sm); cursor:pointer; transition:background var(--dur) var(--ease)}
.hist-item:hover{background:var(--primary-soft)}
.hist-summary{font-size:.82rem; color:var(--ink); line-height:1.3}
.hist-time{font-size:.7rem; color:var(--ink-3); margin-top:2px}
.hist-empty{font-size:.82rem; color:var(--ink-3); padding:8px 4px}
.acct-logout{display:flex; align-items:center; gap:8px; border:none; background:transparent;
  font-family:inherit; font-size:.86rem; font-weight:600; color:var(--error); cursor:pointer;
  padding:8px; border-radius:var(--r-sm); transition:background var(--dur) var(--ease); width:100%}
.acct-logout:hover{background:#fde8e8}

#hero{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:22px; padding:24px 20px 60px; text-align:center}
.badge{display:inline-flex; align-items:center; gap:8px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-full);
  padding:8px 16px; font-size:.8rem; font-weight:600; color:var(--primary-dark); box-shadow:var(--e1)}
.badge .material-symbols-rounded{font-size:16px}
#hero h1{font-size:clamp(2rem,5.2vw,3.3rem); font-weight:800; letter-spacing:-1px}
[dir="rtl"] #hero h1{letter-spacing:0}
#hero .sub{max-width:540px; color:var(--ink-2); font-size:1.02rem}
.cat-btns{display:flex; gap:12px; flex-wrap:wrap; justify-content:center}
.cat-btn{display:inline-flex; align-items:center; gap:9px; min-height:52px; padding:0 22px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-full);
  font-family:inherit; font-size:.95rem; font-weight:600; color:var(--ink); cursor:pointer;
  box-shadow:var(--e1); transition:all var(--dur) var(--ease)}
.cat-btn:hover{border-color:var(--primary); color:var(--primary-dark); box-shadow:var(--e2); transform:translateY(-1px)}
.cat-btn .material-symbols-rounded{font-size:20px; color:var(--primary)}
.disclaimer{font-size:.75rem; color:var(--primary-dark)}
.searchwrap{width:100%; max-width:760px; margin:0 auto; padding:0 16px}
.search{display:flex; align-items:center; gap:8px;
  background:#fff; border-radius:var(--r-xl); box-shadow:var(--e2);
  padding:8px 8px 8px 20px; min-height:64px; border:1.5px solid transparent;
  transition:border var(--dur) var(--ease), box-shadow var(--dur) var(--ease)}
[dir="rtl"] .search{padding:8px 20px 8px 8px}
.search:focus-within{border-color:var(--primary); box-shadow:var(--e3)}
.search input{flex:1; border:none; outline:none; background:transparent;
  font-family:inherit; font-size:1rem; color:var(--ink); min-width:0}
.search input::placeholder{color:var(--ink-3)}
.send{width:48px; height:48px; flex:none; border:none; border-radius:50%;
  background:var(--primary); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--e1);
  transition:background var(--dur) var(--ease), transform var(--dur) var(--ease)}
.send:hover{background:var(--primary-dark)}
.send:active{transform:scale(.93)}
[dir="rtl"] .send .material-symbols-rounded{transform:scaleX(-1)}
#chatview{flex:1; display:none; flex-direction:column; min-height:0}
#chat{flex:1; overflow-y:auto; padding:18px 16px 8px;
  display:flex; flex-direction:column; gap:10px;
  max-width:760px; width:100%; margin:0 auto; scroll-behavior:smooth}
.msg{max-width:84%; padding:12px 16px; font-size:.94rem; white-space:pre-wrap;
  animation:enter var(--dur) var(--ease)}
@keyframes enter{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.bot{align-self:flex-start; background:#fff; border:1px solid var(--line);
  border-radius:4px var(--r-lg) var(--r-lg) var(--r-lg); box-shadow:var(--e1)}
.user{align-self:flex-end; background:var(--primary); color:#fff;
  border-radius:var(--r-lg) 4px var(--r-lg) var(--r-lg)}
[dir="rtl"] .bot{align-self:flex-start; border-radius:var(--r-lg) 4px var(--r-lg) var(--r-lg)}
[dir="rtl"] .user{align-self:flex-end; border-radius:4px var(--r-lg) var(--r-lg) var(--r-lg)}
.typing{color:var(--ink-3); display:flex; gap:8px; align-items:center}
.typing .dots{display:inline-flex; gap:3px}
.typing .dots i{width:6px;height:6px;border-radius:50%;background:var(--ink-3);animation:blink 1.2s infinite}
.typing .dots i:nth-child(2){animation-delay:.2s}.typing .dots i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
.opts{display:flex; flex-wrap:wrap; gap:10px; align-self:flex-start; animation:enter var(--dur) var(--ease)}
.opt{display:flex; flex-direction:column; align-items:flex-start; gap:1px;
  min-height:48px; padding:9px 18px; background:#fff;
  border:1.5px solid var(--line); border-radius:var(--r-md);
  font-family:inherit; cursor:pointer; text-align:start;
  transition:all var(--dur) var(--ease); box-shadow:var(--e1)}
.opt:hover{border-color:var(--primary); box-shadow:var(--e2); transform:translateY(-1px)}
.opt .lbl{font-size:.9rem; font-weight:600; color:var(--ink)}
.opt .sub{font-size:.75rem; color:var(--primary-dark); font-weight:600}
.cards{display:flex; flex-direction:column; gap:14px; align-self:stretch}
.card{background:var(--card); border-radius:var(--r-lg); border:1px solid var(--line);
  box-shadow:var(--e1); padding:18px; transition:box-shadow var(--dur) var(--ease)}
.card:hover{box-shadow:var(--e2)}
.card .head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.card h3{font-size:1.02rem; font-weight:700}
.card .brand{font-size:.75rem; color:var(--ink-3); margin-top:1px}
.card .price{font-size:1.02rem; font-weight:800; color:var(--primary-dark); white-space:nowrap}
.card .hl{display:inline-flex; align-items:center; gap:6px; margin:10px 0 8px;
  background:var(--primary-soft); color:var(--primary-dark);
  font-size:.78rem; font-weight:600; padding:5px 12px; border-radius:var(--r-sm)}
.card .hl .material-symbols-rounded{font-size:15px}
.specs{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:4px 16px; margin:6px 0 2px}
.specs .row{display:flex; gap:6px; font-size:.78rem; line-height:1.7}
.specs .k{color:var(--ink-3); flex:none; min-width:64px}
.specs .v{color:var(--ink-2)}
.card .meta{display:flex; align-items:center; gap:6px; margin-top:8px; font-size:.8rem; color:var(--ink-2)}
.card .meta .material-symbols-rounded{font-size:17px; color:#d99a06;
  font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 20}
.card .over{display:flex; align-items:center; gap:6px; margin-top:6px; font-size:.75rem; color:var(--error)}
.card .over .material-symbols-rounded{font-size:15px}
.card .actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.btn{display:inline-flex; align-items:center; gap:6px; justify-content:center;
  min-height:44px; padding:0 18px; border-radius:var(--r-full);
  font-family:inherit; font-size:.84rem; font-weight:600; text-decoration:none;
  cursor:pointer; border:none; transition:all var(--dur) var(--ease)}
.btn .material-symbols-rounded{font-size:17px}
.btn.filled{background:var(--primary); color:#fff}
.btn.filled:hover{background:var(--primary-dark)}
.btn.tonal{background:var(--primary-soft); color:var(--primary-dark)}
.btn.tonal:hover{background:#d3f0e8}
.btn.outlined{background:#fff; color:var(--ink-2); border:1px solid var(--line)}
.btn.outlined:hover{border-color:var(--primary); color:var(--primary-dark)}
#chatbar{padding:10px 0 calc(14px + env(safe-area-inset-bottom))}
.footnote{text-align:center; font-size:.72rem; color:var(--ink-3); padding:6px 16px 0}
.hidden{display:none!important}
:where(button,select,a):focus-visible{outline:2px solid var(--primary); outline-offset:2px}
/* --- UI/UX Enhancements --- */
/* میکروکپی‌های راهنما */
.microcopy { font-size: 0.82rem; color: var(--ink-3); font-weight: 600; margin: 4px 0 -12px; opacity: 0.8; }

/* متن راهنمای بالای سرچ باکس */
.divider { 
  display: block; 
  width: 100%; 
  max-width: 760px; 
  padding: 0 34px; 
  text-align: center; /* در فارسی راست‌چین و در انگلیسی چپ‌چین می‌شود */
  color: var(--ink-3); 
  font-size: 0.9rem; 
  font-weight: 600; 
  margin: 60px 0 -8px 0;
}
.divider::before, .divider::after { display: none; } /* حذف خطوط کناری */

/* انیمیشن شناور برای دکمه‌های دسته‌بندی */
.cat-btn { animation: float 4s ease-in-out infinite; }
.cat-btn:nth-child(2) { animation-delay: 2s; }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); box-shadow: var(--e3); border-color: var(--primary-soft); }
}

/* تغییر حالت دکمه ارسال (Submit) */
.send.inactive { opacity: 0.4; pointer-events: none; background: var(--ink-3); transform: scale(0.95); }
.send.active { opacity: 1; pointer-events: auto; background: var(--primary); transform: scale(1.05); box-shadow: var(--e2); animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
@keyframes popIn { 0% { transform: scale(0.8); } 100% { transform: scale(1.05); } }
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* --- بهینه‌سازی‌های پیشرفته برای موبایل --- */
@media (max-width: 600px) {
  /* هدر جمع‌وجورتر */
  header { padding: 8px 12px; gap: 8px; min-height: 56px; }
  .login .txt { display: none; }
  .login { padding: 0 8px; }
  .acct-menu { width: calc(100vw - 32px); right: -4px; }
  [dir="rtl"] .acct-menu { left: -4px; right: auto; }
  .loc select { max-width: 80px; font-size: 0.75rem; }
  .region-trigger { max-width: 80px; font-size: 0.75rem; overflow:hidden; }
  .region-trigger span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .region-dropdown { width: calc(100vw - 32px); }
  .logo { font-size: 1rem; gap: 6px; }
  .logo .mark { width: 32px; height: 32px; border-radius: 10px; }
  
/* صفحه اصلی و دکمه‌ها */
  #hero { padding: 16px 14px 10px; gap: 16px; }
  #hero h1 { margin-top: 25px; } /* پایین‌تر آوردن تیتر اصلی */
  #hero .sub { margin-top: 18px; } /* پایین‌تر آوردن 'نیاز و بودجه‌ات رو بگو' */
  .divider { margin-top: 50px; margin-bottom: -5px; }
  .cat-btn { width: 100%; justify-content: center; min-height: 48px; font-size: 0.9rem; }
  
/* نوار جستجو (مناسب برای لمس) */
  .searchwrap { margin-top: 0; }
  .search { min-height: 56px; padding: 6px 6px 6px 16px; border-radius: 20px; }
  [dir="rtl"] .search { padding: 6px 16px 6px 6px; }
  .search input { font-size: 0.95rem; }
  .send { width: 44px; height: 44px; }
  
  /* حباب‌های چت */
  #chat { padding: 12px 12px 8px; }
  #chat > :first-child { margin-top: auto; }
  
  /* دکمه‌های پیشنهاد (Options) */
  .opt { width: 100%; min-height: 44px; padding: 8px 14px; }
  .opts { flex-direction: column; width: 100%; gap: 8px; }
  
  /* کارت‌های محصولات */
  .card { padding: 14px; border-radius: 16px; }
  .card .head { flex-direction: column; gap: 6px; } /* قرار گرفتن قیمت زیر عنوان */
  .card h3 { font-size: 0.95rem; line-height: 1.4; }
  .card .price { font-size: 1.1rem; }
  .specs { grid-template-columns: 1fr; gap: 4px; } /* مشخصات در یک ستون */
  .specs .row { justify-content: space-between; border-bottom: 1px dashed var(--line); padding-bottom: 4px; }
  
  /* دکمه‌های فروشگاه */
  .card .actions { flex-direction: column; width: 100%; gap: 6px; }
  .btn { width: 100%; min-height: 42px; font-size: 0.85rem; }
}

/* رفع مشکل کیبورد مجازی در آیفون و اندروید */
@supports (-webkit-touch-callout: none) {
  body { height: -webkit-fill-available; }
}
/* ساختار کلی مقایسه اینفوگرافیکی */
.comp-wrap { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 12px; }

/* هدر نام محصولات */
.comp-header { 
  display: grid; grid-template-columns: 1fr 70px 1fr; gap: 10px; 
  align-items: center; text-align: center; font-weight: 800; 
  font-size: 0.95rem; color: var(--primary-dark); margin-bottom: 6px; 
}
.comp-hmid { 
  font-size: 1.1rem; color: var(--ink-3); background: var(--surface); 
  border-radius: var(--r-full); padding: 4px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}

/* ردیف‌های مقایسه */
.comp-row { display: grid; grid-template-columns: 1fr 70px 1fr; gap: 10px; align-items: stretch; }

/* بخش میانی (آیکون و عنوان) */
.comp-mid { 
  display: flex; flex-direction: column; align-items: center; justify-content: center; 
  text-align: center; color: var(--ink-2); font-size: 0.65rem; font-weight: 700; 
  text-transform: uppercase; letter-spacing: 0.5px;
}
.comp-mid .material-symbols-rounded { 
  color: var(--primary); font-size: 26px; margin-bottom: 2px; 
  filter: drop-shadow(0 2px 4px rgba(14,175,143,0.2));
}

/* حباب‌های مقادیر (دو طرف) */
.comp-val { 
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-md); 
  padding: 12px 10px; text-align: center; font-size: 0.85rem; color: var(--ink); 
  box-shadow: var(--e1); display: flex; align-items: center; justify-content: center; 
  line-height: 1.4; transition: border-color var(--dur) var(--ease);
}
.comp-row:hover .comp-val { border-color: var(--primary-soft); }

/* --- ریسپانسیو شدن مقایسه در موبایل --- */
@media (max-width: 600px) {
  .comp-header { grid-template-columns: 1fr 60px 1fr; font-size: 0.8rem; gap: 4px; }
  .comp-row { grid-template-columns: 1fr 60px 1fr; gap: 4px; }
  .comp-val { padding: 8px 6px; font-size: 0.75rem; word-break: break-word; }
  .comp-mid { font-size: 0.55rem; }
  .comp-mid .material-symbols-rounded { font-size: 22px; }
}
[hidden] { display: none !important; }

/* ---------------- WhatsApp login styles ---------------- */
/* استایل‌های واتساپ */
.wa-auth-box { width:100%; margin-top:20px; border-top:1px solid var(--line); padding-top:20px; text-align:start; }
.wa-label { font-size:.85rem; font-weight:700; color:var(--ink-2); margin-bottom:10px; }
.wa-step { display:flex; gap:8px; align-items:center; }
.wa-input { flex:1; height:44px; padding:0 12px; border:1.5px solid var(--line); border-radius:10px; font-family:inherit; font-size:.95rem; outline:none; transition:border var(--dur); min-width:0; }
.wa-input:focus { border-color:var(--primary); }
#waCode { text-align:center; letter-spacing:4px; font-weight:bold; }
/* استایل‌های واتساپ مشابه دکمه گوگل */
.wa-btn-main { border-color: #25D366; color: #25D366; margin-top: 10px; }
.wa-btn-main:hover { background: #e9fcf0; border-color: #1da851; }
.wa-btn-main svg { width: 22px; height: 22px; fill: currentColor; }

.wa-flow { width: 100%; display: flex; flex-direction: column; gap: 12px; margin-top: 10px; animation: enter var(--dur) var(--ease); }
.wa-step-box { display: flex; flex-direction: column; gap: 12px; text-align: center; }
.wa-input { width: 100%; height: 46px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: 12px; font-family: inherit; font-size: 1rem; outline: none; transition: border var(--dur); text-align: center; }
.wa-input:focus { border-color: var(--primary); }
#waCode { letter-spacing: 6px; font-weight: bold; font-size: 1.2rem; }
#waCode::placeholder {color: var(--ink-3);opacity: 0.4;letter-spacing: 4px;}

/* ---------------- کد کشور برای شماره واتساپ ---------------- */
.wa-phone-row { display:flex; gap:8px; align-items:flex-start; }
.dial-combo { position:relative; flex:0 0 92px; }
.dial-input { width:100%; height:46px; padding:0 10px; border:1.5px solid var(--line); border-radius:12px;
  font-family:inherit; font-size:1rem; text-align:center; outline:none; transition:border var(--dur); }
.dial-input:focus { border-color:var(--primary); }
.wa-phone-input { flex:1; text-align:start; }
.dial-dropdown { position:absolute; top:calc(100% + 6px); left:0; width:260px; max-height:260px; overflow-y:auto;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--e3);
  padding:6px; z-index:60; text-align:start; }
[dir="rtl"] .dial-dropdown { left:auto; right:0; }
.dial-dropdown[hidden] { display:none; }
.dial-item { display:flex; align-items:center; gap:8px; padding:8px; border-radius:var(--r-sm); cursor:pointer;
  transition:background var(--dur) var(--ease); }
.dial-item:hover { background:var(--primary-soft); }
.dial-flag { font-size:1.1rem; line-height:1; }
.dial-name { flex:1; font-size:.84rem; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dial-code { font-size:.8rem; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.dial-empty { font-size:.82rem; color:var(--ink-3); padding:10px 8px; text-align:center; }
.wa-btn { width: 100%; background: var(--primary); color: #fff; min-height: 46px; border: none; border-radius: 12px; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: all var(--dur) var(--ease); }
.wa-btn:hover:not(:disabled) { background: var(--primary-dark); }
.wa-btn:disabled { background: var(--line); color: var(--ink-3); cursor: not-allowed; }
.wa-display-phone { font-weight: 800; color: var(--ink); font-size: 1.3rem; letter-spacing: 1px; margin-bottom: 4px; }
.wa-timer { font-size: 0.9rem; color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.wa-resend { background: none; border: none; color: var(--primary); cursor: pointer; font-weight: 700; text-decoration: underline; font-size: 0.9rem; padding: 8px; transition: color var(--dur); }
.wa-resend:hover { color: var(--primary-dark); }
.wa-msg { font-size: 0.8rem; color: var(--error); min-height: 18px; }
.wa-msg.success { color: var(--primary-dark); }
.site-logo-img {
  height: 44px;
  width: auto;
  object-fit: contain;
  transition: height 0.3s ease; /* افکت نرم هنگام تغییر سایز */
}

@media (min-width: 768px) {
  .site-logo-img {
    height: 65px;
  }
  .logo {
    margin-inline-start: 40px; /* ایجاد فاصله از لبه‌ی صفحه (چه راست و چه چپ) */
  }
}
