/* =============================================================================
   iStudio — стили калькулятора лазерной эпиляции
   Класс-имена и id жёстко завязаны на assets/js/calculator.js — НЕ переименовывать.
   Используются токены из main.css (ivory/pearl/champagne/gold, Cormorant/Manrope).
   ============================================================================= */

/* ---- Оболочка калькулятора ---- */
.calculator-section { padding: clamp(20px, 4vw, 40px) 0 clamp(40px, 7vw, 72px); }
.calc-shell{
  position:relative; display:grid; grid-template-columns:.9fr 1.4fr; gap:0; align-items:stretch;
  border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(180deg,#fffdf8,#faf3e6);
  border:1px solid var(--line); box-shadow:var(--shadow-soft);
}
.calc-intro{ padding:clamp(28px,3.4vw,46px) clamp(22px,2.8vw,42px); position:relative; }
.calc-intro h2{ font-family:var(--font-display); font-weight:600; font-size:clamp(30px,4vw,46px); line-height:1.04; margin:0 0 16px; color:var(--ink); letter-spacing:-.01em; }
.calc-intro p{ font-size:16px; color:var(--muted); line-height:1.62; margin:0 0 24px; }
.calc-intro .btn{ width:100%; }
.calc-note{ margin-top:20px; color:#8a7a6b; font-size:13px; line-height:1.5; }
.z54-note{
  margin-top:16px; padding:14px 16px; border-radius:var(--r-sm);
  background:rgba(197,154,70,.08); border:1px solid var(--line-soft);
  color:#7a6a52; font-size:13px; line-height:1.55;
  max-height:0; opacity:0; overflow:hidden; padding-top:0; padding-bottom:0; margin-top:0;
  transition:max-height .4s ease, opacity .3s ease, margin-top .3s ease, padding .3s ease;
}
.z54-note.visible{ max-height:240px; opacity:1; margin-top:16px; padding-top:14px; padding-bottom:14px; }

.calc-card{ padding:clamp(22px,2.6vw,30px) clamp(20px,2.4vw,28px); background:transparent; border-left:1px solid var(--line-soft); }

/* ---- Сегментные переключатели (аппарат / пол / оплата) ---- */
.controls{ display:grid; grid-template-columns:1fr 1fr; gap:16px 20px; margin-bottom:24px; }
.control-box{ min-width:0; }
.control-title{ font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--bronze); margin:0 0 10px; }
.segment{
  position:relative; display:grid; grid-template-columns:1fr 1fr; gap:0;
  background:var(--sand); border:1px solid var(--line-soft); border-radius:var(--r-pill); padding:4px;
}
.segment::before{
  content:""; position:absolute; top:4px; bottom:4px; left:4px; width:calc(50% - 4px);
  background:var(--grad-gold); border-radius:var(--r-pill);
  transition:transform .35s cubic-bezier(.4,1.4,.5,1); box-shadow:0 4px 12px rgba(169,119,45,.3); z-index:1;
}
.segment[data-active="1"]::before{ transform:translateX(calc(100% + 0px)); }
.seg-btn{
  position:relative; z-index:2; appearance:none; border:0; background:transparent; cursor:pointer;
  font-family:var(--font-body); font-weight:600; font-size:14px; color:#7a6a58;
  padding:10px 8px; border-radius:var(--r-pill); transition:color .25s ease; line-height:1.1;
  display:flex; flex-direction:column; align-items:center; gap:1px;
}
.seg-btn small{ font-size:10px; font-weight:600; opacity:.7; }
.seg-btn.active{ color:#fff; }
.seg-btn.active small{ opacity:.85; }

/* количество процедур */
.procedure-row{ display:flex; align-items:center; gap:14px; }
.procedure-row input[type="range"]{
  -webkit-appearance:none; appearance:none; flex:1; height:6px; border-radius:999px;
  background:linear-gradient(90deg,var(--gold-soft),var(--sand-2)); outline:none; cursor:pointer;
}
.procedure-row input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:50%;
  background:var(--grad-gold); border:3px solid #fff; box-shadow:0 2px 8px rgba(169,119,45,.4); cursor:pointer;
}
.procedure-row input[type="range"]::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%; background:var(--gold); border:3px solid #fff;
  box-shadow:0 2px 8px rgba(169,119,45,.4); cursor:pointer;
}
.proc-num{
  min-width:42px; height:42px; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:600; font-size:24px; color:var(--gold);
  background:var(--pearl); border:1px solid var(--line); border-radius:var(--r-sm);
}

