/* =========================================
   Public Booking
========================================= */

.public-booking-page {
    min-height: 100vh;
    padding: 55px 0 75px;
    background: linear-gradient( 180deg, #f7f9fb 0%, #ffffff 100% );
}

.booking-page-header {
    max-width: 850px;
    margin: 0 auto 28px;
    display: flex;
    align-items: center;
    gap: 17px;
}

.booking-page-icon {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    background: linear-gradient( 145deg, #d0a044, #ad791d );
    color: #ffffff;
    font-size: 23px;
    box-shadow: 0 10px 25px rgba(173, 121, 29, 0.22);
}

.booking-page-header h1 {
    margin: 0 0 5px;
    color: #092d50;
    font-size: 27px;
    font-weight: 800;
}

.booking-page-header p {
    margin: 0;
    color: #7e8993;
    font-size: 13px;
}

.booking-form-card {
    max-width: 850px;
    margin: 0 auto;
    padding: 32px;
    border: 1px solid #e9edf0;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 15px 45px rgba(9, 45, 80, 0.08);
}

.booking-section-title {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 23px;
}

.booking-section-number {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #092d50;
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
}

.booking-section-title h2 {
    margin: 0 0 2px;
    color: #17364f;
    font-size: 17px;
    font-weight: 800;
}

.booking-section-title p {
    margin: 0;
    color: #9aa2a9;
    font-size: 11px;
}

.booking-form-card .form-label {
    margin-bottom: 7px;
    color: #425565;
    font-size: 12px;
    font-weight: 700;
}

.booking-form-card .form-control,
.booking-form-card .form-select {
    min-height: 47px;
    border: 1px solid #dde3e7;
    border-radius: 11px;
    background-color: #ffffff;
    color: #263746;
    font-family: 'Cairo', sans-serif;
    font-size: 12px;
}

.booking-form-card textarea.form-control {
    min-height: 110px;
    resize: vertical;
}

.booking-form-card .form-control:focus,
.booking-form-card .form-select:focus {
    border-color: #b68a36;
    box-shadow: 0 0 0 0.2rem rgba(182, 138, 54, 0.12);
}

.booking-field-error {
    display: block;
    margin-top: 5px;
    font-size: 10px;
}

.booking-divider {
    height: 1px;
    margin: 30px 0;
    background: #edf0f2;
}

.booking-validation-summary {
    margin-bottom: 25px;
    border: 0;
    border-radius: 11px;
    font-size: 11px;
}

    .booking-validation-summary:empty {
        display: none;
    }

.booking-submit-area {
    margin-top: 30px;
    padding-top: 23px;
    border-top: 1px solid #edf0f2;
}

.booking-submit-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 19px;
    padding: 12px 14px;
    border-radius: 11px;
    background: #f7f3e9;
    color: #77602f;
    font-size: 10px;
    line-height: 1.8;
}

    .booking-submit-note i {
        margin-top: 4px;
        color: #b4862d;
    }

.booking-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.booking-back-btn {
    min-width: 95px;
    padding: 10px 18px;
    border: 1px solid #dde3e7;
    border-radius: 11px;
    background: #ffffff;
    color: #66737e;
    font-size: 12px;
    font-weight: 700;
}

    .booking-back-btn:hover {
        background: #f5f7f8;
        color: #344957;
    }

.booking-submit-btn {
    min-width: 175px;
    padding: 10px 20px;
    border: 0;
    border-radius: 11px;
    background: linear-gradient( 135deg, #092d50, #0c4c7a );
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(9, 45, 80, 0.16);
}

    .booking-submit-btn:hover {
        background: linear-gradient( 135deg, #ad791d, #d0a044 );
        color: #ffffff;
    }

@media (max-width: 767px) {

    .public-booking-page {
        padding: 30px 0 50px;
    }

    .booking-page-header {
        align-items: flex-start;
    }

        .booking-page-header h1 {
            font-size: 22px;
        }

    .booking-form-card {
        padding: 22px 18px;
        border-radius: 17px;
    }

    .booking-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .booking-back-btn,
    .booking-submit-btn {
        width: 100%;
    }
}