/* ==========================================================================
   شهر آفتاب | قالیشویی و مبل‌شویی مجاز
   Design tokens ------------------------------------------------------------
   Primary   #0E5C6B  petrol teal   -> آب، اعتماد، تخصص (trust / water)
   Sun       #F2A61C  گرم، طلایی    -> برند «شهر آفتاب» + خورشید لوگو
   Eco       #4C8C6B  سبز ملایم     -> شست‌وشوی سالم و پاکیزگی
   Paper     #FBF7EE  کرم گرم       -> پاکیزگی بدون سردی کلینیکی
   ========================================================================== */

:root{
  --ink:        #12262A;
  --ink-soft:   #4C6266;
  --primary:    #0E5C6B;
  --primary-dk: #073C46;
  --primary-lt: #E4F0EF;
  --sun:        #F2A61C;
  --sun-dk:     #C9820A;
  --sun-lt:     #FFEACB;
  --sun-ink:    #8C5D08;  /* text-safe shade for text-on-sun-lt, 4.85:1 (WCAG audit fix) */
  --sun-hover:  #D9900C;  /* Hover state per color.txt ch.10 State Colors — darker than --sun
                              but light enough that --primary-dk button text stays >=4.5:1 */
  --eco:        #4C8C6B;
  --eco-lt:     #E4EFE9;
  --eco-ink:    #3E7257;  /* text-safe shade for text-on-eco-lt, 4.75:1 (WCAG audit fix) */
  --danger:     #EF4444;
  --danger-lt:  #FEE2E2;
  --danger-ink: #D01212;  /* text-safe shade for text-on-danger-lt, 4.55:1 (WCAG audit fix) */
  --info:       #0284C7;
  --info-lt:    #E0F2FE;
  --info-ink:   #0270A9;  /* text-safe shade for text-on-info-lt, 4.70:1 (WCAG audit fix) */
  --paper:      #FBF7EE;
  --cloud:      #FFFFFF;
  --line:       #E8DFCB;
  --shadow:     0 20px 45px -25px rgba(9,40,46,.35);
  --shadow-sm:  0 8px 20px -12px rgba(9,40,46,.25);
  --radius:     18px;
  --radius-sm:  10px;
  --font-display: 'Vazirmatn', Tahoma, sans-serif;
  --font-body:    'Vazirmatn', Tahoma, sans-serif;
  --ease: cubic-bezier(.22,.68,0,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font:400 16px/1.85 var(--font-body); color:var(--ink);
  background:var(--paper); direction:rtl; text-align:right;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
ul{margin:0; padding:0; list-style:none}
h1,h2,h3,h4{margin:0; font-family:var(--font-display); font-weight:800; line-height:1.35; letter-spacing:-.01em}
p{margin:0}
button{font:inherit; cursor:pointer; border:none; background:none; color:inherit}
input,select,textarea{font:inherit; color:inherit}

/* focus visibility ---------------------------------------------------- */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid var(--sun); outline-offset:3px; border-radius:6px;
}

.skip-link{
  position:absolute; right:1rem; top:-60px; background:var(--primary-dk); color: var(--cloud);
  padding:.8rem 1.4rem; border-radius:0 0 10px 10px; z-index:200; transition:top .25s var(--ease);
}
.skip-link:focus{top:0}

.container{width:min(1200px,92%); margin-inline:auto}
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem; font:700 .8rem/1 var(--font-body);
  letter-spacing:.03em; color:var(--primary); background:var(--primary-lt);
  padding:.5rem 1rem; border-radius:99px; margin-block-end:1rem;
}
.eyebrow::before{content:''; width:7px; height:7px; border-radius:50%; background:var(--sun); flex:none}

