/*
 * Календарь бронирования -- версия под фирменный стиль SCREAM.BY (хоррор-
 * кинотеатр в Минске). Структура/разметка/функционал -- те же, что и на
 * quest-place.by (последняя версия модалки: подсказка про тариф, кнопки
 * "Забронировать"/"Отменить" 50/50 с иконками и т.д.).
 *
 * Из палитры перекрашены ТОЛЬКО: слоты времени в календаре (бирюзовый
 * #0f766e/#0c5c56 -- в тон активному меню/ссылкам на самом сайте scream.by)
 * и акцент даты (фирменный красный #c4162c). Кнопки подтверждения
 * ("Забронировать", "Подтвердить" на экране SMS-кода) остаются ЗЕЛЁНЫМИ
 * (#248F4E/#1F7A42) -- как и на исходной форме quest-place.by, специально
 * не перекрашивались.
 */

.qpnb-widget {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    color: #fff;
    font-family: inherit;
}

.qpnb-status {
    text-align: center;
    padding: 30px 20px;
}
.qpnb-status-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.qpnb-spinner {
    display: inline-block;
    position: relative;
    width: 34px;
    height: 34px;
}
.qpnb-spinner i {
    position: absolute;
    top: 0;
    left: 15px;
    width: 4px;
    height: 10px;
    border-radius: 2px;
    background: #fff;
    opacity: 0.15;
    transform-origin: 2px 17px;
    animation: qpnb-spoke-fade 1.1s linear infinite;
}
.qpnb-spinner i:nth-child(1)  { transform: rotate(0deg);   animation-delay: -1.008s; }
.qpnb-spinner i:nth-child(2)  { transform: rotate(30deg);  animation-delay: -0.916s; }
.qpnb-spinner i:nth-child(3)  { transform: rotate(60deg);  animation-delay: -0.825s; }
.qpnb-spinner i:nth-child(4)  { transform: rotate(90deg);  animation-delay: -0.733s; }
.qpnb-spinner i:nth-child(5)  { transform: rotate(120deg); animation-delay: -0.641s; }
.qpnb-spinner i:nth-child(6)  { transform: rotate(150deg); animation-delay: -0.55s; }
.qpnb-spinner i:nth-child(7)  { transform: rotate(180deg); animation-delay: -0.458s; }
.qpnb-spinner i:nth-child(8)  { transform: rotate(210deg); animation-delay: -0.366s; }
.qpnb-spinner i:nth-child(9)  { transform: rotate(240deg); animation-delay: -0.275s; }
.qpnb-spinner i:nth-child(10) { transform: rotate(270deg); animation-delay: -0.183s; }
.qpnb-spinner i:nth-child(11) { transform: rotate(300deg); animation-delay: -0.091s; }
.qpnb-spinner i:nth-child(12) { transform: rotate(330deg); animation-delay: 0s; }
@keyframes qpnb-spoke-fade {
    0%   { opacity: 1; }
    100% { opacity: 0.15; }
}

/* Уменьшенная версия — используется внутри модалки, пока грузится цена */
.qpnb-spinner-sm {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}
.qpnb-spinner-sm i {
    left: 7px;
    width: 2px;
    height: 5px;
    transform-origin: 1px 8px;
}

.qpnb-dots {
    display: inline-block;
    animation: qpnb-dots-fade 1s infinite;
}
@keyframes qpnb-dots-fade {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.3; }
}
.qpnb-status-error {
    color: #ffb3b3;
}

/* --- Навигация по неделям --- */
/* Перекрашено под новую шапку квеста (quest-place-headers): нейтральная
   "стеклянная" кнопка -- тот же приём, что и у .qph-btn--phone в шапке
   (полупрозрачный тёмный фон + тонкая рамка + блюр), а не сплошной
   бордовый фон, как раньше -- навигация по неделям не основное действие
   на странице, поэтому не должна визуально спорить с зелёными кнопками
   бронирования. */

