/* ═══════════════════════════════════════════════════════════════════
   STUDENTS.CSS — تسريعة للطلاب
   Premium Dark Futuristic | Orange Glow | RTL
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. HERO ─────────────────────────────────────────────────────── */
.st-hero {
  min-height: 100svh;
  display: flex; align-items: center;
  padding: calc(var(--header-h,70px) + 60px) 0 80px;
  position: relative; overflow: hidden;
}
.st-hero-bg { position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0; }
.st-hero-grid {
  display: none;
}
.st-hero-glow-1 {
  position:absolute; width:700px;height:500px; top:-100px;right:5%;
  background:radial-gradient(ellipse,rgba(245,158,11,.18) 0%,transparent 65%);
  filter:blur(80px); animation:stPulse 7s ease-in-out infinite;
}
.st-hero-glow-2 {
  position:absolute; width:400px;height:400px; bottom:-80px;left:10%;
  background:radial-gradient(ellipse,rgba(245,158,11,.1) 0%,transparent 70%);
  filter:blur(90px); animation:stPulse 9s ease-in-out infinite 3s;
}
@keyframes stPulse { 0%,100%{opacity:.7;transform:scale(1)} 50%{opacity:1;transform:scale(1.1)} }

.st-hero-layout {
  display:grid; grid-template-columns:1fr 1fr;
  gap:56px; align-items:center; position:relative;z-index:2;
}

/* Push text content down */
.st-hero-layout > div:not(.st-hero-visual) {
  padding-top: 40px;
}

/* Badge */
.st-badge {
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 16px;border-radius:999px;
  background:var(--or-glow-2);border:1px solid var(--or-bdr);
  font-size:.78rem;font-weight:700;color:var(--or);
  letter-spacing:.04em;margin-bottom:20px;width:fit-content;
  animation:fadeInDown .5s ease both;
}
.st-badge-dot { width:6px;height:6px;border-radius:50%;background:var(--or);box-shadow:0 0 8px var(--or);animation:stBlink 2s ease-in-out infinite; }
@keyframes stBlink { 0%,100%{opacity:1;box-shadow:0 0 8px var(--or)} 50%{opacity:.3;box-shadow:none} }

.st-hero-title {
  font-size:clamp(2.6rem,5.2vw,4.4rem);font-weight:900;
  line-height:1.22;letter-spacing:-.03em;color:var(--tx);
  margin-bottom:20px;animation:fadeInUp .6s ease .1s both;
}
.st-hero-title .grad {
  display:block;
  margin-top:0.20em;
  padding-bottom:0.16em;
  background:linear-gradient(135deg,#FFD080 0%,#F59E0B 45%,#FF5500 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.st-hero-desc {
  font-size:1rem;color:var(--tx-2);line-height:1.8;
  max-width:430px;margin-bottom:36px;animation:fadeInUp .6s ease .2s both;
}
.st-hero-actions { display:flex;gap:13px;flex-wrap:wrap;margin-bottom:40px;animation:fadeInUp .6s ease .3s both; }
.st-trust { display:flex;align-items:center;gap:14px;animation:fadeInUp .6s ease .4s both; }
.st-avatars { display:flex;align-items:center; }
.st-avatar {
  width:33px;height:33px;border-radius:50%;
  border:2px solid var(--bg-1);
  background:linear-gradient(135deg,rgba(245,158,11,.35),rgba(245,158,11,.1));
  display:flex;align-items:center;justify-content:center;
  font-size:.78rem;font-weight:800;color:var(--tx);
  margin-right:-9px;box-shadow:0 0 0 2px rgba(245,158,11,.15);
}
.st-trust-text { font-size:.79rem;color:var(--tx-3);line-height:1.5; }
.st-trust-text strong { color:var(--or); }
.st-trust-rating { display:flex;align-items:center;gap:7px; }
.st-trust-stars { color:var(--or);font-size:.85rem;letter-spacing:1px; }

@keyframes fadeInUp   { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }
@keyframes fadeInDown { from{opacity:0;transform:translateY(-12px)} to{opacity:1;transform:none} }

/* ── HERO VISUAL (Dashboard Card) ─────────────────────────────── */
.st-hero-visual {
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:500px;animation:fadeIn .8s ease .2s both;
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

.st-hero-visual-glow {
  position:absolute;width:420px;height:420px;
  background:radial-gradient(circle,rgba(245,158,11,.22) 0%,transparent 65%);
  border-radius:50%;filter:blur(55px);pointer-events:none;
  animation:stPulse 4.5s ease-in-out infinite;
}

/* Dashboard card */
.st-dashboard {
  position:relative;z-index:2;
  background:rgba(10,14,30,.82);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(245,158,11,.22);
  border-radius:20px;
  padding:24px;
  width:380px;max-width:100%;
  box-shadow:0 32px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.04),0 0 60px rgba(245,158,11,.1);
  animation:dashFloat 5s ease-in-out infinite;
}
@keyframes dashFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }

