/*
Theme Name: Flekk — Кристалл Мята
Theme URI: https://flekk.ru/
Description: Шаблон лендинга для стоматологии и медицинского кабинета. Светлый разделённый экран, мятный акцент, Onest. Дочерняя тема Hello Elementor.
Author: Flekk
Template: hello-elementor
Version: 1.0.5
Text Domain: flekk-kristal
*/

/* ── Токены ───────────────────────────────────────────────── */
:root{
  --flk-ground:#FFFFFF;
  --flk-ground2:#F4F5F4;
  --flk-ink:#111312;
  --flk-ink2:#5C625F;
  --flk-ink3:#8A918D;
  --flk-line:#E4E6E4;
  --flk-mint:#12D07E;
  --flk-mint-ink:#062B1B;
  --flk-dark:#111312;

  --flk-wrap:1600px;
  --flk-pad:40px;
  --flk-gap:32px;
  --flk-sect:140px;

  --flk-h1:88px;
  --flk-h2:56px;
  --flk-h3:26px;
  --flk-lede:22px;
  --flk-body:19px;
  --flk-small:16px;
  --flk-r-lg:44px;
  --flk-r-md:28px;
}
@media (max-width:1439px){
  :root{--flk-h1:66px;--flk-h2:46px;--flk-sect:112px}
}
@media (max-width:1023px){
  :root{
    --flk-h1:48px;--flk-h2:36px;--flk-h3:22px;--flk-lede:19px;--flk-body:17px;
    --flk-sect:80px;--flk-pad:24px;--flk-gap:20px;--flk-r-lg:28px;--flk-r-md:20px;
  }
}

/* ── Основа ───────────────────────────────────────────────── */
html,body{max-width:100%;overflow-x:hidden}
body{
  margin:0;background:var(--flk-ground);color:var(--flk-ink);
  font-family:Onest,-apple-system,"Segoe UI",sans-serif;
  font-size:var(--flk-body);line-height:1.55;-webkit-font-smoothing:antialiased;
}
body h1,body h2,body h3{
  margin:0;font-weight:600;letter-spacing:-.035em;line-height:1.04;
  text-wrap:balance;color:inherit;
}
body h1{font-size:var(--flk-h1);letter-spacing:-.04em}
body h2{font-size:var(--flk-h2)}
body h3{font-size:var(--flk-h3);letter-spacing:-.02em;line-height:1.2}
body p{margin:0}
.flk-accent{color:var(--flk-mint)}

/* ── Обуздание Elementor ──────────────────────────────────── */
/* Полосу контента держит тема: в full_width Elementor свой content_width игнорирует. */
body .elementor-section > .elementor-container{
  max-width:var(--flk-wrap);
  padding-inline:var(--flk-pad);
}
/* Собственные 10px паддинга колонок — ритм задаёт тема. */
body .elementor-column > .elementor-widget-wrap{padding:0}
/* Раскладку делает грид контейнера, поэтому ширина колонки Elementor не нужна. */
/* Ширину печатает сам Elementor (50%, 33%…) и его правило позже темы:
   внутри грида колонка садилась на половину трека. Вес поднят через body. */
body .elementor-section[class*="flk-"] > .elementor-container > .elementor-column{width:100%}
/* Цвета и размеры забираем у набора Elementor. */
/* Цвет забираем у набора, размеры остаются за правилами h1/h2/h3 темы:
   font-size:inherit здесь схлопывал заголовки до размера тела текста. */
body .elementor-widget-heading .elementor-heading-title{color:inherit}
body .elementor-widget-text-editor{color:inherit}
body .elementor-widget-text-editor p:first-child{margin-top:0}
body .elementor-widget-text-editor p:last-child{margin-bottom:0}
body .elementor-widget:not(:last-child){margin-bottom:0}

/* ── Сетки секций ─────────────────────────────────────────── */
body .flk-g2 > .elementor-container,
body .flk-g3 > .elementor-container,
body .flk-g4 > .elementor-container,
body .flk-hero > .elementor-container,
body .flk-faq > .elementor-container,
body .flk-row-price > .elementor-container,
body .flk-row-cont > .elementor-container,
body .flk-form > .elementor-container,
body .flk-cont > .elementor-container{display:grid;gap:var(--flk-gap)}

