/* ===== Service page (без !important) ===== */
:root{
  --svc-accent: var(--accent, #0c7a43);
  --svc-border: color-mix(in srgb, var(--text, #111) 10%, transparent);
  --svc-surface-2: color-mix(in srgb, var(--surface, #fff) 92%, var(--text, #111) 8%);
}

.sr{position:absolute;left:-9999px}
.container{max-width:1200px;margin:0 auto;padding:0 16px}

/* Hero */
.svc-hero{padding:24px 0}
.svc-hero h1{font-size:clamp(24px,3.6vw,34px);margin:0 0 6px}
.svc-hero .sub{opacity:.8;margin:0 0 12px}

/* Tabs (чипы) */
.svc-tabs{display:flex;flex-wrap:wrap;gap:8px}
.svc-tabs .chip{
  border:1px solid var(--svc-border); background:var(--surface,#fff);
  border-radius:999px; padding:10px 14px; cursor:pointer;
}
.svc-tabs .chip.is-active{
  background:color-mix(in srgb, var(--svc-accent) 10%, var(--surface,#fff));
  border-color:color-mix(in srgb, var(--svc-accent) 40%, var(--svc-border));
}

/* Panels + план-карточки */
.svc-panels{margin-top:16px}
.svc-panel{display:none}
.svc-panel.is-active{display:block}

.plan-cards{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill, minmax(260px,1fr));
  list-style:none; padding:0; margin:0;
}
.plan{
  background:var(--surface,#fff);
  border:1px solid var(--svc-border);
  border-radius:14px; padding:14px;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
}
.plan__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.plan__head .price{font-weight:700}
.plan__list{margin:0;padding:0 0 0 18px;line-height:1.6;opacity:.9}

/* Форма */
.svc-form{padding:18px 0}
.form .grid{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
}
.f{display:flex;flex-direction:column;gap:6px}
.f > span{font-size:12px;opacity:.75}
.f select,.f input{height:44px;border-radius:10px;border:1px solid var(--svc-border);padding:0 12px;background:var(--surface,#fff)}
.agree{display:flex;align-items:center;gap:8px;margin-top:8px}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 16px;border-radius:10px;border:1px solid var(--svc-border);background:var(--surface,#fff);cursor:pointer}
.btn.primary{background:var(--svc-accent);color:#fff;border-color:transparent}
.btn.ghost{background:var(--surface,#fff)}
.err{display:block;min-height:1.1em;font-size:12px;color:#c0392b;margin-top:2px}
.result{margin-top:8px;font-weight:600}

/* Карта + быстрый виджет */
.svc-map{padding:24px 0}
.mapwrap{display:grid;gap:16px;grid-template-columns: 2fr 1fr}
.map{
  position:relative; display:block; min-height:360px; border-radius:16px;
  border:1px solid var(--svc-border); background:linear-gradient(180deg,#dff3ff,#e8f6ff);
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  text-decoration:none; color:#0b6aa7; font-weight:700;
}
.map span{position:absolute;left:16px;bottom:14px}

/* перенесённый снизу виджет — как карточка рядом с картой */
.quick-slot > *{
  background:var(--surface,#fff);
  border:1px solid var(--svc-border);
  border-radius:16px;
  padding:14px;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
}
.quick-slot h3{margin:0 0 8px}
.quick-slot form{display:grid;gap:8px}
.quick-slot label{display:flex;flex-direction:column;gap:6px}
.quick-slot input,.quick-slot select{
  height:44px;border-radius:10px;border:1px solid var(--svc-border);padding:0 12px
}

@media (max-width: 992px){
  .mapwrap{grid-template-columns:1fr}
}


/* Информ-карточка */
.svc-cta{padding:16px 0 32px}
.svc-cta .card{
  background:var(--surface,#fff); border:1px solid var(--svc-border);
  border-radius:16px; padding:16px; box-shadow:0 8px 22px rgba(0,0,0,.06);
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap
}

/* Адаптив */
@media (max-width: 992px){
  .mapwrap{grid-template-columns:1fr}
}