.st-dash-header {
  display:flex;align-items:center;gap:10px;margin-bottom:18px;
  padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.07);
}
.st-dash-dots { display:flex;gap:5px; }
.st-dash-dot  { width:10px;height:10px;border-radius:50%; }
.st-dash-dot:nth-child(1){background:#ff5f56;}
.st-dash-dot:nth-child(2){background:#ffbd2e;}
.st-dash-dot:nth-child(3){background:#27c93f;}
.st-dash-title { font-size:.88rem;font-weight:700;color:var(--tx);margin-right:auto; }

/* Progress */
.st-dash-progress-label { display:flex;justify-content:space-between;margin-bottom:7px; }
.st-dash-progress-label span { font-size:.76rem;color:var(--tx-3); }
.st-dash-progress-label strong { font-size:.78rem;font-weight:800;color:var(--or); }
.st-dash-bar {
  height:7px;border-radius:999px;background:rgba(255,255,255,.07);
  overflow:hidden;margin-bottom:20px;
}
.st-dash-bar-fill {
  height:100%;border-radius:999px;width:72%;
  background:linear-gradient(90deg,#F59E0B,#FFD080);
  box-shadow:0 0 12px rgba(245,158,11,.5);
  animation:barFill 1.2s ease .5s both;
  transform-origin:left;
}
@keyframes barFill { from{width:0} to{width:72%} }

/* Service icons row */
.st-dash-icons { display:flex;gap:10px;margin-bottom:20px; }
.st-dash-icon {
  flex:1;padding:12px 8px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  transition:border-color .2s;cursor:default;
}
.st-dash-icon:hover { border-color:rgba(245,158,11,.3); }
.st-dash-icon-emoji { font-size:1.3rem; }
.st-dash-icon-lbl { font-size:.62rem;color:var(--tx-4);font-weight:600; }

/* Files list */
.st-dash-files-title { font-size:.72rem;color:var(--tx-4);font-weight:700;margin-bottom:10px;text-transform:uppercase;letter-spacing:.04em; }
.st-dash-file {
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:9px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);
  margin-bottom:7px;transition:border-color .2s;
}
.st-dash-file:hover { border-color:rgba(245,158,11,.2); }
.st-dash-file-icon { font-size:1.1rem;flex-shrink:0; }
.st-dash-file-name { font-size:.75rem;font-weight:600;color:var(--tx);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.st-dash-file-size { font-size:.68rem;color:var(--tx-4); }

/* Floating badge cards */
.st-float-card {
  position:absolute;z-index:3;
  background:rgba(10,14,30,.9);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(245,158,11,.25);
  border-radius:14px;padding:12px 16px;
  box-shadow:0 10px 36px rgba(0,0,0,.4),0 0 20px rgba(245,158,11,.08);
}
.st-float-top {
  top:-24px;right:-24px;
  animation:float1 3.5s ease-in-out infinite;
}
.st-float-bottom {
  bottom:24px;left:-32px;
  animation:float1 4s ease-in-out infinite 2s;
}
.st-float-mid {
  bottom:-20px;right:20px;
  animation:float1 5s ease-in-out infinite 1s;
}
@keyframes float1 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

.st-float-card-val { font-size:1rem;font-weight:900;color:var(--or);line-height:1; }
.st-float-card-lbl { font-size:.68rem;color:var(--tx-3);margin-top:3px; }
.st-float-card-icon { font-size:1.4rem;margin-bottom:5px; }

/* ── 2. SERVICES SECTION ─────────────────────────────────────────── */
.st-services { padding:100px 0;position:relative; }
.st-services::before {
  content:'';position:absolute;width:600px;height:400px;top:0;left:50%;transform:translateX(-50%);
  background:radial-gradient(ellipse,rgba(245,158,11,.07) 0%,transparent 65%);
  filter:blur(80px);pointer-events:none;
}

.st-services-grid {
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:16px;margin-top:48px;
}

.st-svc-card {
  padding:28px 22px 40px;
  position:relative;overflow:hidden;cursor:pointer;
  background:var(--surface-1);border:1px solid var(--bdr);
  border-radius:16px;
  transition:transform .28s var(--ease-spring),border-color .2s,box-shadow .28s;
}
.st-svc-card::after {
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(245,158,11,.07) 0%,transparent 60%);
  opacity:0;transition:opacity .25s;pointer-events:none;
}
.st-svc-card:hover { transform:translateY(-6px);border-color:var(--or-bdr)!important;box-shadow:0 20px 55px rgba(0,0,0,.3),0 0 0 1px rgba(245,158,11,.1); }
.st-svc-card:hover::after { opacity:1; }

.st-svc-num { position:absolute;top:18px;left:20px;font-size:3.5rem;font-weight:900;color:var(--or);opacity:.05;line-height:1;user-select:none;transition:opacity .3s; }
.st-svc-card:hover .st-svc-num { opacity:.12; }

.st-svc-icon { margin-bottom:18px;position:relative;z-index:1; }
.st-svc-title { font-size:.95rem;font-weight:800;color:var(--tx);margin-bottom:9px;line-height:1.3;position:relative;z-index:1; }
.st-svc-desc  { font-size:.78rem;color:var(--tx-3);line-height:1.65;margin-bottom:18px;position:relative;z-index:1; }

.st-svc-arrow {
  position:absolute;bottom:20px;left:20px;
  width:32px;height:32px;border-radius:50%;
  border:1.5px solid var(--bdr);
  display:flex;align-items:center;justify-content:center;
  color:var(--tx-4);font-size:.95rem;
  transition:all .28s var(--ease-spring);z-index:1;
}
.st-svc-card:hover .st-svc-arrow { border-color:var(--or);color:var(--or);background:var(--or-glow-2);transform:translateX(-4px) rotate(-45deg); }

/* Mobile services slider */
.st-services-slider-wrap { display:none;overflow-x:auto;gap:14px;padding:4px 0 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch; }
.st-services-slider-wrap::-webkit-scrollbar { display:none; }

/* ── 3. WHY SECTION ──────────────────────────────────────────────── */
.st-why { padding:100px 0;position:relative;overflow:hidden; }
.st-why::before {
  content:'';position:absolute;width:700px;height:500px;bottom:0;right:-80px;
  background:radial-gradient(ellipse,rgba(245,158,11,.06) 0%,transparent 65%);
  filter:blur(80px);pointer-events:none;
}

.st-why-grid { display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:48px; }

.st-why-card {
  padding:28px 22px;text-align:center;
  background:var(--surface-1);border:1px solid var(--bdr);border-radius:16px;
  transition:transform .28s var(--ease-spring),border-color .2s,box-shadow .28s;
  position:relative;overflow:hidden;
}
.st-why-card::before { content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(245,158,11,.06),transparent 60%);opacity:0;transition:opacity .25s;pointer-events:none; }
.st-why-card:hover { transform:translateY(-5px);border-color:var(--or-bdr);box-shadow:0 16px 44px rgba(245,158,11,.1); }
.st-why-card:hover::before { opacity:1; }
.st-why-icon { margin-bottom:14px; }
.st-why-title { font-size:.9rem;font-weight:800;color:var(--tx);margin-bottom:8px; }
.st-why-desc  { font-size:.78rem;color:var(--tx-3);line-height:1.65; }

/* ── 4. STEPS SECTION ────────────────────────────────────────────── */
.st-steps { padding:100px 0;position:relative; }

.st-steps-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:56px;position:relative; }
.st-steps-grid::before {
  content:'';position:absolute;top:44px;right:12.5%;left:12.5%;height:2px;
  background:linear-gradient(90deg,rgba(245,158,11,.3),rgba(245,158,11,.6),rgba(245,158,11,.3));
  z-index:0;
}

.st-step {
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:0 16px;position:relative;z-index:1;
}
.st-step-num {
  width:90px;height:90px;border-radius:50%;
  background:var(--surface-1);border:2px solid var(--or);
  display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;font-weight:900;color:var(--or);
  margin-bottom:20px;
  box-shadow:0 0 24px rgba(245,158,11,.25);
  position:relative;
  transition:box-shadow .3s,transform .3s;
}
.st-step:hover .st-step-num { box-shadow:0 0 40px rgba(245,158,11,.5);transform:scale(1.05); }
.st-step-icon-inner { font-size:2rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); }
.st-step-badge {
  position:absolute;top:-8px;right:-8px;
  width:26px;height:26px;border-radius:50%;
  background:var(--or);color:#fff;
  font-size:.72rem;font-weight:900;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 10px rgba(245,158,11,.5);
}
.st-step-title { font-size:.95rem;font-weight:800;color:var(--tx);margin-bottom:8px; }
.st-step-desc  { font-size:.8rem;color:var(--tx-3);line-height:1.65; }

/* ── 6. PAYMENT SECTION ─────────────────────────────────────────── */
.st-payment-section { padding:100px 0; }

/* ── 7. CTA ──────────────────────────────────────────────────────── */
.st-cta { padding:100px 0; }

/* ══════════════════════════════════════════════════
   RESPONSIVE — Tablet
   ══════════════════════════════════════════════════ */
@media(max-width:1200px) {
  .st-services-grid { grid-template-columns:repeat(3,1fr); }
  .st-why-grid      { grid-template-columns:repeat(3,1fr); }
}

@media(max-width:900px) {
  .st-hero-layout    { grid-template-columns:1fr; }
  .st-hero-visual    { order:-1; min-height:auto; margin-bottom:24px; padding:20px; }
  .st-hero-title     { font-size:clamp(2.2rem,6vw,3.4rem); text-align:center; }
  .st-hero-desc      { text-align:center; max-width:480px; margin-inline:auto; }
  .st-hero-actions   { justify-content:center; }
  .st-trust          { justify-content:center; }
  .st-badge          { margin-inline:auto; }
  .st-dashboard      { width:340px; }
  .st-services-grid  { display:none; }
  .st-services-slider-wrap { display:flex; }
  .st-svc-card       { flex:0 0 220px; }
  .st-why-grid       { grid-template-columns:repeat(2,1fr); }
  .st-steps-grid     { grid-template-columns:1fr 1fr; row-gap:32px; }
  .st-steps-grid::before { display:none; }
  .st-member-row     { grid-template-columns:1fr 1fr; }
}

@media(prefers-reduced-motion:reduce){
  .st-dashboard,.st-float-card,.st-dash-bar-fill { animation:none!important; }
}

/* ══════════════════════════════════════════════════
   ORDER BUILDER — Responsive
   ══════════════════════════════════════════════════ */
