@font-face{
  font-family:"Vazirmatn";
  src:url("fonts/Vazirmatn-Regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* === Patch: Search hint wrapping + dropdown visibility inside collapsible header-bottom === */
.header-search { flex-wrap: nowrap; }
.header-search .search-hint { white-space: nowrap; }

@media (min-width: 769px) {
  /* When categories dropdown is open, header-bottom must not clip the panel */
  .site-header.is-nav-dropdown-open .header-bottom {
    overflow: visible;
    max-height: 420px;
    pointer-events: auto;
  }
}
@font-face{
  font-family:"Vazirmatn";
  src:url("fonts/Vazirmatn-Medium.woff2") format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Vazirmatn";
  src:url("fonts/Vazirmatn-Bold.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

:root{
  --bg:#f8fafc;
  --surface:#ffffff;
  --surface-2:rgba(255,255,255,.72);
  --text-1:#0f172a;
  --text-2:rgba(15,23,42,.74);
  --muted:#94a3b8;
  --border:rgba(15,23,42,.10);
  --sky:#38bdf8;
  --sky-2:#2563eb;
  --lime:#a3e635;
  --orange:#f97316;
  --purple:#a78bfa;
  --focus:rgba(37,99,235,.46);
  --hover:rgba(15,23,42,.04);
  --r-sm:12px;
  --r-md:16px;
  --r-lg:22px;
  --shadow-sm:0 8px 20px rgba(15,23,42,.06);
  --shadow-md:0 14px 30px rgba(15,23,42,.08);
  --s-1:4px;
  --s-2:8px;
  --s-3:12px;
  --s-4:16px;
  --s-5:20px;
  --s-6:24px;
  --s-8:32px;
  --fs-1:.875rem;
  --fs-2:1rem;
  --fs-3:1.125rem;
  --fs-4:1.35rem;
  --fs-5:1.75rem;
  --lh:1.85
}
:where(a,button,input,select,textarea,[role="button"],[tabindex])
:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
  border-radius:12px
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto !important;
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important
  }
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box
}
html{
  font-size:12px;
  font-family:"Vazirmatn",-apple-system,BlinkMacSystemFont,sans-serif
}
body{
  font-family:"Vazirmatn",sans-serif;
  direction:rtl;
  background:var(--bg);
  color:var(--text-1);
  line-height:var(--lh);
  font-weight:400;
  overflow-x:hidden
}
button,input,select,textarea{
  font-family:inherit
}
h1,h2,h3,h4{
  font-weight:700;
  letter-spacing:-0.3px
}
a{
  text-decoration:none;
  color:inherit
}
img{
  max-width:100%;
  height:auto;
  display:block
}
.container{
  width:100%;
  margin:0 auto;padding-inline:20px
}
@media (min-width:1024px){
  .container{
    padding-inline:32px
  }
}
.btn{
  --btn-bg:var(--sky-2);
  --btn-fg:#fff;
  --btn-bd:transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:25px;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid var(--btn-bd);
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-size:.92rem;
  font-weight:900;
  cursor:pointer;
  user-select:none;
  transition:transform 160ms ease,box-shadow 160ms ease,filter 160ms ease,border-color 160ms ease;
  box-shadow:0 12px 26px rgba(37,99,235,.18)
}
.btn:hover{
  transform:translateY(-1px);
  filter:saturate(1.04);
  box-shadow:0 16px 34px rgba(15,23,42,.12)
}
.btn:active{
  transform:translateY(0);
  box-shadow:0 10px 22px rgba(15,23,42,.10)
}
.btn-primary{
  --btn-bg:linear-gradient(135deg,#fb923c,var(--orange));
  --btn-bd:rgba(249,115,22,.30);
  box-shadow:0 12px 26px rgba(249,115,22,.20)
}
.btn-outline{
  --btn-bg:rgba(255,255,255,.86);
  --btn-fg:var(--text-1);--btn-bd:rgba(15,23,42,.14);
  box-shadow:0 10px 22px rgba(15,23,42,.06);
  display: none
}
.btn-outline:hover{
  border-color:rgba(37,99,235,.35);
  box-shadow:0 14px 28px rgba(37,99,235,.12)
}
.product-media{
  width:100%;
  aspect-ratio:auto;
  border-radius:16px;
  overflow:hidden;
  background:rgba(56,189,248,.16)
}
.product-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block
}
.product-actions{
  display:flex;
  gap:10px;
  margin-top:10px;
  flex-wrap:wrap
}
.product-actions .btn{
    padding: 10px 3px;
    border-radius: 22px;
    height: 5px;
}
.cart-badge[hidden]{
  display:none
}

.site-header {
  background: #fff;
  border-bottom: 1px solid #2563eb;
  position: sticky;
  top: 0;
  z-index: 3000;
  box-shadow: 0 16px 45px rgba(15, 23, 42, 0.06);
}
.header-search{
  display:flex;
  align-items:center;
  gap:12px;
  padding:0px 31px;
  border:1px solid #dbeafe;
  border-radius:14px;
  background:#f8fafc;
  flex:1;
  min-width:240px;
  max-width:620px
}
.header-search .search-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:800;
  color:#0f172a;
  white-space:nowrap
}
.header-search .label-icon{
  color:#2563eb;
  font-size:1.1rem
}
.header-search input{
  border:none;
  background:transparent;
  outline:none;
  color:#0f172a;
  width:100%;
  padding:6px 0
}
.header-search input::placeholder{color:#94a3b8}
.auth-button:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 32px rgba(37,99,235,0.28)
}
.cart-button:hover{
  border-color:#2563eb;
  box-shadow:0 10px 24px rgba(15,23,42,0.08)
}
.header-bottom{
  margin:10px auto 0;
  padding-top:0px;
  position:relative;
  z-index:3100
}
.main-nav{
  position:relative;
  z-index:3200
}
.main-nav ul{
  list-style:none;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0;
  flex-wrap:wrap;
  overflow:visible;
  padding-bottom:0
}
.main-nav.main-nav--muted{
  margin-inline-start: 32px;
}

.nav-item{
  position:relative;
  flex:0 0 auto
}
.nav-link {
    display: inline-flex;
 } 
.nav-link:hover{
  background:#e2e8f0;
  color:#0f172a
}
.nav-dropdown-toggle{
  background:#2563eb;
  color:#fff;
  border-color:#2563eb;
  box-shadow:0 12px 26px rgba(37,99,235,0.15)
}
.nav-dropdown-toggle .chevron{
  font-size:0.8rem
}
.has-dropdown{
  position:relative;
  z-index:3300
}
.has-dropdown .dropdown-menu{
  position:absolute;
  right:0;
  top:calc(100%+10px);
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:12px;
  box-shadow:0 24px 50px rgba(15,23,42,0.08);
  padding:10px;
  min-width:240px;
  display:none;
  z-index:9999;
  overflow:visible
}
.has-dropdown.is-open .dropdown-menu{
  display:grid;
  gap:6px
}
.dropdown-menu a:hover{
  border-color:#2563eb;
  background:#e2e8f0
}
.bottom-nav{
  display:none
}
.bottom-sheet{
  display:none
}
@media(max-width:768px){
  .header-bottom{
    display:none
  }
  .header-top{
    align-items:stretch;gap:12px
  }
  .header-search{
    max-width:100%;
    min-width:0;
    padding:6px 10px;
    border-radius:12px;
    gap:10px;
    min-height:42px
  }
  .header-search input{
    font-size:.88rem;
    padding:4px 0
  }
  body{
    padding-bottom:78px
  }
  .bottom-nav{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:6px;
    position:fixed;
    left:12px;
    right:12px;
    bottom:12px;
    z-index:1200;
    border:1px solid rgba(15,23,42,0.10);
    border-radius:18px;
    box-shadow:0 18px 50px rgba(15,23,42,0.12);
    background:rgba(255,255,255,0.92);
    backdrop-filter:blur(10px)
  }
  @supports(padding:max(0px)){
    .bottom-nav{
      bottom:max(12px,env(safe-area-inset-bottom));
      display:none;
    }
    body{
      padding-bottom:max(78px,calc(env(safe-area-inset-bottom)+78px))
      }
  }
  .bn-item{
    appearance:none;
    border:0;
    background:transparent;
    display:grid;
    justify-items:center;
    gap:4px;
    padding:8px 6px;
    border-radius:14px;
    color:#0f172a;
    text-decoration:none;
    font-weight:800;
    cursor:pointer;
    position:relative;min-height:52px
  }
  .bn-item:active{
    transform:scale(0.98)
  }

  .bn-ico{
    font-size:1.25rem;
    line-height:1
  }
  .bn-txt{
    font-size:0.75rem;
    line-height:1;
    white-space:nowrap
  }
  .bn-badge{
    position:absolute;
    top:4px;
    right:18px;
    min-width:18px;
    height:18px;
    padding:0 5px;
    border-radius:999px;
    background:#f97316;
    color:#fff;
    font-size:0.7rem;
    font-weight:900;
    display:grid;
    place-items:center;
    box-shadow:0 10px 18px rgba(249,115,22,0.25)
  }
  .bottom-sheet{
    display:block;
    position:fixed;
    inset:0;z-index:1300;
    pointer-events:none;
    opacity:0;
    transition:opacity 200ms ease
  }
  .bottom-sheet.is-open{
    opacity:1;
    pointer-events:auto
  }
  .sheet-backdrop{
    position:absolute;
    inset:0;
    background:rgba(15,23,42,0.35)
  }
  .sheet-panel{
    position:absolute;
    left:12px;
    right:12px;
    bottom:12px;
    background:#fff;
    border-radius:20px;
    box-shadow:0 24px 60px rgba(15,23,42,0.16);
    border:1px solid rgba(15,23,42,0.08);
    transform:translateY(18px);
    transition:transform 220ms ease;
    overflow:hidden
  }
  .bottom-sheet.is-open .sheet-panel{
    transform:translateY(0)
  }
  @supports(padding:max(0px)){
    .sheet-panel{
      bottom:max(12px,env(safe-area-inset-bottom))
    }
  }
  .sheet-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px 14px 10px;
    border-bottom:1px solid rgba(15,23,42,0.08)
  }
  .sheet-title{
    font-weight:900;
    font-size:1rem
  }
  .sheet-close{
    border:0;
    background:#f1f5f9;
    color:#0f172a;
    width:38px;
    height:38px;
    border-radius:12px;
    cursor:pointer;
    font-weight:900
  }
  .sheet-body{
    padding:10px 14px 14px;
    display:grid;
    gap:10px
  }
  .sheet-link{
    display:block;
    padding:12px 12px;
    border-radius:14px;
    background:#f8fafc;
    border:1px solid rgba(15,23,42,0.06);
    font-weight:800
  }
  .sheet-link:active{
    transform:scale(0.99)
  }
}
@media(max-width:992px)and(min-width:769px){
  .header-top{
    flex-wrap:wrap;align-items:flex-start
    }
  .header-search{
    max-width:100%
  }
}
.header-search{
  position:relative
}
.sr-item:hover{
  background:rgba(56,189,248,.14)
}

