/* ===================================================================
   All-Rounder (همه‌فن‌حریف) — Design System
   Palette: Ink (deep indigo-navy) / Paper (warm off-white) /
            Brand Teal (trust, "problem solved") / Coral (urgency, CTA) /
            Gold (rating / premium)
   Signature element: the segmented "diagnostic confidence bar" —
   used for failure-probability meters and echoed in rating stars
   and progress indicators throughout the product.
=================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&display=swap');

:root{
  --ink: #16213e;
  --ink-2: #1f2d52;
  --paper: #f6f4ef;
  --paper-2: #ffffff;
  --brand: #2a9d8f;
  --brand-dark: #1f7268;
  --coral: #ee6c4d;
  --coral-dark: #d9502f;
  --gold: #e9c46a;
  --text: #1b2333;
  --text-soft: #5b6472;
  --line: #e4e0d6;
  --danger: #d9502f;
  --ok: #2a9d8f;
  --warn: #e9c46a;
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 26px;
  --shadow: 0 10px 30px rgba(22,33,62,.08);
  --shadow-lg: 0 20px 60px rgba(22,33,62,.16);
  /* Deliberately NOT redefined in dark mode (unlike --ink/--ink-2, which
     intentionally flip to a light color so ink-colored TEXT stays
     readable against the page's flipped background). Lots of UI across
     the site fills a solid badge/button/bubble/band with this dark navy
     and puts white text on top — that combo only works if the fill
     never flips, so it gets its own always-dark variable. */
  --accent-fill: #16213e;
  --accent-fill-2: #1f2d52;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Vazirmatn', sans-serif;
  background:var(--paper);
  color:var(--text);
  direction:rtl;
  text-align:right;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,h4{margin:0;font-weight:800}
p{margin:0}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