@media(max-width:1100px){
  .st-builder-layout { grid-template-columns:300px 1fr; gap:20px; }
}
@media(max-width:900px){
  .st-builder-layout { grid-template-columns:1fr; }
  .st-builder-sidebar { position:static; order:2; }
  .st-live-dash { margin-bottom:0; }
  .st-opt-grid { grid-template-columns:1fr 1fr; }
  .st-member-fields { grid-template-columns:1fr 1fr; }
}

/* ══════════════════════════════════════════════════
   MOBILE — Full overhaul (≤ 640px)
   ══════════════════════════════════════════════════ */
@media(max-width:640px) {

  /* ── Hero ── */
  .st-hero {
    padding: calc(var(--header-h,60px) + 20px) 0 44px;
    min-height: auto;
  }
  .st-hero-layout { gap: 0; }

  /* ── Visual on top — compact & lag-free ── */
  .st-hero-visual {
    order: -1;
    min-height: auto;
    height: auto;
    margin-bottom: 16px;
    padding: 28px 16px 16px;
  }
  .st-hero-visual-glow { width:260px; height:260px; }

  /* Dashboard — full width, no float animation */
  .st-dashboard {
    width: 100%;
    max-width: 100%;
    padding: 16px;
    border-radius: 14px;
    animation: none !important;
    transform: none !important;
    box-shadow: 0 12px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04);
  }
  .st-dash-header   { margin-bottom: 12px; padding-bottom: 10px; }
  .st-dash-dot      { width: 8px; height: 8px; }
  .st-dash-title    { font-size: .8rem; }
  .st-dash-progress-label { margin-bottom: 5px; }
  .st-dash-bar      { margin-bottom: 14px; }
  .st-dash-icons    { gap: 6px; margin-bottom: 14px; }
  .st-dash-icon     { padding: 8px 6px; border-radius: 8px; min-width: 0; }
  .st-dash-icon-emoji { font-size: 1.1rem; }
  .st-dash-icon-lbl { font-size: .56rem; }
  .st-dash-files-title { margin-bottom: 7px; }
  .st-dash-file     { padding: 7px 8px; margin-bottom: 5px; }
  .st-dash-file-name { font-size: .7rem; }
  .st-dash-file-size { font-size: .62rem; }

  /* Float cards — hide to avoid overflow & lag */
  .st-float-top, .st-float-bottom, .st-float-mid { display: none !important; }

  /* Content */
  .st-badge        { margin-inline:auto; margin-bottom:14px; }
  .st-hero-title {
    font-size: clamp(1.95rem,9vw,2.7rem);
    line-height: 1.18;
    text-align: center;
    margin-bottom: 14px;
  }
  .st-hero-title .grad { margin-top:0.1em; padding-bottom:0.14em; }

  .st-hero-desc {
    font-size: .92rem;
    line-height: 1.75;
    text-align: center;
    max-width: 340px;
    margin-inline: auto;
    margin-bottom: 22px;
  }
  .st-hero-actions {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
    margin-bottom: 22px;
  }
  .st-hero-actions .btn {
    width: 100%;
    justify-content: center;
    padding: 14px 20px;
    font-size: .97rem;
  }
  .st-trust { justify-content:center; flex-wrap:wrap; gap:10px; }
  .st-trust-text { text-align:center; font-size:.77rem; }

  /* ── Sections ── */
  .st-services-grid { grid-template-columns:1fr; }
  .st-why-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .st-steps-grid { grid-template-columns:1fr; }

  /* ── Builder layout — sidebar goes below on mobile ── */
  .st-builder-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .st-builder-sidebar { order: 2; }
  .st-builder-right  { order: 1; }

  /* ── Live dashboard — compact on mobile ── */
  .st-live-dash { padding: 16px; }
  .st-live-hero { flex-direction: row; gap: 12px; align-items: center; justify-content: flex-start; }
  .st-live-ring-wrap { width: 72px; height: 72px; flex-shrink: 0; }
  .st-live-pct { font-size: .9rem; }
  .st-live-price { font-size: 1.3rem; }
  .st-live-price-wrap { text-align: right; }
  .st-live-rows { gap: 1px; }
  .st-live-row { padding: 8px 10px; }
  .st-live-row-lbl { font-size: .6rem; }
  .st-live-row-val { font-size: .75rem; }

  /* Sidebar CTA button — hide on mobile, nav buttons handle flow */
  .st-builder-sidebar .btn { display: none; }

  /* ── Progress steps ── */
  .st-progress-bar { gap: 0; margin-bottom: 20px; }
  .st-prog-lbl { font-size: .65rem; }
  .st-prog-num { width: 30px; height: 30px; font-size: .75rem; }
  .st-prog-step:not(:last-child)::after {
    left: calc(50% + 18px);
    right: calc(-50% + 18px);
  }

  /* ── Panel glass ── */
  .st-panel-glass { padding: 18px 14px; border-radius: 16px; }
  .st-panel-title { font-size: 1rem; }
  .st-panel-sub { font-size: .8rem; margin-bottom: 20px; }

  /* ── Service pills — wrap nicely ── */
  .st-service-pills { gap: 6px; }
  .st-pill {
    padding: 9px 13px;
    font-size: .8rem;
    border-radius: 10px;
    flex-shrink: 0;
  }

  /* ── Slider ── */
  .st-slider-num { font-size: 1.6rem; }
  .st-range-slider::-webkit-slider-thumb { width: 22px; height: 22px; }

  /* ── Option modules — 2 col on mobile ── */
  .st-opt-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .st-opt-module { padding: 12px 10px; }
  .st-opt-module-icon { font-size: 1.2rem; }
  .st-opt-module-name { font-size: .76rem; }
  .st-opt-module-price { font-size: .68rem; }

  /* ── Toggles ── */
  .st-toggle-premium { padding: 12px 14px; }
  .st-toggle-premium-name { font-size: .82rem; }
  .st-toggle-premium-desc { font-size: .7rem; }
  .st-toggle-btn { width: 44px; height: 24px; }
  .st-toggle-thumb { width: 18px; height: 18px; top: 3px; right: 3px; }
  .st-toggle-btn.on .st-toggle-thumb { transform: translateX(-20px); }

  /* ── Client grid — single column ── */
  .st-client-grid { grid-template-columns: 1fr; gap: 8px; }
  .st-client-full { grid-column: 1; }
  .st-premium-input { padding: 12px 38px 12px 14px; font-size: .88rem; }

  /* ── Team members ── */
  .st-member-card { flex-wrap: wrap; padding: 12px; gap: 8px; }
  .st-member-avatar { width: 36px; height: 36px; font-size: .9rem; }
  .st-member-fields { grid-template-columns: 1fr; gap: 6px; flex: 1 1 100%; }
  .st-member-del-btn { width: 28px; height: 28px; }
  .st-add-member-premium { padding: 12px; font-size: .84rem; }

  /* ── Summary block ── */
  .st-summary-block { padding: 14px; }
  .st-sum-row { font-size: .8rem; flex-wrap: wrap; gap: 2px; }
  .st-sum-val { max-width: 100%; text-align: right; }

  /* ── Price breakdown ── */
  .st-price-breakdown { padding: 14px; }
  .st-price-total-num { font-size: 1.4rem; }

  /* ── WhatsApp button ── */
  .st-whatsapp-btn { font-size: .92rem; padding: 15px 16px; border-radius: 12px; }

  /* ── Nav buttons ── */
  .st-panel-nav {
    flex-direction: column-reverse;
    gap: 10px;
    margin-top: 20px;
  }
  .st-panel-nav .btn {
    width: 100%;
    justify-content: center;
    padding: 14px;
    font-size: .9rem;
  }

  /* ── Step sections ── */
  .st-field-group { margin-bottom: 18px; }
  .st-field-label { font-size: .8rem; margin-bottom: 10px; }

  /* ── Why grid ── */
  .st-why-card { padding: 20px 14px; }
  .st-why-title { font-size: .85rem; }
  .st-why-desc { font-size: .74rem; }

  /* ── Steps section fix ── */
  .st-step { padding: 0 8px; }
  .st-step-num { width: 70px; height: 70px; }
  .st-step-icon-inner { font-size: 1.5rem; }

  /* ── Live extras ── */
  .st-live-extra-tag { font-size: .63rem; padding: 2px 8px; }
}