section{padding-block:clamp(3.5rem,7vw,6.5rem)}
.section-head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:1.5rem; margin-block-end:clamp(2rem,4vw,3.2rem);
}
.section-head h2{font-size:clamp(1.6rem,3vw,2.4rem)}
.section-head p{color:var(--ink-soft); max-width:46ch}
.section-head--center{flex-direction:column; align-items:center; text-align:center; margin-inline:auto}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.95rem 1.9rem; border-radius:99px; font:700 .95rem/1 var(--font-body);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn--sun{background:var(--sun); color:var(--primary-dk); box-shadow:var(--shadow-sm)}
.btn--sun:hover{background:var(--sun-hover); box-shadow:var(--shadow)}
.btn--ghost{background:var(--cloud); color:var(--primary); border:1.5px solid var(--line)}
.btn--ghost:hover{border-color:var(--primary)}
.btn--line{background:none; color: var(--cloud); border:1.5px solid rgba(255,255,255,.55)}
.btn--line:hover{background:rgba(255,255,255,.12); border-color:#fff}
.btn--block{width:100%}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:100; background:rgba(251,247,238,.88);
  backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid var(--line); overflow-x:clip;
}
.site-header__bar{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.9rem}
.site-header__brand{display:flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-weight:800; font-size:1.1rem; flex:none}
.site-header__brand small{display:block; font:600 .66rem/1 var(--font-body); color:var(--ink-soft); margin-top:.15rem}
.site-header__brand-icon{width:42px; height:42px; flex:none}

.site-header__nav{display:flex; align-items:center; gap:1.4rem; flex-wrap:nowrap}
.site-header__nav a{
  font:600 .87rem/1 var(--font-body); color:var(--ink-soft); position:relative; padding-block:.4rem; white-space:nowrap;
}
.site-header__nav a::after{
  content:''; position:absolute; inset-inline-start:0; bottom:0; width:0; height:2px;
  background:var(--sun); transition:width .25s var(--ease);
}
.site-header__nav a:hover{color:var(--ink)}
.site-header__nav a:hover::after{width:100%}
.site-header__nav a[aria-current="page"]{color:var(--primary-dk)}
.site-header__nav a[aria-current="page"]::after{width:100%}

.site-header__actions{display:flex; align-items:center; gap:.7rem; flex:none}
.site-header__phone{
  display:grid; place-items:center; width:40px; height:40px; border-radius:50%;
  background:var(--primary-lt); color:var(--primary-dk); flex:none;
}
.site-header__phone svg{width:19px; height:19px}
.site-header__nav-toggle{display:none}
.hero__image{border-radius: 10px;}
@media (max-width:1140px){
  .site-header__nav{
    position:fixed; inset:70px 0 auto 0; background:var(--cloud); flex-direction:column; flex-wrap:wrap;
    padding:1.5rem 6%; gap:0; box-shadow:var(--shadow); transform:translateY(-8px);
    opacity:0; pointer-events:none; transition:opacity .2s var(--ease), transform .2s var(--ease);
  }
  .site-header__nav[data-open="true"]{opacity:1; transform:translateY(0); pointer-events:auto}
  .site-header__nav a{width:100%; padding-block:.9rem; border-bottom:1px solid var(--line)}
  .site-header__nav-toggle{
    display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
    background:var(--primary-lt); flex:none;
  }
  .site-header__nav-toggle svg{width:20px; height:20px}
}

@media (max-width:420px){
  .site-header__brand small{display:none}
}
/* رفع مشکل بیرون زدن دکمه‌ها در موبایل */
@media (max-width: 540px) {

  .site-header__actions {
    gap: .4rem;
    flex-wrap: nowrap;
  }

  .btn.btn--sun {
    padding-inline: .8rem;
    font-size: .78rem;
    white-space: nowrap;
  }

  .site-header__nav-toggle {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-lt);
  }

  .site-header__phone {
    width: 38px;
    height: 38px;
  }

  .site-header__bar {
    padding-block: .7rem;
  }
}


/* ==========================================================================
   Hero
   ========================================================================== */
.hero{position:relative; overflow:clip; padding-block-start:clamp(2.5rem,6vw,4.5rem)}
.hero__grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:center;
}
.hero__title{font-size:clamp(2.1rem,4.6vw,3.5rem); letter-spacing:.01em}
.hero__title em{font-style:normal; color:var(--sun-ink); position:relative}
.hero__copy p.hero__lede{margin-block-start:1.3rem; font-size:1.08rem; color:var(--ink-soft); max-width:52ch}
.hero__actions{display:flex; flex-wrap:wrap; gap:1rem; margin-block-start:2rem}

.hero__stats{display:flex; flex-wrap:wrap; gap:2rem; margin-block-start:2.6rem; padding-block-start:1.8rem; border-top:1px solid var(--line)}
.hero__stat b{display:block; font:800 1.6rem/1 var(--font-display); color:var(--primary-dk)}
.hero__stat span{font-size:.85rem; color:var(--ink-soft)}

