/*==================================================
                BOOKING PAGE STYLING
==================================================*/

.booking-section {

    padding:120px 0 80px;

    max-width:1240px;

    width:92%;

    margin:0 auto;

}


/*==================================================
                PAGE HEADER (CLEAN & COMPACT)
==================================================*/

.page-header {

    text-align:center;

    margin-bottom:44px;

}


.page-badge {

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 18px;

    background:rgba(214,40,40,0.12);

    border:1px solid rgba(214,40,40,0.3);

    border-radius:30px;

    color:var(--accent-light, #ff595e);

    font-size:13px;

    font-weight:700;

    letter-spacing:0.5px;

    text-transform:uppercase;

    margin-bottom:14px;

}


.page-badge i {

    font-size:13px;

}


.page-title {

    font-size:36px;

    font-weight:800;

    color:#ffffff;

    margin:0 0 10px 0;

    letter-spacing:-0.5px;

}


.page-subtitle {

    color:#b5b5b5;

    font-size:15.5px;

    max-width:620px;

    margin:0 auto;

    line-height:1.7;

}


/*==================================================
                BOOKING LAYOUT
==================================================*/

.booking-layout {

    display:grid;

    grid-template-columns:1.25fr 0.85fr;

    gap:32px;

    align-items:start;

}


/* Card Header Line */

.card-header-line {

    display:flex;

    align-items:center;

    gap:16px;

    margin-bottom:26px;

    padding-bottom:18px;

    border-bottom:1px solid rgba(255,255,255,0.06);

}


.card-header-icon-wrap {

    width:44px;

    height:44px;

    border-radius:14px;

    background:rgba(214,40,40,0.12);

    border:1px solid rgba(214,40,40,0.25);

    color:var(--accent-light, #ff595e);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:19px;

    flex-shrink:0;

}


.card-header-line h3 {

    font-size:18.5px;

    font-weight:700;

    color:#ffffff;

    margin:0 0 3px 0;

}


.card-subtitle {

    font-size:13px;

    color:#888890;

    margin:0;

}


/*==================================================
                BOOKING FORM
==================================================*/

.booking-form {

    padding:36px;

    background:var(--panel, #18181b);

    border:1px solid rgba(255,255,255,0.06);

    border-radius:var(--radius, 20px);

    box-shadow:0 12px 35px rgba(0,0,0,0.3);

}


.booking-form form {

    display:grid;

    grid-template-columns:repeat(2, 1fr);

    gap:20px 24px;

}


.booking-form .field {

    width:100%;

}


.booking-form .field label {

    display:flex;

    align-items:center;

    gap:8px;

    font-size:13.5px;

    font-weight:600;

    color:#e5e5e5;

    margin-bottom:8px;

}


.booking-form .field label i {

    font-size:13px;

    color:var(--accent-light, #ff595e);

}


.required-star {

    color:var(--accent, #d62828);

    font-weight:700;

}


.booking-form .field-full {

    grid-column:1 / -1;

}


/* Input with Icon Wrapper */

.input-icon-wrapper {

    position:relative;

    display:flex;

    align-items:center;

}


.input-icon-wrapper .input-icon {

    position:absolute;

    left:16px;

    color:#666670;

    font-size:14px;

    pointer-events:none;

    transition:all 0.25s ease;

}


.input-icon-wrapper input,
.input-icon-wrapper select {

    padding-left:44px !important;

}


.input-icon-wrapper input:focus ~ .input-icon,
.input-icon-wrapper select:focus ~ .input-icon {

    color:var(--accent-light, #ff595e);

}


.booking-form input,
.booking-form select,
.booking-form textarea {

    width:100%;

    padding:13px 16px;

    background:#222225;

    color:#ffffff;

    border:1px solid rgba(255,255,255,0.1);

    border-radius:12px;

    font-size:14px;

    font-family:inherit;

    outline:none;

    transition:all 0.25s ease;

}


.booking-form select {

    cursor:pointer;

}


.booking-form select option,
.booking-form select optgroup {

    background:#1c1c1f;

    color:#ffffff;

}


.booking-form input:focus,
.booking-form select:focus,
.booking-form textarea:focus {

    border-color:var(--accent, #d62828);

    box-shadow:0 0 0 3px rgba(214,40,40,0.18);

    background:#26262a;

}


/* Guest Quick Pills */

.guest-pills-wrapper {

    display:flex;

    gap:10px;

    flex-wrap:wrap;

    margin-bottom:8px;

}


.guest-pill {

    padding:8px 16px;

    background:#222225;

    border:1px solid rgba(255,255,255,0.08);

    border-radius:20px;

    color:#d0d0d5;

    font-size:13px;

    font-weight:600;

    cursor:pointer;

    transition:all 0.2s ease;

}


.guest-pill:hover {

    border-color:rgba(214,40,40,0.4);

    color:#ffffff;

    background:#2a2a2e;

}


.guest-pill.active {
    background:linear-gradient(135deg, var(--accent, #d62828), var(--accent-light, #ff595e));
    border-color:transparent;
    color:#ffffff;
    box-shadow:0 4px 12px rgba(214,40,40,0.35);
}

.guest-pill:focus-visible {
    outline: 2px solid var(--accent, #d62828);
    outline-offset: 2px;
}


.hidden-select {

    display:none;

}


.btn-booking-submit {

    grid-column:1 / -1;

    margin-top:10px;

    height:50px;

    font-size:15px;

    font-weight:600;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    border-radius:14px;

    background:linear-gradient(135deg, var(--accent, #d62828), var(--accent-light, #ff595e));

    box-shadow:0 6px 20px rgba(214,40,40,0.35);

    transition:all 0.25s ease;

}


.btn-booking-submit:hover:not(:disabled) {

    transform:translateY(-2px);

    box-shadow:0 10px 25px rgba(214,40,40,0.5);

}


.btn-booking-submit:disabled {

    opacity:0.65;

    cursor:not-allowed;

}


/*==================================================
        BOOKING HISTORY & TIMELINE VIEW
==================================================*/

.booking-history {

    padding:32px;

    background:var(--panel, #18181b);

    border:1px solid rgba(255,255,255,0.06);

    border-radius:var(--radius, 20px);

    box-shadow:0 12px 35px rgba(0,0,0,0.3);

    position:sticky;

    top:100px;

}


.reservation-timeline {

    position:relative;

    display:flex;

    flex-direction:column;

    gap:20px;

}


.reservation-timeline::before {

    content:"";

    position:absolute;

    left:13px;

    top:12px;

    bottom:12px;

    width:2px;

    background:rgba(255,255,255,0.08);

}


.timeline-item {

    position:relative;

    padding-left:34px;

}


.timeline-marker {

    position:absolute;

    left:6px;

    top:16px;

    width:16px;

    height:16px;

    border-radius:50%;

    background:#18181b;

    border:3px solid #666670;

    box-shadow:0 0 10px rgba(0,0,0,0.6);

    z-index:2;

    transition:all 0.25s ease;

}


.timeline-marker.marker-pending {

    border-color:#f4b400;

    box-shadow:0 0 10px rgba(244,180,0,0.4);

}


.timeline-marker.marker-confirmed {

    border-color:#2ecc71;

    box-shadow:0 0 10px rgba(46,204,113,0.4);

}


.timeline-marker.marker-checkedin {

    border-color:#3498db;

    box-shadow:0 0 10px rgba(52,152,219,0.4);

}


.timeline-marker.marker-cancelled {

    border-color:#ff595e;

    box-shadow:0 0 10px rgba(239,68,68,0.4);

}


.timeline-card {

    padding:18px 20px;

    background:#202024;

    border:1px solid rgba(255,255,255,0.06);

    border-radius:16px;

    transition:all 0.25s ease;

}


.timeline-card:hover {

    border-color:rgba(214,40,40,0.3);

    transform:translateY(-2px);

    box-shadow:0 8px 24px rgba(0,0,0,0.4);

}


.timeline-card-header {

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:14px;

    gap:10px;

}


.timeline-date-chip {

    display:inline-flex;

    align-items:center;

    gap:6px;

    font-size:14px;

    font-weight:700;

    color:#ffffff;

}


.timeline-date-chip i {

    color:var(--accent-light, #ff595e);

    font-size:13px;

}


.timeline-details {

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:8px 12px;

    font-size:13px;

    color:#b5b5b5;

}


.detail-row {

    display:flex;

    align-items:center;

    gap:8px;

}


.detail-row i {

    font-size:13px;

    color:var(--accent-light, #ff595e);

    width:15px;

    text-align:center;

}


.detail-row strong {

    color:#ffffff;

}


.detail-note {

    grid-column:1 / -1;

    background:rgba(255,255,255,0.03);

    padding:6px 10px;

    border-radius:8px;

    font-size:12.5px;

    margin-top:4px;

}


/* Cancel Button */

.btn-cancel-reservation {

    width:100%;

    margin-top:14px;

    padding:8px 14px;

    background:rgba(239,68,68,0.08);

    color:#ff595e;

    border:1px solid rgba(239,68,68,0.25);

    border-radius:10px;

    font-size:12.5px;

    font-weight:600;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:6px;

    transition:all 0.2s ease;

}


.btn-cancel-reservation:hover {

    background:rgba(239,68,68,0.2);

    border-color:#ff595e;

    color:#ffffff;

}



/*==================================================
            DARK THEME STATUS BADGES
==================================================*/

.status {

    display:inline-flex;

    align-items:center;

    padding:5px 12px;

    border-radius:30px;

    font-size:12px;

    font-weight:700;

    letter-spacing:0.3px;

}


.status.pending {

    background:rgba(244,180,0,0.12);

    color:#f4b400;

    border:1px solid rgba(244,180,0,0.3);

}


.status.confirmed {

    background:rgba(46,204,113,0.12);

    color:#2ecc71;

    border:1px solid rgba(46,204,113,0.3);

}


.status.checkedin {

    background:rgba(52,152,219,0.12);

    color:#3498db;

    border:1px solid rgba(52,152,219,0.3);

}


.status.completed {

    background:rgba(255,255,255,0.08);

    color:#b5b5b5;

    border:1px solid rgba(255,255,255,0.15);

}


.status.cancelled {

    background:rgba(239,68,68,0.12);

    color:#ff595e;

    border:1px solid rgba(239,68,68,0.3);

}


/* Empty State */

.empty {

    text-align:center;

    padding:30px 16px;

    color:#888890;

    font-size:14px;

}


.empty-icon {

    font-size:32px;

    color:#555560;

    margin-bottom:12px;

    display:block;

}


/*==================================================
                    FAQ SECTION
==================================================*/

.faq-section {

    margin-top:60px;

    padding-top:40px;

    border-top:1px solid rgba(255,255,255,0.06);

}


.faq-list {

    display:grid;

    grid-template-columns:repeat(3, 1fr);

    gap:24px;

    margin-top:30px;

}


.faq-item {

    padding:28px 24px;

    background:var(--panel, #18181b);

    border:1px solid rgba(255,255,255,0.06);

    border-radius:18px;

    transition:all 0.3s ease;

}


.faq-item:hover {

    transform:translateY(-4px);

    border-color:rgba(214,40,40,0.3);

    box-shadow:0 12px 30px rgba(0,0,0,0.35);

}


.faq-icon-box {

    width:42px;

    height:42px;

    border-radius:12px;

    background:rgba(214,40,40,0.1);

    border:1px solid rgba(214,40,40,0.25);

    color:var(--accent-light, #ff595e);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

    margin-bottom:16px;

}


.faq-item h3 {

    font-size:16.5px;

    font-weight:700;

    margin-bottom:10px;

    color:#ffffff;

}


.faq-item p {

    color:#b5b5b5;

    line-height:1.7;

    font-size:13.5px;

    margin:0;

}



/*==================================================
                RESPONSIVE BREAKPOINTS
==================================================*/

@media (max-width: 992px) {

    .booking-layout {

        grid-template-columns:1fr;

    }

    .booking-history {

        position:relative;

        top:0;

    }

    .faq-list {

        grid-template-columns:1fr;

    }

}


@media (max-width: 768px) {

    .booking-form {

        padding:24px 18px;

    }

    .booking-form form {

        grid-template-columns:1fr;

    }

    .booking-history {
        padding: 24px 18px;
    }
}

/*==================================================
        CANCELLATION CONFIRMATION MODAL (POLISH P3)
==================================================*/

.cancel-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.cancel-modal.hidden {
    display: none !important;
}

.cancel-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    animation: modalOverlayFadeIn 0.25s ease forwards;
}

.cancel-modal-card {
    position: relative;
    background: #18181b;
    border: 1px solid #34343a;
    border-radius: 24px;
    padding: 32px 28px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7);
    z-index: 1;
    text-align: center;
    animation: modalScaleUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.cancel-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #222225;
    border: 1px solid #34343a;
    color: #b5b5b5;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cancel-modal-close:hover {
    color: #ffffff;
    background: var(--accent, #d62828);
    border-color: var(--accent, #d62828);
}

.cancel-modal-icon-wrap {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.12);
    border: 1.5px solid rgba(239, 68, 68, 0.35);
    color: #ef4444;
    font-size: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.cancel-modal-title {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 10px;
}

.cancel-modal-desc {
    font-size: 14px;
    color: #b5b5b5;
    line-height: 1.6;
    margin: 0 0 24px;
}

.cancel-modal-actions {
    display: flex;
    gap: 12px;
}

.cancel-action-btn {
    flex: 1;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 12px;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

.cancel-action-btn.btn-secondary {
    background: #222225;
    color: #ffffff;
    border: 1px solid #34343a;
}

.cancel-action-btn.btn-secondary:hover {
    background: #2a2a2e;
    border-color: #4a4a52;
}

.cancel-action-btn.btn-danger {
    background: var(--accent, #d62828);
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(214, 40, 40, 0.35);
}

.cancel-action-btn.btn-danger:hover {
    background: #ff3b3b;
    transform: translateY(-1px);
}

body.modal-active {
    overflow: hidden !important;
}

@keyframes modalOverlayFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalScaleUp {
    from { opacity: 0; transform: translateY(15px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}