/**
 * Слой поверх booking_public.css и поля «Свой CSS» в настройках онлайн-записи.
 * Селекторы с body.ob-body выше по специфичности, чем типичный custom_css.
 * Версия в URL: ?v= в шаблоне (ob_pub_css_ver).
 */

/* Карточка записи: цветная полоска сверху + чёткий контур */
body.ob-body .ob-card.ob-wizard {
    overflow: visible;
    background:
        linear-gradient(
            90deg,
            var(--ob-brand) 0%,
            var(--ob-accent) 45%,
            color-mix(in srgb, var(--ob-warm) 65%, var(--ob-accent)) 100%
        )
        no-repeat 0 0 / 100% 4px,
        var(--ob-card);
    border-color: color-mix(in srgb, var(--ob-brand) 18%, var(--ob-line));
}

/* Слоты: «таблетки», выбранный — цвет акцента (не спутать с брендом) */
body.ob-body .ob-wizard .ob-slots .ob-slot:not(.is-disabled):not(.is-booked) {
    border-radius: 999px;
    border-width: 2px;
    border-color: color-mix(in srgb, var(--ob-brand) 22%, var(--ob-line));
    font-weight: 600;
}

body.ob-body .ob-wizard .ob-slots .ob-slot.is-selected {
    background: var(--ob-accent);
    color: #fff;
    border-color: color-mix(in srgb, var(--ob-accent) 80%, #1a1a1a);
    font-weight: 800;
    background-image: none;
    box-shadow:
        0 0 0 3px #fff,
        0 0 0 6px color-mix(in srgb, var(--ob-accent) 55%, transparent),
        0 14px 32px color-mix(in srgb, var(--ob-accent) 40%, transparent);
    transform: scale(1.07);
}

body.ob-body:not(.ob-reduced-motion) .ob-wizard .ob-slots .ob-slot.is-selected {
    animation: obSurfaceSlotPick 0.5s cubic-bezier(0.34, 1.35, 0.64, 1) both;
}

@keyframes obSurfaceSlotPick {
    0% {
        transform: scale(0.9);
        filter: brightness(1.1);
    }

    60% {
        transform: scale(1.12);
    }

    100% {
        transform: scale(1.07);
    }
}

/* Календарь: выбранный день с кольцом акцента */
body.ob-body .ob-wizard .ob-cal__day.is-selected {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ob-accent) 45%, transparent);
}

/* Поля формы записи: заметный фон страницы, не «серый bootstrap» */
body.ob-body .ob-wizard #bookingForm .ob-input,
body.ob-body .ob-wizard #bookingForm .ob-select,
body.ob-body .ob-wizard #bookingForm .ob-textarea {
    background: color-mix(in srgb, var(--ob-bg-tint) 42%, #fff);
    border-width: 2px;
    border-color: color-mix(in srgb, var(--ob-ink) 14%, var(--ob-line));
    border-radius: max(12px, var(--ob-radius-sm));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

body.ob-body .ob-wizard #bookingForm .ob-input:focus,
body.ob-body .ob-wizard #bookingForm .ob-select:focus,
body.ob-body .ob-wizard #bookingForm .ob-textarea:focus {
    background: #fff;
    border-color: var(--ob-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ob-accent) 22%, transparent);
}

body.ob-body .ob-wizard #bookingForm .ob-select {
    background-color: color-mix(in srgb, var(--ob-bg-tint) 42%, #fff);
}

body.ob-body .ob-wizard #bookingForm .ob-select:focus {
    background-color: #fff;
}

/* Кнопки шагов: primary без тяжёлого градиента (перебивает старый custom_css) */
body.ob-body .ob-wizard .ob-btn--primary {
    background: var(--ob-brand);
    background-image: none;
    color: #fff;
    border: 2px solid color-mix(in srgb, var(--ob-brand) 72%, #0a1628);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--ob-brand) 18%, transparent);
}

body.ob-body .ob-wizard .ob-btn--primary:hover:not(:disabled) {
    background-image: none;
    filter: brightness(1.06);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--ob-brand) 26%, transparent);
}

body.ob-body .ob-wizard .ob-btn--secondary {
    background: #fff;
    color: var(--ob-ink);
    border: 2px solid color-mix(in srgb, var(--ob-brand) 28%, var(--ob-line));
    box-shadow: 0 1px 4px rgba(12, 18, 34, 0.06);
}

/* Лид над формой — чуть контрастнее */
body.ob-body .ob-booking-lead__title {
    color: var(--ob-ink);
}