.hero__visual{position:relative; aspect-ratio:1/1; display:grid; place-items:center}
.hero__sun-loom{width:100%; height:100%; animation:spin 90s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hero__badge{
  position:absolute; inset-inline-start:-10px; bottom:8%; background:var(--cloud);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:1rem 1.3rem;
  display:flex; align-items:center; gap:.8rem; max-width:230px;
}
.hero__badge svg{width:34px; height:34px; flex:none; color:var(--eco)}
.hero__badge b{display:block; font-size:.92rem}
.hero__badge span{font-size:.78rem; color:var(--ink-soft)}

@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr}
  .hero__visual{order:-1; max-width:280px; margin-inline:auto}
}

/* ==========================================================================
   Trust strip
   ========================================================================== */
.trust-strip{background:var(--primary-dk); color:#fff}
.trust-strip .container{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1.4rem 2rem;
  padding-block:1.6rem;
}
.trust-strip__item{display:flex; align-items:center; gap:.7rem; font:600 .88rem/1.3 var(--font-body)}
.trust-strip__item svg{width:24px; height:24px; flex:none; color:var(--sun)}

/* ==========================================================================
   Services
   ========================================================================== */
.services-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.6rem;
}
.service-card{
  background:var(--cloud); border:1px solid var(--line); border-radius:var(--radius);
  padding:2rem 1.7rem; display:flex; flex-direction:column; gap:1rem;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.service-card:hover{transform:translateY(-6px); box-shadow:var(--shadow); border-color:transparent}
.service-card__icon{
  width:56px; height:56px; border-radius:16px; background:var(--primary-lt); color:var(--primary);
  display:grid; place-items:center; flex:none;
}
.service-card__icon svg{width:28px; height:28px}
.service-card h3{font-size:1.12rem}
.service-card p{color:var(--ink-soft); font-size:.92rem}
.service-card .service-card__tag{
  align-self:flex-start; font:700 .72rem/1 var(--font-body); background:var(--sun-lt); color:var(--sun-ink);
  padding:.35rem .7rem; border-radius:99px; margin-block-start:auto;
}

/* ==========================================================================
   Process
   ========================================================================== */
.process{background:var(--primary-lt)}
.process-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; counter-reset:step;
}
.process-step{position:relative; background:var(--cloud); border-radius:var(--radius); padding:2rem 1.5rem 1.6rem; box-shadow:var(--shadow-sm)}
.process-step .process-step__number{
  font:800 2.4rem/1 var(--font-display); color:var(--sun); -webkit-text-stroke:1px var(--primary-dk);
  display:block; margin-block-end:.6rem;
}
.process-step h3{font-size:1.02rem; margin-block-end:.5rem}
.process-step p{font-size:.88rem; color:var(--ink-soft)}
.process-step::after{
  content:''; position:absolute; top:2.3rem; inset-inline-start:-1.5rem; width:1.5rem; height:2px;
  background:repeating-linear-gradient(to left,var(--primary) 0 6px,transparent 6px 11px);
}
.process-step:first-child::after{display:none}

@media (max-width:900px){
  .process-grid{grid-template-columns:1fr 1fr}
  .process-step::after{display:none}
}
@media (max-width:560px){.process-grid{grid-template-columns:1fr}}

/* ==========================================================================
   Why us — comparison
   ========================================================================== */
.compare-wrap{display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center}
.compare-table{background:var(--cloud); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm)}
.compare-table__row{display:grid; grid-template-columns:1.6fr .7fr .7fr; align-items:center}
.compare-table__row + .compare-table__row{border-top:1px solid var(--line)}
.compare-table__row.compare-table__row--head{background:var(--primary-dk); color: var(--cloud); font:700 .85rem/1 var(--font-body)}
.compare-table__cell{padding:1rem 1.1rem; font-size:.9rem}
.compare-table__row .compare-table__cell.compare-table__cell--yes{color:var(--eco-ink); font-weight:700}
.compare-table__row .compare-table__cell.compare-table__cell--no{color:var(--danger-ink); font-weight:700}
.compare-table__row.compare-table__row--head .compare-table__cell.compare-table__cell--yes,.compare-table__row.compare-table__row--head .compare-table__cell.compare-table__cell--no{color:var(--cloud)}
.compare-table__cell.compare-table__cell--label{color:var(--ink-soft)}

