/* ==========================================================================
   --- BLOK 02: REZERWACJA STOLIKA ---
   ========================================================================== */

.booking-section {
    padding: 40px 20px 0px 20px;
    background-color: #000000;
    width: 100%;
    box-sizing: border-box; /* ---> NAPRAWIONE: Dodano reset pudełkowy */
}

.booking-section h2 {
    font-family: 'Playfair Display', serif;
    color: #a4b2a4;
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 40px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Główny kontener centrujący */
.booking-section .contact-container {
    max-width: 1140px;
    margin: 0 auto;
    width: 100%; /* ---> NAPRAWIONE: Bezpieczeństwo szerokości */
    box-sizing: border-box;
}

/* Siatka pól sprawdzania dostępności */
.booking-checker-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    align-items: flex-end;
    margin-bottom: 30px;
    width: 100%; /* ---> NAPRAWIONE: Zabezpieczenie szerokości gridu */
    box-sizing: border-box;
}

/* Pojedyncza grupa wejściowa (Label + Input/Select) */
.booking-section .input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 0 1 260px; /* Stała szerokość pól na desktopie */
    box-sizing: border-box;
}

.booking-section .input-group.btn-placeholder {
    flex: 0 1 260px;
    box-sizing: border-box;
}

.booking-section label {
    font-family: 'Lora', serif;
    color: #cccccc;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Przyciski */

.btn-gold {
    background: #0a0f0f;
    color: #ffffff;
    border: 1px solid #a4b2a4;
    padding: 13px 20px;
    font-family: 'Lora', serif;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}

.btn-gold:hover {
    background: #a4b2a4;
    color: #000000;
}

/* Sekcja rozwijana z danymi użytkownika */
#booking-extended-fields {
    max-width: 820px;
    margin: 40px auto 0 auto;
    border-top: 1px solid rgba(164, 178, 164, 0.15);
    padding-top: 30px;
    width: 100%;
    box-sizing: border-box;
}

.success-alert {
    background-color: rgba(164, 178, 164, 0.1);
    border-left: 4px solid #a4b2a4;
    color: #ffffff;
    padding: 15px 20px;
    font-family: 'Lora', serif;
    margin-bottom: 30px;
    text-align: center;
}

.booking-user-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin-bottom: 30px;
    width: 100%;
    box-sizing: border-box;
}