body.ob-body .ob-hero__badge {
    font-weight: 700;
    letter-spacing: 0.09em;
}

@media (prefers-reduced-motion: reduce) {
    body.ob-body .ob-wizard .ob-slots .ob-slot.is-selected {
        animation: none;
    }
}

/* ---------- Контент поверх живого фона ---------- */
body.ob-body .ob-app {
    position: relative;
    z-index: 1;
}

/* ---------- Слой ambient: крупные блобы + сетка + шум (анимация при включённых анимациях) ---------- */
body.ob-body .ob-ambient {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

body.ob-body .ob-ambient__layer {
    position: absolute;
    inset: -18vmax -12vmax;
}

body.ob-body .ob-ambient__blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(56px);
    -webkit-filter: blur(56px);
    opacity: 0.82;
    will-change: transform;
}

body.ob-body .ob-ambient__blob--a {
    width: min(72vmin, 520px);
    height: min(72vmin, 520px);
    top: -12%;
    left: -8%;
}

body.ob-body .ob-ambient__blob--b {
    width: min(62vmin, 480px);
    height: min(62vmin, 480px);
    right: -10%;
    bottom: -6%;
}

body.ob-body .ob-ambient__blob--c {
    width: min(48vmin, 400px);
    height: min(48vmin, 400px);
    left: 28%;
    top: 38%;
}

body.ob-body:not(.ob-reduced-motion) .ob-ambient__blob--a {
    animation: obAmbDriftA 24s ease-in-out infinite alternate;
}

body.ob-body:not(.ob-reduced-motion) .ob-ambient__blob--b {
    animation: obAmbDriftB 32s ease-in-out infinite alternate;
}

body.ob-body:not(.ob-reduced-motion) .ob-ambient__blob--c {
    animation: obAmbDriftC 28s ease-in-out infinite alternate;
}

body.ob-body.ob-anim-slow:not(.ob-reduced-motion) .ob-ambient__blob--a { animation-duration: 38s; }
body.ob-body.ob-anim-slow:not(.ob-reduced-motion) .ob-ambient__blob--b { animation-duration: 48s; }
body.ob-body.ob-anim-slow:not(.ob-reduced-motion) .ob-ambient__blob--c { animation-duration: 42s; }

body.ob-body.ob-anim-fast:not(.ob-reduced-motion) .ob-ambient__blob--a { animation-duration: 15s; }
body.ob-body.ob-anim-fast:not(.ob-reduced-motion) .ob-ambient__blob--b { animation-duration: 20s; }
body.ob-body.ob-anim-fast:not(.ob-reduced-motion) .ob-ambient__blob--c { animation-duration: 17s; }

@keyframes obAmbDriftA {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(12vw, 8vh) scale(1.14); }
}

@keyframes obAmbDriftB {
    0% { transform: translate(0, 0) scale(1.05); }
    100% { transform: translate(-10vw, -12vh) scale(1.08); }
}

@keyframes obAmbDriftC {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(6vw, -18vh) scale(1.2); }
}

body.ob-body .ob-ambient__grid {
    position: absolute;
    inset: -50%;
    opacity: 0;
    background-image:
        linear-gradient(color-mix(in srgb, var(--ob-ink) 14%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--ob-ink) 12%, transparent) 1px, transparent 1px);
    background-size: 48px 48px;
    transform: rotate(-8deg);
}

body.ob-body:not(.ob-reduced-motion) .ob-ambient__grid {
    animation: obAmbGridDrift 50s linear infinite;
}

@keyframes obAmbGridDrift {
    0% { transform: rotate(-8deg) translate(0, 0); }
    100% { transform: rotate(-8deg) translate(-80px, -60px); }
}

body.ob-body .ob-ambient__noise {
    position: absolute;
    inset: 0;
    opacity: 0.045;
    background-image: radial-gradient(circle at 22% 33%, rgba(255, 255, 255, 0.9) 0.6px, transparent 1.2px);
    background-size: 3px 3px;
    mix-blend-mode: overlay;
}

body.ob-body:not(.ob-reduced-motion) .ob-ambient__noise {
    animation: obAmbNoise 10s steps(4) infinite;
}

@keyframes obAmbNoise {
    0%, 100% { opacity: 0.035; }
    50% { opacity: 0.06; }
}

/* Пресеты: усиленный базовый фон body + цвета блобов (переменные) */
body.ob-body.ob-surface.ob-surface--soft {
    background:
        radial-gradient(1100px 520px at 92% -5%, color-mix(in srgb, var(--ob-brand) 42%, transparent), transparent 50%),
        radial-gradient(880px 460px at -5% 35%, color-mix(in srgb, var(--ob-warm) 38%, transparent), transparent 48%),
        var(--ob-bg-tint);
}