/* ══ Very small phones (≤ 380px) ═══════════════════════════════════ */
@media(max-width:380px) {
  .st-pill { padding: 7px 10px; font-size: .75rem; }
  .st-opt-grid { grid-template-columns: 1fr; }
  .st-hero-title { font-size: 1.7rem; }
  .st-panel-glass { padding: 14px 12px; }
  .st-live-dash { padding: 12px; }
}

/* ── ORDER BACKGROUND ─────────────────────────────────────────────── */
.st-order { padding:100px 0; position:relative; overflow:hidden; }
.st-order-bg { position:absolute; inset:0; pointer-events:none; z-index:0; }
.st-order-glow-1 {
  position:absolute; width:700px; height:600px;
  top:-100px; left:-100px;
  background:radial-gradient(ellipse, rgba(245,158,11,.1) 0%, transparent 65%);
  filter:blur(100px); animation:stPulse 8s ease-in-out infinite;
}
.st-order-glow-2 {
  position:absolute; width:600px; height:500px;
  bottom:-100px; right:-80px;
  background:radial-gradient(ellipse, rgba(245,158,11,.07) 0%, transparent 65%);
  filter:blur(100px); animation:stPulse 10s ease-in-out infinite 4s;
}
.st-order-grid {
  display: none;
}
.st-order-particles { position:absolute; inset:0; pointer-events:none; }

/* ── BUILDER LAYOUT — 2 columns ───────────────────────────────────── */
.st-builder-layout {
  display:grid;
  grid-template-columns: 340px 1fr;
  gap:28px;
  align-items:start;
  margin-top:48px;
}

/* ── LEFT SIDEBAR — LIVE DASHBOARD ────────────────────────────────── */
.st-builder-sidebar { position:sticky; top:calc(var(--header-h,70px) + 20px); }

.st-live-dash {
  background: rgba(8,12,28,.88);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(245,158,11,.22);
  border-radius: 20px;
  padding: 24px;
  box-shadow:
    0 32px 80px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.04),
    0 0 50px rgba(245,158,11,.08),
    inset 0 1px 0 rgba(255,255,255,.06);
  position:relative; overflow:hidden;
}
.st-live-dash::before {
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(245,158,11,.06) 0%,transparent 50%);
  pointer-events:none;
}

