/* ═══ سامانه‌ی اتوسرویس — روی همان پالت و فونت سه پلتفرم دیگر ═══
   فقط موبایل. عرض ثابت ۴۳۰ پیکسل مثل پنل کاربری، ولی چیدمان
   ساده‌تر: اتوسرویس وسط کار است، دستش روغنی است و نور کارگاه
   بد — پس دکمه‌ها بزرگ، متن درشت و کنتراست بالا. */

#frame { background: var(--paper); }

/* ── سربرگ ورود ─────────────────────────────────────── */
.auto-hero {
  background: var(--grad-event); color: #fff;
  padding: 44px 22px 30px; text-align: center;
}
.auto-logo { width: 116px; margin: 0 auto 16px; }
.auto-hero h1 { margin: 0 0 6px; font-size: 21px; font-weight: 800; letter-spacing: -.2px }
.auto-hero p { margin: 0; font-size: 13px; opacity: .8 }

/* ── نوار بالا در صفحه‌های داخلی ─────────────────────── */
.auto-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--petrol); color: #fff; padding: 14px 16px;
  padding-top: calc(14px + env(safe-area-inset-top));
}
.auto-top b { display: block; font-size: 14.5px; font-weight: 700 }
.auto-top span { display: block; font-size: 11.5px; opacity: .7 }
.lnk {
  background: rgba(255,255,255,.14); color: #fff; border: 0; border-radius: 10px;
  padding: 9px 13px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.lnk:active { background: rgba(255,255,255,.26) }
.code-chip {
  background: rgba(255,255,255,.14); border-radius: 10px; padding: 7px 12px;
  font-size: 12.5px; color: #fff;
}
.code-chip b { display: inline; font-size: 15px; letter-spacing: 2px; font-weight: 700 }

/* گروه دکمه‌های سمت چپ هدر */
.top-act { display: flex; align-items: center; gap: 8px }
.top-title { font-size: 13px; font-weight: 600; opacity: .85 }

/* دکمه‌ی پشتیبانی — در هر مرحله دم دست است. */
.lnk.sup {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  background: var(--amber); color: #3b2a00; font-weight: 700;
}
.lnk.sup:active { background: #ffc34d }
.lnk.sup svg { flex: none }
@media (max-width: 360px) { .lnk.sup span { display: none } }

/* ── بدنه ───────────────────────────────────────────── */
.auto-body {
  flex: 1; padding: 22px 18px calc(30px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 14px;
}
.auto-body.center { align-items: center; text-align: center; justify-content: center }
.auto-body h2 { margin: 0; font-size: 20px; font-weight: 800; color: var(--petrol) }
.sub { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.8 }
.hint { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.9; text-align: center }

.big-icon {
  width: 84px; height: 84px; border-radius: 26px; display: grid; place-items: center;
  background: rgba(35,180,170,.12); color: var(--teal-ink); margin-bottom: 4px;
}
.big-icon.bad { background: rgba(170,25,20,.1); color: var(--red) }
.big-icon.good { background: rgba(15,158,147,.14); color: var(--ok) }

/* ── فرم ────────────────────────────────────────────── */
form { display: flex; flex-direction: column; gap: 14px; width: 100% }
.fld { display: flex; flex-direction: column; gap: 7px; text-align: right }
.fld > span, .fld legend { font-size: 13.5px; font-weight: 600; color: var(--petrol) }
.fld input {
  font-family: inherit; font-size: 16px; /* زیر ۱۶ باعث زوم خودکار iOS می‌شود */
  padding: 14px 14px; border: 1.5px solid var(--line); border-radius: 13px;
  background: #fff; color: var(--ink); width: 100%;
}
.fld input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(35,180,170,.16) }
.fld-hint { font-size: 11.5px; color: var(--muted); font-style: normal; line-height: 1.7 }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.seg { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px }
.seg legend { padding: 0; margin-bottom: 2px }
.opt {
  display: flex; align-items: center; gap: 10px; padding: 13px 14px;
  border: 1.5px solid var(--line); border-radius: 13px; background: #fff;
  font-size: 14.5px; cursor: pointer;
}
.opt input { width: 20px; height: 20px; accent-color: var(--teal) }
.opt:has(input:checked) { border-color: var(--teal); background: rgba(35,180,170,.07) }

.code-in {
  font-family: 'Montserrat', monospace; font-size: 30px; font-weight: 700;
  letter-spacing: 10px; text-align: center; direction: ltr;
  padding: 16px 10px; border: 2px solid var(--line); border-radius: 15px;
  background: #fff; color: var(--petrol); width: 100%;
}
.code-in:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(35,180,170,.15) }

.btn {
  font-family: inherit; font-size: 16px; font-weight: 700; border: 0; cursor: pointer;
  padding: 16px 18px; border-radius: 14px; width: 100%; text-align: center;
  display: block; text-decoration: none; transition: transform .1s, opacity .15s;
}
.btn:active { transform: scale(.985) }
.btn.primary { background: var(--petrol); color: #fff }
.btn.primary:disabled { background: #b9c6c6; color: #fff; cursor: not-allowed }
.btn.ghost { background: transparent; color: var(--petrol); border: 1.5px solid var(--line) }
.btn[aria-busy="true"] { opacity: .65; pointer-events: none }

.err {
  margin: 0; background: rgba(170,25,20,.08); color: var(--red);
  border-radius: 11px; padding: 11px 13px; font-size: 13.5px; line-height: 1.8;
  text-align: right;
}

/* ── جست‌وجوی خودرو ─────────────────────────────────── */
.car-list {
  max-height: 210px; overflow-y: auto; border: 1.5px solid var(--line);
  border-radius: 13px; background: #fff; margin-top: -6px;
  -webkit-overflow-scrolling: touch;
}
.car-list button {
  display: block; width: 100%; text-align: right; background: none; border: 0;
  border-bottom: 1px solid var(--line); padding: 13px 14px;
  font-family: inherit; font-size: 14.5px; color: var(--ink); cursor: pointer;
}
.car-list button:last-child { border-bottom: 0 }
.car-list button:active { background: rgba(35,180,170,.1) }

/* ── کارت‌های محصول ─────────────────────────────────── */
.prods { display: flex; flex-direction: column; gap: 11px }
.pcard {
  display: grid; grid-template-columns: 74px 1fr auto; align-items: center; gap: 13px;
  border: 2px solid var(--line); border-radius: 16px; background: #fff;
  padding: 12px 13px; cursor: pointer; text-align: right; width: 100%;
  font-family: inherit;
}
.pcard img { width: 74px; height: 74px; object-fit: contain }
.pcard { grid-template-columns: 62px 1fr auto }
.pcard img { width: 62px; height: 62px }
.pcard > span { display: block; min-width: 0 }
/* بدون display:block این دو در یک خط به هم می‌چسبند و
   «0W16 · SPRAYSUN LEO X9» دیده می‌شود. */
.pcard .pn { display: block; font-size: 14px; font-weight: 700; color: var(--petrol);
  font-family: 'Montserrat', inherit; line-height: 1.35; white-space: nowrap }
.pcard .pg { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px;
  font-family: 'Montserrat', inherit; line-height: 1.35 }
.pcard .pl {
  font-size: 13px; font-weight: 700; color: var(--teal-ink);
  background: rgba(35,180,170,.12); border-radius: 9px; padding: 6px 9px; white-space: nowrap;
}
.pcard[aria-pressed="true"] { border-color: var(--teal); background: rgba(35,180,170,.07) }
.pcard[aria-pressed="true"] .pl { background: var(--teal); color: #fff }

/* ── رسید پایانی ────────────────────────────────────── */
.receipt {
  width: 100%; background: #fff; border: 1.5px solid var(--line); border-radius: 14px;
  padding: 14px 15px; text-align: right; font-size: 13.5px; line-height: 2;
}
.receipt div { display: flex; justify-content: space-between; gap: 12px }
.receipt span { color: var(--muted) }
.receipt b { font-weight: 700; color: var(--ink) }
.receipt .ltr { font-family: 'Montserrat', inherit; direction: ltr }

@media (max-height: 680px) {
  .auto-hero { padding: 26px 22px 20px }
  .auto-logo { width: 92px; margin-bottom: 10px }
  .big-icon { width: 66px; height: 66px; border-radius: 20px }
}