/* ---- Основная сетка: зоны | цена | фигура ---- */
.calc-main{ display:grid; grid-template-columns:minmax(260px,1fr) minmax(220px,.85fr) minmax(180px,.9fr); gap:22px; align-items:start; }

/* зоны */
.zones-panel{ min-width:0; }
.pkg-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.pkg-chip{
  appearance:none; cursor:pointer; font-family:var(--font-body); font-size:12.5px; font-weight:600;
  padding:7px 13px; border-radius:var(--r-pill); border:1px solid var(--line);
  background:var(--pearl); color:#6a5b4a; transition:all .2s ease;
}
.pkg-chip:hover{ border-color:var(--champagne); color:var(--bronze); }
.pkg-chip.active{ background:var(--grad-gold); color:#fff; border-color:transparent; box-shadow:0 4px 12px rgba(169,119,45,.28); }

.quick-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.quick-chip{
  appearance:none; cursor:pointer; font-family:var(--font-body); font-size:12.5px; font-weight:600;
  padding:7px 13px; border-radius:var(--r-pill); border:1px dashed var(--line);
  background:transparent; color:#7a6a58; transition:all .2s ease;
}
.quick-chip:hover{ border-style:solid; border-color:var(--champagne); color:var(--bronze); }
.quick-chip--danger{ color:#a8553b; border-color:rgba(168,85,59,.3); }
.quick-chip--danger:hover{ border-color:#a8553b; color:#8a3f2a; }

.zone-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; margin-bottom:14px; }
.zone-check{
  display:flex; align-items:center; gap:8px; cursor:pointer; font-size:13.5px; color:#5a4d40;
  padding:6px 8px; border-radius:10px; transition:background .15s ease;
}
.zone-check:hover{ background:rgba(197,154,70,.07); }
.zone-check input{ width:17px; height:17px; accent-color:var(--gold); cursor:pointer; flex-shrink:0; }

.selected-list{ font-size:13px; color:#6a5b4a; line-height:1.5; padding:12px 14px; background:var(--soft); border-radius:var(--r-sm); border:1px solid var(--line-soft); }
.selected-list b{ color:var(--bronze); }

/* рекомендация пакета */
.recommendation{
  display:none; margin-top:14px; padding:18px; border-radius:var(--r-md);
  background:linear-gradient(180deg,#fff8ea,#fdeecb); border:1.5px solid var(--gold-soft);
  box-shadow:0 8px 22px rgba(169,119,45,.14);
}
.rec-badge{ font-size:12px; font-weight:700; color:var(--bronze); margin-bottom:8px; }
.recommendation h4{ font-family:var(--font-display); font-weight:600; font-size:20px; margin:0 0 8px; color:var(--ink); }
.recommendation p{ font-size:13.5px; line-height:1.55; color:#5f5042; margin:0 0 14px; }
.recommendation b{ color:var(--bronze); }
.rec-btn{
  appearance:none; cursor:pointer; width:100%; font-family:var(--font-body); font-weight:700; font-size:14px;
  padding:11px 16px; border-radius:var(--r-pill); border:0; color:#fff; background:var(--grad-gold);
  box-shadow:0 6px 16px rgba(169,119,45,.3); transition:transform .15s ease;
}
.rec-btn:hover{ transform:translateY(-1px); }

/* цена */
.price-mid{ min-width:0; }
.calc-result{
  padding:22px; border:1px solid var(--line); background:var(--pearl); border-radius:var(--r-md);
  box-shadow:var(--shadow-card); text-align:center;
}
.result-label{ font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--bronze); }
.result-main{ font-family:var(--font-display); font-weight:700; font-size:clamp(38px,5vw,52px); line-height:1.05; color:var(--ink); margin:6px 0 4px; }
.result-sub{ font-size:13px; color:var(--muted); line-height:1.6; }
.result-sub b{ color:var(--bronze); }
.proc-badge{ display:inline-flex; align-items:center; gap:6px; margin:8px 0; padding:4px 12px; border-radius:var(--r-pill); background:rgba(197,154,70,.12); }
.proc-badge-num{ font-weight:800; color:var(--gold); font-size:15px; }
.proc-badge-txt{ font-size:12px; color:#7a6a58; }

.popular-suggest{ margin-top:12px; }
.popular-pill{ display:inline-block; padding:6px 14px; border-radius:var(--r-pill); background:var(--sand); color:var(--bronze); font-size:13px; font-weight:600; margin-bottom:8px; }
.popular-price{ font-size:14px; color:var(--muted); margin-bottom:12px; }
.popular-price b{ color:var(--gold); font-size:16px; }
.popular-btn{ appearance:none; cursor:pointer; border:1px solid var(--champagne); background:transparent; color:var(--bronze); font-family:var(--font-body); font-weight:600; font-size:13.5px; padding:9px 16px; border-radius:var(--r-pill); transition:all .2s ease; }
.popular-btn:hover{ background:var(--champagne); color:#fff; }

.payment-tabs{ margin-top:14px; }

.wa-inline{ margin-top:14px; width:100%; min-height:52px; }

/* фигура */
.figure-card{ min-width:0; }
.figure-pair{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.figure-wrap{ position:relative; border-radius:var(--r-md); overflow:hidden; background:linear-gradient(180deg,#fbf4e8,#f3e8d4); border:1px solid var(--line-soft); }
.figure-img{ display:block; width:100%; height:auto; }
.figure-overlay{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.figure-overlay .zone{ fill:rgba(197,154,70,.0); stroke:rgba(197,154,70,.25); stroke-width:1; transition:fill .25s ease; }
.figure-overlay .zone.selected{ fill:rgba(185,133,47,.42); stroke:var(--gold); stroke-width:1.5; }
.figure-caption{ margin-top:10px; font-size:12px; color:#8a7a6b; text-align:center; line-height:1.5; }

/* пакеты */
.package-title{ font-family:var(--font-display); font-weight:600; font-size:24px; color:var(--ink); margin:26px 0 14px; }
.package-area{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.pkg-card{
  appearance:none; cursor:pointer; text-align:left; font-family:var(--font-body);
  padding:18px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--pearl);
  transition:all .2s ease; display:flex; flex-direction:column; gap:6px;
}
.pkg-card:hover{ border-color:var(--champagne); box-shadow:var(--shadow-card); transform:translateY(-2px); }
.pkg-card.active{ border-color:var(--gold); background:linear-gradient(180deg,#fff8ea,#fdeecb); box-shadow:0 8px 22px rgba(169,119,45,.16); }
.pkg-card h4{ font-family:var(--font-display); font-weight:600; font-size:20px; margin:0; color:var(--ink); }
.pkg-card p{ font-size:12.5px; line-height:1.5; color:var(--muted); margin:0; }
.pkg-meta{ font-size:11.5px; color:#8a7a6b; }
.pkg-card strong{ font-size:15px; color:var(--bronze); margin-top:2px; }

/* ---- Подсветка/пульсы (UX из оригинала) ---- */
@keyframes calcFocusGlow{ 0%{ box-shadow:0 0 0 0 rgba(197,154,70,.5); } 100%{ box-shadow:0 0 0 14px rgba(197,154,70,0); } }
.calc-focus-glow{ animation:calcFocusGlow 1.15s ease-out; }
@keyframes pulseBoost{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.015); } }
.pulse-boost{ animation:pulseBoost .6s ease-in-out 2; }
.price-soft-pulse{ border-color:var(--gold); }
.cta-soft-pulse{ box-shadow:0 8px 22px rgba(31,171,84,.32); }

/* ---- «Как формируется цена» ---- */
.pricing-rules{ padding:clamp(40px,6vw,64px) 0; background:linear-gradient(180deg,#fbf3e6,#fffdf8); }
.rules-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-top:24px; }
.rule-card{ background:var(--pearl); border:1px solid var(--line); border-radius:var(--r-md); padding:22px; }
.rule-card.accent{ background:linear-gradient(180deg,#fff8eb,#fdedd0); border:1.5px solid var(--gold-soft); }
.rule-num{ font-family:var(--font-display); font-size:34px; font-weight:700; color:var(--gold); line-height:1; }
.rule-card h4{ font-family:var(--font-body); font-weight:700; font-size:15px; color:#4a3e35; margin:8px 0 6px; }
.rule-card p{ font-size:13.5px; line-height:1.55; color:var(--muted); margin:0; }
.rules-foot{ margin-top:22px; text-align:center; color:#8a7a6b; font-size:13.5px; line-height:1.6; }

/* =============================================================================
   Адаптив калькулятора
   ============================================================================= */
@media (max-width:900px){
  .calc-shell{ grid-template-columns:1fr; }
  .calc-card{ border-left:0; border-top:1px solid var(--line-soft); }
  .calc-main{ grid-template-columns:1fr; }
  .price-mid{ order:-1; } /* на планшете цена сразу под управлением */
}
@media (max-width:560px){
  .controls{ grid-template-columns:1fr; gap:14px; }
  .zone-grid{ grid-template-columns:1fr 1fr; }
  .figure-pair{ grid-template-columns:1fr 1fr; }
  .package-area{ grid-template-columns:1fr; }
  .calc-intro .btn{ font-size:15px; }
}