/* Frontend Styles */
.photo-booking {
    display: flex;
    flex-direction: row;
    background: #f7f3ed;
    font-family: 'Montserrat', Arial, sans-serif;
    color: #3a2b2b;
    border-radius: 8px;
    padding: 24px 16px;
    gap: 32px;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

@media (min-width: 1100px) {
    .photo-booking {
        max-width: var(--pb-width, 1200px);
    }
}
.room-tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 0;
    justify-content: flex-end;
    order: 2;
    flex-wrap: wrap;
}
.room-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 20px;
    font-size: 16px;
    font-family: 'Montserrat', Arial, sans-serif;
    border: 2px solid #6b1c27;
    background: #fff;
    color: #6b1c27;
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    box-shadow: none;
    min-width: fit-content;
    text-align: center;
    white-space: nowrap;
    line-height: 5px;
}
.room-tab.active, .room-tab:focus,
.room-tab:focus-visible,
.room-tab:active {
    background: #6b1c27;
    color: #fff;
    border-color: #6b1c27;
    border-width: 2px;
}
.room-tab:hover:not(.active) {
    background: #f7e7e7;
    color: #6b1c27;
    border-width: 2px;
}
.room-tab:focus,
.room-tab:focus-visible,
.room-tab:active {
    outline: none !important;
    box-shadow: none !important;
}
.booking-content {
    display: flex;
    gap: 32px;
    width: 100%;
}
.booking-calendar {
    flex: 1 1 65%;
    min-width: 0;
}
.calendar-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    gap: 16px;
    flex-wrap: wrap;
    padding-left: 0;
}
.calendar-navigation {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: nowrap;
    order: 1;
    justify-content: flex-start;
    margin-right: auto;
    margin-left: 0 !important;
}
.date-range {
    font-size: 22px;
    font-weight: 700;
    color: #3a2b2b;
    margin: 0;
    min-width: 180px;
    display: inline-block;
    text-align: left;
    white-space: nowrap;
    order: 2;
}
.prev-week, .next-week {
    background: none;
    border: none;
    color: #6b1c27;
    font-size: 32px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
    padding: 0;
    line-height: 1;
}
.prev-week {
    order: 1;
}
.next-week {
    order: 3;
}
.prev-week:hover, .next-week:hover {
    background: none;
    color: inherit;
}
.prev-week:focus, .next-week:focus {
    outline: none;
    box-shadow: none;
}
.prev-week.disabled, .next-week.disabled {
    color: #ccc;
    cursor: not-allowed;
}
.calendar-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size: 17px;
    table-layout: fixed;
    border: 1.5px solid #f7f3ed;
    font-weight: 500;
}
.calendar-table th, .calendar-table td {
    border: 1.5px solid #f7f3ed;
    text-align: center;
    padding: 10px 0;
    min-width: 80px;
    transition: background 0.2s, color 0.2s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 34px;
}
.calendar-table th {
    background: #f7f3ed;
    color: #6b1c27;
    font-weight: 700;
    font-size: 16px;
}
.calendar-table td:first-child {
    background: #f7f3ed;
    color: #6b1c27;
    font-weight: 700;
}
.calendar-table td.booked {
    background: #b3a89e;
    color: #fff;
    font-weight: 600;
    cursor: not-allowed;
}
.calendar-table td.selectable {
    background: #fff;
    color: #3a2b2b;
    cursor: pointer;
    border: 1.5px solid #f7f3ed;
}
/* Desktop-only hover effect */
@media (hover: hover) and (pointer: fine) {
  .calendar-table td.selectable:hover {
    background: #6b1c27;
    color: #fff;
  }
}
.calendar-table td.selected {
    background: #6b1c27;
    color: #fff;
    font-weight: 500;
    border: 1.5px solid #f7f3ed;
}
.calendar-table td.one-place {
    background: #fff7e6;
    color: #6b1c27;
    border: 2px dashed #6b1c27;
    font-weight: 600;
}
/* Легенда */
.calendar-legend {
    display: flex;
    gap: 32px;
    margin: 18px 0 0 0;
    align-items: center;
    font-size: 16px;
    justify-content: center;
    width: 100%;
}
.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.legend-box {
    width: 80px;
    height: 40px;
    border-radius: 6px;
    border: 2px solid #d1c7be;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 17px;
    font-family: 'Montserrat', Arial, sans-serif;
    text-align: center;
    box-sizing: border-box;
    padding: 0;
}
.legend-booked { background: #b3a89e; color: #fff; }
.legend-free { background: #fff; color: #3a2b2b; border: 2px solid #d1c7be; }
.legend-one { background: #fff7e6; color: #6b1c27; border: 2px dashed #6b1c27; }

/* Блок деталей бронювання */
.booking-details {
    flex: 1 1 35%;
    background: #f7f3ed;
    border-radius: 8px;
    padding: 10px 24px;
    min-width: 0;
    border: 1px solid #d1c7be;
    box-shadow: none;
    box-sizing: border-box;
    overflow: hidden;
}
.booking-details.expanded {
    height: auto !important;
    overflow: visible;
}
.booking-details input,
.booking-details select,
.booking-details textarea {
    max-width: 100%;
    box-sizing: border-box;
}
.booking-details h3,
.form-section-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #3a2b2b;
}
.details-content {
    margin-bottom: 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.detail-slot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #232323;
    color: #fff;
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
    gap: 10px;
}
.detail-slot.selected {
    background: #39393d;
}
.detail-slot.detail-empty {
    background: #b3a89e !important;
    color: #fff;
    justify-content: center;
    text-align: center;
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
}
.total-price-container {
    display: flex !important;
    align-items: baseline;
    gap: 5px;
    font-size: 22px;
    font-weight: 400;
    margin-bottom: 16px;
}
.total-label {
    white-space: nowrap;
}
.total-price {
    white-space: nowrap;
}
.total-price, .total-price.empty, .total-price.selected {
    text-align: left;
}
/* Форма бронювання */
.booking-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.form-field {
    margin-bottom: 8px;
}
.form-field label {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 1px;
    color: #3a2b2b;
}
.form-field input, .form-field select, .form-field textarea {
    width: 100%;
    padding: 6px 8px;
    border: 1.5px solid #d1c7be;
    border-radius: 6px;
    font-size: 16px;
    background: #f7f3ed;
    color: #3a2b2b;
    transition: border 0.2s;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
    border-color: #6b1c27;
    outline: none;
}
.form-field input::placeholder, .form-field textarea::placeholder {
    color: #999;
}
.submit-button, .booking-form button[type="submit"] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 20px;
    font-size: 16px;
    font-family: 'Montserrat', Arial, sans-serif;
    background: #6b1c27;
    color: #fff;
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    box-shadow: none;
    min-width: fit-content;
    text-align: center;
    white-space: nowrap;
    margin: 12px auto 0 auto;
    border: none;
    margin-bottom: 0;
}
.submit-button:disabled, .booking-form button[type="submit"]:disabled {
    background: #b3a89e;
    color: #fff;
    cursor: not-allowed;
    opacity: 0.7;
    border: none;
}
.submit-button:hover:not(:disabled), .booking-form button[type="submit"]:hover:not(:disabled) {
    background: #a11c2b;
    border: none;
}
/* Responsive */
@media (max-width: 1100px) {
    .booking-content { flex-direction: column; }
    .booking-calendar, .booking-details {
        min-width: unset;
        width: 100%;
        flex: 0 0 auto;
    }
}
@media (max-width: 700px) {
    .photo-booking {
        flex-direction: column;
        padding: 8px;
        width: 100%;
        max-width: 100% !important;
    }
    .booking-content { flex-direction: column; gap: 18px; }
    .calendar-table th, .calendar-table td {
        font-size: 13px;
        padding: 10px 0;
        height: 34px;
    }
    .booking-details { padding: 12px 18px; }
    .calendar-table td.selectable, .calendar-table td.selected {
        border: 1.5px solid #f7f3ed;
    }
    .legend-box {
        width: 60px;
        height: 28px;
        font-size: 13px;
    }
}
@media (max-width: 900px) {
    .calendar-top-row {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    .calendar-navigation {
        justify-content: center;
        order: 1;
        margin-left: auto !important;
        margin-right: auto;
    }
    .room-tabs {
        width: 100%;
        justify-content: center;
        gap: 8px;
        order: 2;
        margin-top: 8px;
    }
    .room-tab {
        height: 32px;
        padding: 0 16px;
        font-size: 14px;
        flex: 0 0 auto;
        line-height: 5px;
    }
    .date-range {
        font-size: 18px;
        min-width: 140px;
    }
    .prev-week, .next-week {
        width: 28px;
        height: 28px;
        font-size: 20px;
    }
    .submit-button, .booking-form button[type="submit"] {
        height: 48px;
        padding: 0 20px;
        font-size: 16px;
        margin: 12px auto 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
@media (hover: none) and (pointer: coarse) {
    .calendar-table td {
        transition: none !important;
    }
    .calendar-table td.selectable:hover {
        background: inherit !important;
        color: inherit !important;
    }
    .calendar-table td.selectable.selected:hover,
    .calendar-table td.selected:hover {
        background: #6b1c27 !important;
        color: #fff !important;
    }
}

/* Admin Styles */
#rooms-list input[type="text"],
#rooms-list select {
    width: 100%;
}
#rooms-list input[type="number"] {
    width: 80px;
}
#rooms-list input.price-input {
    width: 80px;
}
#form-fields input,
#form-fields select {
    width: 100%;
}
#form-fields input[type="number"] {
    width: 60px;
}
.photo-booking-settings-page input.hours-input,
.photo-booking-settings-page input.buffer-input {
    width: 60px;
}
#form-fields textarea {
    width: 100%;
    height: 100px;
}