.container{max-width:1180px;margin:0 auto;padding:0 20px}
.tabular{font-variant-numeric:tabular-nums}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(246,244,239,.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header .container{
  display:flex;align-items:center;justify-content:space-between;
  height:72px;gap:8px;
}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.15rem;color:var(--ink);min-width:0;flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.logo-mark{
  height:34px;width:auto;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.logo-mark img{height:100%;width:auto;display:block}
.header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;max-width:60%;overflow-x:auto;scrollbar-width:none}
.header-actions::-webkit-scrollbar{display:none}
.header-actions .btn, .header-actions .pill{flex-shrink:0}
.header-actions .pill{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 22px;border-radius:999px;border:none;
  font-size:.95rem;font-weight:700;transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--accent-fill);color:#fff}
.btn-primary:hover{background:var(--accent-fill-2)}
.btn-coral{background:var(--coral);color:#fff}
.btn-coral:hover{background:var(--coral-dark)}
.btn-brand{background:var(--brand);color:#fff}
.btn-brand:hover{background:var(--brand-dark)}
.btn-outline{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn-outline:hover{border-color:var(--ink)}
.btn-ghost{background:transparent;color:var(--text-soft);padding:10px 14px}
.btn-block{width:100%}
.btn-lg{padding:17px 28px;font-size:1.02rem}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ---------- Cards / Sections ---------- */
.card{
  background:var(--paper-2);border:1px solid var(--line);
  border-radius:var(--radius-m);box-shadow:var(--shadow);
}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.78rem;font-weight:700;color:var(--brand-dark);
  background:rgba(42,157,143,.1);padding:6px 14px;border-radius:999px;
}

/* ---------- Diagnostic Confidence Bar (signature element) ---------- */
.diag{display:flex;flex-direction:column;gap:6px}
.diag-row{
  display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;
}
.diag-label{font-weight:700;font-size:.92rem}
.diag-pct{font-weight:800;font-variant-numeric:tabular-nums}
.diag-track{
  height:14px;border-radius:999px;background:#eceae2;overflow:hidden;
  border:1px solid var(--line);position:relative;
}
.diag-fill{
  height:100%;border-radius:999px;
  background:linear-gradient(90deg, var(--brand), var(--coral));
  transition:width 1s cubic-bezier(.2,.8,.2,1);
  position:relative;
}
.diag-fill::after{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 6px, transparent 6px 12px);
}
.diag-item{margin-bottom:14px}
.diag-item:last-child{margin-bottom:0}

/* ---------- Footer ---------- */
.site-footer{
  border-top:1px solid var(--line);padding:40px 0;margin-top:60px;
  color:var(--text-soft);font-size:.88rem;text-align:center;
}

/* ---------- Utility ---------- */
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center;flex-wrap:wrap}
.gap-1{gap:8px}.gap-2{gap:16px}.gap-3{gap:24px}
.muted{color:var(--text-soft)}
.center{text-align:center}
.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:40px}
.pill{
  display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;
  border:1.5px solid var(--line);background:var(--paper-2);font-size:.85rem;font-weight:600;
  transition:all .15s ease;
}
.pill.active{background:var(--accent-fill);color:#fff;border-color:var(--accent-fill)}
.stars{color:var(--gold);letter-spacing:2px;font-size:.95rem}

/* ---------- Forms ---------- */
.field{margin-bottom:16px}
.field label{display:block;font-size:.85rem;font-weight:700;margin-bottom:7px;color:var(--text)}
.field input, .field select, .field textarea{
  width:100%;border:1.5px solid var(--line);border-radius:var(--radius-s);
  padding:12px 14px;font-family:inherit;font-size:.95rem;background:var(--paper-2);color:var(--text);
}
.field input:focus, .field select:focus, .field textarea:focus{outline:none;border-color:var(--brand)}
.field-hint{font-size:.78rem;color:var(--text-soft);margin-top:5px}
.field-error{font-size:.78rem;color:var(--danger);margin-top:5px;display:none}
.field.has-error input, .field.has-error select{border-color:var(--danger)}
.field.has-error .field-error{display:block}

.auth-wrap{max-width:440px;margin:0 auto;padding:48px 20px 70px}
.auth-card{padding:30px}
.auth-card h1{font-size:1.3rem;margin-bottom:6px}
.auth-card .muted{font-size:.88rem}
.role-tabs{display:flex;gap:8px;margin:20px 0 22px;background:var(--paper);padding:5px;border-radius:999px}
.role-tabs button{flex:1;padding:10px;border:none;background:transparent;border-radius:999px;font-weight:700;font-size:.88rem;color:var(--text-soft)}
.role-tabs button.active{background:var(--paper-2);color:var(--ink);box-shadow:var(--shadow)}
@media (max-width:380px){ .role-tabs button{font-size:.74rem;padding:9px 4px} }
.auth-alert{
  background:rgba(217,80,47,.1);color:var(--coral-dark);border-radius:var(--radius-s);
  padding:12px 14px;font-size:.87rem;font-weight:600;margin-bottom:16px;display:none;
}
.auth-alert.show{display:block}
.auth-alert.ok{background:rgba(42,157,143,.12);color:var(--brand-dark)}
.auth-switch{text-align:center;margin-top:18px;font-size:.88rem;color:var(--text-soft)}
.auth-switch a{color:var(--brand-dark);font-weight:700}
.category-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.category-chip{
  display:flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--line);
  border-radius:999px;padding:6px 8px 6px 16px;font-size:.85rem;font-weight:600;
}
.category-chip button{width:22px;height:22px;border-radius:50%;background:var(--paper-2);border:1px solid var(--line);color:var(--coral-dark);font-size:.8rem;line-height:1}
.category-chip .cat-thumb-btn{
  width:30px;height:30px;border-radius:50%;overflow:hidden;border:1px solid var(--line);
  background:var(--paper-2) center/cover no-repeat;flex-shrink:0;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;font-size:.9rem;color:var(--text-soft);
}
.add-cat-row{display:flex;gap:8px;margin-top:14px}
.add-cat-row input{flex:1;border:1.5px solid var(--line);border-radius:var(--radius-s);padding:10px 14px;font-family:inherit}

/* homepage category photo grid */
.home-cat-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:22px 0;
}
.home-cat-card{
  display:flex;flex-direction:column;align-items:center;gap:8px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius-m);padding:12px 8px 14px;
  text-decoration:none;color:var(--ink);cursor:pointer;transition:transform .15s,box-shadow .15s;
}
.home-cat-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.08)}
.home-cat-card .home-cat-img{
  width:100%;aspect-ratio:1/1;border-radius:var(--radius-s);overflow:hidden;background:var(--paper-2);
  display:flex;align-items:center;justify-content:center;font-size:1.8rem;
}
.home-cat-card .home-cat-img img{width:100%;height:100%;object-fit:cover}
.home-cat-card span{font-size:.82rem;font-weight:700;text-align:center;line-height:1.3}
@media (max-width:700px){
  .home-cat-grid{grid-template-columns:repeat(3,1fr);gap:10px}
  .home-cat-card span{font-size:.76rem}
}
@media (max-width:420px){
  .home-cat-grid{grid-template-columns:repeat(3,1fr);gap:8px}
  .home-cat-card{padding:8px 4px 10px}
}

