/* Покраска формы Bookly. * * ⚠️ Разметку этой формы мы не контролируем: её рисует плагин, и классы здесь * чужие. Два правила при правках: * * 1. Только внешний вид. Ничего, что меняет саму механику формы. * 2. Селекторы цепляем к .bookly-form, чтобы не покрасить заодно админку. * * ⚠️ Про !important. Его здесь много, и это не небрежность: bookly-main.css * ставит !important почти на каждое свойство формы — отступы, скругления, * кегль, цвет текста и кнопок. Наш файл грузится последним, но без !important * проигрывает по силе, а не по порядку. Проверено 20.09.2026: без него кнопка * оставалась прямоугольной 18px жирным, а поля — серыми 30px высотой. * * Помечены только те свойства, которые плагин действительно перебивает. * Добавлять !important «на всякий случай» не надо: чем их меньше, тем понятнее, * где у плагина жёсткое мнение, а где мы просто красим. * * Цвет --bookly-main-color в настройках плагина уже наш какао (#653F29), * поэтому подписи, которые Bookly красит сам, попадают в тон без правок. * * Календарь второго шага — компонент на Svelte с классами Tailwind, про него * отдельный разбор ниже. */ /* --- общий тон ----------------------------------------------------------- */ .bookly-form { font: var(--type-body); color: var(--espresso); } .bookly-form b, .bookly-form .bookly-bold { font-weight: var(--weight-emphasis); color: var(--cacao); } /* «Selecteer een service:» — подпись плагина над полями. В макете её нет, но и прятать чужой текст не стоит: на следующих шагах такие же строки объясняют, что делать. Просто даём ей воздух. */ .bookly-form .bookly-service-step > .bookly-bold { margin-bottom: var(--space-5); } /* --- что мы убираем со страницы ------------------------------------------ */ /* * Форма Bookly показывает на первом шаге пять полей: категория, услуга, * мастер, дата «начиная с», галочки дней недели и диапазон времени. Для студии * с одним мастером, одной категорией и агендой, которую открывают по дням, всё * кроме услуги — лишний выбор, который к тому же вводит в заблуждение: поле * «дата» принимает любой день, включая закрытый. * * Категория у нас одна («Behandelingen»), и при пустом значении список услуг и * так показывает все четыре — фильтровать нечего. Скрытое поле Bookly * заполняет сам, когда выбрана услуга. * * Штатной настройки скрыть их в этой версии нет — шаблон * frontend/modules/booking/templates/1_service.php рисует их безусловно. * Поэтому прячем стилями. Это безопасно: у всех четырёх значения по умолчанию * означают «не фильтровать» — мастер «любой», дата «сегодня», все рабочие дни * отмечены, диапазон времени полный. Скрытое поле остаётся в форме со своим * значением, и Bookly получает ровно то же, что получил бы без фильтров. * * ⚠️ Появится второй мастер — убрать первое правило, иначе выбрать, к кому * идёшь, будет нельзя. Появится вторая категория — убрать второе. */ .bookly-form .bookly-form-group[data-type="staff"], .bookly-form .bookly-form-group[data-type="category"], .bookly-form .bookly-js-available-date, .bookly-form .bookly-js-week-days, .bookly-form .bookly-js-time-range { display: none !important; } /* --- шаги ---------------------------------------------------------------- */ .bookly-form .bookly-progress-tracker div { font: var(--type-label); font-size: var(--size-caption); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--taupe); } .bookly-form .bookly-progress-tracker .active { color: var(--cacao); } .bookly-form .bookly-progress-tracker .step { background: var(--linnen-deep); height: 3px; border-radius: var(--radius-pill); } .bookly-form .bookly-progress-tracker .active .step { background: var(--cacao); } /* --- строка «Категория / Услуга» ----------------------------------------- */ /* * Bookly раскладывает эти поля настоящей таблицей (display: table у обёртки, * table-cell у групп). Таблица не переносится: на узком экране два поля * остаются в одной строке и сплющиваются. Переводим обёртку в сетку. * * Колонка ОДНА, и это посчитано, а не на глаз: самое длинное название услуги * («Brow Lift & Lash Lift + verven ( 1 uur )») занимает 265px. Карточка формы * отдаёт полям 504px, и в двух колонках по 242px на текст остаётся 178px — * клиентка выбирает услугу и перестаёт видеть, что выбрала. В одну колонку * помещается всё. Макету это не противоречит: там «Behandeling», «Datum» и * «Tijd» тоже идут полосами во всю ширину. * * ⚠️ display у самих групп здесь НЕ трогаем, и это важно. Правило на группу * оказалось бы сильнее правил «скрыть» выше — и вернуло бы на страницу и * мастера, и категорию. Ставить display не нужно: элемент сетки браузер и так * приводит к блочному, а table-cell внутри грида не выживает. */ .bookly-form .bookly-js-chain .bookly-table { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); width: 100% !important; } .bookly-form .bookly-js-chain .bookly-form-group { margin: 0 !important; min-width: 0; } .bookly-form .bookly-js-chain .bookly-form-group > label { margin: 0 0 var(--space-2) !important; } /* --- подписи и поля ------------------------------------------------------ */ /* * Подписи набраны как Label из макета: разрядка, капитель, какао. Тот же тон * Bookly ставит и сам (--bookly-main-color), но объявляем явно — иначе файл * врёт про то, что рисует. */ .bookly-form label, .bookly-form .bookly-label, .bookly-form .bookly-form-group > label { font-family: var(--font-text) !important; font-size: var(--size-label) !important; font-weight: var(--weight-label) !important; line-height: 1.2; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--cacao) !important; margin: 0 !important; display: block; } /* * Поля-«таблетки». * * ⚠️ :not(.iti__search-input) здесь не ради поиска по странам, а ради веса: * у Bookly стоит `padding-left: 7px !important` селектором с собственным * :not(), и без этого довеска имя и почта прижимались к самому краю таблетки. * Заодно поле поиска в списке стран остаётся своим, плагиновым. * * Кегль ровно 16px и не меньше: на iOS поле мельче шестнадцати * заставляет браузер зумить страницу при фокусе, и клиентка после выбора услуги * оказывается на увеличенной странице. Высота 48px — та же, что у кнопок-чипов * в макете, под палец. */ .bookly-form select, .bookly-form input[type="text"]:not(.iti__search-input), .bookly-form input[type="email"]:not(.iti__search-input), .bookly-form input[type="tel"]:not(.iti__search-input), .bookly-form input[type="number"]:not(.iti__search-input), .bookly-form textarea { width: 100%; min-height: 48px; font-family: var(--font-text) !important; font-size: var(--size-body) !important; font-weight: var(--weight-text); line-height: var(--leading-body) !important; color: var(--espresso) !important; background-color: var(--ivoor); border: 1px solid var(--line-hairline) !important; border-radius: var(--radius-pill) !important; padding: 12px 20px !important; transition: var(--transition-hover); appearance: none; -webkit-appearance: none; } /* Своя стрелка вместо системной: системная в каждом браузере своя и всегда немного чужая рядом с остальной вёрсткой. Рисуется фоном, поэтому выше задан background-color, а не сокращённый background — иначе стрелку стёрло бы заливкой. */ .bookly-form select { padding-right: 44px !important; background-image: linear-gradient(45deg, transparent 50%, var(--taupe) 50%), linear-gradient(135deg, var(--taupe) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; cursor: pointer; } .bookly-form textarea { border-radius: var(--radius-md) !important; padding: 14px 20px !important; } .bookly-form select:hover { border-color: var(--taupe) !important; } .bookly-form select:focus, .bookly-form input:focus, .bookly-form textarea:focus { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-color: var(--cacao) !important; } .bookly-form .bookly-form-group { margin-bottom: var(--space-6); } /* * Поле телефона. Слева в нём сидит выбор страны (intlTelInput) — блок в 48px, * позиционированный абсолютно. Наш общий отступ в 20px его не учитывал, и * флаг наезжал на первые цифры номера. */ .bookly-form .iti input[type="tel"] { padding-left: 56px !important; } /* --- кнопки -------------------------------------------------------------- */ /* * Компонент Button из макета, вид solid, размер md. Bookly держит свою кнопку * жёстко: прямоугольник 4px, кегль 18px жирным, белый текст — и всё это через * !important, включая отдельное правило на внутренний span с подписью. * Поэтому span заставляем наследовать от кнопки, а саму кнопку описываем один * раз. */ .bookly-form .bookly-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-width: 0; width: auto; font-family: var(--font-text) !important; font-size: var(--size-label) !important; font-weight: var(--weight-label) !important; line-height: 1.2 !important; letter-spacing: var(--tracking-label) !important; text-transform: uppercase !important; padding: 14px 26px !important; border: 1px solid transparent !important; border-radius: var(--radius-pill) !important; background: var(--action-bg); color: var(--action-fg) !important; box-shadow: none !important; cursor: pointer; transition: var(--transition-hover), transform var(--dur-quick) var(--ease-standard); } /* Подпись внутри кнопки (ladda оборачивает её в span) — целиком от кнопки. */ .bookly-form .bookly-btn > span { color: inherit !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; text-transform: inherit !important; letter-spacing: inherit; } .bookly-form .bookly-btn:hover { background: var(--action-bg-hover); } .bookly-form .bookly-btn:active { transform: scale(var(--press-scale)); } .bookly-form .bookly-btn[disabled], .bookly-form .bookly-btn:disabled { opacity: .45; cursor: default; transform: none; } /* * Кнопка «назад» — вид quiet. Идёт ПОСЛЕ общего правила: сила у селекторов * одинаковая, решает порядок. * * ⚠️ Поэтому у правила выше один селектор, а не два. Пока там стояло ещё и * `.bookly-form button.bookly-btn`, оно било это по силе (тег плюс два * класса против двух классов) — и «Terug» рисовалась белым по прозрачному, * то есть не рисовалась вовсе. Поймано 20.09.2026. */ .bookly-form .bookly-back-step, .bookly-form .bookly-js-back-step, .bookly-form .bookly-js-mobile-prev-step { background: transparent !important; color: var(--cacao) !important; border-color: var(--action-quiet-border) !important; } .bookly-form .bookly-back-step:hover, .bookly-form .bookly-js-back-step:hover, .bookly-form .bookly-js-mobile-prev-step:hover { background: var(--linnen) !important; } /* * Ряд с кнопками: отбит от полей, кнопки не липнут друг к другу. Серую линию * плагина меняем на нашу волосяную. */ .bookly-form .bookly-nav-steps { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; border-top: 1px solid var(--line-hairline) !important; padding-top: var(--space-6); margin-top: var(--space-6); } /* * Пустая полоса с линией на первом шаге. * * Bookly держит два ряда кнопок: обычный и запасной — для телефона, где форма * разбита на два экрана. Лишний ряд плагин прячет САМ: * `.bookly-mobile-step-1 .bookly-nav-steps { display: none }`, а ниже 650px * возвращает и показывает мобильную кнопку. * * Правило выше со своим `display: flex` это перебивало — ряд вылезал на * широком экране серой чертой поперёк карточки. Возвращаем поведение плагина * на его же границе. * * ⚠️ Тут стоял костыль: ряд прятался по отсутствию кнопки без класса * `bookly-none`. На телефоне Bookly этот класс ОСТАВЛЯЕТ, а кнопку показывает * медиазапросом — и костыль прятал ряд вместе с единственной кнопкой * «Volgende». С телефона нельзя было записаться. Поймано 20.09.2026, нашёл * Александр. Селекторами по классам состояние видимости не проверяется. */ @media (min-width: 651px) { .bookly-form .bookly-mobile-step-1 .bookly-nav-steps { display: none; } } /* * На телефоне отменяем само разбиение первого шага на два экрана. * * Оно у Bookly существует ради фильтров: на первом экране услуга, на втором * дата «начиная с», галочки дней недели и диапазон времени. Все четыре мы * убрали выше — и второй экран остался пустым. Человек выбирал услугу, жал * «Volgende» и попадал на пустую карточку с «Terug» и «Volgende», где надо * было нажать ещё раз. * * Показываем оба экрана разом, как на широком, и прячем мобильный ряд кнопок: * работает настоящая «Volgende» из второго. !important обязателен — состояние * экранов Bookly переключает инлайновым style, а инлайн бьётся только им. */ @media (max-width: 650px) { .bookly-form .bookly-mobile-step-1, .bookly-form .bookly-mobile-step-2 { display: block !important; } .bookly-form .bookly-mobile-step-1 .bookly-nav-steps { display: none !important; } /* Кнопки самого разбиения. Плагин ниже 650px показывает их принудительно; без разбиения «Terug» на первом экране возвращать некуда. */ .bookly-form .bookly-mobile-prev-step, .bookly-form .bookly-mobile-next-step { display: none !important; } } /* --- календарь второго шага ---------------------------------------------- */ /* * Календарь и время идут друг под другом, а не рядом. * * Bookly пускает календарь `float: left` на 340px и отдаёт времени остаток * ширины. В нашей карточке остаток — 127px, а колонка со слотами у плагина * фиксированные 140px: она вылезала за край и обрезалась (`overflow: hidden` * у .bookly-time-step). Снимаем обтекание — время получает всю ширину, и * колонок помещается несколько, по дню в каждой. * * Макету это не противоречит: там «Datum» и «Tijd» — тоже две полосы одна под * другой, а не два столбца. */ .bookly-form .bookly-slot-calendar { float: none !important; width: 100% !important; max-width: 340px; margin: 0 0 var(--space-8) !important; } /* Карточка календаря: наша рамка вместо серой тайлвиндовой. */ .bookly-form .bookly-slot-calendar > div { background: var(--ivoor) !important; border-color: var(--line-hairline) !important; border-radius: var(--radius-md) !important; padding: var(--space-3) !important; } /* Шапка с месяцем и стрелками */ .bookly-form .bookly-calendar-controls-mark { border-color: var(--line-hairline) !important; padding-bottom: var(--space-2) !important; margin-bottom: var(--space-2) !important; } .bookly-form .bookly-calendar-middle-button-mark { font: var(--type-body); color: var(--cacao) !important; text-transform: capitalize; } .bookly-form .bookly-calendar-left-button-mark, .bookly-form .bookly-calendar-right-button-mark { color: var(--taupe) !important; border-radius: var(--radius-pill) !important; } .bookly-form .bookly-calendar-left-button-mark:hover, .bookly-form .bookly-calendar-right-button-mark:hover { background: var(--linnen) !important; color: var(--cacao) !important; } /* * День, который выбрать НЕЛЬЗЯ. * * Именно из-за него календарь выглядел так, будто кликнуть можно куда угодно: * Bookly красит такие дни серым фоном, но оставляет коричневый текст, курсор * «палец» и эффект при наведении. Убираем всё три признака кликабельности. */ .bookly-form .bookly-slot-calendar [class~="bookly:bg-slate-100"] { background: transparent !important; color: var(--taupe-soft) !important; cursor: default !important; pointer-events: none; opacity: .55; } /* * День, который выбрать МОЖНО. * * ⚠️ Из правила ЯВНО исключён выбранный день. Без этого исключения оно * специфичнее правила для выбранного дня и перекрашивало его текст в какао * поверх какао-фона: кружок есть, числа не видно. Поймано 20.09.2026. Читается первым: цвет какао, точка под числом * и заметная рамка при наведении. */ .bookly-form .bookly-slot-calendar .bookly-calendar-current-month-mark:not([class~="bookly:bg-slate-100"]):not([class~="bg-bookly"]) { position: relative; color: var(--cacao) !important; font-weight: var(--weight-emphasis); border-radius: var(--radius-pill) !important; } .bookly-form .bookly-slot-calendar .bookly-calendar-current-month-mark:not([class~="bookly:bg-slate-100"]):not([class~="bg-bookly"])::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; } .bookly-form .bookly-slot-calendar .bookly-calendar-current-month-mark:not([class~="bookly:bg-slate-100"]):not([class~="bg-bookly"]):hover { background: var(--linnen) !important; color: var(--cacao) !important; } /* Выбранный день. * * Класс здесь без приставки — `bg-bookly`, в отличие от соседних утилит. * Это не опечатка, так его выводит плагин. */ .bookly-form .bookly-slot-calendar [class~="bg-bookly"] { background: var(--cacao) !important; color: var(--ivoor) !important; border-radius: var(--radius-pill) !important; } .bookly-form .bookly-slot-calendar [class~="bg-bookly"]::after { background: var(--ivoor); } /* --- слоты времени ------------------------------------------------------- */ /* * ⚠️ Ширину колонки со временем Bookly ставит ИНЛАЙНОМ: его скрипт считает её * как «ширина формы минус плавающий календарь» и записывает в style. Мы * обтекание сняли, но число осталось — 127px, и в нём колонка фиксированных * 140px не помещалась. Инлайн перебивается только !important, отсюда они здесь. * Высота обёртки — оттуда же: скрипт записывает высоту столбика из 17 кнопок, * и без сброса под строкой чипов оставалось бы 800px пустоты. */ .bookly-form .bookly-time-step { width: 100% !important; } .bookly-form .bookly-columnizer-wrap { height: auto !important; } .bookly-form .bookly-time-screen, .bookly-form .bookly-column { width: 100% !important; } /* * Время — строкой чипов с переносом, как в макете, а не столбиком в 140px. * Столбик из семнадцати кнопок занимал почти тысячу пикселей высоты. * * Так можно, потому что колонка здесь ВСЕГДА одна: день выбирают календарём, * и Bookly рисует слоты только выбранного дня. Появится вторая колонка — * это правило придётся пересмотреть. */ .bookly-form .bookly-column { display: flex; flex-wrap: wrap; gap: var(--space-3); align-content: start; } /* width: auto перебивает `width: 100%` самого плагина — без него чипы растягиваются на всю строку и переноса не происходит. */ .bookly-form .bookly-hour { flex: 0 0 auto; width: auto !important; min-width: 0 !important; margin: 0 !important; } /* Заголовок дня над слотами — своей строкой. Класс у него в разных местах формы разный, отсюда два селектора. */ .bookly-form .bookly-column-title, .bookly-form .bookly-day { flex: 1 0 100%; display: block; font: var(--type-label); font-size: var(--size-caption) !important; font-weight: var(--weight-label) !important; letter-spacing: var(--tracking-label); text-transform: uppercase; background: var(--cacao) !important; color: var(--ivoor) !important; border: 0 !important; border-radius: var(--radius-pill) !important; padding: 10px 16px !important; margin: 0 0 var(--space-2) !important; text-align: left; cursor: default; } .bookly-form .bookly-hour, .bookly-form .bookly-time-step .bookly-hour { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 18px !important; font: var(--type-body); font-size: var(--size-body) !important; color: var(--cacao) !important; background: var(--ivoor); border: 1px solid var(--line-hairline) !important; border-radius: var(--radius-pill) !important; transition: var(--transition-hover); } /* Пустой кружок слева от времени. В макете чип со временем — это только время; кружок у Bookly декоративный и читается как несработавшая радиокнопка. */ .bookly-form .bookly-hour .bookly-hour-icon { display: none !important; } .bookly-form .bookly-hour:hover { background: var(--linnen); border-color: var(--taupe); } /* --- сообщения ----------------------------------------------------------- */ /* «Нет свободного времени» — у нас штатная ситуация, пока агенда на следующий период не открыта. Подпись над формой это объясняет, поэтому тон спокойный, без красного. */ .bookly-form .bookly-js-no-slots { font: var(--type-body); color: var(--taupe); background: var(--linnen); border-radius: var(--radius-md); padding: var(--space-4) var(--space-6); } /* * Сообщение об ошибке под полем — обычная строка, а не плашка. * * Плашкой оно и было, и выходило плохо дважды. Заполненные: у трёх полей в * ряд текст переносится по-разному, и плашки получались разной высоты — ряд * разъезжался. Пустые: Bookly держит эти блоки под каждым полем всегда, и * заливка с отступами превращала их в три бежевых прямоугольника, будто форма * уже на что-то ругается. * * Без заливки и отступов пустой блок не занимает ничего сам по себе. Правило * на :empty ниже — подстраховка на случай, если плагин оставит в нём пробел. * * Красного в палитре нет, поэтому ошибка выделяется весом, а не цветом; поле * при этом получает какао-рамку, так что сигнал не только в тексте. */ .bookly-form .bookly-label-error { display: block; margin-top: var(--space-2); padding: 0 20px; font: var(--type-body-sm); font-weight: var(--weight-emphasis); color: var(--cacao); background: none; border-radius: 0; } .bookly-form .bookly-label-error:empty { display: none !important; } .bookly-form input.bookly-error, .bookly-form select.bookly-error, .bookly-form textarea.bookly-error { border-color: var(--cacao) !important; } /* --- купон на шаге оплаты ------------------------------------------------ */ /* * Ряд купона: подпись сверху, поле и «Toepassen» под ней одним рядом. * * Bookly кладёт всё это в один `.bookly-list` строкой: подпись там голый * текст, а не