/* ============================================================
   کارماد — نسخه‌ی موبایل با حسِ اپلیکیشن (Mobile App Experience)
   این فایل فقط رفتار موبایل را تغییر می‌دهد و دسکتاپ دست‌نخورده می‌ماند.
   بارگذاری: در includes/header.php (روی همه‌ی صفحات).
   ============================================================ */

/* ---------- متغیرهای کمکی ---------- */
:root{
  --app-nav-h: 64px;                 /* ارتفاع نوار پایین */
  --app-bar-h: 58px;                 /* ارتفاع نوار بالا در موبایل */
  --app-blue: #36b4e9;
  --app-blue-2: #5fc8ff;
  --app-safe-b: env(safe-area-inset-bottom, 0px);
}

/* ============================================================
   بخش عمومی موبایل  (≤ 768px)
   ============================================================ */
@media (max-width: 768px){

  html, body{ max-width:100%; overflow-x:hidden; }

  /* فضای پایین صفحه برای اینکه محتوا زیر نوار پایین نرود */
  body{
    padding-bottom: calc(var(--app-nav-h) + var(--app-safe-b) + 6px) !important;
  }

  /* ---------- نوار بالای اپ: چسبیده به بالا و لبه‌ها، تو‌پُر و بدون حالت شناور ---------- */
  .site-header{
    position: sticky !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    width: 100% !important;
    z-index: 950 !important;
    height: var(--app-bar-h) !important;
    min-height: var(--app-bar-h) !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    background: var(--bg-base, #0b1017) !important;   /* تو‌پُر — نه شیشه‌ای/شناور */
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,.08)) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.25) !important;
  }
  .site-header .brand{ margin:0 !important; }
  .site-header .brand-logo{ height: 30px !important; width:auto !important; }

  /* روی موبایل: منوی افقی، همبرگر، دانلود اپ، سوییچر زبان، تغییر تم و ورود از هدر
     حذف می‌شوند — این گزینه‌ها به کشوی «تنظیمات» (سمت چپ) منتقل شده‌اند */
  .site-header .site-nav,
  .site-header .menu-toggle,
  .site-header .header-apk,
  .site-header .lang-switch,
  .site-header .desktop-theme-toggle,
  .site-header .header-actions .btn-primary,
  .site-header .header-actions .btn-ghost{
    display: none !important;
  }

  /* اکشن‌های باقی‌مانده در هدرِ موبایل: زنگوله + دکمه‌ی تنظیمات */
  .site-header .header-actions{
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  .site-header .notify-bell{
    width:34px !important; height:34px !important; border-radius:50% !important;
    background: var(--bg-card, rgba(255,255,255,.05)) !important;
    border:1px solid var(--border-color, rgba(255,255,255,.08)) !important;
    color: var(--text-primary, #eaf1f8) !important;
    display:inline-flex; align-items:center; justify-content:center;
  }

  /* ---------- هیروِ موبایل: فقط داشبورد (کیلومترها + گاز‌بده)؛ متن و دکمه حذف ---------- */
  .hero{
    display: flex !important;
    min-height: auto !important;
    padding: 12px 12px 18px !important;
    overflow: visible !important;
  }
  .hero .hero-inner{ gap: 0 !important; }
  .hero .hero-content{ display: none !important; }   /* نوشته‌ها و «شروع تیونینگ» روی موبایل نباشد */
  .hero .hero-visual{ width: 100% !important; max-width: 100% !important; }
  .hero .speedo-wrap{ max-width: 100% !important; width: 100% !important; }

  .banner-slider{ margin-top: 0 !important; padding-top: 6px !important; }

  /* ---------- کانتینرها و بخش‌ها ---------- */
  .container{ padding-left: 16px !important; padding-right: 16px !important; }

  section{ scroll-margin-top: calc(var(--app-bar-h) + 8px); }

  /* گرید مقالات — دو ستونه‌ی جمع‌وجور و اپ‌مانند (تخصصی‌تر از استایل داخلی blog.php) */
  .blog-content .blog-grid,
  .blog-grid{ grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .blog-content .blog-card .blog-image,
  .blog-card .blog-image{ height: 104px !important; min-height: 104px !important; }
  .blog-card .blog-body{ padding: 10px !important; }
  .blog-card .blog-title{ font-size: 13px !important; line-height: 1.5 !important; }
  .blog-card .blog-top-tags{ gap: 4px !important; }
  .blog-card .blog-top-tags span{ font-size: 9.5px !important; padding: 2px 6px !important; }
  .result-grid, .related-grid, .brands-grid, .parts-grid{
    grid-template-columns: 1fr 1fr !important; gap: 12px !important;
  }

  /* ---------- ویزارد / شبیه‌ساز تیونینگ ---------- */
  .wizard-shell{
    border-radius: 20px !important;
    padding: 16px 12px !important;
    margin-left: 0 !important; margin-right: 0 !important;
  }
  .wizard-tabs{ gap:6px !important; }
  .wizard-tab{ font-size: 11.5px !important; padding: 10px 6px !important; }
  .wizard-tab .tab-num{ width:22px !important; height:22px !important; font-size:11px !important; }

  /* ============================================================
     نوار پایینِ اپ (Bottom Tab Bar)
     ============================================================ */
  .app-bottom-nav{
    display: flex !important;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 960;
    height: calc(var(--app-nav-h) + var(--app-safe-b));
    padding-bottom: var(--app-safe-b);
    align-items: stretch;
    justify-content: space-between;
    background: color-mix(in srgb, var(--bg-surface, #10161f) 92%, transparent);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid var(--border-color, rgba(255,255,255,.08));
    box-shadow: 0 -8px 26px rgba(0,0,0,.28);
  }
  /* دو گروهِ کناری، مساوی — تا تبِ تیونینگ دقیقاً وسط بیفتد */
  .app-bottom-nav .nav-side{
    flex: 1 1 0;
    display: flex;
    align-items: stretch;
    justify-content: space-evenly;
  }
  .app-bottom-nav .tab{
    flex: 1 1 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 3px;
    text-decoration: none;
    color: var(--text-secondary, #8b98a8);
    font-size: 10.5px; font-weight: 700;
    letter-spacing: .1px;
    position: relative;
    transition: color .18s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .app-bottom-nav .tab i{ font-size: 19px; line-height: 1; }
  .app-bottom-nav .tab.active{ color: var(--app-blue); }
  /* خطِ اندیکاتورِ بالای تب حذف شد (طبق درخواست) */

  /* تبِ وسط (تیونینگ): بزرگ‌تر، کاملاً گرد، آبی و بدونِ گلوی نیونی */
  .app-bottom-nav .tab-center{
    flex: 0 0 auto;
    transform: translateY(-20px);
    color:#fff;
  }
  .app-bottom-nav .tab-center .fab{
    /* دایره‌ی کاملاً ثابت — روی هیچ گوشی‌ای بیضی نمی‌شود */
    width: 62px !important; height: 62px !important;
    min-width: 62px !important; min-height: 62px !important;
    max-width: 62px !important; max-height: 62px !important;
    flex: 0 0 62px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
    display:flex; align-items:center; justify-content:center;
    background: linear-gradient(150deg, #4fc3f2, #1d8ed1);
    box-shadow: 0 5px 14px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.28); /* بدونِ نیون */
    border: 4px solid var(--bg-surface, #10161f);
    margin-bottom: 3px;
  }
  /* تبِ وسط خودش هم جمع نشود */
  .app-bottom-nav .tab-center{ min-width: 66px; }
  .app-bottom-nav .tab-center .fab i{ font-size: 26px; color:#fff; }
  .app-bottom-nav .tab-center span{ color: var(--app-blue); font-weight: 800; }

  /* ============================================================
     مودال‌های فوتر (سوالات متداول / قوانین) — دیگر از صفحه بیرون نزنند
     ============================================================ */
  .custom-modal{
    position: fixed !important;
    top: 50% !important; left: 50% !important; right:auto !important;
    transform: translate(-50%, -50%) scale(.96) !important;
    width: 92vw !important; max-width: 460px !important;
    max-height: 82vh !important;
    margin: 0 !important;
    display: flex !important; flex-direction: column !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
  }
  .custom-modal.is-active,
  .custom-modal.active,
  .custom-modal.show,
  .custom-modal.open{
    opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
    transform: translate(-50%, -50%) scale(1) !important;
  }
  .custom-modal .modal-body{
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
  }
  .custom-modal .modal-header{ flex: 0 0 auto; }

  /* ============================================================
     فرم‌های ورود/ثبت‌نام و پنل کاربری با حسِ اپ
     ============================================================ */
  .auth-wrapper, .auth-card, .login-card, .register-card,
  .account-shell, .dashboard-shell, .panel-shell{
    width: 100% !important;
    max-width: 100% !important;
    margin: 14px auto !important;
    border-radius: 18px !important;
  }
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="password"], input[type="number"], input[type="search"],
  select, textarea{
    font-size: 16px !important;          /* جلوگیری از زوم خودکار iOS */
    border-radius: 12px !important;
    padding: 13px 14px !important;
  }
  .btn-primary, .btn-ghost, button[type="submit"]{
    border-radius: 12px !important;
  }
  form .btn-primary, form button[type="submit"]{
    width: 100%;
  }

  /* گاراژ و کارت‌های تک‌ستونه */
  [style*="grid-template-columns: repeat(auto-fill"]{
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   نوار پایین فقط در موبایل دیده می‌شود
   ============================================================ */
.app-bottom-nav{ display: none; }

/* ============================================================
   فوترِ نو + دکمه‌ی دانلود اندروید (همه‌ی اندازه‌ها)
   ============================================================ */
.app-download{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 13px;
  border-radius: 12px;
  text-decoration: none;
  background: linear-gradient(135deg, rgba(54,180,233,.14), rgba(54,180,233,.05));
  border: 1px solid rgba(54,180,233,.32);
  color: var(--text-primary, #eaf1f8);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  max-width: 250px;
}
.app-download:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(54,180,233,.18);
  border-color: rgba(54,180,233,.55);
}
.app-download .ad-icon{
  width: 36px; height: 36px; flex:0 0 auto;
  border-radius: 10px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(145deg, #3ddc84, #2bb673);
  color:#04120a; font-size: 19px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
.app-download .ad-text{ display:flex; flex-direction:column; line-height:1.35; text-align:right; }
.app-download .ad-text small{ font-size: 10px; color: var(--text-secondary, #8b98a8); font-weight:600; }
.app-download .ad-text b{ font-size: 12.5px; font-weight: 800; white-space:nowrap; }

/* ---------- دکمه‌ی دانلود اندروید در هدر (همه اندازه‌ها) ---------- */
.header-apk{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 13px; border-radius:11px;
  font-size:12.5px; font-weight:800; text-decoration:none; white-space:nowrap;
  color: var(--text-primary, #eaf6ff);
  background: linear-gradient(135deg, rgba(54,180,233,.20), rgba(54,180,233,.08));
  border:1px solid rgba(54,180,233,.42);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.header-apk i{ font-size:15px; color:#3ddc84; }
.header-apk:hover{ transform: translateY(-1px); border-color: rgba(54,180,233,.72); box-shadow: 0 6px 16px rgba(54,180,233,.16); }
html[data-theme="light"] .header-apk{ color:#0f2b3a; }

/* ============================================================
   شیتِ «ارتباط با ما» (اکشن‌شیتِ پایین‌کشو) — فقط موبایل استفاده می‌شود
   ============================================================ */
.contact-sheet-backdrop{
  position: fixed; inset: 0; z-index: 970;
  background: rgba(0,0,0,.45);
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease;
}
.contact-sheet-backdrop.open{ opacity: 1; visibility: visible; }
.contact-sheet{
  position: fixed; left: 0; right: 0;
  bottom: calc(var(--app-nav-h) + var(--app-safe-b));
  z-index: 971;
  background: var(--bg-surface, #10161f);
  border-top: 1px solid var(--border-color, rgba(255,255,255,.09));
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -12px 34px rgba(0,0,0,.4);
  padding: 10px 16px calc(16px + var(--app-safe-b));
  /* به‌صورت پیش‌فرض کاملاً پنهان — فقط با کلیک روی «ارتباط با ما» باز می‌شود */
  transform: translateY(130%);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .25s ease, visibility .3s ease;
}
.contact-sheet.open{ transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; }
.contact-sheet .cs-handle{
  width: 42px; height: 4px; border-radius: 4px;
  background: var(--border-color, rgba(255,255,255,.2));
  margin: 4px auto 12px;
}
.contact-sheet .cs-item{
  display: flex; align-items: center; gap: 12px;
  padding: 15px 14px; margin-bottom: 8px;
  border-radius: 13px; text-decoration: none;
  color: var(--text-primary, #eaf1f8);
  font-size: 15px; font-weight: 700;
  background: var(--bg-card, rgba(255,255,255,.04));
  border: 1px solid var(--border-color, rgba(255,255,255,.06));
}
.contact-sheet .cs-item i{ color: var(--app-blue); font-size: 18px; width: 22px; text-align: center; }
.contact-sheet .cs-item.active{ border-color: rgba(54,180,233,.5); background: rgba(54,180,233,.08); }
.contact-sheet .cs-item:active{ transform: scale(.99); }

@media (max-width: 768px){
  .site-footer{ text-align: center !important; }
  .site-footer .footer-top{
    grid-template-columns: 1fr !important;
    gap: 26px !important;
    text-align: center !important;
    justify-items: center !important;
  }
  .site-footer .footer-col{ text-align: center !important; width: 100%; display: flex; flex-direction: column; align-items: center; }
  .site-footer .footer-col p{ text-align: center !important; }
  .site-footer .footer-col h4{ margin-bottom: 12px !important; }
  .site-footer .footer-col ul{ list-style: none !important; padding: 0 !important; margin: 0 !important; }
  .site-footer .footer-col ul li{ margin: 9px 0 !important; }
  .site-footer .footer-social{ justify-content: center !important; }
  .app-download{ margin: 6px auto 0 !important; }
  .site-footer .footer-bottom{
    text-align: center !important;
    padding-bottom: calc(var(--app-nav-h) + var(--app-safe-b) + 14px) !important;
  }
}

/* ============================================================
   صفحه‌ی «تماس با ما» — سرتیترِ بزرگ‌تر (دسکتاپ و موبایل) و فرمِ بازتر در موبایل
   ============================================================ */
.contact-page-wrapper .page-header h1{
  font-size: clamp(30px, 4.4vw, 44px) !important;
  margin-bottom: 8px !important;
}
.contact-form .form-group label{
  font-size: 15px !important;
  font-weight: 700 !important;
  display: block;
  margin-bottom: 8px !important;
}

@media (max-width: 768px){
  .contact-page-wrapper{ padding-left: 14px !important; padding-right: 14px !important; }
  .contact-page-wrapper .page-header h1{ font-size: 27px !important; }
  .contact-form-box{ padding: 20px 16px !important; }
  /* فیلدها زیر هم و با فاصله‌ی بیشتر */
  .contact-form .form-row{ display: flex !important; flex-direction: column !important; gap: 0 !important; }
  .contact-form .form-group{ margin-bottom: 20px !important; }
  .contact-form .form-group label{ font-size: 15.5px !important; margin-bottom: 10px !important; }
  .contact-form .field{ padding: 14px !important; }
  .contact-form .textarea-field{ min-height: 130px !important; }
  .contact-form .form-actions{ margin-top: 8px !important; }
}

/* ============================================================
   دکمه‌ی تنظیمات در هدر + کشوی تنظیمات (سمت چپ) — همه‌ی اندازه‌ها
   ============================================================ */
.header-settings-btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 13px; border-radius:11px; cursor:pointer; white-space:nowrap;
  font-size:12.5px; font-weight:800; font-family:inherit;
  color: var(--text-primary, #eaf1f8);
  background: var(--bg-card, rgba(255,255,255,.05));
  border:1px solid var(--border-color, rgba(255,255,255,.10));
  transition: border-color .15s ease, transform .15s ease;
}
.header-settings-btn i{ font-size:14px; color: var(--app-blue); }
.header-settings-btn:hover{ border-color: rgba(54,180,233,.55); transform: translateY(-1px); }

/* دکمه‌ی شناور سمت چپِ صفحه — گلسی و محو (فقط موبایل) */
.settings-fab{
  position: fixed; left: 0; top: 50%; transform: translateY(-50%);
  z-index: 940; cursor:pointer; padding:0;
  width: 30px; height: 42px;
  border: 1px solid rgba(255,255,255,.14); border-left:0;
  border-radius: 0 12px 12px 0;
  background: rgba(28,38,52,.40);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: rgba(255,255,255,.72); font-size:13px;
  box-shadow: 2px 3px 12px rgba(0,0,0,.2);
  display:flex; align-items:center; justify-content:center;
}
html[data-theme="light"] .settings-fab{ background: rgba(255,255,255,.5); color:#1d8ed1; border-color: rgba(15,23,32,.12); }
@media (min-width: 769px){ .settings-fab{ display:none !important; } }

.settings-overlay{
  position: fixed; inset:0; z-index: 979;
  background: rgba(0,0,0,.4);
  opacity:0; visibility:hidden; transition: opacity .25s ease, visibility .25s ease;
}
.settings-overlay.open{ opacity:1; visibility:visible; }

.settings-drawer{
  position: fixed; top:0; left:0; bottom:0; z-index: 980;
  width: 300px; max-width: 84vw;
  background: var(--bg-surface, #10161f);
  border-right: 1px solid var(--border-color, rgba(255,255,255,.08));
  box-shadow: 12px 0 34px rgba(0,0,0,.42);
  transform: translateX(-105%);
  transition: transform .3s cubic-bezier(.16,1,.3,1);
  display:flex; flex-direction:column;
}
.settings-drawer.open{ transform: translateX(0); }
.sd-header{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--border-color, rgba(255,255,255,.08)); }
.sd-title{ font-weight:800; font-size:15px; display:flex; align-items:center; gap:8px; color: var(--text-primary,#eaf1f8); }
.sd-title i{ color: var(--app-blue); }
.sd-close{ background:none; border:0; cursor:pointer; color: var(--text-secondary,#8b98a8); font-size:18px; width:32px; height:32px; border-radius:8px; }
.sd-close:hover{ color: var(--text-primary,#eaf1f8); background: var(--bg-card, rgba(255,255,255,.06)); }
.sd-body{ padding:14px; display:flex; flex-direction:column; gap:11px; overflow-y:auto; }
.sd-row{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-radius:12px; background: var(--bg-card, rgba(255,255,255,.04)); border:1px solid var(--border-color, rgba(255,255,255,.06)); }
.sd-row-label{ font-size:13.5px; font-weight:700; display:flex; align-items:center; gap:9px; color: var(--text-primary,#eaf1f8); }
.sd-row-label i{ color: var(--app-blue); }
.sd-theme-toggle{ width:40px; height:40px; border-radius:50%; cursor:pointer; font-size:15px; border:1px solid var(--border-color, rgba(255,255,255,.10)); background: var(--bg-base, #0b1017); color: var(--text-primary,#eaf1f8); display:inline-flex; align-items:center; justify-content:center; }
.sd-lang{ display:inline-flex; gap:3px; padding:3px; border-radius:10px; background: var(--bg-base, rgba(0,0,0,.2)); border:1px solid var(--border-color, rgba(255,255,255,.08)); }
.sd-lang a{ padding:5px 12px; border-radius:7px; font-size:12px; font-weight:800; text-decoration:none; color: var(--text-secondary,#8b98a8); }
.sd-lang a.active{ background: linear-gradient(180deg,#38bdf8,#1d8ed1); color:#fff; }
.sd-item{ display:flex; align-items:center; gap:11px; padding:13px 14px; border-radius:12px; text-decoration:none; font-size:14px; font-weight:700; color: var(--text-primary,#eaf1f8); background: var(--bg-card, rgba(255,255,255,.04)); border:1px solid var(--border-color, rgba(255,255,255,.06)); }
.sd-item i{ color: var(--app-blue); width:20px; text-align:center; }
.sd-download .sd-dl-icon{ width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; background: linear-gradient(145deg,#3ddc84,#2bb673); }
.sd-download .sd-dl-icon i{ color:#04120a; }
.sd-logout, .sd-logout i{ color:#ff5a5a !important; }
/* آیکونِ تم داخل کشو */
.sd-theme-toggle .light-icon, .sd-theme-toggle .dark-icon{ font-size:15px; }
html[data-theme="dark"] .sd-theme-toggle .dark-icon{ display:none; }
html[data-theme="dark"] .sd-theme-toggle .light-icon{ display:inline-block; }
html:not([data-theme="dark"]) .sd-theme-toggle .light-icon{ display:none; }
html:not([data-theme="dark"]) .sd-theme-toggle .dark-icon{ display:inline-block; }

/* فوتر: باکس دانلود کوچک‌تر و هماهنگ‌تر با سایت */
.app-download{ max-width: 215px; padding: 8px 11px; gap: 9px; border-radius: 11px; }
.app-download .ad-icon{ width: 30px; height: 30px; font-size: 16px; border-radius: 9px; }
.app-download .ad-text small{ font-size: 9.5px; }
.app-download .ad-text b{ font-size: 12px; }

/* ============================================================
   داشبورد کاربر: سایدبارِ سرتاسری و تمیز + اصلاح فاصله‌ها در موبایل
   ============================================================ */
@media (min-width: 993px){
  .dashboard-layout{ align-items: stretch !important; }
  .dashboard-layout .sidebar-right{
    align-self: stretch !important;
    background: var(--card-bg, rgba(255,255,255,.03)) !important;
    border: 1px solid var(--card-border, rgba(255,255,255,.08)) !important;
    border-radius: 20px !important;
    padding: 20px !important;
    gap: 16px !important;
    position: sticky; top: 100px;
  }
  .dashboard-layout .sidebar-right .sidebar-card{
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    padding: 0 !important; backdrop-filter: none !important;
  }
  .dashboard-layout .sidebar-right .sidebar-card + .sidebar-card{
    border-top: 1px solid var(--card-border, rgba(255,255,255,.08)) !important;
    padding-top: 16px !important;
  }
}

@media (max-width: 768px){
  /* پنل کاربری در موبایل:
     ترتیب = کارتِ پروفایل (مهم‌ترین) بالا ← محتوای اصلی ← منو/تنظیمات پایین.
     با display:contents کارت‌های داخلِ سایدبار مستقیماً قابلِ ترتیب‌دهی می‌شوند. */
  .dashboard-layout{
    display: flex !important;
    flex-direction: column !important;
    padding: 12px 12px 0 !important;
    margin: 0 auto 18px auto !important;
    gap: 14px !important;
  }
  .dashboard-layout .sidebar-right{ display: contents !important; }
  .dashboard-layout .user-profile-widget{ order: 1 !important; }
  .dashboard-layout .dashboard-main{ order: 2 !important; }
  .dashboard-layout .sidebar-card:not(.user-profile-widget){ order: 3 !important; }

  /* کارت‌ها جمع‌وجور */
  .dashboard-layout .sidebar-card{ padding: 16px !important; border-radius: 16px !important; }
  .dashboard-layout .user-profile-widget{ padding: 16px !important; margin: 0 !important; }
  .dashboard-layout .avatar-box{ width: 58px !important; height: 58px !important; font-size: 24px !important; margin: 0 auto 10px !important; }
  .dashboard-layout .user-profile-widget h3{ font-size: 16px !important; }
  .dashboard-layout .user-profile-widget p{ font-size: 12.5px !important; }
  .dashboard-layout .sidebar-nav-item{ padding: 12px 12px !important; }

  /* محتوای اصلی */
  .dashboard-main .welcome-card{ padding: 18px !important; }

  /* آمار: تک‌ستونه و جمع‌وجور تا هیچ کارتی از صفحه بیرون نزند */
  .dashboard-main .stats-grid{ grid-template-columns: 1fr !important; gap: 12px !important; margin-top: 16px !important; }
  .dashboard-main .stat-card{ padding: 16px 18px !important; gap: 14px !important; }
  .dashboard-main .stat-icon{ width: 48px !important; height: 48px !important; min-width: 48px !important; font-size: 22px !important; }
  .dashboard-main .stat-card .stat-info span{ font-size: 20px !important; }

  .dashboard-main .tuning-grid{ grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
}

/* ============================================================
   راند ۳ — اصلاحِ فاصله‌ها، نمایشِ نوار ویژگی‌ها در موبایل، فاصله‌ی دکمه‌ی دانلودِ فوتر
   ============================================================ */
/* فوتر: فاصله‌ی مناسبِ دکمه‌ی دانلود از متن‌های اطراف */
.footer-brand-col .app-download{ margin-top: 16px !important; margin-bottom: 18px !important; }

@media (max-width: 768px){
  /* صفحه‌های ورود/ثبت‌نام: حذفِ فاصله‌ی عمودیِ زیاد (کارت می‌آید بالا) */
  .auth-wrapper{
    min-height: auto !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 16px 14px 26px !important;
  }
  .auth-box{ margin: 0 auto !important; }

  /* نوارِ ویژگی‌ها (۳ چیپ) روی موبایل هم نمایش داده شود تا زیرِ هدر خالی نماند */
  .quick-features-bar{ display: block !important; padding: 8px 0 6px !important; margin: 0 !important; }
  .quick-features-bar .features-wrapper{
    display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important;
  }
  .quick-features-bar .feature-item{
    width: 100% !important; justify-content: center !important;
    padding: 12px 14px !important; margin: 0 !important;
  }

  /* کاهشِ فاصله‌ی بینِ سکشن‌ها و المان‌ها */
  .hero{ padding-bottom: 6px !important; }
  .banner-slider{ padding-top: 4px !important; padding-bottom: 12px !important; }
  #wizard{ min-height: auto !important; padding-top: 4px !important; }
  #relatedPostsSection{ padding-top: 6px !important; padding-bottom: 40px !important; }
  .footer-brand-col .app-download{ margin: 14px auto !important; }
}

/* ============================================================
   راند ۴ — دسکتاپ: پاپ‌آپ‌های فوتر (سوالات/قوانین) دقیقاً وسط صفحه باز شوند
   ============================================================ */
@media (min-width: 769px){
  .custom-modal{
    position: fixed !important;
    top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important;
    margin: 0 !important;
    transform: translate(-50%, -48%) scale(.96) !important;
  }
  .custom-modal.active,
  .custom-modal.is-active,
  .custom-modal.show,
  .custom-modal.open{
    transform: translate(-50%, -50%) scale(1) !important;
  }
}

/* راند ۴ — نوار ویژگی‌ها در موبایل: کنارِ هم (سه‌تایی) مثل دسکتاپ، تمام‌عرض با کمی فاصله از چپ/راست */
@media (max-width: 768px){
  .quick-features-bar{ padding-left: 12px !important; padding-right: 12px !important; }
  .quick-features-bar .container{ padding-left: 6px !important; padding-right: 6px !important; }
  .quick-features-bar .features-wrapper{
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }
  .quick-features-bar .feature-item{
    flex-direction: column !important;
    text-align: center !important;
    gap: 7px !important;
    padding: 12px 6px !important;
    width: 100% !important; min-width: 0 !important;
  }
  .quick-features-bar .feature-icon-box{ margin: 0 auto !important; }
  .quick-features-bar .feature-text h3{ font-size: 11px !important; line-height: 1.35 !important; }
}

/* ============================================================
   راند ۵ — کارت‌های انتخاب خودرو در موبایل: کلِ عکسِ ماشین دیده شود (نه بریده)
   ============================================================ */
@media (max-width: 768px){
  #carGrid .pick-tile .tile-img{
    object-fit: contain !important;   /* قبلاً cover بود و ماشین را می‌بُرید */
    height: 106px !important;
    padding: 8px !important;
    background: var(--bg-elevated, #1e293b) !important;
  }
  #carGrid .pick-tile .tile-badge{ height: 106px !important; }
}

/* ============================================================
   راند ۶ — تضمینِ نبودِ سرریزِ افقی در پنل کاربری (فرم تنظیمات حساب و ...)
   ============================================================ */
@media (max-width: 768px){
  .dashboard-layout{ overflow-x: hidden !important; }
  .dashboard-main, .dashboard-main .settings-card, .dashboard-main .welcome-card,
  .dashboard-main .stat-card, .dashboard-main .tuning-card{ max-width: 100% !important; box-sizing: border-box !important; }
  /* فیلدهای فرم هرگز از کارت بیرون نزنند */
  .dashboard-main input, .dashboard-main textarea, .dashboard-main select,
  .settings-card input, .settings-card textarea, .settings-card select,
  .form-control-custom{
    width: 100% !important; max-width: 100% !important; box-sizing: border-box !important;
  }
  .dashboard-main img, .dashboard-main table{ max-width: 100% !important; height: auto; }
  /* ایمیل/متن‌های بلند بشکنند و بیرون نزنند */
  .user-profile-widget p, .dashboard-main p, .dashboard-main h3,
  .dashboard-main span, .settings-card *{ overflow-wrap: anywhere; word-break: break-word; }
  .settings-card{ padding: 16px !important; }
}