/* Dashboard header */
.st-live-header {
  display:flex; align-items:center; gap:10px;
  padding-bottom:16px; margin-bottom:20px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.st-live-dots { display:flex; gap:5px; }
.st-live-dot  { width:10px; height:10px; border-radius:50%; }
.st-live-dot.r { background:#ff5f56; }
.st-live-dot.y { background:#ffbd2e; }
.st-live-dot.g { background:#27c93f; }
.st-live-title { font-size:.78rem; font-weight:700; color:var(--tx-3); flex:1; }
.st-live-badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px; border-radius:999px;
  background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.3);
  font-size:.66rem; font-weight:800; color:#22c55e;
}
.st-live-pulse {
  width:6px; height:6px; border-radius:50%; background:#22c55e;
  animation:stBlink 1.5s ease-in-out infinite;
}

/* Progress ring + price hero */
.st-live-hero {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:22px;
}
.st-live-ring-wrap { position:relative; width:100px; height:100px; flex-shrink:0; }
.st-live-ring-svg  { width:100%; height:100%; }
.st-ring-bg    { stroke:rgba(255,255,255,.07); }
.st-ring-fill  {
  stroke:url(#ringGrad);
  transition:stroke-dashoffset .8s cubic-bezier(.4,0,.2,1);
  filter:drop-shadow(0 0 6px rgba(245,158,11,.6));
}
.st-live-ring-inner {
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.st-live-pct     { font-size:1.1rem; font-weight:900; color:var(--or); line-height:1; }
.st-live-pct-lbl { font-size:.62rem; color:var(--tx-4); margin-top:2px; }

.st-live-price-wrap { text-align:center; flex:1; }
.st-live-price-lbl  { font-size:.72rem; color:var(--tx-4); margin-bottom:4px; }
.st-live-price      { font-size:1.6rem; font-weight:900; color:var(--or); line-height:1; transition:all .4s var(--ease-spring); }
.st-live-delivery   { font-size:.74rem; color:var(--tx-3); margin-top:6px; }

/* Status rows */
.st-live-rows { display:flex; flex-direction:column; gap:2px; margin-bottom:16px; }
.st-live-row  {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.05);
  transition:border-color .2s, background .2s;
}
.st-live-row:hover { border-color:rgba(245,158,11,.15); background:rgba(245,158,11,.03); }
.st-live-row-icon { font-size:1rem; flex-shrink:0; width:24px; text-align:center; }
.st-live-row-body { flex:1; min-width:0; }
.st-live-row-lbl  { font-size:.66rem; color:var(--tx-4); font-weight:600; }
.st-live-row-val  { font-size:.8rem; font-weight:700; color:var(--tx); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:all .3s; }
.st-live-row-status {
  width:20px; height:20px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:.65rem; font-weight:800;
}
.st-live-row-status.ok      { background:rgba(34,197,94,.15); color:#22c55e; border:1px solid rgba(34,197,94,.3); }
.st-live-row-status.pending { background:rgba(255,255,255,.05); color:var(--tx-4); border:1px solid rgba(255,255,255,.08); }

/* Extras pills */
.st-live-extras { display:flex; flex-wrap:wrap; gap:6px; min-height:16px; }
.st-live-extra-tag {
  padding:3px 10px; border-radius:999px;
  background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.25);
  font-size:.68rem; font-weight:700; color:var(--or);
  animation:fadeInUp .25s ease;
}

/* ── BUILDER RIGHT ─────────────────────────────────────────────────── */
.st-builder-right { display:flex; flex-direction:column; gap:0; }

/* Progress steps */
.st-progress-bar {
  display:flex; align-items:center; justify-content:center;
  gap:0; margin-bottom:28px;
}
.st-prog-step {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  flex:1; max-width:140px; position:relative;
}
.st-prog-step:not(:last-child)::after {
  content:''; position:absolute; top:18px;
  left:calc(50% + 22px); right:calc(-50% + 22px);
  height:2px; background:var(--bdr); z-index:0;
  transition:background .4s;
}
.st-prog-step.done:not(:last-child)::after  { background:var(--or); }
.st-prog-step.active:not(:last-child)::after{ background:linear-gradient(90deg,var(--or),var(--bdr)); }
.st-prog-num {
  width:36px; height:36px; border-radius:50%;
  background:var(--surface-1); border:2px solid var(--bdr);
  display:flex; align-items:center; justify-content:center;
  font-size:.8rem; font-weight:800; color:var(--tx-3);
  position:relative; z-index:1; transition:all .3s;
}
.st-prog-step.active .st-prog-num { border-color:var(--or); color:var(--or); box-shadow:0 0 16px rgba(245,158,11,.4); }
.st-prog-step.done   .st-prog-num { background:var(--or); border-color:var(--or); color:#fff; }
.st-prog-lbl { font-size:.72rem; color:var(--tx-4); font-weight:700; }
.st-prog-step.active .st-prog-lbl { color:var(--or); }
.st-prog-step.done   .st-prog-lbl { color:var(--tx-2); }

/* Step panels */
.st-step-panel { display:none; }
.st-step-panel.active { display:block; animation:panelSlide .35s cubic-bezier(.4,0,.2,1); }
@keyframes panelSlide { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }

.st-panel-glass {
  background:rgba(8,12,28,.82);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px; padding:32px;
  box-shadow:0 24px 64px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.03);
  position:relative; overflow:hidden;
}
.st-panel-glass::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(245,158,11,.04) 0%,transparent 50%);
  pointer-events:none;
}
.st-panel-title { font-size:1.2rem; font-weight:900; color:var(--tx); margin-bottom:6px; position:relative;z-index:1; }
.st-panel-sub   { font-size:.86rem; color:var(--tx-3); margin-bottom:28px; position:relative;z-index:1; }
.st-panel-nav   { display:flex; justify-content:space-between; align-items:center; margin-top:28px; gap:12px; position:relative;z-index:1; }
.st-panel-nav .btn { min-width:140px; justify-content:center; }

/* Field groups */
.st-field-group { margin-bottom:24px; position:relative; z-index:1; }
.st-field-label { display:block; font-size:.84rem; font-weight:700; color:var(--tx-2); margin-bottom:12px; }

/* Service pills */
.st-service-pills { display:flex; flex-wrap:wrap; gap:8px; }
.st-pill {
  padding:9px 16px; border-radius:10px;
  border:1.5px solid var(--bdr); background:var(--surface-1);
  color:var(--tx-3); font-family:inherit; font-size:.83rem; font-weight:700;
  cursor:pointer; transition:all .2s var(--ease-spring);
  white-space:nowrap;
}
.st-pill:hover { border-color:rgba(245,158,11,.4); color:var(--or); background:rgba(245,158,11,.06); }
.st-pill.active {
  background:var(--or); border-color:var(--or); color:#fff;
  box-shadow:0 4px 18px rgba(245,158,11,.4);
}

/* Premium slider */
.st-slider-header  { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.st-slider-display { display:flex; align-items:baseline; gap:5px; }
.st-slider-num     { font-size:2rem; font-weight:900; color:var(--or); line-height:1; transition:all .2s; }
.st-slider-unit    { font-size:.8rem; color:var(--tx-3); font-weight:600; }
.st-slider-track-wrap { position:relative; padding:8px 0; }
.st-range-slider {
  width:100%; -webkit-appearance:none; appearance:none;
  height:8px; border-radius:4px; outline:none; cursor:pointer;
  background:rgba(255,255,255,.07); position:relative; z-index:1;
}
.st-range-slider::-webkit-slider-thumb {
  -webkit-appearance:none; width:26px; height:26px; border-radius:50%;
  background:linear-gradient(135deg,#F59E0B,#FF5500); cursor:pointer;
  border:3px solid var(--bg-0); box-shadow:0 0 14px rgba(245,158,11,.6);
  transition:box-shadow .2s, transform .2s;
}
.st-range-slider::-webkit-slider-thumb:hover { box-shadow:0 0 22px rgba(245,158,11,.9); transform:scale(1.1); }
.st-slider-marks { display:flex; justify-content:space-between; margin-top:8px; }
.st-slider-marks span { font-size:.68rem; color:var(--tx-5); }

/* Option modules */
.st-opt-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.st-opt-module {
  position:relative; overflow:hidden;
  padding:16px 14px; border-radius:13px;
  background:rgba(255,255,255,.03); border:1.5px solid rgba(255,255,255,.07);
  cursor:pointer; transition:all .25s var(--ease-spring);
  display:flex; flex-direction:column; gap:8px;
}
.st-opt-module:hover { border-color:rgba(245,158,11,.3); transform:translateY(-2px); }
.st-opt-module.selected {
  border-color:var(--or); background:rgba(245,158,11,.08);
  box-shadow:0 0 0 1px rgba(245,158,11,.3), 0 8px 24px rgba(245,158,11,.1);
  transform:translateY(-3px);
}
.st-opt-module-glow {
  position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(ellipse at 50% 0%, rgba(245,158,11,.15), transparent 70%);
  opacity:0; transition:opacity .3s; pointer-events:none;
}
.st-opt-module.selected .st-opt-module-glow { opacity:1; }
.st-opt-module-icon { font-size:1.4rem; }
.st-opt-module-body { flex:1; }
.st-opt-module-name  { font-size:.83rem; font-weight:700; color:var(--tx); margin-bottom:3px; }
.st-opt-module-price { font-size:.74rem; font-weight:700; color:var(--or); }
.st-opt-module-check {
  width:22px; height:22px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.15); background:transparent;
  display:flex; align-items:center; justify-content:center;
  color:transparent; align-self:flex-end;
  transition:all .25s var(--ease-spring);
}
.st-opt-module.selected .st-opt-module-check {
  background:var(--or); border-color:var(--or);
  color:#fff; box-shadow:0 0 10px rgba(245,158,11,.5);
}

/* Premium toggles */
.st-toggle-premium {
  display:flex; align-items:center; gap:14px;
  padding:16px 18px; border-radius:13px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);
  margin-bottom:10px; cursor:pointer; position:relative; overflow:hidden;
  transition:border-color .2s;
}
.st-toggle-premium:hover { border-color:rgba(245,158,11,.2); }
.st-toggle-premium-glow {
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 30% 50%, rgba(245,158,11,.08), transparent 70%);
  opacity:0; transition:opacity .3s; pointer-events:none;
}
.st-toggle-premium.on .st-toggle-premium-glow { opacity:1; }
.st-toggle-premium-icon { font-size:1.3rem; flex-shrink:0; }
.st-toggle-premium-body { flex:1; }
.st-toggle-premium-name { font-size:.88rem; font-weight:700; color:var(--tx); }
.st-toggle-premium-desc { font-size:.76rem; color:var(--tx-3); margin-top:2px; }
.st-toggle-btn {
  position:relative; width:50px; height:28px; flex-shrink:0;
  background:rgba(255,255,255,.1); border-radius:14px;
  border:none; cursor:pointer;
  transition:background .25s; outline:none;
}
.st-toggle-btn.on { background:var(--or); box-shadow:0 0 14px rgba(245,158,11,.5); }
.st-toggle-thumb {
  position:absolute; top:3px; right:3px;
  width:22px; height:22px; border-radius:50%;
  background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.3);
  transition:transform .28s var(--ease-spring);
}
.st-toggle-btn.on .st-toggle-thumb { transform:translateX(-22px); }