@media (max-width:900px){.compare-wrap{grid-template-columns:1fr}}

/* ==========================================================================
   Pricing teaser
   ========================================================================== */
.pricing-card{
  background:var(--primary-dk); color: var(--cloud); border-radius:24px; padding:clamp(2rem,5vw,3.2rem);
  display:grid; grid-template-columns:1.1fr .9fr; gap:2.5rem; align-items:center; position:relative; overflow:clip;
}
.pricing-card::before{
  content:''; position:absolute; inset-inline-end:-60px; top:-60px; width:220px; height:220px;
  border-radius:50%; background:radial-gradient(circle,rgba(242,166,28,.35),transparent 70%);
}
.pricing-card__list{display:grid; gap:.85rem; background:rgba(255,255,255,.06); border-radius:var(--radius); padding:1.4rem 1.6rem}
.pricing-card__row{display:flex; justify-content:space-between; gap:1rem; font-size:.92rem; padding-block:.5rem; border-bottom:1px dashed rgba(255,255,255,.2)}
.pricing-card__row:last-child{border-bottom:none}
.pricing-card__row b{font-family:var(--font-display); color:var(--sun); font-weight:700}
.pricing-note{font-size:.78rem; color:rgba(255,255,255,.65); margin-block-start:.8rem}

@media (max-width:900px){.pricing-card{grid-template-columns:1fr}}

/* ==========================================================================
   Branches
   ========================================================================== */
.branch-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.5rem}
.branch-card{
  border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem; background:var(--cloud);
  display:flex; flex-direction:column; gap:.6rem; transition:box-shadow .2s var(--ease);
}
.branch-card:hover{box-shadow:var(--shadow-sm)}
.branch-card .branch-card__pin{display:flex; align-items:center; gap:.6rem; color:var(--primary); font-weight:700}
.branch-card .branch-card__pin svg{width:20px; height:20px; color:var(--sun-ink)}
.branch-card p{font-size:.86rem; color:var(--ink-soft)}
.branch-card a{font-size:.85rem; font-weight:700; color:var(--primary); margin-block-start:.4rem}

/* ---- Branches page: map + detail cards ---- */
.city-map{background:var(--cloud); border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem; box-shadow:var(--shadow-sm)}
.city-map svg{width:100%; height:auto}
.map-pin circle{transition:r .2s var(--ease)}
.map-note{text-align:center; color:var(--ink-soft); font-size:.82rem; margin-block-start:.8rem}

.branch-detail-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.6rem}
.branch-detail{background:var(--cloud); border:1px solid var(--line); border-radius:var(--radius); padding:1.8rem; display:flex; flex-direction:column; gap:1rem}
.branch-detail__head{display:flex; align-items:center; justify-content:space-between; gap:.8rem}
.branch-detail__meta{display:grid; gap:.65rem}
.branch-detail__meta li{display:flex; align-items:flex-start; gap:.6rem; font-size:.85rem; color:var(--ink-soft)}
.branch-detail__meta li svg{width:18px; height:18px; color:var(--primary); flex:none; margin-block-start:.1rem}
.branch-detail__meta li a{color:var(--primary-dk); font-weight:700}
.branch-detail > p{font-size:.87rem; color:var(--ink-soft)}

/* ==========================================================================
   Gallery
   ========================================================================== */
