/* ============================================================
   Barber Pet — форма записи
   Свёрстано по макету Figma «Barberpet _ Forms», кадры v1–v4 (1440 × 1207).
   Значения сняты из самого макета; сверка — design-ref/compare.py
   ============================================================ */

/* Шрифты макета лежат в плагине: без запросов к Google (GDPR) */
@font-face {
    font-family: "BPF Intel One Mono";
    src: url("../fonts/intel-one-mono-latin-ext.woff2") format("woff2");
    font-weight: 400 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "BPF Intel One Mono";
    src: url("../fonts/intel-one-mono-latin.woff2") format("woff2");
    font-weight: 400 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "BPF Inter";
    src: url("../fonts/inter-latin-ext.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "BPF Inter";
    src: url("../fonts/inter-latin.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "BPF Lora";
    src: url("../fonts/lora-latin-ext.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "BPF Lora";
    src: url("../fonts/lora-latin.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "BPF Open Sans";
    src: url("../fonts/open-sans-latin-ext.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "BPF Open Sans";
    src: url("../fonts/open-sans-latin.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   Токены
   Цвета, шрифты и размеры сняты с кадров Figma «Barberpet _ Forms»
   (раздел UPD, кадры v1–v4, 1440 × 1207) через API самого макета.
   ============================================================ */

[v-cloak] { display: none; }

.bpf {
    --c-bg:         #ECE0D4;               /* край фото — так нет шва на широких экранах */
    --c-text:       #1D1D1B;               /* black/100 */
    --c-text-2:     #4A4A49;               /* black/70: плейсхолдер, стрелки */
    --c-muted:      #6F6A65;               /* подписи карточек */
    --c-muted-2:    #9E8878;               /* «Estimated total», пояснения */
    --c-legal:      #5F5A55;               /* юридические ссылки под формой: 5.2:1 на --c-bg (AA — от 4.5) */
    --c-price:      #725E4F;               /* цена допа */
    --c-brown:      #4C392B;               /* кнопки и выбранное */
    --c-brown-2:    #6B503D;               /* кружок иконки в выбранной строке */
    --c-cream:      #FFF8F2;               /* текст на тёмном */
    --c-sand:       #C5AD99;               /* разделитель, цена на тёмном */
    --c-panel:      #F7F2EA;               /* подложка иллюстраций, строки допов */
    --c-panel-2:    #F0EBE3;               /* подложка картинок шерсти */
    --c-disc:       #F0E6D8;               /* кружок иконки допа */
    --c-radio:      #D8CEC1;
    --c-radio-2:    #A6998F;
    --c-glass:      rgba(255, 255, 255, .42);
    --c-glass-line: rgba(222, 194, 174, .239);
    --c-warm:       rgba(255, 245, 236, .64);
    --c-rule:       rgba(197, 173, 153, .376);
    --c-panel-hover: #F2EADF;              /* строка допа под курсором */
    --c-icon:       #7A5C44;               /* иконка допа */
    --c-brown-hover: #3E2E22;
    --c-edge:       #BEA18B;               /* рамка выбранной плитки */
    --c-edge-2:     rgba(222, 194, 174, .24);
    --c-edge-dark:  #926E53;               /* рамка выбранной шерсти */
    --c-disabled:   #B9AB9E;               /* неактивная кнопка на телефоне */
    --photo-filter: none;
    /* кнопки «Next step», «Continue», «Confirm booking» — цвет кнопок сайта (светлый оранжевый, 21.10.2026);
       если в теме задан свой цвет («Тема → Редизайн 2026 → Цвет кнопок записи»), берётся он */
    --c-cta:        var(--bp-btn, #E69369);
    --c-cta-hover:  var(--bp-btn-hover, #C47D59);

    /* у Figma радиус размытия вдвое больше, чем у CSS */
    --blur:    blur(21px);                 /* Figma 42 */
    --blur-lg: blur(32px);                 /* Figma 64 */

    --f-serif: "BPF Lora", Georgia, "Times New Roman", serif;
    --f-sans:  "BPF Inter", "Helvetica Neue", Arial, sans-serif;
    --f-lead:  "BPF Open Sans", "Helvetica Neue", Arial, sans-serif;
    --f-mono:  "BPF Intel One Mono", ui-monospace, Menlo, monospace;

    position: relative;
    /* секция во всю ширину — в макете она от края до края */
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--f-sans);
    font-size: 16px;
    line-height: 1.25;
    text-align: left;
    /* clip, а не hidden: hidden делает секцию контейнером прокрутки,
       и липкая кнопка «дальше» на телефоне перестаёт прилипать к экрану */
    overflow: hidden;
    overflow: clip;
    /* секция всегда не ниже экрана */
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* серо-бежевая палитра (просьба клиента, 2026-10-01): те же токены, приглушённые.
   Фон равен краю обесцвеченного фото, чтобы шва не было и на широких экранах */
.bpf--grey {
    --c-bg:         #E6E1DB;               /* край фото при saturate(.45) */
    --c-muted:      #6B6966;
    --c-muted-2:    #8F8B86;
    --c-legal:      #5E5B58;               /* 5.2:1 на --c-bg */
    --c-price:      #67625C;
    --c-brown:      #433F3B;               /* кнопки и выбранное — тёмно-серый без коричневого */
    --c-brown-2:    #605B55;
    --c-cream:      #F8F6F3;
    --c-sand:       #B8B3AD;
    --c-panel:      #F4F3F1;
    --c-panel-2:    #EEEDEA;
    --c-disc:       #EAE8E4;
    --c-glass-line: rgba(200, 196, 190, .3);
    --c-warm:       rgba(250, 249, 247, .64);
    --c-rule:       rgba(185, 180, 174, .4);
    --c-panel-hover: #ECEAE6;
    --c-icon:       #68625B;
    --c-brown-hover: #35322E;
    --c-edge:       #ADA69E;
    --c-edge-2:     rgba(200, 196, 190, .3);
    --c-edge-dark:  #807A73;
    --c-disabled:   #B0ACA7;
    --photo-filter: saturate(.45);
}

.bpf *,
.bpf *::before,
.bpf *::after { box-sizing: border-box; }

/* тема и её Bootstrap обнуляют отступы, красят заголовки, утяжеляют label
   и анимируют ссылки — возвращаем своё */
.bpf :where(h1, h2, p, ol, ul, li, figure, label) { margin: 0; padding: 0; }
.bpf :where(button, input) { margin: 0; font: inherit; color: inherit; letter-spacing: 0; text-transform: none; }
.bpf :where(a) { color: inherit; text-decoration: none; transition: none; }
.bpf a:where(:hover, :focus) { color: inherit; text-decoration: none; }
.bpf :where(img) { max-width: none; }

/* тема глушит outline через !important, поэтому фокус держим своим правилом */
.bpf :focus-visible { outline: 2px solid var(--c-brown) !important; outline-offset: 2px; }

/* ---------- фон: фото и затухание к низу (Rectangle 6 и 7) ---------- */

.bpf__photo {
    position: absolute;
    z-index: 0;
    top: -91px;
    /* как в кадре: −270 px от края контента; на очень широких экранах фото прижимается к краю */
    left: min(-30px, calc(max(0px, (100% - 1440px) / 2) - 270px));
    width: 1713px;
    height: 1713px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    filter: var(--photo-filter);
    pointer-events: none;
}

.bpf::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    background: linear-gradient(180deg, transparent 616px, var(--c-bg) 1185px);
    pointer-events: none;
}

/* ---------- шапка полноэкранной страницы ---------- */

.bpf__top {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 22px 60px 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.bpf__logo { flex: none; display: block; line-height: 0; }
.bpf__logo img { display: block; width: 194px; height: 66px; }

.bpf__contacts {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 3px 16px 0 0;
}

.bpf-hpill {
    position: relative;
    height: 56px;
    padding: 0 24px;
    border-radius: 100px;
    background: var(--c-glass);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .42);
    -webkit-backdrop-filter: var(--blur);
            backdrop-filter: var(--blur);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--f-sans);
    font-size: 20px;
    line-height: 24px;
    color: var(--c-text);
    white-space: nowrap;
}

.bpf-hpill svg { flex: none; display: block; width: 20px; height: 20px; }
.bpf-hpill__wa { display: block; line-height: 0; color: var(--c-text); }
.bpf-hpill__tel:hover,
.bpf-hpill__wa:hover { color: var(--c-brown); }

.bpf-hmenu { position: static; }
.bpf-hmenu > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; color: var(--c-text-2); }
.bpf-hmenu > summary::-webkit-details-marker { display: none; }
.bpf-hmenu > summary svg { transition: transform .15s; }
.bpf-hmenu[open] > summary svg { transform: rotate(180deg); }

.bpf-hpill--lang { padding: 0; }
.bpf-hpill--lang > summary { height: 56px; padding: 0 24px; color: var(--c-text); line-height: 24.92px; text-transform: uppercase; }
.bpf-hpill--lang > summary svg { color: var(--c-text-2); }

.bpf-hmenu__list {
    position: absolute;
    z-index: 10;
    top: calc(100% + 8px);
    right: 0;
    min-width: 100%;
    padding: 8px;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0 12px 32px rgba(76, 57, 43, .14);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bpf-hmenu__list a {
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 16px;
    line-height: 20px;
    color: var(--c-text);
    text-transform: uppercase;
}

.bpf-hmenu__list a small { display: block; font-size: 13px; line-height: 18px; color: var(--c-muted); text-transform: none; }
.bpf-hmenu__list a:hover { background: var(--c-panel); }
.bpf-hmenu__list--phones a { text-transform: none; }

/* ---------- каркас ---------- */

.bpf__inner {
    position: relative;
    z-index: 1;
    flex: 1 0 auto;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    /* в кадре снизу 144 px пустоты; 96 хватает, и с «Back» под формой экран 1440 × 1207 не прокручивается */
    padding: 72px 60px 96px;
    display: grid;
    grid-template-columns: minmax(0, 452fr) minmax(0, 812fr);
    column-gap: 56px;
    row-gap: 46px;
    align-content: start;
    align-items: start;
}

/* ---------- заголовок ---------- */

.bpf__title {
    grid-column: 1;
    font-family: var(--f-serif);
    font-weight: 400;
    font-size: 56px;
    line-height: 62px;
    letter-spacing: 0;
    color: var(--c-text);
}

.bpf__lead {
    grid-column: 2;
    align-self: center;
    max-width: 741px;
    font-family: var(--f-lead);
    font-size: 18px;
    line-height: 32px;
    color: var(--c-text);
}

/* ---------- карточка шагов ---------- */

.bpf__steps {
    grid-column: 1;
    width: 300px;
    padding: 24px;
    list-style: none;
    border-radius: 16px;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
}

.bpf__step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 42px;
    margin-bottom: 20px;
    font-family: var(--f-sans);
    font-size: 16px;
    line-height: 19px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--c-text);
    list-style: none;
}

.bpf__step:last-child { margin-bottom: 0; }
/* после текущего шага линия длиннее — 64 px против 12 */
.bpf__step.is-current:not(:last-child) { margin-bottom: 72px; }

.bpf__step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 21px;
    top: 46px;
    width: 1px;
    height: 12px;
    background: var(--c-brown);
}

.bpf__step.is-current:not(:last-child)::after { height: 64px; }
.bpf__step.is-done { cursor: pointer; }

.bpf__bullet {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px var(--c-brown);
    display: grid;
    place-items: center;
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 24px;
    line-height: 33px;
    color: var(--c-brown);
}

.bpf__step.is-current .bpf__bullet,
.bpf__step.is-done .bpf__bullet { background: var(--c-brown); color: #FFFFFF; }

.bpf__check { display: block; width: 18px; height: 18px; }
/* в кадре цифра стоит на 1,5 px выше центра кружка */
.bpf__num { display: block; margin-top: -3px; }

/* ---------- правая колонка ---------- */

.bpf__content {
    grid-column: 2;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 27px;
}

.bpf__label {
    display: block;
    font-family: var(--f-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--c-text);
}

.bpf__field { display: flex; flex-direction: column; gap: 12px; }
.bpf-dog { display: flex; flex-direction: column; gap: 32px; }

/* рамка-градиент: так в макете обведены выбранные карточки */
.bpf-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 2px;
    border-radius: inherit;
    background: transparent;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    pointer-events: none;
}

/* ---------- плитки категорий (v1) ---------- */

.bpf__grid { display: grid; gap: 12px; }
.bpf__grid--cat  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bpf__grid--coat { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.bpf-tile {
    position: relative;
    padding: 8px;
    border: 0;
    border-radius: 16px;
    background: var(--c-glass);
    -webkit-backdrop-filter: var(--blur);
            backdrop-filter: var(--blur);
    color: var(--c-text);
    text-align: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: background-color .15s;
}

.bpf-tile.is-selected { background: rgba(76, 57, 43, .06); }
.bpf-tile.is-selected::before { background: linear-gradient(120.6deg, var(--c-edge) 0%, var(--c-edge-2) 100%); }
.bpf-tile:not(.is-selected):hover { background: rgba(255, 255, 255, .6); }

.bpf-tile__art {
    position: relative;
    height: 160px;
    border-radius: 12px;
    background: var(--c-panel);
    overflow: hidden;
}

/* иллюстрации выгружены по точным границам групп; высота и сдвиг — из кадра */
.bpf-art { --art-h: 137.12px; --art-dy: 0px; }
.bpf-art--hygiene    { --art-h: 141.79px; --art-dy: -2.1px; }
.bpf-art--individual { --art-h: 141.96px; }
.bpf-art--daycare    { --art-h: 134.92px; --art-dy: -2.5px; }

.bpf-tile__art .bpf-art {
    position: absolute;
    left: 50%;
    top: 50%;
    height: var(--art-h);
    width: auto;
    transform: translate(-50%, calc(-50% + var(--art-dy)));
}

.bpf-tile__text { display: flex; flex-direction: column; gap: 6px; padding: 20px 0; }

.bpf-tile__title {
    font-family: var(--f-serif);
    font-weight: 600;
    font-size: 24px;
    line-height: 31px;
    color: var(--c-text);
}

.bpf-tile__sub { font-size: 14px; line-height: 20px; color: var(--c-muted); }

.bpf-tile__radio {
    position: absolute;
    z-index: 1;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: inset 0 0 0 1px var(--c-radio);
    color: #FFFFFF;
    display: grid;
    place-items: center;
}

.bpf-tile__radio svg { display: block; width: 19.2px; height: 19.2px; opacity: 0; }
.bpf-tile.is-selected .bpf-tile__radio { background: var(--c-brown); box-shadow: none; }
.bpf-tile.is-selected .bpf-tile__radio svg { opacity: 1; }

/* ---------- порода (v2) ---------- */

.bpf__search { position: relative; }

/* поле породы на шаге 2 — в половину ширины (просьба заказчика 29.10); список шире поля,
   до 560px и не шире строки шага (200% поля), чтобы «порода — вес» и цена не переносились */
@media (min-width: 1101px) {
    .bpf-dog .bpf__search { max-width: 50%; }
    .bpf-dog .bpf__suggest { right: auto; width: min(560px, 200%); min-width: 100%; }
}

.bpf__search-icon {
    position: absolute;
    z-index: 1;
    left: 20px;
    top: 20px;
    width: 24px;
    height: 24px;
    pointer-events: none;
}

.bpf__input {
    display: block;
    width: 100%;
    height: 64px;
    padding: 0 20px 0 56px;
    border: 0;
    border-radius: 16px;
    background: var(--c-glass);
    box-shadow: inset 0 0 0 2px var(--c-glass-line);
    -webkit-backdrop-filter: var(--blur-lg);
            backdrop-filter: var(--blur-lg);
    font-family: var(--f-sans);
    font-size: 18px;
    line-height: 24px;
    color: var(--c-text);
    -webkit-appearance: none;
            appearance: none;
}

.bpf__input::placeholder { color: var(--c-text-2); opacity: 1; }
.bpf__input:focus { box-shadow: inset 0 0 0 2px rgba(76, 57, 43, .55); outline: 0 !important; }
.bpf__input--combo { padding-right: 64px; }

.bpf__toggle {
    position: absolute;
    z-index: 1;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--c-text-2);
    cursor: pointer;
    display: grid;
    place-items: center;
}

.bpf__toggle:hover { background: var(--c-glass); color: var(--c-text); }
.bpf__toggle svg { display: block; width: 20px; height: 20px; transition: transform .15s; }
.bpf__search.is-open .bpf__toggle svg { transform: rotate(180deg); }

.bpf__suggest {
    position: absolute;
    z-index: 20;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    max-height: 336px;
    overflow-y: auto;
    padding: 8px;
    list-style: none;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0 12px 32px rgba(76, 57, 43, .14);
}

.bpf__suggest li {
    padding: 11px 14px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    font-size: 16px;
    line-height: 20px;
    list-style: none;
}

.bpf__suggest li em { font-style: normal; font-size: 14px; color: var(--c-muted); white-space: nowrap; }
.bpf__suggest li:hover,
.bpf__suggest li.is-active { background: var(--c-panel); }
.bpf__suggest li.is-picked span { font-weight: 600; }
.bpf__suggest li.is-mixed { border-bottom: 1px solid var(--c-rule); border-radius: 10px 10px 0 0; margin-bottom: 4px; }
.bpf__suggest-empty span { color: var(--c-muted); }

/* ---------- вес (v2) ---------- */

/* в кадре пилюли 260, 264 и 264 px */
.bpf__pills { display: grid; grid-template-columns: minmax(0, 260fr) minmax(0, 264fr) minmax(0, 264fr); gap: 12px; }

.bpf-pill {
    height: 56px;
    padding: 0 20px;
    border: 0;
    border-radius: 10000px;
    background: var(--c-glass);
    box-shadow: inset 0 0 0 2px var(--c-glass-line);
    -webkit-backdrop-filter: var(--blur-lg);
            backdrop-filter: var(--blur-lg);
    font-family: var(--f-sans);
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    color: var(--c-text);
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.bpf-pill:not(.is-selected):hover { background: rgba(255, 255, 255, .6); }
.bpf-pill.is-selected { background: var(--c-brown); box-shadow: none; color: #FFFFFF; }
/* вес и шерсть задаёт порода: остальные варианты видны, но неактивны */
.bpf-pill:disabled { opacity: .4; cursor: not-allowed; }
.bpf-pill:disabled:hover { background: var(--c-glass); }

/* ---------- шерсть (v2) ---------- */

.bpf-tile--coat { -webkit-backdrop-filter: var(--blur-lg); backdrop-filter: var(--blur-lg); }
.bpf-tile--coat::before { background: var(--c-glass-line); }
.bpf-tile--coat.is-selected { background: var(--c-glass); }
.bpf-tile--coat.is-selected::before { background: linear-gradient(112.8deg, var(--c-edge-dark) 0%, var(--c-glass-line) 100%); }
.bpf-tile:disabled { cursor: not-allowed; }
.bpf-tile:disabled > * { opacity: .4; }
/* окно иллюстрации остаётся непрозрачным: иначе сквозь него просвечивают стекло плитки и фото
   на фоне, и на тёмных участках рисунок выглядит обрезанным; гасим сам рисунок и радио */
.bpf-tile:disabled > .bpf-tile__art { opacity: 1; }
.bpf-tile:disabled > .bpf-tile__art > * { opacity: .4; }
.bpf-tile:disabled:hover { background: var(--c-glass); }

/* иллюстрация целиком при любой высоте окна (на невысоких экранах и телефоне cover резал собак);
   фон окна — цвет «бумаги» самих картинок, чтобы поля не читались как заплатка */
.bpf-tile--coat .bpf-tile__art { height: 120px; background: #FDF8F2; }
.bpf-tile--coat .bpf-tile__art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.bpf-tile--coat .bpf-tile__text { gap: 4px; padding: 16px 0; }

.bpf-tile--coat .bpf-tile__title {
    font-family: var(--f-sans);
    font-weight: 600;
    font-size: 16px;
    line-height: 19px;
}

.bpf-tile--coat .bpf-tile__radio { top: 12px; right: 12px; box-shadow: inset 0 0 0 1px var(--c-radio-2); }

/* подсказки лежат на стеклянной плашке — иначе серый текст теряется на фото */
.bpf__hint {
    align-self: flex-start;
    padding: 6px 12px;
    border-radius: 10px;
    background: var(--c-glass);
    -webkit-backdrop-filter: var(--blur);
            backdrop-filter: var(--blur);
    font-size: 14px;
    line-height: 20px;
    color: var(--c-muted);
}
.bpf-when .bpf__hint { padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---------- цена (v3) ---------- */

.bpf-price {
    padding: 8px;
    border-radius: 16px;
    background: var(--c-warm);
    -webkit-backdrop-filter: var(--blur);
            backdrop-filter: var(--blur);
    display: flex;
    align-items: center;
    gap: 24px;
}

.bpf-price__art {
    position: relative;
    flex: none;
    width: 160px;
    height: 160px;
    border-radius: 12px;
    background: var(--c-panel);
    overflow: hidden;
}

.bpf-price__art .bpf-art {
    position: absolute;
    left: 50%;
    top: 50%;
    height: calc(var(--art-h) * .7705);
    width: auto;
    transform: translate(-50%, -50%);
}

.bpf-price__info { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }

.bpf-price__name {
    font-family: var(--f-serif);
    font-weight: 600;
    font-size: 24px;
    line-height: 31px;
    color: var(--c-text);
}

.bpf-price__sub { font-size: 14px; line-height: 20px; color: var(--c-muted); }
.bpf-price__rule { flex: none; width: 1px; height: 100px; background: var(--c-sand); }

.bpf-price__value {
    flex: 1 1 0;
    min-width: 0;
    padding: 20px 24px 20px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: center;
}

.bpf-price__value b {
    font-family: var(--f-serif);
    font-weight: 600;
    font-size: 32px;
    line-height: 41px;
    color: var(--c-text);
}

.bpf-price__value i { font-style: normal; font-size: 12px; line-height: 15px; color: var(--c-muted); }

/* ---------- допы (v4) и отдельные процедуры ---------- */

.bpf-addons {
    border-radius: 16px;
    background: var(--c-warm);
    -webkit-backdrop-filter: var(--blur);
            backdrop-filter: var(--blur);
    overflow: hidden;
}

.bpf-addons__head {
    padding: 24px;
    background: var(--c-glass);
    border-bottom: 1px solid var(--c-rule);
    display: flex;
    align-items: center;
    gap: 12px;
}

.bpf-addons__thumb {
    position: relative;
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 4.2px;
    background: var(--c-panel);
    overflow: hidden;
}

.bpf-addons__thumb .bpf-art {
    position: absolute;
    left: 50%;
    top: 50%;
    height: calc(var(--art-h) * .2688);
    width: auto;
    transform: translate(-50%, -50%);
}

.bpf-addons__info { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }

.bpf-addons__name {
    font-family: var(--f-serif);
    font-weight: 600;
    font-size: 24px;
    line-height: 31px;
    color: var(--c-text);
}

.bpf-addons__sub { font-size: 14px; line-height: 20px; color: var(--c-muted); }

.bpf-addons__price {
    flex: none;
    font-family: var(--f-serif);
    font-weight: 600;
    font-size: 32px;
    line-height: 41px;
    color: var(--c-text);
}

.bpf-addons__list { padding: 24px; display: flex; flex-direction: column; gap: 8px; }

.bpf-row {
    width: 100%;
    min-height: 60px;
    padding: 14px;
    border: 0;
    border-radius: 12px;
    background: var(--c-panel);
    color: var(--c-text);
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 32px;
    transition: background-color .15s;
}

.bpf-row:not(.is-selected):hover { background: var(--c-panel-hover); }

.bpf-row__main { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 8px; }

.bpf-row__disc {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 16px;
    background: var(--c-disc);
    color: var(--c-icon);
    display: grid;
    place-items: center;
}

.bpf-row__icon {
    display: block;
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center;  mask-position: center;
    -webkit-mask-size: contain;     mask-size: contain;
}

/* названия процедур из Altegio бывают длинными — между названием и ценой отступ, название переносится */
.bpf-row__text { flex: 1 1 0; min-width: 0; display: flex; align-items: flex-start; gap: 2px 16px; }

.bpf-row__name {
    flex: 1 1 0;
    min-width: 0;
    font-family: var(--f-serif);
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    color: var(--c-text);
}

.bpf-row__price { flex: none; font-size: 14px; line-height: 17px; color: var(--c-price); white-space: nowrap; }

.bpf-row__btn {
    flex: none;
    height: 30px;
    padding: 0 14px;
    border-radius: 1000px;
    background: var(--c-brown);
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--f-sans);
    font-weight: 700;
    font-size: 12px;
    line-height: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.bpf-row__btn > span { display: block; line-height: 0; }
.bpf-row__btn svg { display: block; width: 16px; height: 16px; }

.bpf-row.is-selected { background: var(--c-brown); box-shadow: inset 0 0 0 1px var(--c-brown); }
.bpf-row.is-selected .bpf-row__disc { background: var(--c-brown-2); color: var(--c-cream); }
.bpf-row.is-selected .bpf-row__name { color: var(--c-cream); }
.bpf-row.is-selected .bpf-row__price { color: var(--c-sand); }
.bpf-row.is-selected .bpf-row__btn { height: 28px; background: var(--c-cream); color: var(--c-brown); }
.bpf-row.is-selected .bpf-row__btn > span { display: none; }

.bpf-addons__foot {
    padding: 24px;
    background: var(--c-glass);
    border-top: 1px solid var(--c-rule);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.bpf-addons__sum { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bpf-addons__total-label { font-size: 12px; line-height: 15px; color: var(--c-muted-2); }
.bpf-addons__total-row { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 8px; }

.bpf-addons__total {
    font-family: var(--f-serif);
    font-weight: 700;
    font-size: 28px;
    line-height: 36px;
    color: var(--c-text);
    white-space: nowrap;
}

.bpf-addons__incl { font-size: 12px; line-height: 15px; color: var(--c-muted-2); }

/* список процедур без шапки и подвала — «Individual Services» */
.bpf-addons--plain .bpf-addons__list { padding: 24px; }

/* ---------- кнопки ---------- */

.bpf__next {
    width: 100%;
    height: 64px;
    padding: 0 24px;
    border: 0;
    border-radius: 10000px;
    background: var(--c-cta);
    color: #FFFFFF;
    font-family: var(--f-sans);
    font-weight: 700;
    font-size: 14px;
    line-height: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: background-color .15s, opacity .15s;
}

.bpf__next:hover { background: var(--c-cta-hover); }
.bpf__next > span { display: block; flex: none; line-height: 0; }
.bpf__next svg { display: block; width: 24px; height: 24px; }
.bpf__next[disabled] { opacity: .32; cursor: not-allowed; }
.bpf__next[disabled]:hover { background: var(--c-cta); }
/* кнопка «дальше» под блоком: 64 px, в кадре v1 — 65, в v2 — 74 */
.bpf__content > .bpf__next { margin-top: 37px; }
.bpf__content.is-step-1 > .bpf__next { margin-top: 38px; }
.bpf__content.is-step-2 > .bpf__next { margin-top: 47px; }

/* CSS добавляет разрядку и после последней буквы, Figma — нет */
.bpf__caps { margin-right: -2px; font-weight: inherit; }
.bpf__next--inline { width: auto; flex: none; }

.bpf__back {
    align-self: center;
    margin-top: -11px;
    padding: 4px 8px;
    border: 0;
    background: none;
    font-family: var(--f-sans);
    font-size: 14px;
    line-height: 20px;
    color: var(--c-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.bpf__back:hover { color: var(--c-text); }

.bpf__error {
    padding: 12px 16px;
    border-radius: 12px;
    background: #F6E3DC;
    color: #8A3B22;
    font-size: 14px;
    line-height: 20px;
}

/* ============================================================
   Шаги «дата и время», «мастер и контакты», подтверждение.
   В макете их нет — собраны из тех же элементов: тёплая карточка,
   стеклянные плашки, коричневое «выбрано».
   ============================================================ */

.bpf-when {
    padding: 24px;
    border-radius: 16px;
    background: var(--c-warm);
    -webkit-backdrop-filter: var(--blur);
            backdrop-filter: var(--blur);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bpf-when__block { display: flex; flex-direction: column; gap: 16px; }
.bpf-when__block + .bpf-when__block { padding-top: 20px; border-top: 1px solid var(--c-rule); }

.bpf-when__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }

.bpf-when__title {
    font-family: var(--f-serif);
    font-weight: 600;
    font-size: 24px;
    line-height: 31px;
    color: var(--c-text);
}

.bpf-when__meta { font-size: 14px; line-height: 20px; color: var(--c-muted); }

.bpf-when__days {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 48px 6px 2px;
    margin: -2px 0 0 -2px;
    scrollbar-width: thin;
    /* мягкий край справа — видно, что лента листается */
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
}

.bpf-when__sep {
    flex: none;
    padding: 0 4px;
    font-size: 12px;
    line-height: 15px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--c-muted-2);
}

.bpf-day {
    flex: none;
    width: 64px;
    height: 72px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: var(--c-glass);
    box-shadow: inset 0 0 0 2px var(--c-glass-line);
    color: var(--c-text);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    transition: background-color .15s, color .15s;
}

.bpf-day i { font-style: normal; font-size: 12px; line-height: 15px; letter-spacing: 1px; text-transform: uppercase; color: var(--c-muted); }
.bpf-day b { font-family: var(--f-serif); font-weight: 600; font-size: 22px; line-height: 28px; }
.bpf-day:not(.is-selected):hover { background: rgba(255, 255, 255, .7); }
.bpf-day.is-selected { background: var(--c-brown); box-shadow: none; color: #FFFFFF; }
.bpf-day.is-selected i { color: var(--c-sand); }

.bpf-when__slots { display: flex; flex-wrap: wrap; gap: 8px; }

.bpf-slot {
    height: 44px;
    padding: 0 20px;
    border: 0;
    border-radius: 10000px;
    background: var(--c-glass);
    box-shadow: inset 0 0 0 2px var(--c-glass-line);
    font-family: var(--f-sans);
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    color: var(--c-text);
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.bpf-slot:not(.is-selected):hover { background: rgba(255, 255, 255, .7); }
.bpf-slot.is-selected { background: var(--c-brown); box-shadow: none; color: #FFFFFF; }

/* ---------- мастер и контакты ---------- */

.bpf-final { display: flex; flex-direction: column; gap: 32px; }

.bpf-staff { display: flex; flex-wrap: wrap; gap: 12px; }

.bpf-staff__card {
    position: relative;
    width: 142px;
    padding: 16px 10px;
    border: 0;
    border-radius: 16px;
    background: var(--c-glass);
    box-shadow: inset 0 0 0 2px var(--c-glass-line);
    -webkit-backdrop-filter: var(--blur-lg);
            backdrop-filter: var(--blur-lg);
    color: var(--c-text);
    text-align: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: background-color .15s, color .15s;
}

.bpf-staff__photo {
    width: 56px;
    height: 56px;
    margin-bottom: 6px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--c-panel);
    color: var(--c-brown);
    display: grid;
    place-items: center;
    font-family: var(--f-serif);
    font-weight: 600;
    font-size: 20px;
    line-height: 1;
}

.bpf-staff__svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.bpf-staff__name { font-weight: 600; font-size: 15px; line-height: 19px; }
.bpf-staff__pos { font-size: 12px; line-height: 15px; color: var(--c-muted); }
.bpf-staff__card:not(.is-selected):hover { background: rgba(255, 255, 255, .7); }
.bpf-staff__card.is-selected { background: var(--c-brown); box-shadow: none; color: #FFFFFF; }
.bpf-staff__card.is-selected .bpf-staff__photo { background: var(--c-brown-2); color: var(--c-cream); }
.bpf-staff__card.is-selected .bpf-staff__pos { color: var(--c-sand); }

.bpf-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.bpf-form__wide { grid-column: 1 / -1; }
/* кличка без поля породы (груминг) — на две колонки, чтобы строка не обрывалась пустой ячейкой */
.bpf-form__span2 { grid-column: span 2; }
.bpf-form__cell { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

/* ошибка поля: красная рамка и текст под полем */
.bpf-form__cell.has-error .bpf__input,
.bpf-form__cell.has-error .bpf__input:focus { box-shadow: inset 0 0 0 2px #B4553A; }
/* светлая подложка — сообщение читается и поверх фото */
.bpf-form__err {
    align-self: flex-start;
    padding: 4px 10px;
    border-radius: 8px;
    background: rgba(255, 248, 242, .88);
    font-size: 13px;
    line-height: 17px;
    color: #9A3B22;
}
.bpf__input--plain { height: 56px; padding: 0 20px; font-size: 16px; }
/* комментарий — textarea: высота по содержимому, подсказка переносится */
.bpf .bpf__input--area { height: auto; min-height: 56px; padding: 17px 20px; line-height: 22px; resize: vertical; field-sizing: content; max-height: 160px; }

/* ловушка для ботов: display:none — её не заполнит ни автозаполнение браузера, ни расширения */
.bpf-trap { display: none !important; }

.bpf-code { margin-top: 4px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bpf-code__input { max-width: 220px; }

.bpf__link {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--f-sans);
    font-size: 14px;
    line-height: 20px;
    color: var(--c-brown);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.bpf-summary {
    padding: 16px 24px;
    border-radius: 16px;
    background: var(--c-warm);
    -webkit-backdrop-filter: var(--blur);
            backdrop-filter: var(--blur);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 16px;
    font-size: 15px;
    line-height: 20px;
}

.bpf-summary b {
    margin-left: auto;
    font-family: var(--f-serif);
    font-weight: 700;
    font-size: 24px;
    line-height: 31px;
    color: var(--c-text);
}

.bpf-summary__when { color: var(--c-muted); }

/* ---------- согласия перед записью ---------- */

/* та же тёплая карточка, что и итог над ней: на фото текст читается */
.bpf-agree {
    padding: 16px 24px;
    border-radius: 16px;
    background: var(--c-warm);
    -webkit-backdrop-filter: var(--blur);
            backdrop-filter: var(--blur);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bpf-agree__item { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }

/* галочка: настоящий checkbox, прозрачный, лежит поверх квадрата — клавиатура,
   клик по подписи и читалки экрана работают как у обычного поля.
   .bpf впереди — Bootstrap темы делает label жирным и сдвигает checkbox */
.bpf .bpf-check {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 100%;
    margin: 0;
    font-family: var(--f-sans);
    font-weight: 400;
    font-size: 15px;
    line-height: 22px;
    color: var(--c-text);
    cursor: pointer;
}

.bpf .bpf-check__input {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 22px;
    height: 22px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.bpf-check__box {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: #FFFFFF;
    box-shadow: inset 0 0 0 1px var(--c-radio-2);
    color: #FFFFFF;
    display: grid;
    place-items: center;
    transition: background-color .15s, box-shadow .15s;
}

.bpf-check__box svg { display: block; width: 16px; height: 16px; opacity: 0; }
.bpf-check:hover .bpf-check__box { box-shadow: inset 0 0 0 1px var(--c-brown); }
.bpf-check__input:checked + .bpf-check__box { background: var(--c-brown); box-shadow: none; }
.bpf-check__input:checked + .bpf-check__box svg { opacity: 1; }
/* сам checkbox прозрачный — рамку фокуса рисует квадрат */
.bpf-check__input:focus-visible + .bpf-check__box { outline: 2px solid var(--c-brown); outline-offset: 2px; }
.bpf-agree__item.has-error .bpf-check__box { box-shadow: inset 0 0 0 2px #B4553A; }
.bpf-check__text { min-width: 0; }

/* ссылки в согласиях должны выглядеть ссылками: сброс выше и тема снимают подчёркивание */
.bpf .bpf-agree a,
.bpf .bpf-agree a:visited {
    color: var(--c-brown);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.bpf .bpf-agree a:hover,
.bpf .bpf-agree a:focus { color: var(--c-brown-hover); text-decoration: underline; text-decoration-thickness: 2px; }

/* пояснение и ошибка — под текстом, а не под квадратом */
.bpf-agree__note { padding-left: 34px; font-size: 13px; line-height: 18px; color: var(--c-muted); }
.bpf-agree__item .bpf-form__err { margin: 2px 0 0 34px; }

/* ---------- подтверждение ---------- */

.bpf-done {
    padding: 40px 32px;
    border-radius: 16px;
    background: var(--c-warm);
    -webkit-backdrop-filter: var(--blur);
            backdrop-filter: var(--blur);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.bpf-done__mark {
    width: 64px;
    height: 64px;
    margin-bottom: 6px;
    border-radius: 50%;
    background: var(--c-brown);
    color: #FFFFFF;
    display: grid;
    place-items: center;
}

.bpf-done__mark svg { display: block; width: 32px; height: 32px; }
.bpf-done__title { font-family: var(--f-serif); font-weight: 600; font-size: 32px; line-height: 41px; color: var(--c-text); }
.bpf-done__text { font-size: 16px; line-height: 24px; }
.bpf-done__note { margin: 6px 0 18px; max-width: 44ch; font-size: 13px; line-height: 18px; color: var(--c-muted); }
.bpf-done .bpf__next { margin: 0 auto; }

/* ============================================================
   Daycare: новые клиенты идут на Meet & Greet, одобренные —
   на Trial Day и разовые визиты. В макете экрана нет — собран
   из тех же тёплых карточек, что и шаги 5–6.
   ============================================================ */

.bpf-dc { display: flex; flex-direction: column; gap: 16px; }
.bpf-dc__head { display: flex; flex-direction: column; gap: 6px; }

.bpf-dc__title {
    font-family: var(--f-serif);
    font-weight: 600;
    font-size: 32px;
    line-height: 41px;
    letter-spacing: 0;
    color: var(--c-text);
}

.bpf-dc__sub { font-family: var(--f-lead); font-size: 17px; line-height: 27px; color: var(--c-text); }

.bpf-dc__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.bpf-dc__card,
.bpf-dc__panel {
    padding: 24px;
    border-radius: 16px;
    background: var(--c-warm);
    -webkit-backdrop-filter: var(--blur);
            backdrop-filter: var(--blur);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* вопрос в карточке — того же размера, что и название под ним, но светлее по начертанию */
.bpf-dc__eyebrow { font-family: var(--f-serif); font-weight: 400; font-size: 24px; line-height: 31px; color: var(--c-text); }

.bpf-dc__name { font-family: var(--f-serif); font-weight: 600; font-size: 24px; line-height: 31px; color: var(--c-text); }
.bpf-dc__meta { font-weight: 600; font-size: 15px; line-height: 20px; color: var(--c-brown); }
.bpf-dc__price { font-family: var(--f-serif); font-weight: 600; font-size: 28px; line-height: 36px; color: var(--c-text); }
.bpf-dc__text { font-size: 15px; line-height: 22px; color: var(--c-text-2); }
.bpf-dc__note { font-size: 13px; line-height: 18px; color: var(--c-muted); }

/* кнопки карточек стоят на одной линии, как бы ни различался текст */
.bpf-dc__card > .bpf-dc__btn { margin-top: auto; }
.bpf-dc__card > :nth-last-child(2) { margin-bottom: 12px; }
.bpf-dc__btn { height: 56px; }

/* Trial Day — во всю ширину: описание слева, цена и кнопка справа */
.bpf-dc__card--wide { flex-direction: row; align-items: center; gap: 24px; }
.bpf-dc__card--wide > :nth-last-child(2) { margin-bottom: 0; }
.bpf-dc__main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.bpf-dc__side { flex: none; width: 260px; display: flex; flex-direction: column; align-items: stretch; gap: 10px; text-align: center; }

/* поле и кнопка — одной высоты на любом экране */
.bpf-dc__verify { --h: 56px; margin-top: 8px; display: flex; align-items: center; gap: 12px; }
.bpf-dc__verify .bpf__input { flex: 1 1 0; min-width: 0; }
.bpf-dc__verify .bpf__input,
.bpf-dc__verify .bpf-dc__btn { height: var(--h); }
.bpf-dc__verify .bpf-dc__btn,
.bpf-dc__actions .bpf-dc__btn { width: auto; flex: none; padding: 0 28px; }
.bpf-dc__actions { margin-top: 8px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; }
.bpf-dc__panel .bpf-form__err { margin-top: 2px; }

.bpf-dc__ok {
    align-self: flex-start;
    padding: 7px 14px 7px 10px;
    border-radius: 100px;
    background: var(--c-brown);
    color: var(--c-cream);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    line-height: 18px;
    font-weight: 600;
}

.bpf-dc__ok > span { display: block; line-height: 0; }
.bpf-dc__ok svg { display: block; width: 16px; height: 16px; }

/* три направления одобренного клиента — мини-карточки с кружком выбора, как плитки категорий */
.bpf-dc__picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.bpf-dc__pick {
    position: relative;
    padding: 14px 44px 14px 18px;
    border: 0;
    border-radius: 16px;
    background: var(--c-glass);
    box-shadow: inset 0 0 0 2px var(--c-glass-line);
    -webkit-backdrop-filter: var(--blur-lg);
            backdrop-filter: var(--blur-lg);
    color: var(--c-text);
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 3px;
    transition: background-color .15s, box-shadow .15s;
}

.bpf-dc__pick:not(.is-selected):hover { background: rgba(255, 255, 255, .6); }
.bpf-dc__pick.is-selected { background: rgba(76, 57, 43, .06); box-shadow: inset 0 0 0 2px var(--c-edge); }

.bpf-dc__pick-radio {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: inset 0 0 0 1px var(--c-radio-2);
    color: #FFFFFF;
    display: grid;
    place-items: center;
}

.bpf-dc__pick-radio svg { display: block; width: 15px; height: 15px; opacity: 0; }
.bpf-dc__pick.is-selected .bpf-dc__pick-radio { background: var(--c-brown); box-shadow: none; }
.bpf-dc__pick.is-selected .bpf-dc__pick-radio svg { opacity: 1; }

.bpf-dc__pick-title { font-family: var(--f-serif); font-weight: 600; font-size: 16px; line-height: 21px; }
.bpf-dc__pick-sub { font-size: 13px; line-height: 17px; color: var(--c-muted); }

/* недельные планы — строки, как в таблице клиента: план, частота, цена */
.bpf-plans {
    padding: 8px;
    border-radius: 16px;
    background: var(--c-warm);
    -webkit-backdrop-filter: var(--blur);
            backdrop-filter: var(--blur);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bpf-plan {
    width: 100%;
    min-height: 58px;
    padding: 8px 12px 8px 16px;
    border: 0;
    border-radius: 12px;
    background: var(--c-panel);
    color: var(--c-text);
    text-align: left;
    cursor: pointer;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 104px 150px auto;
    align-items: center;
    column-gap: 16px;
    transition: background-color .15s;
}

/* шесть планов занимают экран почти целиком — нижнее поле меньше, и 1440 × 1207 не прокручивается */
.bpf__inner:has(.bpf-plans) { padding-bottom: 40px; }

.bpf-plan:hover { background: var(--c-panel-hover); }
.bpf-plan.is-popular { box-shadow: inset 0 0 0 2px var(--c-sand); }
.bpf-plan__main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.bpf-plan__name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 8px;
    font-family: var(--f-serif);
    font-weight: 600;
    font-size: 17px;
    line-height: 22px;
    color: var(--c-text);
}

.bpf-plan__badge {
    padding: 3px 8px 3px 9px;
    border-radius: 100px;
    background: var(--c-brown);
    color: var(--c-cream);
    font-family: var(--f-sans);
    font-style: normal;
    font-weight: 700;
    font-size: 10px;
    line-height: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
}

.bpf-plan__text { font-size: 13px; line-height: 17px; color: var(--c-muted); }
.bpf-plan__freq { font-weight: 600; font-size: 14px; line-height: 18px; color: var(--c-brown); white-space: nowrap; }
.bpf-plan__price { font-size: 13px; line-height: 17px; color: var(--c-muted); white-space: nowrap; }
.bpf-plan__price b { font-family: var(--f-serif); font-weight: 600; font-size: 17px; line-height: 22px; color: var(--c-text); }
.bpf-plan__price i { display: block; font-style: normal; color: var(--c-price); }
.bpf-plan__btn { padding: 0 10px 0 14px; }
.bpf-plan__btn > span { display: block; }

.bpf-summary__per { font-family: var(--f-sans); font-style: normal; font-weight: 400; font-size: 14px; line-height: 20px; color: var(--c-muted); }

/* порода в контактах Daycare: то же поле с поиском, только ростом с соседние */
/* порода у Daycare — в одной строке с e-mail и кличкой */
.bpf-form__breed { grid-column: auto; }
.bpf-form__breed .bpf__input { height: 56px; padding-left: 52px; font-size: 16px; }
.bpf-form__breed .bpf__search-icon { top: 16px; left: 18px; }
.bpf-form__breed .bpf__toggle { top: 8px; right: 8px; }

/* компактный прогресс — только на телефоне, вместо списка шагов */
.bpf__progress { display: none; }

@media (prefers-reduced-motion: reduce) {
    .bpf * { transition: none !important; }
}

/* ============================================================
   Невысокий экран (ноутбук, 768–1000 px): всё помещается без прокрутки.
   На экранах выше 1000 px — раскладка точно по макету.
   ============================================================ */

@media (min-width: 1101px) and (max-height: 1000px) {
    .bpf__top { padding-top: 14px; }
    .bpf__logo img { width: 147px; height: 50px; }
    .bpf__contacts { margin-top: 1px; }
    .bpf-hpill { height: 48px; padding: 0 20px; font-size: 18px; }
    .bpf-hpill--lang { padding: 0; }
    .bpf-hpill--lang > summary { height: 48px; padding: 0 20px; }

    .bpf__inner { padding: 20px 60px 24px; row-gap: 22px; }

    .bpf__title { font-size: 40px; line-height: 46px; }
    .bpf__lead { font-size: 16px; line-height: 26px; }

    .bpf__steps { width: 264px; padding: 18px; }
    .bpf__step { min-height: 34px; margin-bottom: 14px; font-size: 14px; line-height: 17px; gap: 10px; }
    .bpf__step.is-current:not(:last-child) { margin-bottom: 30px; }
    .bpf__step:not(:last-child)::after { left: 17px; top: 37px; height: 8px; }
    .bpf__step.is-current:not(:last-child)::after { height: 24px; }
    .bpf__bullet { width: 34px; height: 34px; font-size: 19px; line-height: 26px; }
    .bpf__check { width: 15px; height: 15px; }

    .bpf__content { gap: 16px; }
    .bpf__field { gap: 8px; }
    .bpf-dog { gap: 18px; }

    .bpf-tile__art { height: 112px; }
    .bpf-tile__art .bpf-art { height: calc(var(--art-h) * .72); }
    .bpf-tile__text { padding: 12px 0 10px; gap: 2px; }
    .bpf-tile__title { font-size: 22px; line-height: 28px; }
    .bpf-tile__radio { top: 12px; right: 12px; width: 28px; height: 28px; }
    .bpf-tile__radio svg { width: 16px; height: 16px; }

    .bpf__input { height: 52px; font-size: 16px; }
    .bpf__input--combo { padding-left: 52px; }     /* отступ под иконку поиска — только у поля породы */
    .bpf__search-icon { top: 14px; left: 18px; }
    .bpf__toggle { top: 6px; right: 8px; }
    .bpf-pill { height: 46px; }
    .bpf-tile--coat .bpf-tile__art { height: 88px; }
    .bpf-tile--coat .bpf-tile__text { padding: 10px 0 8px; }
    .bpf-tile--coat .bpf-tile__radio { top: 8px; right: 8px; }

    .bpf-price__art { width: 132px; height: 132px; }
    .bpf-price__art .bpf-art { height: calc(var(--art-h) * .64); }

    .bpf-addons__head { padding: 14px 24px; }
    .bpf-addons__thumb { width: 48px; height: 48px; }
    .bpf-addons__price { font-size: 28px; line-height: 36px; }
    .bpf-addons__list { padding: 12px 24px; gap: 6px; }
    .bpf-row { min-height: 48px; padding: 8px 12px; }
    .bpf-addons__foot { padding: 12px 24px; }
    .bpf-addons__foot .bpf__next { height: 52px; }

    .bpf-when { padding: 16px 20px; gap: 12px; }
    .bpf-when__block { gap: 10px; }
    .bpf-when__block + .bpf-when__block { padding-top: 12px; }
    .bpf-when__title { font-size: 20px; line-height: 26px; }
    /* мастера — строкой: фото слева, имя и должность справа */
    .bpf-staff { gap: 8px; }
    .bpf-staff__card {
        width: auto;
        padding: 6px 16px 6px 6px;
        border-radius: 12px;
        display: grid;
        grid-template-columns: auto auto;
        column-gap: 10px;
        row-gap: 0;
        align-items: center;
        text-align: left;
    }
    .bpf-staff__card .bpf-staff__photo { grid-row: 1 / 3; margin: 0; }
    .bpf-staff__name { align-self: end; }
    .bpf-staff__pos { align-self: start; }
    .bpf-day { height: 58px; }
    .bpf-day b { font-size: 20px; line-height: 24px; }
    .bpf-slot { height: 38px; padding: 0 16px; }
    .bpf-final { gap: 18px; }
    .bpf-staff__photo { width: 40px; height: 40px; font-size: 16px; }
    .bpf-staff__svg { width: 22px; height: 22px; }
    .bpf__input--plain { height: 48px; }
    .bpf .bpf__input--area { height: auto; min-height: 48px; padding-top: 13px; padding-bottom: 13px; }
    .bpf-form__breed .bpf__input { height: 48px; }
    .bpf-form__breed .bpf__search-icon { top: 12px; }
    .bpf-form__breed .bpf__toggle { top: 4px; }
    .bpf-summary { padding: 10px 20px; }
    .bpf-agree { padding: 12px 20px; gap: 8px; }
    .bpf .bpf-check { gap: 10px; font-size: 14px; line-height: 20px; }
    .bpf .bpf-check__input,
    .bpf-check__box { width: 20px; height: 20px; }
    .bpf-check__box { border-radius: 5px; }
    .bpf-check__box svg { width: 14px; height: 14px; }
    .bpf-agree__item { gap: 2px; }
    .bpf-agree__note { padding-left: 30px; font-size: 12px; line-height: 16px; }
    .bpf-agree__item .bpf-form__err { margin-left: 30px; }

    .bpf-dc { gap: 14px; }
    .bpf-dc__head { gap: 2px; }
    .bpf-dc__title { font-size: 28px; line-height: 36px; }
    .bpf-dc__sub { font-size: 16px; line-height: 24px; }
    .bpf-dc__card,
    .bpf-dc__panel { padding: 18px 20px; gap: 6px; }
    .bpf-dc__name,
    .bpf-dc__eyebrow { font-size: 22px; line-height: 28px; }
    .bpf-dc__price { font-size: 24px; line-height: 31px; }
    .bpf-dc__card > :nth-last-child(2) { margin-bottom: 8px; }
    .bpf-dc__card--wide > :nth-last-child(2) { margin-bottom: 0; }
    .bpf-dc__btn { height: 50px; }
    .bpf-dc__verify { --h: 48px; }
    .bpf-dc__card--wide { padding-top: 12px; padding-bottom: 12px; }
    .bpf__inner:has(.bpf-plans) { padding-bottom: 12px; }
    .bpf-dc__picks { gap: 8px; }
    .bpf-dc__pick { padding: 9px 40px 9px 14px; gap: 1px; border-radius: 12px; }
    .bpf-dc__pick-radio { top: 9px; right: 9px; width: 22px; height: 22px; }
    .bpf-dc__pick-radio svg { width: 13px; height: 13px; }
    .bpf-dc__pick-title { font-size: 15px; line-height: 19px; }
    .bpf-dc__pick-sub { font-size: 12px; line-height: 15px; }
    .bpf-plans { padding: 8px; gap: 4px; }
    .bpf-plan { min-height: 46px; padding: 4px 10px 4px 14px; }
    .bpf-plan__name { font-size: 16px; line-height: 20px; }
    .bpf-plan__text { font-size: 12px; line-height: 15px; }
    .bpf-plan__price b { font-size: 16px; line-height: 19px; }
    .bpf-plan__price { line-height: 15px; }
    .bpf-plan__btn { height: 26px; }

    .bpf__next { height: 56px; }
    .bpf__content.bpf__content > .bpf__next { margin-top: 8px; }
    .bpf__back { margin-top: -8px; }
}

/* низкий экран ноутбука — 800 px и меньше (1366 × 768, 1280 × 720) */
@media (min-width: 1101px) and (max-height: 800px) {
    .bpf__logo img { width: 124px; height: 42px; }
    .bpf-hpill { height: 42px; font-size: 16px; }
    .bpf-hpill--lang > summary { height: 42px; }
    .bpf__inner { padding-top: 14px; padding-bottom: 16px; row-gap: 16px; }
    .bpf__title { font-size: 34px; line-height: 40px; }
    .bpf__lead { font-size: 15px; line-height: 23px; }
    .bpf-tile__art { height: 96px; }
    .bpf-tile__art .bpf-art { height: calc(var(--art-h) * .62); }
    .bpf-tile__text { padding: 8px 0; }
    .bpf-tile__title { font-size: 20px; line-height: 26px; }
    .bpf-tile__sub { font-size: 13px; line-height: 18px; }
    .bpf-tile--coat .bpf-tile__art { height: 74px; }
    .bpf-row { min-height: 42px; padding: 5px 12px; }
    .bpf-row__disc { width: 30px; height: 30px; }
    .bpf-addons__head { padding: 10px 24px; }
    .bpf-addons__list { padding: 10px 24px; }
    .bpf-addons__foot { padding: 10px 24px; }
    .bpf__next { height: 50px; }
    .bpf-dc__sub { font-size: 15px; line-height: 22px; }
    .bpf-dc__text { font-size: 14px; line-height: 20px; }
    .bpf-dc__btn { height: 46px; }
    .bpf-dc__verify { --h: 46px; }
    /* на 768 px шесть планов помещаются только без пояснений под названием */
    .bpf-dc { gap: 10px; }
    .bpf-plan { min-height: 36px; }
    .bpf-plans { padding: 6px; gap: 3px; }
    .bpf-plan__text { display: none; }
    .bpf-plan__price { display: flex; align-items: baseline; gap: 4px; }
    .bpf-plan__price i { display: inline; }
    .bpf-plan__price i::before { content: "· "; }
    .bpf-plan { grid-template-columns: minmax(0, 1fr) 104px 250px auto; }
}

/* ============================================================
   Планшет и телефон
   ============================================================ */

@media (max-width: 1100px) {
    .bpf__top { padding: 20px 32px 0; }
    .bpf__contacts { margin-right: 0; }
    .bpf__inner {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 20px;
        padding: 40px 32px 56px;
    }
    .bpf__title, .bpf__lead, .bpf__steps, .bpf__content { grid-column: 1; }
    .bpf__title { font-size: 44px; line-height: 52px; }
    .bpf__lead { align-self: start; font-size: 17px; line-height: 28px; }
    .bpf__photo { opacity: .5; }

    /* шаги — строкой, без линий */
    .bpf__steps { width: 100%; padding: 14px 18px; flex-direction: row; flex-wrap: wrap; gap: 10px 20px; }
    .bpf__step,
    .bpf__step.is-current:not(:last-child) { margin: 0; min-height: 32px; font-size: 13px; gap: 8px; }
    .bpf__step::after { display: none; }
    .bpf__bullet { width: 32px; height: 32px; font-size: 17px; line-height: 24px; }
    .bpf__check { width: 14px; height: 14px; }
    .bpf__content.bpf__content > .bpf__next { margin-top: 5px; }
}

@media (max-width: 720px) {
    /* на телефоне фото на фоне не читается (просьба клиента) — остаётся сплошной цвет палитры */
    .bpf__photo { display: none; }

    .bpf__top { padding: 16px 16px 0; align-items: center; }
    .bpf__logo img { width: 124px; height: 42px; }
    .bpf__contacts { margin: 0; gap: 6px; }
    .bpf-hpill { height: 42px; padding: 0 14px; font-size: 15px; gap: 6px; }
    .bpf-hpill--lang { padding: 0; }
    .bpf-hpill--lang > summary { height: 42px; padding: 0 12px; gap: 4px; }
    .bpf-hpill svg { width: 18px; height: 18px; }
    /* на телефоне номер не влезает — остаётся иконка звонка через WhatsApp и меню */
    .bpf-hpill--phone .bpf-hpill__tel { display: none; }
    .bpf-hpill--phone.is-bare .bpf-hpill__tel { display: inline; }

    .bpf__inner { padding: 20px 16px 32px; row-gap: 14px; }
    .bpf__title { font-size: 32px; line-height: 38px; }
    /* после первого шага заголовок меньше, а вводного текста нет — форма поднимается выше */
    .bpf__inner:has(.bpf__lead.is-later) .bpf__title { font-size: 26px; line-height: 32px; }
    .bpf__lead { font-size: 16px; line-height: 25px; }
    .bpf__lead.is-later { display: none; }

    /* шесть шагов строкой занимают пол-экрана — вместо них одна строка с полоской */
    .bpf__steps { display: none; }
    .bpf__progress {
        grid-column: 1;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: baseline;
        gap: 8px 10px;
        padding: 12px 16px 14px;
        border-radius: 16px;
        background: #FFFFFF;
    }
    .bpf__progress-step { font-size: 12px; line-height: 15px; letter-spacing: 1px; text-transform: uppercase; color: var(--c-muted); white-space: nowrap; }
    .bpf__progress-name {
        overflow: hidden;
        font-weight: 600;
        font-size: 14px;
        line-height: 18px;
        letter-spacing: .5px;
        text-transform: uppercase;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--c-text);
    }
    .bpf__progress-bar { grid-column: 1 / -1; height: 4px; border-radius: 4px; background: var(--c-panel-2); overflow: hidden; }
    .bpf__progress-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--c-brown); transition: width .3s; }

    .bpf__content { gap: 16px; }

    /* категории 2 × 2 — все четыре видны без прокрутки */
    .bpf__grid { gap: 8px; }
    .bpf__grid--cat,
    .bpf__grid--coat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bpf-tile { padding: 6px; border-radius: 14px; }
    .bpf-tile__art { height: 96px; border-radius: 10px; }
    .bpf-tile__art .bpf-art { height: calc(var(--art-h) * .6); }
    .bpf-tile__text { padding: 10px 4px 8px; gap: 2px; }
    .bpf-tile__title { font-size: 18px; line-height: 23px; }
    .bpf-tile__sub { font-size: 12px; line-height: 16px; }
    .bpf-tile__radio { top: 8px; right: 8px; width: 24px; height: 24px; }
    .bpf-tile__radio svg { width: 14px; height: 14px; }
    .bpf-tile--coat .bpf-tile__art { height: 92px; }
    .bpf-tile--coat .bpf-tile__text { padding: 10px 4px 8px; }
    .bpf-tile--coat .bpf-tile__title { font-size: 15px; line-height: 18px; }
    .bpf-tile--coat .bpf-tile__radio { top: 6px; right: 6px; }

    /* вес — три пилюли в ряд, подпись «(up to 10 kg)» второй строкой */
    .bpf__pills { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .bpf-pill {
        height: auto;
        min-height: 56px;
        padding: 8px 6px;
        border-radius: 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        font-size: 15px;
        line-height: 18px;
    }
    .bpf-pill__h { font-weight: 400; font-size: 12px; line-height: 15px; opacity: .8; }

    /* поле поднимается к верху экрана, список не должен уходить под клавиатуру */
    .bpf__suggest { max-height: 232px; }

    .bpf-price { flex-direction: column; align-items: stretch; gap: 16px; padding: 8px 8px 16px; text-align: center; }
    .bpf-price__art { width: 100%; }
    .bpf-price__rule { width: auto; height: 1px; margin: 0 16px; }
    .bpf-price__value { padding: 0 16px; }

    .bpf-addons__head { padding: 16px; flex-wrap: wrap; }
    .bpf-addons__price { font-size: 26px; line-height: 34px; }
    .bpf-addons__list { padding: 16px; }
    .bpf-row { gap: 12px; padding: 12px; }
    .bpf-row__text { flex-direction: column; gap: 2px; }
    .bpf-addons__foot { padding: 16px; flex-direction: column; align-items: stretch; }
    .bpf-addons__foot .bpf__next { width: 100%; }

    .bpf-when { padding: 16px; }
    .bpf-form { grid-template-columns: minmax(0, 1fr); }
    .bpf-staff__card { width: calc(50% - 6px); }
    .bpf-summary { padding: 14px 16px; }
    .bpf-summary b { margin-left: 0; width: 100%; }
    .bpf-agree { padding: 14px 16px; }
    .bpf .bpf-check { font-size: 14px; }
    .bpf-day { width: 58px; height: 66px; }
    .bpf-slot { padding: 0 16px; }
    .bpf-done { padding: 28px 16px; }
    .bpf-done__title { font-size: 26px; line-height: 32px; }
    .bpf__next { height: 56px; }

    /* «дальше» всегда под пальцем: прилипает к низу экрана, пока форма длиннее его */
    .bpf__content > .bpf__next {
        position: sticky;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        z-index: 6;
        box-shadow: 0 10px 28px rgba(230, 147, 105, .32);
    }
    /* полупрозрачная кнопка над контентом читается плохо — неактивная рисуется сплошным цветом */
    .bpf__content > .bpf__next[disabled] { opacity: 1; background: var(--c-disabled); box-shadow: none; }

    .bpf-dc { gap: 14px; }
    .bpf-dc__title { font-size: 26px; line-height: 32px; }
    .bpf-dc__sub { font-size: 15px; line-height: 23px; }
    .bpf-dc__cards { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .bpf-dc__card,
    .bpf-dc__panel { padding: 18px 16px; }
    .bpf-dc__name,
    .bpf-dc__eyebrow { font-size: 22px; line-height: 28px; }
    .bpf-dc__card--wide { flex-direction: column; align-items: stretch; gap: 12px; }
    .bpf-dc__side { width: auto; text-align: left; }
    .bpf-dc__verify { flex-direction: column; align-items: stretch; }
    /* в столбике flex-basis 0 сжимал поле до высоты строки */
    .bpf-dc__verify .bpf__input { flex: none; }
    .bpf-dc__verify .bpf-dc__btn,
    .bpf-dc__actions .bpf-dc__btn { width: 100%; }
    .bpf-dc__actions { flex-direction: column; align-items: stretch; }
    .bpf-dc__actions .bpf__link { align-self: center; }
    .bpf-form__breed,
    .bpf-form__span2 { grid-column: auto; }
    .bpf__inner:has(.bpf-plans) { padding-bottom: 32px; }

    /* три мини-карточки на телефоне — столбиком */
    .bpf-dc__picks { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .bpf-dc__pick { padding: 12px 48px 12px 16px; }
    .bpf-plans { padding: 8px; gap: 8px; }
    /* строка плана — карточкой: название и пояснение, под ними частота, цена и кнопка */
    .bpf-plan {
        padding: 12px 12px 12px 14px;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "main main" "freq btn" "price btn";
        row-gap: 2px;
    }
    .bpf-plan__main { grid-area: main; margin-bottom: 6px; }
    .bpf-plan__freq { grid-area: freq; }
    .bpf-plan__price { grid-area: price; }
    .bpf-plan__btn { grid-area: btn; height: 36px; }

}

/* ============================================================
   Полноэкранная страница: юридические ссылки под формой
   (Terms & Conditions · Privacy Policy · Legal Notice · Cookie Settings).
   Строка забирает часть нижнего отступа формы, поэтому высота страницы
   не растёт и прокрутки не прибавляется. Блок стоит после медиазапросов выше —
   он переопределяет их нижний отступ .bpf__inner.
   ============================================================ */

/* та же сетка, что у формы: строка по центру правой колонки */
.bpf-legal {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1440px;
    margin: auto auto 0;                   /* прижата к низу экрана, даже пока форма не загрузилась */
    padding: 0 60px 24px;
    display: grid;
    grid-template-columns: minmax(0, 452fr) minmax(0, 812fr);
    column-gap: 56px;
}

/* подложка: под строкой сплошной цвет фона, над ней — 32px перехода от фото.
   Фото доходит до низа экрана на многих размерах (1180 × 760, 1280 × 950, 1101 × 700, планшеты),
   и без подложки ссылки ложились на тёмную шерсть и флакон — контраст падал до 1.2:1.
   Где фото у низа уже растворилось (1440 × 1207), подложку не видно; в остальных случаях низ фото
   просто мягко уходит в фон. Высота страницы не меняется.
   Подложка лежит под формой: у .bpf__inner z-index выше, чем у строки, — кнопки и карточки она не задевает */
.bpf-legal::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -32px;
    bottom: 0;
    left: calc(50% - 50vw);                /* во всю ширину секции, а не только 1440px строки */
    right: calc(50% - 50vw);
    background: linear-gradient(180deg, transparent, var(--c-bg) 32px);
    pointer-events: none;
}

.bpf--fs .bpf__inner { z-index: 2; }

.bpf .bpf-legal__list {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    list-style: none;
    font-family: var(--f-sans);
    font-size: 13px;
    line-height: 18px;
    color: var(--c-muted);
}

.bpf .bpf-legal__list li { list-style: none; }
.bpf-legal__list li + li::before { content: "·"; margin: 0 10px; }   /* точки — украшение, остаются бледнее */
.bpf .bpf-legal a,
.bpf .bpf-legal a:visited { color: var(--c-legal); }
.bpf .bpf-legal a:hover,
.bpf .bpf-legal a:focus { color: var(--c-text); text-decoration: underline; text-underline-offset: 3px; }

/* 96 = 54 + строка 18 + 24.
   Правила с :has() ниже — всегда отдельными строками, не через запятую с простым селектором:
   браузер без :has() (Firefox до 121, Safari до 15.4) выбрасывает весь список селекторов,
   и тогда простое правило тоже пропало бы — остался бы отступ 54px и прокрутка */
.bpf--fs .bpf__inner { padding-bottom: 54px; }
.bpf--fs .bpf__inner:has(.bpf-plans) { padding-bottom: 12px; }

@media (min-width: 1101px) and (max-height: 1000px) {
    .bpf-legal { padding-bottom: 12px; }
    .bpf--fs .bpf__inner { padding-bottom: 8px; }
    .bpf--fs .bpf__inner:has(.bpf-plans) { padding-bottom: 8px; }
}

/* 1366 × 768, 1280 × 720: всё вместе со строкой помещается без прокрутки */
@media (min-width: 1101px) and (max-height: 800px) {
    .bpf-legal { padding-bottom: 6px; }
    .bpf .bpf-legal__list { line-height: 16px; }
    .bpf--fs .bpf__inner { padding-bottom: 0; }
    .bpf--fs .bpf__inner:has(.bpf-plans) { padding-bottom: 0; }
}

@media (max-width: 1100px) {
    .bpf-legal { padding: 0 32px 24px; grid-template-columns: minmax(0, 1fr); }
    .bpf .bpf-legal__list { grid-column: 1; }
    .bpf--fs .bpf__inner { padding-bottom: 14px; }
}

/* телефон: фото нет (и подложка не нужна), четыре ссылки — двумя строками по две, без точек */
@media (max-width: 720px) {
    .bpf-legal { padding: 0 16px calc(20px + env(safe-area-inset-bottom, 0px)); }
    .bpf-legal::before { content: none; }
    .bpf .bpf-legal__list { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; gap: 6px 24px; }
    .bpf-legal__list li + li::before { content: none; }
    .bpf--fs .bpf__inner { padding-bottom: 20px; }
    .bpf--fs .bpf__inner:has(.bpf-plans) { padding-bottom: 20px; }
}

/* ============================================================
   Полноэкранная страница: тело без полей темы
   ============================================================ */

body.bpb-fullscreen { margin: 0; padding: 0; background: #ECE0D4; }
body.bpb-fullscreen.bpb-grey { background: #E6E1DB; }