.page-home .header-top--dk{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;padding-block:10px}
.page-home .brand-area--center{justify-content:center}
.page-home .brand-link{display:flex;align-items:center;text-decoration:none;padding:6px 10px;border-radius:16px}
.page-home .brand-link:hover{background:rgba(255,255,255,0.55)}.page-home .brand-name{font-size:22px;line-height:1.1;font-weight:900;letter-spacing:-0.2px}
.page-home .header-search:focus-within{opacity:1}
.page-home .main-nav .nav-item:first-child .nav-link,.page-home .main-nav .nav-item:first-child button{background:linear-gradient(135deg,rgba(163,230,53,0.35),rgba(56,189,248,0.25));border:1px solid rgba(15,23,42,0.10);box-shadow:0 10px 22px rgba(15,23,42,0.10);border-radius:14px;padding:10px 12px}
.page-home .main-nav .nav-item:first-child .nav-link:hover,.page-home .main-nav .nav-item:first-child button:hover{transform:translateY(-1px)}
.page-home .user-actions{display:flex;align-items:center;gap:10px}
.page-home .user-menu{position:relative}
.page-home .user-menu__trigger{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 10px;border-radius:999px;border:1px solid rgba(15,23,42,0.12);background:rgba(255,255,255,0.78);backdrop-filter:blur(10px);box-shadow:0 10px 22px rgba(15,23,42,0.10);cursor:pointer}
.page-home .user-menu__trigger:hover{background:rgba(255,255,255,0.92)}
.page-home .user-menu__avatar{width:32px;height:32px;border-radius:999px;object-fit:cover;border:2px solid rgba(56,189,248,0.35)}
.page-home .user-menu__label{font-weight:900;font-size:13px;white-space:nowrap}
.page-home .user-menu__credit-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(249,115,22,0.16);border:1px solid rgba(249,115,22,0.22);font-weight:900;font-size:12px;white-space:nowrap}
.page-home .user-menu__chevron{opacity:0.7;font-size:14px}
.page-home .user-menu__credit{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 12px;
  border-radius:14px;background:linear-gradient(135deg,rgba(249,115,22,0.18),rgba(163,230,53,0.14));
  border:1px solid rgba(15,23,42,0.08);
  margin-bottom:10px
}
  
.page-home .user-menu__credit .um-label{opacity:0.85;font-weight:800}
.page-home .user-menu__credit .um-value{font-weight:950}
.page-home .user-menu__identity{padding:6px 4px 10px;border-bottom:1px solid rgba(15,23,42,0.08);margin-bottom:10px}
.page-home .user-menu__link{width:100%;display:flex;align-items:center;justify-content:flex-start;gap:10px;padding:10px 12px;border-radius:12px;text-decoration:none;border:1px solid transparent;background:transparent;font:inherit;cursor:pointer}
.page-home .user-menu__link:hover{background:rgba(56,189,248,0.10);border-color:rgba(56,189,248,0.18)}

@media(max-width:768px){
  .page-home .header-top--dk{
    grid-template-columns:1fr auto
  }
  .page-home .header-right{
    display:none
  }
  .page-home .brand-name{
    font-size:18px
  }
}
.page-home .site-header .header-top--dk{
  display:flex;
  flex-direction:row-reverse;
  align-items:center;
  justify-content:space-between;
  gap:14px
}
.page-home .site-header .header-right--brand{
  display:flex;
  align-items:center;
  min-width:180px
}
.page-home .site-header .brand-link--dk{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none
}
.page-home .site-header .brand-logo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent !important;box-shadow:none !important;border:none !important;padding:0 !important
}

  
.site-header .brand-link:hover .brand-title .site-header .brand-link:focus-visible .brand-title {
    background-position: 100% 50%;
    filter: brightness(1.08);
    transform: translateY(-0.5px);
}

.site-header .brand-link:hover .brand-img,
.site-header .brand-link:focus-visible .brand-img {
    filter:
      drop-shadow(0 10px 22px rgba(15, 23, 42, 0.16))
      drop-shadow(0 0 16px rgba(56, 189, 248, 0.22));
    transform: translateY(-0.5px);
}


@media (prefers-reduced-motion: reduce) {
  .site-header .brand-title,
  .site-header .brand-img {
    transition: none !important;
  }
}
.page-home .site-header .header-center{
  flex:1 1 auto;max-width:640px
}

.page-home .site-header .header-search--muted input[type="search"]::placeholder{
  color:rgba(15,23,42,.45)
}
.page-home .site-header .header-search--muted:focus-within{
  border-color:rgba(14,165,233,.55);
  box-shadow:0 0 0 4px rgba(14,165,233,.12)
}
.page-home .primary-nav .nav-link{
  color:rgba(15,23,42,.62);
  font-weight:650
}
.page-home .primary-nav .nav-link:hover{
  color:rgba(15,23,42,.90)
}
.page-home .primary-nav .nav-item.has-dropdown>button{
  color:rgba(2,132,199,.98);
  background:rgba(14,165,233,.12);
  border:1px solid rgba(14,165,233,.30);
  border-radius:14px;
  padding:10px 12px;
  font-weight:850
}
.page-home .primary-nav .nav-item.has-dropdown>button:hover{
  background:rgba(14,165,233,.16);
  border-color:rgba(14,165,233,.40)
}
.page-home .user-actions{
  display:flex;align-items:center;gap:10px
}
.page-home .user-menu__trigger{
  background:rgba(148,163,184,.12);
  border:1px solid rgba(148,163,184,.35);
  border-radius:999px;padding:6px 8px;gap:8px
}
.page-home .user-menu__trigger:hover{
  background:rgba(148,163,184,.16)
}
.page-home .user-menu__trigger img{
  width:34px;
  height:34px;
  border-radius:999px;
  object-fit:cover;
  background:#fff
}
.page-home .user-menu__credit{
  background:linear-gradient(135deg,rgba(132,204,22,.18),rgba(14,165,233,.14));
  border:1px solid rgba(132,204,22,.30)
}
.page-home .user-menu__credit .um-value{
  font-weight:950
}
.muser-link:active{
  transform:translateY(1px)
}
.home-section{
  padding:20px 0
}

.section-title{
  font-size:1.35rem;
  font-weight:800;
  color:var(--text-1);
  text-align: center
}

.hero-grid{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:16px;
  align-items:stretch;
  grid-template-areas: "slider ads";
}
.post-slider{ grid-area: slider; }

@media (max-width: 768px){
  .hero-grid{
    grid-template-columns:1fr !important;
    grid-template-areas:
      "slider"
      "ads" !important;
  }
}
.post-slider{
  position: relative;
  padding: 0;
  width: 100%;
  background: transparent;
  border-radius: 18px;
  box-shadow: none;
  overflow: hidden;
  aspect-ratio: 3 / 2;
}

/* fills the box */
.post-slider .post-slides{
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
}

/* slide states: only translate, no opacity fade */
.post-slider .post-slide{
  position: absolute;
  inset: 0;
  transform: translateX(100%);      /* parked on the right */
  transition: transform .6s ease;
  visibility: hidden;
  pointer-events: none;
  z-index: 1;
}

.post-slider .post-slide.is-active{
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
  z-index: 3;
}

.post-slider .post-slide.is-exit-left{
  transform: translateX(-100%);
  visibility: visible;
  z-index: 2;
}

/* image */
.post-slider .post-slide__bg{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: inherit; /* فقط دور عکس خمیده */
}

/* title on top */
.post-slider .post-title{
  position: absolute;
  top: 14px;
  right: 14px;
  left: 14px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 14px;
  color: #fff;
  font-weight: 900;
  background: rgba(15,23,42,.38);
  backdrop-filter: blur(6px);
  text-shadow: 0 8px 18px rgba(0,0,0,.25);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  /* کنترل عرض متن برای اینکه خط‌ها قشنگ بشکنن */
  margin-left: auto;
  margin-right: auto;
  font-size: 2.5rem;
  line-height: 1.9;
}