body .flk-g2 > .elementor-container{grid-template-columns:repeat(2,minmax(0,1fr))}
body .flk-g3 > .elementor-container{grid-template-columns:repeat(3,minmax(0,1fr))}
body .flk-g4 > .elementor-container{grid-template-columns:repeat(4,minmax(0,1fr))}
body .flk-hero > .elementor-container{grid-template-columns:minmax(0,1fr) minmax(0,46%);align-items:stretch}
body .flk-faq > .elementor-container{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
body .flk-form > .elementor-container{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
body .flk-cont > .elementor-container{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
/* Колонка суммы — фиксированный трек: при `auto` каждая строка прайса
   считала ширину по своей цене, и названия с описаниями съезжали построчно. */
body .flk-row-price > .elementor-container{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 200px;align-items:baseline}
body .flk-row-cont > .elementor-container{grid-template-columns:200px minmax(0,1fr);align-items:baseline}

/* Вертикальный шаг внутри колонки */
/* Колонка — вертикальный стек во всю ширину: при flex-start виджеты
   схлопывались по содержимому (форма и фото уезжали в половину колонки). */
body .elementor-column > .elementor-widget-wrap{display:flex;flex-direction:column;align-items:stretch}

/* ── Шаг секций ───────────────────────────────────────────── */
body .flk-sec{padding-block:var(--flk-sect)}
body .flk-sec-tight{padding-block:0 var(--flk-sect)}
body .flk-shead{padding-block:var(--flk-sect) 64px}
body .flk-shead-tight{padding-block:0 64px}
body .flk-shead > .elementor-container{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--flk-gap);align-items:end}

/* ── Типографские классы ──────────────────────────────────── */
body .flk-lede{color:var(--flk-ink2);font-size:var(--flk-lede);line-height:1.5;max-width:60ch}
body .flk-note,body .flk-small{color:var(--flk-ink3);font-size:var(--flk-small)}
body .flk-body-dim{color:var(--flk-ink2);font-size:var(--flk-small);line-height:1.5}

/* ── Кнопка ───────────────────────────────────────────────── */
body .elementor-widget-button .elementor-button{
  display:inline-flex;align-items:center;gap:14px;border:0;border-radius:100px;
  background-color:var(--flk-mint);color:var(--flk-mint-ink);
  padding:20px 34px;min-height:56px;
  font-family:inherit;font-size:var(--flk-body);font-weight:600;line-height:1;
  text-decoration:none;box-shadow:none;
}
body .elementor-widget-button .elementor-button:hover,
body .elementor-widget-button .elementor-button:focus{background-color:#0FBB71;color:var(--flk-mint-ink)}
body .elementor-widget-button .elementor-button:focus-visible{outline:2px solid var(--flk-mint);outline-offset:3px}

/* ── Шапка темы ───────────────────────────────────────────── */
.flk-header{position:sticky;top:0;z-index:20;background:var(--flk-ground);border-bottom:1px solid var(--flk-line)}
.flk-header .flk-band{
  max-width:var(--flk-wrap);margin:0 auto;padding-inline:var(--flk-pad);
  display:flex;align-items:center;gap:32px;min-height:88px;
}
.flk-mark{display:flex;align-items:center;min-height:44px;gap:10px;font-size:24px;font-weight:700;
  letter-spacing:-.02em;color:var(--flk-ink);text-decoration:none}
.flk-mark::before{content:"";width:24px;height:24px;border-radius:8px;background:var(--flk-mint);flex:none}
.flk-nav ul{display:flex;gap:28px;margin:0;padding:0;list-style:none}
.flk-nav a{color:var(--flk-ink2);text-decoration:none;font-size:var(--flk-small);
  display:inline-flex;align-items:center;min-height:44px}
.flk-nav a:hover{color:var(--flk-ink)}
.flk-head-act{margin-left:auto;display:flex;align-items:center;gap:20px}
.flk-tel{
  display:inline-flex;align-items:center;min-height:48px;padding:0 26px;border-radius:100px;
  border:1px solid var(--flk-line);color:var(--flk-ink);text-decoration:none;
  font-size:var(--flk-small);font-weight:500;white-space:nowrap;
}
.flk-cta{
  display:inline-flex;align-items:center;min-height:48px;padding:0 26px;border-radius:100px;
  background:var(--flk-mint);color:var(--flk-mint-ink);text-decoration:none;
  font-size:var(--flk-small);font-weight:600;white-space:nowrap;
}

/* ── 1. Первый экран ──────────────────────────────────────── */
body .flk-hero{padding-block:80px 0}
body .flk-hero .flk-hero-text > .elementor-widget-wrap{justify-content:center;min-height:640px;padding-block:60px 100px}
body .flk-hero .flk-lede{margin-top:34px}
body .flk-hero .elementor-widget-button{margin-top:44px}
body .flk-hero .flk-note{margin-top:16px}
body .flk-hero .flk-hero-media > .elementor-widget-wrap{min-height:640px;height:100%;align-items:stretch}
/* Фото тянется на всю высоту колонки: у виджета и шорткода своей высоты нет. */
body .flk-hero .elementor-widget-shortcode{width:100%;flex:1;display:flex}
body .flk-hero .elementor-widget-shortcode .elementor-widget-container,
body .flk-hero .elementor-shortcode{width:100%;display:flex}

.flk-photo{
  position:relative;overflow:hidden;border-radius:var(--flk-r-lg);width:100%;height:100%;
  min-height:460px;
  background:radial-gradient(120% 90% at 70% 20%,#fff 0%,#E8EBE9 45%,#D3D8D5 100%);
}
.flk-photo::after{content:"";position:absolute;inset:0;background:
  radial-gradient(38% 46% at 62% 52%,rgba(255,255,255,.95),rgba(255,255,255,0) 70%),
  radial-gradient(26% 30% at 34% 74%,rgba(255,255,255,.7),rgba(255,255,255,0) 70%)}
.flk-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.flk-photo-card{
  position:absolute;left:40px;right:40px;bottom:40px;z-index:2;
  background:var(--flk-ground);border-radius:var(--flk-r-md);padding:24px 30px;
}
.flk-photo-card b{display:block;font-weight:600}
.flk-photo-card span{display:block;margin-top:4px;color:var(--flk-ink3);font-size:var(--flk-small)}

/* ── 2. Доверие ───────────────────────────────────────────── */
body .flk-trust{padding-block:56px}
body .flk-trust > .elementor-container{border-top:1px solid var(--flk-line);padding-top:56px}
body .flk-tn{font-size:38px;font-weight:600;letter-spacing:-.03em;line-height:1.1}
body .flk-trust .flk-small{margin-top:4px}

/* ── 3. Как проходит приём ────────────────────────────────── */
body .flk-steps .elementor-column > .elementor-widget-wrap{
  border-top:2px solid var(--flk-ink);padding-top:24px;gap:12px;
}
body .flk-step-n{color:var(--flk-ink3);font-size:var(--flk-small);font-variant-numeric:tabular-nums}

/* ── 4. Цены ──────────────────────────────────────────────── */
body .flk-price-band{background:var(--flk-ground2)}
body .flk-row-price{padding-block:32px}
body .flk-row-price > .elementor-container{border-top:1px solid var(--flk-line);padding-top:32px}
body .flk-row-price-last > .elementor-container{border-bottom:1px solid var(--flk-line);padding-bottom:32px}
body .flk-sum{
  font-size:var(--flk-h3);font-weight:600;letter-spacing:-.02em;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
body .flk-row-price .flk-col-sum > .elementor-widget-wrap{align-items:flex-end}

/* ── 5. Преимущества ──────────────────────────────────────── */
body .flk-feats .elementor-column > .elementor-widget-wrap{gap:14px}
body .flk-feats .elementor-column > .elementor-widget-wrap::before{
  content:"";width:44px;height:4px;border-radius:100px;background:var(--flk-mint);flex:none;
}

/* ── 6. Отзывы ────────────────────────────────────────────── */
body .flk-revs .elementor-column > .elementor-widget-wrap{
  background:var(--flk-ground2);border-radius:var(--flk-r-md);padding:48px;gap:24px;height:100%;
}
body .flk-quote{font-size:var(--flk-lede);line-height:1.45}
body .flk-who{color:var(--flk-ink3);font-size:var(--flk-small);margin-top:auto}

/* ── 7. Вопросы ───────────────────────────────────────────── */
body .flk-faq .flk-col-faq > .elementor-widget-wrap{align-items:stretch}
body .flk-q{border-top:1px solid var(--flk-line);padding-top:32px;width:100%}
body .flk-a{color:var(--flk-ink2);font-size:var(--flk-small);margin-top:12px;
  padding-bottom:32px;max-width:60ch;width:100%}
body .flk-a-last{border-bottom:1px solid var(--flk-line)}

/* ── 8. Форма ─────────────────────────────────────────────── */
body .flk-form-band{background:var(--flk-dark);color:#fff}
body .flk-form-band .flk-lede{color:#A6ADA9}
body .flk-form-band .flk-note{color:#79807C}
body .flk-form-band .flk-lede{margin-top:24px}
.flk-form-wrap{width:100%}
.flk-form-wrap .wpcf7-form{display:flex;flex-direction:column;gap:16px}
.flk-form-wrap p{margin:0}
.flk-form-wrap input[type="text"],
.flk-form-wrap input[type="tel"],
.flk-form-wrap input[type="email"]{
  width:100%;min-height:64px;border-radius:100px;border:1px solid #2A2E2C;
  background:#191C1A;color:#fff;padding:0 28px;
  font-family:inherit;font-size:var(--flk-body);
}
.flk-form-wrap input::placeholder{color:#79807C}
.flk-form-wrap input:focus-visible,
.flk-form-wrap .wpcf7-submit:focus-visible{outline:2px solid var(--flk-mint);outline-offset:3px}
.flk-form-wrap .wpcf7-submit{
  align-self:flex-start;border:0;border-radius:100px;background:var(--flk-mint);
  color:var(--flk-mint-ink);padding:20px 34px;min-height:56px;
  font-family:inherit;font-size:var(--flk-body);font-weight:600;cursor:pointer;
}
.flk-form-note{margin-top:4px;color:#79807C;font-size:var(--flk-small)}
.flk-form-wrap .wpcf7-response-output{
  border-color:var(--flk-mint);border-radius:var(--flk-r-md);
  color:#fff;font-size:var(--flk-small);margin:8px 0 0;padding:16px 24px;
}
.flk-form-wrap .wpcf7-not-valid-tip{color:#FF8A7A;font-size:var(--flk-small);margin-top:8px}

/* ── 9. Контакты ──────────────────────────────────────────── */
/* Левая колонка сама грид: заголовок и лид на всю ширину, дальше пары «подпись — значение». */
body .flk-cont .flk-col-info > .elementor-widget-wrap{
  display:grid;grid-template-columns:200px minmax(0,1fr);
  column-gap:var(--flk-gap);align-items:baseline;
}
body .flk-cont .flk-col-info .flk-span{grid-column:1/-1}
body .flk-cont .flk-lede{margin-top:24px;margin-bottom:40px}
body .flk-clabel,body .flk-cvalue{border-top:1px solid var(--flk-line);padding-block:24px;width:100%}
body .flk-clabel{color:var(--flk-ink3);font-size:var(--flk-small)}
body .flk-clabel-last,body .flk-cvalue-last{border-bottom:1px solid var(--flk-line)}
body .flk-cont .flk-col-photo > .elementor-widget-wrap{height:100%;align-items:stretch}
body .flk-cont .elementor-widget-shortcode{width:100%}
body .flk-cont .flk-photo{min-height:460px}

/* Нижнее поле у последней секции цветной полосы */
body .flk-pad-bottom{padding-bottom:var(--flk-sect)}

/* ── Подвал ───────────────────────────────────────────────── */
.flk-footer{border-top:1px solid var(--flk-line)}
.flk-footer .flk-band{
  max-width:var(--flk-wrap);margin:0 auto;padding:40px var(--flk-pad);
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  color:var(--flk-ink3);font-size:var(--flk-small);
}
.flk-footer a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.flk-footer .flk-band span{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-height:44px}
.flk-footer a:hover{color:var(--flk-ink)}

/* ── Телефон ──────────────────────────────────────────────── */
@media (max-width:1023px){
  .flk-nav{display:none}
  .flk-header .flk-band{min-height:72px;gap:12px}
  .flk-tel{padding:0 18px}
}
/* Телефон и кнопка вместе в шапку телефона не влезают: остаётся действие,
   номер живёт в контактах и подвале. */
@media (max-width:640px){
  .flk-tel{display:none}
  .flk-mark{font-size:20px}

  body .flk-g2 > .elementor-container,
  body .flk-g3 > .elementor-container,
  body .flk-g4 > .elementor-container,
  body .flk-hero > .elementor-container,
  body .flk-faq > .elementor-container,
  body .flk-form > .elementor-container,
  body .flk-cont > .elementor-container,
  body .flk-shead > .elementor-container{grid-template-columns:minmax(0,1fr)}

  body .flk-row-price > .elementor-container{grid-template-columns:minmax(0,1fr) auto;gap:10px 20px}
  body .flk-row-price .flk-col-name{grid-column:1;grid-row:1}
  body .flk-row-price .flk-col-sum{grid-column:2;grid-row:1}
  body .flk-row-price .flk-col-desc{grid-column:1/-1;grid-row:2}
  body .flk-cont .flk-col-info > .elementor-widget-wrap{grid-template-columns:minmax(0,1fr)}
  body .flk-clabel{padding-block:20px 0;border-top:1px solid var(--flk-line)}
  body .flk-cvalue{padding-block:2px 20px;border-top:0}
  body .flk-clabel-last{border-bottom:0}

  body .flk-hero{padding-block:40px 0}
  body .flk-hero .flk-hero-text > .elementor-widget-wrap{min-height:0;padding-block:0 40px}
  body .flk-hero .flk-hero-media > .elementor-widget-wrap{min-height:0}
  .flk-photo{min-height:380px}
  .flk-photo-card{position:static;margin:16px 0 0;padding:20px 22px;border:1px solid var(--flk-line)}

  body .flk-shead{padding-block:var(--flk-sect) 36px}
  body .flk-shead-tight{padding-block:0 36px}
  body .flk-revs .elementor-column > .elementor-widget-wrap{padding:28px}
  body .elementor-widget-button .elementor-button,
  .flk-form-wrap .wpcf7-submit{width:100%;justify-content:center;text-align:center}
}