/* ── TEAM MEMBERS ────────────────────────────────────────────────── */
.st-member-list { display:flex; flex-direction:column; gap:12px; margin-bottom:20px; }
.st-member-card {
  display:flex; align-items:center; gap:14px;
  padding:16px; border-radius:14px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);
  transition:border-color .2s;
  animation:fadeInUp .25s ease;
}
.st-member-card:hover { border-color:rgba(245,158,11,.2); }
.st-member-avatar {
  width:44px; height:44px; border-radius:12px; flex-shrink:0;
  background:linear-gradient(135deg,rgba(245,158,11,.3),rgba(245,158,11,.1));
  border:1px solid rgba(245,158,11,.25);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; font-weight:800; color:var(--or);
}
.st-member-fields { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; flex:1; }
.st-premium-input {
  padding:10px 13px; border-radius:10px;
  background:rgba(255,255,255,.04); border:1.5px solid rgba(255,255,255,.08);
  font-family:inherit; font-size:.83rem; color:var(--tx); outline:none;
  transition:border-color .2s, background .2s; width:100%;
}
.st-premium-input:focus { border-color:var(--or); background:rgba(245,158,11,.04); }
.st-premium-input::placeholder { color:var(--tx-5); }
.st-member-del-btn {
  width:32px; height:32px; border-radius:8px; flex-shrink:0;
  border:1px solid rgba(255,255,255,.08); background:transparent;
  color:var(--tx-4); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all .18s;
}
.st-member-del-btn:hover { border-color:#EF4444; color:#EF4444; background:rgba(239,68,68,.08); }
.st-add-member-premium {
  width:100%; padding:14px; border-radius:12px;
  border:1.5px dashed rgba(245,158,11,.3); background:rgba(245,158,11,.02);
  display:flex; align-items:center; justify-content:center; gap:10px;
  color:var(--or); font-family:inherit; font-size:.88rem; font-weight:700;
  cursor:pointer; transition:all .2s;
}
.st-add-member-premium:hover { border-color:var(--or); background:rgba(245,158,11,.06); }
.st-add-member-icon {
  width:28px; height:28px; border-radius:50%;
  background:rgba(245,158,11,.15); border:1px solid rgba(245,158,11,.3);
  display:flex; align-items:center; justify-content:center; color:var(--or);
}

/* ── DROPZONE ─────────────────────────────────────────────────────── */
.st-dropzone {
  position:relative; overflow:hidden;
  border:2px dashed rgba(245,158,11,.25); border-radius:16px;
  padding:48px 24px; text-align:center; cursor:pointer;
  background:rgba(245,158,11,.02); transition:all .25s;
  margin-bottom:20px;
}
.st-dropzone:hover, .st-dropzone.dragover {
  border-color:var(--or); background:rgba(245,158,11,.05);
  box-shadow:0 0 0 1px rgba(245,158,11,.2), inset 0 0 40px rgba(245,158,11,.04);
}
/* Animated rings inside dropzone */
.st-dropzone-rings { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; opacity:0; transition:opacity .3s; }
.st-dropzone:hover .st-dropzone-rings, .st-dropzone.dragover .st-dropzone-rings { opacity:1; }
.st-dropzone-ring { position:absolute; border-radius:50%; border:1px solid; }
.st-dropzone-ring.r1 { width:120px;height:120px; border-color:rgba(245,158,11,.2); animation:ringRotate2 4s linear infinite; }
.st-dropzone-ring.r2 { width:200px;height:200px; border-color:rgba(245,158,11,.12); animation:ringRotate2 7s linear infinite reverse; }
.st-dropzone-ring.r3 { width:280px;height:280px; border-color:rgba(245,158,11,.07); animation:ringRotate2 11s linear infinite; }
@keyframes ringRotate2 { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

.st-dropzone-icon  { font-size:2.8rem; margin-bottom:12px; position:relative;z-index:1; }
.st-dropzone-title { font-size:1rem; font-weight:800; color:var(--tx); margin-bottom:6px; position:relative;z-index:1; }
.st-dropzone-sub   { font-size:.82rem; color:var(--tx-3); margin-bottom:14px; position:relative;z-index:1; }
.st-dropzone-types { display:flex; gap:7px; justify-content:center; flex-wrap:wrap; position:relative;z-index:1; }
.st-dropzone-types span { padding:3px 10px; border-radius:999px; background:var(--or-glow-2); border:1px solid var(--or-bdr); font-size:.68rem; font-weight:700; color:var(--or); }

/* File cards */
.st-file-list { display:flex; flex-direction:column; gap:8px; margin-bottom:4px; }
.st-file-card {
  display:flex; align-items:center; gap:12px;
  padding:13px 15px; border-radius:12px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
  animation:fadeInUp .22s ease;
}
.st-file-card-icon { font-size:1.4rem; flex-shrink:0; }
.st-file-card-name { font-size:.82rem; font-weight:700; color:var(--tx); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.st-file-card-size { font-size:.72rem; color:var(--tx-4); flex-shrink:0; }
.st-file-card-del  { width:28px; height:28px; border-radius:7px; border:1px solid rgba(255,255,255,.07); background:transparent; color:var(--tx-4); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:.85rem; transition:all .18s; }
.st-file-card-del:hover { border-color:#EF4444; color:#EF4444; }

/* ── PAYMENT ───────────────────────────────────────────────────────── */
.st-pay-methods { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.st-pay-method-card {
  position:relative; overflow:hidden;
  padding:24px 18px; border-radius:16px; text-align:center;
  background:rgba(255,255,255,.03); border:2px solid rgba(255,255,255,.08);
  cursor:pointer; transition:all .25s var(--ease-spring);
}
.st-pay-method-card:hover { border-color:rgba(245,158,11,.35); transform:translateY(-3px); box-shadow:0 10px 30px rgba(245,158,11,.1); }
.st-pay-method-card.selected {
  border-color:var(--or); background:rgba(245,158,11,.08);
  box-shadow:0 0 0 1px rgba(245,158,11,.3), 0 12px 36px rgba(245,158,11,.15);
  transform:translateY(-4px);
}
.st-pay-method-glow {
  position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(ellipse at 50% 0%,rgba(245,158,11,.15),transparent 70%);
  opacity:0; transition:opacity .3s; pointer-events:none;
}
.st-pay-method-card.selected .st-pay-method-glow { opacity:1; }
.st-pay-method-icon { font-size:2.4rem; margin-bottom:10px; }
.st-pay-method-name { font-size:.95rem; font-weight:800; color:var(--tx); margin-bottom:6px; }
.st-pay-method-num  { font-size:.82rem; color:var(--or); font-weight:700; direction:ltr; display:inline-block; }
.st-pay-method-check {
  position:absolute; top:10px; left:10px;
  width:22px; height:22px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.15);
  display:flex; align-items:center; justify-content:center;
  color:transparent; background:transparent;
  transition:all .25s;
}
.st-pay-method-card.selected .st-pay-method-check {
  background:var(--or); border-color:var(--or);
  color:#fff; box-shadow:0 0 10px rgba(245,158,11,.5);
}

.st-warn-premium {
  display:flex; align-items:flex-start; gap:12px;
  padding:16px 18px; border-radius:12px; margin-top:20px;
  background:rgba(245,158,11,.07); border:1px solid rgba(245,158,11,.22);
}
.st-warn-premium-icon { font-size:1.2rem; flex-shrink:0; margin-top:1px; }
.st-warn-premium-text { font-size:.82rem; color:var(--tx-2); line-height:1.65; }

/* ── SUMMARY BLOCK ────────────────────────────────────────────────── */
.st-summary-block {
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 20px;
}
.st-sum-section-title {
  font-size: .75rem; font-weight: 800; color: var(--or);
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 10px; margin-top: 4px;
}
.st-sum-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
  font-size: .84rem;
}
.st-sum-row:last-child { border-bottom: none; }
.st-sum-key { color: var(--tx-3); }
.st-sum-val { color: var(--tx); font-weight: 700; text-align: left; max-width: 58%; }
.st-sum-divider { height: 1px; background: rgba(255,255,255,.07); margin: 14px 0; }

/* ── PRICE BREAKDOWN ─────────────────────────────────────────────── */
.st-price-breakdown {
  background: rgba(8,12,28,.7);
  border: 1px solid rgba(245,158,11,.2);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 20px;
}
.st-price-row {
  display: flex; justify-content: space-between;
  font-size: .85rem; padding: 6px 0;
  color: var(--tx-3);
}
.st-price-divider { height: 1px; background: rgba(255,255,255,.08); margin: 10px 0; }
.st-price-total {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .95rem; font-weight: 800; color: var(--tx);
}
.st-price-total-num {
  font-size: 1.6rem; font-weight: 900; color: var(--or);
  font-family: inherit;
  text-shadow: 0 0 20px rgba(245,158,11,.4);
  transition: all .3s;
}

/* ── WHATSAPP SEND BTN ───────────────────────────────────────────── */
.st-whatsapp-btn {
  width: 100%; padding: 16px 24px;
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: #fff; font-family: inherit; font-size: 1rem; font-weight: 800;
  border: none; border-radius: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 6px 24px rgba(37,211,102,.3);
  transition: all .25s; position: relative; overflow: hidden;
}
.st-whatsapp-btn::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.15), transparent);
  opacity: 0; transition: opacity .2s;
}
.st-whatsapp-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(37,211,102,.45); }
.st-whatsapp-btn:hover::before { opacity: 1; }
.st-whatsapp-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* ── CLIENT DATA FIELDS ──────────────────────────────────────────────── */
.st-client-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.st-client-full { grid-column: 1 / -1; }