body.ob-body .ob-ambient--soft {
    --amb-a: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--ob-brand) 72%, transparent) 0%, transparent 68%);
    --amb-b: radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--ob-warm) 65%, transparent) 0%, transparent 65%);
    --amb-c: radial-gradient(circle at 45% 45%, color-mix(in srgb, var(--ob-accent) 48%, transparent) 0%, transparent 62%);
}

body.ob-body.ob-surface.ob-surface--aurora {
    background:
        radial-gradient(ellipse 1000px 560px at 12% -18%, color-mix(in srgb, #c084fc 55%, transparent), transparent 55%),
        radial-gradient(ellipse 900px 520px at 105% 18%, color-mix(in srgb, #22d3ee 52%, transparent), transparent 50%),
        radial-gradient(ellipse 800px 480px at 48% 108%, color-mix(in srgb, var(--ob-brand) 38%, transparent), transparent 52%),
        var(--ob-bg-tint);
}

body.ob-body .ob-ambient--aurora {
    --amb-a: radial-gradient(circle at 38% 38%, rgba(192, 132, 252, 0.75) 0%, transparent 65%);
    --amb-b: radial-gradient(circle at 42% 42%, rgba(34, 211, 238, 0.68) 0%, transparent 62%);
    --amb-c: radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--ob-accent) 55%, transparent) 0%, transparent 58%);
}

body.ob-body.ob-surface.ob-surface--midnight {
    background:
        radial-gradient(ellipse 1100px 600px at 50% 115%, color-mix(in srgb, #283593 55%, transparent), transparent 55%),
        radial-gradient(ellipse 720px 440px at -5% 15%, color-mix(in srgb, #5c6bc0 42%, transparent), transparent 48%),
        linear-gradient(188deg, color-mix(in srgb, var(--ob-bg-tint) 78%, #9fa8da), var(--ob-bg-tint));
}

body.ob-body .ob-ambient--midnight {
    --amb-a: radial-gradient(circle at 35% 35%, color-mix(in srgb, #3949ab 70%, transparent) 0%, transparent 65%);
    --amb-b: radial-gradient(circle at 40% 40%, color-mix(in srgb, #7e57c2 58%, transparent) 0%, transparent 62%);
    --amb-c: radial-gradient(circle at 38% 38%, color-mix(in srgb, #00b0ff 42%, transparent) 0%, transparent 58%);
}

body.ob-body.ob-surface.ob-surface--sunset {
    background:
        radial-gradient(ellipse 1000px 540px at 90% 5%, color-mix(in srgb, #ff7043 52%, transparent), transparent 48%),
        radial-gradient(ellipse 780px 460px at 5% 95%, color-mix(in srgb, var(--ob-warm) 48%, transparent), transparent 52%),
        linear-gradient(182deg, color-mix(in srgb, var(--ob-bg-tint) 75%, #ffe0b2), var(--ob-bg-tint));
}

body.ob-body .ob-ambient--sunset {
    --amb-a: radial-gradient(circle at 38% 38%, color-mix(in srgb, #ff5722 62%, transparent) 0%, transparent 62%);
    --amb-b: radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--ob-warm) 58%, transparent) 0%, transparent 60%);
    --amb-c: radial-gradient(circle at 40% 40%, color-mix(in srgb, #ff9800 48%, transparent) 0%, transparent 58%);
}

body.ob-body.ob-surface.ob-surface--forest {
    background:
        radial-gradient(ellipse 920px 500px at 18% 100%, color-mix(in srgb, #43a047 48%, transparent), transparent 52%),
        radial-gradient(ellipse 640px 400px at 98% 8%, color-mix(in srgb, #00897b 42%, transparent), transparent 50%),
        linear-gradient(188deg, color-mix(in srgb, var(--ob-bg-tint) 72%, #c8e6c9), var(--ob-bg-tint));
}

body.ob-body .ob-ambient--forest {
    --amb-a: radial-gradient(circle at 38% 38%, color-mix(in srgb, #2e7d32 62%, transparent) 0%, transparent 62%);
    --amb-b: radial-gradient(circle at 40% 40%, color-mix(in srgb, #00897b 52%, transparent) 0%, transparent 60%);
    --amb-c: radial-gradient(circle at 40% 40%, color-mix(in srgb, #aed581 45%, transparent) 0%, transparent 58%);
}

body.ob-body.ob-surface.ob-surface--ocean {
    background:
        radial-gradient(ellipse 1050px 520px at 50% -18%, color-mix(in srgb, #00acc1 52%, transparent), transparent 52%),
        radial-gradient(ellipse 820px 520px at -8% 55%, color-mix(in srgb, #039be5 45%, transparent), transparent 50%),
        linear-gradient(190deg, color-mix(in srgb, var(--ob-bg-tint) 78%, #b2ebf2), var(--ob-bg-tint));
}

body.ob-body .ob-ambient--ocean {
    --amb-a: radial-gradient(circle at 38% 38%, color-mix(in srgb, #0097a7 62%, transparent) 0%, transparent 62%);
    --amb-b: radial-gradient(circle at 40% 40%, color-mix(in srgb, #0288d1 52%, transparent) 0%, transparent 60%);
    --amb-c: radial-gradient(circle at 40% 40%, color-mix(in srgb, #4dd0e1 48%, transparent) 0%, transparent 58%);
}

body.ob-body.ob-surface.ob-surface--paper {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--ob-bg-tint) 94%, #fff), var(--ob-bg-tint)),
        repeating-linear-gradient(
            -12deg,
            transparent,
            transparent 11px,
            color-mix(in srgb, var(--ob-ink) 7%, transparent) 11px,
            color-mix(in srgb, var(--ob-ink) 7%, transparent) 12px
        );
}

body.ob-body .ob-ambient--paper {
    --amb-a: radial-gradient(circle at 38% 38%, color-mix(in srgb, var(--ob-ink) 18%, transparent) 0%, transparent 65%);
    --amb-b: radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--ob-brand) 28%, transparent) 0%, transparent 62%);
    --amb-c: radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--ob-warm) 22%, transparent) 0%, transparent 60%);
}

body.ob-body.ob-surface.ob-surface--carbon {
    background:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        radial-gradient(ellipse 900px 440px at 50% -5%, color-mix(in srgb, var(--ob-ink) 22%, transparent), transparent 58%),
        var(--ob-bg-tint);
    background-size: 14px 14px, 14px 14px, auto, auto;
}

body.ob-body .ob-ambient--carbon {
    --amb-a: radial-gradient(circle at 38% 38%, color-mix(in srgb, var(--ob-ink) 38%, transparent) 0%, transparent 62%);
    --amb-b: radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--ob-brand) 35%, transparent) 0%, transparent 60%);
    --amb-c: radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.14) 0%, transparent 58%);
}

body.ob-body.ob-surface.ob-surface--studio {
    background:
        radial-gradient(ellipse 1000px 480px at 50% -12%, rgba(255, 255, 255, 0.98), transparent 58%),
        radial-gradient(ellipse 760px 400px at 100% 85%, color-mix(in srgb, var(--ob-brand) 28%, transparent), transparent 52%),
        linear-gradient(188deg, #f3f5f9, var(--ob-bg-tint));
}

body.ob-body .ob-ambient--studio {
    --amb-a: radial-gradient(circle at 38% 38%, color-mix(in srgb, var(--ob-brand) 42%, transparent) 0%, transparent 64%);
    --amb-b: radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--ob-accent) 32%, transparent) 0%, transparent 62%);
    --amb-c: radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.55) 0%, transparent 58%);
}

/* Mesh: яркий градиентный mesh + сетка */
body.ob-body.ob-surface.ob-surface--mesh {
    background:
        radial-gradient(ellipse 1100px 600px at 15% 20%, color-mix(in srgb, #a855f7 58%, transparent), transparent 52%),
        radial-gradient(ellipse 1000px 560px at 95% 12%, color-mix(in srgb, #22d3ee 55%, transparent), transparent 48%),
        radial-gradient(ellipse 800px 500px at 50% 105%, color-mix(in srgb, var(--ob-brand) 35%, transparent), transparent 55%),
        linear-gradient(165deg, #ede7f6, #e8eaf6);
}

body.ob-body .ob-ambient--mesh {
    --amb-a: radial-gradient(circle at 38% 38%, rgba(168, 85, 247, 0.78) 0%, transparent 62%);
    --amb-b: radial-gradient(circle at 40% 40%, rgba(34, 211, 238, 0.72) 0%, transparent 60%);
    --amb-c: radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--ob-brand) 62%, transparent) 0%, transparent 58%);
}

body.ob-body .ob-ambient--mesh .ob-ambient__grid {
    opacity: 0.07;
}

/* Neon: тёмная база + «неоновые» блобы (screen) */
body.ob-body.ob-surface.ob-surface--neon {
    background:
        radial-gradient(ellipse 900px 500px at 50% 120%, color-mix(in srgb, #00e5ff 35%, transparent), transparent 55%),
        linear-gradient(188deg, #141622, #0d1118);
}

body.ob-body .ob-ambient--neon .ob-ambient__blob {
    mix-blend-mode: screen;
    opacity: 0.95;
    filter: blur(48px);
    -webkit-filter: blur(48px);
}

body.ob-body .ob-ambient--neon {
    --amb-a: radial-gradient(circle at 38% 38%, rgba(0, 229, 255, 0.95) 0%, transparent 62%);
    --amb-b: radial-gradient(circle at 40% 40%, rgba(255, 64, 129, 0.88) 0%, transparent 60%);
    --amb-c: radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--ob-warm) 75%, #fff) 0%, transparent 58%);
}

body.ob-body .ob-ambient--neon .ob-ambient__grid {
    opacity: 0.09;
    background-image:
        linear-gradient(rgba(0, 229, 255, 0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 64, 129, 0.12) 1px, transparent 1px);
    background-size: 56px 56px;
}

body.ob-body.ob-surface.ob-surface--neon .ob-header__text h1,
body.ob-body.ob-surface.ob-surface--neon .ob-booking-lead__title {
    color: #f1f5f9;
    text-shadow: 0 2px 28px color-mix(in srgb, var(--ob-brand) 35%, transparent);
}

body.ob-body.ob-surface.ob-surface--neon .ob-header__text p,
body.ob-body.ob-surface.ob-surface--neon .ob-booking-lead__sub {
    color: rgba(203, 213, 225, 0.92);
}

body.ob-body.ob-surface.ob-surface--neon .ob-trust-strip {
    color: rgba(148, 163, 184, 0.95);
}

body.ob-body.ob-surface.ob-surface--neon .ob-trust-strip__item i {
    color: color-mix(in srgb, var(--ob-accent) 55%, #94a3b8);
}

body.ob-body.ob-surface.ob-surface--neon .ob-cabinet-pill {
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(148, 163, 184, 0.35);
    color: #f8fafc;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

body.ob-body.ob-surface.ob-surface--neon .ob-cabinet-pill__sub {
    color: rgba(203, 213, 225, 0.88);
}

body.ob-body.ob-surface.ob-surface--neon .ob-footer,
body.ob-body.ob-surface.ob-surface--neon .ob-footer__tag {
    color: rgba(148, 163, 184, 0.9);
}

body.ob-body.ob-surface.ob-surface--neon .ob-footer__link {
    color: #7dd3fc;
    border-bottom-color: rgba(125, 211, 252, 0.45);
}

body.ob-body.ob-surface.ob-surface--neon .ob-about--lite summary,
body.ob-body.ob-surface.ob-surface--neon .ob-about__body {
    color: rgba(226, 232, 240, 0.94);
}

body.ob-body.ob-surface.ob-surface--neon .ob-quick-bar__item {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.28);
    color: #e2e8f0;
}

/* Dawn: тёплый рассвет */
body.ob-body.ob-surface.ob-surface--dawn {
    background:
        radial-gradient(ellipse 1100px 580px at 50% -20%, color-mix(in srgb, #ffab40 58%, transparent), transparent 50%),
        radial-gradient(ellipse 800px 480px at 0% 100%, color-mix(in srgb, #ec407a 38%, transparent), transparent 52%),
        linear-gradient(188deg, #fff9f5, color-mix(in srgb, var(--ob-bg-tint) 85%, #fce4ec));
}

body.ob-body .ob-ambient--dawn {
    --amb-a: radial-gradient(circle at 38% 38%, color-mix(in srgb, #ff9800 58%, transparent) 0%, transparent 62%);
    --amb-b: radial-gradient(circle at 40% 40%, color-mix(in srgb, #f48fb1 52%, transparent) 0%, transparent 60%);
    --amb-c: radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--ob-accent) 45%, transparent) 0%, transparent 58%);
}

body.ob-body .ob-ambient__blob--a { background: var(--amb-a); }
body.ob-body .ob-ambient__blob--b { background: var(--amb-b); }
body.ob-body .ob-ambient__blob--c { background: var(--amb-c); }


/* Отключение анимаций фона */
body.ob-body.ob-reduced-motion .ob-ambient__blob {
    animation: none !important;
    opacity: 0.72;
}

body.ob-body.ob-reduced-motion .ob-ambient__grid,
body.ob-body.ob-reduced-motion .ob-ambient__noise {
    animation: none !important;
}

body.ob-body.ob-reduced-motion .ob-ambient__grid {
    opacity: 0.05;
}

@media (prefers-reduced-motion: reduce) {
    body.ob-body .ob-ambient__blob {
        animation: none !important;
    }

    body.ob-body .ob-ambient__grid,
    body.ob-body .ob-ambient__noise {
        animation: none !important;
    }
}

/* Карточка «стекло» */
body.ob-body.ob-cardstyle--glass .ob-card.ob-wizard {
    background:
        linear-gradient(
            90deg,
            var(--ob-brand) 0%,
            var(--ob-accent) 45%,
            color-mix(in srgb, var(--ob-warm) 65%, var(--ob-accent)) 100%
        )
        no-repeat 0 0 / 100% 4px,
        color-mix(in srgb, var(--ob-card) 78%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-color: color-mix(in srgb, #fff 55%, var(--ob-line));
    box-shadow:
        var(--ob-shadow-lg),
        inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

body.ob-body.ob-cardstyle--glass .ob-wizard #bookingForm .ob-input,
body.ob-body.ob-cardstyle--glass .ob-wizard #bookingForm .ob-select,
body.ob-body.ob-cardstyle--glass .ob-wizard #bookingForm .ob-textarea {
    background: color-mix(in srgb, #fff 82%, var(--ob-bg-tint));
}

body.ob-body.ob-cardstyle--glass .ob-wizard .ob-btn--secondary {
    background: color-mix(in srgb, #fff 88%, transparent);
}

/* Доверие и подвал */
body.ob-body .ob-trust-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.75rem;
    margin: 1.1rem 0 0;
    padding: 0;
    list-style: none;
    font-size: clamp(0.78rem, 0.72rem + 0.4vw, 0.85rem);
    color: var(--ob-muted);
    line-height: 1.35;
}

body.ob-body .ob-trust-strip__item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

body.ob-body .ob-trust-strip__item i {
    color: color-mix(in srgb, var(--ob-brand) 65%, var(--ob-muted));
    font-size: 0.95em;
}

body.ob-body .ob-trust-strip__dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ob-muted) 45%, transparent);
    flex-shrink: 0;
}

@media (max-width: 520px) {
    body.ob-body .ob-trust-strip__dot {
        display: none;
    }

    body.ob-body .ob-trust-strip {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }
}

body.ob-body .ob-footer__gipix {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    max-width: 22rem;
    margin: 0 auto;
}

body.ob-body .ob-footer__tag {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: color-mix(in srgb, var(--ob-muted) 92%, var(--ob-ink));
}

body.ob-body .ob-footer__link {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--ob-brand);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--ob-brand) 35%, transparent);
    padding-bottom: 1px;
}

body.ob-body .ob-footer__link:hover {
    color: color-mix(in srgb, var(--ob-brand) 85%, #000);
}

/* Плавающая кнопка «Записаться» — только узкий экран */
body.ob-body .ob-mobile-cta {
    display: none;
}

@media (max-width: 640px) {
    body.ob-body .ob-mobile-cta {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        position: fixed;
        z-index: 80;
        right: max(0.65rem, env(safe-area-inset-right, 0px));
        bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
        padding: 0.65rem 1rem;
        min-height: 48px;
        border-radius: 999px;
        border: 2px solid color-mix(in srgb, var(--ob-brand) 35%, #0a1628);
        background: linear-gradient(135deg, var(--ob-brand), color-mix(in srgb, var(--ob-accent) 25%, var(--ob-brand)));
        color: #fff;
        font-family: var(--ob-font);
        font-size: 0.95rem;
        font-weight: 700;
        text-decoration: none;
        box-shadow:
            0 4px 20px color-mix(in srgb, var(--ob-brand) 35%, transparent),
            0 0 0 1px rgba(255, 255, 255, 0.12) inset;
        transition: transform var(--ob-trans, 0.2s), opacity var(--ob-trans, 0.2s);
    }

    body.ob-body .ob-mobile-cta:active {
        transform: scale(0.97);
    }

    body.ob-body .ob-mobile-cta.is-collapsed {
        opacity: 0;
        pointer-events: none;
        transform: translateY(12px);
    }

    body.ob-body .ob-app {
        padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
    }
}

body.ob-body.ob-reduced-motion .ob-mobile-cta {
    transition: none;
}