/* =============================================================================
   iStudio — компоненты страниц-направлений и цен
   Подключается на /cosmetology/, /body/, /prices/. Использует токены main.css.
   ============================================================================= */

/* ---- Шапка страницы (лёгкая, без большой картинки) ---- */
.page-head{ padding:clamp(28px,5vw,56px) 0 clamp(6px,2vw,18px); }
.page-head h1{ font-family:var(--font-display); font-weight:600; font-size:clamp(34px,5.6vw,56px); line-height:1.04; margin:8px 0 14px; color:var(--ink); letter-spacing:-.01em; }
.page-head .lead{ max-width:620px; font-size:clamp(16px,1.4vw,18px); line-height:1.6; color:var(--muted); margin:0; }

/* ---- Заголовок ценового раздела ---- */
.svc-section{ padding:clamp(26px,3.4vw,40px) 0; }
.svc-section + .svc-section{ padding-top:0; }
.svc-head{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:18px; }
.svc-head h2{ font-family:var(--font-display); font-weight:600; font-size:clamp(26px,3.2vw,38px); margin:0; color:var(--ink); }
.svc-head .svc-note{ font-size:13.5px; color:var(--muted); }

/* ---- Сетка карточек ---- */
.svc-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; }
.svc-card{
  position:relative; display:flex; flex-direction:column; gap:12px;
  background:var(--pearl); border:1px solid var(--line); border-radius:var(--r-md);
  padding:24px; box-shadow:var(--shadow-card);
}
.svc-card.feature{ background:linear-gradient(180deg,#fffaf0,#fdeecb); border:1.5px solid var(--gold-soft); }
.svc-card h3{ font-family:var(--font-display); font-weight:600; font-size:24px; line-height:1.1; margin:0; color:var(--ink); }
.svc-desc{ font-size:14px; line-height:1.55; color:var(--muted); margin:0; flex:1; }

/* ---- Цена: обычная (зачёркнута) + спец на первую процедуру ---- */
.price-offer{ display:flex; flex-direction:column; gap:2px; margin-top:2px; }
.price-was{ font-size:14px; color:#9a8b7a; text-decoration:line-through; text-decoration-color:rgba(154,139,122,.55); }
.price-now-row{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.price-now{ font-family:var(--font-display); font-weight:700; font-size:34px; line-height:1; color:var(--gold); }
.price-first{ font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--bronze); background:rgba(197,154,70,.12); padding:3px 9px; border-radius:var(--r-pill); }

/* одна цена (MOXI и т.п.) */
.price-single{ font-family:var(--font-display); font-weight:700; font-size:32px; line-height:1; color:var(--ink); }
.price-single small{ font-family:var(--font-body); font-size:14px; font-weight:600; color:var(--muted); }

/* курс (микроигольчатый RF 3+1) */
.price-course{ display:flex; flex-direction:column; gap:4px; }
.price-course b{ font-family:var(--font-display); font-weight:700; font-size:26px; color:var(--ink); line-height:1.1; }
.price-course span{ font-size:13px; color:var(--bronze); font-weight:600; }

/* тарифные тиры (B-FLEXY, комбо-массаж) */
.price-tiers{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
.price-tiers li{ display:flex; justify-content:space-between; gap:12px; font-size:14px; color:#5a4d40; border-bottom:1px dashed var(--line-soft); padding-bottom:7px; }
.price-tiers li:last-child{ border-bottom:0; padding-bottom:0; }
.price-tiers li b{ color:var(--bronze); white-space:nowrap; font-weight:700; }
.price-tiers li.tier-accent b{ color:var(--gold); }

/* «уточняется после консультации» */
.price-quote{ font-size:15px; font-weight:600; color:var(--bronze); line-height:1.4; }
.price-quote small{ display:block; font-weight:500; font-size:13px; color:var(--muted); margin-top:3px; }

/* метаданные (время процедуры) */
.svc-meta{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); }
.svc-meta svg{ width:15px; height:15px; stroke:var(--champagne); }

/* подарок (кисти рук) */
.gift-badge{
  display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
  font-size:12.5px; font-weight:700; color:#7a5a18;
  background:linear-gradient(135deg,#fce7bd,#f3d488); border:1px solid var(--gold-soft);
  padding:5px 11px; border-radius:var(--r-pill);
}
.gift-badge svg{ width:14px; height:14px; }

/* мелкая сноска (например PDRN / salmon DNA) */
.svc-fine{ font-size:11.5px; color:#9a8b7a; line-height:1.45; margin:0; }

/* кнопка карточки */
.svc-card .btn{ width:100%; margin-top:2px; }

/* ---- Блок-разделитель раздела на /prices/ ---- */
.price-divider{ height:1px; background:var(--grad-hair); margin:6px 0; }

/* ---- Нижний CTA направления ---- */
.svc-cta{ margin-top:8px; }

/* =============================================================================
   Адаптив
   ============================================================================= */
@media (max-width:560px){
  .svc-grid{ grid-template-columns:1fr; }
  .price-now{ font-size:30px; }
  .svc-card{ padding:20px; }
}

/* =============================================================================
   Формы, quiz, AI-скан, контакты (страницы /diagnostic/ и /contact/)
   ============================================================================= */

/* ---- Две колонки выбора на /diagnostic/ ---- */
.diag-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
@media (max-width:860px){ .diag-grid{ grid-template-columns:1fr; } }

.diag-card{
  background:var(--pearl); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(22px,2.6vw,30px); box-shadow:var(--shadow-card);
}
.diag-card .tag{ font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--bronze); }
.diag-card h2{ font-family:var(--font-display); font-weight:600; font-size:clamp(24px,3vw,32px); margin:6px 0 10px; color:var(--ink); }
.diag-card > p{ font-size:14.5px; line-height:1.6; color:var(--muted); margin:0 0 18px; }

/* ---- AI-скан: дропзона ---- */
.scan-drop{
  position:relative; border:1.5px dashed var(--gold-soft); border-radius:var(--r-md);
  background:linear-gradient(180deg,#fffaf0,#fbf3e4); padding:30px 20px; text-align:center;
  transition:border-color .2s ease, background .2s ease; cursor:pointer;
}
.scan-drop:hover{ border-color:var(--champagne); }
.scan-drop svg{ width:44px; height:44px; stroke:var(--champagne); margin-bottom:10px; }
.scan-drop b{ display:block; font-size:15px; color:var(--ink); margin-bottom:4px; }
.scan-drop span{ font-size:13px; color:var(--muted); }
.scan-drop input[type="file"]{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.scan-preview{ margin-top:14px; display:none; }
.scan-preview img{ width:100%; max-height:240px; object-fit:cover; border-radius:var(--r-md); border:1px solid var(--line); }
.scan-status{
  display:none; margin-top:14px; padding:14px 16px; border-radius:var(--r-sm);
  background:rgba(197,154,70,.1); border:1px solid var(--line-soft); color:#6f5f4a; font-size:13.5px; line-height:1.55;
}
.scan-status.show{ display:block; }
.scan-fine{ margin-top:12px; font-size:11.5px; color:#9a8b7a; line-height:1.45; }

/* ---- Формы (quiz + contact) ---- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-grid .full{ grid-column:1 / -1; }
@media (max-width:560px){ .form-grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:12.5px; font-weight:600; color:var(--bronze); letter-spacing:.02em; }
.field input, .field select, .field textarea{
  font-family:var(--font-body); font-size:14.5px; color:var(--ink);
  background:var(--pearl); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:11px 13px; outline:none; transition:border-color .18s ease, box-shadow .18s ease; width:100%;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--champagne); box-shadow:0 0 0 3px rgba(197,154,70,.14); }
.field textarea{ resize:vertical; min-height:90px; }
.form-actions{ margin-top:16px; }
.form-actions .btn{ width:100%; }
.form-hint{ margin-top:10px; font-size:12px; color:var(--muted); text-align:center; }

/* ---- Контакты: инфо-блоки ---- */
.contact-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:22px; align-items:start; }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }
.info-list{ display:flex; flex-direction:column; gap:14px; }
.info-row{ display:flex; gap:14px; align-items:flex-start; background:var(--pearl); border:1px solid var(--line); border-radius:var(--r-md); padding:16px 18px; }
.info-row .ic{ flex-shrink:0; width:42px; height:42px; border-radius:12px; background:var(--soft); display:flex; align-items:center; justify-content:center; }
.info-row .ic svg{ width:20px; height:20px; stroke:var(--gold); }
.info-row > span:last-child{ display:flex; flex-direction:column; }
.info-row .t{ display:block; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--bronze); margin-bottom:3px; }
.info-row .v{ display:block; font-size:15px; color:var(--ink); line-height:1.45; }
.info-row a.v{ color:var(--gold); text-decoration:none; }
.info-row a.v:hover{ text-decoration:underline; }
.hours{ font-size:14.5px; color:#5a4d40; line-height:1.7; }
.hours b{ color:var(--ink); }
.hours .off{ color:var(--muted); }

/* ---- Карта-плейсхолдер ---- */
.map-card{ position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-card); min-height:240px;
  background:
    radial-gradient(circle at 30% 30%, rgba(197,154,70,.12), transparent 60%),
    repeating-linear-gradient(0deg, rgba(151,112,52,.05) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(151,112,52,.05) 0 1px, transparent 1px 28px),
    linear-gradient(180deg,#fbf4e8,#f3e8d4);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding:28px; }
.map-card .pin{ width:50px; height:50px; border-radius:50%; background:var(--grad-gold); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(169,119,45,.3); }
.map-card .pin svg{ width:26px; height:26px; stroke:#fff; }
.map-card .ttl{ font-family:var(--font-display); font-weight:600; font-size:22px; color:var(--ink); }
.map-card .sub{ font-size:13.5px; color:var(--muted); }

/* ---- Блок доверия (список галочек) ---- */
.trust-checks{ display:grid; grid-template-columns:1fr 1fr; gap:12px 22px; margin-top:18px; }
@media (max-width:560px){ .trust-checks{ grid-template-columns:1fr; } }
.trust-checks li{ list-style:none; display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:#5a4d40; line-height:1.5; }
.trust-checks li svg{ flex-shrink:0; width:20px; height:20px; stroke:var(--gold); margin-top:1px; }