.st-input-wrap {
  position: relative;
}
.st-input-wrap .st-input-icon {
  position: absolute;
  top: 50%;
  right: 13px;
  transform: translateY(-50%);
  font-size: .95rem;
  pointer-events: none;
  line-height: 1;
}
.st-input-wrap textarea + .st-input-icon {
  top: 14px;
  transform: none;
}
.st-input-wrap .st-premium-input {
  padding-right: 38px;
}
.st-client-input::placeholder { color: var(--tx-5); }
.st-client-input:focus { border-color: var(--or); background: rgba(245,158,11,.04); box-shadow: 0 0 0 3px rgba(245,158,11,.08); }

/* ── MOBILE STICKY BOTTOM BAR ─────────────────────────────────────── */
.mob-step-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 50;
  background: rgba(8,12,28,.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 -8px 32px rgba(0,0,0,.5);
}

@media(max-width:640px) {
  .mob-step-bar { display: flex; }
  /* Add bottom padding to page so content isn't hidden behind bar */
  body { padding-bottom: 80px; }
}

.mob-step-bar-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mob-step-bar-label {
  font-size: .72rem;
  color: var(--tx-3);
  font-weight: 600;
}
.mob-step-bar-price {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--or);
  font-family: inherit;
}
.mob-step-bar-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 22px;
  background: linear-gradient(135deg, var(--or), #FF5500);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(245,158,11,.4);
  transition: all .2s;
}
.mob-step-bar-btn:active { transform: scale(.96); }
.mob-step-bar-btn.send-mode {
  background: linear-gradient(135deg, #25D366, #128C7E);
  box-shadow: 0 4px 16px rgba(37,211,102,.4);
}

/* ── RESPONSIVE (builder-specific overrides handled in global mobile section above) ── */
@media(max-width:900px){
  .st-live-dash { margin-bottom:0; }
}
/* ══ PRICE INFO CARD ════════════════════════════════════════════════ */
.st-price-info-card {
  background: linear-gradient(135deg, rgba(245,158,11,.08), rgba(245,158,11,.03));
  border: 1px solid rgba(245,158,11,.25);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 20px;
}
.st-pic-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 4px;
}
.st-pic-label { font-size: .8rem; color: var(--tx-3); font-weight: 600; }
.st-pic-val {
  font-size: 1.1rem; font-weight: 900; color: var(--or);
  font-family: inherit;
}
.st-pic-note { font-size: .76rem; color: var(--tx-3); line-height: 1.5; }

