/* =========================================================
   File & Serve — styles.css (2025-10-23)
   Clean, responsive header/logo + UX/Safety patch integrated
   ========================================================= */

/* -------- CSS Variables (theme) -------- */
:root{
  --bg:#ffffff;
  --text:#0b1220;
  --muted:#64748b;
  --border:#e5e7eb;
  --card:#ffffff;
  --brand:#15306a;
  --brand2:#2f4fe6;
  --accent:#0ea5e9;
  --success:#065f46;
  --warning:#92400e;
}

/* -------- Base / Reset-ish -------- */
*{ box-sizing:border-box; }
html{ font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans",Arial,sans-serif; font-size:16px; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{ margin:0; color:var(--text); background:var(--bg); line-height:1.5; }
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--brand2); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* -------- Layout helpers -------- */
.container{ width:min(1100px, 92%); margin-inline:auto; }
.section{ margin-top:22px; }
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px;
  box-shadow:0 4px 14px rgba(16,24,40,.05);
  transition:box-shadow .2s ease;
}
.card:hover{ box-shadow:0 8px 22px rgba(16,24,40,.08); }

.fieldset{ border:1px solid var(--border); border-radius:12px; padding:16px; margin:14px 0; }
.fieldset legend{ font-size:14px; background:#f1f5ff; border-radius:8px; line-height:1; padding:6px 8px; display:inline-block; color:var(--text); font-weight:800; }

.grid{ display:grid; gap:14px; }
.grid-2{ grid-template-columns:1fr 1fr; }
@media (max-width:720px){ .grid-2{ grid-template-columns:1fr; } .container{ padding:12px; } .fieldset{ padding:12px; } }

/* -------- Typography -------- */
h1{ font-size:clamp(22px, 2.2vw + 14px, 32px); line-height:1.2; margin:0 0 8px; }
h2{ font-size:clamp(18px, 1.6vw + 12px, 26px); line-height:1.3; margin:0 0 6px; }
h3{ font-size:clamp(16px, 1.2vw + 10px, 22px); margin:0 0 4px; }
.muted{ color:var(--muted); }
.kicker{ color:#334155; font-weight:600; background:#eef5ff; border:1px solid #dce8ff; padding:8px 10px; border-radius:10px; }

/* -------- Form controls -------- */
label{ display:block; font-weight:700; color:#0f172a; }
input, select, textarea{
  width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:10px;
  background:#fff; color:var(--text); font:inherit;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
  outline:0;
}
input:hover, select:hover, textarea:hover{ border-color:#d5e2f2; }
input:focus, select:focus, textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(14,165,233,.2); background:#fff; }
input:disabled, select:disabled, textarea:disabled{ background:#f3f6fb; color:#9aa6b2; cursor:not-allowed; }
input:required:invalid, select:required:invalid, textarea:required:invalid{ border-color:#fda4af; }
.input-error{ border-color:#f87171 !important; }
.helper-error{ color:#ef4444; font-size:12px; margin-top:4px; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
input[type="number"]{ -moz-appearance:textfield; }
textarea{ min-height:110px; resize:vertical; }

/* -------- Buttons -------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-radius:12px; font-weight:800; border:0; cursor:pointer;
  background:var(--brand2); color:#fff; box-shadow:0 6px 18px rgba(47,79,230,.22);
  transition:transform .1s ease, box-shadow .1s ease, opacity .15s ease;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(47,79,230,.25); text-decoration:none; }
.btn:active{ transform:translateY(0); box-shadow:0 6px 18px rgba(47,79,230,.2); }
.btn:disabled{ opacity:.6; cursor:not-allowed; box-shadow:none; }
.btn-secondary{ background:#fff; color:#0f172a; border:1px solid var(--border); box-shadow:none; }
.btn-secondary:hover{ background:#f8fafc; }
.btn.is-loading{ position:relative; pointer-events:none; }
.btn.is-loading::after{
  content:''; position:absolute; right:12px; top:50%; width:16px; height:16px; margin-top:-8px;
  border-radius:50%; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }

/* -------- Chips / Small UI -------- */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  border-radius:999px; padding:4px 10px; font-size:12px; font-weight:700;
  border:1px solid var(--border); background:#fff; color:#0f172a;
}
.badge.ok{ border-color:#c6f6d5; background:#ecfdf5; color:var(--success); }
.badge.warn{ border-color:#fde68a; background:#fffbeb; color:var(--warning); }
.badge.info{ border-color:#bfdbfe; background:#eff6ff; color:#1e3a8a; }
.toast{
  position:fixed; right:16px; bottom:16px; background:#0b1220; color:#e5edff;
  padding:12px 14px; border-radius:12px; box-shadow:0 10px 30px rgba(2,6,23,.28);
  z-index:9999; font-weight:700; max-width:80vw;
}
.hidden{ display:none !important; }
.visually-hidden{ position:absolute!important; clip:rect(1px,1px,1px,1px)!important; padding:0!important; border:0!important; height:1px!important; width:1px!important; overflow:hidden!important; }
.text-muted{ color:var(--muted); }
#card-status{ min-height:18px; }
#card-status.ok{ color:#059669; }
#card-status.err{ color:#dc2626; }

/* -------- Header / Logo (NO OVERLAP) -------- */
:root{
  --header-h-mobile:64px;
  --header-h-desktop:78px;
}

/* Make both plain <header> and .site-header behave the same */
header, .site-header{
  position: sticky !important; /* ensure not fixed */
  top:0; z-index:1000; background:#fff; border-bottom:1px solid var(--border);
  overflow:visible !important;
}

/* Inner layout for both */
header .header-inner, .site-header .header-inner{
  display:flex; align-items:center; gap:14px;
  min-height:var(--header-h-mobile); padding:10px 16px;
}
@media (min-width:840px){
  header .header-inner, .site-header .header-inner{
    min-height:var(--header-h-desktop); padding:12px 20px;
  }
}

/* Logo sizing — stronger selector to override old rules */
header .logo, .site-header .logo{
  display:block; height:42px; width:auto; object-fit:contain;
}
@media (min-width:840px){
  header .logo, .site-header .logo{ height:56px; }
}

/* Brand text */
header .brand, .site-header .brand{ display:flex; flex-direction:column; line-height:1.05; }
header .brand .title, .site-header .brand .title{ font-size:18px; font-weight:900; }
header .brand .tag, .site-header .brand .tag{ font-weight:700; opacity:.95; }
@media (min-width:840px){
  header .brand .title, .site-header .brand .title{ font-size:22px; }
}

/* Nav for both */
header nav, .site-header nav{
  margin-left:auto; display:flex; gap:14px; align-items:center;
  flex-wrap:wrap; max-width:100%; overflow-x:auto;
}
header nav a, .site-header nav a{
  padding:8px 10px; border-radius:10px; text-decoration:none;
  font-weight:700; color:var(--brand); white-space:nowrap;
}
header nav a.active, header nav a:hover,
.site-header nav a.active, .site-header nav a:hover{
  background:#eef2ff;
}

/* Small screens: tidy nav */
@media (max-width:900px){
  header nav, .site-header nav{ gap:8px; }
  header nav a, .site-header nav a{ background:rgba(255,255,255,.12); padding:4px 8px; border-radius:8px; }
}

/* -------- Progress Bar -------- */
.progress3{ display:flex; gap:18px; margin:14px 0 20px; }
.progress3 .seg{
  flex:1; display:flex; align-items:center; justify-content:center; gap:12px;
  height:58px; border-radius:20px; background:#eaf1ff; color:#15306a; font-weight:800;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.progress3 .num{
  width:34px; height:34px; border-radius:999px; display:grid; place-items:center;
  background:#d8e4ff; font-weight:900; font-size:16px;
}
.progress3 .seg.is-active{ background:#2f4fe6; color:#fff; }
.progress3 .seg.is-active .num{ background:rgba(255,255,255,.3); color:#fff; }
.progress3 .seg.is-done{ background:#dff6e7; color:#065f46; }
.progress3 .seg.is-done .num{ background:#b7f3c8; color:#065f46; }

/* hide Step 2 fields until needed */
.hidden-fields{ display:none !important; }

/* ------- Summary box ------- */
#summaryBox{
  background:#f8fafc; border:1px dashed #e2e8f0; padding:10px; border-radius:10px; margin:8px 0;
}
.summary-line{ font-weight:600; }
.summary-line div:last-child{ color:#0f172a; }

/* ------- iFrame wrapper & transition ------- */
.iframe-wrap{ border:1px solid var(--border); border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 10px 24px rgba(2,6,23,.06); }
#smFrame{ transition:opacity .25s ease; opacity:0; }
#smFrame.loaded{ opacity:1; }

/* =========================================================
   >>> Your PATCH (UX & Safety) — merged verbatim <<<
   ========================================================= */

/* 1) Kill ZIP/Postal everywhere (even cached/old markup) */
#billingPostal,
label[for="billingPostal"],
input[id*="postal" i],
input[name*="postal" i],
input[id*="zip" i],
input[name*="zip" i]{ display:none !important; }
label:has(input[id*="postal" i]),
label:has(input[name*="postal" i]),
label:has(input[id*="zip" i]),
label:has(input[name*="zip" i]){ display:none !important; }
/* Fallback for browsers without :has() */
label[data-for*="postal" i],
label[data-for*="zip" i]{ display:none !important; }

/* 2) Better inputs: hover/focus/invalid states — already integrated above */
/* 3) Buttons: disabled & subtle variations — already integrated above */

/* 4) Tiny utilities */
.hidden{ display:none !important; }
.visually-hidden{ position:absolute!important; clip:rect(1px,1px,1px,1px)!important; padding:0!important; border:0!important; height:1px!important; width:1px!important; overflow:hidden!important; }
.text-muted{ color:var(--muted); }
.kicker{ color:#334155; font-weight:600; background:#eef5ff; border:1px solid #dce8ff; padding:8px 10px; border-radius:10px; }

/* 5) Checkboxes / radios prettier */
.checkbox{ font-weight:600; display:block; }
.checkbox input[type="checkbox"], .checkbox input[type="radio"]{ accent-color: var(--brand2); transform: translateY(1px); }

/* 6) Summary box polish — already above */
/* 7) Status chips — already above */
/* 8) Toast — already above */
/* 9) Loading spinner — already above */
/* 10) iFrame transitions — already above */
/* 11) Responsive grids — already above */
/* 12) Header nav wrap on small — already above */
/* 13) card status text — already above */

/* 14) iOS select chevrons */
select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image: linear-gradient(45deg, transparent 50%, #64748b 50%), linear-gradient(135deg, #64748b 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px);
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
}

/* 15) textarea mobile — already above */
/* 16) legend stronger — already above */
/* 17) card hover — already above */
/* 18) links inside muted — already above */

/* -------- Footer -------- */
footer{ text-align:center; color:var(--muted); padding:24px 10px; }
footer a{ text-decoration:underline; }

/* Safety: generic images in header/nav */
header img, .nav img, nav img{
  object-fit:contain; height:auto; max-height:64px;
}
/* If old CSS forced logo width 100%, override here (stronger) */
img[class*="logo" i], img[id*="logo" i]{ width:auto !important; }

/* Extra safety: if a legacy rule sets giant heights, cap them */
header img.logo, .site-header img.logo{
  max-height:56px !important;
}
@media (max-width:840px){
  header img.logo, .site-header img.logo{
    max-height:42px !important;
  }
}
/* ================================
   HOTFIX 2025-10-23 — Header & Nav
   ================================ */

/* 1) لوگو هیچ‌جا بزرگ/روی متن نشه (حتی اگر صفحه کلاس‌ها فرق داشت) */
header .logo, .site-header .logo {
  display:block !important;
  height:42px !important;
  max-height:42px !important;
  width:auto !important;
  object-fit:contain !important;
  flex:0 0 auto !important;
}
@media (min-width:840px){
  header .logo, .site-header .logo {
    height:56px !important;
    max-height:56px !important;
  }
}

/* 1-b) چینش هدر: جای کافی برای لوگو، برند و ناوبری */
header .header-inner, .site-header .header-inner {
  display:flex !important; align-items:center !important; gap:14px !important;
}
header .brand, .site-header .brand { min-width:0; }
header nav, .site-header nav {
  margin-left:auto !important;
  display:flex !important; align-items:center !important; gap:12px !important;
  flex-wrap:wrap !important; max-width:100% !important; overflow-x:auto !important;
}

/* 1-c) اگر جایی هنوز fixed مانده بود، خنثی کن */
header, .site-header, .topbar, .app-header {
  position: sticky !important; top:0 !important; z-index:1000 !important;
  background:#fff !important; border-bottom:1px solid var(--border) !important;
  overflow:visible !important;
}

/* 2) رنگ لینک‌های منو را در همهٔ حالت‌ها یکسان کن تا پررنگ/بدخوان نشه */
header nav a, .site-header nav a,
header nav a:link, .site-header nav a:link,
header nav a:visited, .site-header nav a:visited {
  color: #15306a !important;             /* آبی تیره ثابت */
  background: transparent !important;    /* پیش‌فرض بدون پس‌زمینه */
  text-decoration: none !important;
}
header nav a:hover, .site-header nav a:hover,
header nav a:focus-visible, .site-header nav a:focus-visible,
header nav a.active, .site-header nav a.active {
  background: #eef2ff !important;        /* پس‌زمینه ملایم */
  color: #15306a !important;              /* متن ثابت */
  border-radius:10px !important;
}

/* 2-b) رفع تغییر رنگ اجباری برخی مرورگرها در حالت visited/active */
header nav a:active, .site-header nav a:active {
  filter: none !important;
}
@supports selector(:any-link) {
  header nav :any-link, .site-header nav :any-link { color:#15306a !important; }
}

/* 2-c) دسترسی‌پذیری: فوکوس تمیز */
header nav a:focus-visible, .site-header nav a:focus-visible {
  outline: 2px solid rgba(14,165,233,.6) !important;
  outline-offset: 2px !important;
}

/* 3) iOS/Android tap highlight خیلی تیره نشه */
a, button { -webkit-tap-highlight-color: rgba(0,0,0,.08); }

/* 4) اگر CSS قدیمی عرض لوگو را 100% می‌کرد، خنثی‌اش کن */
img[class*="logo" i], img[id*="logo" i] { width:auto !important; }

/* 5) در حالت forced-colors (Windows High Contrast) خوانایی منو حفظ شود */
@media (forced-colors: active) {
  header nav a, .site-header nav a { forced-color-adjust: none; }
}
/* =========================================
   HOTFIX — Safari logo size + gentle nav tint
   ========================================= */

/* 1) لوگو در همهٔ صفحات و مخصوصاً Safari: اندازه‌ی قطعی */
header .logo, .site-header .logo{
  display:block !important;
  width:auto !important;
  height:56px !important;      /* دسکتاپ */
  max-height:56px !important;
  object-fit:contain !important;
  flex:0 0 auto !important;
  align-self:center !important;
}
@media (max-width:840px){
  header .logo, .site-header .logo{
    height:42px !important;    /* موبایل */
    max-height:42px !important;
  }
}

/* Safari-only تقویت‌کننده (بعضی ورژن‌ها قوانین بالا رو override می‌کنن) */
@supports (-webkit-touch-callout: none) {
  header .logo, .site-header .logo{
    height:56px !important;
    max-height:56px !important;
  }
  @media (max-width:840px){
    header .logo, .site-header .logo{
      height:42px !important;
      max-height:42px !important;
    }
  }
}

/* اگر جایی img کلی rule گذاشته (مثلاً width:100% یا height:auto) — خنثی کن */
header img.logo, .site-header img.logo,
img[class*="logo" i], img[id*="logo" i]{
  width:auto !important;
  height:auto !important;            /* پایه */
}
header img.logo, .site-header img.logo{
  height:56px !important;            /* اما برای لوگو، دوباره اندازه قطعی ست کن */
}
@media (max-width:840px){
  header img.logo, .site-header img.logo{
    height:42px !important;
  }
}

/* 2) رنگ منو: آبی لطیف، خوانا در Chrome/Firefox/Safari */
:root{
  --nav-text: #15306a;
  /* آبی خیلی کم‌رنگ برای hover/active */
  --nav-hover-bg: rgba(47, 79, 230, 0.10);
  /* اگر خواستی سبز لطیف تست کنی، خط بالا رو کامنت کن و این رو آنکامنت کن: */
  /* --nav-hover-bg: rgba(6, 95, 70, 0.10); */
}

header nav a, .site-header nav a,
header nav a:link, .site-header nav a:link,
header nav a:visited, .site-header nav a:visited{
  color: var(--nav-text) !important;
  background: transparent !important;
  text-decoration:none !important;
}

header nav a:hover, .site-header nav a:hover,
header nav a:focus-visible, .site-header nav a:focus-visible,
header nav a.active, .site-header nav a.active{
  background: var(--nav-hover-bg) !important;  /* لطیف */
  color: var(--nav-text) !important;
  border-radius:10px !important;
}

/* focus ریز برای دسترسی‌پذیری */
header nav a:focus-visible, .site-header nav a:focus-visible{
  outline: 2px solid rgba(14,165,233,.4) !important;
  outline-offset: 2px !important;
}

/* اطمینان از چیدمان درست هدر (اگر صفحه‌ای mark-up متفاوت داشت) */
header .header-inner, .site-header .header-inner{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
}
header nav, .site-header nav{
  margin-left:auto !important;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  flex-wrap:wrap !important;
  overflow-x:auto !important;
}
/* =========================================
   HOTFIX 2025-10-23-b — Safari logo + Nav tint
   ========================================= */

/* 1) لوگو در Safari (به‌خصوص iOS) حتماً محدود شود */
:root{
  --header-h-mobile: 64px;
  --header-h-desktop: 78px;
  --logo-pad: 12px; /* فضای نفس‌کش برای لوگو داخل هدر */
}

/* ارتفاع «واقعی» برای هدر تا Safari به min-height بی‌اعتنایی نکند */
header .header-inner, .site-header .header-inner{
  height: var(--header-h-mobile) !important;
}
@media (min-width:840px){
  header .header-inner, .site-header .header-inner{
    height: var(--header-h-desktop) !important;
  }
}

/* اندازهٔ لوگو: به جای height ثابت، سقف بر اساس ارتفاع هدر */
header .logo, .site-header .logo{
  display:block !important;
  width:auto !important;
  height:auto !important;
  max-height: clamp(38px, calc(100% - var(--logo-pad)), 56px) !important; /* موبایل/دسکتاپ خودکار */
  object-fit: contain !important;
  flex: 0 0 auto !important;
  align-self: center !important;
}

/* Safari-only تقویت‌کننده */
@supports (-webkit-touch-callout: none) {
  header .logo, .site-header .logo{
    max-height: clamp(38px, calc(100% - var(--logo-pad)), 56px) !important;
  }
}

/* اگر CSS قدیمی هنوز width:100% یا height:auto روی img ست می‌کند، این‌ها خنثی‌اش می‌کند */
img[class*="logo" i], img[id*="logo" i]{
  width:auto !important;
}
header img.logo, .site-header img.logo{
  height:auto !important;
}

/* 2) رنگ دکمه‌های منو: پیش‌فرض آبی خیلی لطیف + hover کمی پررنگ‌تر */
:root{
  --nav-text: #15306a;                      /* آبی تیره‌ی متن */
  --nav-bg: rgba(47, 79, 230, 0.06);        /* زمینه لطیف پیش‌فرض (نه سفید) */
  --nav-bg-hover: rgba(47, 79, 230, 0.12);  /* کمی پررنگ‌تر در hover/active */
  /* اگر خواستی «سبز لطیف» تست کنی، دو خط بالا را کامنت و این‌ها را آن‌کامنت کن:
  --nav-bg: rgba(6, 95, 70, 0.06);
  --nav-bg-hover: rgba(6, 95, 70, 0.12);
  */
}

/* پایه: همیشه کمی آبی کمرنگ داشته باشد (white نبودن) */
header nav a, .site-header nav a,
header nav a:link, .site-header nav a:link,
header nav a:visited, .site-header nav a:visited{
  color: var(--nav-text) !important;
  background: var(--nav-bg) !important;
  text-decoration: none !important;
  border-radius:10px !important;
}

/* حالت‌های تعاملی واضح ولی لطیف */
header nav a:hover, .site-header nav a:hover,
header nav a:focus-visible, .site-header nav a:focus-visible,
header nav a.active, .site-header nav a.active{
  background: var(--nav-bg-hover) !important;
  color: var(--nav-text) !important;
}

/* فوکوس قابل‌مشاهده برای دسترسی‌پذیری */
header nav a:focus-visible, .site-header nav a:focus-visible{
  outline: 2px solid rgba(14,165,233,.35) !important;
  outline-offset: 2px !important;
}

/* اطمینان از اینکه هدر sticky و روی محتوا نمی‌افته */
header, .site-header{
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background:#fff !important;
  border-bottom:1px solid var(--border) !important;
  overflow: visible !important;
}

/* چینش داخل هدر (هرجا مارک‌آپ متفاوت بود نیز اعمال شود) */
header .header-inner, .site-header .header-inner{
  display:flex !important; align-items:center !important; gap:14px !important;
}
header nav, .site-header nav{
  margin-left:auto !important;
  display:flex !important; align-items:center !important; gap:12px !important;
  flex-wrap:wrap !important; max-width:100% !important; overflow-x:auto !important;
}

/* لمس در موبایل: های‌لایت خیلی تیره نشود */
a, button { -webkit-tap-highlight-color: rgba(0,0,0,.08); }
/* === NAV TINT: +50% stronger blue & better hover === */
:root{
  /* آبی لطیفِ پررنگ‌تر از قبل (قبلی ~0.06 بود) */
  --nav-text: #15306a;
  --nav-bg: rgba(47, 79, 230, 0.09);       /* +50% نسبت به 0.06 */
  --nav-bg-hover: rgba(47, 79, 230, 0.18); /* +50% نسبت به 0.12 */
}

header nav a, .site-header nav a,
header nav a:link, .site-header nav a:link,
header nav a:visited, .site-header nav a:visited{
  color: var(--nav-text) !important;
  background: var(--nav-bg) !important;
  border-radius: 10px !important;
  text-decoration: none !important;
}

header nav a:hover, .site-header nav a:hover,
header nav a:focus-visible, .site-header nav a:focus-visible,
header nav a.active, .site-header nav a.active{
  background: var(--nav-bg-hover) !important;
  color: var(--nav-text) !important;
}