.gallery-frame{border-radius:24px; overflow:hidden; box-shadow:var(--shadow); position:relative}
.gallery-frame img{width:100%; height:clamp(220px,32vw,360px); object-fit:cover; filter:saturate(1.05)}
.gallery-frame__caption{
  position:absolute; inset-inline:0; bottom:0; background:linear-gradient(to top,rgba(7,60,70,.88),transparent);
  color: var(--cloud); padding:1.6rem clamp(1.2rem,4vw,2.4rem) 1.2rem; display:flex; justify-content:space-between; align-items:flex-end; gap:1rem;
}
.gallery-frame__caption h3{font-size:1.1rem}
.gallery-frame__caption p{font-size:.82rem; color:rgba(255,255,255,.75)}

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testimonial-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:1.6rem}
.testimonial-card{background:var(--cloud); border-radius:var(--radius); padding:1.9rem; border:1px solid var(--line)}
.testimonial-card .testimonial-card__stars{color:var(--sun); letter-spacing:.15em; margin-block-end:.8rem; font-size:.95rem}
.testimonial-card p.testimonial-card__quote{color:var(--ink-soft); font-size:.94rem}
.testimonial-card__who{display:flex; align-items:center; gap:.7rem; margin-block-start:1.3rem}
.testimonial-card__avatar{
  width:42px; height:42px; border-radius:50%; background:var(--primary-lt); color:var(--primary);
  display:grid; place-items:center; font:700 .95rem/1 var(--font-display); flex:none;
}
.testimonial-card__who b{display:block; font-size:.9rem}
.testimonial-card__who span{font-size:.76rem; color:var(--ink-soft)}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-list{display:grid; gap:1rem; max-width:820px; margin-inline:auto}
.faq-item{background:var(--cloud); border:1px solid var(--line); border-radius:var(--radius-sm); overflow:clip}
.faq-item summary{
  list-style:none; cursor:pointer; padding:1.2rem 1.5rem; display:flex; justify-content:space-between; align-items:center;
  font-weight:700; gap:1rem;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .faq-item__chevron{transition:transform .25s var(--ease); color:var(--primary); flex:none}
.faq-item[open] summary .faq-item__chevron{transform:rotate(180deg)}
.faq-item .faq-item__body{padding:0 1.5rem 1.4rem; color:var(--ink-soft); font-size:.92rem}

/* ==========================================================================
   Order form — نسخه ارتقایافته
   ========================================================================== */

.order {
  background: var(--primary-dk);
  color: var(--cloud);
  position: relative;
  overflow: hidden;
}

.order__grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: flex-start;
}

.order__copy h2 { color: var(--cloud); }
.order__copy p {
  color: rgba(255,255,255,.72);
  margin-block-start: 1rem;
}

.order__perks {
  display: grid;
  gap: .9rem;
  margin-block-start: 1.8rem;
}
.order__perks li {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  font-size: .9rem;
}
.order__perks svg {
  width: 20px;
  height: 20px;
  color: var(--sun);
  flex: none;
  margin-block-start: .15rem;
}

.order-form {
  background: var(--cloud);
  color: var(--ink);
  border-radius: 20px;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  box-shadow: var(--shadow);
  display: grid;
  gap: 1.1rem;
  overflow: hidden;
}

.order-form__fieldset {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1.2rem 1rem .2rem;
  margin: 0;
  display: grid;
  gap: 1.1rem;
  min-width: 0;
}
.order-form__fieldset legend {
  padding: 0 .5rem;
  font: 700 .82rem/1 var(--font-body);
  color: var(--primary);
}

.order-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
  min-width: 0;
}

.order-form__field {
  display: grid;
  gap: .45rem;
  min-width: 0;
}
.order-form__field label {
  font-size: .85rem;
  font-weight: 700;
  color: var(--ink-soft);
}
.order-form__field input,
.order-form__field select,
.order-form__field textarea {
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .85rem 1rem;
  background: var(--paper);
  transition: border-color .2s var(--ease);
  width: 100%;
}
.order-form__field textarea {
  resize: vertical;
  min-height: 90px;
}

.order-form__stepper {
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--paper);
}
.order-form__stepper-btn {
  width: 38px;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--primary);
  transition: background .2s var(--ease);
}
.order-form__stepper input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  text-align: center;
  padding: .85rem .4rem;
}

.order-form__radio-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
.order-form__pill {
  display: flex;
  align-items: center;
  gap: .5rem;
  border: 1.5px solid var(--line);
  border-radius: 99px;
  padding: .55rem 1rem;
  font-size: .83rem;
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}

.order-form__checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .83rem;
  color: var(--ink-soft);
  cursor: pointer;
}
.order-form__checkbox-row a{
  text-decoration: underline;
}

.order-form__summary {
  background: var(--primary-lt);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.2rem;
  display: grid;
  gap: .6rem;
}