.btn-final-book {
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    background: #a4b2a4;
    color: #000000;
    border: 1px solid #a4b2a4;
    padding: 15px 30px;
    font-family: 'Lora', serif;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.btn-final-book:hover {
    background: #000000;
    color: #ffffff;
}

.error-alert {
    background-color: rgba(214, 40, 40, 0.1);
    border-left: 4px solid #d62828;
    color: #ffffff;
    padding: 15px 20px;
    font-family: 'Lora', serif;
    margin-top: 20px;
    text-align: center;
}

/* Wyrównanie i margines checkboxa pod rezerwacją stolika */
.booking-rodo {
    max-width: 820px;
    margin: 0 auto 25px auto;
    padding: 0 10px;
    width: 100%;
    box-sizing: border-box;
}

/* ==========================================================================
   --- BLOK 03: FORMULARZ OGÓLNY ---
   ========================================================================== */
.general-msg-section {
    padding: 20px 20px 60px 20px;
    background-color: #000000;
    width: 100%;
    box-sizing: border-box;
}

.general-msg-section .contact-container {
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.btn-outline {
    background: transparent;
    color: #a4b2a4;
    border: 1px solid rgba(164, 178, 164, 0.4);
    padding: 15px 35px;
    font-family: 'Lora', serif;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.btn-outline:hover {
    border-color: #a4b2a4;
    color: #ffffff;
    background-color: #0a0f0f;
}

/* Ciemny Formularz */
.dark-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}

.dark-form .form-row {
    display: flex;
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
}

.dark-form .form-row .input-group {
    flex: 1; /* ---> NAPRAWIONE: Pola rosną po równo na PC bez konfliktu z width */
}

.dark-form .input-group {
    margin-bottom: 20px;
    width: 100%;
    box-sizing: border-box;
}

/* RODO Checkbox */
.rodo-wrapper {
    margin: 10px 0;
}

.rodo-checkbox {
    display: block;
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    font-family: 'Lora', serif;
    font-size: 0.88rem;
    color: #cccccc;
    line-height: 1.5;
    user-select: none;
}

.rodo-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: absolute;
    top: 2px;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #0a0f0f;
    border: 1px solid rgba(164, 178, 164, 0.3);
    transition: all 0.3s ease;
}

.rodo-checkbox:hover input ~ .checkmark {
    border-color: #a4b2a4;
}

.rodo-checkbox input:checked ~ .checkmark {
    background-color: #a4b2a4;
    border-color: #a4b2a4;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.rodo-checkbox input:checked ~ .checkmark:after {
    display: block;
}

.rodo-checkbox .checkmark:after {
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #000000;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.dark-form .btn-gold {
    align-self: center;
    max-width: 280px;
    margin-top: 10px;
}


/* Klasa błędu dodawana przez JS */
.rodo-checkbox.shake-error {
    animation: pulseError 0.5s ease-in-out;
}

@keyframes pulseError {
    0% { color: #cccccc; transform: translateX(0); }
    20% { color: #e65c5c; transform: translateX(-4px); }
    40% { color: #ff3b30; transform: translateX(4px); }
    60% { color: #e65c5c; transform: translateX(-4px); }
    80% { color: #ff3b30; transform: translateX(4px); }
    100% { color: #cccccc; transform: translateX(0); }
}

.rodo-checkbox.shake-error .checkmark {
    border-color: #ff3b30 !important;
    box-shadow: 0 0 10px rgba(255, 59, 48, 0.4);
}

/* ==========================================================================
   --- STYLIZACJA OKIENKA MODALNEGO (POPUP) ---
   ========================================================================== */
.privacy-link {
    color: #a4b2a4;
    text-decoration: underline;
    transition: color 0.3s ease;
}

.privacy-link:hover {
    color: #ffffff;
}

/* Wyrzucone do Stopka.css
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

.modal-content {
    background-color: #0a0f0f;
    border: 1px solid rgba(164, 178, 164, 0.3);
    max-width: 600px;
    width: 100%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    padding: 30px;
    box-sizing: border-box;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
}

.modal-content h3 {
    font-family: 'Playfair Display', serif;
    color: #a4b2a4;
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.6rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(164, 178, 164, 0.15);
    padding-bottom: 15px;
}

.modal-text {
    overflow-y: auto;
    padding-right: 15px;
    margin-bottom: 25px;
    text-align: left;
    font-family: 'Lora', serif;
    color: #cccccc;
    font-size: 0.95rem;
    line-height: 1.6;
}

.modal-text::-webkit-scrollbar { width: 6px; }
.modal-text::-webkit-scrollbar-track { background: #000000; }
.modal-text::-webkit-scrollbar-thumb { background: rgba(164, 178, 164, 0.3); }
.modal-text::-webkit-scrollbar-thumb:hover { background: #a4b2a4; }

.modal-text h4 { color: #ffffff; margin-top: 15px; margin-bottom: 5px; font-size: 1.05rem; }
.modal-text p { margin-top: 0; margin-bottom: 15px; }
.btn-close-modal { align-self: center; max-width: 200px; flex-shrink: 0; }
*/

/* ==========================================================================
   --- NAPRAWIONE I ZUNIFIKOWANE STYLE DLA POLA INPUT, TEXTAREA ORAZ SELECT ---
   ========================================================================== */

/* Stan domyślny */
#check-booking-form input,
#check-booking-form select,
#check-booking-form textarea,
.dark-form input,
.dark-form textarea,
.booking-user-grid textarea {
    background-color: #0a0f0f !important;
    border: 1px solid rgba(164, 178, 164, 0.25) !important;
    color: #ffffff !important;
    padding: 12px 15px !important;
    font-family: 'Lora', serif !important;
    font-size: 1rem !important;
    outline: none !important;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
    box-sizing: border-box !important;
    width: 100%; /* ---> NAPRAWIONE: Usunięto !important, który wymuszał 100% szerokości na PC w kontenerach flex */
}

#check-booking-form select optgroup { background-color: #000000; color: #a4b2a4; font-family: 'Playfair Display', serif; }
#check-booking-form select option { background-color: #0a0f0f; color: #ffffff; font-family: 'Lora', serif; }

#check-booking-form ::placeholder, .dark-form ::placeholder { color: rgba(255, 255, 255, 0.4) !important; opacity: 1 !important; }

/* Stan FOCUS */
#check-booking-form input:focus,
#check-booking-form select:focus,
#check-booking-form textarea:focus,
.dark-form input:focus,
.dark-form textarea:focus {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #a4b2a4 !important;
}

/* Stan po wpisaniu wartości */
#check-booking-form input[type="text"]:not(:placeholder-shown),
#check-booking-form input[type="tel"]:not(:placeholder-shown),
#check-booking-form input[type="number"]:not(:placeholder-shown),
#check-booking-form textarea:not(:placeholder-shown),
.dark-form input[type="text"]:not(:placeholder-shown),
.dark-form input[type="email"]:not(:placeholder-shown),
.dark-form textarea:not(:placeholder-shown) {
    background-color: #ffffff !important;
    color: #000000 !important;
}

#check-booking-form input[type="date"]:focus,
#check-booking-form input[type="date"]:active,
#check-booking-form select:focus,
#check-booking-form select:active,
#check-booking-form input[type="date"]:valid,
#check-booking-form select:valid {
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* Autofill */
#check-booking-form input:-webkit-autofill,
#check-booking-form input:-webkit-autofill:hover, 
#check-booking-form input:-webkit-autofill:focus,
.dark-form input:-webkit-autofill,
.dark-form input:-webkit-autofill:hover, 
.dark-form input:-webkit-autofill:focus {
    -webkit-text-fill-color: #000000 !important;
    box-shadow: 0 0 0px 1000px #ffffff inset !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

.booking-user-grid .input-group.full-width-input {
    flex: 0 1 100% !important;
    max-width: 100% !important;
}

/* Ikonka kalendarza */
#check-booking-form input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(68%) sepia(15%) saturate(341%) hue-rotate(63deg) brightness(90%) contrast(88%);
    cursor: pointer;
    transition: filter 0.3s ease;
}

#check-booking-form input[type="date"]:focus::-webkit-calendar-picker-indicator,
#check-booking-form input[type="date"]:valid::-webkit-calendar-picker-indicator {
    filter: invert(36%) sepia(10%) saturate(485%) hue-rotate(63deg) brightness(92%) contrast(86%);
}

/* ==========================================================================
   --- ZBUDOWANA OD NOWA I UPORZĄDKOWANA RESPONSYWNOŚĆ MOBILNA (POD 768px) ---
   ========================================================================== */
@media screen and (max-width: 768px) {
    
    .booking-section,
    .general-msg-section {
        padding-left: 15px !important;
        padding-right: 15px !important;
        overflow: hidden; /* ---> NAPRAWIONE: Dodatkowa blokada przed ucieczką w bok */
    }

    .booking-section h2 {
        font-size: 2rem;
    }

    /* Resety dla siatek rezerwacji */
    .booking-checker-grid, 
    .booking-user-grid {
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important;
        max-width: 100% !important;
    }

    .booking-section .input-group,
    .booking-section .input-group.btn-placeholder {
        flex: 0 0 100% !important;
        width: 100% !important;
    }

    /* Formularz ogólny */
    .dark-form .form-row {
        flex-direction: column !important;
        gap: 20px !important; /* ---> NAPRAWIONE: Przywrócono estetyczny odstęp pionowy */
    }

    .dark-form .form-row .input-group {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
    .dark-form .btn-gold {
        max-width: 100% !important;
    }
}