/* Бренд-кит Дантистофф — components.css. Требует tokens.css, fonts.css, base.css. */

/* ---------- контейнер и секции ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--container-pad)}
.container--narrow{max-width:var(--container-narrow)}
.container--wide{max-width:var(--container-xl)}
.section{padding-block:clamp(32px,5vw,64px)}
.section--light{background:var(--surface-light)}
.section--magnolia{background:var(--surface-magnolia)}
.section--peach{background:var(--surface-peach)}
.section--gray{background:var(--surface-gray)}
.section--dark{background:var(--ink);color:#fff}

/* ---------- кнопка (ТЗ: радиус 12, высота ≥ 52, вес 500, текст ≥ 17) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:12px 20px;border:0;border-radius:var(--radius-md);background:var(--brand-orange);color:#fff;font-size:17px;font-weight:500;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;box-shadow:var(--shadow-orange);transition:background-color .15s,box-shadow .15s,transform .05s;-webkit-tap-highlight-color:transparent}
.btn:hover{background:var(--brand-orange-hover);text-decoration:none}
.btn:active{background:var(--brand-orange-active);box-shadow:none;transform:translateY(1px)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.6;cursor:not-allowed;box-shadow:none;transform:none}
.btn--outline{background:transparent;color:var(--brand-orange);box-shadow:none;border:1.5px solid var(--brand-orange)}
.btn--outline:hover{background:var(--surface-peach)}
.btn--outline:active{background:var(--surface-peach);color:var(--brand-orange-active)}
.btn--ghost{background:transparent;color:inherit;box-shadow:none}
.btn--ghost:hover{background:rgba(0,0,0,.05)}
.btn--lg{min-height:56px;font-size:18px;padding:14px 24px}
.btn--block{display:flex;width:100%}
.btn--pill{border-radius:var(--radius-pill)}
.btn .icon{width:20px;height:20px;flex:0 0 20px}
/* Мягкий блик, пробегающий по кнопке раз в ~3 с: привлекает внимание к главному действию.
   Цвет и форма кнопки не меняются; при prefers-reduced-motion блика нет. */
.btn--shine{position:relative;overflow:hidden}
.btn--shine::after{content:"";position:absolute;top:-10%;bottom:-10%;left:-45%;width:38%;background:linear-gradient(105deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.38) 50%,rgba(255,255,255,0) 100%);transform:skewX(-16deg);animation:btn-shine 3.4s ease-in-out infinite;pointer-events:none}
@keyframes btn-shine{0%{left:-45%}42%{left:125%}100%{left:125%}}
@media (prefers-reduced-motion:reduce){.btn--shine::after{display:none}}

/* ---------- плашка ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:var(--radius-pill);background:var(--brand-orange);color:#fff;font-size:13px;font-weight:500;line-height:1.1;white-space:nowrap}
.badge--muted{background:var(--surface-gray);color:var(--ink)}
.badge--lavender{background:var(--promo-lavender);color:var(--ink)}
.badge--outline{background:transparent;border:1.5px solid var(--brand-orange);color:var(--brand-orange);padding:6px 12px}
.badge--mini{font-size:10px;padding:4px 7px;letter-spacing:.02em}

/* ---------- цена: новая крупно, старая зачёркнута ---------- */
.price{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px}
.price__new{font-size:24px;font-weight:600;line-height:1;color:var(--ink)}
.price__old{font-size:15px;color:var(--ink-faint);text-decoration:line-through;text-decoration-thickness:1.5px}

/* ---------- карточка ---------- */
.card{background:var(--surface);color:var(--ink);border-radius:var(--radius-xl);padding:20px;box-shadow:var(--shadow-big)}
.card--flat{box-shadow:none;border:1px solid var(--line)}
.card--accent{box-shadow:none;border:2px solid var(--brand-orange)}
.card--sm{border-radius:var(--radius-lg);padding:16px}

/* ---------- иконки ---------- */
.icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.icon--sm{width:20px;height:20px}

/* строка «иконка + текст» */
.icon-lines{display:grid;gap:10px}
.icon-line{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.4}
.icon-line .icon{width:22px;height:22px;color:var(--brand-orange);margin-top:1px}

/* список с галочками */
.check-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.check-list li{display:flex;gap:10px;align-items:flex-start;line-height:1.4}
.check-list .icon{width:22px;height:22px;color:var(--brand-orange);margin-top:1px}

