/* Own Booking Flow — brand language of the pillars header / streak
           modal: glass tiles, mono uppercase section labels, lime accents.
           The confirm step is a paper «booking slip» (see below) — parity
           with the QR pass / bonuses receipt aesthetic. */
        .own-booking-body {
            flex: 1;
            overflow-y: auto;
            padding: var(--bp-space-4) 16px var(--bp-space-8);
            background: transparent; /* atmosphere lives on the overlay */
            max-width: 420px;
            margin: 0 auto;
            width: 100%;
        }
        .own-booking-body h3 {
            color: #fff;
            margin: 0 0 12px;
            font-family: var(--ff-display);
            font-weight: 800;
            font-size: var(--bp-fs-h3);
            letter-spacing: 0.01em;
        }
        .own-booking-subtitle {
            color: #94a3b8;
            font-size: var(--bp-fs-secondary);
            margin: -8px 0 12px;
            font-variant-numeric: tabular-nums;
        }
        .own-booking-error {
            background: rgba(227, 168, 51, 0.12);
            border: 1px solid rgba(227, 168, 51, 0.45);
            color: #fde68a;
            padding: var(--bp-space-3) 14px;
            border-radius: 12px;
            margin-bottom: 12px;
            font-size: var(--bp-fs-body);
            line-height: 1.4;
        }
        @keyframes ob-rise {
            from { opacity: 0; transform: translateY(12px); }
            to   { opacity: 1; transform: none; }
        }
        .own-booking-card {
            display: block;
            width: 100%;
            text-align: left;
            position: relative;
            padding: var(--bp-space-4) 38px var(--bp-space-4) 16px;
            margin-bottom: 12px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 14px;
            color: #fff;
            cursor: pointer;
            overflow: hidden;
            transition: transform .12s ease, background .15s ease,
                        border-color .15s ease, box-shadow .15s ease;
        }
        /* Lime accent rail — lights up on hover/press, same affordance
           colour language as the active pillars. */
        .own-booking-card::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background: linear-gradient(180deg, var(--bp-green), transparent);
            opacity: 0;
            transition: opacity .15s ease;
        }
        /* Chevron affordance (bootstrap-icons glyph) — the card is a step
           forward, not a toggle. */
        .own-booking-card::after {
            content: "\f285";
            font-family: 'bootstrap-icons';
            position: absolute;
            right: 13px;
            top: 50%;
            transform: translateY(-50%);
            font-size: var(--bp-fs-secondary);
            color: #475569;
            transition: color .15s ease, transform .15s ease;
        }
        @media (hover: hover) and (pointer: fine) {
            .own-booking-card:hover:not(:disabled) {
                background: rgba(146, 196, 58, 0.07);
                border-color: rgba(146, 196, 58, 0.45);
                transform: translateY(-1px);
                box-shadow: 0 10px 26px -16px rgba(146, 196, 58, 0.55);
            }
            .own-booking-card:hover:not(:disabled)::before { opacity: 1; }
            .own-booking-card:hover:not(:disabled)::after {
                color: var(--bp-green);
                transform: translateY(-50%) translateX(2px);
            }
        }
        .own-booking-card:active:not(:disabled) { transform: scale(0.985); }
        .own-booking-card:disabled {
            background: rgba(255, 255, 255, 0.02);
            border-color: rgba(255, 255, 255, 0.05);
            color: #5c6884;
            cursor: not-allowed;
        }
        .own-booking-card:disabled::after { content: none; }
        .own-booking-card-title {
            font-weight: 700;
            font-size: var(--bp-fs-body);
            line-height: 1.3;
        }
        .own-booking-card-price {
            color: var(--bp-green);
            font-size: var(--bp-fs-body);
            font-weight: 800;
            font-variant-numeric: tabular-nums;
            margin-top: 8px;
        }
        .own-booking-card:disabled .own-booking-card-price { color: #5c6884; }
        .own-booking-card-meta {
            font-size: var(--bp-fs-secondary);
            color: #94a3b8;
            line-height: 1.4;
            margin-top: 4px;
            overflow-wrap: anywhere;
            white-space: pre-line;
        }
        /* Плашка «подобрано под ваш фильтр» и вход в остальной прайс */
        .ob-filter-note {
            display: flex;
            /* По первой строке, а не по центру: длинная подпись переносится
               на две, и центрированный значок повисал между ними. */
            align-items: flex-start;
            gap: var(--bp-space-2);
            /* Плашка прижата к заголовку шага (он уже отбил 14px снизу) и
               отдаёт ступень 3 своему списку — она объясняет ЕГО. */
            margin: 0 0 var(--bp-space-3);
            padding: var(--bp-space-2) var(--bp-space-3);
            background: rgba(121, 172, 43, 0.1);
            border: 1px solid rgba(121, 172, 43, 0.3);
            border-radius: 12px;
            color: #cbd5e1;
            font-size: var(--bp-fs-secondary);
            line-height: 1.35;
        }
        .ob-filter-note i {
            color: var(--bp-green);
            font-size: var(--bp-fs-secondary);
            line-height: 1.35;  /* строка значка = строка текста рядом */
        }
        .ob-filter-note b { color: #fff; font-weight: 700; }
        .ob-rest-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--bp-space-2);
            width: 100%;
            padding: var(--bp-space-3);
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            color: #94a3b8;
            font-family: inherit;
            font-size: var(--bp-fs-secondary);
            font-weight: 600;
            cursor: pointer;
        }
        @media (hover: hover) and (pointer: fine) {
            .ob-rest-btn:hover {
                background: rgba(255, 255, 255, 0.07);
                color: #cbd5e1;
            }
        }

        .own-booking-cat {
            margin-bottom: 24px;
            animation: ob-rise .45s cubic-bezier(.22, 1, .36, 1) both;
        }
        /* Stagger by tag position: nth-of-type skips Alpine's <template>. */
        .own-booking-cat:nth-of-type(2) { animation-delay: .07s; }
        .own-booking-cat:nth-of-type(3) { animation-delay: .14s; }
        .own-booking-cat:nth-of-type(n+4) { animation-delay: .21s; }
        .own-booking-cat-title {
            display: flex;
            align-items: center;
            gap: 10px;
            font-family: var(--ff-mono);
            font-size: var(--bp-fs-micro);
            text-transform: uppercase;
            letter-spacing: 0.16em;
            color: #5c6884;
            margin: 4px 2px 12px;
            white-space: nowrap;
        }
        .own-booking-cat-title::after {
            content: "";
            flex: 1;
            height: 1px;
            background: linear-gradient(90deg, rgba(255, 255, 255, 0.12), transparent);
        }
        .own-booking-staff-card {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .own-booking-avatar {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
            border: 1.5px solid rgba(255, 255, 255, 0.14);
        }
        .own-booking-staff-info {
            flex: 1;
            min-width: 0;
        }
        .own-booking-staff-card .own-booking-card-badge {
            float: none;
            margin-left: auto;
            align-self: center;
        }
        .own-booking-card-badge {
            float: right;
            font-family: var(--ff-mono);
            font-size: var(--bp-fs-micro);
            text-transform: uppercase;
            letter-spacing: 0.08em;
            padding: 3px 8px;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, 0.14);
            background: rgba(255, 255, 255, 0.04);
            color: #748199;
        }
        .own-booking-back {
            display: block;
            width: 100%;
            margin-top: 12px;
            padding: 12px;
            background: transparent;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            color: #94a3b8;
            cursor: pointer;
            font-size: var(--bp-fs-secondary);
            text-align: center;
            transition: color .15s ease, background .15s ease, border-color .15s ease;
        }
        @media (hover: hover) and (pointer: fine) {
            .own-booking-back:hover {
                color: #fff;
                background: rgba(255, 255, 255, 0.06);
                border-color: rgba(255, 255, 255, 0.18);
            }
        }
        /* Confirm step — paper «booking slip», the brand artifact (parity
           with .qr-pass / bonuses receipt): grain texture, mono labels,
           dashed tear-off line before the total. Inside the paper, greens
           reset to canonical (the dark-mode override would be illegible)
           and color-scheme opts out of Android auto-dark inversion — both
           tricks documented on .qr-pass in _header_styles.html. */
        .own-booking-confirm-box {
            --bp-green: #5c8a1a;
            --bp-green-dark: #436513;
            color-scheme: light;
            position: relative;
            background: var(--bp-paper);
            color: var(--bp-ink);
            border-radius: 14px;
            padding: var(--bp-space-4) 18px;
            margin-bottom: 16px;
            box-shadow:
                0 24px 48px -24px rgba(0, 0, 0, 0.6),
                inset 0 0 0 1px rgba(23, 24, 26, 0.08);
            overflow: hidden;
            isolation: isolate;
            animation: ob-rise .45s cubic-bezier(.22, 1, .36, 1) both;
        }
        .own-booking-confirm-box::before {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            opacity: 0.5;
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.09  0 0 0 0 0.094  0 0 0 0 0.102  0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23p)'/></svg>");
            mix-blend-mode: multiply;
        }
        .own-booking-confirm-label {
            font-family: var(--ff-mono);
            font-size: var(--bp-fs-micro);
            text-transform: uppercase;
            letter-spacing: 0.16em;
            color: #94a3b8;
            margin-top: 12px;
        }
        .own-booking-confirm-label:first-child {
            margin-top: 0;
        }
        .own-booking-confirm-box .own-booking-confirm-label { color: var(--bp-muted); }
        .own-booking-confirm-value {
            color: #fff;
            font-weight: 700;
            font-size: var(--bp-fs-body);
            margin-top: 4px;
        }
        .own-booking-confirm-box .own-booking-confirm-value { color: var(--bp-ink); }
        .own-booking-confirm-price {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            margin-top: 16px;
            padding-top: 12px;
            border-top: 1px dashed var(--bp-line);
            font-family: var(--ff-display);
            font-weight: 800;
            font-size: var(--bp-fs-title);
            font-variant-numeric: tabular-nums;
            color: var(--bp-green-dark);
        }
        .own-booking-confirm-price::before {
            content: "Итого";
            font-family: var(--ff-mono);
            font-size: var(--bp-fs-micro);
            font-weight: 400;
            text-transform: uppercase;
            letter-spacing: 0.16em;
            color: var(--bp-muted);
        }
        /* Способы оплаты (баллы, абонемент, сертификат, карты) — свой файл
           `css/portal/pay-methods.css`: это отдельный орган управления, общий
           с другими экранами, и держать его вид посреди расписания незачем. */
        .own-booking-submit {
            width: 100%;
            height: 50px;
            padding: 0 14px;
            background: var(--bp-green);
            color: var(--bp-ink);
            border: none;
            border-radius: 14px;
            font-family: var(--ff-display);
            font-weight: 800;
            font-size: var(--bp-fs-body);
            cursor: pointer;
            box-shadow: 0 10px 26px -10px rgba(146, 196, 58, 0.6);
            transition: transform .12s ease, box-shadow .2s ease;
        }
        @media (hover: hover) and (pointer: fine) {
            .own-booking-submit:hover {
                box-shadow: 0 14px 30px -10px rgba(146, 196, 58, 0.7);
                transform: translateY(-1px);
            }
        }
        .own-booking-submit:active { transform: scale(0.97); }
        .own-booking-empty {
            color: #94a3b8;
            text-align: center;
            padding: var(--bp-space-8) 0;
        }
        .own-booking-spinner {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            /* Reserve real estate ≈ a short list of cards so the
               services↔spinner↔courts swaps don't jump the overlay. */
            min-height: 220px;
            text-align: center;
            padding: var(--bp-space-8) 20px;
            color: #94a3b8;
        }

        .vpn-warning {
            flex-shrink: 0;
            background: #f0ad4e;
            padding: var(--bp-space-3) 16px;
        }

        .vpn-warning-inner {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 420px;
            margin: 0 auto;
        }

        .vpn-warning span {
            font-size: var(--bp-fs-body);
            font-weight: 700;
            color: white;
            line-height: 1.3;
        }

        .vpn-warning button {
            background: rgba(0,0,0,0.2);
            border: none;
            border-radius: 50%;
            width: 36px;
            height: 36px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        @media (hover: hover) and (pointer: fine) {
            .vpn-warning button:hover {
                background: rgba(0,0,0,0.35);
            }
        }

        .booking-iframe-overlay iframe {
            flex: 1;
            width: 100%;
            border: none;
        }

        /* QR pass styles + modal markup live in _header_styles.html and
           _header_modals.html so /my-bookings and other portal pages can
           reuse the same canonical pass. */

        /* Полоса «поставьте приложение» — только Android (на iOS это делает
           нативный баннер Safari, см. book.html).

           Светлая и на самом верху документа СОЗНАТЕЛЬНО: портал тёмный, и
           тёмная полоса в нём читалась как ещё один рекламный блок — её
           пролистывали, не заметив. Здесь взят вид, который человек уже видел
           в Safari: белая плашка, иконка, название, строка про магазин и
           текстовая кнопка справа. Полоса НЕ липкая — уезжает со страницей,
           как нативная, а липкой остаётся шапка портала. */
        #app-install-banner {
            background: #f7f7f9;
            border-bottom: 1px solid #d3d3d8;
            padding: 8px 10px;
            /* Вырез камеры/челка: Chrome отдаёт её через safe-area, и без
               этого полоса уезжала бы под системную панель. */
            padding-top: calc(8px + env(safe-area-inset-top, 0px));
        }
        .app-banner-inner {
            max-width: 480px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .app-banner-close {
            background: none;
            border: none;
            color: #8a8a8e;
            font-size: var(--bp-fs-title);
            padding: 0 6px;
            cursor: pointer;
            line-height: 1;
            flex-shrink: 0;
        }
        .app-banner-icon {
            width: 56px;
            height: 56px;
            border-radius: 12px;
            flex-shrink: 0;
            box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
        }
        .app-banner-text {
            flex: 1;
            min-width: 0;
            line-height: 1.25;
        }
        .app-banner-title {
            color: #1c1c1e;
            font-size: var(--bp-fs-body);
            font-weight: 600;
        }
        .app-banner-subtitle {
            color: #6b6b70;
            font-size: var(--bp-fs-caption);
        }
        .app-banner-store {
            color: #8a8a8e;
            font-size: var(--bp-fs-micro);
            text-transform: uppercase;
            letter-spacing: .02em;
        }
        /* Кнопка текстовая, как в нативном баннере: заливка спорила бы с
           зелёными кнопками портала, которые означают действие с бронью. */
        .app-banner-cta {
            background: none;
            color: #0a72e8;
            padding: 6px 4px;
            font-size: var(--bp-fs-body);
            font-weight: 600;
            text-decoration: none;
            white-space: nowrap;
            flex-shrink: 0;
        }
        @media (hover: hover) and (pointer: fine) {
            .app-banner-cta:hover {
                color: #0a5ec0;
            }
        }

            .tcard{position:relative;border-radius:18px;overflow:hidden;background:#0e1726;
                border:1px solid rgba(148,163,184,.14);box-shadow:0 8px 24px rgba(0,0,0,.4);}
            /* No card hover-lift: the @media (hover:hover) guard still matched in the
               Capacitor WebView, so the lift stuck after a tap. Removed entirely —
               the static shadow is enough; a card is not a tap target anyway. */
            .tcard-hero{position:relative;height:172px;}
            .tcard-hero>img{width:100%;height:100%;object-fit:cover;display:block;}
            .tcard-hero::after{content:'';position:absolute;inset:0;
                background:linear-gradient(to top,rgba(8,14,24,.97) 4%,rgba(8,14,24,.55) 42%,rgba(8,14,24,.04) 100%);}
            .tcard-badge{position:absolute;top:13px;left:13px;z-index:2;display:inline-flex;align-items:center;
                gap:6px;padding:5px 11px;border-radius:999px;background:rgba(34,197,94,.16);
                border:1px solid rgba(52,211,99,.45);color:#5cf08a;font-size: var(--bp-fs-micro);font-weight:800;
                letter-spacing:.07em;text-transform:uppercase;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
            /* Полоса уровня — второй бейдж под «Турниром». Нейтральный, а не
               зелёный: зелёным на карточке помечено ДЕЙСТВИЕ (записаться), и
               второй зелёный ярлык спорил бы с ним за внимание. */
            .tcard-level{position:absolute;top:47px;left:13px;z-index:2;display:inline-flex;align-items:center;
                padding:4px 10px;border-radius:999px;background:rgba(8,14,24,.6);
                border:1px solid rgba(255,255,255,.22);color:#e2e8f0;font-size: var(--bp-fs-micro);font-weight:800;
                letter-spacing:.06em;text-transform:uppercase;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
            /* Заголовок дня витрины: якорь, по которому глаз находит субботу в
               сетке из десятков турниров. */
            .tday-label{color:#aeb9c8;font-size: var(--bp-fs-caption);font-weight:800;letter-spacing:.09em;
                text-transform:uppercase;padding-top:4px;}
            .tcard-datetile{position:absolute;top:12px;right:12px;z-index:3;width:78px;text-align:center;
                padding:9px 6px 8px;border-radius:14px;background:rgba(8,14,24,.6);
                border:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
                box-shadow:0 6px 16px rgba(0,0,0,.45);}
            .dt-wd{color:#5cf08a;font-size: var(--bp-fs-micro);font-weight:800;letter-spacing:.14em;text-transform:uppercase;}
            .dt-day{color:#fff;font-size: var(--bp-fs-display);font-weight:800;line-height:1;margin:2px 0 1px;letter-spacing:-.03em;}
            .dt-mon{color:#aeb9c8;font-size: var(--bp-fs-micro);font-weight:700;letter-spacing:.12em;text-transform:uppercase;}
            .dt-time{margin-top:7px;padding-top:6px;border-top:1px solid rgba(255,255,255,.15);color:#fff;
                font-size: var(--bp-fs-secondary);font-weight:800;font-variant-numeric:tabular-nums;display:flex;
                align-items:center;justify-content:center;gap:4px;}
            .dt-time .bi{color:#5cf08a;font-size: var(--bp-fs-micro);}
            .tcard-htext{position:absolute;left:16px;right:16px;bottom:13px;z-index:2;}
            .tcard-title{color:#fff;font-weight:800;font-size: var(--bp-fs-h2);line-height:1.18;letter-spacing:-.02em;
                text-shadow:0 1px 8px rgba(0,0,0,.5);
                /* Reserve the date-tile column (78px tile + gap, top-right) so a long
                   title never slides under it. Full text, no clamp: обрезка
                   многоточием запрещена правилами интерфейса. */
                padding-right:84px;overflow-wrap:anywhere;}
            .tcard-date{color:#dbe4ef;font-size: var(--bp-fs-secondary);margin-top:4px;display:flex;align-items:center;gap:6px;
                font-variant-numeric:tabular-nums;}
            .tcard-date .dot{opacity:.5;}
            .tcard-body{padding:var(--bp-space-4) 16px;}
            .tcard-desc{color:#cdd6e3;font-size: var(--bp-fs-secondary);line-height:1.5;margin-bottom:8px;white-space:pre-line;}
            .tcard-steps{color:#8c98a8;font-size: var(--bp-fs-secondary);line-height:1.55;margin-bottom:14px;white-space:pre-line;}
            .tcard-cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;
                border:0;border-radius:12px;background:linear-gradient(135deg,#34d369,#15a94d);color:#04210f;
                font-weight:800;font-size: var(--bp-fs-body);cursor:pointer;box-shadow:0 6px 18px rgba(34,197,94,.32);
                transition:filter .15s ease,transform .08s ease;}
            @media (hover:hover) and (pointer:fine){ .tcard-cta:hover{filter:brightness(1.07);} }
            .tcard-cta:active{transform:translateY(1px);}
            a.tcard-cta{text-decoration:none;box-sizing:border-box;}
            .tcard-cal{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:11px;
                margin-top:9px;cursor:pointer;background:transparent;border:1px solid rgba(148,163,184,.28);
                border-radius:12px;color:#cdd6e3;font-weight:600;font-size: var(--bp-fs-secondary);
                transition:background .15s ease,border-color .15s ease;}
            @media (hover:hover) and (pointer:fine){ .tcard-cal:hover{background:rgba(148,163,184,.09);border-color:rgba(148,163,184,.45);} }