.booking-details .form-field label {
    margin-bottom: 0;
}
.booking-details .form-field {
    margin-bottom: 2px;
}

input.is-empty {
  color: #b3a89e !important;
}

/* Стилі для кнопки відправки форми */
.submit-button {
    position: relative;
    min-height: 44px;
}

.submit-button .loading-spinner {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border: 2px solid #fff;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.submit-button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Terms Checkbox Styles */
.terms-checkbox-field {
    margin: 16px auto;
    display: flex;
    justify-content: center;
    width: 100%;
}

.terms-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 16px;
    color: #3a2b2b;
    justify-content: center;
}

.terms-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
    border: 2px solid #6b1c27;
    border-radius: 4px;
    background-color: #f7f3ed;
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    transition: border-color 0.2s;
}

.terms-label input[type="checkbox"]:checked {
    background-color: #f7f3ed;
    border-color: #6b1c27;
}

.terms-label input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 6px;
    height: 11px;
    border: solid #6b1c27;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -65%) rotate(45deg);
}

.terms-label input[type="checkbox"]:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(107, 28, 39, 0.2);
}

.terms-text {
    user-select: none;
    font-weight: 500;
}

.form-field input[type="tel"] {
    letter-spacing: 0.5px;
    font-family: 'Montserrat', Arial, sans-serif;
}

