/* =========================================================
   صوت يزيد — Pricing / Calculator page
   Inherits palette + type from styles.css
   ========================================================= */

.price-hero{padding-top:clamp(2.5rem,6vw,4.5rem);padding-bottom:clamp(1.5rem,3vw,2.5rem);text-align:center}
.price-hero .eyebrow{justify-content:center}

/* تسعير: اجعل الجملة التعريفية تحت عنوان «طريقة التسعير» مباشرة */
.tiers .sec-head{flex-direction:column;align-items:flex-start;gap:.85rem}
.tiers .sec-head .sec-lead{margin:0}
.price-hero h1{font-size:clamp(2.4rem,6vw,4.4rem);font-weight:900;line-height:1.06;letter-spacing:-.02em;margin:1.1rem 0 .8rem}
.price-hero h1 .hl{color:var(--accent)}
.price-hero p{color:var(--ink-soft);font-size:clamp(1.05rem,2vw,1.22rem);max-width:54ch;margin-inline:auto}

/* ===== calculator layout ===== */
.calc{padding-bottom:clamp(4rem,9vw,7rem)}
.calc-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.5rem,3.5vw,2.4rem);align-items:start}

/* editor card */
.calc-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:clamp(1.4rem,3vw,2.2rem)}
.calc-card h2{font-size:1.5rem;font-weight:900;margin-bottom:.3rem}
.calc-card .sub{color:var(--ink-faint);font-size:.95rem;margin-bottom:1.3rem}
.script-box{position:relative}
.script-box textarea{
  width:100%;min-height:300px;resize:vertical;
  font-family:var(--fa);font-size:1.05rem;line-height:1.9;color:var(--ink);
  background:var(--cream);border:1.5px solid var(--line);border-radius:18px;
  padding:1.1rem 1.2rem;transition:border-color .2s,box-shadow .2s;
}
.script-box textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(221,118,87,.14)}
.script-box textarea::placeholder{color:var(--ink-faint)}
.paste-hint{position:absolute;top:1rem;inset-inline-end:1.1rem;font-family:var(--fe);font-size:.78rem;font-weight:700;color:var(--ink-faint);pointer-events:none;transition:opacity .2s}
.paste-hint.nudge{color:var(--accent);font-size:.88rem;animation:hintPulse .5s ease}
@keyframes hintPulse{0%{transform:scale(.9)}50%{transform:scale(1.06)}100%{transform:scale(1)}}
.script-actions{display:flex;gap:.8rem;margin-top:1rem;flex-wrap:wrap;justify-content:center}
.script-actions .btn{padding:.7rem 1.3rem;font-size:.95rem}
.btn-soft{background:var(--cream-2);color:var(--ink)}
.btn-soft:hover{background:var(--line);transform:translateY(-2px)}

/* live stats chips under textarea */
.stats-row{display:flex;justify-content:center;margin-top:1.2rem}
.stats-row .stat{width:100%;max-width:420px;padding:1.2rem 1rem}
.stat{background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:.9rem 1rem;text-align:center}
.stat b{display:block;font-size:1.5rem;font-weight:900;line-height:1;font-family:var(--fe)}
.stat span{font-size:.82rem;color:var(--ink-faint);margin-top:.35rem;display:block}