.bank-card{
  max-width:340px;border-radius:18px;padding:22px;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--accent-fill) 0%, var(--brand-dark) 100%);
  box-shadow:var(--shadow-lg);margin:14px auto;
}
.bank-card::before{content:'';position:absolute;inset:0;background:radial-gradient(220px 140px at 90% -10%, rgba(233,196,106,.35), transparent 60%)}
.bank-card .chip{width:36px;height:26px;border-radius:6px;background:linear-gradient(135deg,var(--gold),#c9a34e);margin-bottom:22px;position:relative}
.bank-card .num{font-size:1.15rem;letter-spacing:2px;font-weight:700;font-variant-numeric:tabular-nums;position:relative}
.bank-card .row2{display:flex;justify-content:space-between;align-items:flex-end;margin-top:18px;position:relative}
.bank-card .holder{font-size:.82rem;opacity:.9}
.bank-card .sheba{font-size:.72rem;opacity:.75;margin-top:6px;letter-spacing:.5px}
.fee-box{background:var(--paper);border:1.5px solid var(--line);border-radius:var(--radius-m);padding:18px;margin:18px 0}
.fee-box .fee-amount{font-size:1.15rem;font-weight:800;text-align:center;margin-bottom:6px}
.copy-row{display:flex;gap:8px;justify-content:center;margin-top:10px;flex-wrap:wrap}
.copy-row button{font-size:.78rem;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--paper-2)}
.fee-confirm{display:flex;align-items:flex-start;gap:8px;font-size:.85rem;margin-top:14px;line-height:1.7}
.fee-confirm input{margin-top:3px;flex-shrink:0}

.cat-modal-backdrop{
  position:fixed;inset:0;background:rgba(22,33,62,.55);backdrop-filter:blur(2px);
  display:none;align-items:center;justify-content:center;z-index:500;padding:20px;
}
.cat-modal-backdrop.open{display:flex}
.cat-modal{
  background:var(--paper-2);border-radius:var(--radius-l);box-shadow:var(--shadow-lg);
  max-width:480px;width:100%;max-height:80vh;overflow-y:auto;padding:26px;
}
.cat-modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.cat-modal-head h3{font-size:1.1rem}
.cat-modal-close{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--paper-2);flex-shrink:0;color:var(--text)}
.cat-modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.cat-modal-item{
  display:flex;align-items:center;gap:8px;padding:14px;border-radius:var(--radius-s);
  border:1.5px solid var(--line);background:var(--paper);font-weight:700;font-size:.88rem;text-align:right;
}
.cat-modal-item:hover{border-color:var(--brand);color:var(--brand-dark);background:rgba(42,157,143,.06)}
@media (max-width:480px){ .cat-modal-grid{grid-template-columns:1fr} }
/* ---------- Responsive helpers ---------- */
@media (max-width:860px){
  .hide-mobile{display:none !important}
}
@media (min-width:861px){
  .hide-desktop{display:none !important}
}

@media (max-width:700px){
  .container{padding:0 14px}
  .dash-main{padding:16px}
  .kpi-row{grid-template-columns:repeat(2,1fr)}
  .card{overflow-x:auto}
  table{min-width:480px}
  .btn{padding:11px 16px;font-size:.9rem}
  .btn-lg{padding:14px 20px}
  h1{font-size:1.35rem !important}
  .req-item{flex-direction:column;align-items:flex-start}
  .req-item .offer{width:100%}
  .req-item .offer input{flex:1;min-width:0}
}

/* ---------- Mobile polish pass (phones) ---------- */
html, body{overflow-x:auto}
/* Fix: was overflow-x:hidden — if ANY element on ANY page ever ends up
   wider than the screen (a table, a row that doesn't wrap, whatever),
   `hidden` made that content literally impossible to reach — no amount
   of scrolling could ever show it, which is exactly the "می‌رفت پشت
   صفحه و چپ‌وراست نمی‌شد" complaint. `auto` means the same overflow can
   still happen, but the person can always swipe/scroll to actually see
   it instead of it just vanishing off the edge of the screen forever. */