.form-field input[type="tel"].is-empty {
    color: #b3a89e;
    border-color: #d1c7be;
}

.form-field input[type="tel"]:focus {
    border-color: #6b1c27;
    color: #3a2b2b;
}

.price-loading-spinner {
    display: none;
}

/* Success Modal Styles */
.photo-booking-success-modal {
    display: none; /* Initially hidden */
    position: fixed; /* Stay in place */
    z-index: 999998; /* Sit on top - significantly increased z-index */
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin-top: 0 !important; /* Override inline style causing the gap */
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5); /* DIAGNOSTIC: Reverted from red !important */
    backdrop-filter: blur(5px); /* DIAGNOSTIC: Uncommented */
    -webkit-backdrop-filter: blur(5px); /* DIAGNOSTIC: Uncommented */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.photo-booking-success-modal.active {
    opacity: 1;
    visibility: visible;
}

.photo-booking-success-modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 25px 35px;
    border: 1px solid #888;
    width: 90%;
    max-width: 500px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    z-index: 999999; /* Ensure content is above the backdrop - significantly increased z-index */
    max-height: 85vh; /* Allow scrolling if content is too tall */
    overflow-y: auto;   /* Allow scrolling if content is too tall */
    box-sizing: border-box; /* Include padding in height calculation */
}

.photo-booking-success-modal-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #333;
}

.photo-booking-success-modal-message {
    font-size: 16px;
    color: #666;
    margin-bottom: 20px;
}

.photo-booking-success-modal-booking-id {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 20px;
    padding: 10px;
    background: #f5f5f5;
    border-radius: 5px;
    text-align: center;
}

.photo-booking-success-modal-details-title {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #4CAF50; /* Green line */
}

.photo-booking-success-modal-details {
    font-size: 16px;
    color: #333;
    margin-bottom: 25px;
    white-space: pre-line;
    line-height: 1.6;
    background: #f9f9f9;
    padding: 15px;
    border-radius: 5px;
    border: 1px solid #e0e0e0;
    font-weight: 600; /* Reverted to Bolder text, not a specific element yet */
}

/* Стиль для виділення дати в деталях бронювання */
.photo-booking-success-modal-details .booking-date-highlight {
    font-weight: 900; /* Make only the date even bolder (e.g., Black or Extra Bold) */
}

.photo-booking-success-modal-button {
    display: block;
    width: 100%;
    padding: 12px;
    background: #4CAF50; /* Green button */
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
}

.photo-booking-success-modal-button:hover {
    background: #45a049; /* Darker green on hover */
}

/* Style for body when modal is open */
body.modal-open {
    overflow: hidden;
}

/* Attempt to force admin bar below modal backdrop */
body.modal-open #wpadminbar {
    z-index: 999990 !important; /* Трохи нижче фону модального вікна */
}

