/* =====================================================
   UBUD ADVENTURES BOOKING
   PART 1
   ROOT + CARD + HEADER + AVAILABILITY
===================================================== */

/* =========================
   ROOT
========================= */

:root {

    --booking-primary: #f4b400;
    --booking-primary-soft: #fff8e7;

    --booking-success: #16a34a;
    --booking-success-soft: #f6fff8;

    --booking-danger: #ef4444;
    --booking-danger-soft: #fff5f5;

    --booking-text: #111827;
    --booking-muted: #6b7280;

    --booking-border: #e8eef5;

    --booking-bg: #ffffff;
    --booking-bg-soft: #fafbfd;

    --booking-radius: 22px;

}

/* =========================
   SIDEBAR
========================= */

.booking-sidebar {

    width: 100%;

}

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

.booking-card {

    background: var(--booking-bg);

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

    border-radius: 24px;

    overflow: hidden;

    box-shadow:

        0 10px 30px rgba(15, 23, 42, .05);

}

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

.booking-card-header {

    display: flex;

    align-items: flex-start;

    gap: 16px;

    padding: 24px;

}

.booking-card-icon {

    width: 56px;

    height: 56px;

    border-radius: 16px;

    background: var(--booking-primary-soft);

    color: var(--booking-primary);

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 24px;

    flex-shrink: 0;

}

.booking-card-title {

    margin: 0;

    font-size: 1.2rem;

    font-weight: 800;

    color: var(--booking-text);

    line-height: 1.2;

}

.booking-card-subtitle {

    margin: 6px 0 0;

    font-size: .95rem;

    line-height: 1.7;

    color: var(--booking-muted);

}

/* =========================
   STATUS WRAPPER
========================= */

.booking-status {

    padding: 0 24px 24px;

}

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

.booking-status-card {

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 8px;

    border-radius: 18px;

    border: 1px solid #d8f1df;

    background: var(--booking-success-soft);

}

/* =========================
   STATUS ICON
========================= */

.booking-status-icon {

    width: 34px;

    height: 34px;

    border-radius: 50%;

    background: var(--booking-success);

    color: #fff;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 18px;

    flex-shrink: 0;

}

/* =========================
   STATUS CONTENT
========================= */

.booking-status-content {

    flex: 1;

}

.booking-status-label {

    display: inline-block;

    margin-bottom: 4px;

    padding: 3px 5px;

    border-radius: 999px;

    background: #dcfce7;

    color: var(--booking-success);

    font-size: .72rem;

    font-weight: 700;

    letter-spacing: .06em;

    text-transform: uppercase;

}

.booking-status-content p {

    margin: 0;

    font-size: .89rem;

    line-height: 1.6;

    color: var(--booking-text);

}

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

.booking-status-close {

    width: 21px;

    height: 21px;

    border: none;

    border-radius: 50%;

    background: var(--booking-danger);

    color: #ffffff;

    display: flex;

    justify-content: center;

    align-items: center;

    cursor: pointer;

    transition: .25s;

    flex-shrink: 0;

}

.booking-status-close:hover {

    background: #f3f4f6;

    color: var(--booking-danger);

}

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

@media(max-width:768px) {

    .booking-card-header {

        padding: 20px;

    }

    .booking-card-icon {

        width: 50px;

        height: 50px;

        font-size: 22px;

    }

    .booking-card-title {

        font-size: 1.25rem;

    }

    .booking-card-subtitle {

        font-size: .85rem;

    }

    .booking-status {

        padding: 0 20px 20px;

    }

    .booking-status-card {

        padding: 16px;

    }

    .booking-status-icon {

        width: 40px;

        height: 40px;

        font-size: 16px;

    }

    .booking-status-content p {

        font-size: .86rem;

    }

}

/* =====================================================
   PART 2
   BOOKING FORM
===================================================== */

/* =========================
   FORM WRAPPER
========================= */

.booking-form-wrap {

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

    background: #fff;

}

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

.booking-form-card {

    background: #fff;

}

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

.booking-form-header {

    display: flex;

    align-items: flex-start;

    gap: 16px;

    padding: 24px;

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

}