@media (max-width:600px){
  .site-header .container{height:60px}
  .logo{font-size:1rem;gap:7px}
  .logo-mark{height:28px}
  .header-actions{gap:6px;max-width:56%}
  .header-actions .btn{padding:9px 14px;font-size:.82rem}
  .header-actions .pill{font-size:.78rem;padding:7px 12px;max-width:90px}
  .header-menu-btn{width:36px;height:36px}

  .field input, .field select, .field textarea{font-size:16px;padding:11px 13px}
  .field{margin-bottom:13px}
  .auth-wrap{padding:28px 16px 50px}
  .auth-card{padding:22px}

  section{padding-top:32px;padding-bottom:32px}
  .card{border-radius:14px}
  h2{font-size:1.1rem !important}

  .pay-wrap, .profile-wrap{padding:20px 0 50px;gap:16px}
  .pay-section, .book-card, .summary-card{padding:18px}

  /* the "search this map location" row (register.html / expert-panel.html)
     was a fixed flex-row that squeezed the text input too narrow on phones */
  #shopCitySearch, #profileCitySearch { min-width: 0; }
}
@media (max-width:420px){
  div:has(> #shopCitySearchBtn), div:has(> #profileCitySearchBtn) { flex-direction: column; }
  #shopCitySearchBtn, #profileCitySearchBtn { width: 100%; }
}


/* ===================================================================
   Dark mode (روز/شب). Toggled via ar_initThemeToggle() in js/auth.js,
   which sets/removes data-theme="dark" on <html> and remembers the
   choice in localStorage. Every color in the site is already driven by
   the CSS variables in :root, so overriding them here is enough to
   re-theme the whole site without touching individual selectors.
=================================================================== */
html[data-theme="dark"]{
  --ink: #eef1f8;
  --ink-2: #dfe4f0;
  --paper: #182033;
  --paper-2: #10182b;
  --brand: #37b3a3;
  --brand-dark: #56cdbd;
  --coral: #ff8266;
  --coral-dark: #ff9d80;
  --gold: #eecf85;
  --text: #e7ebf5;
  --text-soft: #a3adc2;
  --line: #2a3450;
  --danger: #ff8266;
  --ok: #37b3a3;
  --warn: #eecf85;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --shadow-lg: 0 20px 60px rgba(0,0,0,.5);
}
html[data-theme="dark"] body{ background: #0b1120; color: var(--text); }
html[data-theme="dark"] .site-header{ background: #10182b; border-bottom: 1px solid var(--line); }
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
  background: #131c30; color: var(--text); border-color: var(--line);
}
html[data-theme="dark"] option{ background: #131c30; color: var(--text); }
html[data-theme="dark"] .btn-outline{ color: var(--text); }
html[data-theme="dark"] img{ opacity: .92; }
html[data-theme="dark"] .bank-card{ filter: brightness(.92); }
#arThemeToggle{ font-size: 1.1rem; line-height: 1; }

/* ===================================================================
   Real booking chat (tracking.html drawer + expert-panel.html
   گفتگوها tab + customer-panel.html inline chat). Shared classes so
   all three surfaces look consistent.
=================================================================== */
.chat-msg-media{max-width:200px;border-radius:12px;display:block;margin-top:6px;cursor:pointer}
.chat-msg-media.is-video{max-width:220px}
.chat-attach-row{display:flex;gap:6px;align-items:center}
.chat-attach-btn{
  width:38px;height:38px;border-radius:50%;border:1.5px solid var(--line);background:var(--paper-2);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.05rem;cursor:pointer;
}
.chat-attach-btn:hover{border-color:var(--brand)}
.chat-attach-preview{
  display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--paper);border-radius:10px;
  font-size:.8rem;margin-bottom:8px;
}
.chat-attach-preview button{background:none;border:none;color:var(--coral-dark);font-weight:700;cursor:pointer;font-size:.85rem}
.chat-empty-hint{text-align:center;color:var(--text-soft);font-size:.85rem;padding:18px 8px}
.conv-item.unread{background:rgba(42,157,143,.06)}
.conv-item .conv-unread-badge{
  min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--coral);color:#fff;
  font-size:.7rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}