.post-title .brand-word{
  font-weight: 900;
  background: linear-gradient(90deg, #38bdf8, #2563eb, #7c3aed);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap; /* بهسایار تنها نشکنه */
}


/* dots */
.post-slider .slider-dots{
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: flex;
  gap: 8px;
  z-index: 5;
}
.ads-rubik{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.ad-tile{
  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 12px 24px rgba(15,23,42,0.06);
}

.ad-tile img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.ad-tile:nth-child(2){
  background:linear-gradient(135deg,#fce7f3,#fef3c7)
}
.ad-tile:nth-child(3){
  background:linear-gradient(135deg,#cffafe,#e0e7ff)
}
.ad-tile:nth-child(4){
  background:linear-gradient(135deg,#dcfce7,#e9d5ff)
}
.ad-tile:hover{
  transform:translateY(-3px)
}
.ad-badge{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  font-size: 0.7rem;
  font-weight: 800;
  background: rgba(15,23,42,0.8);
  color: #fff;
  padding: 4px 8px;
  border-radius: 999px;
}

.ad-title{
  font-weight: 900;
  font-size: 1rem;
  color: #fff;
  line-height: 1.4;
}

.ad-sub{
  font-size: 0.85rem;
  color: rgba(255,255,255,0.85);
  margin-top: 4px;
}

.ad-overlay{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 14px;
  background: linear-gradient(
    to top,
    rgba(15,23,42,0.6),
    rgba(15,23,42,0.0) 60%
  );
}

/* Desktop / default (همون حالت شبکه‌ای) */
.category-circles{
  display:grid;
  grid-template-columns:repeat(8, minmax(0, 1fr));
  margin-inline: 50px;
}
.circle-card:hover{
  transform:translateY(-3px)
}
.double-banners{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px
}
.banner{
  border-radius:18px;
  min-height:160px;
  padding:18px;
  display:flex;
  align-items:flex-end;
  box-shadow:var(--shadow-md);
  overflow:hidden
}
.banner-a{
  background:linear-gradient(135deg,#60a5fa,#a7f3d0)
}
.banner-b{
  background:linear-gradient(135deg,#f472b6,#fde68a)
}
.banner-content{
  color:var(--text-1)
}
.banner-kicker{
  font-weight:900;opacity:0.85
}
.banner-title{
  font-size:1.25rem;
  font-weight:900;
  margin-top:6px
}
.banner-sub{
  color:rgba(15,23,42,0.8);
  margin-top:6px
}
.rail{
    background: linear-gradient(135deg, #e0e7ff, #fce7f3);
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
}
.rail--new{
  background:linear-gradient(135deg,#dcfce7,#cffafe)
}

.rail-head{
  border-radius:16px;
  padding:16px;
  display:grid;
  gap:8px;
  align-content:start
}
.rail-head--best {
    width: 100%;
    display: inline-flex;
    justify-content: space-between;}
.rail-head--new{
    width: 100%;
    display: inline-flex;
    justify-content: space-between;}

.rail-title{
  font-size:1.25rem;
  font-weight:900;
  color:var(--text-1)
}
.rail-sub{
  color:#334155;
  display: none
}
.rail-link{
  margin-top:6px;
  font-weight:900;
  color:#2563eb
}
.rail-track{
  display:flex;
  gap:12px;
  overflow-x:auto;
  padding-bottom:8px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch
}
.rail-track::-webkit-scrollbar{
  height:10px
}
.rail-track::-webkit-scrollbar-thumb{
  background:rgba(15,23,42,0.15);
  border-radius:999px
}
.product-card{
    min-width: 210px;
    background: linear-gradient(135deg, #ffffff, #f8fafc);
    border-radius: 16px;
    padding: 5px;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
    scroll-snap-align: start;
    display: grid;
    gap: 4px;
    border: 1px solid rgba(99, 102, 241, 0.10);
    position: relative;
}
.product-card--new{
  border:1px solid rgba(34,197,94,0.14);
  background:linear-gradient(135deg,#ffffff,#f0fdf4)
}
/* ردیف بالا: تخفیف سمت راست، ارائه‌دهنده سمت چپ (RTL) */
.product-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

/* درصد تخفیف: بزرگ‌تر و چشم‌گیرتر */
.product-off{
    position: absolute;
    bottom: 12px;
    left: 0px;
    width: 44px;
    height: 41px;
    font-size: 17px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px;
    gap: 0;
    border-radius: 0 0 22px 0;
    background: rgb(255 0 0 / 69%);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(15, 23, 42, 0.08);
    flex-direction: column;
}


.product-card .product-top {
    height: 0;
    margin: 0;
    padding: 0;
}
.product-card .product-provider {
    position: absolute;
    bottom: 48px;
    left: 0;
    width: 57px;
    height: 73px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    gap: 0;
    border-radius: 0 22px 30px 0;
    background: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 4px 9px 22px -7px rgba(19, 27, 46, 0.3);
    flex-direction: column;
}

.product-provider .product-logo{
    width: fit-content;
    height: 33px;
}
.product-provider .provider-name{
  padding: 2px;
  font-weight:900;
  font-size:0.88rem;
  color:rgba(15,23,42,0.80);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:110px;
}
/* موبایل: متن ارائه‌دهنده کمی کوچک‌تر و جمع‌وجورتر */
@media (max-width:768px){
  .product-off{
    font-size:0.92rem;
    padding:6px 10px;
  }
  .product-provider .provider-name{
    font-size:0.84rem;
    max-width:88px;
  }
}

/* ===== Deals Rail Theme (قرمز و متمایز) ===== */
.rail--deals{
  background: linear-gradient(135deg, #ffe1e3, #ffd0d0);
}

.rail-head--deals{
    width: 100%;
    display: inline-flex;
    justify-content: space-between;
}

.rail--deals .rail-link{
  color:#dc2626;
}


.product-name{
  font-weight:900;
  color:var(--text-1);
  font-size:0.95rem
}
/* ===== Product prices (FIXED: pure CSS) ===== */
.product-prices{
  display:flex;
  align-items:baseline;
  gap:10px;
  font-size: 16px;
}
.product-prices .price-new{
  font-weight:900;
  color:var(--text-1);
}
.product-prices .price-old{
  color:#64748b;
  text-decoration:line-through;
  font-size:14px;
}

/* ===== Popular centers ===== */
.section-head--centers{
  margin-bottom:12px;
}
.logo-rail{
  display:flex;
  gap:12px;
  overflow-x:auto;
  padding:6px 4px 10px;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
}
.logo-chip{
  min-width:120px;
  height:74px;
  background:#fff;
  border-radius:16px;
  box-shadow:0 10px 22px rgba(15,23,42,0.06);
  display:grid;
  place-items:center;
  scroll-snap-align:start;
  border:1px solid rgba(15,23,42,0.06);
}
.logo-chip img{
  width:66px;
  height:40px;
  object-fit:contain;
}

/* ===== About split ===== */
.home-section--about{
  padding:26px 0 34px;
}
.about-split{
  background:linear-gradient(135deg,#eef2ff,#dcfce7);
  border-radius:18px;
  padding-right:15%;
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:16px;
  align-items:center;
  box-shadow:var(--shadow-md);
}
@media (max-width: 768px){
  .about-split{
    grid-template-columns: 1fr;
  }

  .about-image{
    order: 1;
  }

  .about-text{
    order: 2;
  }
}


.about-text h2{
  font-size:1.4rem;
  font-weight:900;
  color:var(--text-1);
  margin-bottom:10px;
}
.about-text p{
    color: #334155;
    margin-bottom: 14px;
    max-width: 48ch;
    text-align: justify;
}
.about-image img{
  width:290px;
  object-fit:cover;
  border-radius:16px
}

.brand-img--plain2{
    height: 100px;
    display: block;
}
/* =====================================
   Ads Rubik – Mobile FINAL
   ===================================== */
@media (max-width: 768px){

  .hero-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    grid-template-areas:
      "slider"
      "ads";
  }

  .hero-grid .post-slider{
    order: 1;
    
  }

  .hero-grid .ads-rubik{
    order: 2;
  }
    .post-slider .post-title{
    position: static;
    border-radius: 0 0 18px 18px;
    background: #fff;
    color: #0f172a;
    backdrop-filter: none;
    text-shadow: none;
    padding: 14px 16px;
    font-size: 1.1rem;
    max-width: 100%;
    overflow-wrap: normal;
    text-align: center;
    max-width: 34ch;   /* موبایل بهتره باریک‌تر باشه */
    margin-left: auto;
    margin-right: auto;
    font-size: 1.2rem;
    line-height: 1.95;
  }

  .ad-title{
    font-size: 0.95rem;
  }
  .ad-sub{
    font-size: 0.8rem;
  }
}

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
@media(max-width:560px){
  .post-title{
    font-size:1.25rem
  }
}
.auth-card{
  max-width:520px;margin:0 auto;background:#fff;border-radius:18px;padding:18px;box-shadow:var(--shadow-md);border:1px solid rgba(15,23,42,0.06)
}
.auth-title{font-size:1.35rem;font-weight:900;color:var(--text-1)}
.auth-sub{margin-top:6px;color:var(--text-2);font-size:0.95rem}
.auth-form{margin-top:14px;display:grid;gap:12px}
.field{display:grid;gap:8px}
.field span{font-weight:700;color:var(--text-1);font-size:0.9rem}
.field input,.field select{width:100%;padding:10px 12px;border-radius:12px;border:1px solid rgba(15,23,42,0.14);background:#f8fafc;outline:none;font-family:inherit}
.field input:focus,.field select:focus{border-color:rgba(37,99,235,0.55);box-shadow:0 0 0 4px rgba(37,99,235,0.14)}
.auth-note{min-height:22px;font-weight:700;color:#b45309}
.auth-links{display:flex;gap:8px;justify-content:center;color:var(--text-2);font-size:0.9rem}
.auth-links .link{font-weight:900;color:#2563eb}
.cart-layout{display:grid;grid-template-columns:1.4fr 0.6fr;gap:14px;align-items:start}
.cart-summary{position:sticky;top:92px}
@media(max-width:768px){
  .cart-layout{
    grid-template-columns:1fr
  }
  .cart-summary{
    position:static;order:2
  }
  .cart-items{
    order:1
  }
}
.cat-circle{
  display:grid;
  place-items:center;
  gap:8px;
  padding:14px 10px;
  border-radius:18px;
  text-decoration:none;
}

.cat-circle:hover{transform:translateY(-1px)}
.cat-img{
  width:100px;
  height:100px;
  border-radius:50%;
  overflow:hidden;
  display:grid;
  place-items:center;
  box-shadow:0 10px 20px rgba(15,23,42,.10)
}





.cat-img img{width:100%;height:100%;object-fit:cover;display:block}
.cat-ico{display:none}
.cat-txt{font-weight:900;font-size:0.92rem;text-align:center;line-height:1.4}
/* تنظیم مجدد کلاس اصلی برای مدیریت فاصله و جهت‌دهی راست به چپ */
.services-filters {
    display: flex;
    gap: 20px; /* استفاده از gap برای فاصله گذاری زیبا بین عناصر */
    flex-wrap: wrap; /* اجازه می‌دهیم در موبایل بشکنند، اما در دسکتاپ فعلا همینطور است */
    margin: 24px 52px 18px; /* کمی تنظیم برای فضای بهتر */
    justify-content: center;
    align-items: center; /* تراز عمودی عناصر با ارتفاعات متفاوت */
    padding: 10px 0;
    border-top: 1px solid #eee; /* جداکننده ملایم بصری */
    border-bottom: 1px solid #eee;
}

/* استایل عمومی برای Input و Select در این بخش */
.services-filters input[type="search"],
.services-filters select {
    /* استایل پایه و مدرن برای فرم‌ها */
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 8px; /* گوشه‌های کمی گرد */
    font-size: 14px;
    color: #333;
    background-color: #fff;
    transition: border-color 0.3s, box-shadow 0.3s;
    
    /* راست‌چین بودن متن برای راست به چپ */
    text-align: right; 
}

/* بهبود ظاهر Input جستجو */
.services-filters input[type="search"] {
    min-width: 200px; /* حداقل عرض برای جستجو */
    flex-grow: 1.5; /* اجازه بزرگ شدن به فیلتر جستجو */
}

/* بهبود ظاهر Selectها */
.services-filters select {
    min-width: 150px; /* حداقل عرض برای سلکت‌ها */
    appearance: none; /* حذف استایل پیش‌فرض مرورگر برای آیکون فلش */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 10px center;
    background-size: 16px;
    padding-right: 35px; /* ایجاد فضا برای آیکون سفارشی */
    flex-grow: 1;
}

/* افکت هاور و فوکوس */
.services-filters input[type="search"]:focus,
.services-filters select:focus {
    border-color: #007bff; /* رنگ آبی برای فوکوس */
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
    outline: none;
}

/* تنظیم عرض سلکت‌ها بر اساس محتوا */
.services-filters select:nth-child(2) { /* مقطع */
    flex-grow: 1.2;
}
.services-filters select:nth-child(3) { /* مرتب‌سازی */
    flex-grow: 1;
}



/* --- استایل برای حالت دو ستونی در موبایل (توصیه شده برای زیبایی بیشتر) --- */
@media (max-width: 550px) {
    .services-filters {
        flex-direction: row; /* بازگشت به حالت افقی (ردیف) */
        flex-wrap: wrap; /* اجازه شکستن به سطر جدید */
        justify-content: space-around; /* توزیع فضا بین عناصر */
    }
    
    .services-filters input[type="search"],
    .services-filters select {
        /* عرض تقریبی برای دو ستون با کمی فاصله */
        width: calc(50% - 15px); 
    }

    .services-filters input[type="search"] {
        width: 100%; /* جستجو همیشه عرض کامل بگیرد */
        order: 1;
    }
    
    .services-filters select:nth-child(2),
    .services-filters select:nth-child(3) {
        width: calc(50% - 10px); /* دو سلکت در یک ردیف کنار هم */
        order: 2; /* هر دو در ردیف دوم قرار گیرند */
    }
}

#productsSearch{flex:1 1 280px;max-width:420px}
#productsCategory,#productsSort{flex:0 0 220px;max-width:240px}
.product-card--grid{min-width:0}
.product-meta{color:rgba(15,23,42,.72);font-weight:650;font-size:.9rem}

#productsCategory,#productsSort{flex:1 1 160px;max-width:100%}
@media(max-width:768px){
  .cat-img{
    width:56px;height:56px
  }
}
.dashboard-body{background:#f5f7fb}
.dashboard{display:flex;min-height:100vh}
.sidebar{width:240px;background:#1e293b;color:#fff;padding:1.5rem}
.sidebar-logo{font-size:1.3rem;font-weight:bold;margin-bottom:2rem}
.sidebar-menu li{padding:0.7rem 0;cursor:pointer;opacity:0.85}
.sidebar-menu li.active,.sidebar-menu li:hover{opacity:1}
.dashboard-main{flex:1;padding:2rem}
.dashboard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}
.subtitle{color:#64748b;font-size:0.9rem}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-bottom:2rem}
.stat-card{background:#fff;padding:1.5rem;border-radius:12px}
.stat-card span{font-size:1.6rem;font-weight:bold}
.panel{background:#fff;padding:1.5rem;border-radius:12px;margin-bottom:2rem}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:0.8rem;border-bottom:1px solid #e5e7eb}
.badge{padding:0.3rem 0.6rem;border-radius:6px;font-size:0.8rem}
.badge.success{background:#dcfce7;color:#166534}
.badge.warning{background:#fef9c3;color:#854d0e}
.btn-sm{padding:0.4rem 0.8rem;border:none;border-radius:6px;background:#4f46e5;color:#fff;cursor:pointer}
.tx-installments{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.tx-installment-row{display:flex;justify-content:space-between;gap:10px;background:rgba(255,255,255,0.6);border:1px solid rgba(15,23,42,0.08);border-radius:12px;padding:8px 10px;line-height:1.8}
.tx-installment-row span{color:rgba(15,23,42,.78);font-weight:650}
.tx-installment-row b{font-weight:1000;white-space:nowrap}
@media(max-width:768px){
  .dashboard{
    flex-direction:column
  }
  .sidebar{
    width:100%
  }
  .stats{
    grid-template-columns:1fr
  }
  .tx-installments{
    grid-template-columns:1fr
  }
}
.profile-page{background:#f8fafc}
.profile-layout{display:grid;gap:16px;padding:18px 0 24px}
.profile-hero{display:flex;align-items:center;justify-content:space-between;gap:12px;border-radius:18px}
.profile-identity{display:flex;align-items:center;gap:12px}
.profile-avatar-wrap{width:70px;height:70px}
.profile-avatar{width:70px;height:70px;border-radius:50%;border:3px solid #22c55e;object-fit:cover}
.profile-name{font-size:1.2rem;font-weight:900}
.profile-meta{color:rgba(15,23,42,.7);font-weight:700;display:flex;gap:8px;align-items:center}
.profile-meta--sub{color:rgba(15,23,42,.55);font-size:.9rem}
.profile-cta{display:flex;gap:8px;flex-wrap:wrap}
.credit-card{background:linear-gradient(135deg,#0ea5e9,#3b82f6);color:#fff;border-radius:18px}
.credit-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.credit-label{font-weight:800}
.credit-amount{font-size:2rem;font-weight:1000}
.credit-meta{opacity:.95;font-weight:700;margin-top:4px}
.credit-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.profile-actions-card .chip-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.chip-btn{padding:10px 14px;border-radius:12px;border:1px solid rgba(15,23,42,.12);background:rgba(15,23,42,.04);font-weight:800;cursor:pointer;text-decoration:none;color:inherit}
.card-desc{color:rgba(15,23,42,.7);font-weight:700;margin-top:10px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.card-title{font-weight:900}
.card-subtitle{color:rgba(15,23,42,.7);font-weight:700;font-size:.95rem}
.finances-card .transactions{margin-top:4px}
.tracker{margin-top:12px;border-radius:14px;border:1px solid rgba(15,23,42,.08);background:#fff;padding:10px}
.tracker-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-weight:800}
.policy-options{display:grid;gap:8px;margin-top:10px}
.policy-option{padding:10px;border-radius:12px;border:1px solid rgba(15,23,42,.12);background:rgba(15,23,42,.03);font-weight:800}
@media(max-width:768px){
  .profile-hero{
    flex-direction:column;align-items:flex-start
  }
  .profile-cta{
    width:100%
  }
  .credit-amount{
    font-size:1.6rem
  }
}
#bnAccountSheet .bn-sheet__head{display:flex;gap:12px;padding:12px 14px;align-items:center}
#bnAccountSheet .bn-sheet__avatar img{width:44px;height:44px;border-radius:999px;object-fit:cover;border:2px solid rgba(56,189,248,0.35);background:rgba(255,255,255,0.7)}
#bnAccountSheet .bn-sheet__name{font-weight:900;color:var(--text-900,#0f172a)}
#bnAccountSheet .bn-sheet__credit{margin-top:4px;display:flex;gap:8px;align-items:baseline;font-size:13px;color:rgba(15,23,42,0.75)}
#bnAccountSheet .bn-sheet__credit b{font-weight:900;color:var(--accent-orange,#f97316)}
#bnAccountSheet .bn-sheet__links{padding:8px 14px 4px;display:flex;flex-direction:column;gap:8px}
#bnAccountSheet .bn-sheet__link{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:10px 12px;border-radius:12px;border:1px solid rgba(15,23,42,0.10);background:rgba(255,255,255,0.7);text-decoration:none;color:var(--text-900,#0f172a)}
#bnAccountSheet .bn-sheet__logout{min-height:44px;padding:10px 12px;border-radius:12px;border:1px solid rgba(249,115,22,0.22);background:rgba(249,115,22,0.10);font-weight:900;cursor:pointer}
#bnAccountSheet .bn-sheet__safe{height:calc(10px+env(safe-area-inset-bottom,0px))}

.header-search--muted input::placeholder{color:color-mix(in oklab,var(--text)45%,white 55%)}
.header-search--muted .search-btn{width:34px;height:34px;border:0;border-radius:10px;background:transparent;cursor:pointer;display:grid;place-items:center;opacity:.75}
.header-search--muted .search-btn:hover{opacity:1}

.auth-trigger:focus-visible{
  outline:3px solid color-mix(in oklab,var(--orange)35%,transparent);
  outline-offset:2px
}
.auth-popover{
  position:absolute;
  top:calc(100%+10px);
  left:0;width:320px;
  background:color-mix(in oklab,white 92%,var(--sky)8%);
  border:1px solid color-mix(in oklab,var(--sky)20%,var(--border));
  border-radius:18px;
  box-shadow:0 18px 50px rgba(0,0,0,.12);
  padding:14px;
  z-index:9999
}
.auth-form .auth-row{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:10px
}
.auth-label{
  font-size:.85rem;
  color:color-mix(in oklab,var(--text)70%,white 30%)
}
.auth-input{
  height:44px;
  border-radius:14px;
  border:1px solid color-mix(in oklab,var(--text)12%,white 88%);
  padding:0 12px;
  background:white
}
.auth-input:focus-visible{
  outline:3px solid color-mix(in oklab,var(--sky)35%,transparent);
  outline-offset:2px
}
.auth-msg{
  min-height:18px;
  margin:4px 0 10px;
  font-size:.85rem;
  color:color-mix(in oklab,var(--text)70%,var(--purple)30%)
}
.auth-links{
  display:flex;
  justify-content:space-between;
  margin-top:10px;
  font-size:.9rem
}
.auth-links a{
  color:color-mix(in oklab,var(--text)60%,var(--sky)40%);
  text-decoration:none
}
.auth-links a:hover{
  color:var(--sky);text-decoration:underline
}
.user-menu__trigger{
  display:flex;align-items:center;
  gap:8px;
  height:44px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid color-mix(in oklab,var(--text)10%,white 90%);
  background:white;cursor:pointer
}
.user-menu__trigger:hover{
  box-shadow:0 10px 24px rgba(0,0,0,.08)
}
.user-menu__trigger .um-avatar{
  width:32px;
  height:32px;
  border-radius:999px;
  overflow:hidden;
  border:1px solid color-mix(in oklab,var(--text)10%,white 90%)
}
.user-menu__trigger img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block
}
.user-menu__dropdown{
  position:absolute;
  top:calc(100%+10px);
  left:0;width:260px;
  background:white;
  border:1px solid color-mix(in oklab,var(--text)10%,white 90%);
  border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.12);
  padding:10px;z-index:9999
}
.um-head{
  padding:10px;
  border-radius:14px;
  background:linear-gradient(135deg,color-mix(in oklab,var(--sky)18%,white 82%),color-mix(in oklab,var(--lime)14%,white 86%));
  margin-bottom:10px
}
.um-credit{
  font-weight:900;
  font-size:1.05rem;
  color:color-mix(in oklab,var(--orange)75%,var(--text)25%);
  margin-bottom:6px
}
.um-name{
  font-weight:900;
  margin-bottom:4px
}
.um-meta{
  font-size:.85rem;color:color-mix(in oklab,var(--text)65%,white 35%)
}
.user-menu__link{display:block;
  padding:10px 10px;
  border-radius:12px;
  text-decoration:none;
  color:color-mix(in oklab,var(--text)85%,black 15%)
}
.user-menu__link:hover{
  background:color-mix(in oklab,var(--sky)10%,white 90%)
}
.user-menu__logout{
  width:100%;
  height:42px;
  border-radius:12px;
  border:1px solid color-mix(in oklab,var(--orange)25%,var(--border));
  background:color-mix(in oklab,var(--orange)12%,white 88%);
  font-weight:900;cursor:pointer
}
.main-nav--muted .nav-link--muted:hover{
  color:color-mix(in oklab,var(--text)75%,var(--sky)25%)
}
.nav-link--cats{
  font-weight:900;color:color-mix(in oklab,var(--text) 80%, #8a94a6 20%);
  background:color-mix(in oklab,var(--bg) 65%, #e2e8f0 35%);
  padding:11px 16px;
  font-size:1.02rem
}
.nav-item.has-dropdown .dropdown-panel{
  border-radius:16px
}
@media(max-width:768px){
  .brand-title--grad{
    font-size:1.25rem}
  }
.auth-form--sheet{
  padding:6px 2px 2px
}
.um-head--sheet{
  margin-top:6px
}
.sheet-divider{
  height:1px;
  background:color-mix(in oklab,var(--text)10%,white 90%);
  margin:10px 0
}
html.bs-modal-open,body.bs-modal-open{
  overflow:hidden
}


/* ===== Step A: Header visual + layout (Desktop-first) ===== */
.site-header{background:rgba(255,255,255,.82);backdrop-filter:saturate(140%) blur(10px)}

.header-right--dk2{display:flex;align-items:center;justify-content:flex-end;gap:14px;flex-wrap:wrap}
.brand-link--plain:hover 
/* Make header title match footer style but slightly more prominent */
.site-header .brand-title--grad{font-size:1.55rem;line-height:1;font-weight:900;letter-spacing:-.2px;
  background:linear-gradient(90deg,var(--sky),var(--lime),var(--purple));
  -webkit-background-clip:text;background-clip:text;color:transparent}
/* Main nav: overall muted, but categories slightly higher contrast (existing .nav-cats) */
.main-nav a{color:rgba(51,65,85,.68)}
.main-nav a:hover{color:rgba(15,23,42,.92)}
/* Mobile: only logo + title in header; hide search + nav (will live elsewhere later) */
@media (max-width:768px){
  .header-search--muted{display:none !important}
  .main-nav{display:none !important}
  
    .site-header .brand-title--grad{font-size:1.35rem}
}

.auth-trigger:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(10,20,40,.12)}
.auth-trigger:active{transform:translateY(0)}

.search-input{width:100%;min-height:44px;padding:10px 14px;border-radius:14px;border:1px solid color-mix(in oklab,var(--text)10%,white 90%);background:color-mix(in oklab, var(--surface) 70%, #eef2f7 30%);color:color-mix(in oklab,var(--text) 70%, #6b7280 30%)}

.search-input::placeholder{color:#9aa4b2}

/* ---- Hotfix: in muted main-nav, dropdown toggle must also be muted (not primary blue) ---- */
.main-nav--muted .nav-dropdown-toggle{background:transparent !important;border-color:transparent !important;box-shadow:none !important;color:rgba(15,23,42,.55) !important;font-weight:900}
.main-nav--muted .nav-dropdown-toggle:hover{color:rgba(37,99,235,.85) !important;background:rgba(15,23,42,.04) !important}

/* Ensure dropdown panel is clickable above header layers */
.nav-item.has-dropdown{z-index:3400}

/* =========================
   Step C – Header/Auth polish + Responsive rules
   ========================= */

/* Header login button (desktop) */
.is-auth #headerAuthBtn{display:none !important;}

.auth-trigger:active{transform:translateY(0)}

/* Inline popover */
.auth-popover{
  width:min(320px, 92vw);
  margin-top:10px;
  border-radius:16px;
  border:1px solid rgba(124,58,237,.18);
  background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(248,250,252,.92));
  box-shadow:0 18px 44px rgba(17,24,39,.14);
  overflow:hidden;
}
.auth-form{padding:14px}
.auth-row{display:grid;gap:6px;margin-bottom:10px}
.auth-label{font-weight:700;font-size:.84rem;color:rgba(17,24,39,.72)}
.auth-input{
  height:44px;
  border-radius:12px;
  border:1px solid rgba(17,24,39,.14);
  background:rgba(255,255,255,.9);
  padding:0 12px;
  outline:none;
}
.auth-input:focus{
  border-color:rgba(124,58,237,.45);
  box-shadow:0 0 0 4px rgba(124,58,237,.16);
}
.auth-submit{width:100%;height:44px;border-radius:12px}

/* User menu (avatar + dropdown) */
.user-menu__trigger{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(17,24,39,.14);
  background:rgba(255,255,255,.84);
  box-shadow:0 10px 24px rgba(17,24,39,.08);
}
.um-avatar img{width:36px;height:36px;border-radius:999px;object-fit:cover}

.um-head{padding:12px 14px;border-bottom:1px solid rgba(17,24,39,.08)}
.um-credit{font-weight:900;color:rgba(234,88,12,.95);margin-bottom:6px}
.user-menu__link,.user-menu__logout{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;
  font-weight:700;
}
.user-menu__link:hover,.user-menu__logout:hover{background:rgba(124,58,237,.06)}

/* Main nav dropdown should open UNDER the categories button (not inside a box) */
.main-nav .nav-item.has-dropdown{position:relative}
.main-nav .dropdown-panel{
  position:absolute;
  inset-inline-start:0;
  top:calc(100% + 10px);
  z-index:3500;

  min-width: 260px;
  padding: 10px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.98));
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 20px 40px rgba(15,23,42,.12), 0 4px 12px rgba(15,23,42,.08);
}

/* Dropdown items layout (one item per line) */
.dropdown-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.dropdown-grid a{
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: color-mix(in oklab,var(--text) 88%, #64748b 12%);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,23,42,.06);
  white-space: nowrap;
}
.dropdown-grid a:hover{
  background: rgba(241,245,249,.92);
  border-color: rgba(15,23,42,.10);
}

/* Responsive: header shows only brand; auth/search/nav hidden */
@media (max-width: 768px){/* Explicit: never show desktop auth trigger on mobile */
  

  
  
  .brand-title--grad{font-size:1.2rem}
}

/* =========================
   Header tweaks: brand prominence + muted search icon on the right
   ========================= */

@media (max-width: 768px){
  /* Mobile header: show brand nicely */
    .site-header .brand-title--grad{font-size:1.28rem;font-weight:900;}
}

/* Mobile bottom-nav: make sure items are tappable */
@media (max-width: 768px){
  .bottom-nav .bn-item{
    min-height:56px
  }
}

#mobileAuthSheet .user-menu__dropdown{
  position: static;
  width: 100%;
  box-shadow: none;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.10);
  padding: 10px;
}

/* === StepF: Brand/Search tweaks (requested) === */
.page-home .site-header .brand-title{
  font-weight: 950;                 /* حس لوگویی‌تر */
  font-size: 1.6rem;
  line-height: 1.05;                /* به‌جای -4 */
  letter-spacing: -0.6px;           /* فشرده‌تر و لوگویی */
  font-family: "Vazirmatn", sans-serif;

  /* یک تکه نارنجی، شیک و خوانا */
  background: linear-gradient(180deg, #ff8a1d 0%, #f97316 55%, #d94d00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  /* ظرافت: عمق و تفکیک روی زمینه روشن */
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

.page-home .site-header .brand-img{
  width:45px;
  height:45px;
  object-fit:contain;
  display:block;
}

/* Muted search: icon right of "جستجو" (desktop) */

.header-search--muted .search-hint{
  position:absolute;
  right:38px;
  top:50%;
  transform:translateY(-50%);
  font-weight:300;
  font-size:0.92rem;
  color:rgba(51,65,85,0.58);
  pointer-events:none;
  user-select:none;
}

.header-search--muted input{
  padding-right:96px;
}

@media (min-width: 769px){
  .header-search--muted .search-btn{
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    width:18px;
    height:18px;
    border:none;
    background:transparent;
    padding:0;
    border-radius:0;
    color:rgba(51,65,85,0.72);
    opacity:1;
  }
  .header-search--muted .search-ico{
    width:18px;
    height:18px;
  }
}

/* Mobile: keep compact brand sizes */
@media (max-width: 768px){
  .page-home .site-header .brand-title{
    font-size:1.35rem;
  }
  .page-home .site-header .brand-img{
    width:44px;
    height:44px;
  }
  .header-search--muted .search-hint{display:none;}
  .header-search--muted input{padding-right:12px;}
}

/* A11y */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Auth modal (Desktop) */
.auth-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:clamp(16px,3vw,28px);
  background:rgba(15,23,42,.42);
  backdrop-filter:saturate(120%) blur(6px);
}
.auth-modal[hidden]{display:none}
.auth-modal__dialog{
  width:min(420px, 92vw);
  margin-top:clamp(10px, 6vh, 64px);
  background:rgba(255,255,255,.96);
  border:1px solid rgba(148,163,184,.35);
  border-radius:18px;
  box-shadow:0 24px 64px rgba(15,23,42,.22);
  overflow:hidden;
}
.auth-modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px 10px;
  border-bottom:1px solid rgba(148,163,184,.28);
}
.auth-modal__title{
  font-weight:800;
  color:rgba(15,23,42,.92);
  letter-spacing:-.2px;
}
.auth-modal__close{
  width:38px;height:38px;
  border:none;
  border-radius:12px;
  background:rgba(148,163,184,.18);
  color:rgba(51,65,85,.9);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:transform .12s ease, background .12s ease;
}
.auth-modal__close:hover{background:rgba(148,163,184,.24)}
.auth-modal__close:active{transform:scale(.98)}
@media (prefers-reduced-motion: reduce){
  .auth-modal__close{transition:none}
}

body.modal-open{overflow:hidden}.auth-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 15px;
  border-radius: 19px;
  border: 1px solid rgba(17, 24, 39, 0.14);
  background: linear-gradient(219deg, rgb(251 137 49), rgb(250 137 49));
  box-shadow: 0 10px 24px rgba(17, 24, 39, 0.08);
  font-weight: bold;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  color: #fff;
}

.auth-ico {
  font-size: 2rem;
  color: #fff;
}

/* === Desktop: auto-collapse header bottom on scroll (Step J) === */
@media (min-width: 769px){
  /* منو در حالت عادی دیده می‌شود */
  .site-header .header-bottom{
    transition: transform .18s ease;
    will-change: transform;
  }

  /* وقتی از بالای صفحه دور شدی، منو کامل می‌رود */
  .site-header.is-menu-away-top .header-bottom{
    transform: translateY(-110%);
    pointer-events: none;
  }

  /* وقتی dropdown باز است، منو باید دیده شود */
  .site-header.is-nav-dropdown-open .header-bottom{
    transform: translateY(0) !important;
    pointer-events: auto;
  }
}

/* ===== Step J2: Header-bottom pro collapse + text-only nav + underline hover ===== */
@media (min-width: 769px) {
  .header-bottom {
    margin: 10px auto 0;
    padding-top: 0px;
    padding-bottom: 0px;
  }
/* Make header-bottom nav items text-like (no boxes), but still tappable */
  .header-bottom .nav-link {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 10px 10px;
    line-height: 1.1;
  }

  /* Professional hover: underline at bottom edge */
  .header-bottom .nav-link:hover,
  .header-bottom .nav-link:focus-visible {
    box-shadow: inset 0 -2px 0 rgba(14, 165, 233, 0.85) !important;
    outline: none;
  }

  /* Cats emphasis: bigger + bolder + slightly darker + same style family */
  .header-bottom .nav-link--cats,
  .header-bottom .nav-dropdown-toggle.nav-link--cats {
    font-weight: 800;
    font-size: 1.05rem;
    color: rgba(15, 23, 42, 0.86);
  }

  /* Dropdown panel items: one per line, clean */
  .dropdown-panel .dropdown-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  .dropdown-panel .dropdown-grid a {
    display: flex !important;
    align-items: center;
    width: 100% !important;
    white-space: nowrap;
  }
}




/* Mobile: تبدیل به اسکرول افقی */
@media (max-width: 768px){
  .category-circles{
    display:flex !important;
    gap:12px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    padding:6px 2px 12px;
    margin-inline:-6px;   /* کمی فضای نفس برای اسکرول */
    padding-inline:6px;
  }

  .category-circles .cat-circle{
    flex:0 0 auto !important;
    width:120px;          /* اندازه آیتم‌ها در موبایل */
    scroll-snap-align:start;
  }

  .category-circles::-webkit-scrollbar{
    height:8px;
  }
  .category-circles::-webkit-scrollbar-thumb{
    background:rgba(15,23,42,0.18);
    border-radius:999px;
  }
}

/* Popular centers: center on desktop, rail on mobile */
@media (min-width: 769px){
  .logo-rail{
    justify-content: center;
    flex-wrap: wrap;
    overflow: visible;
    scroll-snap-type: none;
  }
}


/* === Header layout single source of truth (desktop + mobile) === */
.site-header .header-top--dk2{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:nowrap;
}

.site-header .header-top .container{
  width:100%;
  max-width:none;
  padding-inline:16px;
  display:flex;
  align-items:center;
}

/* Mobile safety: keep header one-line */
@media (max-width:768px){
  .site-header .header-top--dk2{flex-wrap:nowrap;}
  .site-header .header-right--dk2,
  .site-header .header-left--dk2{min-width:0;}
}

/* === Mobile: force header split one-line (left/right 50%) === */
@media (max-width: 768px){
  .site-header .header-top--dk2{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 0px !important;
  }
  .site-header .header-right--dk2,
  .site-header .header-left--dk2{
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    min-width: 0 !important;
  }
  .auth-ico {
    font-size: 2rem;
    display: none;
    color: #fff;
  }
  /* RTL intention: brand right, auth left */
  .site-header .header-right--dk2{ justify-content: flex-start !important; }
  .site-header .header-left--dk2{ justify-content: flex-end !important; }
}

@media (max-width: 768px){

  /* اسلایدر دیگر نسبت 3:2 قفل نباشد، طبیعی شود */
  .post-slider{
    min-height: 340px;
  }

  /* اسلاید به کارت عمودی تبدیل می‌شود */
  .post-slider .post-slide{
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
  }

  .post-slider .post-slide.is-active{
    transform: translateX(0);
  }

  /* تصویر فقط بخش بالایی کارت */
  .post-slider .post-slide__bg{
    height: 220px;
    border-radius: 18px 18px 0 0;
  }

  /* متن از روی عکس خارج می‌شود */
  .post-slider .post-title{
    position: static;
    border-radius: 0 0 18px 18px;
    background: #fff;
    color: #0f172a;
    backdrop-filter: none;
    text-shadow: none;
    padding: 14px 16px;
    font-size: 1.1rem;
    line-height: 1.8;
  }

  /* متن و تصویر حس یک کارت واحد داشته باشند */
  .post-slider .post-slide{
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
  }

  /* دات‌ها کمی پایین‌تر بیایند */
  .post-slider .slider-dots{
    bottom: 10px;
  }
}
@media (min-width: 769px){
  .post-slider .post-title{
    white-space: nowrap;       /* همیشه یک خط */
    overflow: hidden;          /* اگر خیلی طولانی شد */
    text-overflow: ellipsis;   /* سه نقطه حرفه‌ای */

    font-weight: 900;
    line-height: 1.25;

    /* 👇 قلب ماجرا */
    font-size: clamp(1.2rem, 2.6vw, 2.7rem);
  }
}

/* === Products page grid: Mobile-first (SAFE FIX) === */
#productsGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) ; /* موبایل تک ستون */
  gap: 12px;
}

/* Tablet: 2 columns */
@media (min-width: 769px) and (max-width: 1024px){
  #productsGrid{
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
  }
}

/* Desktop: 3 columns */
@media (min-width: 1025px){
  #productsGrid{
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
  }
}

/* Filters wrap on mobile */
@media (max-width: 768px){
  #productsCategory,
  #productsSort{
    flex: 1 1 160px;
    max-width: 100%;
  }
}


/* === Upgrade: Header cart + cart drawer + user menu meta === */
.header-left--dk2{display:flex;align-items:center;gap:12px}
.header-cart{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:14px;border:1px solid rgba(20,41,74,.12);background:#fff;box-shadow:0 6px 18px rgba(20,41,74,.06);cursor:pointer}
.header-cart__ico{font-size:18px;line-height:1}
.header-cart__badge{position:absolute;top:-6px;left:-6px;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--orange,#ff7a00);color:#fff;font-size:12px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}

.user-menu__dropdown .um-credit{font-weight:900;font-size:14px;line-height:1.2;margin-bottom:6px}
.user-menu__dropdown .um-sub{font-size:12px;color:rgba(20,41,74,.72);margin-top:4px}

.cart-drawer{position:fixed;inset:0;z-index:10000}
.cart-drawer__backdrop{
  position:absolute;inset:0;
  background:rgba(0,0,0,.35)
}
/* پنل: روی دسکتاپ کوچکتر + با فاصله از بالا/پایین */
.cart-drawer__panel{
  position:absolute;
  top:12px; bottom:12px;
  left:12px; right:auto;
  height:auto;
  width:min(360px,92vw);
  background:#fff;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  display:flex;flex-direction:column;
  border-radius:18px;
  overflow:hidden;
}
.cart-drawer__head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid rgba(20,41,74,.08)}
.cart-drawer__title{font-weight:900}
.cart-drawer__close{width:36px;height:36px;border-radius:12px;border:1px solid rgba(20,41,74,.12);background:#fff;cursor:pointer;font-size:22px;line-height:1}
.cart-drawer__body{padding:12px 16px;overflow:auto;flex:1}
.cart-item{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid rgba(20,41,74,.08)}
.cart-item__meta{flex:1;min-width:0}
.cart-item__title{font-weight:800;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cart-item__price{font-size:12px;color:rgba(20,41,74,.72);margin-top:4px}
.cart-item__qty{display:flex;align-items:center;gap:8px}
.cart-qty-btn{width:32px;height:32px;border-radius:10px;border:1px solid rgba(20,41,74,.12);background:#fff;cursor:pointer}
.cart-qty-val{min-width:22px;text-align:center;font-weight:800}
.cart-item__remove{border:0;background:transparent;color:rgba(200,0,0,.9);cursor:pointer;font-weight:800}

/* فوتر سبد خرید: مطمئن شو دکمه‌ها زیر safe-area (آیفون) نمی‌افتند */
.cart-drawer__foot{
  padding:12px 16px;
  padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));
  border-top:1px solid rgba(20,41,74,.08);
  background:#fff
}
@media (max-width:768px){
  .cart-drawer__panel{
    top:0; bottom:0;
    left:0; right:0;
    width:100vw;
    border-radius:0;
  }
}


.cart-summary__row{display:flex;align-items:center;justify-content:space-between}
.cart-summary__hint{margin-top:6px;font-size:12px;color:rgba(20,41,74,.72)}
.cart-actions{display:flex;gap:10px;margin-top:12px}
.cart-actions .btn{flex:1}

@media (max-width:560px){
  .header-left--dk2{gap:10px}
  .header-cart{width:42px;height:42px;border-radius:14px}
}


/* ================================
   Checkout Overlay + Payment Modal
   (MVP – no new files)
================================== */
.checkout-overlay,
.pay-modal {
  position: fixed;
  inset: 0;
  z-index: 4000;     /* بالاتر از هدر/درآور */
  isolation: isolate; /* قطع stacking context های عجیب */
}

.checkout-overlay[hidden],
.pay-modal[hidden] { display: none !important; }

.checkout-overlay__backdrop,
.pay-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15,23,42,.54);
  backdrop-filter: blur(4px);
}

.checkout-overlay__panel,
.pay-modal__panel {
  position: fixed; /* ✅ مهم */
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: min(980px, calc(100% - 24px));
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  max-height: calc(100dvh - 60px); /* ✅ بهتر از 100vh برای موبایل */
  display: flex;
  flex-direction: column;
  z-index: 20001; /* یک لایه بالاتر از بک‌دراپ */
}
@media (max-width: 768px) {
  .checkout-overlay__panel,
  .pay-modal__panel {
    top: 0;
    left: 0;
    transform: none;
    width: 100vw;
    max-height: 100dvh;
    border-radius: 0;
  }
}
.checkout-overlay__panel,
.pay-modal__panel{
  padding-bottom: env(safe-area-inset-bottom, 0px);
}



.pay-modal__panel {
  width: min(520px, calc(100% - 24px));
}

.checkout-head,
.pay-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(56,189,248,.12), rgba(255,255,255,0));
}

.checkout-head__title,
.pay-head__title {
  font-weight: 800;
  font-size: 1.05rem;
}

.checkout-head__close,
.pay-head__close {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.9);
  cursor: pointer;
  line-height: 1;
  font-size: 22px;
}

.checkout-body { padding: 16px; overflow: auto; }

.checkout-grid {
  display: grid;
  grid-template-columns: 1.35fr .95fr;
  gap: 16px;
}

.checkout-card {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px;
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow-sm);
}

.checkout-card__title {
  font-weight: 800;
  margin-bottom: 10px;
}

.checkout-items { display: grid; gap: 10px; }

.checkout-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: rgba(15,23,42,.02);
}

.checkout-item__name { font-weight: 700; }
.checkout-item__meta { color: var(--text-2); font-size: .9rem; margin-top: 2px; }
.checkout-item__qty { color: var(--text-2); font-size: .9rem; }
.checkout-item__price { font-weight: 800; white-space: nowrap; }

.checkout-totals { margin-top: 10px; display: grid; gap: 8px; }
.checkout-row { display: flex; justify-content: space-between; gap: 12px; }
.checkout-row strong { font-weight: 900; }

.checkout-discount {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

.checkout-msg {
  margin-top: 20px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid rgba(56,189,248,.35);
  background: rgba(56,189,248,.12);
  color: var(--text-1);
}

.checkout-card--credit {
  background: linear-gradient(135deg, rgba(163,230,53,.18), rgba(56,189,248,.10));
}

.checkout-credit { display: flex; align-items: baseline; gap: 8px; }
.checkout-credit__value {
  font-size: 1.9rem;
  font-weight: 900;
  letter-spacing: .2px;
}
.checkout-credit__unit { color: var(--text-2); font-weight: 700; }

.checkout-remaining {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--text-1);
}
.checkout-remaining strong { font-weight: 900; }

.checkout-paymethod { display: grid; gap: 10px; margin-bottom: 10px; }

.radio { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.radio input { accent-color: var(--sky-2); }

.btn-block { width: 100%; justify-content: center; }

.installments-title { font-weight: 800; margin: 6px 0 10px; }
.installments { display: grid; gap: 10px; }
.plan {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 12px;
  background: rgba(255,255,255,.9);
  cursor: pointer;
}
.plan.is-selected {
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 0 0 3px rgba(37,99,235,.16);
}
.plan__title { font-weight: 900; }
.plan__meta { margin-top: 4px; color: var(--text-2); font-size: .9rem; }

.installments-preview {
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px dashed rgba(15,23,42,.18);
  background: rgba(15,23,42,.02);
  color: var(--text-1);
}

.pay-form { padding: 16px; display: grid; gap: 12px; }
.pay-row { display: grid; gap: 6px; }
.label { font-size: .9rem; color: var(--text-2); font-weight: 700; }
.pay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pay-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; }
.pay-hint { color: var(--text-2); font-size: .9rem; }

@media (max-width: 860px) {
  .checkout-grid { grid-template-columns: 1fr; }
  .checkout-overlay__panel { top: 12px; max-height: calc(100vh - 24px); }
}

@media (max-width: 520px) {
  .checkout-body { padding: 12px; }
  .checkout-credit__value { font-size: 1.65rem; }
  .pay-grid { grid-template-columns: 1fr; }
}

/* ================================
   Admin + Orders Overlays (MVP)
================================== */
.orders-overlay,
.admin-overlay{
  position: fixed;
  inset: 0;
  z-index: 200000;}
.orders-overlay[hidden],
.admin-overlay[hidden]{ display:none !important; }

.orders-overlay__backdrop,
.admin-overlay__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.45);
}

.orders-overlay__panel,
.admin-overlay__panel{
  position: relative;
  width: min(980px, calc(100% - 24px));
  max-height: calc(100% - 24px);
  margin: 12px auto;
  background: var(--surface, #fff);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.25);
  overflow: hidden;
  display:flex;
  flex-direction: column;
}

.orders-overlay__head,
.admin-overlay__head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.orders-overlay__title,
.admin-overlay__title{
  font-weight: 800;
  font-size: 1.05rem;
}

.orders-overlay__close,
.admin-overlay__close{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.1);
  background: transparent;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.orders-body{
  padding: 12px 14px 16px;
  overflow:auto;
}

.orders-user-switch{
  display:flex;
  gap: 10px;
  align-items:center;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.orders-card{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 12px;
  margin: 10px 0;
  background: rgba(255,255,255,.98);
}

.orders-card__head{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 8px;
}
.orders-card__trk strong{ font-weight: 800; }
.orders-card__meta{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.pill{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .85rem;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.03);
}
.pill--muted{ opacity:.85; }
.pill--accent{ font-weight: 800; }

.installments{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(0,0,0,.15);
}
.installments__title{ font-weight: 800; margin-bottom: 6px; }
.installment-row{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.03);
  font-size: .92rem;
}
.installment-row strong{ font-weight: 800; }

/* Header admin button */
.header-admin{
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.85);
  cursor: pointer;
}
.header-admin__txt{
  font-weight: 800;
  font-size: .9rem;
}

/* Admin */
.admin-tabs {
    display: flex;
    gap: 8px;
    padding: 20px 14px;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    overflow: auto;
    align-items: center;
}
.admin-tab{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  border-radius: 999px;
  padding: 8px 12px;
  cursor:pointer;
  font-weight: 800;
  white-space: nowrap;
}
.admin-tab.is-active{ background: rgba(0,0,0,.08); }

.admin-body{
  padding: 12px 14px 16px;
  overflow:auto;
}
.admin-section{ display:none; }
.admin-section.is-active{ display:block; }

.admin-toolbar{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items:center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.admin-filters, .admin-actions{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items:center;
}
.admin-input, .admin-select{
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  padding: 10px 12px;
  background: #fff;
  min-width: 160px;
}

.admin-list{
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.admin-user-card{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 12px;
  background: rgba(255,255,255,.98);
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items:center;
  justify-content: space-between;
}
.admin-user-main{
  display:flex;
  gap: 10px;
  align-items:center;
  min-width: 260px;
}
.admin-user-avatar{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
}
.admin-user-name{ font-weight: 900; }
.admin-user-meta{ font-size:.88rem; opacity:.9; margin-top:2px; }

@media (max-width: 560px){
  .orders-overlay__panel,
  .admin-overlay__panel{
    width: calc(100% - 12px);
    margin: 6px auto;
    border-radius: 14px;
    max-height: calc(100% - 12px);
  }
  .header-admin__txt{ display:none; }
  .admin-input, .admin-select{ min-width: 0; flex: 1 1 140px; }
}


/* ================================
   Mini Modal (Password / Forgot)
   (MVP – no new files)
================================== */
.bs-mini-modal{
  position:fixed;
  inset:0;
  z-index:10050;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:clamp(14px, 3vw, 28px);
  background:rgba(15,23,42,.44);
  backdrop-filter:saturate(120%) blur(6px);
}
.bs-mini-modal[hidden]{display:none !important}
.bs-mini-modal__dialog{
  width:min(460px, 94vw);
  margin-top:clamp(10px, 5vh, 64px);
  background:rgba(255,255,255,.98);
  border:1px solid rgba(148,163,184,.35);
  border-radius:18px;
  box-shadow:0 24px 64px rgba(15,23,42,.22);
  overflow:hidden;
}
.bs-mini-modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px 10px;
  border-bottom:1px solid rgba(148,163,184,.28);
}
.bs-mini-modal__title{font-weight:900}
.bs-mini-modal__close{
  width:36px;height:36px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.35);
  background:#fff;
  cursor:pointer;
  font-size:22px;
  line-height:1;
}
.bs-mini-modal__body{padding:12px 14px 14px}
.bs-mini-form{display:grid;gap:10px}
.bs-mini-form .auth-row{margin:0}
.bs-mini-hint{font-size:12px;color:rgba(15,23,42,.68);line-height:1.7}
.bs-mini-actions{display:flex;gap:10px;margin-top:4px}
.bs-mini-actions .btn{flex:1}
.bs-mini-link{
  display:inline-block;
  margin-top:8px;
  font-weight:800;
  color:color-mix(in oklab,var(--sky) 55%, var(--text) 45%);
  text-decoration:none;
}
.bs-mini-link:hover{text-decoration:underline}
@media (max-width:560px){
  .bs-mini-modal__dialog{border-radius:16px}
}

/* ================================
   Admin Reports: Professional Tables
================================== */
.admin-report-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-weight:900;
}
.admin-kpi-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px;
  margin-top: 10px;
}
@media (max-width:1024px){
  .admin-kpi-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width:560px){
  .admin-kpi-grid{grid-template-columns:1fr}
}
.admin-kpi{
  border-radius:16px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.8);
  padding:12px 12px;
  box-shadow:0 10px 22px rgba(15,23,42,.08);
}
.admin-kpi .k{font-size:12px;color:rgba(15,23,42,.62);font-weight:800}
.admin-kpi .v{margin-top:6px;font-weight:950;font-size:1.05rem}
.admin-kpi .v b{color:var(--accent-orange,#f97316);font-weight:950}

.admin-table-wrap{
  overflow:auto;
  border-radius:18px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.82);
  box-shadow:0 14px 30px rgba(15,23,42,.08);
}
.admin-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:720px;
}
.admin-table th,
.admin-table td{
  padding:10px 12px;
  text-align:right;
  border-bottom:1px solid rgba(15,23,42,.08);
  vertical-align:middle;
  font-size:13px;
}
.admin-table th{
  position:sticky;
  top:0;
  background:rgba(255,255,255,.92);
  font-weight:950;
  z-index:1;
}
.admin-table tr:last-child td{border-bottom:0}
.admin-table td.muted,
.admin-table td .muted{color:rgba(15,23,42,.62)}
.admin-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(15,23,42,.03);
  font-weight:900;
  white-space:nowrap;
}
.admin-stars{
  display:inline-flex;
  align-items:center;
  gap:2px;
  direction:ltr;
  font-size:14px;
}
.admin-stars .s{opacity:.25}
.admin-stars .s.is-on{opacity:1}



/* --- متغیرهای عمومی (برای استفاده در CSS) --- */
:root {
    --text-1: #0f172a; /* Slate 900 */
    --text-2: #475569; /* Slate 600 */
    --muted: #64748b;  /* Slate 500 */
    --sky: #0ea5e9;    /* Sky 500 */
    --lime: #84cc16;   /* Lime 500 */
    --purple: #a78bfa; /* Violet 400 */
}

/* --- استایل بخش مجوزها (Trust Badges) --- */
.trust-badges {
    padding: 30px 0;
    background-color: #f8fafc; /* Slate 50 */
    text-align: center;
}

.trust-badges h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 24px;
    color: var(--text-1);
}

.trust-badges .badges-list {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.trust-badges .badges-list img {
    height: 100px; /* تنظیم ارتفاع دلخواه برای لوگوها */
    max-width: 150px;
    object-fit: contain;
    opacity: 0.7;
    transition: opacity 0.3s;
}

.trust-badges .badges-list img:hover {
    opacity: 1;
}

/* --- استایل‌های اصلی فوتر (حفظ‌شده از قبل با تغییرات Grid) --- */
.site-footer {
    position: relative;
    margin-top: 0;
    padding: 54px 0 calc(34px + env(safe-area-inset-bottom));
    overflow: hidden;
    isolation: isolate;
    color: var(--text-1);
}

/* پس‌زمینه شناور (بدون تغییر) */
.site-footer .footer-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(56, 189, 248, .10), rgba(163, 230, 53, .10), rgba(167, 139, 250, .10));
}
.site-footer .footer-bg::before, .site-footer .footer-bg::after {
    content: "";
    position: absolute;
    inset: -18%;
    filter: blur(26px);
    opacity: .95;
    transform: translate3d(0, 0, 0);
}
.site-footer .footer-bg::before {
    background: radial-gradient(circle at 18% 24%, rgba(56, 189, 248, .35), rgba(56, 189, 248, 0) 60%), radial-gradient(circle at 70% 18%, rgba(163, 230, 53, .26), rgba(163, 230, 53, 0) 58%), radial-gradient(circle at 86% 78%, rgba(249, 115, 22, .22), rgba(249, 115, 22, 0) 62%);
    animation: footerFloat 9s ease-in-out infinite;
}
.site-footer .footer-bg::after {
    background: radial-gradient(circle at 30% 82%, rgba(167, 139, 250, .24), rgba(167, 139, 250, 0) 60%), radial-gradient(circle at 92% 40%, rgba(56, 189, 248, .18), rgba(56, 189, 248, 0) 58%);
    animation: footerFloat2 12s ease-in-out infinite;
}

/* سطح فوتر (با حفظ گرادینت و سایه) */
.site-footer .footer-surface {
    position: relative;
    z-index: 1;
    border-radius: 24px;
    padding: 30px; /* کمی تنظیم شد */
    background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .84));
    border: 1px solid rgba(15, 23, 42, .12);
    box-shadow: 0 16px 40px rgba(15, 23, 42, .08);
    backdrop-filter: blur(6px);
}

/* گرادینت دور سطح (بدون تغییر) */
.site-footer .footer-surface::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(56, 189, 248, .42), rgba(163, 230, 53, .34), rgba(167, 139, 250, .36));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: .55;
}

/* --- استایل گرید 3 ستونی جدید --- */
.footer-grid-3-col {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.5fr; /* نسبت ستون‌ها: برند، لینک‌ها، تماس */
    gap: 30px;
}

.footer-col {
    padding: 10px 0;
}

/* استایل ستون برند و دکمه‌ها */
.footer-brand-section .footer-brand .footer-name {
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: -.2px;
    margin-bottom: 8px;
    display: inline-block;
    background: linear-gradient(90deg, var(--sky), var(--lime), var(--purple));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.footer-brand-section .footer-desc {
    margin: 0 0 16px 0;
    color: var(--text-2);
    text-align: justify;
    width: 54%;
}
.footer-brand-section .footer-actions {
    display: block; /* تغییر از flex به block برای کنترل بهتر */
}
.footer-brand-section .footer-actions .btn { min-height: 44px; width: 100%; max-width: 200px;}


/* استایل ستون لینک‌ها */
.footer-links-section h3, .footer-contact-section h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--text-1);
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    padding-bottom: 8px;
    display: inline-block;
}
.footer-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-links-list li {
    margin-bottom: 8px;
}
.footer-links-list a {
    color: var(--text-2);
    text-decoration: none;
    transition: color 0.15s;
}
.footer-links-list a:hover {
    color: var(--sky);
}

/* استایل ستون تماس (تغییر از حالت قبلی) */
.footer-contact-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-contact-item .k {
    font-size: .85rem;
    color: var(--muted);
    white-space: nowrap;
    font-weight: 600;
}
.footer-contact-item .v {
    color: var(--text-1);
    word-break: break-word;
    flex-grow: 1;
}
.footer-contact-item a {
    text-decoration: none;
    display: flex;
    align-items: flex-start;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.footer-contact-item a:hover {
    transform: translateY(-1px);
    border-color: rgba(56, 189, 248, .5);
    box-shadow: 0 4px 10px rgba(15, 23, 42, .05);
}

/* قسمت پایین فوتر */
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: center; /* وسط چین کردن کپی رایت */
    gap: 12px;
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px dashed rgba(15, 23, 42, .1);
}
.footer-copy {
    font-size: .92rem;
    color: rgba(15, 23, 42, .70);
}


/* --- Media Queries (سازگاری با موبایل) --- */
@media (max-width: 1024px) {
    /* تنظیم گرید برای تبلت و موبایل */
    .footer-grid-3-col {
        grid-template-columns: repeat(2, 1fr); /* دو ستون در سایز متوسط */
    }
    /* ستون تماس را به ردیف سوم منتقل می‌کنیم */
    .footer-contact-section {
        grid-column: 1 / span 2;
    }
    
    .site-footer .footer-surface {
        padding: 24px;
    }
    .footer-brand-section .footer-actions .btn { width: auto; max-width: unset;}

    /* بخش اینمادها در موبایل */
    .trust-badges .badges-list {
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .site-footer {
        padding-top: 40px;
    }
    .site-footer .footer-surface {
        padding: 18px;
        border-radius: 22px;
    }
    
    /* تغییر به تک ستونی در موبایل */
    .footer-grid-3-col {
        grid-template-columns: 1fr;
    }
    .footer-contact-section,
    .footer-links-section,
    .footer-brand-section {
        grid-column: auto / auto;
    }
    
    .footer-brand-section .footer-actions {
        display: flex; /* بازگشت به حالت قبل برای دکمه‌ها */
        justify-content: flex-start;
    }

    /* بخش اینمادها در موبایل */
    .trust-badges h2 {
        font-size: 1.25rem;
    }
    .trust-badges .badges-list {
        gap: 15px;
    }
    .trust-badges .badges-list img {
        height: 50px;
    }
}

/* انیمیشن‌ها (بدون تغییر) */
@keyframes footerFloat {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(0, -10px, 0) scale(1.04); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes footerFloat2 {
    0% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
    50% { transform: translate3d(0, 12px, 0) scale(1.03) rotate(6deg); }
    100% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
    .site-footer .footer-bg::before, .site-footer .footer-bg::after {
        animation: none !important;
    }
}