.qpnb-nav {
    display: none;
    justify-content: center;
    gap: 12px;
    margin-bottom: 15px;
}
.qpnb-btn-nav {
    background: rgba(8, 8, 8, 0.55) !important;
    color: #c7c4bd !important;
    padding: 8px 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    outline: none !important;
    border-radius: 6px !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 17px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    -webkit-tap-highlight-color: transparent;
}
.qpnb-btn-nav:hover {
    background: rgba(8, 8, 8, 0.75) !important;
    color: #f5f3ee !important;
    border-color: rgba(45, 212, 191, 0.4) !important;
}
.qpnb-nav-arrow {
    display: block;
    flex-shrink: 0;
}
.qpnb-widget .qpnb-btn,
.qpnb-widget .qpnb-btn-nav {
    font-weight: normal !important;
}

/* --- Календарь: точная копия booking.css --- */

.qpnb-booking-day {
    margin: 0 auto 20px auto;
}
.qpnb-booking-day.qpnb-first-day {
    display: block;
    color: #000;
}
.qpnb-booking-date {
    display: inline-block;
    vertical-align: middle;
    min-width: 100px;
    color: #000;
}
.qpnb-booking-date p {
    font-size: 16px;
    font-weight: 600;
    text-align: left;
    margin: 0;
    line-height: 1.4;
    padding: 35px 0 0 10px;
    color: #fff;
}
.qpnb-booking-date span {
    color: #c4162c;
    font-weight: 600;
    display: block;
    font-size: 13px;
}
.qpnb-booking-time {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(74px, 100px));
    justify-content: center;
    gap: 20px;
    margin-left: 40px;
    margin-top: 20px;
    text-align: left;
    vertical-align: middle;
}

.qpnb-h-left { float: left; }

/* Слот времени в календаре -- бирюзовый, тот же акцент, что сайт сам
   использует для активного меню/выделенных ссылок (см. .qpnb-booking-date
   span и комментарий про scream.by в начале файла). Кнопки подтверждения
   ("Забронировать" и т.д.) при этом остаются зелёными -- см. .qpnb-btn-
   primary ниже, туда цвет намеренно не переносился. Скругление и общая
   геометрия слота не менялись. */
.qpnb-hour,
.qpnb-hour-inactive {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    text-align: center;
    border: 1px solid #0f766e;
    border-radius: 6px;
    box-sizing: border-box;
    padding: 0;
    min-width: 74px;
    background: #0f766e !important;
    font-family: inherit;
    outline: none;
    cursor: pointer;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    -webkit-transition: none;
    -o-transition: none;
    -moz-transition: none;
}
.qpnb-hour-time {
    color: #fff;
    font-size: 16px;
    line-height: 19px;
    font-weight: 700;
    padding: 7px 8px;
}
.qpnb-hour-price {
    color: rgba(255, 255, 255, 0.8);
    font-size: 11px;
    line-height: 14px;
    white-space: nowrap;
    padding: 6px 8px;
    /* Тот же оттенок, что и вся кнопка, просто чуть темнее -- отделяет
       цену от времени, не вводя новый цвет, который бы выбивался. */
    background: rgba(0, 0, 0, 0.18);
}
.qpnb-hour:hover {
    background: #0c5c56 !important;
    border: 1px solid #0c5c56 !important;
}
/* Занятые слоты -- та же "стеклянная" полупрозрачная плашка с блюром, что
   используется в шапке для тегов/бейджей (.qph-tag/.qph-chip) -- вместо
   сплошного серого, чтобы выглядело частью той же дизайн-системы, а не
   отдельным старым компонентом. */