.booking-form-header-icon {

    width: 56px;

    height: 56px;

    border-radius: 16px;

    background: var(--booking-primary-soft);

    color: var(--booking-primary);

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 24px;

    flex-shrink: 0;

}

.booking-form-title {

    margin: 0;

    font-size: 1.45rem;

    font-weight: 800;

    color: var(--booking-text);

    line-height: 1.2;

}

.booking-form-subtitle {

    margin: 6px 0 0;

    color: var(--booking-muted);

    font-size: .9rem;

    line-height: 1.6;

}

/* =====================================================
   GUESTS
===================================================== */

.booking-group .row {

    --bs-gutter-x: 16px;

    --bs-gutter-y: 16px;

}

/* =========================
   HELPER TEXT
========================= */

.booking-input-group small {

    display: block;

    margin-top: 8px;

    font-size: .76rem;

    line-height: 1.5;

    color: #94a3b8;

}

/* =========================
   SELECT
========================= */

.booking-input .form-select {

    cursor: pointer;

    appearance: none;

    -webkit-appearance: none;

    -moz-appearance: none;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%2394a3b8' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

    background-repeat: no-repeat;

    background-position: right 16px center;

    background-size: 18px;

    padding-right: 48px;

}

/* =========================
   ADULT & CHILD
========================= */

#adultQty,
#childQty {

    font-weight: 600;

}

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

@media(max-width:576px) {

    .booking-group .row {

        --bs-gutter-x: 0;

        --bs-gutter-y: 16px;

    }

    .booking-group .col-6 {

        width: 100%;

    }

    .booking-input-group small {

        font-size: .74rem;

    }

}

/* =========================
   SELECTED DATE
========================= */

.selected-date-card {

    display: flex;

    align-items: center;

    gap: 14px;

    margin: 24px;

    padding: 16px 18px;

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

    border-radius: 18px;

    background: var(--booking-bg-soft);

}

.selected-date-icon {

    width: 44px;

    height: 44px;

    border-radius: 14px;

    background: #fff;

    color: var(--booking-primary);

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 18px;

    flex-shrink: 0;

}

.selected-date-content small {

    display: block;

    margin-bottom: 4px;

    font-size: .72rem;

    font-weight: 700;

    letter-spacing: .08em;

    text-transform: uppercase;

    color: #94a3b8;

}

#selectedDateText {

    font-size: 1rem;

    font-weight: 700;

    color: var(--booking-text);

}

/* =========================
   GROUP
========================= */

.booking-group {

    margin: 0 24px 24px;

    padding: 22px;

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

    border-radius: 20px;

    background: #fff;

}

.booking-group-title {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 20px;

    font-size: 1rem;

    font-weight: 700;

    color: var(--booking-text);

}

.booking-group-title i {

    width: 36px;

    height: 36px;

    border-radius: 12px;

    background: var(--booking-primary-soft);

    color: var(--booking-primary);

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 16px;

    flex-shrink: 0;

}

/* =========================
   FIELD
========================= */

.booking-input-group {

    margin-bottom: 18px;

}

.booking-input-group:last-child {

    margin-bottom: 0;

}

.booking-input-group .form-label {

    display: block;

    margin-bottom: 8px;

    font-size: .84rem;

    font-weight: 600;

    color: #475569;

}

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

.booking-input {

    position: relative;

}

.booking-input-icon {

    position: absolute;

    top: 50%;

    left: 16px;

    transform: translateY(-50%);

    color: #94a3b8;

    font-size: 16px;

    pointer-events: none;

    z-index: 3;

}

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

    height: 52px;

    padding-left: 48px;

    border: 1px solid #dbe3ec;

    border-radius: 14px;

    background: #fff;

    color: var(--booking-text);

    font-size: .93rem;

    box-shadow: none;

    transition: .25s;

}

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

    color: #9ca3af;

}

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

    border-color: var(--booking-primary);

    box-shadow: 0 0 0 4px rgba(244, 180, 0, .12);

}

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

