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

.ua-booking-form-section {

    display: none;

    padding: 80px 0;

    background: #f8fafc;

}

.ua-booking-form-section.active {

    display: block;

    animation: fadeIn .3s ease;

}

/* ==========================================================
   CARD
========================================================== */

.ua-form-card {

    margin-bottom: 24px;

    padding: 28px;

    background: #fff;

    border: 1px solid #e5e7eb;

    border-radius: 22px;

    box-shadow:
        0 10px 30px rgba(15, 23, 42, .05);

}

/* ==========================================================
   HEADER
========================================================== */

.ua-form-header {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-bottom: 26px;

}

.ua-form-icon {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-shrink: 0;

    width: 52px;

    height: 52px;

    border-radius: 50%;

    background: rgba(15, 118, 110, .08);

    color: var(--primary);

    font-size: 1.15rem;

}

.ua-form-title {

    margin: 0;

    color: var(--text);

    font-size: 1.3rem;

    font-weight: var(--fw-bold);

}

/* ==========================================================
   LABEL
========================================================== */

.ua-form-label {

    display: block;

    margin-bottom: 8px;

    color: var(--text);

    font-size: .92rem;

    font-weight: 600;

}

.ua-form-label span {

    color: #ef4444;

}

/* ==========================================================
   INPUT WRAPPER
========================================================== */

.ua-input {

    position: relative;

}

.ua-input i {

    position: absolute;

    top: 50%;

    left: 18px;

    transform: translateY(-50%);

    color: #94a3b8;

    font-size: .95rem;

    pointer-events: none;

}

/* ==========================================================
   INPUT
========================================================== */

.ua-input .form-control,
.ua-input .form-select {

    height: 56px;

    padding-left: 50px;

    border: 1px solid #dbe4ee;

    border-radius: 14px;

    background: #fff;

    color: var(--text);

    font-size: .95rem;

    transition: .25s;

}

.ua-input .form-control::placeholder {

    color: #94a3b8;

}

.ua-input .form-control:hover,
.ua-input .form-select:hover {

    border-color: #cbd5e1;

}

.ua-input .form-control:focus,
.ua-input .form-select:focus {

    border-color: var(--primary);

    box-shadow: 0 0 0 .18rem rgba(15, 118, 110, .12);

}

/* ==========================================================
   TEXTAREA
========================================================== */

textarea.form-control {

    min-height: 130px;

    border-radius: 14px;

    border: 1px solid #dbe4ee;

    resize: vertical;

    padding: 16px 18px;

}

textarea.form-control:focus {

    border-color: var(--primary);

    box-shadow: 0 0 0 .18rem rgba(15, 118, 110, .12);

}

/* ==========================================================
   PARTICIPANTS
========================================================== */

.ua-guest-selector {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    padding: 16px 18px;

    background: #FFFFFF;

    border: 1px solid var(--border);

    border-radius: 16px;

    transition: .25s;

}

.ua-guest-selector:hover {

    border-color: var(--primary);

    box-shadow: 0 4px 14px rgba(15, 23, 42, .05);

}

/* ==========================================================
   INFO
========================================================== */

.ua-guest-info {

    flex: 1;

}

.ua-guest-info strong {

    display: block;

    margin-bottom: 2px;

    font-size: 1rem;

    font-weight: 600;

    color: var(--text);

}

.ua-guest-info small {

    display: block;

    font-size: .82rem;

    color: var(--text-light);

}

/* ==========================================================
   COUNTER
========================================================== */

.ua-guest-counter {

    display: flex;

    align-items: center;

    gap: 12px;

}

/* ==========================================================
   BUTTON
========================================================== */

.ua-counter-btn {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 38px;

    height: 38px;

    border: 1px solid var(--border);

    border-radius: 50%;

    background: #FFFFFF;

    color: var(--text);

    cursor: pointer;

    transition: .25s;

}

.ua-counter-btn:hover {

    background: var(--primary);

    border-color: var(--primary);

    color: #FFFFFF;

}

.ua-counter-btn:disabled {

    opacity: .45;

    cursor: not-allowed;

}

/* ==========================================================
   VALUE
========================================================== */

.ua-guest-counter input {

    width: 42px;

    padding: 0;

    border: 0;

    background: transparent;

    text-align: center;

    font-size: 1.1rem;

    font-weight: 700;

    color: var(--text);

    pointer-events: none;

}

/* ==========================================================
   NOTE
========================================================== */

.ua-form-note {

    display: block;

    font-size: .82rem;

    color: var(--text-light);

}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:575.98px) {

    .ua-guest-selector {

        padding: 14px 16px;

        gap: 12px;

    }

    .ua-guest-info strong {

        font-size: .95rem;

    }

    .ua-guest-info small {

        font-size: .75rem;

    }

    .ua-counter-btn {

        width: 34px;

        height: 34px;

    }

    .ua-counter-btn i {

        font-size: .8rem;

    }

    .ua-guest-counter {

        gap: 10px;

    }

    .ua-guest-counter input {

        width: 34px;

        font-size: 1rem;

    }

}

/* ==========================================================
   SUMMARY
========================================================== */

.ua-summary-card {

    padding: 22px;

    background: #f8fafc;

    border: 1px solid var(--border);

    border-radius: 18px;

}

.ua-summary-item {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 20px;

    padding: 10px 0;

}

.ua-summary-item span {

    color: var(--text-light);

    font-size: .9rem;

}

