/* BUILD: v5 */
/* ============================================================
   theme.css — دیزاین‌سیستم اپلیکیشن «اپلس» (مشکی-طلایی)
   این فایل بعداً عیناً در پروژه ASP.NET استفاده می‌شود
   قواعد: RTL، موبایل‌فرست، تمام رنگ‌ها فقط از متغیرها
   ============================================================ */

/* ---------- ۱) توکن‌ها ---------- */
:root{
  /* پالت «مشکی-طلایی» اپلس (۱۴۰۵/۰۷): کروم مشکی، صفحه روشن عاجی، تأکید طلایی */
  --ink:        #0D0D0F;   /* مشکی: سربرگ، تب‌بار و نوارها */
  --ink-2:      #1D1C20;   /* سطح برجسته روی زمینه مشکی */
  --ink-3:      #34312A;   /* خط جداکننده روی مشکی (کمی گرم) */
  --paper:      #F6F3EC;   /* زمینه صفحات: عاجی گرم */
  --surface:    #FFFFFF;   /* کارت‌ها */
  --surface-2:  #EFEADF;   /* سطح فرورفته */

  /* طلایی: اقدام اصلی و حالت فعال. نام --go برای سازگاری با کد قبلی مانده */
  --go:         #C9A13B;   /* طلایی اصلی */
  --go-dark:    #8C6A1C;   /* طلایی تیره: متن طلایی روی زمینه روشن (کنتراست کافی) */
  --go-soft:    #F6EEDA;   /* طلایی بسیار کم‌رنگ: پس‌زمینه برچسب‌ها */
  --go-light:   #EBD38F;   /* طلایی روشن: متن/آیکن روی زمینه مشکی */
  --on-go:      #17130A;   /* متن روی طلایی؛ سفید روی طلایی خوانا نیست */
  --gold-grad:  linear-gradient(135deg, #EBD38F 0%, #C9A13B 52%, #A47C25 100%);
  --ink-grad:   linear-gradient(160deg, #0D0D0F 0%, #1D1C20 60%, #2B2720 100%);

  --alert:      #E8862A;   /* نارنجی: موقعیت شما و انتخاب؛ عمداً متفاوت از طلایی */
  --alert-soft: #FCEBD9;
  --danger:     #D64545;
  --danger-soft:#FCEBEB;

  /* متن - تیره و پرکنتراست */
  --text:       #141210;
  --text-2:     #4A453C;   /* متن ثانویه */
  --text-3:     #7D776B;   /* متن کم‌رنگ */
  --on-dark:    #F6F3EC;
  --on-dark-2:  #B9B09B;

  /* رنگ دسته‌بندی‌ها (روی پین‌ها) */
  --c-fuel:     #E5484D;
  --c-cng:      #2E7CF6;
  --c-repair:   #7A5AF8;
  --c-food:     #F2760C;
  --c-pharmacy: #12A594;
  --c-hospital: #E0417C;
  --c-parking:  #3E63DD;
  --c-wc:       #64748B;

/* شعاع گوشه */
  --r-sm: 8px;  --r-md: 14px;  --r-lg: 20px;  --r-xl: 28px;  --r-full: 999px;

  /* سایه — نرم و لایه‌ای، بدون سایه‌ی تیره‌ی مصنوعی */
  --sh-1: 0 1px 2px rgba(20,16,8,.06), 0 2px 8px rgba(20,16,8,.05);
  --sh-2: 0 2px 6px rgba(20,16,8,.07), 0 10px 24px rgba(20,16,8,.09);
  --sh-3: 0 -2px 10px rgba(20,16,8,.06), 0 -14px 40px rgba(20,16,8,.10);

  /* فاصله‌ها */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px;

  /* تایپوگرافی */
  --font: "Vazirmatn", "Vazir", Tahoma, "Iranian Sans", "DejaVu Sans", sans-serif;
  --fs-display: 30px;
  --fs-h1: 22px;
  --fs-h2: 18px;
  --fs-body: 15px;
  --fs-sm: 13px;
  --fs-xs: 11px;

  /* حرکت */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .28s;
}

/* حالت شب — با افزودن data-theme="dark" روی <html> فعال می‌شود */
[data-theme="dark"]{
  --paper:     #0B1220;
  --surface:   #141F33;
  --surface-2: #1B2942;
  --text:      #EAF0F8;
  --text-2:    #9AAAC4;
  --text-3:    #64748B;
  --go-soft:   #2A2414;
  --alert-soft:#332616;
  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 2px 6px rgba(0,0,0,.4), 0 10px 24px rgba(0,0,0,.35);
  --sh-3: 0 -14px 40px rgba(0,0,0,.45);
}

/* ---------- ۲) ریست ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--font);
  font-size:var(--fs-body);
  font-weight:500;              /* وزن پایه سنگین‌تر برای خوانایی */
  line-height:1.65;
  color:var(--text);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
img{ max-width:100%; display:block; }
svg{ display:block; }

/* دسترس‌پذیری: فوکوس همیشه دیده شود */
:focus-visible{ outline:2px solid var(--go); outline-offset:2px; border-radius:var(--r-sm); }

/* عناصری که display صریح دارند (flex/grid) خاصیت hidden را نادیده می‌گیرند
   و نامرئی ولی «کلیک‌گیر» می‌مانند. این قانون جلوی آن را می‌گیرد. */
[hidden]{ display:none !important; }

/* احترام به تنظیم کاهش حرکت */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ---------- ۳) کلاس‌های کمکی ---------- */
.u-num{ font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.u-mute{ color:var(--text-2); }
.u-faint{ color:var(--text-3); }
.u-sm{ font-size:var(--fs-sm); }
.u-xs{ font-size:var(--fs-xs); }
.u-row{ display:flex; align-items:center; gap:var(--s3); }
.u-grow{ flex:1; min-width:0; }
.u-truncate{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.u-hidden{ display:none !important; }

/* ---------- ۴) دکمه‌ها ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  height:52px; padding:0 var(--s5);
  border-radius:var(--r-md);
  font-size:var(--fs-body); font-weight:700;
  transition:transform .12s var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  user-select:none;
}
.btn:active{ transform:scale(.975); }
.btn[disabled]{ opacity:.45; pointer-events:none; }
.btn--go{ background:var(--gold-grad); color:var(--on-go); box-shadow:0 6px 16px rgba(164,124,37,.30); }
.btn--go:hover{ filter:brightness(1.05); }
.btn--ghost{ background:var(--surface-2); color:var(--text); }
.btn--outline{ background:transparent; border:1.5px solid var(--surface-2); color:var(--text); }
.btn--block{ width:100%; }
.btn--sm{ height:40px; padding:0 var(--s4); font-size:var(--fs-sm); border-radius:var(--r-sm); }
.btn--icon{ width:44px; height:44px; padding:0; border-radius:var(--r-full); }

/* ---------- ۵) فیلد ورودی ---------- */
.field{ display:block; }
.field__label{ display:block; font-size:var(--fs-sm); color:var(--text-2); margin-bottom:var(--s2); }
.field__box{
  display:flex; align-items:center; gap:var(--s3);
  height:56px; padding:0 var(--s4);
  background:var(--surface); border:1.5px solid var(--surface-2);
  border-radius:var(--r-md);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field__box:focus-within{ border-color:var(--go); box-shadow:0 0 0 4px var(--go-soft); }
.field__box input{
  flex:1; min-width:0; border:0; background:transparent; outline:none;
  font-size:17px; font-weight:600; letter-spacing:.02em;
}
.field__prefix{ color:var(--text-3); font-weight:600; font-size:var(--fs-sm); }
.field__hint{ margin-top:var(--s2); font-size:var(--fs-xs); color:var(--text-3); }
.field__hint--error{ color:var(--danger); }

/* ---------- ۶) چیپ دسته‌بندی ---------- */
.chip{
  display:inline-flex; align-items:center; gap:var(--s2);
  height:38px; padding:0 var(--s4);
  background:var(--surface); color:var(--text-2);
  border:1.5px solid transparent;
  border-radius:var(--r-full);
  font-size:var(--fs-sm); font-weight:600; white-space:nowrap;
  box-shadow:var(--sh-1);
  transition:all var(--dur) var(--ease);
}
.chip svg{ width:17px; height:17px; }
.chip[aria-pressed="true"]{
  background:var(--ink); color:var(--go-light); border-color:var(--ink);
  box-shadow:0 6px 16px rgba(20,16,8,.25);
}
.chip[aria-pressed="true"] .chip__count{ background:rgba(255,255,255,.18); color:#fff; }
.chip__count{
  font-size:var(--fs-xs); font-weight:700; padding:1px 7px;
  background:var(--surface-2); color:var(--text-2); border-radius:var(--r-full);
}

/* ---------- ۷) کارت مکان ---------- */
.place{
  display:flex; align-items:flex-start; gap:var(--s3);
  padding:var(--s4) 0;
  border-bottom:1px solid var(--surface-2);
  width:100%; text-align:right;
}
.place:last-child{ border-bottom:0; }
.place__icon{
  flex:none; width:44px; height:44px; border-radius:var(--r-md);
  display:grid; place-items:center; color:#fff;
}
.place__icon svg{ width:22px; height:22px; }
.place__name{ font-weight:700; font-size:var(--fs-body); }
.place__meta{ font-size:var(--fs-sm); color:var(--text-2); margin-top:2px; }
.place__dist{ flex:none; text-align:center; padding-inline-start:var(--s2); }
.place__dist b{ display:block; font-size:19px; font-weight:800; line-height:1.15; }
.place__dist span{ font-size:var(--fs-xs); color:var(--text-3); }

/* نشانگر باز/بسته */
.dot{ display:inline-block; width:7px; height:7px; border-radius:50%; vertical-align:middle; margin-inline-end:5px; }
.dot--open{ background:var(--go); }
.dot--closed{ background:var(--text-3); }