@media(max-width:768px) {

    .booking-form-header {

        padding: 20px;

    }

    .booking-form-header-icon {

        width: 48px;

        height: 48px;

        font-size: 20px;

    }

    .booking-form-title {

        font-size: 1.1rem;

    }

    .booking-form-subtitle {

        font-size: .84rem;

    }

    .selected-date-card {

        margin: 20px;

        padding: 14px 16px;

    }

    .booking-group {

        margin: 0 20px 20px;

        padding: 18px;

    }

    .booking-group-title h5 {

        margin: 0;

        font-size: 1rem;

        font-weight: 700;

    }

    .booking-group-title {
        margin-bottom: 18px;

    }

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

        height: 50px;

    }

}

/* =====================================================
   PART 3
   PAYMENT • SUMMARY • SUBMIT • SECURITY
===================================================== */

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

.payment-methods {

    display: grid;

    gap: 14px;

}

.payment-option {

    position: relative;

    display: flex;

    align-items: center;

    gap: 16px;

    padding: 16px 18px;

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

    border-radius: 16px;

    background: #fff;

    cursor: pointer;

    transition: .25s;

}

.payment-option input {

    display: none;

}

.payment-option-icon {

    width: 48px;

    height: 48px;

    border-radius: 14px;

    background: var(--booking-primary-soft);

    color: var(--booking-primary);

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 22px;

    flex-shrink: 0;

}

.payment-option-content {

    flex: 1;

}

.payment-option-content strong {

    display: block;

    font-size: .95rem;

    color: var(--booking-text);

}

.payment-option-content small {

    display: block;

    margin-top: 3px;

    color: var(--booking-muted);

    font-size: .8rem;

}

.payment-option:hover {

    border-color: var(--booking-primary);

    transform: translateY(-2px);

}

.payment-option.active-option {

    border-color: var(--booking-primary);

    background: #fffdf6;

    box-shadow: 0 8px 20px rgba(244, 180, 0, .10);

}

.payment-option.active-option::after {

    content: "✓";

    position: absolute;

    top: 14px;

    right: 14px;

    width: 22px;

    height: 22px;

    border-radius: 50%;

    background: var(--booking-primary);

    color: #fff;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 12px;

    font-weight: 700;

}

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

.price-summary-card {

    border: 1px solid #f4ead0;

    border-radius: 18px;

    overflow: hidden;

    background: #fffdf8;

}

.price-summary-item {

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 18px;

}

.price-summary-item+.price-summary-item {

    border-top: 1px dashed #ececec;

}

.price-summary-icon {

    width: 42px;

    height: 42px;

    border-radius: 12px;

    background: var(--booking-primary-soft);

    color: var(--booking-primary);

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 18px;

    flex-shrink: 0;

}

.price-summary-content {

    flex: 1;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 14px;

}

.price-summary-left {

    min-width: 0;

}

.price-summary-title {

    font-size: .94rem;

    font-weight: 700;

    color: var(--booking-text);

}

.price-summary-detail {

    margin-top: 4px;

    font-size: .78rem;

    color: var(--booking-muted);

}

.price-summary-price {

    white-space: nowrap;

    font-size: 1rem;

    font-weight: 700;

    color: var(--booking-text);

}

.price-divider {

    height: 1px;

    margin: 0 18px;

    background: #f4e4bd;

}

.price-summary-total {

    padding: 20px 18px;

}

.price-summary-total small {

    display: block;

    margin-bottom: 5px;

    color: #94a3b8;

    font-size: .72rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .08em;

}

.price-summary-total h2 {

    margin: 0;

    color: var(--booking-primary);

    font-size: 2rem;

    font-weight: 800;

}

/* =========================
   ERROR
========================= */

.booking-error {

    margin: 0 22px 18px;

}

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

.booking-submit-wrap {

    margin: 0 22px 22px;

}

