/* ============================================================
   استایل صفحه مشتری — موبایل‌فرندلی، ساده و شسته‌رفته
   از توکن‌های رنگی assets/styles.css استفاده می‌کند (باید قبل از این فایل بارگذاری شود)
   ============================================================ */

.cst-hero{padding:34px 0 22px;text-align:center}
.cst-hero h1{font-size:1.5rem;margin-bottom:8px}
.cst-hero p{color:var(--muted);max-width:46ch;margin:0 auto;font-size:.92rem}

.cst-steps{display:flex;justify-content:center;gap:6px;margin:18px 0 8px;flex-wrap:wrap}
.cst-step{font-size:.76rem;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:4px 12px}
.cst-step.active{color:#231a02;background:linear-gradient(135deg,var(--gold),#c9962a);border-color:transparent;font-weight:700}

/* ---------- بسته‌ها ---------- */
.cst-packages{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:18px 0}
.cst-pkg{background:var(--panel);border:2px solid var(--line);border-radius:16px;padding:18px;cursor:pointer;transition:.15s;text-align:right}
.cst-pkg:hover{border-color:var(--accent)}
.cst-pkg.selected{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.cst-pkg h3{margin:0 0 4px;font-size:1.05rem;color:var(--gold-2)}
.cst-pkg .cst-pkg-aud{color:var(--muted);font-size:.78rem;margin-bottom:10px}
.cst-pkg .cst-pkg-price{font-size:1.05rem;color:#fff;font-weight:700;margin-bottom:2px}
.cst-pkg .cst-pkg-price small{display:block;color:var(--muted);font-weight:400;font-size:.72rem}
.cst-pkg ul{margin:10px 0 0;padding-inline-start:1.2em;font-size:.8rem;color:#c6d0ea}
.cst-pkg ul li{margin-bottom:3px}

/* ---------- سفارشی‌سازی ---------- */
.cst-customizer{display:none}
.cst-customizer.open{display:block}

.cst-group{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:12px}
.cst-group h4{margin:0 0 12px;font-size:.9rem;color:var(--gold);display:flex;align-items:center;gap:8px}
.cst-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.cst-row:last-child{border-bottom:none}
.cst-row-label{flex:1;min-width:0}
.cst-row-label b{display:block;font-size:.86rem}
.cst-row-label span{display:block;color:var(--muted);font-size:.72rem;margin-top:2px}

.cst-stepper{display:flex;align-items:center;gap:8px;flex-shrink:0}
.cst-stepper button{
  width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--bg-2);
  color:var(--txt);font-size:1.1rem;cursor:pointer;display:grid;place-items:center;line-height:1;
}
.cst-stepper button:active{background:var(--accent);color:#fff}
.cst-stepper input{width:46px;text-align:center;background:transparent;border:none;color:var(--txt);font:inherit;font-size:.95rem}
.cst-stepper input:focus{outline:none}

.cst-toggle{position:relative;display:inline-block;width:44px;height:25px;flex-shrink:0}
.cst-toggle input{opacity:0;width:0;height:0}
.cst-toggle .slider{position:absolute;inset:0;background:var(--line);border-radius:999px;transition:.15s;cursor:pointer}
.cst-toggle .slider::before{content:'';position:absolute;width:19px;height:19px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.15s}
.cst-toggle input:checked + .slider{background:var(--gold)}
.cst-toggle input:checked + .slider::before{transform:translateX(-19px)}

.cst-select,.cst-input{
  background:var(--bg-2);border:1px solid var(--line);color:var(--txt);border-radius:9px;
  padding:8px 10px;font:inherit;font-size:.85rem;min-width:120px
}
.cst-select:focus,.cst-input:focus{outline:none;border-color:var(--accent)}

/* ---------- خلاصه شناور ---------- */
.cst-summary{position:sticky;top:70px;background:var(--panel);border:1px solid var(--gold);border-radius:16px;padding:16px;margin-bottom:14px}
.cst-summary .cst-total{font-size:1.35rem;color:#fff;font-weight:800}
.cst-summary .cst-total small{display:block;color:var(--gold);font-weight:400;font-size:.78rem;margin-top:2px}
.cst-summary .cst-sub{display:flex;justify-content:space-between;color:var(--muted);font-size:.78rem;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.cst-summary .cst-sub b{color:var(--txt);font-weight:600}

.cst-details{margin-top:10px}
.cst-details summary{cursor:pointer;color:var(--accent);font-size:.82rem;list-style:none}
.cst-details summary::-webkit-details-marker{display:none}
.cst-details-list{margin-top:10px;font-size:.8rem;color:#c6d0ea}
.cst-details-list div{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.cst-details-list div:last-child{border-bottom:none}

/* ---------- فرم درخواست ---------- */
.cst-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cst-form-grid .full{grid-column:1 / -1}
.cst-form-grid label{display:block}
.cst-form-grid label span{display:block;color:var(--muted);font-size:.78rem;margin-bottom:5px}
.cst-form-grid input,.cst-form-grid textarea{
  width:100%;background:var(--bg-2);border:1px solid var(--line);color:var(--txt);
  border-radius:9px;padding:9px 11px;font:inherit;font-size:.86rem
}
.cst-form-grid input:focus,.cst-form-grid textarea:focus{outline:none;border-color:var(--accent)}

/* ---------- نوار پایین موبایل ---------- */
.cst-mobile-bar{display:none}
@media (max-width:720px){
  .cst-mobile-bar{
    display:flex;position:fixed;bottom:0;inset-inline:0;z-index:50;background:var(--panel-2);
    border-top:1px solid var(--line);padding:10px 14px;align-items:center;gap:10px;
    box-shadow:0 -6px 20px rgba(0,0,0,.35)
  }
  .cst-mobile-bar .cst-mb-total{flex:1;font-size:.95rem;font-weight:700;color:#fff}
  .cst-mobile-bar .cst-mb-total small{display:block;color:var(--muted);font-weight:400;font-size:.68rem}
  body{padding-bottom:64px}
}

@media (max-width:600px){
  .cst-hero h1{font-size:1.25rem}
  .cst-form-grid{grid-template-columns:1fr}
  .cst-summary{position:static}
}

.cst-note{font-size:.82rem;color:var(--green);min-height:1.4em;margin-top:8px}