/* лента доверия: четыре цифры в строку; --card — белая плашка с иконками */
.trust-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;text-align:center}
.trust-strip b{display:block;font-size:18px;font-weight:600;line-height:1.1;white-space:nowrap}
.trust-strip small{display:block;font-size:11px;line-height:1.25;margin-top:4px;opacity:.78}
.trust-strip .icon{width:22px;height:22px;color:var(--brand-orange);margin:0 auto 6px}
.trust-strip--card{background:var(--surface);color:var(--ink);border-radius:var(--radius-lg);box-shadow:var(--shadow-small);padding:14px 6px 12px}
.trust-strip--card small{color:var(--ink-muted);opacity:1}
/* --2x2: два ряда по два, иконка слева от цифры */
.trust-strip--2x2{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 14px;text-align:left}
.trust-strip--card.trust-strip--2x2{padding:20px 22px 18px}
.trust-strip--2x2 > div{display:grid;grid-template-columns:26px minmax(0,1fr);column-gap:10px;align-items:center}
.trust-strip--2x2 .icon{grid-row:1/3;margin:0;width:26px;height:26px}
.trust-strip--2x2 b{grid-column:2;font-size:20px}
.trust-strip--2x2 small{grid-column:2;font-size:12px;margin-top:2px}
@media (min-width:640px){.trust-strip--card{padding:20px 12px 16px}.trust-strip--card b{font-size:22px}.trust-strip--card small{font-size:12px}.trust-strip--2x2{grid-template-columns:repeat(4,minmax(0,1fr))}.trust-strip--card.trust-strip--2x2{padding:22px 24px 20px}}

/* плитки «иконка + текст», сетка 2×2 */
.tile-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.icon-tile{display:flex;flex-direction:column;gap:8px;align-items:flex-start;min-width:0;padding:14px;background:var(--surface-gray);border-radius:var(--radius-md);font-size:14px;line-height:1.35;overflow-wrap:break-word}
.icon-tile .icon{width:22px;height:22px;color:var(--brand-orange);margin-top:1px}
.icon-tile > span{min-width:0;max-width:100%}
@media (min-width:480px){.icon-tile{flex-direction:row;gap:10px}}