.booking-submit-btn {

    width: 100%;

    border: none;

    border-radius: 18px;
    font-weight: 800;
    padding: 13px 15px;

    background: linear-gradient(135deg, #f4b400, #ffca2d);

    color: #fff;

    display: flex;

    align-items: center;

    gap: 15px;

    cursor: pointer;

    transition: .25s;

}

.booking-submit-btn i {

    font-size: 26px;

}

.booking-submit-content {

    flex: 1;

    text-align: left;

}

.booking-submit-content strong {

    display: block;

    font-size: 1rem;

}

.booking-submit-content small {

    display: block;

    margin-top: 3px;

    font-size: .8rem;

    opacity: .9;

}

.booking-submit-btn:hover {

    transform: translateY(-2px);

    box-shadow: 0 16px 32px rgba(244, 180, 0, .28);

}

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

.booking-security {

    margin: 0 22px 22px;

    display: grid;

    gap: 12px;

}

.booking-security-item {

    display: flex;

    align-items: center;

    gap: 14px;

}

.booking-security-icon {

    width: 40px;

    height: 40px;

    border-radius: 12px;

    background: #eefbf2;

    color: #16a34a;

    display: flex;

    justify-content: center;

    align-items: center;

    flex-shrink: 0;

}

.booking-security-item strong {

    display: block;

    font-size: .9rem;

    color: var(--booking-text);

}

.booking-security-item small {

    display: block;

    margin-top: 2px;

    color: var(--booking-muted);

    font-size: .78rem;

}

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

.booking-payment-status {

    margin: 0 22px 18px;

}

.booking-paypal {

    margin: 0 22px 22px;

}

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

@media(max-width:768px) {

    .payment-option {

        padding: 14px;

    }

    .payment-option-icon {

        width: 44px;

        height: 44px;

        font-size: 20px;

    }

    .price-summary-item {

        padding: 16px;

    }

    .price-summary-total h2 {

        font-size: 1.75rem;

    }

    .booking-submit-wrap,

    .booking-security,

    .booking-payment-status,

    .booking-paypal,

    .booking-error {

        margin-left: 18px;

        margin-right: 18px;

    }

    .booking-submit-btn {

        padding: 15px 16px;

    }

    .booking-submit-btn i {

        font-size: 22px;

    }

}

/* =====================================================
   PART 4
   STATES • ANIMATION • UX
===================================================== */

/* =========================
   TRANSITION
========================= */

.booking-group,
.selected-date-card,
.payment-option,
.price-summary-card,
.booking-submit-btn,
.booking-input .form-control,
.booking-input .form-select {

    transition: all .25s ease;

}

/* =========================
   GROUP HOVER
========================= */

.booking-group:hover {

    border-color: #d8e3ef;

    box-shadow:
        0 6px 18px rgba(15, 23, 42, .04);

}

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

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

    border-color: #cbd5e1;

}

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

.booking-input .form-control:disabled,
.booking-input .form-select:disabled {

    background: #f8fafc;

    color: #94a3b8;

    cursor: not-allowed;

}

/* =========================
   VALID
========================= */

.booking-input .form-control.is-valid,
.booking-input .form-select.is-valid {

    border-color: #22c55e;

    background-image: none;

}

.booking-input .form-control.is-valid:focus,
.booking-input .form-select.is-valid:focus {

    box-shadow:
        0 0 0 3px rgba(34, 197, 94, .15);

}

/* =========================
   INVALID
========================= */

.booking-input .form-control.is-invalid,
.booking-input .form-select.is-invalid {

    border-color: #ef4444;

    background-image: none;

}

.booking-input .form-control.is-invalid:focus,
.booking-input .form-select.is-invalid:focus {

    box-shadow:
        0 0 0 3px rgba(239, 68, 68, .12);

}

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

.booking-submit-btn:active {

    transform: scale(.98);

}

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

.booking-submit-btn:disabled {

    opacity: .65;

    cursor: not-allowed;

    transform: none;

    box-shadow: none;

}

/* =========================
   LOADING
========================= */

.booking-submit-btn.loading {

    pointer-events: none;

}

.booking-submit-btn.loading i {

    animation: bookingSpin 1s linear infinite;

}

@keyframes bookingSpin {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}

/* =========================
   SUCCESS MESSAGE
========================= */

.booking-success {

    padding: 16px 18px;

    border-radius: 14px;

    border: 1px solid #bbf7d0;

    background: #f0fdf4;

    color: #166534;

    font-size: .9rem;

    line-height: 1.6;

}

/* =========================
   ERROR MESSAGE
========================= */

.booking-error {

    padding: 14px 16px;

    border-radius: 14px;

    border: 1px solid #fecaca;

    background: #fef2f2;

    color: #b91c1c;

    font-size: .88rem;

    line-height: 1.6;

}

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

.booking-payment-status {

    animation: fadeBooking .25s ease;

}

