/* Форма бронирования NikaCars. * * Палитра взята с сайта: золото #d8b074, тёмные подложки #161616 / #222 / #2d2d2d. * Все классы в пространстве .booking__ — со старым CSS не пересекаются. * Календарь jQuery UI перекрашивается через .booking__calendar, чтобы не * трогать общий jquery-ui.css (его использует и админка). */ /* Переменные объявлены на :root, а не на .booking, намеренно. jQuery UI выносит #ui-datepicker-div в конец — вне .booking. Объявленные на .booking переменные там не видны, и правила с var() молча становятся невалидными: фон и цвет откатываются к унаследованным. */ :root { --bk-gold: #d8b074; --bk-gold-dim: rgba(216, 176, 116, .35); --bk-bg: #1c1c1c; --bk-bg-soft: #262626; --bk-line: #3a3a3a; --bk-text: #f0f0f0; --bk-muted: #9a9a9a; --bk-error: #e2564d; } .booking { background: var(--bk-bg); border: 1px solid var(--bk-line); border-radius: 6px; padding: 26px 24px 22px; margin-top: 18px; color: var(--bk-text); font-family: 'Open Sans', Arial, sans-serif; } .booking__title { margin: 0 0 18px; font-size: 22px; line-height: 1.2; color: #fff; } .booking__title:after { content: ''; display: block; width: 42px; height: 2px; margin-top: 10px; background: var(--bk-gold); } /* --- Поля --------------------------------------------------------------- */ .booking__field { margin-bottom: 15px; } .booking__field > label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--bk-muted); } .booking__req { color: var(--bk-gold); } .booking input[type='text'], .booking input[type='tel'], .booking input[type='number'] { width: 100%; height: 44px; padding: 0 13px; background: var(--bk-bg-soft); border: 1px solid var(--bk-line); border-radius: 4px; color: var(--bk-text); font-size: 15px; line-height: normal; box-shadow: none; transition: border-color .15s, box-shadow .15s; -webkit-appearance: none; appearance: none; } .booking input::placeholder { color: #6d6d6d; } .booking input:focus { outline: none; border-color: var(--bk-gold); box-shadow: 0 0 0 3px var(--bk-gold-dim); } .booking input.is-invalid { border-color: var(--bk-error); } .booking__date { cursor: pointer; background-image: none; } /* --- Дата и час выдачи ---------------------------------------------------- */ .booking__datetime { display: flex; gap: 8px; align-items: stretch; } .booking__datetime .booking__date { flex: 1 1 auto; min-width: 0; } .booking .booking__time { flex: 0 0 96px; height: 44px; padding: 0 8px; background: var(--bk-bg-soft); border: 1px solid var(--bk-line); border-radius: 4px; color: var(--bk-text); font-size: 15px; font-family: inherit; cursor: pointer; } .booking .booking__time:focus { outline: none; border-color: var(--bk-gold); box-shadow: 0 0 0 3px var(--bk-gold-dim); } .booking .booking__time option { background: #262626; color: var(--bk-text); } /* Подпись под полем — про фиксированный час возврата. */ .booking__note--inline { display: block; margin: 6px 0 0; font-size: 12px; color: #7a7a7a; } /* --- Плашка Telegram / Instagram ----------------------------------------- */ .booking__toggle { display: flex; gap: 0; margin-bottom: 7px; border: 1px solid var(--bk-line); border-radius: 4px; overflow: hidden; } .booking__toggle button { flex: 1 1 50%; padding: 7px 6px; background: transparent; border: none; color: var(--bk-muted); font-size: 12.5px; font-weight: 600; line-height: 1.2; cursor: pointer; transition: background .15s, color .15s; } .booking__toggle button + button { border-left: 1px solid var(--bk-line); } .booking__toggle button:hover { color: var(--bk-gold); } .booking__toggle button.is-active { background: var(--bk-gold); color: #1c1c1c; } /* --- Количество дней ---------------------------------------------------- */ /* Степпер и пресеты в одном блоке: −/поле/+ первой строкой, пресеты переносятся на всю ширину второй. */ .booking__days { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; } .booking__days input[type='number'] { /* width:auto и малый flex-basis обязательны: общее правило задаёт полям width:100%, и при flex-wrap поле занимало бы всю строку, выталкивая «−», «+» и пресеты каждый на свою. */ flex: 1 1 60px; width: auto; min-width: 0; text-align: center; font-weight: 600; -moz-appearance: textfield; } .booking__days input[type='number']::-webkit-outer-spin-button, .booking__days input[type='number']::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .booking__step { flex: 0 0 44px; height: 44px; background: var(--bk-bg-soft); border: 1px solid var(--bk-line); border-radius: 4px; color: var(--bk-gold); font-size: 20px; line-height: 1; cursor: pointer; transition: background .15s, border-color .15s; } .booking__step:hover { background: #303030; border-color: var(--bk-gold); } .booking__presets { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 1px; } .booking__presets button { flex: 1 1 auto; min-width: 42px; padding: 7px 4px; background: transparent; border: 1px solid var(--bk-line); border-radius: 4px; color: var(--bk-muted); font-size: 13px; cursor: pointer; transition: all .15s; } .booking__presets button:hover { border-color: var(--bk-gold); color: var(--bk-gold); } .booking__presets button.is-active { background: var(--bk-gold); border-color: var(--bk-gold); color: #1c1c1c; font-weight: 700; } /* --- Итог --------------------------------------------------------------- */ .booking__summary { margin: 18px 0; padding: 15px 16px; background: var(--bk-bg-soft); border: 1px solid var(--bk-line); border-left: 3px solid var(--bk-gold); border-radius: 4px; } .booking__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0; font-size: 14px; } .booking__row span:first-child { color: var(--bk-muted); } .booking__row--tier { padding-bottom: 10px; border-bottom: 1px solid var(--bk-line); font-size: 12px; color: var(--bk-muted); } .booking__row--tier span { color: var(--bk-muted) !important; } .booking__row--total { padding-top: 12px; font-size: 16px; } .booking__row--total strong { font-size: 26px; font-weight: 700; color: var(--bk-gold); white-space: nowrap; } .booking__row--deposit { font-size: 13px; } .booking__row--deposit small { color: #7a7a7a; } .booking__row--deposit strong { color: var(--bk-text); font-weight: 600; } /* --- Кнопка ------------------------------------------------------------- */ .booking__submit { position: relative; display: block; width: 100%; height: 50px; background: var(--bk-gold); border: none; border-radius: 4px; color: #191919; font-size: 15px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: filter .15s, opacity .15s; } .booking__submit:hover { filter: brightness(1.08); } .booking__submit:disabled { opacity: .6; cursor: default; } .booking__spinner { display: inline-block; width: 15px; height: 15px; margin-left: 9px; vertical-align: -2px; border: 2px solid rgba(25, 25, 25, .3); border-top-color: #191919; border-radius: 50%; animation: bk-spin .7s linear infinite; } @keyframes bk-spin { to { transform: rotate(360deg); } } .booking__note { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: #7a7a7a; } /* --- Ошибки ------------------------------------------------------------- */ .booking__error { display: none; margin-top: 5px; font-size: 12.5px; color: var(--bk-error); } .booking__error.is-visible { display: block; } .booking__error--form.is-visible { margin-bottom: 12px; padding: 9px 12px; background: rgba(226, 86, 77, .1); border-left: 3px solid var(--bk-error); border-radius: 3px; } /* Ловушка для ботов: убрана из потока, но не display:none — часть спам-скриптов такие поля пропускает. */ .booking__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } /* --- Успех -------------------------------------------------------------- */ .booking__done { text-align: center; padding: 22px 8px 12px; } .booking__done-icon { width: 54px; height: 54px; margin: 0 auto 16px; border: 2px solid var(--bk-gold); border-radius: 50%; color: var(--bk-gold); font-size: 27px; line-height: 50px; } .booking__done h3 { margin: 0 0 8px; color: #fff; font-size: 20px; } .booking__done p { margin: 0 0 6px; color: var(--bk-muted); font-size: 14px; } .booking__done-contact a { color: var(--bk-gold); font-weight: 600; } /* --- Календарь jQuery UI ------------------------------------------------ */ .ui-datepicker.booking__calendar { width: 290px; padding: 10px; background: #202020; border: 1px solid var(--bk-line); border-radius: 6px; box-shadow: 0 12px 34px rgba(0, 0, 0, .55); font-family: 'Open Sans', Arial, sans-serif; font-size: 14px; z-index: 1200 !important; /* поверх модалки карусели на странице авто */ } .booking__calendar .ui-datepicker-header { position: relative; padding: 4px 0 10px; background: transparent; border: none; color: #fff; } .booking__calendar .ui-datepicker-title { margin: 0 30px; text-align: center; font-weight: 600; line-height: 26px; } .booking__calendar .ui-datepicker-prev, .booking__calendar .ui-datepicker-next { top: 4px; width: 26px; height: 26px; background: var(--bk-bg-soft); border: 1px solid var(--bk-line); border-radius: 4px; cursor: pointer; } .booking__calendar .ui-datepicker-prev { left: 2px; } .booking__calendar .ui-datepicker-next { right: 2px; } .booking__calendar .ui-datepicker-prev:hover, .booking__calendar .ui-datepicker-next:hover { background: #333; border-color: var(--bk-gold); top: 4px; } /* Стрелки рисуем сами: спрайт темы jQuery UI на тёмном фоне не виден. */ .booking__calendar .ui-datepicker-prev span, .booking__calendar .ui-datepicker-next span { position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; margin: -4px 0 0 -4px; background: none; border-top: 2px solid var(--bk-gold); border-right: 2px solid var(--bk-gold); text-indent: -9999px; } .booking__calendar .ui-datepicker-prev span { transform: rotate(-135deg); margin-left: -2px; } .booking__calendar .ui-datepicker-next span { transform: rotate(45deg); margin-left: -5px; } .booking__calendar table { width: 100%; margin: 0; border-collapse: collapse; font-size: 13px; } .booking__calendar th { padding: 6px 0; color: var(--bk-muted); font-weight: 600; font-size: 11px; text-transform: uppercase; border: none; } .booking__calendar td { padding: 2px; border: none; background: transparent; } /* Тема jQuery UI красит дни правилом `.ui-widget-content .ui-state-default` (два класса). Селектор по тегу его не перебьёт ни при каком порядке подключения — поэтому здесь везде класс состояния плюс td. */ .booking__calendar td .ui-state-default { display: block; padding: 8px 0; background: var(--bk-bg-soft); border: 1px solid transparent; border-radius: 4px; color: var(--bk-text); font-weight: 400; text-align: center; text-decoration: none; opacity: 1; transition: background .12s, border-color .12s; } .booking__calendar td a.ui-state-default:hover, .booking__calendar td .ui-state-hover { background: #383838; border-color: var(--bk-gold); color: var(--bk-gold); } /* Недоступные даты (всё, что раньше сегодня) */ .booking__calendar .ui-state-disabled .ui-state-default, .booking__calendar .ui-datepicker-unselectable .ui-state-default { background: transparent; border-color: transparent; color: #4d4d4d; cursor: default; opacity: 1; } .booking__calendar .ui-datepicker-other-month .ui-state-default { background: transparent; border-color: transparent; color: #4d4d4d; } /* Занятые даты: перечёркнуты и заметно краснее, чем просто прошедшие дни, иначе «занято» и «уже прошло» выглядят одинаково. */ .booking__calendar td.booking__day--busy .ui-state-default { background: rgba(226, 86, 77, .12); border-color: rgba(226, 86, 77, .3); color: #b7554e; text-decoration: line-through; cursor: not-allowed; } .booking__calendar td .ui-state-highlight { /* сегодня */ background: var(--bk-bg-soft); border-color: var(--bk-gold-dim); color: var(--bk-gold); } /* Выбранная дата — последней, чтобы перекрыть «сегодня», когда это один день */ .booking__calendar td .ui-state-active { background: var(--bk-gold); border-color: var(--bk-gold); color: #1c1c1c; font-weight: 700; } .booking__calendar .ui-datepicker-header.ui-widget-header { background: transparent; border: none; color: #fff; font-weight: 600; } /* --- Десктоп ------------------------------------------------------------ На узком экране всё идёт одной колонкой (см. разметку). Начиная с 992px форма живёт в полноширинной полосе под галереей, поэтому поля раскладываются в сетку, а итог с кнопкой уходит вправо. Иначе форма вытягивается на километр вниз и рядом остаётся пустое место. */ @media (min-width: 992px) { .booking { padding: 30px 32px 26px; margin-top: 26px; } .booking__title { margin-bottom: 22px; font-size: 24px; } .booking__grid { display: grid; grid-template-columns: 1fr 300px; gap: 30px; align-items: start; } .booking__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 22px; } /* Дате с часом и полю срока нужна вся ширина: под ними подпись и пресеты. */ .booking__field--datetime { grid-column: 1 / -1; } .booking__field--days { grid-column: 1 / -1; } .booking__field { margin-bottom: 14px; } /* Правая колонка прижата к низу поля: итог оказывается на одной линии с последним рядом полей, а не висит сам по себе сверху. */ .booking__aside { display: flex; flex-direction: column; height: 100%; } .booking__summary { margin-top: 0; } .booking__note { margin-top: auto; padding-top: 12px; } } @media (min-width: 1200px) { .booking__grid { grid-template-columns: 1fr 320px; gap: 36px; } /* Три колонки: имя / телефон / телеграм, затем дата и срок. */ .booking__fields { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* На широком экране: дата с часом слева на две колонки, срок справа. */ .booking__field--datetime { grid-column: 1 / 3; } .booking__field--days { grid-column: 3 / -1; } .booking__presets button { min-width: 42px; padding: 7px 2px; } } /* --- Мобильные ---------------------------------------------------------- */ @media (max-width: 767px) { .booking { padding: 20px 16px 18px; } .booking__title { font-size: 19px; } .booking__row--total strong { font-size: 23px; } /* На узких экранах поля должны быть не меньше 16px, иначе iOS Safari зумит страницу при фокусе. Селект — тоже. */ .booking input[type='text'], .booking input[type='tel'], .booking input[type='number'], .booking .booking__time { font-size: 16px; } /* Часу нужно чуть меньше места, чтобы дате осталось на «дд.мм.гггг». */ .booking .booking__time { flex: 0 0 88px; padding: 0 4px; } .ui-datepicker.booking__calendar { width: 270px; } }