.order-form__success {
  display: none;
  align-items: center;
  gap: .7rem;
  background: var(--eco-lt);
  color: var(--eco-ink);
  border-radius: var(--radius-sm);
  padding: .9rem 1.1rem;
  font-weight: 700;
  font-size: .9rem;
}
.order-form__success.show {
  display: flex;
}
@media (max-width: 900px) {
  .order__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .order-form {
    padding: 1.3rem;
  }
  .order-form__row {
    grid-template-columns: 1fr;
  }
  .order-form__pill {
    padding: .5rem .9rem;
  }
  .order-form__stepper-btn {
    width: 34px;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{background:var(--ink); color:rgba(255,255,255,.78)}
.site-footer__top{
  display:grid; grid-template-columns:1.3fr 1fr 1fr 1.2fr; gap:2.5rem;
  padding-block:clamp(2.5rem,5vw,4rem); border-bottom:1px solid rgba(255,255,255,.1);
}
.site-footer__brand{display:flex; align-items:center; gap:.7rem; color: var(--cloud); font-family:var(--font-display); font-size:1.1rem; margin-block-end:1rem}
.site-footer__brand svg{width:36px; height:36px; flex:none}
.site-footer__col h4{color: var(--cloud); font-size:.95rem; margin-block-end:1.1rem}
.site-footer__col ul{display:grid; gap:.7rem}
.site-footer__col a{font-size:.88rem; transition:color .2s var(--ease)}
.site-footer__col a:hover{color:var(--sun)}
.site-footer__col p{font-size:.85rem; line-height:1.8}
.site-footer__phones{display:grid; gap:.55rem; margin-block-start:.4rem}
.site-footer__phones a{display:flex; align-items:center; gap:.55rem; font-weight:700; color: var(--cloud); font-size:.92rem}
.site-footer__phones svg{width:17px; height:17px; color:var(--sun)}
.site-footer__social{display:flex; gap:.7rem; margin-block-start:1.2rem}
.site-footer__social a{
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08); display:grid; place-items:center;
  transition:background .2s var(--ease);
}
.site-footer__social a:hover{background:var(--sun); color:var(--ink)}
.site-footer__bottom{
  display:flex;
  justify-content:center;
  gap:1rem;
  padding-block:1.3rem;
  font-size:.78rem;
}
.site-footer__reg-badge{display:inline-flex; align-items:center; gap:.5rem; color:rgba(255,255,255,.5)}

@media (max-width:900px){.site-footer__top{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.site-footer__top{grid-template-columns:1fr}}

/* ==========================================================================
   Pricing page — tabs & table
   ========================================================================== */
.price-tabs{display:flex; flex-wrap:wrap; gap:.7rem; margin-block-end:1.8rem}
.price-tabs__tab{
  padding:.75rem 1.3rem; border-radius:99px; border:1.5px solid var(--line); background:var(--cloud);
  font:600 .88rem/1 var(--font-body); color:var(--ink-soft); transition:all .2s var(--ease);
}
.price-tabs__tab:hover{border-color:var(--primary)}
.price-tabs__tab.is-active{background:var(--primary); border-color:var(--primary); color:#fff}

.price-table{width:100%; border-collapse:collapse; background:var(--cloud); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm)}
.price-table th,.price-table td{padding:1rem 1.3rem; text-align:right; font-size:.92rem}
.price-table thead th{background:var(--primary-dk); color: var(--cloud); font-weight:700; font-size:.85rem}
.price-table tbody tr:nth-child(even){background:var(--primary-lt)}
.price-table td:last-child,.price-table th:last-child{text-align:left}
.price-table__pending{font:700 .78rem/1 var(--font-body); background:var(--sun-lt); color:var(--sun-ink); padding:.35rem .8rem; border-radius:99px}

@media (max-width:640px){
  .price-table{display:block; overflow-x:auto; white-space:nowrap}
}

/* ==========================================================================
   Legal / rules page
   ========================================================================== */
.legal-wrap{display:grid; grid-template-columns:220px 1fr; gap:2.5rem; align-items:start}
.legal-toc{position:sticky; top:100px; display:grid; gap:.5rem; background:var(--cloud); border:1px solid var(--line); border-radius:var(--radius-sm); padding:1.2rem}
.legal-toc b{font-size:.8rem; color:var(--ink-soft); margin-block-end:.3rem}
.legal-toc a{font-size:.85rem; color:var(--ink-soft); padding-block:.3rem; transition:color .2s var(--ease)}
.legal-toc a:hover{color:var(--primary)}

.legal-body{display:grid; gap:2.2rem; max-width:72ch}
.legal-block h2{font-size:1.2rem; margin-block-end:.7rem; color:var(--primary-dk)}
.legal-block p{color:var(--ink-soft); font-size:.95rem}
.legal-cta{
  background:var(--primary-lt); border-radius:var(--radius); padding:1.4rem 1.6rem;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;
}
.legal-cta p{font-weight:700; color:var(--primary-dk)}

@media (max-width:860px){
  .legal-wrap{grid-template-columns:1fr}
  .legal-toc{position:static}
}

/* ==========================================================================
   Articles / blog
   ========================================================================== */
.article-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.6rem; margin-block-start:1.8rem}
.article-card{background:var(--cloud); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:transform .25s var(--ease), box-shadow .25s var(--ease)}
.article-card:hover{transform:translateY(-5px); box-shadow:var(--shadow)}
.article-card__thumb{
  height:150px; display:grid; place-items:center; color: var(--cloud); flex:none;
}
.article-card__thumb svg{width:44px; height:44px; opacity:.9}
.article-card__thumb--1{background:linear-gradient(135deg,var(--sun-dk),var(--sun))}
.article-card__thumb--2{background:linear-gradient(135deg,var(--primary-dk),var(--primary))}
.article-card__thumb--3{background:linear-gradient(135deg,var(--eco),#6BAE8B)}
.article-card__thumb--4{background:linear-gradient(135deg,var(--info),#5C93CE)}
.article-card__thumb--5{background:linear-gradient(135deg,var(--primary),var(--sun-dk))}
.article-card__thumb--6{background:linear-gradient(135deg,var(--eco),var(--primary))}
.article-card__body{padding:1.4rem; display:flex; flex-direction:column; gap:.7rem; flex:1}
.article-card__tag{align-self:flex-start; font:700 .72rem/1 var(--font-body); background:var(--primary-lt); color:var(--primary-dk); padding:.35rem .75rem; border-radius:99px}
.article-card__body h3{font-size:1.02rem; line-height:1.6}
.article-card__body h3 a{transition:color .2s var(--ease)}
.article-card__body h3 a:hover{color:var(--primary)}
.article-card__body p{font-size:.87rem; color:var(--ink-soft)}
.article-meta{display:flex; justify-content:space-between; gap:1rem; font-size:.76rem; color:var(--ink-soft); margin-block-start:auto; padding-block-start:.8rem; border-top:1px solid var(--line)}
.empty-state{text-align:center; color:var(--ink-soft); padding-block:3rem}

/* Single article page */
.article__hero-thumb{
  height:clamp(180px,30vw,320px); border-radius:var(--radius); display:grid; place-items:center; color: var(--cloud);
  background:linear-gradient(135deg,var(--sun-dk),var(--primary)); margin-block-end:2rem;
}
.article__hero-thumb svg{width:64px; height:64px; opacity:.9}
.article__wrap{display:grid; grid-template-columns:1fr 260px; gap:2.5rem; align-items:start}
.article__content{max-width:70ch; display:grid; gap:1.3rem}
.article__content h2{font-size:1.3rem; color:var(--primary-dk); margin-block-start:.6rem}
.article__content p{color:var(--ink-soft); font-size:.98rem; line-height:1.95}
.article__content ul{display:grid; gap:.6rem; padding-inline-start:1.3rem; list-style:disc; color:var(--ink-soft)}
.article__content li::marker{color:var(--sun-ink)}
.article__tip{background:var(--sun-lt); border-radius:var(--radius-sm); padding:1.2rem 1.4rem; border-inline-start:4px solid var(--sun-dk)}
.article__tip b{display:block; color:var(--sun-ink); font-size:.85rem; margin-block-end:.3rem}
.article__author{display:flex; align-items:center; gap:.9rem; padding-block-start:1.5rem; border-top:1px solid var(--line)}
.article__author .article__author-avatar{width:46px; height:46px; border-radius:50%; background:var(--primary-lt); color:var(--primary-dk); display:grid; place-items:center; font:700 .95rem/1 var(--font-display); flex:none}
.article__author b{display:block; font-size:.9rem}
.article__author span{font-size:.78rem; color:var(--ink-soft)}

.article__sidebar{display:grid; gap:1.3rem; position:sticky; top:100px}
.sidebar-card{background:var(--cloud); border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem}
.sidebar-card h4{font-size:.92rem; margin-block-end:1rem}
.sidebar-card__related-item{display:flex; align-items:flex-start; gap:.4rem; padding-block:.6rem; border-bottom:1px solid var(--line); font-size:.85rem}
.sidebar-card__related-item:last-child{border-bottom:none}
.sidebar-card__related-item a{color:var(--ink); transition:color .2s var(--ease)}
.sidebar-card__related-item a:hover{color:var(--primary)}

@media (max-width:960px){.article__wrap{grid-template-columns:1fr} .article__sidebar{position:static}}

/* ==========================================================================
   Utilities / reveal animation
   ========================================================================== */
[data-reveal]{opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
[data-reveal].in{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
}

.back-to-top{
  position:fixed; inset-block-end:1.6rem; inset-inline-end:1.6rem; width:48px; height:48px; border-radius:50%;
  background:var(--primary-dk); color: var(--cloud); display:grid; place-items:center; box-shadow:var(--shadow);
  opacity:0; pointer-events:none; transform:translateY(10px); transition:opacity .25s var(--ease), transform .25s var(--ease);
  z-index:90;
}
.back-to-top.show{opacity:1; pointer-events:auto; transform:none}
.back-to-top svg{width:20px; height:20px}
.page-404 {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.error__wrapper {
  text-align: center;
  padding: 2rem;
}

.error__title {
  font-size: 6rem;
  margin-bottom: 1rem;
}
.page-maintenance {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.maintenance__wrapper {
  text-align: center;
  padding: 2rem;
}
/* تنظیمات کارت‌های شعبه */
.branch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.branch-card {
  background: var(--cloud);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(0,0,0,0.04);
  transition: transform 0.3s ease;
}

.branch-card:hover {
  transform: translateY(-5px);
}

.branch-card .branch-card__pin {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--primary);
  margin-bottom: 12px;
}

.branch-card .branch-card__pin svg {
  width: 20px;
  height: 20px;
}

.branch-card__address {
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 20px;
  flex-grow: 1;
}

/* چینش ستونی و مرتب شماره‌ها */
.branch-card__phones {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.phone-btn {
  display: inline-block;
  background: var(--paper);
  color: var(--ink);
  text-align: center;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1px solid var(--line);
  transition: all 0.2s ease;
}

.phone-btn:hover {
  background: var(--primary);
  color: var(--cloud);
  border-color: var(--primary);
}
.site-footer__branch-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 0.9rem;
}

.site-footer__branch-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.site-footer__branch-item .site-footer__branch-name {
  color: var(--sun);
  font-weight: 600;
}

.site-footer__branch-item a {
  color: rgba(255,255,255,.7);
  text-decoration: none;
  transition: color 0.2s;
}

.site-footer__branch-item a:hover {
  color: var(--cloud);
}

.site-footer__sub-phones {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.pricing-card__phone-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}

.pricing-card__phone-list a {
  color: var(--cloud);
  text-decoration: none;
  font-weight: 700;
  transition: opacity 0.2s;
}

.pricing-card__phone-list a:hover {
  opacity: 0.8;
}
/* ==========================================================================
   Testimonial Actions
   ========================================================================== */

.testimonial-actions {
  margin-top: 2.6rem;
  display: flex;
  justify-content: center;
}

.testimonial-actions .btn {
  padding: .9rem 1.6rem;
  font-size: .9rem;
  border-radius: var(--radius);
}
.order-form__info-badge {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background-color: #eff6ff; /* آبی بسیار ملایم */
    border: 1px solid #bfdbfe;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    color: #1e3a8a;
  }
  .order-form__info-badge svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    stroke: #3b82f6;
    margin-top: 2px;
  }
  .order-form__info-badge strong {
    display: block;
    font-size: 14px;
    margin-bottom: 4px;
    color: #1d4ed8;
  }
  .order-form__info-badge span {
    font-size: 13px;
    line-height: 1.5;
    color: #3b82f6;
  }