/* ══ CONTENT CHOICE CARDS ═══════════════════════════════════════════ */
.st-content-choice {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.st-choice-card {
  padding: 14px 16px;
  background: var(--bg3, rgba(255,255,255,.04));
  border: 2px solid rgba(255,255,255,.08);
  border-radius: 12px;
  cursor: pointer;
  transition: all .25s;
  position: relative;
  display: flex; gap: 10px; align-items: flex-start;
}
.st-choice-card:hover { border-color: rgba(245,158,11,.3); }
.st-choice-card.active {
  border-color: var(--or, #F59E0B);
  background: rgba(245,158,11,.07);
  box-shadow: 0 0 20px rgba(245,158,11,.15);
}
.st-choice-check {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.2);
  flex-shrink: 0; margin-top: 2px;
  transition: all .2s;
  background: transparent;
}
.st-choice-card.active .st-choice-check {
  background: var(--or, #F59E0B);
  border-color: var(--or, #F59E0B);
  box-shadow: 0 0 8px rgba(245,158,11,.5);
}
.st-choice-card.active .st-choice-check::after {
  content: '✓'; display:block; color:#fff;
  font-size:.7rem; text-align:center; line-height:14px;
}
.st-choice-body { flex:1; }
.st-choice-title { font-size: .84rem; font-weight: 700; color: var(--tx, #fff); margin-bottom: 3px; }
.st-choice-price { font-size: 1rem; font-weight: 900; color: var(--or, #F59E0B); margin-bottom: 2px; }
.st-choice-note  { font-size: .7rem; color: var(--tx-3, rgba(255,255,255,.4)); line-height: 1.4; }

/* ══ POSTER DIMENSIONS ═══════════════════════════════════════════════ */
.st-dim-row {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}
.st-dim-input-wrap { flex: 1; position: relative; }
.st-dim-label {
  display: block; font-size: .72rem; color: var(--tx-3, rgba(255,255,255,.4));
  font-weight: 600; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .05em;
}
.st-dim-input {
  width: 100%; text-align: center;
  font-size: 1.1rem !important; font-weight: 800 !important;
  padding-right: 14px !important; padding-left: 36px !important;
}
.st-dim-unit {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  font-size: .75rem; color: var(--tx-3, rgba(255,255,255,.4)); font-weight: 600;
}
.st-dim-times {
  font-size: 1.4rem; color: var(--tx-3, rgba(255,255,255,.4));
  font-weight: 300; flex-shrink: 0; padding-top: 20px;
}

/* ── Poster preview ── */
.st-poster-preview-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px;
  background: rgba(255,255,255,.02);
  border: 1px dashed rgba(255,255,255,.1);
  border-radius: 12px;
}
.st-poster-preview {
  background: linear-gradient(135deg, rgba(245,158,11,.15), rgba(245,158,11,.05));
  border: 1px solid rgba(245,158,11,.3);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  transition: all .4s cubic-bezier(.34,1.56,.64,1);
  max-width: 200px; max-height: 240px;
}
.st-poster-preview-inner {
  text-align: center; padding: 8px;
}
.st-poster-preview-inner span {
  font-size: .72rem; color: var(--or, #F59E0B); font-weight: 700;
}
.st-poster-preview-note {
  font-size: .7rem; color: var(--tx-3, rgba(255,255,255,.4)); font-weight: 600;
}

/* Mobile fixes for new elements */
@media(max-width:640px) {
  .st-content-choice { grid-template-columns: 1fr; }
  .st-dim-row { gap: 8px; }
  .st-price-info-card { padding: 12px 14px; }
  .st-pic-val { font-size: .95rem; }
}

/* ════════════════════════════════════════════════════════════════════
   MERGED BUILDER — Clean single-column, mobile-first
   ════════════════════════════════════════════════════════════════════ */

/* Hide old sidebar columns — not used any more */
.st-builder-layout,
.st-builder-cols,
.st-builder-sidebar,
.st-builder-dash-col,
.st-builder-right,
.st-builder-steps-col { display: none !important; }

/* ── Merged wrapper ── */
.st-builder-merged {
  max-width: 720px;
  margin: 0 auto;
  /* GPU-accelerate the container */
  will-change: auto;
}

/* ── Progress bar ── */
.st-builder-merged .st-progress-bar {
  margin-bottom: 24px;
}

/* ── Step panels ── */
.st-step-panel { display: none; }
.st-step-panel.active { display: block; animation: stepFadeIn .25s ease; }
@keyframes stepFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Panel glass connects below strip ── */
#stPanel1 .st-panel-glass {
  border-radius: 0 0 16px 16px;
  border-top: none;
  margin-top: 0;
}

/* ════════════════════════════════════════════════════════════════════
   LIVE STRIP — أفقي فوق بناء الباقة
   ════════════════════════════════════════════════════════════════════ */
.st-live-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(135deg, rgba(245,158,11,.07), rgba(245,158,11,.02));
  border: 1px solid rgba(245,158,11,.22);
  border-bottom: none;
  border-radius: 16px 16px 0 0;
  padding: 14px 20px;
  /* No heavy effects that cause lag */
}

.st-live-strip-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.st-live-strip-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .65rem;
  font-weight: 700;
  color: #4ADE80;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.st-live-pulse {
  width: 6px; height: 6px;
  background: #4ADE80;
  border-radius: 50%;
  display: inline-block;
  animation: pulse 2s ease infinite;
}
@keyframes pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .5; transform: scale(.75); }
}

.st-live-strip-service {
  font-size: .95rem;
  font-weight: 800;
  color: #fff;
}

.st-live-strip-slides {
  font-size: .72rem;
  color: rgba(255,255,255,.4);
  font-weight: 600;
}

/* Center price block */
.st-live-strip-center {
  text-align: center;
  flex-shrink: 0;
}

.st-live-strip-label {
  font-size: .6rem;
  color: rgba(255,255,255,.35);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 1px;
  font-weight: 700;
}

.st-live-strip-price {
  font-size: 1.55rem;
  font-weight: 900;
  color: #F59E0B;
  line-height: 1;
  /* lightweight transition — no box-shadow animation */
  transition: color .2s;
}

.st-live-strip-delivery {
  font-size: .65rem;
  color: rgba(255,255,255,.35);
  font-weight: 600;
  margin-top: 2px;
}

/* Right ring */
.st-live-strip-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.st-live-strip-ring-wrap {
  position: relative;
  width: 52px; height: 52px;
  flex-shrink: 0;
}

.st-live-strip-ring-wrap .st-live-ring-svg {
  width: 52px; height: 52px;
  display: block;
}

.st-live-strip-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .62rem;
  font-weight: 900;
  color: #F59E0B;
}

.st-live-strip-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.st-live-strip-team {
  font-size: .75rem;
  color: rgba(255,255,255,.65);
  font-weight: 700;
}

.st-live-strip-status {
  font-size: .68rem;
  color: rgba(255,255,255,.35);
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE ≤ 640px
   ════════════════════════════════════════════════════════════════════ */
@media(max-width:640px) {

  /* wrapper */
  .st-builder-merged { max-width: 100%; }

  /* Strip — compact 2-row on mobile */
  .st-live-strip {
    flex-wrap: wrap;
    padding: 12px 14px;
    gap: 10px;
    border-radius: 14px 14px 0 0;
  }

  .st-live-strip-left  { order: 1; flex: 1; min-width: 0; }
  .st-live-strip-right { order: 2; flex-shrink: 0; }
  .st-live-strip-center {
    order: 3;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(255,255,255,.06);
    padding-top: 10px;
    text-align: right;
  }
  .st-live-strip-label { display: none; }
  .st-live-strip-price { font-size: 1.25rem; }
  .st-live-strip-service { font-size: .85rem; }
  .st-live-strip-ring-wrap,
  .st-live-strip-ring-wrap .st-live-ring-svg { width: 44px; height: 44px; }
  .st-live-strip-meta { display: none; }

  /* Panel */
  #stPanel1 .st-panel-glass { border-radius: 0 0 14px 14px; }
  .st-panel-glass { padding: 16px 14px; border-radius: 14px; }
  .st-panel-title { font-size: .95rem; }
  .st-panel-sub   { font-size: .78rem; margin-bottom: 16px; }

  /* Progress bar */
  .st-progress-bar { overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
  .st-progress-bar::-webkit-scrollbar { display: none; }
  .st-prog-num  { width: 28px; height: 28px; font-size: .72rem; }
  .st-prog-lbl  { font-size: .62rem; }

  /* Service pills — wrap */
  .st-service-pills { gap: 6px; flex-wrap: wrap; }
  .st-pill { padding: 8px 12px; font-size: .78rem; flex-shrink: 0; }

  /* Price info card */
  .st-price-info-card { padding: 10px 12px; margin-bottom: 14px; }
  .st-pic-val { font-size: .9rem; }
  .st-pic-note { font-size: .7rem; }

  /* Slider */
  .st-slider-num  { font-size: 1.4rem; }
  .st-slider-marks span { font-size: .65rem; }

  /* Content choice — single column */
  .st-content-choice { grid-template-columns: 1fr; gap: 8px; }
  .st-choice-card { padding: 12px 14px; }
  .st-choice-title { font-size: .82rem; }
  .st-choice-price { font-size: .92rem; }
  .st-choice-note  { font-size: .68rem; }

  /* Poster dimensions */
  .st-dim-row { gap: 8px; }
  .st-dim-input { font-size: .95rem !important; padding: 10px 32px 10px 10px !important; }
  .st-poster-preview-wrap { padding: 12px; }

  /* Toggles */
  .st-toggle-premium { padding: 10px 12px; gap: 10px; }
  .st-toggle-premium-name { font-size: .82rem; }
  .st-toggle-premium-desc { font-size: .68rem; }
  .st-toggle-btn  { width: 42px; height: 22px; flex-shrink: 0; }
  .st-toggle-thumb { width: 16px; height: 16px; top: 3px; right: 3px; }
  .st-toggle-btn.on .st-toggle-thumb { transform: translateX(-20px); }

  /* Member cards */
  .st-member-card { padding: 10px 12px; flex-wrap: wrap; gap: 8px; }
  .st-member-fields { grid-template-columns: 1fr; gap: 6px; flex: 1 1 100%; }
  .st-member-avatar { width: 32px; height: 32px; font-size: .8rem; }

  /* Client grid */
  .st-client-grid { grid-template-columns: 1fr; gap: 8px; }
  .st-premium-input { padding: 11px 36px 11px 12px; font-size: .86rem; }

  /* Summary */
  .st-summary-block { padding: 12px; }
  .st-sum-row { font-size: .78rem; gap: 4px; flex-wrap: wrap; }
  .st-sum-val { text-align: right; max-width: 100%; }
  .st-sum-section-title { font-size: .68rem; }

  /* Price breakdown */
  .st-price-breakdown { padding: 12px 14px; }
  .st-price-total-num { font-size: 1.3rem; }

  /* WhatsApp button */
  .st-whatsapp-btn { font-size: .88rem; padding: 14px 16px; }

  /* Nav buttons */
  .st-panel-nav { flex-direction: column-reverse; gap: 8px; margin-top: 18px; }
  .st-panel-nav .btn { width: 100%; justify-content: center; padding: 13px; font-size: .88rem; }

  /* Field groups */
  .st-field-group { margin-bottom: 16px; }
  .st-field-label { font-size: .78rem; margin-bottom: 8px; }

  /* Sticky bar */
  .mob-step-bar { padding: 10px 14px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .mob-step-bar-price { font-size: 1.1rem; }
  .mob-step-bar-btn { padding: 10px 18px; font-size: .85rem; border-radius: 10px; }
  body { padding-bottom: 72px; }
}

/* ═══ Very small phones ≤ 380px ═══════════════════════════════════ */
@media(max-width:380px) {
  .st-pill { padding: 7px 10px; font-size: .72rem; }
  .st-live-strip-price { font-size: 1.1rem; }
  .st-panel-glass { padding: 12px 10px; }
  .st-toggle-premium { flex-wrap: wrap; }
}

/* ── Disable heavy GPU effects on mobile for performance ── */
@media(max-width:640px) {
  .st-opt-module-glow,
  .st-toggle-premium-glow,
  .st-order-glow-1,
  .st-order-glow-2 { display: none !important; }

  /* Reduce animation duration for smoothness */
  .st-step-panel.active { animation-duration: .15s; }
  .st-panel-glass { transition: none; }
}

/* ── Mobile bar ── */
#mobStepLabel { display: none !important; }
.mob-step-bar-info { flex-direction: column; gap: 0; }
.mob-step-bar-info .mob-step-bar-price { font-size: 1.15rem; font-weight: 900; color: #F59E0B; }
/* ── Mobile performance — disable heavy GPU effects ── */
@media (max-width: 640px) {
  .st-hero-bg,
  .st-hero-glow-1,
  .st-hero-glow-2 { display: none; }

  .st-hero-visual-glow { animation: none; }

  @keyframes dashFloat { 0%,100% { transform: none; } }
}