.ua-summary-item strong {

    color: var(--text);

    font-size: .95rem;

    font-weight: var(--fw-semibold);

    text-align: right;

}

.ua-summary-divider {

    height: 1px;

    margin: 12px 0;

    background: var(--border);

}

.ua-summary-total {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 18px;

    padding: 18px;

    background: #ffffff;

    border: 1px solid rgba(15, 118, 110, .15);

    border-radius: 16px;

}

.ua-summary-total small {

    display: block;

    margin-bottom: 4px;

    color: var(--text-light);

    font-size: .8rem;

    text-transform: uppercase;

    letter-spacing: .05em;

}

.ua-summary-total h3 {

    margin: 0;

    color: var(--primary);

    font-size: 1.8rem;

    font-weight: var(--fw-bold);

    line-height: 1.1;

}

/* ==========================================================
   PAYMENT
========================================================== */

.ua-payment-list {

    display: flex;

    flex-direction: column;

    gap: 14px;

}

.ua-payment-option {

    display: block;

    cursor: pointer;

}

.ua-payment-option input {

    display: none;

}

.ua-payment-content {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 16px;

    padding: 18px;

    background: #fff;

    border: 2px solid var(--border);

    border-radius: 16px;

    transition: .25s;

}

.ua-payment-option:hover .ua-payment-content {

    border-color: var(--primary);

}

.ua-payment-option input:checked+.ua-payment-content {

    border-color: var(--primary);

    background: var(--primary-light);

}

.ua-payment-left {

    display: flex;

    align-items: center;

    gap: 14px;

}

.ua-payment-left>i {

    width: 42px;

    height: 42px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 50%;

    background: rgba(15, 118, 110, .08);

    color: var(--primary);

    font-size: 1.1rem;

}

.ua-payment-left strong {

    display: block;

    color: var(--text);

    font-size: .96rem;

    font-weight: var(--fw-semibold);

}

.ua-payment-left small {

    display: block;

    margin-top: 2px;

    color: var(--text-light);

    font-size: .82rem;

}

.ua-payment-right {

    display: flex;

    gap: 8px;

    font-size: 1.6rem;

    color: #2563eb;

}

/* ==========================================================
   TERMS
========================================================== */

.ua-booking-terms {

    margin-bottom: 24px;

}

.ua-checkbox {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    cursor: pointer;

}

.ua-checkbox input {

    margin-top: 4px;

}

.ua-checkbox span {

    color: var(--text-light);

    line-height: 1.7;

    font-size: .9rem;

}

.ua-checkbox a {

    color: var(--primary);

    font-weight: var(--fw-semibold);

    text-decoration: none;

}

.ua-checkbox a:hover {

    text-decoration: underline;

}

/* ==========================================================
   SECURITY
========================================================== */

.ua-booking-security {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    margin-bottom: 24px;

}

.ua-security-item {

    display: flex;

    align-items: center;

    gap: 8px;

    color: var(--text-light);

    font-size: .88rem;

}

.ua-security-item i {

    color: var(--success);

}

/* ==========================================================
   SUBMIT
========================================================== */

.ua-complete-booking {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 10px;

    width: 100%;

    height: 58px;

    border: none;

    border-radius: 16px;

    background: var(--primary);

    color: #fff;

    font-size: 1rem;

    font-weight: var(--fw-bold);

    transition: .25s;

}

.ua-complete-booking:hover {

    background: var(--primary-dark);

}

.ua-complete-booking i {

    font-size: .95rem;

}

/* ==========================================================
   PAYPAL
========================================================== */

#paypal-button-container {

    margin-top: 18px;

}

#paymentMessage {

    margin-top: 18px;

}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:575.98px) {

    .ua-summary-row span,
    .ua-summary-row strong {

        font-size: .88rem;

    }

    .ua-summary-total strong {

        font-size: 1.1rem;

    }

    .ua-payment-content {

        padding: 16px;

        border-radius: 14px;

    }

    .ua-payment-left {

        gap: 12px;

    }

    .ua-payment-left>i {

        width: 38px;

        height: 38px;

        font-size: 1rem;

    }

    .ua-payment-right {

        font-size: 1.35rem;

    }

    .ua-booking-security {

        flex-direction: column;

        gap: 10px;

    }

    .ua-complete-booking {

        height: 54px;

        font-size: .95rem;

        border-radius: 14px;

    }

}

/*
|--------------------------------------------------------------------------
| Payment Message
|--------------------------------------------------------------------------
*/

.ua-payment-message {

    display: flex;

    align-items: center;

    gap: .75rem;

    margin-top: 1rem;

    padding: .875rem 1rem;

    border: 1px solid transparent;

    border-radius: 12px;

    font-size: .92rem;

    font-weight: 500;

    line-height: 1.5;

}

.ua-payment-message i {

    flex-shrink: 0;

    font-size: 1rem;

}

/*
|--------------------------------------------------------------------------
| Success
|--------------------------------------------------------------------------
*/

.ua-payment-message.alert-success {

    color: #0f5132;

    background: #d1e7dd;

    border-color: #badbcc;

}

/*
|--------------------------------------------------------------------------
| Danger
|--------------------------------------------------------------------------
*/

.ua-payment-message.alert-danger {

    color: #842029;

    background: #f8d7da;

    border-color: #f5c2c7;

}

/*
|--------------------------------------------------------------------------
| Warning
|--------------------------------------------------------------------------
*/

.ua-payment-message.alert-warning {

    color: #664d03;

    background: #fff3cd;

    border-color: #ffecb5;

}