/* ---------- форма ---------- */
.field{display:grid;gap:6px}
.field__label{font-size:13px;line-height:1.2;color:var(--ink-muted)}
.input{width:100%;min-height:52px;padding:0 14px;border:1px solid var(--line);border-radius:var(--radius-md);background:#fff;font-size:16px;line-height:1.2;color:var(--ink);outline:none;appearance:none;transition:border-color .15s,box-shadow .15s}
.input::placeholder{color:var(--ink-faint)}
.input:focus{border-color:var(--brand-orange);box-shadow:0 0 0 3px rgba(237,93,43,.15)}
.field--error .input{border-color:var(--error)}
.field__error{display:none;font-size:13px;line-height:1.3;color:var(--error)}
.field--error .field__error{display:block}
.form-note{font-size:12px;line-height:1.35;color:var(--ink-muted)}
.form-note a{color:inherit;text-decoration:underline}
.form-note.form-error{color:var(--error)}   /* ошибка отправки / согласия — красным, как ошибки полей */

/* чекбокс в фирменном стиле: 18 px, радиус 5, оранжевая заливка с галочкой */
/* Галочка — background-image, а не ::before: WebKit (Safari, Telegram на iPhone) не рисует псевдоэлементы у <input>. */
.checkbox{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:18px;height:18px;margin:0;border:1.5px solid var(--line);border-radius:5px;background:#fff center/11px 11px no-repeat;cursor:pointer;vertical-align:middle;transition:background-color .15s,border-color .15s}
.checkbox:checked{background-color:var(--brand-orange);border-color:var(--brand-orange);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E")}
.checkbox:focus-visible{outline:2px solid var(--brand-purple);outline-offset:2px}
/* строка согласия: чекбокс слева от мелкого текста */
.form-consent{display:flex;align-items:center;gap:8px;cursor:pointer}
.form-consent.is-error .checkbox{border-color:var(--error)}

/* ---------- липкая кнопка ---------- */
.cta-sticky{position:fixed;left:0;right:0;bottom:0;z-index:50;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);border-radius:16px 16px 0 0;box-shadow:0 -4px 20px rgba(0,0,0,.09);transform:translateY(110%);transition:transform .25s ease}
.cta-sticky.is-visible{transform:none}
.cta-sticky .btn{width:100%;max-width:var(--container-narrow);margin-inline:auto}
@media (prefers-reduced-motion:reduce){.cta-sticky{transition:none}}

/* ---------- тёмный подвал ---------- */
.footer-dark{background:var(--ink);color:#fff}
.footer-dark a{color:#fff}
.footer-dark__addresses{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;font-size:13px;line-height:1.35;color:var(--ink-on-dark-strong)}
.footer-dark__addresses b{display:block;font-weight:500;color:#fff}
.footer-dark__phone{display:inline-block;font-size:24px;font-weight:600;line-height:1.1;color:#fff}
.footer-dark__legal{font-size:12px;line-height:1.5;color:var(--ink-on-dark)}
.footer-dark__legal a{color:var(--ink-on-dark);text-decoration:underline}

/* ---------- появление при прокрутке (reveal.js) ---------- */
/* Скрываем только при наличии JS (класс .js на <html> ставит инлайн-скрипт в <head>), иначе контент виден всегда. */
.js [data-reveal],.js [data-reveal-stagger]>*{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
.js [data-reveal].is-in,.js [data-reveal-stagger]>.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js [data-reveal],.js [data-reveal-stagger]>*{opacity:1;transform:none;transition:none}}

/* ============================================================
   Компоненты длинного лендинга (ТЗ №2)
   ============================================================ */

/* вторая, менее заметная кнопка на тёмном фоне */
.btn--outline-light{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.55);box-shadow:none}
.btn--outline-light:hover{background:rgba(255,255,255,.08)}
.btn--outline-light:active{background:rgba(255,255,255,.14);color:#fff}

/* ---------- таблица цен: этап (+ когда) | стоимость ---------- */
.table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.4}
.table th,.table td{padding:12px 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.table th{font-size:12px;font-weight:500;color:var(--ink-muted)}
.table td:last-child,.table th:last-child{text-align:right;white-space:nowrap;padding-left:14px;font-weight:500}
.table small{display:block;font-size:13px;line-height:1.35;color:var(--ink-muted);margin-top:2px}
.table tr.table__total td{font-weight:600;font-size:18px;border-bottom:0;padding-top:16px}
.table__old{display:block;margin-top:3px;font-size:14px;font-weight:400;color:var(--ink-muted);text-decoration:line-through;text-decoration-thickness:1.5px}   /* старая цена под новой */
.table__old-line{display:flex;justify-content:flex-end;align-items:center;gap:6px;margin-top:5px}   /* бейдж скидки + старая цена в одну строку */
.table__old-line .table__old{margin-top:0}

/* ---------- плашка с цифрой ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.stat{padding:16px 14px;background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-small);min-width:0}
.stat b{display:block;font-size:26px;font-weight:600;line-height:1;color:var(--brand-orange);white-space:nowrap}
.stat span{display:block;margin-top:7px;font-size:13px;line-height:1.35;color:var(--ink-soft);overflow-wrap:break-word}

/* ---------- горизонтальная лента со scroll-snap (регалии, врачи) ---------- */
.scroller{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--container-pad);padding:4px var(--container-pad) 14px;margin:0 calc(-1 * var(--container-pad));-webkit-overflow-scrolling:touch;scrollbar-width:none}
/* scroll-padding: без него привязка прокрутки ставит первую карточку вплотную к краю экрана */
.scroller::-webkit-scrollbar{display:none}
.scroller > *{flex:0 0 auto;scroll-snap-align:start}

/* регалия — карточка в ленте */
.regalia{width:236px;padding:14px;background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-small);font-size:14px;line-height:1.35;display:flex;flex-direction:column;gap:10px}
.regalia .icon{color:var(--brand-orange)}

/* ---------- карточка видео: обложка 16:9 + play, без автозапуска ---------- */
.video-card{position:relative;display:block;width:100%;padding:0;border:0;border-radius:var(--radius-lg);overflow:hidden;background:var(--ink);color:#fff;text-align:left;cursor:pointer;font:inherit}
.video-card img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
/* кнопка воспроизведения — как на сайте клиники (dantistoff.ru/about/smi/): тёмный полупрозрачный круг,
   белый скруглённый треугольник маской (assets/video-play.svg, файл с сайта); у нас ещё лёгкое размытие фона.
   Разметка: <span class="video-card__play" aria-hidden="true"></span> */
.video-card__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background-color:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background-color .15s}
.video-card__play::after{content:"";position:absolute;top:0;bottom:0;left:1px;right:0;background-color:#fff;-webkit-mask-image:url(assets/video-play.svg);mask-image:url(assets/video-play.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:14.5px 16.5px;mask-size:14.5px 16.5px}
@media (hover:hover){.video-card:hover .video-card__play{background-color:var(--brand-orange)}}
.video-card:active .video-card__play{background-color:var(--btn-active-color-orange)}
@media (min-width:641px){.video-card__play{width:64px;height:64px}.video-card__play::after{left:2px;-webkit-mask-size:22px 25.5px;mask-size:22px 25.5px}}
.video-card--titled img{aspect-ratio:16/10}
.video-card--titled .video-card__play{top:calc(50% - 20px)}
/* --overlay: название поверх обложки снизу, под ним мягкий градиент (плавная растяжка как у видео на сайте клиники) */
.video-card--overlay .video-card__play{z-index:2}
.video-card--overlay .video-card__title{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:44px 14px 13px;font-size:15px;font-weight:500;line-height:1.3;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.25);background:linear-gradient(to bottom,rgba(39,39,39,0) 0%,rgba(39,39,39,.012) 5.19%,rgba(39,39,39,.029) 9.68%,rgba(39,39,39,.052) 13.66%,rgba(39,39,39,.083) 17.36%,rgba(39,39,39,.12) 20.98%,rgba(39,39,39,.165) 24.74%,rgba(39,39,39,.218) 28.86%,rgba(39,39,39,.28) 33.54%,rgba(39,39,39,.351) 39%,rgba(39,39,39,.431) 45.44%,rgba(39,39,39,.522) 53.1%,rgba(39,39,39,.624) 62.17%,rgba(39,39,39,.738) 72.86%,rgba(39,39,39,.863) 85.4%,rgba(39,39,39,.95) 100%)}
.video-card__title{display:block;padding:10px 12px 12px;font-size:14px;line-height:1.35;background:var(--ink)}

/* ---------- карточка врача ---------- */
/* карточка врача — как на сайте клиники (блок «Команда врачей»): фото врача на всю карточку, голова выступает
   над серым фоном (отступ сверху --pt, фото на 6 % выше подложки), внизу полупрозрачная белая подпись.
   Фото — вырезанная фигура в кадре 3:4 с прозрачным фоном; шире карточки, прижато к верху, как на сайте. */
.doctor-card{--pt:30px;--rounded:21px;display:flex;width:300px;padding-top:var(--pt);border-radius:var(--rounded);overflow:hidden}
.doctor-card__wrapper{display:flex;flex-direction:column;justify-content:space-between;width:100%;padding:8px;border-radius:var(--rounded);background-color:#eee;position:relative}
.doctor-card__figure{flex:1 0 233px}
.doctor-card__img{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:132.5%;max-width:none;height:106%;object-fit:cover;object-position:center top}
/* подпись — «матовое стекло»: отступ 8 px от краёв карточки, фон под ней размыт */
.doctor-card__caption{position:relative;z-index:1;padding:12px 14px 14px;border-radius:calc(var(--rounded) - 6px);background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.doctor-card__caption > :last-child{margin-bottom:0}
.doctor-card__meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.doctor-card__meta-item{padding:5px 8px;border-radius:13.4px;background:#fff;font-size:10px;font-weight:300;line-height:1.09;color:#111}
.doctor-card__name{margin-bottom:8px;font-size:16px;font-weight:500;line-height:1.3;color:#111}
.doctor-card__spec{margin-bottom:12px;font-size:14px;line-height:1.2;color:var(--ink-faint)}
/* станция метро: значок цвета линии (--line на карточке), название — основным цветом, чтобы читалось на белом */
.doctor-card__place{display:flex;align-items:center;gap:4px;margin-bottom:12px;font-size:14px;line-height:1.35;color:var(--ink)}
.doctor-card__m-icon{flex:none;width:20px;height:20px;color:var(--line,var(--ink-muted))}
@media (min-width:641px){
  .doctor-card{--rounded:28px}
  .doctor-card__figure{flex-basis:316px}
  .doctor-card__caption{padding:16px}
  .doctor-card__meta{margin-bottom:10px}
  .doctor-card__meta-item{padding:6px 10px;font-size:12px}
  .doctor-card__name{font-size:18px;line-height:1.3}
  .doctor-card__spec{font-size:16px}
}

/* ---------- управление лентой (slider.js): полоса с бегунком и кнопки, как у слайдеров на сайте клиники ---------- */
.slider__nav{display:none;align-items:center;gap:8px;margin-top:10px}
.js .slider__nav{display:flex}
.js .slider__nav[hidden]{display:none}
.slider__bar{position:relative;flex:1;height:4px;margin-right:10px;border-radius:10px;background:rgba(44,44,44,.06);touch-action:none;cursor:pointer}
.slider__bar::before{content:"";position:absolute;left:0;right:0;top:-12px;bottom:-12px}   /* зона нажатия выше полосы */
.slider__thumb{position:absolute;left:0;top:0;height:100%;border-radius:10px;background:var(--color-crayola)}
.slider__btn{position:relative;flex:none;width:35px;height:35px;padding:0;border:0;border-radius:50%;background:var(--color-crayola);color:#fff;cursor:pointer;transition:background-color .15s linear,opacity .15s}
.slider__btn::before{content:"";position:absolute;inset:0;margin:auto;width:11px;height:11px;background-color:currentColor;-webkit-mask-image:url(assets/arrow-right-i.svg);mask-image:url(assets/arrow-right-i.svg);-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.slider__btn--prev::before{-webkit-mask-image:url(assets/arrow-left-i.svg);mask-image:url(assets/arrow-left-i.svg)}
@media (hover:hover){.slider__btn:hover{background-color:#3f4964}}
.slider__btn:active{background-color:#45506d}
.slider__btn:disabled{opacity:.5;cursor:default}
/* мышью ленту можно тянуть, как пальцем (slider.js) */
@media (hover:hover) and (pointer:fine){.slider .scroller{cursor:grab}}
.slider .scroller.is-dragging{cursor:grabbing;user-select:none;-webkit-user-select:none}
@media (min-width:641px){.slider__btn{width:40px;height:40px}}

/* ---------- лента шагов с линией и номерами ---------- */
.steps{list-style:none;padding:0;margin:0}
.steps li{position:relative;padding:0 0 24px 46px}
.steps li::before{content:attr(data-n);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:var(--brand-orange);color:#fff;font-size:15px;font-weight:600;display:grid;place-content:center}
.steps li::after{content:"";position:absolute;left:15px;top:36px;bottom:0;width:2px;background:var(--line)}
.steps li:last-child{padding-bottom:0}
.steps li:last-child::after{display:none}
.steps h3{margin:5px 0 6px;font-size:17px;font-weight:600;line-height:1.3}
.steps p{font-size:15px;line-height:1.45;color:var(--ink-soft)}

/* ---------- кейс до/после ---------- */
.case{display:block;width:100%;padding:0;border:0;background:var(--surface);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-small);text-align:left;color:inherit;font:inherit;cursor:pointer}
.case__pair{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.case__pair figure{position:relative;margin:0}
.case__pair img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.case__pair figcaption{position:absolute;left:8px;top:8px;padding:3px 8px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font-size:11px;font-weight:500}
.case__text{display:block;padding:10px 14px 12px;font-size:14px;line-height:1.35;color:var(--ink-soft)}

/* ---------- оценка на площадке ---------- */
/* рейтинги на площадках — как на главной сайта клиники (блок #site-rating): логотип площадки, оценка
   фиолетовым, пять звёзд (assets/star.svg маской), число отзывов; сетка 2×2 на мобильном */
.rating-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 2%}
.rating-card{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:16px;border-radius:10px;background-color:var(--background-light-gray);box-shadow:0 2px 14px rgba(0,0,0,.05);color:inherit;text-decoration:none;transition:background-color .15s linear}
@media (hover:hover){.rating-card:hover{background-color:#f1f1f4;text-decoration:none;color:inherit}}
.rating-card__platform{display:flex;align-items:center;width:100%;height:22px;margin-bottom:26px}   /* строка логотипа одной высоты — оценки в соседних карточках на одном уровне */
.rating-card__platform--short{width:40%}   /* короткие логотипы (Яндекс, 2ГИС) — не во всю ширину, как на сайте */
.rating-card__platform--compact{width:76%}  /* ПроДокторов: во всю ширину слишком крупный рядом с остальными */
.rating-card__platform img{display:block;width:100%;height:auto}
.rating-card__score{font-size:26px;font-weight:600;line-height:1.65;color:var(--main-purple)}
.rating-card__of{font-size:16px;font-weight:400;line-height:1.25;color:var(--main-black)}
.stars{display:flex;gap:7px;margin-bottom:5px}
.stars i{display:block;width:16.5px;height:16.5px;background-color:#fb7e01;-webkit-mask-image:url(assets/star.svg);mask-image:url(assets/star.svg);-webkit-mask-size:cover;mask-size:cover;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.rating-card__reviews{font-size:12px;line-height:1.35;color:var(--color-soft-gray)}
@media (min-width:641px){
  .rating-card{padding:32px}
  .rating-card__platform{height:30px;margin-bottom:32px}
  .rating-card__score{margin-bottom:8px;font-size:56px;line-height:1.28}
  .rating-card__of{font-size:18px;line-height:1.65}
  .stars{margin-bottom:16px}
  .stars i{width:21px;height:21px}
  .rating-card__reviews{font-size:16px}
}

/* ---------- чипсы (radio внутри label) ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1.5px solid var(--line);border-radius:999px;background:#fff;font-size:14px;font-weight:500;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .15s,background-color .15s,color .15s}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip.is-checked,.chip:has(input:checked){border-color:var(--brand-orange);background:var(--surface-peach);color:var(--brand-orange)}
.chip:has(input:focus-visible){outline:2px solid var(--brand-purple);outline-offset:2px}
/* --fit: вся группа в одну строку — чипсы делят ширину, текст не переносится */
.chips--fit{flex-wrap:nowrap;gap:6px}
.chips--fit .chip{flex:1 1 auto;justify-content:center;min-width:0;min-height:38px;padding:0 8px;font-size:13px;white-space:nowrap}

/* ---------- аккордеон на <details> ---------- */
.accordion{border-top:1px solid var(--line)}
.accordion details{border-bottom:1px solid var(--line)}
.accordion summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0;font-size:16px;font-weight:500;line-height:1.35;cursor:pointer}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary .icon{flex:0 0 22px;width:22px;height:22px;color:var(--brand-orange);transition:transform .2s}
.accordion details[open] summary .icon{transform:rotate(45deg)}
.accordion__body{padding:0 0 16px;font-size:15px;line-height:1.5;color:var(--ink-soft)}

/* ---------- оверлеи: модальное окно (лист снизу на мобильном) и лайтбокс ---------- */
.overlay{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:16px;background:var(--scrim)}
.overlay.is-open{display:flex}
body.has-overlay{overflow:hidden}
.overlay--sheet{align-items:flex-end;padding:0}
.modal{position:relative;width:100%;max-width:480px;max-height:92vh;overflow:auto;background:#fff;color:var(--ink);border-radius:20px 20px 0 0;padding:20px 16px calc(20px + env(safe-area-inset-bottom))}
@media (min-width:640px){.overlay--sheet{align-items:center;padding:24px}.modal{border-radius:20px;padding:24px}}
.modal__close,.lightbox__close{position:absolute;top:10px;right:10px;width:40px;height:40px;border:0;border-radius:50%;background:var(--surface-gray);color:var(--ink);display:grid;place-content:center;cursor:pointer}
.modal__title{padding-right:44px;font-size:20px;font-weight:600;line-height:1.25}
.modal__text{margin-top:8px;font-size:14px;line-height:1.45;color:var(--ink-muted)}
.lightbox{position:relative;width:100%;max-width:960px}
.lightbox__close{top:-50px;right:0;background:rgba(255,255,255,.16);color:#fff}
.lightbox__video{aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden}
.lightbox__video iframe{display:block;width:100%;height:100%;border:0}
.lightbox__pair{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.lightbox__pair img{display:block;width:100%;border-radius:10px}
.lightbox__caption{margin-top:10px;color:#fff;text-align:center;font-size:14px;line-height:1.4}

/* ---------- поле файла ---------- */
.file-input{position:relative;display:flex;align-items:center;gap:10px;min-height:52px;padding:0 14px;border:1.5px dashed var(--line);border-radius:var(--radius-md);background:#fff;font-size:15px;color:var(--ink-muted);cursor:pointer}
.file-input input{position:absolute;opacity:0;width:0;height:0}
.file-input .icon{color:var(--brand-orange)}
.file-input.has-file{border-style:solid;border-color:var(--brand-orange);color:var(--ink)}
.file-input span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- карта филиалов (branches-map.js) — стили меток с сайта клиники ---------- */
.branches-map{position:relative;height:440px;border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-gray)}
.branches-map.is-failed{display:none}
/* метка: капля цвета линии метро с белым кругом и логотипом клиники */
.branch-map-placemark-geo{display:flex;align-items:center;justify-content:center;width:52px;height:52px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-45deg);border-radius:40px 40px 40px 3px}
.branch-map__icon-wrapper{display:flex;align-items:center;justify-content:center;border-radius:9999px;background-color:#fff;transform:rotate(45deg)}
.branch-map__icon-wrapper>svg{width:42px;height:42px}
/* название клиники у выбранной метки — выезжает из-под неё вправо */
.branch-map__active-mark{width:max-content;max-width:150px;padding:7px 10px 7px 36px;position:absolute;left:50%;top:50%;transform:translateY(-50%);z-index:-1;border-radius:6px;font-family:var(--font-sans);font-size:12px;line-height:14.4px;font-weight:500;color:var(--ink);background-color:#fff}
.branch-map__cluster{font-family:var(--font-sans);font-size:16px;font-weight:600;color:#fff}
/* как на сайте: без кнопок «Такси» и «Доставка» в углу карты (классы с версией API — через подстроку) */
.branches-map [class*="-gototech"],.branches-map [class*="-gototaxi"]{display:none!important}

/* ---------- отзыв пациента: карточка как на dantistoff.ru/otzyvy/ — автор с датой и площадкой, оценка, заголовок, текст,
   лечащий врач (фото, фамилия с инициалами, должность); теги оказанных услуг сейчас не выводятся (tools/extract/reviews.py).
   Карточки кладутся в ленту .scroller (управление — brand/slider.js); текст свёрнут до 6 строк только с JS,
   «Читать полностью» показывает brand/reviews.js, если текст правда не поместился ---------- */
.review-card{display:flex;flex-direction:column;width:min(300px,calc(100vw - 72px));padding:20px;border-radius:var(--radius-xl);background:#fff;box-shadow:var(--shadow-small);color:var(--ink)}
.review-card__head{display:grid;gap:2px}
.review-card__author{font-size:16px;line-height:1.25;font-weight:600}
.review-card__meta{font-size:13px;line-height:1.3;color:var(--ink-muted)}
.review-card__stars{gap:3px;margin:12px 0 0}
.review-card__stars i{width:15px;height:15px}
.review-card__title{margin-top:10px;font-size:17px;line-height:1.3;font-weight:600}
.review-card__text{margin:8px 0 16px;font-size:15px;line-height:1.5;color:var(--ink-soft)}
.js .review-card__text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;line-clamp:6;overflow:hidden}
.js .review-card.is-open .review-card__text{display:block;-webkit-line-clamp:none;line-clamp:none;overflow:visible}
.review-card__more{align-self:flex-start;margin:-12px 0 16px;padding:4px 0;border:0;background:none;font:inherit;font-size:15px;font-weight:500;color:var(--ink);text-decoration:underline;text-decoration-color:var(--brand-orange);text-decoration-thickness:1.5px;text-underline-offset:4px;cursor:pointer}
.review-card__more:hover{color:var(--brand-orange)}
.review-card__doctor{display:flex;align-items:center;gap:10px;margin-top:auto}
.review-card__doctor-img{flex:0 0 36px;width:36px;height:36px;border-radius:50%;background:var(--surface-gray)}
.review-card__doctor > span{display:grid;min-width:0}
.review-card__doctor-name{font-size:14px;line-height:1.25;font-weight:600}
.review-card__doctor-role{font-size:12.5px;line-height:1.3;color:var(--ink-muted)}
.review-card__tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:12px 0 0;padding:0}
.review-card__tags li{padding:5px 10px;border-radius:var(--radius-sm);background:var(--surface-gray);font-size:12.5px;line-height:1.25;color:var(--ink-soft)}
.scroller.has-open{align-items:flex-start}   /* раскрытая карточка растёт одна, соседние не тянутся за ней */