/* Booking — Mobile Foundation (F523.W1) * * Глобальный responsive-слой «как приложение»: anti-zoom поля, touch-targets, * safe-area helper. Загружается ПОСЛЕДНИМ в → переопределяет точечно. * Канон: Apple HIG (44pt min touch), iOS 16px anti-zoom, Material 3 touch density. * * ⛔ Это НЕ компонентный дубль (booking-unified-wizard-canon) — это shared * utility-слой поверх существующих экранов. Никаких `*-mobile.js/.css` компонентов. * * Mobile-режим компонентов читает `html.is-mobile` (ставит boot-детект в * index.html) или `matchMedia` напрямую. * * F523.W4 — bottom-sheet для боковых шторок (ReservationDrawer + booking-wizard) * живёт ЗДЕСЬ (а не в их .css): это cross-component mobile-паттерн (DRY keyframe), * а оба компонентных файла уже у/за лимитом 250 строк. Десктоп не затронут. */ /* — Anti-zoom ────────────────────────────────────────────────────────────── iOS Safari авто-зумит страницу при фокусе на поле с font-size < 16px. Принудительно ≥16px на узких экранах (визуально крупнее — это требование iOS, не наш выбор). Чекбоксы/радио/range исключены (на них не влияет). */ @media (max-width: 768px) { input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px; } } /* — Touch targets ────────────────────────────────────────────────────────── Apple HIG / Material 3: минимум 44×44pt для пальца. Гейт по `hover:none` + `pointer:coarse` → на десктопе (мышь) НЕ применяется, плотность сохраняется. */ @media (hover: none) and (pointer: coarse) { button, .btn, .tab, .settings-subtab, a.btn, [role="button"] { min-height: 44px; } input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select { min-height: 44px; } } /* — Safe-area helper ─────────────────────────────────────────────────────── Отступ под notch / home-indicator. Используется bottom-sheet'ами F523.W4. Требует `viewport-fit=cover` в viewport-meta (выставлено в index.html). */ .safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); } .safe-top { padding-top: env(safe-area-inset-top, 0px); } /* — Bottom-sheet (F523.W4) ────────────────────────────────────────────────── На мобиле боковые шторки превращаются в нативный bottom-sheet: выезжают снизу, скруглены сверху, drag-handle над заголовком, кнопки действий ≥48px с отступом под home-indicator. Закрытие тапом по фону уже работает; свайп-вниз — W4b (тач). Гейт `html.is-mobile` → десктоп (мышь) не затронут. Канон: Apple sheet presentation, Material 3 bottom sheet, Cal.com mobile. */ @keyframes bk-sheet-rise { from { transform: translateY(100%); } to { transform: translateY(0); } } /* drag-handle над заголовком шторки (общий для обеих) */ html.is-mobile .reservation-drawer__header, html.is-mobile .bw-header { position: relative; padding-top: 22px; } html.is-mobile .reservation-drawer__header::before, html.is-mobile .bw-header::before { content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 38px; height: 4px; border-radius: 999px; background: #cbd5e1; pointer-events: none; } /* ---- ReservationDrawer (свой backdrop, без .show-механики → keyframe) ---- */ html.is-mobile .reservation-drawer-backdrop { justify-content: center; align-items: flex-end; } html.is-mobile .reservation-drawer { width: 100vw; height: auto; max-height: 90vh; border-radius: 18px 18px 0 0; box-shadow: 0 -10px 38px rgba(15, 23, 42, 0.24); animation: bk-sheet-rise 0.32s cubic-bezier(0.16, 1, 0.3, 1); } html.is-mobile .reservation-drawer__footer { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } html.is-mobile .reservation-drawer__footer .reservation-drawer__btn { flex: 1; min-height: 48px; } /* ---- booking-wizard (generic .drawer host → переопределяем translateX→translateY, анимация выезда снизу бесплатно через существующий transition при .show) ---- */ html.is-mobile #bookingWizard .dialog { top: auto; right: 0; left: 0; bottom: 0; width: 100%; max-width: 100%; height: auto; max-height: 92vh; border-left: none; border-radius: 18px 18px 0 0; box-shadow: 0 -10px 38px rgba(15, 23, 42, 0.24); transform: translateY(100%); transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1); } html.is-mobile #bookingWizard.show .dialog { transform: translateY(0); } html.is-mobile .bw-footer { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); } html.is-mobile .bw-footer .bw-btn { flex: 1; min-height: 48px; } /* ---- cv2DrawerHost (детали брони + day-sheet F523.W3) → bottom-sheet ---- Тот же приём что #bookingWizard: переопределяем translateX→translateY базового .drawer .dialog (calendar.css). drag-handle = sticky ::before (первый flex-child dialog'а: он display:flex column). Работает и для day-sheet, и для деталей брони. */ html.is-mobile #cv2DrawerHost .dialog { top: auto; right: 0; left: 0; bottom: 0; width: 100%; max-width: 100%; height: auto; max-height: 88vh; border-left: none; border-radius: 18px 18px 0 0; box-shadow: 0 -10px 38px rgba(15, 23, 42, 0.24); transform: translateY(100%); transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1); } html.is-mobile #cv2DrawerHost.show .dialog { transform: translateY(0); } html.is-mobile #cv2DrawerHost .dialog::before { content: ""; flex: 0 0 auto; align-self: center; width: 38px; height: 4px; margin: -4px 0 10px; border-radius: 999px; background: #cbd5e1; position: sticky; top: 0; } /* ---- F627: bk-drawer (DrawerShell namespace, F580.W4) → bottom-sheet на мобильном ---- Root-cause: F580.W4 переименовал панель .dialog→.bk-drawer, а mobile bottom-sheet остался на устаревшем `#cv2DrawerHost .dialog` → детали брони и ВСЕ DrawerShell-окна (пакеты, формы услуг/товаров) центрировались/не адаптировались под мобильный. Порт того же приёма на актуальный .bk-drawer namespace — покрывает все окна разом. */ html.is-mobile .bk-drawer-backdrop { align-items: flex-end; justify-content: center; } html.is-mobile .bk-drawer { width: 100%; max-width: 100%; height: auto; max-height: 92svh; border-left: none; border-radius: 18px 18px 0 0; box-shadow: 0 -10px 38px rgba(15, 23, 42, 0.24); } /* drag-handle (свайп-вниз закрывает — DrawerShell attachSheetSwipe уже подключён) */ html.is-mobile .bk-drawer__header { position: relative; padding-top: 20px; } html.is-mobile .bk-drawer__header::before { content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 38px; height: 4px; border-radius: 999px; background: var(--color-bg-hover, #cbd5e1); } /* sticky tab-bar (Чек/История не уезжают при скролле длинного чека) */ html.is-mobile .cv2-drawer-tabs { position: sticky; top: 0; z-index: 2; background: var(--color-bg); } /* footer: крупные кнопки в зоне большого пальца + safe-area */ html.is-mobile .bk-drawer__footer { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); } html.is-mobile .bk-drawer__footer > button, html.is-mobile .bk-drawer__footer .bk-drawer__btn { flex: 1; min-height: 46px; } /* ---- Mobile month-grid (F523.W3) — вертикальный календарь 7×N (Google Cal mobile) ---- */ .cv2-mgrid-wrap { padding: 8px 8px 16px; } .cv2-mgrid-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; } .cv2-mgrid-dowcell { text-align: center; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--color-text-muted, #64748b); padding: 4px 0; } .cv2-mgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .cv2-mgrid-cell { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 56px; padding: 6px 2px; border: 1px solid var(--color-border, #e2e8f0); border-radius: 10px; background: var(--color-bg, #fff); color: var(--color-text, #1a1d23); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.15s ease-out, border-color 0.15s ease-out; } .cv2-mgrid-cell:active { background: var(--brand-primary-soft, #eff4ff); } .cv2-mgrid-cell.is-outside { opacity: 0.45; } /* F586 — прошедший день приглушается (как is-outside). Клик не блокируем — day-sheet показывает брони прошлого дня (просмотр). */ .cv2-mgrid-cell.is-past { opacity: 0.5; } .cv2-mgrid-cell.is-today { border-color: var(--brand-primary, #2563eb); } .cv2-mgrid-cell.is-today .cv2-mgrid-num { background: var(--brand-primary, #2563eb); color: #fff; } .cv2-mgrid-num { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; border-radius: 999px; font-size: 13px; font-weight: 600; } .cv2-mgrid-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--brand-primary, #2563eb); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; } .cv2-mgrid-hint { margin-top: 12px; text-align: center; font-size: 12px; color: var(--color-text-muted, #64748b); } /* ---- Day-sheet (tap по дню → список броней + создать) ---- */ .cv2-daysheet { display: flex; flex-direction: column; gap: 12px; } .cv2-daysheet-title { margin: 0; font-size: 17px; font-weight: 700; color: var(--color-text, #1a1d23); } .cv2-daysheet-subtitle { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; color: var(--color-text-muted, #64748b); } .cv2-daysheet-list { display: flex; flex-direction: column; gap: 8px; } .cv2-daysheet-empty { padding: 20px 4px; text-align: center; font-size: 14px; color: var(--color-text-muted, #64748b); } .cv2-daysheet-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; border: 1px solid var(--color-border, #e2e8f0); border-radius: 12px; background: var(--color-bg, #fff); color: inherit; font: inherit; cursor: pointer; } .cv2-daysheet-item:active { background: var(--color-bg-muted, #f7f8fa); } .cv2-daysheet-dot { flex: 0 0 auto; width: 10px; height: 10px; margin-top: 5px; border-radius: 999px; } .cv2-daysheet-item-main { flex: 1; min-width: 0; } .cv2-daysheet-item-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cv2-daysheet-item-sub { margin-top: 2px; font-size: 12px; color: var(--color-text-muted, #64748b); } .cv2-daysheet-footer { margin-top: 4px; padding-top: 8px; } .cv2-daysheet-create { width: 100%; min-height: 48px; }