.qpnb-hour-inactive {
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    background: rgba(8, 8, 8, 0.5) !important;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    cursor: default;
}
.qpnb-hour-inactive .qpnb-hour-time { color: #948f88; }
.qpnb-hour-inactive .qpnb-hour-price {
    color: rgba(148, 143, 136, 0.8);
    background: rgba(0, 0, 0, 0.2);
}

@media (max-width: 700px) {
    .qpnb-booking-date p { text-align: center; margin: 0; padding: 0; }
    .qpnb-booking-date { width: 100%; text-align: center; }
    .qpnb-booking-time {
        margin-left: 0;
        /* На мобильном возвращаем flex + центрирование -- Grid красиво
           заполняет ПОЛНЫЕ строки на десктопе, но неполную последнюю
           строку не центрирует (лишние колонки остаются пустыми справа),
           а flex+center как раз аккуратно центрирует "хвост" из 1-3
           кнопок в последней строке. */
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
}
@media screen and (max-width: 700px) {
    .qpnb-booking-time { text-align: center; }
}
@media (max-width: 420px) {
    /* На совсем узких экранах -- ровно 3 в ряд по ширине, чтобы кнопки не
       были слишком узкими для двухстрочного содержимого (время + цена). */
    .qpnb-booking-time { gap: 6px; }
    .qpnb-hour,
    .qpnb-hour-inactive {
        flex: 0 0 calc((100% - 12px) / 3);
    }
}

/* --- Модалка бронирования --- */

.qpnb-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.6);
    padding: 20px;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.qpnb-modal.qpnb-modal-visible {
    opacity: 1;
}
.qpnb-modal * { box-sizing: border-box; }

.qpnb-modal-inner {
    position: relative;
    background: #221f26 !important;
    color: #e9e6ef !important;
    border-radius: 12px;
    border: 2px solid #fff;
    max-width: 480px;
    width: 100%;
    max-height: 94vh;
    overflow-y: auto;
    padding: 22px 22px 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    transform: translateY(14px);
    transition: transform 0.2s ease;
}
.qpnb-modal.qpnb-modal-visible .qpnb-modal-inner {
    transform: translateY(0);
}
.qpnb-modal-close.qpnb-hidden {
    display: none;
}
.qpnb-modal-close {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 22px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}
.qpnb-modal-close:hover { color: #e9e6ef; }

.qpnb-modal-title {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 8px;
    font-size: 19px;
}
/* Шрифт строк даты и цены -- не меньше подписей полей формы (0.9rem у
   .qpnb-form label), чтобы не терялись визуально среди остального текста.
   Цена -- жирным, раньше её было плохо видно. */
.qpnb-modal-datetime {
    text-align: center;
    margin: 0 0 4px;
    font-size: 1rem;
}
.qpnb-modal-price {
    text-align: center;
    margin: 4px 0 14px;
    font-size: 1rem;
    font-weight: 700;
    min-height: 20px;
    color: #e9e6ef !important;
    background: #111111 !important;
    border: 1px solid #35313c;
    border-radius: 8px;
    padding: 10px 14px;
}
.qpnb-modal-price-main {
    font-size: 1.2rem;
}
.qpnb-modal-price-sub {
    display: inline-block;
    margin-top: 3px;
    font-size: 12px;
    font-weight: 400;
    color: #a29cae;
}
/* Короткая "вспышка" на строке цены при смене тарифа -- та же анимация,
   что и на quest-place.by (нейтральный жёлтый, не завязан на фирменные
   цвета сайта, просто привлекает внимание к изменившейся сумме). */
@keyframes qpnb-price-flash {
    0% { background-color: rgba(255, 209, 82, 0.45); }
    100% { background-color: transparent; }
}
.qpnb-price-flash {
    animation: qpnb-price-flash 0.7s ease-out;
}
.qpnb-modal-hint {
    text-align: center;
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.3;
    color: #c7c4bd;
}
.qpnb-form-main::before {
    content: '';
    display: block;
    height: 1px;
    background: #35313c;
    margin-bottom: 14px;
}

.qpnb-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.qpnb-row label {
    flex: 1 1 160px;
    min-width: 0;
}

.qpnb-form label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.9rem;
    max-width: 100%;
}
.qpnb-form input[type="text"],
.qpnb-form input[type="tel"],
.qpnb-form input[type="email"],
.qpnb-form select {
    display: block;
    width: 100%;
    min-height: 38px;
    margin-top: 4px;
    padding: 6px 10px;
    border: 1px solid #35313c;
    border-radius: 8px;
    background: #111111 !important;
    color: #e9e6ef !important;
    font-family: inherit;
    /* ДОБАВЛЕНО: 16px, не меньше -- если у поля ввода шрифт меньше 16px,
       Safari на iPhone САМ увеличивает страницу при нажатии на поле (это
       системное поведение iOS, не баг конкретно этого сайта). 16px --
       официально безопасный порог, ниже которого зум включается. */
    font-size: 16px;
    color-scheme: dark;
}
.qpnb-form input::placeholder { color: #a29cae; }

/* Явный шеврон у выпадающего списка -- чтобы было очевидно, что это
   список, а не обычное текстовое поле (та же логика, что и на
   quest-place.by). */
.qpnb-form select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    padding-right: 34px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a29cae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 18px !important;
    cursor: pointer;
}

.qpnb-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.85rem;
    line-height: 1.4;
    margin-bottom: 12px;
}
.qpnb-checkbox-label input { margin-top: 3px; flex: 0 0 auto; }
.qpnb-checkbox-label a { color: #ffcc00 !important; }

.qpnb-form-error {
    color: #ff8080;
    font-size: 13px;
    margin-bottom: 10px;
}
.qpnb-form-actions { display: flex; flex-wrap: nowrap; gap: 10px; }

.qpnb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    outline: none;
    border-radius: 8px;
    font-size: 14px !important;
    font-family: inherit !important;
    font-weight: normal !important;
    letter-spacing: normal !important;
    line-height: normal !important;
    text-transform: uppercase !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
/* Кнопки "Забронировать"/"Отменить" — ровно 50/50 по ширине, независимо от
   длины текста внутри каждой. */
.qpnb-btn-primary {
    background: #248F4E !important;
    color: #fff !important;
    padding: 14px 20px;
    font-size: 16px !important;
    width: 100%;
}
.qpnb-toggle-wrap {
    text-align: center;
    margin: 14px 0 18px;
}
.qpnb-toggle-btn {
    display: inline-block;
    width: auto;
    min-width: 260px;
    padding: 7px 32px;
    background: rgba(8, 8, 8, 0.55) !important;
    color: #c7c4bd !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.qpnb-toggle-btn:hover {
    background: rgba(8, 8, 8, 0.75) !important;
    color: #f5f3ee !important;
    border-color: rgba(45, 212, 191, 0.4) !important;
}
@media (max-width: 480px) {
    .qpnb-toggle-btn {
        width: calc(100% - 32px);
        margin-left: 16px;
        margin-right: 16px;
        padding: 11px 16px;
    }
}
.qpnb-btn-primary:hover,
.qpnb-btn-primary:focus { background: #1F7A42 !important; }
.qpnb-btn-primary:disabled { opacity: 0.6; cursor: default; }
.qpnb-btn-secondary {
    background: rgba(255,255,255,0.1);
    color: #e9e6ef;
    padding: 11px 20px;
    flex: 1 1 auto;
}
.qpnb-form-success {
    text-align: center;
    font-size: 16px;
    padding: 20px 0;
}

@media (max-width: 480px) {
    .qpnb-modal-inner { padding: 16px 16px; max-height: 96vh; }
    .qpnb-modal-title { margin: 0 0 4px; }
    .qpnb-modal-datetime { margin: 0 0 2px; }
    .qpnb-modal-hint { margin: 0 0 6px; }
    .qpnb-modal-price { margin: 4px 0 10px; padding: 8px 12px; }
    .qpnb-form-main::before { margin-bottom: 8px; }
    .qpnb-form label { margin-bottom: 6px; }
    .qpnb-checkbox-label { margin-bottom: 8px; }
    .qpnb-form-error { margin-bottom: 6px; }
    .qpnb-row { flex-direction: column; gap: 0; }
    .qpnb-row label { width: 100%; flex: 0 0 auto; }
}