@keyframes fadeBooking {

    from {

        opacity: 0;

        transform: translateY(8px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

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

.price-summary-item:hover {

    background: #fffef9;

}

.price-summary-item:hover .price-summary-title {

    color: var(--booking-primary);

}

.price-summary-item:hover .price-summary-price {

    color: var(--booking-primary);

}

/* =========================
   SCROLLBAR
========================= */

.booking-form-wrap::-webkit-scrollbar {

    width: 8px;

}

.booking-form-wrap::-webkit-scrollbar-thumb {

    background: #d7dfe8;

    border-radius: 99px;

}

.booking-form-wrap::-webkit-scrollbar-track {

    background: transparent;

}

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

@media(max-width:768px) {

    .booking-group:hover {

        box-shadow: none;

    }

    .payment-option:hover {

        transform: none;

    }

    .booking-submit-btn:hover {

        transform: none;

    }

}

/* =====================================================
   FINAL UTILITIES
   ERROR • PAYPAL • LOADING • FOCUS • AUTOFILL
===================================================== */

/* =========================
   BOOKING ERROR
========================= */

#bookingError {

    display: block;

    margin: 0 24px;

    min-height: 0;

    padding: 0;

    border: 0;

    background: transparent;

    border-radius: 0;

    overflow: hidden;

}

#bookingError:empty {

    display: none;

}

#bookingError:not(:empty) {

    margin: 20px 24px;

    padding: 14px 16px;

    border: 1px solid #fecaca;

    border-radius: 14px;

    background: #fef2f2;

    color: #b91c1c;

    font-size: .88rem;

    line-height: 1.6;

}

/* =========================
   SUCCESS MESSAGE
========================= */

.booking-success {

    display: block;

    margin: 20px 22px;

    padding: 14px 16px;

    border-radius: 14px;

    border: 1px solid #bbf7d0;

    background: #f0fdf4;

    color: #166534;

    font-size: .88rem;

    line-height: 1.6;

}

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

.booking-payment-status {

    margin: 20px 22px;

    animation: bookingFade .25s ease;

}

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

.booking-paypal {

    margin: 20px 22px 24px;

}

/* =========================
   SUBMIT BUTTON STATES
========================= */

.booking-submit-btn:disabled {

    opacity: .65;

    cursor: not-allowed;

    transform: none;

    box-shadow: none;

}

.booking-submit-btn.loading {

    pointer-events: none;

}

.booking-submit-btn.loading i {

    animation: bookingSpin .9s linear infinite;

}

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

.payment-option:focus-visible {

    outline: none;

    border-color: var(--booking-primary);

    box-shadow: 0 0 0 4px rgba(244, 180, 0, .15);

}

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

.booking-input .form-control:focus-visible,
.booking-input .form-select:focus-visible {

    outline: none;

}

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

.booking-submit-btn:focus-visible {

    outline: none;

    box-shadow:

        0 0 0 4px rgba(244, 180, 0, .18),

        0 12px 28px rgba(244, 180, 0, .25);

}

/* =========================
   AUTOFILL
========================= */

.booking-input input:-webkit-autofill,

.booking-input input:-webkit-autofill:hover,

.booking-input input:-webkit-autofill:focus {

    -webkit-box-shadow: 0 0 0 1000px #fff inset;

    -webkit-text-fill-color: #111827;

    transition: background-color 9999s ease-out;

}

/* =========================
   PLACEHOLDER
========================= */

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

    color: #9ca3af;

    opacity: 1;

}

/* =========================
   SELECT CURSOR
========================= */

.booking-input .form-select {

    cursor: pointer;

}

/* =========================
   SELECTION
========================= */

.booking-form-card ::selection {

    background: #fde68a;

    color: #111827;

}

/* =========================
   SMOOTH SCROLL
========================= */

.booking-form-wrap {

    scroll-behavior: smooth;

}

/* =========================
   ANIMATION
========================= */

@keyframes bookingFade {

    from {

        opacity: 0;

        transform: translateY(8px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

@keyframes bookingSpin {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}

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

@media(max-width:768px) {

    .booking-error,

    .booking-success,

    .booking-payment-status,

    .booking-paypal {

        margin-left: 18px;

        margin-right: 18px;

    }

}