/* Основний контейнер сайту */
body.modal-open .wp-site-blocks {
    position: relative !important; /* Гарантуємо позиціонування */
    z-index: 999980 !important; /* Найнижчий серед елементів сайту */
}

/* Контейнер хедера всередині .wp-site-blocks */
body.modal-open .wp-site-blocks > header.wp-block-template-part {
    position: relative !important; /* Гарантуємо позиціонування */
    z-index: 999981 !important; /* Трохи вище .wp-site-blocks */
    background: transparent !important; /* Робимо фон прозорим, щоб побачити, чи є щось під ним */
}

/* Внутрішній блок хедера (той, для якого ви надали стилі з position: relative) */
body.modal-open .wp-site-blocks > header.wp-block-template-part .wp-block-group.has-global-padding {
    position: relative !important; /* Гарантуємо позиціонування */
    z-index: 999982 !important; /* Трохи вище батьківського хедера */
    background: transparent !important; /* Робимо фон прозорим */
}

/* Ще один внутрішній блок хедера (з padding-top) */
body.modal-open .wp-site-blocks > header.wp-block-template-part .wp-block-group.alignwide {
    position: relative !important; /* Гарантуємо позиціонування */
    z-index: 999983 !important; /* Ще вище */
    background: transparent !important; /* Робимо фон прозорим */
}

/* 
   ДІАГНОСТИЧНИЙ КРОК: Якщо нічого не допомагає, спробуйте розкоментувати 
   наступне правило, щоб повністю приховати хедер, коли модальне вікно активне.
   Якщо смуга зникне, значить проблема точно в хедері або його дочірніх елементах.
   ЦЕЙ БЛОК ВИДАЛЯЄТЬСЯ, оскільки display:none не допомогло і ми повертаємо видимість хедеру.
*/
/*
body.modal-open .wp-site-blocks > header.wp-block-template-part {
    display: none !important; 
}
*/

@media (max-width: 700px) {
    .photo-booking-success-modal {
        align-items: flex-start; /* Align to top on mobile */
        padding-top: 0; /* Remove top padding */
        padding-bottom: 0; /* Remove bottom padding */
    }
    .photo-booking-success-modal-content {
        max-height: 100vh; /* Fill full available height */
        margin-top: 0;
        margin-bottom: 0;
        border-radius: 0; /* Optional: remove radius for full-height view */
    }
}

.photo-booking-conflict-modal {
    display: none; /* Initially hidden */
    position: fixed; /* Stay in place */
    z-index: 999998; /* Sit on top - significantly increased z-index */
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin-top: 0 !important; /* Override inline style causing the gap */
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent black backdrop */
    backdrop-filter: blur(5px); /* Blur effect for the background */
    -webkit-backdrop-filter: blur(5px); /* Safari compatibility */
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.photo-booking-conflict-modal.active {
    display: flex;
    opacity: 1;
    visibility: visible;
}

.photo-booking-conflict-modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 25px 35px;
    border: 1px solid #888;
    width: 90%;
    max-width: 500px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    z-index: 999999; /* Ensure content is above the backdrop */
    max-height: 85vh; /* Allow scrolling if content is too tall */
    overflow-y: auto;   /* Allow scrolling if content is too tall */
    box-sizing: border-box; /* Include padding in height calculation */
}

.photo-booking-conflict-modal-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #cc0000; /* Red color for error */
}

.photo-booking-conflict-modal-message {
    font-size: 16px;
    color: #666;
    margin-bottom: 20px;
}

.photo-booking-conflict-modal-details {
    font-size: 16px;
    color: #333;
    margin-bottom: 25px;
    white-space: pre-line;
    line-height: 1.6;
    background: #f9f9f9;
    padding: 15px;
    border-radius: 5px;
    border: 1px solid #e0e0e0;
    font-weight: 600;
    text-align: left;
    max-height: 200px;
    overflow-y: auto;
    padding-right: 10px;
}

.photo-booking-conflict-modal-button {
    display: block;
    width: 100%;
    margin-top: 20px;
    padding: 12px;
    background-color: #6b1c27;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: background-color 0.2s;
}

.photo-booking-conflict-modal-button:hover {
    background-color: #a11c2b;
}

/* Responsive styles for conflict modal */
@media (max-width: 700px) {
    .photo-booking-conflict-modal {
        align-items: flex-start; /* Align to top on mobile */
        padding-top: 0; /* Remove top padding */
        padding-bottom: 0; /* Remove bottom padding */
    }
    .photo-booking-conflict-modal-content {
        max-height: 100vh; /* Fill full available height */
        margin-top: 0;
        margin-bottom: 0;
        border-radius: 0; /* Optional: remove radius for full-height view */
    }
}