/* ===== quote panel (sticky) ===== */
.quote{position:sticky;top:90px}
.quote-card{background:var(--ink);color:var(--cream);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden}
.quote-head{padding:1.4rem 1.6rem;border-bottom:1px solid rgba(252,242,230,.12);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.quote-head .lbl{font-family:var(--fe);font-weight:800;letter-spacing:.2em;font-size:.74rem;text-transform:uppercase;color:rgba(252,242,230,.6)}
.quote-head .tier{background:rgba(221,118,87,.18);color:var(--accent);font-weight:800;font-size:.84rem;padding:.32rem .85rem;border-radius:999px}
.quote-body{padding:1.6rem}

/* empty + filled states */
.quote-empty{text-align:center;padding:2.2rem 1rem;color:rgba(252,242,230,.55)}
.quote-empty svg{width:54px;height:54px;margin-inline:auto;margin-bottom:1rem;color:rgba(252,242,230,.3)}
.quote-empty b{display:block;color:rgba(252,242,230,.8);font-size:1.05rem;font-weight:800;margin-bottom:.3rem}
.quote-empty span{font-size:.92rem}

.price-main{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.price-main .num{font-family:var(--fe);font-size:3.4rem;font-weight:800;line-height:1;color:#fff}
.price-main .cur{font-weight:800;font-size:1.2rem;color:var(--accent)}
.price-usd{font-family:var(--fe);color:rgba(252,242,230,.6);font-size:1.05rem;margin-top:.5rem}
.price-usd s{opacity:.55}
.price-old{font-family:var(--fe);font-size:1.3rem;color:rgba(252,242,230,.4);text-decoration:line-through;margin-inline-end:.4rem}

.quote-lines{margin:1.5rem 0;display:flex;flex-direction:column;gap:.7rem}
.qline{display:flex;align-items:center;justify-content:space-between;font-size:.95rem}
.qline span{color:rgba(252,242,230,.62)}
.qline b{font-weight:800;font-family:var(--fe)}
.qline.discount span,.qline.discount b{color:var(--accent)}
.quote-divider{height:1px;background:rgba(252,242,230,.12);margin:.3rem 0}

/* discount input */
.promo{display:flex;gap:.6rem;margin:1.3rem 0}
.promo input{
  flex:1;min-width:0;font-family:var(--fe);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(252,242,230,.06);border:1.5px solid rgba(252,242,230,.18);border-radius:12px;
  color:#fff;padding:.7rem .9rem;font-size:.92rem;transition:border-color .2s;
}
.promo input::placeholder{color:rgba(252,242,230,.4);letter-spacing:0}
.promo input:focus{outline:none;border-color:var(--accent)}
.promo button{background:var(--cream);color:var(--ink);font-weight:800;border-radius:12px;padding:.7rem 1.1rem;white-space:nowrap;transition:transform .15s,background .2s}
.promo button:hover{transform:translateY(-2px)}
.promo-msg{font-size:.84rem;margin:-.5rem 0 1rem;min-height:1.1em}
.promo-msg.ok{color:var(--accent)}
.promo-msg.err{color:#ff9b82}

/* whatsapp CTA */
.wa-btn{display:flex;align-items:center;justify-content:center;gap:.7rem;width:100%;background:#25D366;color:#053b1e;font-weight:900;font-size:1.05rem;padding:1rem;border-radius:14px;transition:transform .18s,box-shadow .25s}
.wa-btn:hover{transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(37,211,102,.5)}
.wa-btn svg{width:1.4em;height:1.4em}
.sample-note{display:flex;align-items:center;gap:.55rem;justify-content:center;margin-top:.9rem;font-size:.88rem;color:rgba(252,242,230,.6)}
.sample-note svg{width:1.1em;height:1.1em;color:var(--accent)}

/* tiers reference table */
.tiers{padding-bottom:clamp(4rem,9vw,7rem)}
.tiers-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.4vw,1.6rem)}
.tier-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem 1.6rem;position:relative;transition:transform .25s,box-shadow .25s}
.tier-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.tier-card.popular{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.tier-card .pop-tag{position:absolute;top:-12px;inset-inline-start:1.6rem;background:var(--accent);color:#fff;font-weight:800;font-size:.76rem;padding:.3rem .85rem;border-radius:999px}
.tier-card h3{font-size:1.3rem;font-weight:900;margin-bottom:.3rem}
.tier-card .range{font-family:var(--fe);color:var(--ink-faint);font-size:.9rem;margin-bottom:1.1rem}
.tier-card .rate{display:flex;align-items:baseline;gap:.4rem;margin-bottom:1.1rem}
.tier-card .rate .n{font-family:var(--fe);font-size:2.2rem;font-weight:800;color:var(--accent)}
.tier-card .rate .u{color:var(--ink-soft);font-size:.92rem;font-weight:700}
.tier-card ul{list-style:none;display:flex;flex-direction:column;gap:.6rem}
.tier-card li{display:flex;align-items:flex-start;gap:.55rem;font-size:.95rem;color:var(--ink-soft)}
.tier-card li svg{width:18px;height:18px;flex:none;color:var(--accent);margin-top:.18rem}

@media (max-width:1000px){
  .calc-grid{grid-template-columns:1fr}
  .quote{position:static}
  .tiers-grid{grid-template-columns:1fr}
}
@media (max-width:520px){
  .stats-row{grid-template-columns:1fr 1fr}
}