/* /Components/AddPaymentMethodModal.razor.rz.scp.css */
.braintree-hosted-field[b-1uyacb85jm] {
    height: 36px;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
}

    .braintree-hosted-field:focus-within[b-1uyacb85jm] {
        border-color: #007bff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

/* Style billing ZIP to match Braintree hosted fields exactly */
.billing-zip-field[b-1uyacb85jm] {
    height: 36px;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
    width: 100%;
    font-size: 16px;
    font-family: Arial, sans-serif;
    color: #333;
    box-sizing: border-box;
}

    .billing-zip-field:focus[b-1uyacb85jm] {
        border-color: #007bff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        outline: none;
    }

    .billing-zip-field[b-1uyacb85jm]::placeholder {
        color: #aaa;
    }

.text-muted[b-1uyacb85jm] {
    color: #6c757d;
    font-size: 13px;
    margin-bottom: 8px;
}

/* Compact form layout */
[b-1uyacb85jm] .rz-stack {
    gap: 0.5rem !important;
}

[b-1uyacb85jm] .rz-form-field {
    margin-bottom: 0.5rem !important;
}

    [b-1uyacb85jm] .rz-form-field label {
        margin-bottom: 4px !important;
        font-size: 13px;
    }

[b-1uyacb85jm] .rz-textbox,
[b-1uyacb85jm] .rz-dropdown {
    min-height: 36px !important;
    height: 36px !important;
}

/* Compact payment type buttons */
[b-1uyacb85jm] .payment-type-buttons {
    gap: 8px;
    margin-bottom: 8px;
}

/* Braintree Security Badge */
.braintree-badge[b-1uyacb85jm] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 4px;
    margin-bottom: 4px;
    padding: 6px;
    font-size: 13px;
    color: #6c757d;
}

    .braintree-badge .lock-icon[b-1uyacb85jm] {
        width: 18px;
        height: 18px;
        color: #28a745;
        flex-shrink: 0;
    }

    .braintree-badge .badge-text[b-1uyacb85jm] {
        font-weight: 500;
        font-size: 13px;
    }

    .braintree-badge .braintree-link[b-1uyacb85jm] {
        display: inline-block;
        text-decoration: none;
        transition: opacity 0.2s;
    }

        .braintree-badge .braintree-link:hover[b-1uyacb85jm] {
            opacity: 0.8;
        }

    .braintree-badge .braintree-logo[b-1uyacb85jm] {
        height: 24px;
        width: auto;
        display: block;
    }

/* reCAPTCHA container - ensure enough width for Terms link */
.recaptcha-container[b-1uyacb85jm] {
    min-width: 304px;
    display: flex;
    justify-content: center;
}

/* Override RadzenFormField input styling for billing ZIP */
[b-1uyacb85jm] .rz-form-field .billing-zip-field {
    height: 36px !important;
    min-height: 36px !important;
}

/* Shake animation for validation errors */
@keyframes shake-b-1uyacb85jm {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.shake[b-1uyacb85jm] {
    animation: shake-b-1uyacb85jm 0.5s ease-in-out;
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

/* Braintree hosted field containers need explicit targeting */
#card-number.shake[b-1uyacb85jm],
#expiration-date.shake[b-1uyacb85jm],
#cvv.shake[b-1uyacb85jm],
#modal-billing-zip.shake[b-1uyacb85jm] {
    animation: shake-b-1uyacb85jm 0.5s ease-in-out;
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}
/* /Components/AddressEntryComponent.razor.rz.scp.css */
/* AddressEntryComponent.razor.css
   Component-specific styles only.
   Global styles are in site.css
   ================================ */

/* Modal overlays defined in site.css */

/* Button styles defined in site.css */

/* Page content */
.content[b-ophqntajbx] {
    padding-top: 1.1rem;
}

/* Validation */
.valid.modified:not([type=checkbox])[b-ophqntajbx] {
    outline: 1px solid var(--brand-gold);
}

.invalid[b-ophqntajbx] {
    outline: 1px solid var(--cell-red);
}

.validation-message[b-ophqntajbx] {
    color: red;
}

.modal-title-display[b-ophqntajbx] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--brand-blue);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Error UI */
#blazor-error-ui[b-ophqntajbx] {
    background: var(--cell-yellow);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-ophqntajbx] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary[b-ophqntajbx] {
    background: url(data:image/svg+xml;base64,...) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary[b-ophqntajbx]::after {
        content: "An error has occurred.";
    }

/* Field separators */
.field-separator[b-ophqntajbx] {
    border-bottom: 1px solid var(--cell-grey);
    padding-bottom: 1rem;
    padding-top: 1rem;
}

    .field-separator:last-of-type[b-ophqntajbx] {
        border-bottom: none;
    }

/* Typography */
body[b-ophqntajbx], p[b-ophqntajbx], label[b-ophqntajbx], input[b-ophqntajbx], textarea[b-ophqntajbx], button[b-ophqntajbx] {
    font-size: inherit;
}

h1[b-ophqntajbx] {
    font-size: 2rem; /* ~32px max */
}

h2[b-ophqntajbx] {
    font-size: 1.5rem; /* ~24px max */
}

h4[b-ophqntajbx] {
    font-size: 0.8rem; /* ~24px max */
}

small[b-ophqntajbx] {
    font-size: 0.875rem; /* ~14px */
}

h1[b-ophqntajbx], h2[b-ophqntajbx], h3[b-ophqntajbx], h4[b-ophqntajbx], h5[b-ophqntajbx], h6[b-ophqntajbx] {
    color: var(--brand-blue-dark) !important;
    font-family: var(--font-base); /* e.g., Montserrat */
    font-weight: 600;
}

label[b-ophqntajbx], p[b-ophqntajbx] {
    color: var(--brand-blue);
}

.section-frame .address-arrow[b-ophqntajbx] {
    font-size: 24px !important;
    color: var(--brand-blue) !important;
    display: flex !important;
    align-items: center !important;
}

@media (max-width: 768px) {
    .section-frame .address-container[b-ophqntajbx] {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
    }

    .section-frame .address-box[b-ophqntajbx] {
        min-width: 0 !important;
        flex: 1 !important;
    }

    .section-frame .address-arrow[b-ophqntajbx] {
        flex: 0 0 auto !important;
    }
}

.custom-submit-button[b-ophqntajbx] {
    background-color: var(--brand-blue) !important;
    border-color: var(--brand-border) !important;
    color: white;
    text-align: center;
    min-width: 200px;
    padding: 10px 20px;
    font-size: 1.1rem;
    border-radius: 6px;
}

    .custom-submit-button:hover[b-ophqntajbx] {
        /*        background-color: #3267d6;
        border-color: #3267d6;*/
        background-color: #ffffff;
        color: var(--brand-gold);
    }


.home-top p.bookNow[b-ophqntajbx] {
    float: right;
    font-size: 14px;
    font-size: 1.4rem;
    color: #ffffff;
    padding: 9px 7px;
    margin-left: 25px;
    text-align: center;
    min-width: 96px;
    border: 0px solid var(--brand-border);
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    -moz-transition: all 0.1s ease;
    -webkit-transition: all 0.1s ease;
    transition: all 0.1s ease;
    background-color: var(--brand-gold);
    text-transform: none;
    font-weight: 400;
    letter-spacing: normal;
    line-height: normal;
}




.form-heading[b-ophqntajbx] {
    font-weight: bold;
    font-size: 1.6rem;
    text-align: center;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.form-instructions[b-ophqntajbx] {
    font-size: 1rem;
    color: #555;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.styled-input[b-ophqntajbx] {
    color: #333333;
    font-family: var(--font-base);
    font-size: 1rem;
    font-weight: 400;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    appearance: none; /* hides default arrow in some browsers */
    background-color: white;
    box-sizing: border-box;
}

    .styled-input[b-ophqntajbx]::placeholder {
        color: var(--brand-blue); /* Or a specific hex like #999 */
        font-family: var(--font-base); /* e.g., 'Montserrat', sans-serif */
        font-size: 0.95rem;
        opacity: .7; /* Ensure it's not faded */
    }

.styled-button[b-ophqntajbx] {
    background-color: var(--brand-gold);
    color: white;
    border: none;
    border-radius: 50px;
    padding: 12px 24px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .styled-button:hover[b-ophqntajbx] {
        background-color: #ffffff;
        color: var(--brand-gold);
    }

.styled-input:focus[b-ophqntajbx] {
    outline: none;
    border-color: var(--brand-gold);
    box-shadow: 0 0 3px var(--brand-gold)66;
}


.styled-input option[disabled][b-ophqntajbx] {
    color: #888888;
    font-style: italic;
}

.centered-image[b-ophqntajbx] {
    display: block;
    margin: 0 auto;
    width: 150px; /* or any fixed size */
    height: auto; /* maintain aspect ratio */
}

.text-blue[b-ophqntajbx] {
    /*color: var(--brand-blue-dark);*/
    color: var(--brand-blue);
}

.text-gold[b-ophqntajbx] {
    color: var(--brand-gold);
}

label.label-heading[b-ophqntajbx] {
    font-size: 1.3rem; /* Slightly larger than normal labels */
    font-weight: 600; /* Bold but not fully heavy */
    color: var(--brand-gold); /* Gold color from the PDF */
    display: block; /* Ensure block layout */
    margin-bottom: 0.25rem;
    margin-top: 1rem;
}

.styled-input[b-ophqntajbx] {
    color: var(--brand-blue-dark);
}

textarea.styled-input[b-ophqntajbx] {
    color: var(--brand-blue-dark);
    font-family: var(--font-base);
    font-size: 1rem;
}

.flag-emoji[b-ophqntajbx] {
    /*don't change this font its for the flags*/
    font-family: "Noto Color Emoji", "Segoe UI Emoji", "Arial", sans-serif;
    font-size: 1.1em; /* Reduced from 1.2em */
    margin-right: 4px;
    display: inline-block;
    width: 22px; /* Reduced from 24px */
    text-align: center;
    line-height: 1;
}


label.smaller-label-heading[b-ophqntajbx] {
    font-size: 1rem;
    font-weight: 600; /* Bold but not fully heavy */
    color: var(--brand-gold); /* Gold color from the PDF */
    display: block; /* Ensure block layout */
    margin-bottom: 0.25rem;
    margin-top: 1rem;
}

input:-webkit-autofill[b-ophqntajbx],
input:-webkit-autofill:hover[b-ophqntajbx],
input:-webkit-autofill:focus[b-ophqntajbx],
textarea:-webkit-autofill[b-ophqntajbx],
textarea:-webkit-autofill:hover[b-ophqntajbx],
textarea:-webkit-autofill:focus[b-ophqntajbx],
select:-webkit-autofill[b-ophqntajbx] {
    -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
    -webkit-text-fill-color: black !important;
    background-color: var(--white) !important;
    transition: background-color 9999s ease-out, color 9999s ease-out;
}

/* Override Bootstrap's px-4 */
.px-4[b-ophqntajbx] {
    padding-left: 0.25rem !important; /* half of original */
    padding-right: 0.25rem !important;
}


/*new css for floating entry fields*/

/* === Floating label system === */

.float-field[b-ophqntajbx] {
    position: relative;
    margin-bottom: 22px; /* space between fields */
}

.float-input.form-control[b-ophqntajbx] {
    height: auto !important; /* kill Bootstrap�s fixed height */
    min-height: 56px; /* adjust as needed */
    max-height: 56px;
    padding: 30px 14px 12px 14px; /* room at top for label */
    font-size: 16px; /* avoids iPhone zoom */
    line-height: 1.45;
    box-sizing: border-box;
}

    .float-input.form-control[b-ophqntajbx]::placeholder {
        color: #999; /* faint gray placeholder text */
        opacity: 0.6;
    }

.float-label[b-ophqntajbx] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 15px;
    background: #fff;
    padding: 0 2px;
    transition: top .18s, font-size .18s, transform .18s, opacity .18s;
    opacity: .92;
}

.float-input:focus + .float-label[b-ophqntajbx],
.float-field.has-value .float-label[b-ophqntajbx] {
    top: 8px;
    transform: none;
    font-size: 12px;
    opacity: .85;
}

textarea.float-input[b-ophqntajbx] {
    min-height: 120px;
    padding-top: 38px;
}


/* Floating label system defined in site.css */
/* Additional floating label styles defined in site.css */

/* Primary section heading with left accent stripe */
.app-heading[b-ophqntajbx] {
    margin: 10px 0 6px 0;
    padding: 8px 10px;
    color: var(--brand-blue-dark);
    background: var(--brand-blue-50);
    */ /* Light blue background */
    border-left: 6px solid var(--brand-blue);
    border-radius: 0 8px 8px 0; /* Round only right side */
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
}

    .app-heading > label[b-ophqntajbx] {
        display: block;
        margin: 0;
        width: 100%;
        color: var(--brand-blue-dark);
    }
/* Smaller heading (for sub-sections) */
.app-subheading[b-ophqntajbx] {
    margin: 8px 0 4px 0;
    padding: 6px 10px;
    color: var(--brand-blue-dark);
    background: #F7FAFF;
    border-left: 4px solid var(--brand-blue);
    border-radius: 6px;
    font-weight: 600;
    line-height: 1.2;
}

/* Optional: a subtle framed block to pair with headings */
.app-block[b-ophqntajbx] {
    border: 1px solid var(--brand-border);
    border-radius: 10px;
    padding: 10px;
    background: #fff;
}

/* Utility: highlighted �route� row (e.g., PHX ? LGB) */
.app-route[b-ophqntajbx] {
    background: var(--brand-blue-50);
    border-left: 4px solid var(--brand-blue);
    border-radius: 6px;
    padding: 6px 10px;
    color: var(--brand-blue-dark);
    font-weight: 600;
    line-height: 1.25;
}


/* default: hide headers for mobile */
.app-heading[b-ophqntajbx] {
    display: none;
}

/* tablet/desktop: show headers */
@media (min-width: 768px) {
    .app-heading[b-ophqntajbx] {
        display: block;
        padding: .5rem .75rem;
        border-radius: 0 8px 8px 0; /* Round only right side */
        border-left: 6px solid var(--brand-blue); /* Ensure left border shows */
        background: var(--brand-blue-50); /* Light blue background */
        font-weight: 700;
    }
}

/* Brand colors defined in site.css */

.wc-badge[b-ophqntajbx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border: 2px solid var(--brand-blue);
    border-radius: .45rem; /* or 50% for a circle */
    background: #fff; /* white fill */
    color: var(--brand-blue); /* blue lines */
    font-size: 1rem;
    line-height: 1;
    font-weight: 700;
    margin-right: .375rem;
}


/* ===== Vertically center checkbox + text on narrow screens ===== */
@media (max-width: 520px) {
    /* Treat each toggle row as a 2-col grid: [checkbox | text] */
    .address-entry-content .return-switch[b-ophqntajbx],
    .address-entry-content .wc-toggle[b-ophqntajbx] {
        display: grid;
        grid-template-columns: 24px 1fr; /* 18px box + breathing room */
        column-gap: 8px;
        align-items: center; /* centers text vs. checkbox */
    }

    /* Center the actual checkbox in its cell (remove optical nudge) */
    .address-entry-content #ReturnTripToggle[b-ophqntajbx],
    .address-entry-content #HourlyServiceToggle[b-ophqntajbx],
    .address-entry-content .return-switch-input[b-ophqntajbx] {
        margin: 0; /* overrides any top offset */
        align-self: center; /* vertical center in the first column */
    }

    /* Make the text block vertically centered relative to the box */
    .address-entry-content .return-switch-label[b-ophqntajbx],
    .address-entry-content .hourly-service-label[b-ophqntajbx],
    .address-entry-content .return-trip-summary[b-ophqntajbx] {
        display: flex;
        align-items: center; /* centers the text within its own line box */
        min-height: 18px; /* match checkbox size so single-line aligns */
        line-height: 1.25;
    }
}







/* === Address entry (global/shared) ===================================== */

/* Row spacing around each address field */
.address-row[b-ophqntajbx] {
    margin: 10px 0 14px;
}

/* Route connector between pickup and dropoff */
.route-connector[b-ophqntajbx] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    margin: -8px 0;
}

.route-line[b-ophqntajbx] {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, #d0d0d0 20%, #d0d0d0 80%, transparent);
    max-width: 80px;
}

.route-arrow[b-ophqntajbx] {
    font-family: 'Material Icons' !important;
    font-size: 20px;
    color: #999;
    padding: 0 8px;
    font-weight: normal;
    font-style: normal;
    line-height: 1;
}

/* Anchor for absolute-positioned icon/clear button */
.address-field[b-ophqntajbx] {
    position: relative;
    margin-bottom: 0;
}

/* Input: tall enough for floated label + text, iOS-safe font size */
.address-input[b-ophqntajbx] {
    width: 100%;
    min-height: 50px;
    padding: 20px 36px 5px 36px; /* label+icon left, clear on right */
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px; /* prevent iPhone zoom */
    box-sizing: border-box;
    color: var(--brand-blue);
    background: #fff;
}

/* Float label pattern */
.float-field[b-ophqntajbx] {
    position: relative;
}

.float-input[b-ophqntajbx]::placeholder {
    color: #999;
    opacity: 0.6;
}
/* keep for :placeholder-shown */

.float-label[b-ophqntajbx] {
    position: absolute;
    left: 36px; /* sits past the icon */
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem; /* larger when empty */
    line-height: 1;
    pointer-events: none;
    opacity: .8;
    transition: top .15s ease, transform .15s ease, font-size .15s ease, opacity .15s ease;
}

.float-input:focus + .float-label[b-ophqntajbx],
.float-input:not(:placeholder-shown) + .float-label[b-ophqntajbx] {
    top: 6px; /* float up */
    transform: none;
    font-size: .78rem;
    opacity: .95;
}

/* Leading icon (?? by default, ?? when [data-kind="airport"]) */
.address-icon[b-ophqntajbx] {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 14px;
    line-height: 1;
}

    .address-icon[b-ophqntajbx]::before {
        content: "\F3E8"; /* Bootstrap Icons geo-alt U+F3E8 */
        font-family: "bootstrap-icons";
    }

    .address-icon[data-kind="airport"][b-ophqntajbx]::before {
        content: "\F7CD"; /* Bootstrap Icons airplane U+F7CD */
        font-family: "bootstrap-icons";
    }

/* Clear (X) button on the right */
.clear-button[b-ophqntajbx] {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: .9em;
    cursor: pointer;
    color: #666;
    z-index: 1000; /* above the dropdown list */
}

    .clear-button:hover[b-ophqntajbx] {
        color: #000;
    }

/* Optional read-only line under the field for full street address */
.readonly-address[b-ophqntajbx] {
    margin: 4px 0 0;
    padding: 0;
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border: 0 !important;
    background: transparent !important;
    color: #374151;
    font-size: 0.65rem;
    line-height: 1.025;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Google Places-style dropdown: keep above footers/modals */
.pac-container[b-ophqntajbx] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #dfe1e5;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(60,64,67,.30);
    z-index: 6000 !important;
    max-height: 320px;
    overflow-y: auto;
    padding: 6px 0;
}

/* Optional: item hover/selected feel */
.pac-item[b-ophqntajbx] {
    padding: 6px 12px;
    line-height: 1;
    cursor: pointer;
}

    .pac-item:hover[b-ophqntajbx], .pac-item.pac-item-selected[b-ophqntajbx] {
        background: #f1f3f4;
    }


/* Hide empty Google Places dropdowns */
.pac-container:empty[b-ophqntajbx] {
    display: none !important;
}

/* Also hide when it exists but contains no .pac-item rows */
.pac-container:not(:has(.pac-item))[b-ophqntajbx] {
    display: none !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* If your template sometimes leaves only a section label, hide that too */
.pac-container:has(.pac-section-label):not(:has(.pac-item))[b-ophqntajbx] {
    display: none !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}



/* === Google Places suggestion formatting (global) === */

/* Container */
.pac-container[b-ophqntajbx] {
    background: #fff;
    border: 1px solid #dfe1e5;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(60,64,67,.30);
    z-index: 6000 !important;
    max-height: 320px;
    overflow-y: auto;
    padding: 6px 0;
}

/* Row */
.pac-item[b-ophqntajbx] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 12px;
    cursor: pointer;
    line-height: 1.0;
    user-select: none;
}

    .pac-item:hover[b-ophqntajbx],
    .pac-item.pac-item-selected[b-ophqntajbx] {
        background: #f1f3f4;
    }

/* Leading icon */
.pac-icon[b-ophqntajbx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    opacity: .7;
}

    .pac-icon[b-ophqntajbx]::before {
        content: "\F3E8"; /* Bootstrap Icons geo-alt U+F3E8 */
        font-family: "bootstrap-icons";
    }

.pac-item-airport .pac-icon[b-ophqntajbx]::before {
    content: "\F7CD"; /* Bootstrap Icons airplane */
    font-family: "bootstrap-icons";
}

/* Text block */
.pac-item-text[b-ophqntajbx] {
    min-width: 0;
}

.pac-item-primary-text[b-ophqntajbx] {
    display: inline;
    color: #202124;
    font-weight: 600; /* <-- bold main line */
    font-size: 14px;
}

.pac-item-secondary-text[b-ophqntajbx] {
    display: inline;
    margin-left: 4px;
    color: #5f6368;
    font-weight: 700;
    font-size: 14px; /* <-- smaller city/state line */
}

.pac-matched[b-ophqntajbx] {
    font-weight: 700;
}
/* bold the matched characters */

/* Hide empty dropdowns (stops the blank box) */
.pac-container:empty[b-ophqntajbx] {
    display: none !important;
}

.pac-container:not(:has(.pac-item))[b-ophqntajbx] {
    display: none !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}


/* make this specific toggle a 3-col grid: [checkbox] [icon] [text] */
.toggle-row.has-icon[b-ophqntajbx] {
    display: grid;
    grid-template-columns: auto auto 1fr; /* checkbox | icon | text */
    align-items: center;
    column-gap: 8px;
}

/* icon column */
.rt-col-icon[b-ophqntajbx] {
    margin: 0;
    line-height: 1;
    font-size: 1rem; /* match your brand size */
    color: var(--brand-blue, #216fed);
}

/* text column already wraps; keep it inline with title */
.toggle-row.has-icon .toggle-text[b-ophqntajbx] {
    white-space: normal;
}


/* Unified row for checkbox + text */
.toggle-row[b-ophqntajbx] {
    display: flex;
    align-items: flex-start; /* aligns checkbox top with first line of text */
    gap: 8px;
    margin: 4px 7px 2px 4px;
}

/* small screens still wrap nicely (no change needed) */
@media (max-width:520px) {
    .toggle-row.has-icon[b-ophqntajbx] {
        grid-template-columns: auto 1fr; /* checkbox + [icon+text] stack if you prefer */
        grid-auto-flow: column;
    }
}
/* Global hint color */
/* Hint color defined in site.css */

/* All floating hints (labels that sit on top of boxes) use the global color */
.float-label[b-ophqntajbx] {
    color: var(--brand-blue-dark) !important;
}

/* If you also use a smaller hint line under fields */
.input-hint[b-ophqntajbx] {
    color: var(--brand-blue-dark) !important;
}
/* ============================
   Radzen Date/Time popups � brand them globally
   ============================ */

/* Shrink Radzen DatePicker popup (overlay + inner panel + calendar) */
body > div[class*="rz-overlay"][b-ophqntajbx] {
    transform-origin: top left !important;
    transform: scale(.92) !important; /* try .95� .85 */
}

    /* If Radzen wraps the popup in an inner panel, scale that too */
    body > div[class*="rz-overlay"] .rz-overlaypanel[b-ophqntajbx],
    body > div[class*="rz-overlay"] .rz-overlaypanel-content[b-ophqntajbx],
    body > div[class*="rz-overlay"] .rz-popup[b-ophqntajbx],
    body > div[class*="rz-overlay"] .rz-calendar[b-ophqntajbx] {
        transform-origin: top left !important;
        transform: scale(.92) !important;
    }

    /* Make internal targets smaller so hit-areas feel consistent */
    body > div[class*="rz-overlay"] .rz-calendar[b-ophqntajbx] {
        font-size: 0.875rem !important;
    }

        body > div[class*="rz-overlay"] .rz-calendar .rz-calendar-day[b-ophqntajbx],
        body > div[class*="rz-overlay"] .rz-calendar .rz-calendar-month[b-ophqntajbx] {
            width: 2rem !important;
            height: 2rem !important;
            line-height: 2rem !important;
            padding: 0 !important;
        }

    body > div[class*="rz-overlay"] .rz-timepicker .rz-inputtext[b-ophqntajbx] {
        width: 2.6rem !important;
    }

    /* === Radzen DatePicker popup shrink (applied to the CALENDAR root) === */
    /* You already confirmed the overlay selector sticks (blue outline). */
    body > div[class*="rz-overlay"] .rz-calendar[b-ophqntajbx] {
        transform: scale(0.92) !important; /* try 0.95 � 0.85 */
        transform-origin: top left !important; /* keeps it anchored */
    }

    /* Time panel usually sits adjacent; scale it too for consistency */
    body > div[class*="rz-overlay"] .rz-timepicker[b-ophqntajbx] {
        transform: scale(0.92) !important;
        transform-origin: top left !important;
    }

    /* Optional: nudge if the popup ends up a few px off after scaling */
    body > div[class*="rz-overlay"] .rz-calendar[b-ophqntajbx],
    body > div[class*="rz-overlay"] .rz-timepicker[b-ophqntajbx] {
        /* uncomment and tweak if needed */
        /* translate: -4px -4px; */

        body > div[class*="rz-overlay"] .rz-calendar outline: 2px dashed magenta !important;
    }



/* Airline dialog: responsive shell */
.dlg-airline[b-ophqntajbx] {
    width: 96vw !important;
    max-width: 420px !important;
}

@media (max-width: 430px) {
    .dlg-airline[b-ophqntajbx] {
        width: 90vw !important;
        max-width: 380px !important;
    }
}

/* Optional: remove default inner padding if you want edge-to-edge list */
.dlg-airline .rz-dialog-content[b-ophqntajbx] {
    padding: 0 !important;
}

/* Make the popup taller/scrollable if you want */
.airline-dd-popup .rz-dropdown-items[b-ophqntajbx] {
    max-height: 80vh;
    overflow: auto;
}

/* Halve vertical padding on each row */
.airline-dd-popup li.rz-dropdown-item[b-ophqntajbx] {
    padding-block: 6.75px !important; /* was ~13.5px */
    padding-inline: 12px !important; /* tweak if needed */
    line-height: 1.2;
}

    /* Some Radzen builds add an inner wrapper�kill extra padding there too */
    .airline-dd-popup li.rz-dropdown-item > .rz-dropdown-item-content[b-ophqntajbx] {
        padding: 0 !important;
        margin: 0 !important;
    }


/* Make the popup scroll tall like your list */
.airline-dd-popup .rz-dropdown-items[b-ophqntajbx] {
    max-height: 80vh;
    overflow: auto;
}

/* HALVE the default row padding (Radzen ~13.5px block by default) */
.airline-dd-popup li.rz-dropdown-item[b-ophqntajbx] {
    padding-block: 6.75px !important; /* 13.5px -> 6.75px */
    padding-inline: 10px !important;
    line-height: 1.15 !important;
    min-height: 0 !important; /* defeat any min-height */
}

    /* Some builds wrap content; remove inner padding too */
    .airline-dd-popup li.rz-dropdown-item > .rz-dropdown-item-content[b-ophqntajbx] {
        padding: 0 !important;
        margin: 0 !important;
    }

/* Your template row: very compact, matching the old list */
.airline-dd-popup .dd-row[b-ophqntajbx] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0 !important; /* keep it tight inside the li padding */
    font-size: 0.95rem;
}

/* Group headers look like your existing section bars */
.airline-dd-popup .dd-group-title[b-ophqntajbx] {
    display: block;
    text-align: center;
    color: #fff;
    margin: 4px 6px 2px;
    padding: 4px 8px !important;
    border-radius: 8px;
    font-weight: 700;
    background: var(--brand-blue-dark);
    pointer-events: none;
}

/* Code chip and name to match your screenshot */
.airline-dd-popup .dd-code[b-ophqntajbx] {
    display: inline-block;
    min-width: 2.1rem;
    text-align: center;
    font-weight: 700;
    border-radius: 10px;
    border: 1px solid #c8d8ff;
    background: #eaf1ff;
    padding: 2px 6px;
}

.airline-dd-popup .sep[b-ophqntajbx] {
    opacity: .55;
}

.airline-dd-popup .dd-name[b-ophqntajbx] {
    color: var(--brand-blue);
}
/* Apply directly to the popup container that Radzen inserts under <body> */
:root :where(.airline-dd-popup)[b-ophqntajbx] {
    /* halve the padding Radzen uses */
    --rz-dropdown-item-padding: 6.75px 10px; /* was ~13.5px 18px */
    --rz-dropdown-item-line-height: 1.15;
    /* some themes use these too */
    --rz-dropdown-item-content-padding: 0;
    --rz-dropdown-item-min-height: 0;
}

    /* Safety: if the theme also sets a min-height, kill it */
    :root :where(.airline-dd-popup) li.rz-dropdown-item[b-ophqntajbx] {
        min-height: 0 !important;
    }


/* Radzen dropdown padding defined in site.css */

.rz-dialog-title[b-ophqntajbx] {
    color: var(--brand-blue-dark);
}


/* Show hand cursor when hovering over the dropdown area */
.airline-picker[b-ophqntajbx] (.rz-dropdown),
.airline-picker[b-ophqntajbx] (.rz-dropdown-label),
.airline-picker[b-ophqntajbx] (.rz-dropdown-trigger),
.airline-picker[b-ophqntajbx] (.rz-dropdown-item) {
    cursor: pointer !important;
}


.airline-picker[b-ophqntajbx] {
    cursor: pointer !important;
}

/* Radzen dropdown header variables defined in site.css */

/* 1) Convention header: anything with .rz-dd-header inside any dropdown popup */
:root :where(.rz-dropdown-panel) .rz-dd-header[b-ophqntajbx] {
    display: block; /* or grid/flex in your specific header */
    background: var(--rz-dd-header-bg);
    color: var(--rz-dd-header-fg);
    font-weight: 700;
    border-radius: var(--rz-dd-header-radius);
    padding: var(--rz-dd-header-pad);
    margin: var(--rz-dd-header-margin);
    pointer-events: none; /* non-selectable */
}

/* Optional: make the <li> wrapper non-selectable if your header sits inside it */
:root :where(.rz-dropdown-panel) li.rz-dropdown-item:has(.rz-dd-header)[b-ophqntajbx] {
    pointer-events: none;
}

/* 2) Built-in group headers (if you use GroupProperty on RadzenDropDown) */
:root :where(.rz-dropdown-panel) .rz-dropdown-group[b-ophqntajbx] {
    background: var(--rz-dd-header-bg);
    color: var(--rz-dd-header-fg);
    font-weight: 700;
    border-radius: var(--rz-dd-header-radius);
    padding: var(--rz-dd-header-pad);
    margin: var(--rz-dd-header-margin);
    display: grid;
}

/* Keep normal rows� hover unaffected */
:root :where(.rz-dropdown-panel) .rz-dropdown-item:hover .rz-dd-header[b-ophqntajbx] {
    background: var(--rz-dd-header-bg);
}


/* Dropdown header sizing (variables in site.css) */

:root :where(.rz-dropdown-panel) .rz-dd-header[b-ophqntajbx],
:root :where(.rz-dropdown-panel) .rz-dropdown-group[b-ophqntajbx] {
    padding: var(--rz-dd-header-pad);
    font-size: var(--rz-dd-header-font);
    line-height: 1.105; /* tighter vertical rhythm */
    align-items: center;
    margin: 2px 6px; /* was 4px 6px */
    border-radius: 2px; /* keep consistent but could use 4px */
}


/* ============================================
   Normalize Radzen dropdown header appearance
   ============================================ */

/* Force consistent header font across ALL dropdowns */
:root :where(.rz-dropdown-panel) .rz-dd-header[b-ophqntajbx] {
    font-size: var(--rz-dd-header-font, 0.84rem) !important;
    font-weight: 600; /* match airline header weight */
    line-height: 1.15;
}

/* Optional: slightly tighter header for flight dropdown grid */
:root :where(.flightnum-dd-popup) .rz-dd-header[b-ophqntajbx] {
    font-size: var(--rz-dd-header-font, 0.84rem) !important;
    line-height: 1.1;
    padding-top: 3px;
    padding-bottom: 3px;
}
/* ============================================
   Normalize Radzen dropdown header appearance
   ============================================ */

/* Force consistent header font across ALL dropdowns */
:root :where(.rz-dropdown-panel) .rz-dd-header[b-ophqntajbx] {
    font-size: var(--rz-dd-header-font, 0.64rem) !important;
    font-weight: 600; /* match airline header weight */
    line-height: 1.15;
    padding-left: 1px;
    padding-right: 1px;
}

/* Optional: slightly tighter header for flight dropdown grid */
:root :where(.flightnum-dd-popup) .rz-dd-header[b-ophqntajbx] {
    font-size: var(--rz-dd-header-font, 0.64rem) !important;
    line-height: 1.1;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 1px;
    padding-right: 1px;
}


:root :where(.rz-dropdown-panel) .dd-grid .dd-cell[b-ophqntajbx] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 6px;
    border-right: 1px solid var(--dd-col-sep);
    color: var(--brand-blue);
    font-size: 15px;
}
/* ===============================
   DateTimeEntryComponent Dialog Styles
   Add this to your site.css file
   =============================== */

.dlg-datetime[b-ophqntajbx] {
    width: 96vw !important;
    max-width: 420px !important;
}

@media (max-width: 430px) {
    .dlg-datetime[b-ophqntajbx] {
        max-width: 96vw !important;
    }
}

.dlg-datetime .rz-dialog-content[b-ophqntajbx] {
    padding: 0 !important;
}



/* Address button 3-column grid layout - icon far left, text centered, chevron far right */
.address-button.rz-button[b-ophqntajbx] {
    padding: 0 16px !important; /* Horizontal padding for the button */
}

    /* Use CSS Grid for 3-column layout */
    .address-button.rz-button .rz-button-box[b-ophqntajbx] {
        display: grid !important;
        grid-template-columns: auto 1fr auto !important; /* icon | text | chevron */
        align-items: center !important;
        width: 100% !important;
        gap: 8px !important; /* Small gap between columns */
    }

        /* Left column: Icon stays on far left */
        .address-button.rz-button .rz-button-box > i.rzi:first-child[b-ophqntajbx] {
            justify-self: start !important;
        }

        /* Middle column: Text centered */
        .address-button.rz-button .rz-button-box > span[b-ophqntajbx] {
            justify-self: center !important;
            text-align: center !important;
        }

        /* Right column: Chevron stays on far right */
        .address-button.rz-button .rz-button-box > i.rzi:last-child[b-ophqntajbx] {
            justify-self: end !important;
        }

/* ========================================
   MULTILINE ADDRESS BUTTON STYLES
   Allows text to wrap to 2 lines maximum
   ======================================== */

.address-button-multiline.rz-button[b-ophqntajbx] {
    min-height: 56px !important;
}

    .address-button-multiline.rz-button .rz-button-box[b-ophqntajbx] {
        display: flex !important;
        align-items: flex-start !important;
        width: 100% !important;
        gap: 10px !important;
        text-align: left !important;
    }

/* Text container with 2-line clamp */
.address-text-multiline[b-ophqntajbx] {
    flex: 1 1 auto !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: break-word !important;
    line-height: 1.4 !important;
    text-align: left !important;
    max-width: 100% !important;
}

/* Ensure single-line text is vertically centered */
.address-button-multiline.rz-button .rz-button-box > i.rzi:first-child[b-ophqntajbx],
.address-button-multiline.rz-button .rz-button-box > i.rzi:last-child[b-ophqntajbx] {
    flex-shrink: 0 !important;
}

/* Mobile: ensure proper wrapping on small screens */
@media (max-width: 480px) {
    .address-button-multiline.rz-button[b-ophqntajbx] {
        padding: 0 12px !important;
        min-height: 70px !important;
    }

        .address-button-multiline.rz-button .rz-button-box[b-ophqntajbx] {
            gap: 8px !important;
        }

    .address-text-multiline[b-ophqntajbx] {
        font-size: 14px !important;
        line-height: 1.3 !important;
    }
}


/* ========================================
   STATIONARY LABEL DROPDOWN PATTERN
   
   Add this section to your site.css file
   
   Features:
   - 100% width dropdowns
   - Labels ALWAYS overlap the top border (stationary)
   - Smaller label font (0.75rem)
   - Works with Radzen and standard selects
   - Reusable across entire site
   - NO animation - labels stay in place
   ======================================== */

.float-dropdown[b-ophqntajbx] {
    position: relative;
    margin-bottom: 20px;
}

    /* Dropdown/select styling - works with Radzen and standard selects */
    .float-dropdown .rz-dropdown[b-ophqntajbx],
    .float-dropdown select[b-ophqntajbx],
    .float-dropdown .dropdown-control[b-ophqntajbx] {
        width: 100% !important;
        min-height: 48px;
        padding: 16px 12px 8px 12px;
        border: 1px solid #ced4da;
        border-radius: 4px;
        font-size: 1rem;
        background-color: white;
        box-sizing: border-box;
        transition: border-color 0.2s ease;
    }

    /* Stationary label - outline pill positioned over top border */
    .float-dropdown .float-label[b-ophqntajbx] {
        position: absolute;
        left: 12px;
        top: -10px;
        background-color: white;
        padding: 2px 10px;
        font-size: 0.7rem;
        font-weight: 600;
        color: var(--brand-blue, var(--brand-blue));
        border: 1px solid var(--brand-blue, var(--brand-blue));
        border-radius: var(--chip-radius, 6px);
        pointer-events: none;
        z-index: 1;
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }

    /* Focus states - label stays in same position */
    .float-dropdown .rz-dropdown:focus[b-ophqntajbx],
    .float-dropdown select:focus[b-ophqntajbx],
    .float-dropdown .dropdown-control:focus[b-ophqntajbx] {
        outline: none;
        border-color: var(--brand-blue, var(--brand-blue));
        box-shadow: 0 0 0 2px rgba(41, 99, 168, 0.1);
    }

        .float-dropdown .rz-dropdown:focus ~ .float-label[b-ophqntajbx],
        .float-dropdown select:focus ~ .float-label[b-ophqntajbx],
        .float-dropdown .dropdown-control:focus ~ .float-label[b-ophqntajbx] {
            color: var(--brand-blue, var(--brand-blue));
            font-weight: 600;
        }

    /* Ensure Radzen dropdowns take full width */
    .float-dropdown .rz-dropdown[b-ophqntajbx] {
        display: block !important;
    }

    .float-dropdown .rz-dropdown-label-container[b-ophqntajbx] {
        width: 100% !important;
    }

    /* Validation states */
    .float-dropdown.invalid .rz-dropdown[b-ophqntajbx],
    .float-dropdown.invalid select[b-ophqntajbx],
    .float-dropdown.invalid .dropdown-control[b-ophqntajbx] {
        border-color: var(--cell-red, #d9534f);
    }

    .float-dropdown.invalid .float-label[b-ophqntajbx] {
        color: var(--cell-red, #d9534f);
        border-color: var(--cell-red, #d9534f);
    }

    .float-dropdown.valid .rz-dropdown[b-ophqntajbx],
    .float-dropdown.valid select[b-ophqntajbx],
    .float-dropdown.valid .dropdown-control[b-ophqntajbx] {
        border-color: var(--cell-green, #5cb85c);
    }

/* Mobile responsive adjustments */
@media (max-width: 400px) {
    .float-dropdown .rz-dropdown[b-ophqntajbx],
    .float-dropdown select[b-ophqntajbx],
    .float-dropdown .dropdown-control[b-ophqntajbx] {
        min-height: 44px;
        padding: 14px 10px 6px 10px;
        font-size: 0.95rem;
    }

    .float-dropdown .float-label[b-ophqntajbx] {
        font-size: 0.7rem;
        top: -7px;
    }
}




/* ========================================
   REUSABLE: Stationary Label Dropdown Pattern
   Add this to your site.css
   Can be used across all components
   ======================================== */

.float-dropdown[b-ophqntajbx] {
    position: relative;
    margin-bottom: 20px;
}

    /* Label - outline pill at top, overlapping border */
    .float-dropdown .float-label[b-ophqntajbx] {
        position: absolute !important;
        left: 12px !important;
        top: -10px !important;
        background-color: white !important;
        padding: 2px 10px !important;
        font-size: 0.6rem !important;
        font-weight: 600 !important;
        color: var(--brand-blue, var(--brand-blue)) !important;
        border: 1px solid var(--brand-blue, var(--brand-blue)) !important;
        border-radius: var(--chip-radius, 6px);
        pointer-events: none !important;
        z-index: 10 !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        line-height: 1.2 !important;
    }

    /* Radzen dropdown base styling */
    .float-dropdown .rz-dropdown[b-ophqntajbx] {
        width: 100% !important;
        min-height: 56px !important;
        padding: 18px 16px 10px 16px !important;
        border: 1px solid #ced4da !important;
        border-radius: 50px !important;
        font-size: 1rem !important;
        background-color: white !important;
        box-sizing: border-box !important;
        transition: border-color 0.2s ease;
    }

    /* Standard select/dropdown-control styling */
    .float-dropdown select[b-ophqntajbx],
    .float-dropdown .dropdown-control[b-ophqntajbx] {
        width: 100% !important;
        min-height: 56px !important;
        padding: 18px 12px 10px 12px !important;
        border: 1px solid #ced4da !important;
        border-radius: 4px !important;
        font-size: 1rem !important;
        background-color: white !important;
        box-sizing: border-box !important;
        transition: border-color 0.2s ease;
    }

        /* Focus states */
        .float-dropdown .rz-dropdown:focus[b-ophqntajbx],
        .float-dropdown .rz-dropdown:focus-within[b-ophqntajbx],
        .float-dropdown select:focus[b-ophqntajbx],
        .float-dropdown .dropdown-control:focus[b-ophqntajbx] {
            outline: none !important;
            border-color: var(--brand-blue, var(--brand-blue)) !important;
            box-shadow: 0 0 0 2px rgba(41, 99, 168, 0.1) !important;
        }

            /* Label gets bolder on focus */
            .float-dropdown .rz-dropdown:focus ~ .float-label[b-ophqntajbx],
            .float-dropdown .rz-dropdown:focus-within ~ .float-label[b-ophqntajbx],
            .float-dropdown select:focus ~ .float-label[b-ophqntajbx],
            .float-dropdown .dropdown-control:focus ~ .float-label[b-ophqntajbx] {
                font-weight: 600 !important;
            }

    /* Ensure Radzen dropdown takes full width */
    /*.float-dropdown .rz-dropdown {
        display: block !important;
    }*/
    .float-dropdown .dropdown-text[b-ophqntajbx] {
        text-align: center !important;
    }

    .float-dropdown .rz-dropdown-label-container[b-ophqntajbx] {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important; /* ? ADD THIS */
        align-items: center !important; /* ? ADD !important */
        padding: 0 !important;
    }


    .float-dropdown .rz-dropdown .rz-dropdown-label[b-ophqntajbx] {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important; /* ? ADD THIS */
        gap: 8px !important;
    }


    /* Make all float-dropdown elements show pointer cursor */
    .float-dropdown .rz-dropdown[b-ophqntajbx],
    .float-dropdown .rz-dropdown .rz-dropdown-label[b-ophqntajbx],
    .float-dropdown .rz-dropdown .rz-dropdown-trigger[b-ophqntajbx],
    .float-dropdown .rz-dropdown input[b-ophqntajbx] {
        cursor: pointer !important;
    }



    /* Validation states */
    .float-dropdown.invalid .rz-dropdown[b-ophqntajbx],
    .float-dropdown.invalid select[b-ophqntajbx],
    .float-dropdown.invalid .dropdown-control[b-ophqntajbx] {
        border-color: var(--cell-red, #d9534f) !important;
    }

    .float-dropdown.invalid .float-label[b-ophqntajbx] {
        color: var(--cell-red, #d9534f) !important;
        border-color: var(--cell-red, #d9534f) !important;
    }


    /* Center placeholder text in Radzen dropdowns */
    .float-dropdown .rz-placeholder[b-ophqntajbx] {
        text-align: center !important;
    }

    .float-dropdown.valid .rz-dropdown[b-ophqntajbx],
    .float-dropdown.valid select[b-ophqntajbx],
    .float-dropdown.valid .dropdown-control[b-ophqntajbx] {
        border-color: var(--cell-green, #5cb85c) !important;
    }

    .float-dropdown.valid .float-label[b-ophqntajbx] {
        color: var(--cell-green, #5cb85c) !important;
    }

/* Mobile adjustments */
@media (max-width: 400px) {
    .float-dropdown .rz-dropdown[b-ophqntajbx],
    .float-dropdown select[b-ophqntajbx],
    .float-dropdown .dropdown-control[b-ophqntajbx] {
        min-height: 52px !important;
        padding: 16px 10px 8px 10px !important;
        font-size: 0.95rem !important;
    }

    .float-dropdown .float-label[b-ophqntajbx] {
        font-size: 0.7rem !important;
        top: -5px !important;
    }
}


/* ========================================
   ADDRESS ENTRY BUTTONS
   Styled to match Passengers/Luggage dropdowns
   ======================================== */

/* Always hide the old desktop-only address input fields */
.address-field.desktop-only[b-ophqntajbx],
.readonly-address.desktop-only[b-ophqntajbx] {
    display: none !important;
}

/* Address Summary Button - Matches dropdown styling */
.address-summary-button[b-ophqntajbx] {
    width: 100%;
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 12px 16px 12px 48px;
    background: white;
    border: 1px solid #ced4da;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 16px;
    text-align: left;
    gap: 12px;
    font-family: var(--font-base);
    position: relative;
    box-sizing: border-box;
}

    .address-summary-button:hover[b-ophqntajbx],
    .address-summary-button:active[b-ophqntajbx] {
        border-color: var(--brand-blue, var(--brand-blue));
        box-shadow: 0 0 0 2px rgba(41, 99, 168, 0.1);
    }

/* Address Button Icon - Integrated like dropdowns */
.address-button-icon[b-ophqntajbx] {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 20px !important;
    flex-shrink: 0;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none;
    z-index: 2 !important;
    background: none !important;
    border-radius: 0 !important;
}

    /* Icon variants */
    .address-button-icon[data-kind="pin"][b-ophqntajbx]::before {
        content: "\F3E8"; /* Bootstrap Icons geo-alt U+F3E8 */
        font-family: "bootstrap-icons";
        font-weight: 600;
        color: var(--brand-blue, var(--brand-blue));
    }

    .address-button-icon[data-kind="airport-takeoff"][b-ophqntajbx]::before,
    .address-button-icon[data-kind="airport-landing"][b-ophqntajbx]::before {
        content: "\F7CD"; /* Bootstrap Icons airplane */
        font-family: "bootstrap-icons";
        font-weight: 700;
        color: var(--brand-blue-dark, var(--brand-blue-hover));
    }

    .address-button-icon[data-kind="airport-takeoff"][b-ophqntajbx]::before {
        transform: rotate(-22deg);
        display: inline-block;
    }

    .address-button-icon[data-kind="airport-landing"][b-ophqntajbx]::before {
        transform: rotate(22deg);
        display: inline-block;
    }

/* Address Button Content */
.address-button-content[b-ophqntajbx] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.address-button-label[b-ophqntajbx] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--brand-blue, var(--brand-blue));
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.2;
}

.address-button-value[b-ophqntajbx] {
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--brand-blue-dark, var(--brand-blue-dark));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

/* Chevron indicator - subtle like dropdown arrow */
.address-button-chevron[b-ophqntajbx] {
    flex-shrink: 0;
    font-size: 1.3rem;
    color: #666;
    font-weight: 300;
    transition: transform 0.2s ease;
    margin-left: auto;
}

.address-summary-button:hover .address-button-chevron[b-ophqntajbx] {
    color: var(--brand-blue, var(--brand-blue));
    transform: translateX(2px);
}

/* Mobile adjustments */
@media (max-width: 480px) {
    .address-summary-button[b-ophqntajbx] {
        min-height: 52px;
        padding: 10px 12px 10px 44px;
    }

    .address-button-icon[b-ophqntajbx] {
        left: 12px !important;
        font-size: 18px !important;
    }

    .address-button-label[b-ophqntajbx] {
        font-size: 0.65rem;
    }

    .address-button-value[b-ophqntajbx] {
        font-size: 0.9rem;
    }

    .address-button-chevron[b-ophqntajbx] {
        font-size: 1.2rem;
    }
}

/* Tablet and up adjustments */
@media (min-width: 481px) {
    .address-summary-button[b-ophqntajbx] {
        min-height: 58px;
        padding: 14px 18px 14px 52px;
    }

    .address-button-icon[b-ophqntajbx] {
        left: 16px !important;
        font-size: 22px !important;
    }

    .address-button-value[b-ophqntajbx] {
        font-size: 1rem;
    }
}

/* Desktop adjustments */
@media (min-width: 769px) {
    .address-summary-button[b-ophqntajbx] {
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Ensure address-row doesn't add extra spacing */
.address-row[b-ophqntajbx] {
    margin-bottom: 8px;
}

/* Focus state for accessibility - make it prominent */
.address-summary-button:focus[b-ophqntajbx] {
    outline: none;
    border-color: var(--brand-blue, var(--brand-blue));
    box-shadow: 0 0 0 3px rgba(41, 99, 168, 0.35), 0 0 8px rgba(41, 99, 168, 0.25);
}

/* Radzen Button Overrides for address-summary-button */
.address-summary-button.rz-button[b-ophqntajbx] {
    background: white !important;
    border: 1px solid #ced4da !important;
    color: inherit !important;
    box-shadow: none !important;
    font-family: var(--font-base) !important;
    height: auto !important;
    line-height: normal !important;
    justify-content: flex-start !important;
}

    .address-summary-button.rz-button:hover[b-ophqntajbx],
    .address-summary-button.rz-button:active[b-ophqntajbx] {
        background: white !important;
        border-color: var(--brand-blue, var(--brand-blue)) !important;
        box-shadow: 0 0 0 2px rgba(41, 99, 168, 0.1) !important;
    }

    .address-summary-button.rz-button:focus[b-ophqntajbx] {
        background: white !important;
        border-color: var(--brand-blue, var(--brand-blue)) !important;
        box-shadow: 0 0 0 3px rgba(41, 99, 168, 0.35), 0 0 8px rgba(41, 99, 168, 0.25) !important;
    }

/* Ensure responsive padding works with Radzen */
@media (max-width: 480px) {
    .address-summary-button.rz-button[b-ophqntajbx] {
        padding: 10px 12px 10px 44px !important;
    }
}

@media (min-width: 481px) {
    .address-summary-button.rz-button[b-ophqntajbx] {
        padding: 14px 18px 14px 52px !important;
    }
}

/* ===============================
   DateTime Component - Force Pill Shapes for Hour/Minute
   Add this at the END of site.css
   =============================== */
.time-input-group input[type="number"][b-ophqntajbx],
.datetime-entry-modal-content input[type="number"][b-ophqntajbx] {
    border-radius: 8px !important;
    -webkit-border-radius: 8px !important;
    -moz-border-radius: 8px !important;
    border: 2px solid #ced4da !important;
    box-sizing: border-box !important;
}

    .time-input-group input[type="number"]:focus[b-ophqntajbx],
    .datetime-entry-modal-content input[type="number"]:focus[b-ophqntajbx] {
        border-color: var(--brand-blue, var(--brand-blue)) !important;
        box-shadow: 0 0 0 0.2rem rgba(10, 74, 138, 0.15) !important;
    }

@media (max-width: 480px) {
    .time-input-group input[type="number"][b-ophqntajbx],
    .datetime-entry-modal-content input[type="number"][b-ophqntajbx] {
        border-radius: 8px !important;
        min-height: 52px !important;
        max-height: 52px !important;
        height: 52px !important;
    }
}
/* AM/PM RadzenDropDown styling */
.time-dropdown .rz-dropdown[b-ophqntajbx] {
    border-radius: 8px !important;
    border: 2px solid #ced4da !important;
    box-sizing: border-box !important;
}

    .time-dropdown .rz-dropdown:focus[b-ophqntajbx],
    .time-dropdown .rz-dropdown:focus-within[b-ophqntajbx] {
        border-color: var(--brand-blue, var(--brand-blue)) !important;
        box-shadow: 0 0 0 0.2rem rgba(10, 74, 138, 0.15) !important;
    }

/* Dropdown toggle button - make arrows bigger */
.datetime-entry-modal-content .dropdown-toggle-btn[b-ophqntajbx] {
    width: 36px !important;
    height: 36px !important;
}

    .datetime-entry-modal-content .dropdown-toggle-btn .rz-icon[b-ophqntajbx] {
        font-size: 32px !important;
    }

/* Mobile styles for AM/PM dropdown */
@media (max-width: 480px) {
    .time-dropdown .rz-dropdown[b-ophqntajbx] {
        border-radius: 8px !important;
        min-height: 52px !important;
        max-height: 52px !important;
        height: 52px !important;
    }
}


/* Style the AM/PM dropdown trigger with brand colors */
.time-dropdown .rz-dropdown-trigger[b-ophqntajbx],
.time-dropdown .rz-multiselect-trigger[b-ophqntajbx] {
    background-color: var(--brand-blue-light, #0a4a8a) !important;
    color: white !important;
    cursor: pointer !important;
    border-radius: 0 6px 6px 0 !important;
    transition: background-color 0.15s ease !important;
}

/* ===============================
   ADD THIS TO YOUR site.css FILE
   Radzen Dropdown Trigger Styling for DateTime Component
   =============================== */

/* Style the AM/PM dropdown trigger with brand colors */
.time-dropdown .rz-dropdown-trigger[b-ophqntajbx],
.time-dropdown .rz-multiselect-trigger[b-ophqntajbx] {
    background-color: var(--brand-blue-light, #0a4a8a) !important;
    color: white !important;
    cursor: pointer !important;
    border-radius: 0 6px 6px 0 !important;
    transition: background-color 0.15s ease !important;
}

    .time-dropdown .rz-dropdown-trigger:hover[b-ophqntajbx],
    .time-dropdown .rz-multiselect-trigger:hover[b-ophqntajbx] {
        background-color: var(--brand-blue-dark, #06325f) !important;
    }

    /* Style the icon inside the dropdown trigger */
    .time-dropdown .rz-dropdown-trigger .rz-dropdown-trigger-icon[b-ophqntajbx],
    .time-dropdown .rz-multiselect-trigger .rz-multiselect-trigger-icon[b-ophqntajbx] {
        color: white !important;
    }

/* Make the entire dropdown clickable with pointer cursor */
.time-dropdown .rz-dropdown[b-ophqntajbx] {
    cursor: pointer !important;
}

/* Mobile responsive styles */
@media (max-width: 480px) {
    .time-dropdown .rz-dropdown-trigger .rz-dropdown-trigger-icon[b-ophqntajbx],
    .time-dropdown .rz-multiselect-trigger .rz-multiselect-trigger-icon[b-ophqntajbx] {
        font-size: 28px !important;
    }
}


/* ===============================
   ADD THIS TO YOUR site.css FILE
   Radzen Dropdown Trigger Styling for DateTime Component
   =============================== */

/* Style the AM/PM dropdown trigger with subtle gray colors */
.time-dropdown .rz-dropdown-trigger[b-ophqntajbx],
.time-dropdown .rz-multiselect-trigger[b-ophqntajbx] {
    background-color: #e9ecef !important;
    color: #6c757d !important;
    cursor: pointer !important;
    border-radius: 0 6px 6px 0 !important;
    transition: background-color 0.15s ease !important;
}

    .time-dropdown .rz-dropdown-trigger:hover[b-ophqntajbx],
    .time-dropdown .rz-multiselect-trigger:hover[b-ophqntajbx] {
        background-color: #dee2e6 !important;
        color: #495057 !important;
    }

    /* Style the icon inside the dropdown trigger */
    .time-dropdown .rz-dropdown-trigger .rz-dropdown-trigger-icon[b-ophqntajbx],
    .time-dropdown .rz-multiselect-trigger .rz-multiselect-trigger-icon[b-ophqntajbx] {
        color: #6c757d !important;
    }

/* Make the entire dropdown clickable with pointer cursor */
.time-dropdown .rz-dropdown[b-ophqntajbx] {
    cursor: pointer !important;
}

/* Mobile responsive styles */
@media (max-width: 480px) {
    .time-dropdown .rz-dropdown-trigger .rz-dropdown-trigger-icon[b-ophqntajbx],
    .time-dropdown .rz-multiselect-trigger .rz-multiselect-trigger-icon[b-ophqntajbx] {
        font-size: 28px !important;
    }
}


/* ===============================
   ADD THIS TO THE END OF site.css
   Update float-field system for Passenger Contact Info
   =============================== */

/* Make float-field inputs full width with pill shape */
.passenger-contact-info-content .float-input.form-control[b-ophqntajbx] {
    width: 100% !important;
    border-radius: 50px !important;
    border: 2px solid #ced4da !important;
    min-height: 56px !important;
    max-height: 56px !important;
    padding: 24px 20px 10px 20px !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
}

    .passenger-contact-info-content .float-input.form-control:focus[b-ophqntajbx] {
        border-color: var(--brand-blue, var(--brand-blue)) !important;
        box-shadow: 0 0 0 0.2rem rgba(41, 99, 168, 0.15) !important;
        outline: none !important;
    }

    .passenger-contact-info-content .float-input.form-control:hover[b-ophqntajbx] {
        border-color: var(--brand-blue, var(--brand-blue)) !important;
    }

/* Float label positioning for passenger contact */
.passenger-contact-info-content .float-label[b-ophqntajbx] {
    left: 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--brand-blue, var(--brand-blue)) !important;
    background: white !important;
    padding: 0 8px !important;
}

.passenger-contact-info-content .float-input:focus + .float-label[b-ophqntajbx],
.passenger-contact-info-content .float-field.has-value .float-label[b-ophqntajbx] {
    top: 0 !important;
    transform: translateY(-50%) !important;
    font-size: 12px !important;
}

/* Country selector button with pill shape */
.passenger-contact-info-content .selected-country[b-ophqntajbx] {
    width: 100% !important;
    min-height: 56px !important;
    height: 56px !important;
    border: 2px solid #ced4da !important;
    border-radius: 50px !important;
    padding: 20px 12px 10px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: border-color 0.2s ease !important;
    background: white !important;
    box-sizing: border-box !important;
}

    .passenger-contact-info-content .selected-country:hover[b-ophqntajbx] {
        border-color: var(--brand-blue, var(--brand-blue)) !important;
    }

    .passenger-contact-info-content .selected-country:focus[b-ophqntajbx] {
        border-color: var(--brand-blue, var(--brand-blue)) !important;
        box-shadow: 0 0 0 0.2rem rgba(41, 99, 168, 0.15) !important;
        outline: none !important;
    }

/* Make checkboxes look good */
.passenger-contact-info-content .form-check[b-ophqntajbx] {
    padding: 12px !important;
    background: #f8f9fa !important;
    border-radius: 8px !important;
    margin-bottom: 16px !important;
}

    .passenger-contact-info-content .form-check:hover[b-ophqntajbx] {
        background: #e9ecef !important;
    }

/* Mobile responsive */
@media (max-width: 480px) {
    .passenger-contact-info-content .float-input.form-control[b-ophqntajbx] {
        min-height: 52px !important;
        max-height: 52px !important;
        padding: 18px 16px 8px 16px !important;
    }

    .passenger-contact-info-content .selected-country[b-ophqntajbx] {
        min-height: 52px !important;
        height: 52px !important;
        padding: 18px 10px 8px 10px !important;
    }

    .passenger-contact-info-content .float-label[b-ophqntajbx] {
        font-size: 11px !important;
        left: 16px !important;
    }
}

/* Calendar selected date styling - dark blue with white text */
.rz-calendar-view td .rz-state-active.rz-state-focused[b-ophqntajbx],
.rz-calendar-view td .rz-state-active:hover[b-ophqntajbx],
.rz-calendar-view td .rz-state-active.rz-calendar-today.rz-state-focused[b-ophqntajbx],
.rz-calendar-view td .rz-state-active.rz-calendar-today:hover[b-ophqntajbx] {
    color: white !important;
    background-color: var(--brand-blue-dark) !important;
}

/* Also style the selected date without focus/hover states */
.rz-calendar-view td .rz-state-active[b-ophqntajbx] {
    color: white !important;
    background-color: var(--brand-blue-dark) !important;
}


/* ===============================
   FeedbackPage - Material Design Labels - COMPLETE
   Replace the existing FeedbackPage section in site.css with this
   =============================== */

/* Page wrapper with margins */
.feedback-page[b-ophqntajbx] {
    padding-left: 15px;
    padding-right: 15px;
    max-width: 600px;
    margin: 0 auto;
}

    /* Make logo smaller */
    .feedback-page .centered-image[b-ophqntajbx] {
        max-width: 120px !important;
        height: auto !important;
    }

    /* Target labels specifically on FeedbackPage using page-specific wrapper */
    .feedback-page .form-group[b-ophqntajbx] {
        position: relative;
        margin-bottom: 1.5rem;
    }

        .feedback-page .form-group.row[b-ophqntajbx] {
            margin-bottom: 1rem;
        }

            /* Ensure col-md-* within rows also have relative positioning for labels */
            .feedback-page .form-group.row > [class*="col-"][b-ophqntajbx] {
                position: relative;
            }

        /* Material Design label on top border */
        .feedback-page .form-group .label-heading[b-ophqntajbx] {
            position: absolute !important;
            top: 0 !important;
            left: 20px !important;
            transform: translateY(-50%) !important;
            font-size: 11px !important;
            font-weight: 600 !important;
            color: var(--brand-blue, var(--brand-blue)) !important;
            background: white !important;
            padding: 0 8px !important;
            z-index: 10 !important;
            margin: 0 !important;
            display: block !important;
        }

    /* Override input styling for FeedbackPage - Changed border color to brand-blue-dark */
    .feedback-page .styled-input[b-ophqntajbx] {
        width: 100% !important;
        border-radius: 50px !important;
        border: 2px solid var(--brand-blue-dark, var(--brand-blue-dark)) !important;
        min-height: 56px !important;
        padding: 12px 20px !important;
        font-size: 16px !important;
        box-sizing: border-box !important;
        transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    }

        .feedback-page .styled-input:focus[b-ophqntajbx] {
            border-color: var(--brand-blue, var(--brand-blue)) !important;
            box-shadow: 0 0 0 0.2rem rgba(41, 99, 168, 0.15) !important;
            outline: none !important;
        }

        .feedback-page .styled-input:hover[b-ophqntajbx] {
            border-color: var(--brand-blue, var(--brand-blue)) !important;
        }

    /* Form text (comments/instructions) - subtle styling */
    .feedback-page .form-text[b-ophqntajbx] {
        border: none !important;
        background: transparent !important;
        padding: 8px 20px !important;
        font-size: 13px !important;
        color: #666 !important;
        line-height: 1.5 !important;
        font-style: italic;
        margin-top: 8px;
        min-height: auto !important;
    }

    /* Select dropdowns */
    .feedback-page select.styled-input[b-ophqntajbx] {
        appearance: none !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%232963A8' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 20px center !important;
        padding-right: 45px !important;
    }

    /* Textarea */
    .feedback-page textarea.styled-input[b-ophqntajbx] {
        min-height: 120px !important;
        border-radius: 20px !important;
        padding: 16px 20px !important;
        resize: vertical !important;
    }

    /* Country selector styling - brand-blue-dark border */
    .feedback-page .selected-country[b-ophqntajbx] {
        width: 100%;
        min-height: 56px;
        padding: 10px 12px;
        border: 2px solid var(--brand-blue-dark, var(--brand-blue-dark));
        border-radius: 50px;
        background: white;
        font-size: 1rem;
        font-family: var(--font-base);
        color: #333333;
        box-sizing: border-box;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        cursor: pointer;
    }

        .feedback-page .selected-country:hover[b-ophqntajbx] {
            border-color: var(--brand-blue, var(--brand-blue));
        }

        .feedback-page .selected-country:focus[b-ophqntajbx],
        .feedback-page .selected-country:focus-within[b-ophqntajbx] {
            outline: none;
            border-color: var(--brand-blue, var(--brand-blue));
            box-shadow: 0 0 0 0.2rem rgba(41, 99, 168, 0.15);
        }

    /* Radio group container with border - brand-blue-dark */
    .feedback-page .radio-group-container[b-ophqntajbx] {
        position: relative;
        border: 2px solid var(--brand-blue-dark, var(--brand-blue-dark));
        border-radius: 20px;
        padding: 20px;
        margin-bottom: 1.5rem;
    }

        .feedback-page .radio-group-container .label-heading[b-ophqntajbx] {
            position: absolute !important;
            top: 0 !important;
            left: 20px !important;
            transform: translateY(-50%) !important;
            font-size: 11px !important;
            font-weight: 600 !important;
            color: var(--brand-blue, var(--brand-blue)) !important;
            background: white !important;
            padding: 0 8px !important;
            z-index: 10 !important;
            margin: 0 !important;
        }

    /* Checkbox alignment fix */
    .feedback-page .checkbox-inline-group[b-ophqntajbx] {
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .feedback-page .checkbox-inline-group input[type="checkbox"][b-ophqntajbx] {
            margin: 0;
            flex-shrink: 0;
        }

        .feedback-page .checkbox-inline-group label[b-ophqntajbx] {
            margin: 0;
            line-height: 20px; /* Match checkbox height */
        }

            /* Checkbox labels should NOT be on border */
            .feedback-page .checkbox-inline-group label.label-heading[b-ophqntajbx],
            .feedback-page .smaller-label-heading[b-ophqntajbx] {
                position: static !important;
                transform: none !important;
                background: transparent !important;
            }

    /* Submit button - larger and styled */
    .feedback-page .btn-primary[b-ophqntajbx] {
        min-width: 200px !important;
        padding: 14px 32px !important;
        font-size: 18px !important;
        font-weight: 600 !important;
    }

    /* Validation message styling */
    .feedback-page .validation-message[b-ophqntajbx] {
        background-color: #fff3cd;
        color: #856404;
        border-left: 4px solid #ffeeba;
        padding: 0.25rem;
        margin-top: 0.25rem;
        border-radius: 4px;
    }

/* Mobile responsive */
@media (max-width: 768px) {
    .feedback-page[b-ophqntajbx] {
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (max-width: 480px) {
    .feedback-page[b-ophqntajbx] {
        padding-left: 8px;
        padding-right: 8px;
    }

        .feedback-page .centered-image[b-ophqntajbx] {
            max-width: 100px !important;
        }

        .feedback-page .styled-input[b-ophqntajbx] {
            min-height: 52px !important;
            padding: 12px 16px !important;
        }

        .feedback-page textarea.styled-input[b-ophqntajbx] {
            min-height: 100px !important;
            padding: 14px 16px !important;
        }

        .feedback-page .form-group .label-heading[b-ophqntajbx] {
            font-size: 10px !important;
            left: 16px !important;
        }

        .feedback-page .selected-country[b-ophqntajbx] {
            min-height: 52px;
        }

        .feedback-page select.styled-input[b-ophqntajbx] {
            background-position: right 16px center !important;
            padding-right: 40px !important;
        }

        .feedback-page .radio-group-container[b-ophqntajbx] {
            padding: 16px;
        }

        .feedback-page .form-text[b-ophqntajbx] {
            font-size: 12px !important;
            padding: 6px 16px !important;
        }
}
/* ===============================
   Flight Dropdown Spacing Fix - Match Airline List
   =============================== */
/* Apply generous vertical spacing to flight dropdown items to match airline list */
.rz-dropdown-panel.flightnum-dd-popup li.rz-dropdown-item[b-ophqntajbx],
body .rz-dropdown-panel.flightnum-dd-popup .rz-dropdown-item[b-ophqntajbx],
body .rz-dropdown-panel.flightnum-dd-popup .rz-dropdown-items li[b-ophqntajbx] {
    padding-block: 6.75px !important;
    padding-inline: 12px !important;
    line-height: 1.2 !important;
}

/* Ensure airline dropdown has consistent spacing too */
.rz-dropdown-panel.airline-dd-popup li.rz-dropdown-item[b-ophqntajbx],
body .rz-dropdown-panel.airline-dd-popup .rz-dropdown-item[b-ophqntajbx],
body .rz-dropdown-panel.airline-dd-popup .rz-dropdown-items li[b-ophqntajbx] {
    padding-block: 6.75px !important;
    padding-inline: 12px !important;
    line-height: 1.2 !important;
}




.rz-menuitem[b-ophqntajbx], .rz-autocomplete-list-item[b-ophqntajbx], .rz-multiselect-item[b-ophqntajbx], .rz-autocomplete-items li[b-ophqntajbx], .rz-dropdown-items li[b-ophqntajbx], .rz-multiselect-items li[b-ophqntajbx], .rz-dropdown-item[b-ophqntajbx] {
    padding: 6px !important;
}

/* ===============================
   Toggle Inline Styling - Clock Icon Fix
   =============================== */
/* Toggle inline styling for Hourly Service and similar toggles */
.toggle-inline[b-ophqntajbx] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
}

    /* Make RadzenIcon smaller and vertically centered within toggle-inline */
    .toggle-inline .rzi[b-ophqntajbx] {
        font-size: 20px !important;
        line-height: 1;
        display: inline-flex;
        align-items: center;
    }

/* Hourly Service two-line layout */
.hourly-service-text[b-ophqntajbx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hourly-service-main[b-ophqntajbx] {
    font-size: 1rem;
}

.hourly-service-detail[b-ophqntajbx] {
    font-size: 0.8rem;
    color: var(--brand-blue, var(--brand-blue));
    opacity: 0.7;
}

/* ===============================
   Return Trip Toggle - Two-line Layout
   =============================== */
/* Return trip toggle block - two-line layout */
.return-trip-block[b-ophqntajbx] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    margin: 8px 0;
}

    /* Keep checkbox from shrinking */
    .return-trip-block input[type="checkbox"][b-ophqntajbx] {
        flex-shrink: 0;
        margin-top: 3px;
        width: 18px;
        height: 18px;
    }

/* Container for the two-line label */
.return-trip-label-block[b-ophqntajbx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
    pointer-events: none; /* Disable clicks on container, enable only on label */
}

/* Main row with "Add a Return Trip" and badge */
.return-trip-main-row[b-ophqntajbx] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

    /* Icon in main row */
    .return-trip-main-row .rzi[b-ophqntajbx] {
        font-size: 18px !important;
        line-height: 1;
        color: var(--brand-blue, var(--brand-blue));
    }

/* Main text styling */
.return-trip-main-text[b-ophqntajbx] {
    cursor: pointer;
    user-select: none;
    font-size: 1rem;
    color: var(--brand-blue, var(--brand-blue));
    font-weight: 600;
    margin: 0;
}

/* Route text (smaller, secondary) - not clickable to prevent accidental toggles */
.return-trip-route-text[b-ophqntajbx] {
    font-size: 0.8rem;
    color: #666;
    font-weight: 400;
    margin: 0;
    pointer-events: none; /* Prevent clicks from toggling checkbox */
}

/* Clickable label row for checkbox toggle - only as wide as content */
.return-trip-clickable[b-ophqntajbx] {
    cursor: pointer;
    pointer-events: auto; /* Re-enable clicks only on the label */
    align-self: flex-start; /* Don't stretch to full width */
    width: fit-content; /* Only as wide as content */
}

/* Return trip badge */
.return-trip-badge[b-ophqntajbx] {
    background: linear-gradient(135deg, var(--brand-blue) 0%, #1e4d7b 100%);
    color: white;
    padding: 5px 12px;
    border-radius: 14px;
    font-size: 0.75rem;
    font-weight: 600;
    box-shadow: 0 3px 10px rgba(41, 99, 168, 0.4);
    white-space: nowrap;
}

/* Mobile adjustments for return trip */
@media (max-width: 600px) {
    .return-trip-block[b-ophqntajbx] {
        gap: 8px;
        padding: 10px 12px;
    }

        .return-trip-block input[type="checkbox"][b-ophqntajbx] {
            width: 20px;
            height: 20px;
            min-width: 20px;
            margin-top: 2px;
        }

    .return-trip-main-text[b-ophqntajbx] {
        font-size: 0.95rem;
    }

    .return-trip-route-text[b-ophqntajbx] {
        font-size: 0.75rem;
    }

    .return-trip-badge[b-ophqntajbx] {
        font-size: 0.7rem;
        padding: 4px 10px;
    }
}

/* ===============================
   Location Precision Indicator
   =============================== */
.location-precision-indicator[b-ophqntajbx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 12px;
    padding: 6px 12px;
    font-size: 0.75rem;
    animation: fadeIn-b-ophqntajbx 0.3s ease-in;
}

/* Debug box for location troubleshooting */
.location-debug-box[b-ophqntajbx] {
    margin-top: 8px;
    padding: 8px 12px;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 10px;
    color: #666;
    text-align: left;
    width: 100%;
    max-width: 400px;
    font-family: monospace;
    line-height: 1.4;
}

    .location-debug-box div[b-ophqntajbx] {
        margin-bottom: 2px;
    }

    .location-debug-box strong[b-ophqntajbx] {
        color: #333;
    }

.precision-status[b-ophqntajbx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 12px;
    font-weight: 500;
    transition: all 0.3s ease;
}

/* Pulsing dot for "waiting" state */
.precision-dot[b-ophqntajbx] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

    .precision-dot.pulsing[b-ophqntajbx] {
        animation: pulse-b-ophqntajbx 1.5s ease-in-out infinite;
    }

/* Waiting state - blue */
.precision-status.waiting[b-ophqntajbx] {
    background-color: #e3f2fd;
    color: var(--brand-blue, var(--brand-blue));
}

    .precision-status.waiting .precision-dot[b-ophqntajbx] {
        background-color: var(--brand-blue, var(--brand-blue));
    }

/* Good precision state - green */
.precision-status.good[b-ophqntajbx] {
    background-color: #e8f5e9;
    color: #2e7d32;
}

    .precision-status.good .precision-dot[b-ophqntajbx] {
        background-color: #4caf50;
    }

/* Fair/approximate precision state - amber */
.precision-status.fair[b-ophqntajbx] {
    background-color: #fff8e1;
    color: #f57c00;
}

    .precision-status.fair .precision-dot[b-ophqntajbx] {
        background-color: #ff9800;
    }

/* Pulse animation for waiting dot */
@keyframes pulse-b-ophqntajbx {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.3);
    }
}

/* Fade in animation */
@keyframes fadeIn-b-ophqntajbx {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile adjustments */
@media (max-width: 480px) {
    .location-precision-indicator[b-ophqntajbx] {
        font-size: 0.7rem;
        padding: 4px 8px;
        margin-bottom: 8px;
    }

    .precision-status[b-ophqntajbx] {
        padding: 3px 10px;
    }

    .precision-dot[b-ophqntajbx] {
        width: 5px;
        height: 5px;
    }
}



/* ===============================
   Unit Number Link & Modal
   =============================== */

/* Unit link row - sits below the address button */
.unit-link-row[b-ophqntajbx] {
    display: flex;
    justify-content: flex-end;
    margin-top: -14px; /* Pull up into the margin-bottom of address-row */
    margin-bottom: 8px;
    padding-right: 4px;
}

.unit-link[b-ophqntajbx] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    color: var(--brand-blue-light, var(--brand-blue-light));
    text-decoration: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

    .unit-link:hover[b-ophqntajbx] {
        background-color: rgba(49, 128, 244, 0.08);
        color: var(--brand-blue, var(--brand-blue));
        text-decoration: none;
    }

.unit-link-icon[b-ophqntajbx] {
    font-size: 16px !important;
}

.unit-edit-hint[b-ophqntajbx] {
    font-size: 0.75rem;
    color: #888;
    margin-left: 2px;
}

/* Unit modal overlay */
.unit-modal-overlay[b-ophqntajbx] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    padding: 16px;
}

/* Unit modal content */
.unit-modal-content[b-ophqntajbx] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 400px;
    max-height: 90vh;
    overflow-y: auto;
}

.unit-modal-header[b-ophqntajbx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
}

    .unit-modal-header h3[b-ophqntajbx] {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--brand-blue-dark, var(--brand-blue-dark));
    }

.unit-modal-close[b-ophqntajbx] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #666;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s ease;
}

    .unit-modal-close:hover[b-ophqntajbx] {
        color: #333;
    }

.unit-modal-body[b-ophqntajbx] {
    padding: 20px;
}

.unit-modal-footer[b-ophqntajbx] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 20px;
    border-top: 1px solid #e0e0e0;
    background: #fafafa;
    border-radius: 0 0 12px 12px;
}

/* Mobile adjustments */
@media (max-width: 480px) {
    .unit-link-row[b-ophqntajbx] {
        margin-top: -10px;
        margin-bottom: 4px;
    }

    .unit-link[b-ophqntajbx] {
        font-size: 0.8rem;
    }

    .unit-modal-content[b-ophqntajbx] {
        max-width: 100%;
        margin: 0 8px;
    }

    .unit-modal-header[b-ophqntajbx] {
        padding: 14px 16px;
    }

    .unit-modal-body[b-ophqntajbx] {
        padding: 16px;
    }

    .unit-modal-footer[b-ophqntajbx] {
        padding: 14px 16px;
        flex-wrap: wrap;
    }
}


/* ===============================
   APPEND THIS TO THE END OF YOUR EXISTING AddressEntryComponent.razor.css
   (Do NOT replace the file - add these to the bottom)
   =============================== */

/* ===== HOURLY DURATION SECTION ===== */
.hourly-duration-section[b-ophqntajbx] {
    margin: 12px 0 16px 0;
    padding: 16px;
    background: var(--brand-blue-50, #F2F6FF);
    border-radius: 8px;
    border: 1px solid var(--brand-border, #DFE3EE);
}

.hourly-duration-label[b-ophqntajbx] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--brand-blue-dark, var(--brand-blue-dark));
    margin-bottom: 12px;
}

.hourly-duration-row[b-ophqntajbx] {
    display: flex;
    gap: 16px;
    align-items: center;
}

.hourly-dropdown-wrapper[b-ophqntajbx] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hourly-dropdown-suffix[b-ophqntajbx] {
    font-size: 0.875rem;
    color: var(--brand-blue, var(--brand-blue));
    font-weight: 500;
}

/* ===== DISCOUNT CODE SECTION ===== */
.discount-code-section[b-ophqntajbx] {
    margin-top: 16px;
    margin-bottom: 8px;
}

.discount-code-button[b-ophqntajbx] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    background: transparent;
    border: 1px dashed #d9d9d9;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    min-height: 44px;
}

    .discount-code-button:hover[b-ophqntajbx] {
        border-color: #bbb;
        background: #fafafa;
    }

    .discount-code-button:focus[b-ophqntajbx] {
        outline: 2px solid var(--brand-blue, var(--brand-blue));
        outline-offset: 2px;
    }

    .discount-code-button.has-discount[b-ophqntajbx] {
        border-style: solid;
        border-color: var(--brand-green, #28a745);
        background: linear-gradient(135deg, #f0fff4 0%, #dcffe4 100%);
    }

        .discount-code-button.has-discount:hover[b-ophqntajbx] {
            border-color: var(--brand-green, #28a745);
        }

    /* Muted icon for promo code button */
    .discount-code-button .rzi[b-ophqntajbx] {
        color: #aaa !important;
        font-size: 18px !important;
    }

    .discount-code-button.has-discount .rzi[b-ophqntajbx] {
        color: var(--brand-green, #28a745) !important;
    }

.discount-button-text[b-ophqntajbx] {
    flex: 1;
    font-size: 0.875rem;
    color: #999;
    font-weight: 400;
}

.discount-code-button.has-discount .discount-button-text[b-ophqntajbx] {
    color: var(--brand-green-dark, #1e7e34);
    font-weight: 500;
}

/* Loading state for discount code button */
.discount-code-button.loading[b-ophqntajbx] {
    cursor: wait;
    opacity: 0.8;
}

    .discount-code-button.loading .discount-button-text[b-ophqntajbx] {
        color: var(--brand-blue, #1a5fb4);
        font-style: italic;
    }

    .discount-code-button.loading .spinner-border-sm[b-ophqntajbx] {
        width: 16px;
        height: 16px;
        border-width: 2px;
        margin-right: 4px;
    }

/* Discount modal input styling */
.discount-modal-input[b-ophqntajbx] {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
}

/* Discount validation error message */
.discount-error-message[b-ophqntajbx] {
    margin-top: 8px;
    padding: 8px 12px;
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    color: #dc2626;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 6px;
}


/* =====================================================
   ADD TO AddressEntryComponent.razor.css
   Styles for the favorite heart icon in address buttons
   ===================================================== */

/* Wrapper keeps address text and heart together */
.address-text-wrapper[b-ophqntajbx] {
    display: inline-flex;
    align-items: center;
    flex: 1;
    min-width: 0; /* Allow text truncation */
    max-width: 100%; /* Don't exceed parent */
    overflow: hidden; /* Clip overflowing content */
    gap: 8px;
    font-weight: 700 !important;
}

    /* Reset the multiline text to not grow on its own when inside wrapper */
    .address-text-wrapper .address-text-multiline[b-ophqntajbx] {
        flex: 1 1 0; /* Grow, shrink, start at 0 width */
        min-width: 0; /* Allow shrinking below content */
        max-width: 100%;
        overflow: hidden;
        font-weight: 600 !important;
    }

/* Favorite heart icon - positioned right after address text */
.favorite-heart[b-ophqntajbx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    align-self: center;
}

    .favorite-heart .material-icons[b-ophqntajbx] {
        font-size: 20px;
        color: #999;
        transition: color 0.2s ease, transform 0.2s ease;
    }

    /* Hover state for unsaved (outline) heart */
    .favorite-heart:not(.saved):hover[b-ophqntajbx] {
        background-color: rgba(244, 67, 54, 0.1);
    }

        .favorite-heart:not(.saved):hover .material-icons[b-ophqntajbx] {
            color: #F44336;
            transform: scale(1.1);
        }

    /* Saved (filled) heart state */
    .favorite-heart.saved .material-icons[b-ophqntajbx] {
        color: #F44336;
    }

    /* Saved heart doesn't need hover effect since it does nothing */
    .favorite-heart.saved[b-ophqntajbx] {
        cursor: default;
    }

/* Subtle animation when heart becomes filled */
@keyframes heartPop-b-ophqntajbx {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}

.favorite-heart.saved .material-icons[b-ophqntajbx] {
    animation: heartPop-b-ophqntajbx 0.3s ease;
}

/* Mobile adjustments */
@media (max-width: 480px) {
    .favorite-heart[b-ophqntajbx] {
        padding: 4px;
    }

        .favorite-heart .material-icons[b-ophqntajbx] {
            font-size: 20px;
        }
}

/* Ensure heart doesn't get squished in multiline buttons */
.address-button-multiline .favorite-heart[b-ophqntajbx] {
    min-width: 28px;
    min-height: 28px;
}

/* ===============================
   Validation Shake Animation
   =============================== */

/* Shake animation keyframes */
@keyframes validationShake-b-ophqntajbx {
    0%, 100% {
        transform: translateX(0);
    }

    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-6px);
    }

    20%, 40%, 60%, 80% {
        transform: translateX(6px);
    }
}

/* Apply shake animation to address picker (mobile) and inline field (desktop) */
.address-button-picker.validation-shake[b-ophqntajbx],
.inline-address-field.validation-shake[b-ophqntajbx] {
    animation: validationShake-b-ophqntajbx 0.5s ease-in-out;
}

/* Error state styling for the button inside the address picker */
.address-button-picker.validation-error .rz-button[b-ophqntajbx],
.address-button-picker.validation-error .address-button[b-ophqntajbx] {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25) !important;
}

/* Error state styling for desktop inline address input */
.inline-address-field.validation-error[b-ophqntajbx]  input {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25) !important;
}

.inline-address-field.validation-error[b-ophqntajbx]  .float-label,
.inline-address-field.validation-error[b-ophqntajbx]  label {
    color: #dc3545 !important;
}

/* Error state for float label */
.address-button-picker.validation-error .float-label[b-ophqntajbx] {
    color: #dc3545 !important;
}

/* Also style the icons during error state */
.address-button-picker.validation-error .rz-button .rzi[b-ophqntajbx],
.address-button-picker.validation-error .address-button .rzi[b-ophqntajbx] {
    color: #dc3545 !important;
}

/* Error state for placeholder text */
.address-button-picker.validation-error .address-text-multiline[b-ophqntajbx] {
    color: #dc3545 !important;
}

/* ========================================
   RESPONSIVE: Mobile button vs Desktop inline
   - Mobile (< 768px): Show button, hide inline input
   - Desktop (>= 768px): Hide button, show inline input
   ======================================== */

/* Mobile-only: visible on mobile, hidden on desktop */
.mobile-only[b-ophqntajbx] {
    display: block;
}

/* Desktop-only: hidden on mobile, visible on desktop */
.desktop-only[b-ophqntajbx] {
    display: none;
}

/* Desktop supplemental address (city, state, zip) */
.desktop-supplemental[b-ophqntajbx] {
    display: none;
}

@media (min-width: 768px) {
    /* Hide mobile button on desktop */
    .mobile-only[b-ophqntajbx] {
        display: none !important;
    }

    /* Show inline input on desktop */
    .desktop-only[b-ophqntajbx] {
        display: block !important;
    }

    /* Show supplemental address on desktop */
    .desktop-supplemental[b-ophqntajbx] {
        display: block !important;
        font-size: 0.813rem;
        color: #666;
        margin-top: 4px;
        padding-left: 44px;
    }
}

/* ========================================
   INLINE ADDRESS FIELD STYLING (Desktop)
   ======================================== */

.inline-address-field[b-ophqntajbx] {
    position: relative;
    width: 100%;
}

.inline-float-label[b-ophqntajbx] {
    position: absolute;
    top: -8px;
    left: 12px;
    background: white;
    padding: 0 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--brand-blue, #2963a8);
    z-index: 1;
    pointer-events: none;
}

/* Make the inline input match the button styling */
.inline-address-field[b-ophqntajbx]  .address-input-field {
    width: 100%;
}

.inline-address-field[b-ophqntajbx]  .address-input {
    width: 100%;
    min-height: 56px;
    padding: 16px 44px;
    border: 1px solid var(--field-border, #d9d9d9);
    border-radius: 8px;
    font-size: 1rem;
    background: white;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.inline-address-field[b-ophqntajbx]  .address-input:focus {
    border-color: var(--brand-blue, #2963a8);
    box-shadow: 0 0 0 3px rgba(41, 99, 168, 0.15);
    outline: none;
}

.inline-address-field[b-ophqntajbx]  .address-input::placeholder {
    color: #999;
}

.inline-address-field[b-ophqntajbx]  .search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--brand-blue, #2963a8);
    font-size: 20px;
    pointer-events: none;
}

.inline-address-field[b-ophqntajbx]  .clear-button {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}

/* ===================================
   ERROR MODAL (for non-serviced airports)
   =================================== */

.error-modal-content[b-ophqntajbx] {
    max-width: 360px;
}

.error-modal-header[b-ophqntajbx] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .error-modal-header h3[b-ophqntajbx] {
        margin: 0;
        flex: 1;
    }

    .error-modal-header .error-header-icon[b-ophqntajbx] {
        font-size: 24px;
        color: #d92d20;
    }

.error-modal-body[b-ophqntajbx] {
    padding: 12px 24px 20px !important;
}

    .error-modal-body p[b-ophqntajbx] {
        margin: 0;
        font-size: 0.938rem;
        line-height: 1.5;
    }

/* =============================================================================
 * MOBILE MAP PREVIEW
 * Shows static map when both pickup and dropoff are selected
 * Hidden at 992px when Trip Summary sidebar appears
 * ============================================================================= */

.mobile-map-preview[b-ophqntajbx] {
    margin-top: 12px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e0e0e0;
    background-color: #f5f5f5;
    position: relative;
    display: block;
}

    .mobile-map-preview a[b-ophqntajbx] {
        display: block;
        position: relative;
        cursor: pointer;
    }

.mobile-map-img[b-ophqntajbx] {
    width: 100%;
    height: auto;
    display: block;
    min-height: 100px;
    object-fit: cover;
    transition: opacity 0.2s ease;
}

.mobile-map-preview a:hover .mobile-map-img[b-ophqntajbx] {
    opacity: 0.9;
}

.mobile-map-overlay[b-ophqntajbx] {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 4px;
    padding: 4px 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: #333;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

    .mobile-map-overlay .material-icons[b-ophqntajbx] {
        font-size: 14px;
        color: var(--brand-blue);
    }

/* Hide map when Trip Summary sidebar is visible (992px+) */
@media (min-width: 992px) {
    .mobile-map-preview[b-ophqntajbx] {
        display: none;
    }
}
/* /Components/AddressInputField.razor.rz.scp.css */
/* AddressInputField - Reusable address input with autocomplete */

.address-input-field[b-wyzxk3zxlm] {
    width: 100%;
}

.input-wrapper[b-wyzxk3zxlm] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon[b-wyzxk3zxlm] {
    position: absolute;
    left: 12px;
    color: var(--text-secondary, #666);
    font-size: 20px;
    pointer-events: none;
    z-index: 1;
}

.address-input[b-wyzxk3zxlm] {
    width: 100%;
    padding: 14px 40px 14px 44px;
    font-size: 16px;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 8px;
    background: var(--surface-color, #fff);
    color: var(--text-primary, #333);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.address-input:focus[b-wyzxk3zxlm] {
    outline: none;
    border-color: var(--primary-color, #1a73e8);
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.15);
}

.address-input[b-wyzxk3zxlm]::placeholder {
    color: var(--text-tertiary, #999);
}

.clear-button[b-wyzxk3zxlm] {
    position: absolute;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary, #666);
    cursor: pointer;
    transition: background-color 0.2s;
}

.clear-button:hover[b-wyzxk3zxlm] {
    background: var(--hover-color, rgba(0, 0, 0, 0.05));
}

.clear-button:focus-visible[b-wyzxk3zxlm] {
    outline: 2px solid var(--primary-color, #1a73e8);
    outline-offset: 2px;
}

.clear-button .material-icons[b-wyzxk3zxlm] {
    font-size: 18px;
}

/* Inline mode (desktop) - appears in the address entry component */
.address-input-field.inline-mode .address-input[b-wyzxk3zxlm] {
    border-radius: 12px;
    padding: 16px 44px;
}

/* Modal mode - inside the address input modal */
.address-input-field.modal-mode .address-input[b-wyzxk3zxlm] {
    border-radius: 8px;
}

/* Visually hidden for accessibility */
.visually-hidden[b-wyzxk3zxlm] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Favorite heart icon */
.favorite-heart[b-wyzxk3zxlm] {
    position: absolute;
    right: 40px; /* Position before the clear button */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.favorite-heart .material-icons[b-wyzxk3zxlm] {
    font-size: 20px;
    color: #999;
    transition: color 0.2s ease, transform 0.2s ease;
}

/* Hover state for unsaved (outline) heart */
.favorite-heart:not(.saved):hover[b-wyzxk3zxlm] {
    background-color: rgba(244, 67, 54, 0.1);
}

.favorite-heart:not(.saved):hover .material-icons[b-wyzxk3zxlm] {
    color: #F44336;
    transform: scale(1.1);
}

/* Saved (filled) heart state */
.favorite-heart.saved .material-icons[b-wyzxk3zxlm] {
    color: #F44336;
}

/* Saved heart doesn't need hover effect since it does nothing */
.favorite-heart.saved[b-wyzxk3zxlm] {
    cursor: default;
}

/* Focus visible state */
.favorite-heart:focus-visible[b-wyzxk3zxlm] {
    outline: 2px solid var(--primary-color, #1a73e8);
    outline-offset: 2px;
}

/* Subtle animation when heart becomes filled */
@keyframes heartPop-b-wyzxk3zxlm {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.3);
    }
    100% {
        transform: scale(1);
    }
}

.favorite-heart.saved .material-icons[b-wyzxk3zxlm] {
    animation: heartPop-b-wyzxk3zxlm 0.3s ease;
}

/* Adjust input padding when favorite button is shown */
.address-input.has-favorite-button[b-wyzxk3zxlm] {
    padding-right: 76px; /* Room for both favorite and clear buttons */
}

/* Position clear button after favorite button when both are present */
.input-wrapper:has(.favorite-heart) .clear-button[b-wyzxk3zxlm] {
    right: 8px;
}

/* Needs confirmation styles - pre-filled address that requires Google validation */
.address-input-field.needs-confirmation .address-input[b-wyzxk3zxlm] {
    border-color: var(--warning-color, #f59e0b);
    background-color: rgba(245, 158, 11, 0.05);
}

.address-input-field.needs-confirmation .address-input:focus[b-wyzxk3zxlm] {
    border-color: var(--warning-color, #f59e0b);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

.address-input.pending-confirmation[b-wyzxk3zxlm] {
    cursor: pointer;
}

.confirmation-hint[b-wyzxk3zxlm] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 12px;
    background-color: rgba(245, 158, 11, 0.1);
    border: 1px solid var(--warning-color, #f59e0b);
    border-radius: 6px;
    font-size: 13px;
    color: var(--warning-dark, #b45309);
}

.confirmation-hint .material-icons[b-wyzxk3zxlm] {
    font-size: 16px;
    color: var(--warning-color, #f59e0b);
}
/* /Components/AddressInputModal.razor.rz.scp.css */
/* ===================================
   ADDRESS INPUT MODAL - Simplified
   Delegates input rendering to AddressInputField
   Keeps: modal container, error modal, dropdown styles
   =================================== */

/* Ensure Radzen dialog allows content to overflow */
.rz-dialog[b-42fvl5msie] {
    overflow: visible !important;
}

.rz-dialog-content[b-42fvl5msie] {
    overflow: visible !important;
    padding: 16px !important;
}

/* ===================================
   MAIN LAYOUT - DYNAMIC HEIGHT
   =================================== */

/* Main Dialog Content Wrapper - Flexible height */
.address-dialog-content[b-42fvl5msie] {
    width: 100%;
    max-width: 700px;
    min-height: 85vh;
    max-height: 95vh;
    transition: min-height 0.3s ease;
    display: flex;
    flex-direction: column;
}

    /* COMPACT MODE - After address selected */
    .address-dialog-content.has-selected-address[b-42fvl5msie] {
        min-height: auto;
    }

/* Input Section */
.address-modal-body[b-42fvl5msie] {
    padding: 12px 16px;
    position: relative;
    flex-shrink: 0;
}

/* Style the AddressInputField when used in modal context */
.address-modal-body :deep(.address-input-field)[b-42fvl5msie] {
    width: 100%;
}

.address-modal-body :deep(.address-input)[b-42fvl5msie] {
    min-height: 56px;
    padding: 16px 44px;
    border-radius: 8px;
    font-size: 16px;
}

/* ===================================
   AUTOCOMPLETE DROPDOWN - COMPACT ITEMS
   =================================== */

:global(.autocomplete-dropdown)[b-42fvl5msie] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    background: #fff;
    border: 1px solid #dadce0;
    border-top: 1px solid #e8eaed;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
    z-index: 10000;
    margin-top: 0;
}

/* Section dividers */
:global(.dropdown-section)[b-42fvl5msie] {
    border-bottom: 1px solid #f1f3f4;
}

:global(.dropdown-section:last-child)[b-42fvl5msie] {
    border-bottom: none;
}

/* Section headers - prominent styling */
:global(.section-header)[b-42fvl5msie] {
    padding: 10px 14px 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--brand-blue-dark, var(--brand-blue-dark));
    text-transform: uppercase;
    letter-spacing: 0.8px;
    background: linear-gradient(to bottom, #e8eef5, #f4f6f9);
    border-left: 3px solid var(--brand-blue, var(--brand-blue));
    display: flex;
    align-items: center;
    gap: 6px;
}

:global(.section-header .material-icons)[b-42fvl5msie] {
    font-size: 16px;
    color: var(--brand-blue, var(--brand-blue));
}

/* ===================================
   COMPACT DROPDOWN ITEMS (1-2 rows max)
   =================================== */

:global(.dropdown-item)[b-42fvl5msie] {
    padding: 6px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background-color 0.1s ease;
    border-bottom: 1px solid #f8f9fa;
    min-height: 28px;
    max-height: 36px;
}

:global(.dropdown-item:last-child)[b-42fvl5msie] {
    border-bottom: none;
}

:global(.dropdown-item:hover)[b-42fvl5msie] {
    background-color: #f8f9fa;
}

:global(.dropdown-item.selected)[b-42fvl5msie] {
    background-color: #e8f0fe;
}

/* Keyboard navigation highlight */
:global(.dropdown-item.keyboard-highlight)[b-42fvl5msie] {
    background-color: #e8f0fe !important;
    outline: 2px solid var(--brand-blue, #1a73e8);
    outline-offset: -2px;
}

/* Item icon */
:global(.item-icon)[b-42fvl5msie] {
    font-size: 18px;
    width: 20px;
    flex-shrink: 0;
    color: #5f6368;
}

/* Main text */
:global(.item-main)[b-42fvl5msie] {
    flex: 1;
    font-size: 14px;
    font-weight: 400;
    color: #202124;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Secondary text - compact */
:global(.item-secondary)[b-42fvl5msie] {
    font-size: 11px;
    color: #5f6368;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 150px;
}

/* Badges (hidden in compact mode) */
:global(.item-badge)[b-42fvl5msie] {
    display: none !important;
}

/* Airport grid layout */
:global(.dropdown-section.airports-grid)[b-42fvl5msie] {
    padding: 8px 0;
}

:global(.dropdown-section.airports-grid .dropdown-items)[b-42fvl5msie] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 6px;
    padding: 0 10px;
}

:global(.dropdown-section.airports-grid .dropdown-item)[b-42fvl5msie] {
    border: 1px solid #e8eaed;
    border-radius: 6px;
    padding: 8px 10px;
    min-height: auto;
    background: #fff;
    transition: all 0.15s ease;
}

:global(.dropdown-section.airports-grid .dropdown-item:hover)[b-42fvl5msie] {
    background: #f8f9fa;
    border-color: #dadce0;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

:global(.dropdown-section.airports-grid .dropdown-item.selected)[b-42fvl5msie] {
    background: #e8f0fe;
    border-color: var(--brand-blue, #1a73e8);
}

:global(.dropdown-section.airports-grid .dropdown-item.keyboard-highlight)[b-42fvl5msie] {
    background: #e8f0fe !important;
    border-color: var(--brand-blue, #1a73e8);
    box-shadow: 0 0 0 2px var(--brand-blue, #1a73e8);
}

/* Favorites grid layout */
:global(.dropdown-section.favorites-grid)[b-42fvl5msie] {
    padding: 8px 0;
}

:global(.dropdown-section.favorites-grid .dropdown-items)[b-42fvl5msie] {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 0 10px;
    overflow-x: auto;
}

:global(.dropdown-section.favorites-grid .dropdown-item)[b-42fvl5msie] {
    flex: 0 0 auto;
    min-width: 160px;
    border: 1px solid #e8eaed;
    border-radius: 6px;
    padding: 8px 10px;
    background: #fff;
    transition: all 0.15s ease;
}

:global(.dropdown-section.favorites-grid .dropdown-item:hover)[b-42fvl5msie] {
    background: #f8f9fa;
    border-color: #dadce0;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

:global(.dropdown-section.favorites-grid .dropdown-item.selected)[b-42fvl5msie] {
    background: #fff8e1;
    border-color: #f5a623;
}

:global(.dropdown-section.favorites-grid .dropdown-item.keyboard-highlight)[b-42fvl5msie] {
    background: #e8f0fe !important;
    border-color: var(--brand-blue, #1a73e8);
    box-shadow: 0 0 0 2px var(--brand-blue, #1a73e8);
}

/* Airport code */
:global(.airport-code)[b-42fvl5msie] {
    font-size: 16px;
    font-weight: 600;
    color: var(--brand-blue, #1a73e8);
    margin-right: 6px;
}

/* Airport name */
:global(.airport-name)[b-42fvl5msie] {
    font-size: 12px;
    color: #5f6368;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Scrollbar styling */
:global(.autocomplete-dropdown::-webkit-scrollbar)[b-42fvl5msie] {
    width: 8px;
}

:global(.autocomplete-dropdown::-webkit-scrollbar-track)[b-42fvl5msie] {
    background: #f1f3f4;
    border-radius: 4px;
}

:global(.autocomplete-dropdown::-webkit-scrollbar-thumb)[b-42fvl5msie] {
    background: #bdc1c6;
    border-radius: 4px;
    background-clip: content-box;
}

:global(.autocomplete-dropdown::-webkit-scrollbar-thumb:hover)[b-42fvl5msie] {
    background: #bdc1c6;
    background-clip: content-box;
}

/* ===================================
   ERROR/UNIT MODAL OVERLAY
   =================================== */

.unit-modal-overlay[b-42fvl5msie] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.32);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    padding: 24px;
}

.unit-modal-content[b-42fvl5msie] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 10px -5px rgba(0,0,0,0.2), 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12);
    max-width: 400px;
    width: 100%;
    animation: modalSlideIn-b-42fvl5msie 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes modalSlideIn-b-42fvl5msie {
    from {
        transform: translateY(-16px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.unit-modal-header[b-42fvl5msie] {
    padding: 20px 24px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .unit-modal-header h3[b-42fvl5msie] {
        margin: 0;
        font-size: 18px;
        font-weight: 500;
        color: #202124;
    }

.unit-modal-close[b-42fvl5msie] {
    background: none;
    border: none;
    font-size: 20px;
    color: #5f6368;
    cursor: pointer;
    padding: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.15s ease;
    margin: -8px -8px -8px 0;
}

    .unit-modal-close:hover[b-42fvl5msie] {
        background-color: rgba(0, 0, 0, 0.04);
    }

.unit-modal-body[b-42fvl5msie] {
    padding: 0 24px 16px;
}

.unit-modal-footer[b-42fvl5msie] {
    padding: 16px 24px 20px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
}

/* ===================================
   ERROR MODAL SPECIFIC
   =================================== */

.error-modal-content[b-42fvl5msie] {
    max-width: 360px;
}

.error-modal-header[b-42fvl5msie] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .error-modal-header h3[b-42fvl5msie] {
        margin: 0;
        flex: 1;
    }

    .error-modal-header .error-header-icon[b-42fvl5msie] {
        font-size: 24px;
        color: #d92d20;
    }

.error-modal-body[b-42fvl5msie] {
    padding: 12px 24px 20px !important;
}

    .error-modal-body p[b-42fvl5msie] {
        margin: 0;
        font-size: 0.938rem;
        line-height: 1.5;
        color: #344054;
    }

/* ===================================
   MOBILE RESPONSIVE - Full screen address modal
   =================================== */

@media (max-width: 768px) {
    /* Full screen dialog on mobile */
    :global(.rz-dialog-wrapper .rz-dialog.dlg-address)[b-42fvl5msie] {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        max-width: 100vw !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        transform: none !important;
        animation: none !important;
    }

    :global(.rz-dialog.dlg-address .rz-dialog-content)[b-42fvl5msie] {
        height: calc(100dvh - 50px); /* Account for dialog title bar */
        padding: 0 !important;
        overflow: visible !important;
        display: flex;
        flex-direction: column;
    }

    /* When address is selected, shrink to content size */
    :global(.rz-dialog-wrapper .rz-dialog.dlg-address:has(.has-selected-address))[b-42fvl5msie] {
        height: auto !important;
        max-height: 100dvh !important;
        top: auto !important;
        bottom: 0 !important;
        border-radius: 16px 16px 0 0 !important;
    }

    :global(.rz-dialog-wrapper .rz-dialog.dlg-address:has(.has-selected-address) .rz-dialog-content)[b-42fvl5msie] {
        height: auto !important;
    }

    /* Content wrapper - fill available space */
    .address-dialog-content[b-42fvl5msie] {
        flex: 1;
        display: flex !important;
        flex-direction: column !important;
        overflow: visible !important;
        position: relative !important;
        min-height: 0; /* Allow flex shrinking */
    }

    .address-dialog-content.has-selected-address[b-42fvl5msie] {
        flex: 0 0 auto;
    }

    .address-modal-body[b-42fvl5msie] {
        padding: 8px 12px;
        flex-shrink: 0;
    }

    /* Dropdown takes remaining space */
    :global(.autocomplete-dropdown)[b-42fvl5msie] {
        max-height: calc(100dvh - 180px); /* Full height minus title bar, input, and some padding */
    }

    :global(.dropdown-section.airports-grid .dropdown-items)[b-42fvl5msie] {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    :global(.section-header)[b-42fvl5msie] {
        padding: 8px 12px 5px;
        font-size: 10px;
        border-left-width: 3px;
    }

    :global(.dropdown-item)[b-42fvl5msie] {
        padding: 5px 12px;
        min-height: 26px;
        max-height: 34px;
        gap: 8px;
    }

    :global(.dropdown-item.google-place-item)[b-42fvl5msie] {
        min-height: 36px;
        max-height: 44px;
        padding: 3px 12px;
    }

    :global(.item-icon)[b-42fvl5msie] {
        font-size: 16px;
        width: 18px;
    }

    :global(.item-main)[b-42fvl5msie] {
        font-size: 13px;
    }

    :global(.item-secondary)[b-42fvl5msie] {
        font-size: 10px;
    }

    :global(.dropdown-section.airports-grid .dropdown-items)[b-42fvl5msie] {
        grid-template-columns: 1fr 1fr;
        gap: 4px;
        padding: 6px;
    }

    :global(.dropdown-section.airports-grid .dropdown-item)[b-42fvl5msie] {
        padding: 6px 8px;
    }

    .unit-modal-overlay[b-42fvl5msie] {
        padding: 16px;
    }

    .unit-modal-content[b-42fvl5msie] {
        border-radius: 16px;
    }

    .unit-modal-header[b-42fvl5msie] {
        padding: 16px 20px 12px;
    }

    .unit-modal-body[b-42fvl5msie] {
        padding: 0 20px 12px;
    }

    .unit-modal-footer[b-42fvl5msie] {
        padding: 12px 20px 16px;
    }
}

/* Show more link styling */
:global(.dropdown-section.airports-grid .show-more-item)[b-42fvl5msie] {
    grid-column: 1 / -1;
    border: none;
    background: transparent;
    text-align: center;
}

:global(.dropdown-section.airports-grid .show-more-item:hover)[b-42fvl5msie] {
    transform: none;
    box-shadow: none;
}

:global(.dropdown-section.favorites-grid .show-more-item)[b-42fvl5msie] {
    flex: 0 0 auto;
    min-width: 160px;
    border: none;
    background: transparent;
    text-align: center;
}

:global(.dropdown-section.favorites-grid .show-more-item:hover)[b-42fvl5msie] {
    transform: none;
    box-shadow: none;
    background: #f8f9fa;
}
/* /Components/AirlineAndFlightDialog.razor.rz.scp.css */
/* ===============================
   CSS Variables
   =============================== */
:root[b-q20ohvmcup] {
    /* Control sizing */
    --control-h: 56px !important;
    --field-min-h: 56px;
    --field-pad-x: 12px;
    --field-font-size: 16px;
    --field-line: 1.4;
    /* Borders & focus */
    --field-border: #ced4da;
    --field-focus: #1B63C7;
    --field-ring: rgba(27, 99, 199, 0.25);
    --field-radius: 8px;
    --fi-border: #DFE3EE;
    /* Float labels - overlapping border style */
    --label-float-top: -8px;
    --label-float: 12px;
    /* Brand colors */
    --fi-blue: var(--brand-blue, #005EB8);
    --fi-blue-dark: var(--brand-blue-dark, #0F2B5B);
    --fi-blue-50: #F2F6FF;
    /* Dropdown styling */
    --dd-header-bg: var(--brand-blue-dark, #0a2b56);
    --dd-header-fg: #fff;
    --dd-row-hover: #f8f9fa;
    --dd-radius: 6px;
    /* Field placeholders */
    --field-placeholder: #8a8a8a;
    --field-text: #222;
    /* Input sizing */
    --fi-input-h: 56px;
}

/* ===============================
   Flight Info – Layout & Containers
   =============================== */
.flight-info-content[b-q20ohvmcup] {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    padding: 5px;
    text-align: center;
}

.input-container[b-q20ohvmcup] {
    position: relative;
    margin: 6px 0;
    width: 100%;
}

.input-wrapper[b-q20ohvmcup] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.input-row[b-q20ohvmcup] {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex-wrap: nowrap;
}

.input-column[b-q20ohvmcup] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: auto;
    line-height: normal !important;
    height: 60px;
    padding-top: 6px;
}

/* ===============================
   Picker Base Styles with Overlapping Labels
   =============================== */
.airline-picker[b-q20ohvmcup],
.flightnum-picker[b-q20ohvmcup],
.triptype-picker[b-q20ohvmcup],
.international-picker[b-q20ohvmcup] {
    position: relative;
    overflow: visible;
    width: 100%;
}

    /* All picker labels - overlap the border */
    .airline-picker .float-label[b-q20ohvmcup],
    .flightnum-picker .float-label[b-q20ohvmcup],
    .triptype-picker .float-label[b-q20ohvmcup],
    .international-picker .float-label[b-q20ohvmcup] {
        position: absolute;
        left: 20px;
        top: -8px;
        font-size: 12px;
        padding: 0 4px;
        background: #fff;
        pointer-events: none;
        z-index: 3;
        color: rgba(0, 0, 0, 0.6);
    }

    /* Ensure labels stay at top for pickers with always-float */
    .airline-picker.always-float .float-label[b-q20ohvmcup],
    .flightnum-picker.always-float .float-label[b-q20ohvmcup],
    .triptype-picker.always-float .float-label[b-q20ohvmcup],
    .international-picker.always-float .float-label[b-q20ohvmcup] {
        top: -8px !important;
        font-size: 12px !important;
        opacity: .85;
    }

    /* Ensure RadzenDropDown inside pickers is 100% width */
    .airline-picker[b-q20ohvmcup]  .rz-dropdown,
    .flightnum-picker[b-q20ohvmcup]  .rz-dropdown,
    .triptype-picker[b-q20ohvmcup]  .rz-dropdown {
        width: 100% !important;
        max-width: 100% !important;
    }

        /* Ensure pointer cursor on all dropdown elements */
        .airline-picker[b-q20ohvmcup]  .rz-dropdown,
        .airline-picker[b-q20ohvmcup]  .rz-dropdown input,
        .airline-picker[b-q20ohvmcup]  .rz-dropdown-label,
        .airline-picker[b-q20ohvmcup]  .rz-dropdown-trigger,
        .flightnum-picker[b-q20ohvmcup]  .rz-dropdown,
        .flightnum-picker[b-q20ohvmcup]  .rz-dropdown input,
        .flightnum-picker[b-q20ohvmcup]  .rz-dropdown-label,
        .flightnum-picker[b-q20ohvmcup]  .rz-dropdown-trigger,
        .triptype-picker[b-q20ohvmcup]  .rz-dropdown,
        .triptype-picker[b-q20ohvmcup]  .rz-dropdown input,
        .triptype-picker[b-q20ohvmcup]  .rz-dropdown-label,
        .triptype-picker[b-q20ohvmcup]  .rz-dropdown-trigger {
            cursor: pointer !important;
        }

            /* Placeholder text styling - gray when nothing selected */
            .airline-picker[b-q20ohvmcup]  .rz-dropdown-label:not(.rz-state-active),
            .flightnum-picker[b-q20ohvmcup]  .rz-dropdown-label:not(.rz-state-active) {
                color: #999999 !important;
            }

            /* Match text color in selected value displays */
            .airline-picker[b-q20ohvmcup]  .rz-dropdown-label.rz-state-active,
            .flightnum-picker[b-q20ohvmcup]  .rz-dropdown-label.rz-state-active {
                color: var(--brand-blue) !important;
            }

                /* Ensure content inside the dropdown labels also gets brand color when active */
                .flightnum-picker[b-q20ohvmcup]  .rz-dropdown-label.rz-state-active span {
                    color: var(--brand-blue);
                }

    /* Picker box styling */
    .airline-picker .selected-picker[b-q20ohvmcup],
    .flightnum-picker .selected-picker[b-q20ohvmcup],
    .triptype-picker .selected-picker[b-q20ohvmcup] {
        position: relative;
        z-index: 1;
        min-height: var(--field-min-h);
        padding: 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        color: var(--brand-blue);
        font-size: var(--field-font-size);
        line-height: var(--field-line);
        border: 1px solid var(--field-border) !important;
        border-radius: var(--field-radius);
        background: #fff;
        box-sizing: border-box;
        cursor: pointer;
    }

    /* Round borders for airline and flight number dropdowns - match site.css standards */
    .airline-picker[b-q20ohvmcup]  .rz-dropdown,
    .flightnum-picker[b-q20ohvmcup]  .rz-dropdown {
        border-radius: 50px !important;
        min-height: 56px !important;
        padding: 18px 16px 10px 16px !important;
        box-sizing: border-box !important;
    }

    /* Round border for flight type (international) picker */
    .international-picker .selected-picker[b-q20ohvmcup] {
        border-radius: 50px !important;
    }

    .airline-picker:focus-within .selected-picker[b-q20ohvmcup],
    .flightnum-picker:focus-within .selected-picker[b-q20ohvmcup],
    .triptype-picker:focus-within .selected-picker[b-q20ohvmcup] {
        border-color: var(--field-focus) !important;
        box-shadow: 0 0 0 .25rem var(--field-ring) !important;
        outline: 0;
    }

    /* Content layout inside picker */
    .airline-picker .picker-value[b-q20ohvmcup],
    .flightnum-picker .picker-value[b-q20ohvmcup],
    .triptype-picker .picker-value[b-q20ohvmcup] {
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
        flex: 1;
    }

    .airline-picker .airline-code[b-q20ohvmcup],
    .flightnum-picker .flightnum[b-q20ohvmcup] {
        font-weight: 500;
        white-space: nowrap;
    }

    .airline-picker .airline-name[b-q20ohvmcup],
    .flightnum-picker .flightnum[b-q20ohvmcup] {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .airline-picker .dash[b-q20ohvmcup],
    .flightnum-picker .dash[b-q20ohvmcup] {
        opacity: .6;
    }

    .flightnum-picker .chevron[b-q20ohvmcup],
    .airline-picker .chevron[b-q20ohvmcup],
    .triptype-picker .chevron[b-q20ohvmcup] {
        font-size: 12px;
        margin-left: 6px;
        color: #666;
    }

    /* ===============================
   Flight Number Centering
   =============================== */
    .flightnum-picker .selected-picker[b-q20ohvmcup] {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        justify-content: normal !important;
    }

        .flightnum-picker .selected-picker .picker-value[b-q20ohvmcup] {
            grid-column: 2;
            justify-self: center;
            text-align: center;
            font-variant-numeric: tabular-nums;
        }

        .flightnum-picker .selected-picker .chevron[b-q20ohvmcup] {
            grid-column: 3;
            justify-self: end;
        }

    .flightnum-picker .picker-value .flightnum[b-q20ohvmcup] {
        text-align: center;
        margin: 0 auto;
    }

.flight-row-airline .input-column--flightnum[b-q20ohvmcup]  .rz-inputtext,
.flight-row-airline .input-column--flightnum[b-q20ohvmcup]  .rz-inputmask,
.flight-row-airline .input-column--flightnum input[type="text"][b-q20ohvmcup],
.input-column--flightnum input[type="text"][b-q20ohvmcup],
.input-column--flightnum input:not([type])[b-q20ohvmcup] {
    text-align: center !important;
    font-variant-numeric: tabular-nums;
}

.flight-row-airline .input-column--flightnum [b-q20ohvmcup]::placeholder,
.input-column--flightnum [b-q20ohvmcup]::placeholder {
    text-align: center !important;
}

/* ===============================
   Row 1: Date + Time (grid)
   =============================== */
.flight-top[b-q20ohvmcup] {
    display: grid;
    grid-template-columns: minmax(150px,1fr) minmax(120px,1fr);
    gap: 10px;
    justify-content: center;
}

    .flight-top .input-column[b-q20ohvmcup],
    .flight-row-airline .input-column[b-q20ohvmcup] {
        width: 100%;
    }

    .flight-top .input-column--full[b-q20ohvmcup] {
        grid-column: 1 / -1;
        width: 100%;
    }

/* ===============================
   Carrier Row: Airline | Flight # | Trip Type
   =============================== */
.flight-row-airline[b-q20ohvmcup] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.6fr) minmax(0, 1.4fr);
    gap: 6px;
}

    .flight-row-airline .input-column[b-q20ohvmcup] {
        min-width: 0;
    }

    .flight-row-airline .picker-value[b-q20ohvmcup] {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .flight-row-airline .float-label[b-q20ohvmcup] {
        font-size: 12px !important;
    }

    .flight-row-airline .input-column--flightnum[b-q20ohvmcup] {
        min-width: 0;
        text-align: center !important;
    }

        .flight-row-airline .input-column--flightnum[b-q20ohvmcup]  .rz-inputtext {
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
            text-align: center;
        }

/* ===============================
   Trip Type Dropdown Menu
   =============================== */
.triptype-picker[b-q20ohvmcup] {
    position: relative;
}

    .triptype-picker .picker-menu[b-q20ohvmcup] {
        position: absolute;
        left: 0;
        right: 0;
        top: calc(100% + 4px);
        background: #fff;
        border: 1px solid var(--field-border);
        border-radius: var(--field-radius);
        box-shadow: 0 4px 12px rgba(0,0,0,.12);
        list-style: none;
        padding: 4px 0;
        margin: 0;
        z-index: 1006;
        color: var(--brand-blue);
    }

        .triptype-picker .picker-menu li[b-q20ohvmcup] {
            padding: 8px 12px;
            cursor: pointer;
            color: var(--brand-blue);
        }

            .triptype-picker .picker-menu li:hover[b-q20ohvmcup] {
                background: #f8f9fa;
            }

    .triptype-picker[b-q20ohvmcup],
    .triptype-picker[b-q20ohvmcup]  .rz-dropdown {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

        .triptype-picker[b-q20ohvmcup]  .rz-dropdown-label {
            display: block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

/* Invisible overlay for click-off */
.picker-overlay[b-q20ohvmcup] {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 998;
}

/* ===============================
   International Toggle
   =============================== */
.international-picker .selected-picker[b-q20ohvmcup] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px;
    cursor: default;
    min-height: var(--control-h);
}

.intl-switch-text[b-q20ohvmcup] {
    font-size: 14px;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    user-select: none;
    padding: 4px 8px;
    border-radius: 4px;
    transition: color 0.2s ease, background 0.2s ease;
    outline: none;
}

    .intl-switch-text:hover[b-q20ohvmcup] {
        background: #f0f0f0;
    }

    .intl-switch-text:focus-visible[b-q20ohvmcup] {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-blue, #1B63C7) 22%, transparent);
    }

    .intl-switch-text.active[b-q20ohvmcup] {
        color: var(--brand-blue, #005EB8);
        font-weight: 700;
        text-decoration: underline;
    }

.international-picker .rz-switch[b-q20ohvmcup] {
    margin: 0;
}

/* ===============================
   Modals & Lists
   =============================== */
.modal-backdrop[b-q20ohvmcup] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 1005;
    display: flex;
    justify-content: center;
    align-items: center;
}

.flight-info-modal-content[b-q20ohvmcup] {
    background: #fff;
    border-radius: 8px;
    width: 280px;
    max-height: 80vh;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
    animation: fadeIn-b-q20ohvmcup .3s ease-in-out;
    display: flex;
    flex-direction: column;
}

.flight-info-airline-modal-content[b-q20ohvmcup] {
    width: 100%;
    max-width: 420px;
    max-height: 80dvh;
}

.modal-header[b-q20ohvmcup] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid #ced4da;
}

    .modal-header h3[b-q20ohvmcup] {
        margin: 0;
        font-size: 1em;
        color: var(--fi-blue-dark);
    }

.close-button[b-q20ohvmcup] {
    background: none;
    border: none;
    font-size: 1em;
    cursor: pointer;
    padding: 0;
}

.modal-body[b-q20ohvmcup] {
    padding: 10px;
    font-size: 1em;
    line-height: 1.4;
}

.airline-search-box[b-q20ohvmcup] {
    width: 100%;
    padding: 8px 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
}

.airline-list[b-q20ohvmcup] {
    list-style: none;
    padding: 0;
    margin: 0 6px 6px 6px;
    max-height: 60dvh;
    overflow-y: auto;
    width: 100%;
}

    .airline-list li[b-q20ohvmcup] {
        padding: 5px 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
        color: var(--brand-blue);
        font-size: 1em;
    }

        .airline-list li:hover[b-q20ohvmcup] {
            background-color: #f8f9fa;
        }

.no-flight-option[b-q20ohvmcup] {
    text-align: center;
    margin-top: 8px;
}

    .no-flight-option a[b-q20ohvmcup] {
        color: #4285F4;
        text-decoration: underline;
        font-size: .9em;
        cursor: pointer;
    }

        .no-flight-option a:hover[b-q20ohvmcup] {
            color: #3367D6;
        }

/* ===============================
   Flights Modal + Grid
   =============================== */
.flights-modal-content[b-q20ohvmcup] {
    background: #fff;
    padding: 5px;
    border-radius: 8px;
    width: 95%;
    max-width: 500px;
    box-shadow: 0 0 20px rgba(0,0,0,.3);
}

.flights-modal-body[b-q20ohvmcup] {
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: auto;
    line-height: 1.2;
}

.flights-grid[b-q20ohvmcup] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    margin-top: 12px;
}

    .flights-grid thead th[b-q20ohvmcup] {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--brand-blue-dark);
        color: #fff;
        border-bottom: 1px solid #ccc;
        text-align: center;
        padding: .12rem .28rem;
        font-size: .78rem;
        line-height: 1.05;
    }

    .flights-grid tbody td[b-q20ohvmcup] {
        color: var(--brand-blue);
        padding: .12rem .28rem;
        line-height: 2.05;
        vertical-align: middle;
        font-size: .9rem !important;
        word-wrap: break-word;
        overflow-wrap: anywhere;
        min-height: 200px !important;
    }

    .flights-grid tbody tr:hover[b-q20ohvmcup] {
        background-color: #eaf1fb;
        cursor: pointer;
        transition: background-color .2s ease;
    }

    .flights-grid td.emph-time[b-q20ohvmcup] {
        font-weight: 700;
    }

/* ===============================
   Time Picker Modal
   =============================== */
.timepicker-overlay[b-q20ohvmcup] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(1px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4000;
}

.timepicker-modal[b-q20ohvmcup] {
    width: min(92vw, 380px);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0,0,0,.20);
    padding: 16px;
}

.timepicker-header[b-q20ohvmcup] {
    font-weight: 600;
    font-size: 1.05rem;
    margin-bottom: 10px;
}

.timepicker-row[b-q20ohvmcup] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}

.timepicker-col label[b-q20ohvmcup] {
    display: block;
    font-size: .85rem;
    margin-bottom: 6px;
    color: #444;
}

.timepicker-col select[b-q20ohvmcup] {
    width: 100%;
    min-width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background: #fff;
    font-size: 1rem;
}

    .timepicker-col select:focus[b-q20ohvmcup] {
        outline: none;
        border-color: var(--brand-blue, #4285F4);
        box-shadow: 0 0 0 3px rgba(66,133,244,.15);
    }

    .timepicker-col select[size][b-q20ohvmcup] {
        --row-height: 2rem;
        height: calc(var(--row-height) * 8);
        overflow: auto;
    }

.timepicker-actions[b-q20ohvmcup] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

    .timepicker-actions .btn-primary[b-q20ohvmcup],
    .timepicker-actions .btn-secondary[b-q20ohvmcup] {
        border-radius: 8px;
        padding: 8px 14px;
        font-size: .95rem;
        border: 1px solid transparent;
        cursor: pointer;
    }

    .timepicker-actions .btn-primary[b-q20ohvmcup] {
        background: var(--brand-blue, #4285F4);
        color: #fff;
        border-color: var(--brand-blue, #4285F4);
    }

    .timepicker-actions .btn-secondary[b-q20ohvmcup] {
        background: #fff;
        color: var(--brand-blue, #4285F4);
        border-color: var(--brand-blue, #4285F4);
    }

#FlightTime[readonly][b-q20ohvmcup] {
    cursor: pointer;
}

    #FlightTime[readonly][b-q20ohvmcup]::placeholder {
        color: #9ca3af;
        opacity: 1;
    }

.input-hint[b-q20ohvmcup] {
    margin-top: 4px;
    font-size: .85rem;
    color: #9ca3af;
}

/* ===============================
   Address Section
   =============================== */
.address-section[b-q20ohvmcup] {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 5px;
    background: #fff;
    margin: 5px 0 5px;
}

.address-row[b-q20ohvmcup] {
    display: block;
}

/* ===============================
   Brand Text Colors
   =============================== */
.flight-info-content input[b-q20ohvmcup],
.flight-info-content select[b-q20ohvmcup],
.flight-info-content textarea[b-q20ohvmcup] {
    color: var(--brand-blue);
    caret-color: var(--brand-blue);
}

    .flight-info-content input[b-q20ohvmcup]::placeholder,
    .flight-info-content textarea[b-q20ohvmcup]::placeholder {
        color: var(--brand-blue);
        opacity: .6;
    }

.float-field .selected-picker[b-q20ohvmcup] {
    color: var(--brand-blue);
}

.flight-topline[b-q20ohvmcup] {
    color: var(--brand-gold);
    font-weight: 600;
}

/* ===============================
   Date Input Normalization
   =============================== */
.flight-info-content input[type="date"][b-q20ohvmcup] {
    height: var(--fi-input-h);
    min-height: var(--fi-input-h);
    line-height: calc(var(--fi-input-h) - 2px);
    box-sizing: border-box;
    padding-block: 0;
    padding-inline: 12px;
    font-size: 16px;
}

    .flight-info-content input[type="date"][b-q20ohvmcup]::-webkit-datetime-edit,
    .flight-info-content input[type="date"][b-q20ohvmcup]::-webkit-datetime-edit-fields-wrapper,
    .flight-info-content input[type="date"][b-q20ohvmcup]::-webkit-datetime-edit-text,
    .flight-info-content input[type="date"][b-q20ohvmcup]::-webkit-datetime-edit-month-field,
    .flight-info-content input[type="date"][b-q20ohvmcup]::-webkit-datetime-edit-day-field,
    .flight-info-content input[type="date"][b-q20ohvmcup]::-webkit-datetime-edit-year-field {
        padding: 0;
    }

    .flight-info-content input[type="date"][b-q20ohvmcup]::-webkit-date-and-time-value {
        min-height: auto;
    }

    .flight-info-content input[type="date"][b-q20ohvmcup]::-webkit-calendar-picker-indicator {
        margin: 0 8px 0 0;
        padding: 0;
    }

.flight-info-content input[type="time"][b-q20ohvmcup] {
    height: var(--fi-input-h);
    min-height: var(--fi-input-h);
    line-height: calc(var(--fi-input-h) - 2px);
    box-sizing: border-box;
    padding-block: 0;
    padding-inline: 2px;
    font-size: 16px;
}

/* ===============================
   Section Headers & Route Display
   =============================== */
label.app-heading[b-q20ohvmcup] {
    display: block;
    width: 100%;
    flex: 1 1 100%;
    align-self: stretch;
    box-sizing: border-box;
}

.app-heading.center[b-q20ohvmcup] {
    text-align: center;
}

.fi-route[b-q20ohvmcup] {
    background: var(--fi-blue-50);
    border-left: 4px solid var(--fi-blue);
    border-radius: 6px;
    padding: 6px 10px;
    color: var(--fi-blue-dark);
    font-weight: 600;
    line-height: 1.25;
}

/* ===============================
   Compact Flight Info Block
   =============================== */
.fi-block .input-column[b-q20ohvmcup] {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 8px;
}

.fi-block .float-field[b-q20ohvmcup] {
    margin-bottom: 8px !important;
}

.fi-block .float-input.form-control[b-q20ohvmcup],
.fi-block .selected-picker[b-q20ohvmcup],
.fi-block .selected-country[b-q20ohvmcup] {
    min-height: 46px !important;
    padding-top: 16px !important;
    padding-bottom: 8px !important;
}

.fi-block .float-input:placeholder-shown + .float-label[b-q20ohvmcup] {
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
}

.fi-block .float-input:focus + .float-label[b-q20ohvmcup],
.fi-block .float-input:not(:placeholder-shown) + .float-label[b-q20ohvmcup] {
    top: 6px;
    transform: none;
    font-size: .78rem;
}

.fi-block .input-column[b-q20ohvmcup] {
    line-height: normal !important;
}

.flight-date[b-q20ohvmcup] {
    padding-top: 12px !important;
}

/* ===============================
   Time Chip (inside float field)
   =============================== */
.float-field .time-chip[b-q20ohvmcup] {
    position: absolute;
    right: 44px;
    top: 14px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--fi-blue-50, #F2F6FF);
    color: var(--fi-blue-dark, #0F2B5B);
    border: 1px solid var(--fi-border, #DFE3EE);
    font-size: .75rem;
    line-height: 1.4;
    pointer-events: none;
    white-space: nowrap;
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.float-field.has-value .time-chip[b-q20ohvmcup],
.float-field:focus-within .time-chip[b-q20ohvmcup] {
    top: 20px;
}

/* ===============================
   Radzen Input Integration
   =============================== */
.float-field .rz-inputtext[b-q20ohvmcup],
.fi-datetime[b-q20ohvmcup]  .rz-inputtext {
    height: 56px;
    line-height: 56px;
    padding-top: 18px;
    padding-bottom: 8px;
    padding-left: 12px;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 16px;
    color: var(--brand-blue, #005EB8);
    border-radius: 8px;
    width: 100%;
}

.fi-datetime[b-q20ohvmcup]  .rz-inputtext {
    padding-right: 44px;
}

    .fi-datetime[b-q20ohvmcup]  .rz-inputtext:focus {
        outline: none;
        border-color: var(--brand-blue, #1B63C7);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-blue, #1B63C7) 22%, transparent);
    }

.float-field.has-value .float-label[b-q20ohvmcup],
.float-field:focus-within .float-label[b-q20ohvmcup] {
    opacity: .85;
}

.fi-datetime[b-q20ohvmcup] {
    display: block;
    width: 100%;
    scroll-margin-top: 72px;
}

:root :where(.fi-datetime)[b-q20ohvmcup]  .rz-datepicker-popup,
:root :where(.fi-datetime)[b-q20ohvmcup]  .rz-timepicker-popup {
    z-index: 3000;
}

.fi-datetime.clickable[b-q20ohvmcup] {
    cursor: pointer;
}

    .fi-datetime.clickable input[b-q20ohvmcup] {
        cursor: text;
    }

/* ===============================
   DatePicker as Button
   =============================== */
.float-field.fi-datetime[b-q20ohvmcup] {
    position: relative;
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 0;
}

.fi-datetime .selected-picker[b-q20ohvmcup] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    padding: 0 12px;
    border: 1px solid var(--field-border, #d9d9d9);
    border-radius: 4px;
    background: #fff;
}

.fi-datetime .picker-placeholder[b-q20ohvmcup] {
    opacity: .75;
    color: var(--field-placeholder, #8a8a8a);
}

.fi-datetime .picker-value[b-q20ohvmcup] {
    color: var(--field-text, #222);
}

.fi-datetime .picker-icon[b-q20ohvmcup] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    margin-left: 8px;
    flex: 0 0 auto;
    opacity: .8;
}

.fi-datetime.is-focused .selected-picker[b-q20ohvmcup],
.float-field.fi-datetime:focus .selected-picker[b-q20ohvmcup] {
    border-color: var(--field-focus, #3b82f6) !important;
    box-shadow: 0 0 0 .2rem var(--field-ring, rgba(59,130,246,.15)) !important;
    outline: 0;
}

.float-field.fi-datetime .float-label[b-q20ohvmcup] {
    position: absolute;
    left: 12px;
    top: 18px;
    pointer-events: none;
    transition: transform .16s ease, color .16s ease;
    transform-origin: left top;
}

.float-field.fi-datetime:focus .float-label[b-q20ohvmcup],
.fi-datetime.has-value .float-label[b-q20ohvmcup],
.fi-datetime.is-focused .float-label[b-q20ohvmcup] {
    color: var(--brand-blue, #0a66c2);
    transform: translateY(-14px) scale(.86);
}

.fi-datetime.clickable .selected-picker[b-q20ohvmcup] {
    cursor: pointer;
}

/* ===============================
   Radzen Dropdown Panel Styling
   =============================== */
:root :where(.rz-dropdown-panel)[b-q20ohvmcup] {
    z-index: 5000;
}

/* ===============================
   Airline Dropdown - Flex Layout
   =============================== */
.dd-group-title[b-q20ohvmcup] {
    padding: 1px 1px;
    font-weight: 700;
    opacity: .85;
    pointer-events: none;
    line-height: 15px;
    background-color: var(--brand-blue-dark);
    color: white;
}

.dd-row[b-q20ohvmcup] {
    display: flex;
    gap: 2px;
    align-items: center;
    padding: 1px 5px;
}

.dd-code[b-q20ohvmcup] {
    font-weight: 700;
    min-width: 3ch;
    text-align: center;
    color: var(--brand-blue);
}

.sep[b-q20ohvmcup] {
    opacity: .55;
}

.dd-name[b-q20ohvmcup] {
    opacity: .95;
    color: var(--brand-blue);
}

/* Tighter airline dropdown */
:root :where(.airline-dd-popup) .dd-row[b-q20ohvmcup] {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px 2px !important;
    font-size: 0.9rem;
}

:root :where(.airline-dd-popup) .dd-group-title[b-q20ohvmcup] {
    font-weight: 700;
    padding: 2px 8px !important;
    margin: 2px 0 2px !important;
    pointer-events: none;
    background-color: var(--brand-blue-dark);
    color: white;
}

:root :where(.airline-dd-popup) .dd-code[b-q20ohvmcup] {
    font-weight: 700;
    min-width: 3ch;
    text-align: center;
    color: var(--brand-blue);
}

:root :where(.airline-dd-popup) .rz-dropdown-item:not([data-disabled="true"]):hover .dd-row[b-q20ohvmcup],
:root :where(.airline-dd-popup) .rz-dropdown-item.rz-state-highlight .dd-row[b-q20ohvmcup] {
    background: rgba(0,0,0,.04);
}

:global(.airline-dd-popup) .rz-dropdown-items[b-q20ohvmcup] {
    max-height: 80vh;
    overflow: auto;
}

:global(.airline-dd-popup) li.rz-dropdown-item[b-q20ohvmcup] {
    padding-block: 6.75px !important;
    padding-inline: 12px !important;
    line-height: 1.2;
}

/* Match airline dropdown spacing for flight number dropdown */
:global(.flightnum-dd-popup) li.rz-dropdown-item[b-q20ohvmcup] {
    padding-block: 6.75px !important;
    padding-inline: 12px !important;
    line-height: 1.2;
}

/* Override Radzen's default dropdown item padding for flight dropdown */
.flightnum-dd-popup .rz-dropdown-item[b-q20ohvmcup],
.flightnum-dd-popup .rz-dropdown-items li[b-q20ohvmcup] {
    padding-block: 6.75px !important;
    padding-inline: 12px !important;
}

/* ===============================
   Flight Number Dropdown - Grid Layout
   =============================== */
:root[b-q20ohvmcup] {
    --dd-grid-gap: 2px;
    --dd-grid-pad-y: 10px; /* Increased from 6px to match airline list spacing */
    --dd-grid-pad-x: 10px;
    --dd-col-sep: #E2E6EF;
    --dd-row-hover: #eaf1fb;
    --dd-radius: 6px;
    --dd-font: .84rem;
}

    /* 4-column grid: Flt# | Depart | Arrive | Airports */
    :root :where(.rz-dropdown-panel) .dd-grid[b-q20ohvmcup] {
        display: grid;
        grid-template-columns: 18% 25% 25% 32%;
        align-items: center;
        gap: var(--dd-grid-gap);
        padding: var(--dd-grid-pad-y) var(--dd-grid-pad-x);
        font-size: var(--dd-font);
    }

        :root :where(.rz-dropdown-panel) .dd-grid .dd-cell[b-q20ohvmcup] {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding: 0 6px;
            border-right: 1px solid var(--dd-col-sep);
        }

            :root :where(.rz-dropdown-panel) .dd-grid .dd-cell:last-child[b-q20ohvmcup] {
                border-right: none;
            }

        /* Alignment by column */
        :root :where(.rz-dropdown-panel) .dd-grid .col-flt[b-q20ohvmcup] {
            text-align: center;
            font-weight: 700;
            font-variant-numeric: tabular-nums;
        }

        :root :where(.rz-dropdown-panel) .dd-grid .col-dep[b-q20ohvmcup],
        :root :where(.rz-dropdown-panel) .dd-grid .col-arr[b-q20ohvmcup] {
            text-align: right;
            font-variant-numeric: tabular-nums;
        }

        :root :where(.rz-dropdown-panel) .dd-grid .col-airports[b-q20ohvmcup] {
            text-align: center;
        }

    /* Row hover */
    :root :where(.rz-dropdown-panel) li.rz-dropdown-item:hover .dd-row[b-q20ohvmcup] {
        background: var(--dd-row-hover);
        border-radius: var(--dd-radius);
    }

    /* Sticky header band */
    :root :where(.rz-dropdown-panel) .rz-dd-header[b-q20ohvmcup] {
        position: sticky;
        top: 0;
        z-index: 1;
        background: var(--dd-header-bg) !important;
        color: var(--dd-header-fg) !important;
        font-weight: 700;
        border-radius: var(--dd-radius);
        margin: 4px 6px;
        padding: 4px 8px;
    }

    :root :where(.rz-dropdown-panel) li.rz-dropdown-item:has(.rz-dd-header)[b-q20ohvmcup] {
        pointer-events: none;
        background: transparent !important;
    }

        :root :where(.rz-dropdown-panel) li.rz-dropdown-item:has(.rz-dd-header).rz-state-highlight[b-q20ohvmcup],
        :root :where(.rz-dropdown-panel) li.rz-dropdown-item:has(.rz-dd-header).rz-state-focus[b-q20ohvmcup] {
            background: transparent !important;
        }

    :root :where(.rz-dropdown-panel) .rz-dd-header .dd-cell[b-q20ohvmcup] {
        color: inherit !important;
    }

    :root :where(.rz-dropdown-panel) .rz-dropdown-items[b-q20ohvmcup] {
        max-height: 60dvh;
        overflow: auto;
    }

    :root :where(.rz-dropdown-panel) .dd-row:nth-child(even)[b-q20ohvmcup] {
        background: #f9fafc;
        border-radius: var(--dd-radius);
    }

    /* ===============================
   Flight Context Text
   =============================== */
    :root :where(.rz-dropdown-panel) .dd-flight-context[b-q20ohvmcup] {
        padding: 1px 4px;
        font-size: 0.75rem;
        color: #666;
        text-align: center;
        background: #f9fafc;
        border-bottom: 1px solid #e0e0e0;
        font-style: italic;
    }

    :root :where(.rz-dropdown-panel) li.rz-dropdown-item:has(.dd-flight-context)[b-q20ohvmcup] {
        pointer-events: none;
        background: transparent !important;
    }

    /* ===============================
   No Flights Found Message
   =============================== */
    :root :where(.rz-dropdown-panel) .dd-no-flights-message[b-q20ohvmcup] {
        padding: 12px 8px;
        font-size: 0.875rem;
        color: #666;
        text-align: center;
        background: #f9fafc;
        font-style: italic;
        grid-column: 1 / -1;
    }

    :root :where(.rz-dropdown-panel) li.rz-dropdown-item:has(.dd-no-flights-message)[b-q20ohvmcup] {
        pointer-events: none;
        background: transparent !important;
    }

    /* ===============================
   Dropdown "Not Listed" Links
   =============================== */
    :root :where(.airline-dd-popup) li.rz-dropdown-item.dd-airline-link[b-q20ohvmcup] {
        border-bottom: 1px solid #e0e0e0;
        margin-bottom: 4px;
    }

    :root :where(.airline-dd-popup) li.rz-dropdown-item:has(a[href*="OnAirlineNotInListClick"]) > div[b-q20ohvmcup],
    :root :where(.flightnum-dd-popup) li.rz-dropdown-item:has(a[href*="OnFlightNotInListClick"]) > div[b-q20ohvmcup] {
        padding: 2px 8px !important;
    }

    :root :where(.airline-dd-popup) li.rz-dropdown-item:has(a[href*="OnAirlineNotInListClick"]) a[b-q20ohvmcup],
    :root :where(.flightnum-dd-popup) li.rz-dropdown-item:has(a[href*="OnFlightNotInListClick"]) a[b-q20ohvmcup] {
        font-size: 12px;
        line-height: 1.2;
        color: var(--brand-gold) !important;
    }

/* ===============================
   Dropdown Placeholder Styles (Consolidated)
   =============================== */
.airline-dd-popup input[b-q20ohvmcup]::placeholder,
.flightnum-dd-popup input[b-q20ohvmcup]::placeholder,
.rz-dropdown-panel input[b-q20ohvmcup]::placeholder {
    color: #aaa !important;
    opacity: 0.6 !important;
    font-size: 11px !important;
    font-style: italic !important;
}

/* Webkit (Chrome, Safari, Edge) */
.airline-dd-popup input[b-q20ohvmcup]::-webkit-input-placeholder,
.flightnum-dd-popup input[b-q20ohvmcup]::-webkit-input-placeholder,
.rz-dropdown-panel input[b-q20ohvmcup]::-webkit-input-placeholder {
    color: #aaa !important;
    opacity: 0.6 !important;
    font-size: 11px !important;
    font-style: italic !important;
}

/* Firefox */
.airline-dd-popup input[b-q20ohvmcup]::-moz-placeholder,
.flightnum-dd-popup input[b-q20ohvmcup]::-moz-placeholder,
.rz-dropdown-panel input[b-q20ohvmcup]::-moz-placeholder {
    color: #aaa !important;
    opacity: 0.6 !important;
    font-size: 11px !important;
    font-style: italic !important;
}

/* Legacy Edge */
.airline-dd-popup input:-ms-input-placeholder[b-q20ohvmcup],
.flightnum-dd-popup input:-ms-input-placeholder[b-q20ohvmcup],
.rz-dropdown-panel input:-ms-input-placeholder[b-q20ohvmcup] {
    color: #aaa !important;
    opacity: 0.6 !important;
    font-size: 11px !important;
    font-style: italic !important;
}

/* ===============================
   Dropdown Filter Container
   =============================== */
.airline-dd-popup .rz-dropdown-filter-container[b-q20ohvmcup],
.flightnum-dd-popup .rz-dropdown-filter-container[b-q20ohvmcup],
.rz-dropdown-filter-container[b-q20ohvmcup] {
    padding: 3px !important;
}

.airline-dd-popup .rz-dropdown-filter[b-q20ohvmcup],
.flightnum-dd-popup .rz-dropdown-filter[b-q20ohvmcup] {
    padding: 6px !important;
}

.airline-dd-popup .rz-dropdown-filter-container input[b-q20ohvmcup],
.flightnum-dd-popup .rz-dropdown-filter-container input[b-q20ohvmcup],
.rz-dropdown-panel .rz-dropdown-filter-container input[b-q20ohvmcup] {
    font-size: 13px !important;
}

/* Reduce vertical padding around dropdown items */
.rz-autocomplete-items[b-q20ohvmcup],
.rz-multiselect-items[b-q20ohvmcup],
.rz-dropdown-items[b-q20ohvmcup] {
    padding: 3px !important;
}

/* ===============================
   Calendar/Datepicker Compaction
   =============================== */
.dp-sm[b-q20ohvmcup] {
    --dp-scale: 0.59;
    transform-origin: top left;
}

    .dp-sm .rz-calendar[b-q20ohvmcup] {
        font-size: 0.875rem;
    }

        .dp-sm .rz-calendar .rz-calendar-day[b-q20ohvmcup],
        .dp-sm .rz-calendar .rz-calendar-month[b-q20ohvmcup] {
            width: 2rem;
            height: 2rem;
            line-height: 2rem;
            padding: 0;
        }

        .dp-sm .rz-calendar .rz-calendar-title[b-q20ohvmcup] {
            padding: .25rem .5rem;
        }

    .dp-sm .rz-timepicker[b-q20ohvmcup] {
        font-size: 0.875rem;
    }

        .dp-sm .rz-timepicker .rz-inputtext[b-q20ohvmcup] {
            width: 2.75rem;
        }

        .dp-sm .rz-timepicker .rz-seconds[b-q20ohvmcup] {
            display: none;
        }

.rz-popup .rz-calendar[b-q20ohvmcup],
.rz-calendar.rz-calendar-popup[b-q20ohvmcup],
body > div[class*="rz-overlay"] .rz-calendar[b-q20ohvmcup] {
    font-size: 0.875rem;
}

    .rz-popup .rz-calendar .rz-calendar-day[b-q20ohvmcup],
    .rz-calendar.rz-calendar-popup .rz-calendar-day[b-q20ohvmcup],
    body > div[class*="rz-overlay"] .rz-calendar .rz-calendar-day[b-q20ohvmcup],
    .rz-popup .rz-calendar .rz-calendar-month[b-q20ohvmcup],
    .rz-calendar.rz-calendar-popup .rz-calendar-month[b-q20ohvmcup],
    body > div[class*="rz-overlay"] .rz-calendar .rz-calendar-month[b-q20ohvmcup] {
        width: 2rem;
        height: 2rem;
        line-height: 2rem;
        padding: 0;
    }

/* ===============================
   Misc / Helpers
   =============================== */
.help-link[b-q20ohvmcup] {
    margin-left: 8px;
    color: #4285F4;
    text-decoration: underline;
    cursor: pointer;
    font-size: .9rem;
    line-height: 1;
    margin-top: 2px;
}

    .help-link:hover[b-q20ohvmcup] {
        color: #3367D6;
    }

.error-message[b-q20ohvmcup] {
    color: #dc3545;
    font-size: 1em;
    margin-top: 8px;
    text-align: center;
}

hr[b-q20ohvmcup] {
    margin: .8rem 0;
    color: inherit;
    border: 0;
    border-top: var(--bs-border-width) solid;
    opacity: .25;
}

@keyframes fadeIn-b-q20ohvmcup {
    from {
        opacity: 0;
        transform: scale(.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===============================
   Float Field Base (for standard inputs)
   =============================== */
.float-field[b-q20ohvmcup] {
    position: relative;
}

    .float-field .float-label[b-q20ohvmcup] {
        position: absolute;
        left: 12px;
        top: 16px;
        pointer-events: none;
        transition: top .15s ease, font-size .15s ease;
        background: #fff;
        padding: 0 4px;
        z-index: 2;
    }

    .float-field:focus-within .float-label[b-q20ohvmcup],
    .float-field.has-value .float-label[b-q20ohvmcup] {
        top: -8px;
        font-size: 12px;
        opacity: .85;
    }

    .float-field.always-float .float-label[b-q20ohvmcup] {
        top: -8px !important;
        font-size: 12px !important;
        opacity: .85;
    }

    .float-field input[type="text"][b-q20ohvmcup],
    .float-field input:not([type])[b-q20ohvmcup],
    .float-field input[type="date"][b-q20ohvmcup],
    .float-field input[type="time"][b-q20ohvmcup] {
        height: var(--control-h);
        line-height: var(--control-h);
        padding: 18px 12px 8px 12px;
        box-sizing: border-box;
    }

/* ===============================
   Mobile Responsive Styles
   =============================== */
@media (max-width: 768px) {
    /* Make modal taller on mobile devices */
    .flight-info-airline-modal-content[b-q20ohvmcup] {
        max-height: 90dvh;
    }
}

@media (max-width: 500px) {
    .float-field .selected-picker[b-q20ohvmcup] {
        padding-left: 12px;
        padding-right: 12px;
    }
}

@media (max-width: 480px) {
    .timepicker-modal[b-q20ohvmcup] {
        width: calc(100vw - 24px);
    }

    .timepicker-row[b-q20ohvmcup] {
        grid-template-columns: 1fr 1fr;
    }

    .flight-row-airline[b-q20ohvmcup] {
        grid-template-columns: minmax(0, 1.0fr) minmax(0, 1.0fr) minmax(0, 1fr);
        gap: 6px;
        text-align: center;
    }

        .flight-row-airline .input-column--flightnum[b-q20ohvmcup] {
            min-width: 0;
            text-align: center !important;
        }

            .flight-row-airline .input-column--flightnum[b-q20ohvmcup]  .rz-inputtext {
                width: 100%;
                max-width: 100%;
                box-sizing: border-box;
                text-align: center;
            }
}

@media (max-width: 430px) {
    .flight-info-airline-modal-content[b-q20ohvmcup] {
        max-width: 96vw;
        max-height: 90dvh; /* Taller on mobile for better usability */
    }

    .flights-modal-content[b-q20ohvmcup] {
        width: 96vw;
        max-width: 420px;
    }

    .flights-grid th:nth-child(1)[b-q20ohvmcup],
    .flights-grid td:nth-child(1)[b-q20ohvmcup] {
        width: 10%;
    }

    .flights-grid th:nth-child(2)[b-q20ohvmcup],
    .flights-grid td:nth-child(2)[b-q20ohvmcup] {
        width: 10%;
        text-align: center;
        white-space: nowrap;
    }

    .flights-grid th:nth-child(3)[b-q20ohvmcup],
    .flights-grid td:nth-child(3)[b-q20ohvmcup] {
        width: 10%;
        text-align: center;
        white-space: nowrap;
    }

    .flights-grid th:nth-child(4)[b-q20ohvmcup],
    .flights-grid td:nth-child(4)[b-q20ohvmcup] {
        width: 12%;
        text-align: center;
        white-space: nowrap;
    }

    .flights-grid th:nth-child(5)[b-q20ohvmcup],
    .flights-grid td:nth-child(5)[b-q20ohvmcup] {
        width: 16%;
        text-align: right;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }

    .flights-grid th:nth-child(6)[b-q20ohvmcup],
    .flights-grid td:nth-child(6)[b-q20ohvmcup] {
        width: 16%;
        text-align: right;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }

    .flights-grid thead th:nth-child(4)[b-q20ohvmcup],
    .flights-grid thead th:nth-child(5)[b-q20ohvmcup],
    .flights-grid thead th:nth-child(6)[b-q20ohvmcup] {
        font-size: 0;
    }

        .flights-grid thead th:nth-child(4)[b-q20ohvmcup]::after {
            content: 'Flt#';
            font-size: .7rem;
        }

        .flights-grid thead th:nth-child(5)[b-q20ohvmcup]::after {
            content: 'Depart';
            font-size: .7rem;
        }

        .flights-grid thead th:nth-child(6)[b-q20ohvmcup]::after {
            content: 'Arrive';
            font-size: .7rem;
        }

    .flights-grid thead th[b-q20ohvmcup],
    .flights-grid tbody td[b-q20ohvmcup] {
        padding: .28rem .12rem;
        font-size: .7rem;
        line-height: 1.6;
    }

    .flights-grid td:nth-child(1)[b-q20ohvmcup] {
        white-space: normal;
        word-break: break-word;
        font-size: .64rem;
        line-height: 2.05;
    }
}

@media (max-width: 420px) {
    .flight-row-airline[b-q20ohvmcup] {
        grid-template-columns: 1fr 0.6fr 1.2fr;
        gap: 5px;
    }

    .airline-picker .selected-picker[b-q20ohvmcup],
    .flightnum-picker .selected-picker[b-q20ohvmcup],
    .triptype-picker .selected-picker[b-q20ohvmcup] {
        min-height: 44px;
        padding: 8px 4px;
    }

    .flight-row-airline .picker-value[b-q20ohvmcup],
    .flight-row-airline input.form-control[b-q20ohvmcup] {
        font-size: 0.95rem;
        text-align: center;
    }
}

@media (max-width: 400px) {
    .float-field .time-chip[b-q20ohvmcup] {
        right: 40px;
        font-size: .55rem;
        font-weight: 600;
        max-width: 35%;
    }

    /* Mobile height adjustment for airline/flight dropdowns - match site.css */
    .airline-picker[b-q20ohvmcup]  .rz-dropdown,
    .flightnum-picker[b-q20ohvmcup]  .rz-dropdown {
        min-height: 52px !important;
        padding: 16px 10px 8px 10px !important;
    }
}

@media (max-width: 360px) {
    .flight-row-airline[b-q20ohvmcup] {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .timepicker-modal[b-q20ohvmcup] {
        transition: none;
    }
}

/* ===============================
   Airline & Flight Button Vertical Centering Fix
   =============================== */

/* Force symmetric padding for vertical centering */
.airline-selection-button.rz-button[b-q20ohvmcup],
.flight-selection-button.rz-button[b-q20ohvmcup] {
    padding: 14px 20px 14px 24px !important;
    height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Target Radzen's internal button-box wrapper */
.airline-selection-button .rz-button-box[b-q20ohvmcup],
.flight-selection-button .rz-button-box[b-q20ohvmcup] {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
 
    /* Ensure all child elements are vertically centered */
    .airline-selection-button .rz-button-box > *[b-q20ohvmcup],
    .flight-selection-button .rz-button-box > *[b-q20ohvmcup] {
        display: flex !important;
        align-items: center !important;
    }

/* Remove any default Radzen vertical margins/padding */
.airline-selection-button.rz-button .rz-button-text[b-q20ohvmcup],
.flight-selection-button.rz-button .rz-button-text[b-q20ohvmcup] {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}
/* /Components/AirlineSelectionModal.razor.rz.scp.css */
/* ===============================
   Airline Selection Modal - Main Container
   =============================== */

/* Full-screen modal on mobile */
@media (max-width: 480px) {
    /* Apply to parent Radzen dialog */
    :global(.rz-dialog.dlg-airline)[b-3jjwwa4bw2] {
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
    }

    :global(.rz-dialog.dlg-airline .rz-dialog-content)[b-3jjwwa4bw2] {
        height: 100%;
        padding: 0 !important;
        overflow: hidden !important;
        display: flex;
        flex-direction: column;
    }
}

.airline-modal-container[b-3jjwwa4bw2] {
    max-height: 75vh;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ===============================
   Modal Header Section (search area)
   =============================== */
.modal-header-section[b-3jjwwa4bw2] {
    padding: 12px 20px 10px 20px;
    flex-shrink: 0;
}

/* ===============================
   Search Box
   =============================== */
.airline-search-box[b-3jjwwa4bw2] {
    width: 100%;
    flex-shrink: 0;
    height: 44px;
    padding: 10px 14px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 6px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .airline-search-box:focus[b-3jjwwa4bw2] {
        border-color: var(--brand-blue, var(--brand-blue));
        box-shadow: 0 0 0 2px rgba(41, 99, 168, 0.2);
    }

    .airline-search-box[b-3jjwwa4bw2]::placeholder {
        color: #999;
    }

/* Search expand button for mobile */
.search-expand-button[b-3jjwwa4bw2] {
    width: 100%;
    height: 44px;
    padding: 10px 14px;
    font-size: 16px;
    border: 1px dashed #aaa;
    border-radius: 6px;
    background: #f8f9fa;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: inherit;
    transition: all 0.2s ease;
}

    .search-expand-button:hover[b-3jjwwa4bw2],
    .search-expand-button:active[b-3jjwwa4bw2] {
        border-color: var(--brand-blue, var(--brand-blue));
        background: #fff;
        color: #333;
    }

    .search-expand-button .search-icon[b-3jjwwa4bw2] {
        font-size: 18px;
    }

@media (max-width: 480px) {
    .airline-search-box[b-3jjwwa4bw2] {
        height: 40px;
        font-size: 16px;
        padding: 8px 12px;
    }

    .search-expand-button[b-3jjwwa4bw2] {
        height: 40px;
        padding: 8px 12px;
    }
}

/* ===============================
   Airlines List Container
   =============================== */
.airlines-list[b-3jjwwa4bw2] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding: 8px 20px 80px 20px;
}

/* ===============================
   Airline Header (Section Headers)
   =============================== */
.airline-header[b-3jjwwa4bw2] {
    background: var(--brand-blue-dark, #0a2b56);
    color: white;
    padding: 6px 12px;
    font-weight: 600;
    margin-top: 6px;
    border-radius: 4px;
    text-align: center;
    font-size: 14px;
}

/* ===============================
   Airline Row Buttons
   =============================== */
.airline-row-button[b-3jjwwa4bw2] {
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    font-family: inherit;
    display: block;
}

    .airline-row-button:hover[b-3jjwwa4bw2] {
        background: #f8f9fa;
        border-color: var(--brand-blue, var(--brand-blue));
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .airline-row-button:focus[b-3jjwwa4bw2] {
        outline: 2px solid var(--brand-blue, var(--brand-blue));
        outline-offset: 2px;
    }

    /* Selected airline styling */
    .airline-row-button.selected[b-3jjwwa4bw2] {
        background: #e8f4fd;
        border-color: var(--brand-blue, var(--brand-blue));
        border-width: 2px;
    }

        .airline-row-button.selected:hover[b-3jjwwa4bw2] {
            background: #d4ebfc;
        }

/* ===============================
   Airline row content layout
   =============================== */
.airline-row-content[b-3jjwwa4bw2] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ===============================
   Logo Wrapper - contains img and fallback
   =============================== */
.airline-logo-wrapper[b-3jjwwa4bw2] {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    position: relative;
}

/* ===============================
   Fallback - always visible as background layer
   =============================== */
.airline-code-fallback[b-3jjwwa4bw2] {
    width: 32px;
    height: 32px;
    background: var(--brand-blue-dark, #0a2b56);
    color: white;
    font-weight: 700;
    font-size: 11px;
    border-radius: 4px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
}

/* ===============================
   Airline Logo - positioned above fallback, covers it when loaded
   =============================== */
.airline-logo[b-3jjwwa4bw2] {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 4px;
    background-color: white;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.airline-name[b-3jjwwa4bw2] {
    flex: 1;
}

/* ===============================
   Selected Checkmark
   =============================== */
.selected-checkmark[b-3jjwwa4bw2] {
    color: var(--brand-blue, var(--brand-blue));
    font-weight: bold;
    font-size: 18px;
    margin-left: auto;
    flex-shrink: 0;
}

/* ===============================
   Not in List Link (Always Visible)
   =============================== */
.not-in-list-container[b-3jjwwa4bw2] {
    padding: 10px 20px;
    border-top: 1px solid #e0e0e0;
    text-align: center;
    background: #f5f6f8;
    flex-shrink: 0;
}

.not-in-list-link[b-3jjwwa4bw2] {
    color: var(--brand-gold, var(--brand-gold));
    text-decoration: underline;
    cursor: pointer;
    font-size: 14px;
}

    .not-in-list-link:hover[b-3jjwwa4bw2] {
        color: var(--brand-blue-dark, var(--brand-blue-dark));
    }

/* ===============================
   Mobile Responsive
   =============================== */
@media (max-width: 480px) {
    .airline-modal-container[b-3jjwwa4bw2] {
        height: 100%;
        display: flex;
        flex-direction: column;
        position: relative;
        overflow: hidden;
    }

    .modal-header-section[b-3jjwwa4bw2] {
        padding: 10px 16px 8px 16px;
        flex-shrink: 0;
    }

    .airlines-list[b-3jjwwa4bw2] {
        padding: 6px 16px 8px 16px;
        gap: 2px;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        flex: 1;
        min-height: 0;
        margin-bottom: 50px;
    }

    .airline-header[b-3jjwwa4bw2] {
        padding: 5px 10px;
        font-size: 13px;
        margin-top: 4px;
    }

    .airline-row-button[b-3jjwwa4bw2] {
        padding: 9px 12px;
        font-size: 20px;
    }

    .not-in-list-container[b-3jjwwa4bw2] {
        padding: 12px 16px;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: #f5f6f8;
        z-index: 10;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
        flex-shrink: 0;
    }

    .not-in-list-link[b-3jjwwa4bw2] {
        font-size: 13px;
    }

    .selected-checkmark[b-3jjwwa4bw2] {
        font-size: 20px;
    }
}

/* ===============================
   ACCESSIBILITY ENHANCEMENTS
   =============================== */

/* Focused state for keyboard navigation (distinct from selected) */
.airline-row-button.focused[b-3jjwwa4bw2] {
    background: #f0f7ff;
    border-color: var(--brand-blue, #005EB8);
    box-shadow: inset 0 0 0 2px var(--brand-blue, #005EB8);
}

.airline-row-button.focused.selected[b-3jjwwa4bw2] {
    background: #d4ebfc;
}

/* Focus-visible for keyboard users - enhanced visibility */
.airline-row-button:focus-visible[b-3jjwwa4bw2] {
    outline: 3px solid var(--brand-blue, #005EB8);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(0, 94, 184, 0.25);
}

/* Not in list button - accessible with enhanced visibility */
.not-in-list-link:focus-visible[b-3jjwwa4bw2] {
    outline: 3px solid var(--brand-blue, #005EB8);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(0, 94, 184, 0.25);
}

/* Search expand button - keyboard focus with enhanced visibility */
.search-expand-button:focus-visible[b-3jjwwa4bw2] {
    outline: 3px solid var(--brand-blue, #005EB8);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(0, 94, 184, 0.25);
}

/* Search input - enhanced focus visibility */
.airline-search-box:focus-visible[b-3jjwwa4bw2] {
    outline: 3px solid var(--brand-blue, #005EB8);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(0, 94, 184, 0.25);
}
/* /Components/BookedReservationDetail.razor.rz.scp.css */
/* ===============================
   Loading & Error States
   =============================== */
.loading-container[b-gtbrhli94c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    gap: 16px;
}

    .loading-container p[b-gtbrhli94c] {
        color: #666;
        font-size: 1rem;
    }

.error-container[b-gtbrhli94c],
.no-reservation[b-gtbrhli94c] {
    padding: 20px;
}

/* ===============================
   Header
   =============================== */
.reservation-header[b-gtbrhli94c] {
    background-color: var(--brand-blue, var(--brand-blue));
    color: white;
    padding: 16px 24px;
    border-radius: 8px 8px 0 0;
    margin-bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .reservation-header h2[b-gtbrhli94c] {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
    }

    /* Canceled header state */
    .reservation-header.canceled[b-gtbrhli94c] {
        background-color: #6c757d;
    }

/* Canceled banner - appears right below header */
.canceled-banner[b-gtbrhli94c] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-top: none;
    color: #721c24;
    font-weight: 500;
    font-size: 0.95rem;
}

    .canceled-banner i[b-gtbrhli94c] {
        font-size: 1.1rem;
        color: #dc3545;
    }

/* ===============================
   Trip Summary Card - WebMemberReservations Style
   =============================== */
.trip-summary-card[b-gtbrhli94c] {
    border-radius: 0 0 8px 8px;
    margin-bottom: 16px;
    border: 1px solid #e0e0e0;
    border-top: none;
}

    /* When canceled, no top border radius since banner is above */
    .trip-summary-card.canceled[b-gtbrhli94c] {
        border-radius: 0 0 8px 8px;
    }

.trip-summary-content[b-gtbrhli94c] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Detail lines like WebMemberReservationsComponent */
.detail-line[b-gtbrhli94c] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    color: #333;
}

    .detail-line.date-time[b-gtbrhli94c] {
        font-weight: 600;
        color: #222;
    }

/* Small hint text showing pickup time relative to flight */
.pickup-delta-hint[b-gtbrhli94c] {
    font-size: 0.8rem;
    color: #64748b;
    margin-left: 28px; /* Align with text after the icon */
    margin-top: -4px;
    margin-bottom: 4px;
}

    .detail-line.flight-time[b-gtbrhli94c] {
        font-weight: 500;
        color: #333;
    }

    .detail-line.charter-duration[b-gtbrhli94c] {
        font-weight: 500;
        color: #333;
    }

    .detail-line.confirmation[b-gtbrhli94c] {
        font-size: 0.9rem;
    }

/* Prominent confirmation number - first item in trip summary */
.detail-line.confirmation-prominent[b-gtbrhli94c] {
    font-size: 1rem;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
}

    .detail-line.confirmation-prominent .confirmation-label[b-gtbrhli94c] {
        color: #555;
        font-weight: 500;
    }

    .detail-line.confirmation-prominent .confirmation-number[b-gtbrhli94c] {
        font-weight: 700;
        font-size: 1.15rem;
        color: var(--brand-blue, #2963A8);
        letter-spacing: 0.5px;
    }

    .detail-line.pickup-address[b-gtbrhli94c],
    .detail-line.dropoff-address[b-gtbrhli94c] {
        font-size: 0.95rem;
        color: #555;
        align-items: flex-start;
    }

    .detail-line.passengers[b-gtbrhli94c] {
        font-size: 0.9rem;
        color: #555;
    }

    .detail-line.passengers-bags[b-gtbrhli94c] {
        font-size: 0.9rem;
        color: #555;
    }

    .detail-line.pickup-instructions[b-gtbrhli94c] {
        font-size: 0.9rem;
        color: #555;
        background-color: #fef7ed;
        border: 1px solid #f5d5a8;
        border-radius: 8px;
        padding: 10px 12px;
        margin-top: 4px;
    }

.pickup-instructions-content[b-gtbrhli94c] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pickup-instructions-text[b-gtbrhli94c] {
    line-height: 1.4;
    color: #92400e;
}

.see-more-link[b-gtbrhli94c] {
    background: none;
    border: none;
    padding: 0;
    color: var(--brand-blue, var(--brand-blue));
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: underline;
    align-self: flex-start;
}

    .see-more-link:hover[b-gtbrhli94c] {
        color: var(--brand-blue-dark, #0a2b56);
    }

/* Edit Icon Button - Pen icons for inline editing */
.edit-icon-btn[b-gtbrhli94c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    margin-left: 8px;
    border: 1px solid var(--brand-blue, var(--brand-blue));
    border-radius: 6px;
    background: white;
    color: var(--brand-blue, var(--brand-blue));
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

    .edit-icon-btn:hover[b-gtbrhli94c] {
        background: var(--brand-blue, var(--brand-blue));
        color: white;
        transform: scale(1.05);
    }

    .edit-icon-btn:active[b-gtbrhli94c] {
        transform: scale(0.95);
    }

    .edit-icon-btn i[b-gtbrhli94c] {
        font-size: 12px;
    }

/* Location indicator dots and lines */
.location-indicator[b-gtbrhli94c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 8px;
    position: relative;
    width: 18px;
    flex-shrink: 0;
}

.location-dot[b-gtbrhli94c] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pickup-dot[b-gtbrhli94c] {
    background-color: #4285F4;
    border: 2px solid #3367D6;
}

.dropoff-dot[b-gtbrhli94c] {
    background-color: #4285F4;
    border: 2px solid #3367D6;
}

.location-line[b-gtbrhli94c] {
    width: 2px;
    height: 40px;
    background-image: linear-gradient(to bottom, #666 50%, transparent 50%);
    background-size: 2px 6px;
    background-repeat: repeat-y;
    margin-top: 2px;
}

/* Address labels and content */
.address-label[b-gtbrhli94c] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #4285F4;
    display: block;
    margin-bottom: 4px;
}

.address-content[b-gtbrhli94c] {
    display: flex;
    flex-direction: column;
}

/* ===============================
   Action Buttons
   =============================== */
.action-buttons[b-gtbrhli94c] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-bottom: 16px;
    padding: 0 8px;
}

    /* Style Radzen buttons with brand colors */
    .action-buttons[b-gtbrhli94c]  .rz-button.rz-secondary {
        background: white;
        color: var(--brand-blue, var(--brand-blue));
        border: 2px solid var(--brand-blue, var(--brand-blue));
        border-radius: 50px;
        font-weight: 600;
        transition: all 0.2s;
    }

        .action-buttons[b-gtbrhli94c]  .rz-button.rz-secondary:hover {
            background: var(--brand-blue, var(--brand-blue));
            color: white;
        }

    .action-buttons[b-gtbrhli94c]  .rz-button.rz-danger {
        background: white;
        color: #dc3545;
        border: 2px solid #dc3545;
        border-radius: 50px;
        font-weight: 600;
        transition: all 0.2s;
    }

        .action-buttons[b-gtbrhli94c]  .rz-button.rz-danger:hover {
            background: #dc3545;
            color: white;
        }

        .action-buttons[b-gtbrhli94c]  .rz-button.rz-danger:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            background: #f8f9fa;
            color: #6c757d;
            border-color: #6c757d;
        }

.cancel-message[b-gtbrhli94c] {
    margin-bottom: 16px;
}

/* Cutoff Time Notice */
.cutoff-notice[b-gtbrhli94c] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background-color: #e8f4fd;
    border: 1px solid #b3d7f5;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 0.9rem;
    color: var(--brand-blue-dark, #0a2b56);
}

    .cutoff-notice[b-gtbrhli94c]  .rzi {
        font-size: 1.2rem;
        color: var(--brand-blue, var(--brand-blue));
    }

    .cutoff-notice strong[b-gtbrhli94c] {
        color: var(--brand-blue, var(--brand-blue));
    }

    /* Cutoff has passed - warning style */
    .cutoff-notice.cutoff-passed[b-gtbrhli94c] {
        background-color: #fef3e6;
        border-color: #f5c28b;
        color: #8a4504;
    }

        .cutoff-notice.cutoff-passed[b-gtbrhli94c]  .rzi {
            color: #d97706;
        }

/* Flight Delay Banner - Prominent banner for airport pickups past cutoff */
.flight-delay-banner[b-gtbrhli94c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #f59e0b;
    border-radius: 10px;
    margin-bottom: 16px;
}

.flight-delay-content[b-gtbrhli94c] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
}

    .flight-delay-content > i[b-gtbrhli94c] {
        font-size: 1.5rem;
        color: #d97706;
        flex-shrink: 0;
    }

.flight-delay-text[b-gtbrhli94c] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .flight-delay-text strong[b-gtbrhli94c] {
        font-size: 0.95rem;
        color: #92400e;
    }

    .flight-delay-text span[b-gtbrhli94c] {
        font-size: 0.85rem;
        color: #a16207;
    }

.flight-delay-banner[b-gtbrhli94c]  .rz-button.rz-warning {
    background: #f59e0b;
    color: white;
    border: none;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

    .flight-delay-banner[b-gtbrhli94c]  .rz-button.rz-warning:hover {
        background: #d97706;
    }

/* ===============================
   Service Type Box - Styled like ServiceTypeComponent
   =============================== */
.service-type-box[b-gtbrhli94c] {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 12px;
    background-color: #f9f9f9;
    gap: 4px;
    position: relative;
    margin-bottom: 16px;
}

/* 3 Column Layout */
.expanded-content[b-gtbrhli94c] {
    display: grid;
    grid-template-columns: 140px 1fr auto;
    gap: 24px;
    align-items: start;
}

/* Column 1: Image */
.col-image[b-gtbrhli94c] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.service-image[b-gtbrhli94c] {
    width: 100%;
    max-width: 140px;
    height: auto;
    max-height: 120px;
    object-fit: contain;
    border-radius: 16px;
    overflow: hidden;
}

.service-image-placeholder[b-gtbrhli94c] {
    width: 140px;
    height: 100px;
    background-color: #e9ecef;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .service-image-placeholder i[b-gtbrhli94c] {
        font-size: 2.5rem;
        color: #adb5bd;
    }

/* Column 2: Details (Logo + Descriptions) */
.col-details[b-gtbrhli94c] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.logo-container[b-gtbrhli94c] {
    display: flex;
    align-items: center;
}

.logo-image[b-gtbrhli94c] {
    height: 24px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
}

.col-details .service-short-description[b-gtbrhli94c] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--brand-blue, var(--brand-blue));
}

.service-long-desc[b-gtbrhli94c] {
    margin: 0;
    font-size: 0.85rem;
    color: #555;
    line-height: 1.4;
}

/* Charter Duration Display (in service type details) */
.service-charter-duration[b-gtbrhli94c] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 0 0;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--brand-blue-dark, #0a2b56);
    padding: 4px 8px;
    background-color: #e8f4fd;
    border-radius: 4px;
    width: fit-content;
}

    .service-charter-duration i[b-gtbrhli94c] {
        color: var(--brand-blue, var(--brand-blue));
        font-size: 0.85rem;
    }

/* Charter duration icon color */
.icon-charter-duration[b-gtbrhli94c] {
    color: var(--brand-blue, var(--brand-blue));
}

/* Column 3: Price Info */
.col-price[b-gtbrhli94c] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    text-align: right;
    min-width: 150px;
}

.price-line[b-gtbrhli94c] {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.price[b-gtbrhli94c] {
    font-size: 1.25rem;
    font-weight: bold;
    color: #2ecc71;
}

.price-prefix[b-gtbrhli94c] {
    font-size: 0.6rem;
    color: #555;
    white-space: nowrap;
}

.gratuity-details[b-gtbrhli94c] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    color: #555;
    margin: 0;
}

.icon-gratuity[b-gtbrhli94c] {
    color: var(--brand-blue-dark, #0a2b56);
}

.view-details-link[b-gtbrhli94c] {
    font-size: 0.75rem;
    color: var(--brand-blue, var(--brand-blue));
    text-decoration: underline;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
}

    .view-details-link:hover[b-gtbrhli94c] {
        color: var(--brand-blue-dark, #0a2b56);
    }

/* Private Fare Badge - for hidden corporate rates */
.private-fare-badge[b-gtbrhli94c] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px solid #dee2e6;
    border-radius: 8px;
    color: #495057;
    font-size: 0.9rem;
    font-weight: 500;
}

    .private-fare-badge i[b-gtbrhli94c] {
        color: #6c757d;
        font-size: 0.85rem;
    }

/* Details Row (Passengers, Luggage, Cancel) */
.details-row[b-gtbrhli94c] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    padding: 8px 0 4px 0;
    border-top: 1px solid #e0e0e0;
    margin-top: 8px;
}

.service-detail[b-gtbrhli94c] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: #555;
}

    .service-detail i[b-gtbrhli94c] {
        color: var(--brand-blue, var(--brand-blue));
        font-size: 0.9rem;
    }

/* Edit Passengers/Bags button in details row */
.edit-pax-bags-btn[b-gtbrhli94c] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: 1px solid #d0d0d0;
    border-radius: 50%;
    cursor: pointer;
    color: #6c757d;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

    .edit-pax-bags-btn:hover[b-gtbrhli94c] {
        background: rgba(41, 99, 168, 0.1);
        color: var(--brand-blue, var(--brand-blue));
        border-color: var(--brand-blue, var(--brand-blue));
    }

    .edit-pax-bags-btn:active[b-gtbrhli94c] {
        background: rgba(41, 99, 168, 0.2);
    }

    .edit-pax-bags-btn[b-gtbrhli94c]  .rzi {
        font-size: 0.9rem;
    }

/* Mobile Price Section - hidden by default on desktop */
.mobile-price-section[b-gtbrhli94c] {
    display: none;
}

/* ===============================
   Flight Info Card (simplified - no section header)
   =============================== */
.flight-info-card[b-gtbrhli94c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 16px;
    background: white;
}

.flight-info-content[b-gtbrhli94c] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.flight-info-card .detail-icon[b-gtbrhli94c] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f7ff;
    border-radius: 8px;
    flex-shrink: 0;
}

    .flight-info-card .detail-icon i[b-gtbrhli94c] {
        color: var(--brand-blue, var(--brand-blue));
        font-size: 1rem;
    }

.flight-info-card .detail-content[b-gtbrhli94c] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.flight-info-card .detail-label[b-gtbrhli94c] {
    font-size: 0.75rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.flight-info-card .detail-value[b-gtbrhli94c] {
    font-size: 0.95rem;
    color: #333;
    word-break: break-word;
}

/* Flight Info Fields - Airline and Flight Number on same row */
.flight-info-fields[b-gtbrhli94c] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    justify-content: flex-end;
}

.flight-field[b-gtbrhli94c] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.flight-field-separator[b-gtbrhli94c] {
    color: #ccc;
    font-size: 0.8rem;
}

/* Airline Display */
.airline-display[b-gtbrhli94c] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.airline-logo-small[b-gtbrhli94c] {
    height: 20px;
    width: auto;
    max-width: 40px;
    object-fit: contain;
}

.airline-text[b-gtbrhli94c] {
    font-size: 0.9rem;
    color: #333;
    font-weight: 500;
}

/* Flight Number Display */
.flightnum-text[b-gtbrhli94c] {
    font-size: 0.9rem;
    color: #333;
    font-weight: 500;
}

/* Airline Logo in Detail Icon */
.airline-logo-icon[b-gtbrhli94c] {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* Flight grid - ensure 2 columns */
.flight-grid[b-gtbrhli94c] {
    grid-template-columns: repeat(2, 1fr);
}

/* ===============================
   Detail Sections (Passenger & Payment)
   =============================== */
.detail-section[b-gtbrhli94c] {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 16px;
    background: white;
    overflow: hidden;
}

.section-header[b-gtbrhli94c] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 600;
    color: var(--brand-blue-dark, #0a2b56);
}

    .section-header i[b-gtbrhli94c] {
        color: var(--brand-blue, var(--brand-blue));
    }

    .section-header .section-edit-btn[b-gtbrhli94c] {
        margin-left: auto;
    }

.section-body[b-gtbrhli94c] {
    padding: 16px;
}

.special-instructions-text[b-gtbrhli94c] {
    margin: 0;
    font-size: 0.95rem;
    color: #333;
    line-height: 1.5;
}

    .special-instructions-text.truncated[b-gtbrhli94c] {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .special-instructions-text.empty-text[b-gtbrhli94c] {
        color: #999;
        font-style: italic;
    }

.special-info-container[b-gtbrhli94c] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.view-more-btn[b-gtbrhli94c] {
    background: none;
    border: none;
    padding: 0;
    color: var(--brand-blue, #2963A8);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: underline;
    align-self: flex-start;
}

    .view-more-btn:hover[b-gtbrhli94c] {
        color: var(--brand-blue-dark, #0a2b56);
    }

/* Enhanced detail grid */
.detail-grid-enhanced[b-gtbrhli94c] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.detail-item-enhanced[b-gtbrhli94c] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
}

    .detail-item-enhanced.full-width[b-gtbrhli94c] {
        grid-column: 1 / -1;
    }

.detail-icon[b-gtbrhli94c] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 8px;
    flex-shrink: 0;
}

    .detail-icon i[b-gtbrhli94c] {
        color: var(--brand-blue, var(--brand-blue));
        font-size: 1rem;
    }

.detail-content[b-gtbrhli94c] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.detail-label[b-gtbrhli94c] {
    font-size: 0.75rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.detail-value[b-gtbrhli94c] {
    font-size: 0.95rem;
    color: #333;
    word-break: break-word;
}

/* ===============================
   SMS Toggle (inline in grid)
   =============================== */
.sms-toggle-row[b-gtbrhli94c] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sms-checkbox-inline[b-gtbrhli94c] {
    width: 18px;
    height: 18px;
    accent-color: var(--brand-blue, var(--brand-blue));
    cursor: pointer;
    flex-shrink: 0;
}

    .sms-checkbox-inline:disabled[b-gtbrhli94c] {
        cursor: not-allowed;
        opacity: 0.6;
    }

.sms-toggle-label[b-gtbrhli94c] {
    font-size: 0.95rem;
    color: #333;
    cursor: pointer;
}

.sms-saving-indicator[b-gtbrhli94c] {
    font-size: 0.8rem;
    font-weight: normal;
    color: var(--brand-blue, var(--brand-blue));
    margin-left: 6px;
    font-style: italic;
}

/* ===============================
   Total Cost Card
   =============================== */
.total-cost-card[b-gtbrhli94c] {
    background: linear-gradient(135deg, var(--brand-blue-dark, #0a2b56) 0%, var(--brand-blue, var(--brand-blue)) 100%);
    color: white;
    border-radius: 12px;
    margin-bottom: 16px;
}

.total-cost-content[b-gtbrhli94c] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.total-label[b-gtbrhli94c] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.total-title[b-gtbrhli94c] {
    font-size: 1rem;
    font-weight: 500;
    opacity: 0.9;
}

.total-amount[b-gtbrhli94c] {
    font-size: 1.75rem;
    font-weight: 700;
}

/* ===============================
   Price Details Modal
   =============================== */
.price-modal-backdrop[b-gtbrhli94c] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

.price-modal-content[b-gtbrhli94c] {
    background: white;
    border-radius: 16px;
    max-width: 400px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.price-modal-header[b-gtbrhli94c] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
}

    .price-modal-header h3[b-gtbrhli94c] {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--brand-blue-dark, #0a2b56);
    }

.price-modal-close[b-gtbrhli94c] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

    .price-modal-close:hover[b-gtbrhli94c] {
        color: #374151;
    }

.price-modal-body[b-gtbrhli94c] {
    padding: 20px;
}

.price-modal-service-name[b-gtbrhli94c] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--brand-blue, var(--brand-blue));
    margin-bottom: 16px;
    text-align: center;
}

.price-line-items[b-gtbrhli94c] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.price-line-item[b-gtbrhli94c] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.95rem;
}

.price-line-label[b-gtbrhli94c] {
    color: #4b5563;
}

.price-line-value[b-gtbrhli94c] {
    font-weight: 500;
    color: #1f2937;
}

.price-line-divider[b-gtbrhli94c] {
    height: 1px;
    background-color: #e5e7eb;
    margin: 8px 0;
}

.discount-line .price-line-label[b-gtbrhli94c] {
    color: #059669;
}

.discount-value[b-gtbrhli94c] {
    color: #059669 !important;
    font-weight: 600 !important;
}

.gratuity-value[b-gtbrhli94c] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.gratuity-included-badge[b-gtbrhli94c] {
    font-size: 0.7rem;
    background-color: #d1fae5;
    color: #059669;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
}

.gratuity-not-included[b-gtbrhli94c] {
    color: #9ca3af;
    font-style: italic;
    font-weight: normal;
}

.price-line-item.total-line[b-gtbrhli94c] {
    font-size: 1.1rem;
    font-weight: 600;
}

    .price-line-item.total-line .price-line-label[b-gtbrhli94c] {
        color: #1f2937;
    }

.total-value[b-gtbrhli94c] {
    color: #2ecc71 !important;
    font-size: 1.2rem !important;
}

.price-modal-footer[b-gtbrhli94c] {
    padding: 16px 20px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: center;
}

/* ===============================
   Todo Modal (stub)
   =============================== */
.todo-modal-backdrop[b-gtbrhli94c] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

.todo-modal-content[b-gtbrhli94c] {
    background: white;
    border-radius: 16px;
    max-width: 400px;
    width: 100%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.todo-modal-header[b-gtbrhli94c] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
}

    .todo-modal-header h3[b-gtbrhli94c] {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--brand-blue-dark, #0a2b56);
    }

.todo-modal-close[b-gtbrhli94c] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

    .todo-modal-close:hover[b-gtbrhli94c] {
        color: #374151;
    }

.todo-modal-body[b-gtbrhli94c] {
    padding: 20px;
    text-align: center;
}

    .todo-modal-body i[b-gtbrhli94c] {
        font-size: 2rem;
        color: var(--brand-gold, var(--brand-gold));
        margin-bottom: 12px;
    }

    .todo-modal-body p[b-gtbrhli94c] {
        margin: 8px 0;
        color: #666;
    }

.todo-modal-footer[b-gtbrhli94c] {
    padding: 16px 20px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: center;
}

/* ===============================
   Mobile Responsive
   =============================== */
@media (max-width: 768px) {
    .action-buttons[b-gtbrhli94c] {
        flex-direction: column;
    }

        .action-buttons[b-gtbrhli94c]  .rz-button {
            width: 100%;
        }

    .cutoff-notice[b-gtbrhli94c] {
        font-size: 0.85rem;
        padding: 8px 12px;
    }

    /* Flight Delay Banner Mobile */
    .flight-delay-banner[b-gtbrhli94c] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 12px 14px;
    }

    .flight-delay-content[b-gtbrhli94c] {
        gap: 10px;
    }

        .flight-delay-content > i[b-gtbrhli94c] {
            font-size: 1.25rem;
        }

    .flight-delay-text strong[b-gtbrhli94c] {
        font-size: 0.9rem;
    }

    .flight-delay-text span[b-gtbrhli94c] {
        font-size: 0.8rem;
    }

    .flight-delay-banner[b-gtbrhli94c]  .rz-button.rz-warning {
        width: 100%;
    }

    .detail-grid-enhanced[b-gtbrhli94c] {
        grid-template-columns: 1fr;
    }

    /* Service Type Box Mobile */
    .expanded-content[b-gtbrhli94c] {
        grid-template-columns: 100px 1fr;
        gap: 12px;
    }

    /* Hide price column on mobile - show in mobile-price-section instead */
    .col-price[b-gtbrhli94c] {
        display: none;
    }

    .service-image[b-gtbrhli94c] {
        max-width: 100px;
        max-height: 80px;
    }

    .service-image-placeholder[b-gtbrhli94c] {
        width: 100px;
        height: 80px;
    }

    .logo-image[b-gtbrhli94c] {
        height: 20px;
    }

    .col-details .service-short-description[b-gtbrhli94c] {
        font-size: 0.9rem;
    }

    .service-long-desc[b-gtbrhli94c] {
        font-size: 0.8rem;
    }

    /* Show mobile price section */
    .mobile-price-section[b-gtbrhli94c] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: 8px 0;
        border-top: 1px solid #e0e0e0;
        text-align: center;
    }

        .mobile-price-section .price-line[b-gtbrhli94c] {
            justify-content: center;
        }

        .mobile-price-section .price[b-gtbrhli94c] {
            font-size: 1.2rem;
        }

        .mobile-price-section .gratuity-details[b-gtbrhli94c] {
            justify-content: center;
        }

    .details-row[b-gtbrhli94c] {
        gap: 10px;
        padding: 6px 0 2px 0;
        border-top: none;
    }

    .service-detail[b-gtbrhli94c] {
        font-size: 0.8rem;
    }

    .total-cost-content[b-gtbrhli94c] {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }

    .total-label[b-gtbrhli94c] {
        align-items: center;
    }

    .section-header[b-gtbrhli94c] {
        padding: 10px 12px;
    }

    .section-body[b-gtbrhli94c] {
        padding: 12px;
    }

    .detail-item-enhanced[b-gtbrhli94c] {
        padding: 10px;
    }

    .canceled-banner[b-gtbrhli94c] {
        font-size: 0.9rem;
        padding: 10px 12px;
    }

    /* Flight Info Card Mobile */
    .flight-info-card[b-gtbrhli94c] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

        .flight-info-card .edit-icon-btn[b-gtbrhli94c] {
            align-self: flex-end;
        }

    /* Flight Info Fields Mobile - Stack vertically */
    .flight-info-fields[b-gtbrhli94c] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .flight-field[b-gtbrhli94c] {
        justify-content: space-between;
        padding: 8px 12px;
        background: #f8f9fa;
        border-radius: 6px;
    }

    .flight-field-separator[b-gtbrhli94c] {
        display: none;
    }
}

@media (max-width: 480px) {
    .reservation-header[b-gtbrhli94c] {
        padding: 12px 16px;
    }

        .reservation-header h2[b-gtbrhli94c] {
            font-size: 1.1rem;
        }

    .price-modal-content[b-gtbrhli94c],
    .todo-modal-content[b-gtbrhli94c] {
        margin: 10px;
        max-width: calc(100% - 20px);
    }

    .service-type-box[b-gtbrhli94c] {
        padding: 8px;
        gap: 6px;
    }

    .expanded-content[b-gtbrhli94c] {
        grid-template-columns: 80px 1fr;
        gap: 8px;
    }

    .service-image[b-gtbrhli94c] {
        max-width: 80px;
        max-height: 70px;
    }

    .service-image-placeholder[b-gtbrhli94c] {
        width: 80px;
        height: 70px;
    }

    .col-details .service-short-description[b-gtbrhli94c] {
        font-size: 0.85rem;
    }

    .service-long-desc[b-gtbrhli94c] {
        font-size: 0.75rem;
        line-height: 1.3;
    }

    .mobile-price-section[b-gtbrhli94c] {
        padding: 6px 0;
        gap: 1px;
    }

        .mobile-price-section .price[b-gtbrhli94c] {
            font-size: 1.1rem;
        }

        .mobile-price-section .gratuity-details[b-gtbrhli94c] {
            font-size: 0.7rem;
        }

        .mobile-price-section .view-details-link[b-gtbrhli94c] {
            font-size: 0.7rem;
        }

    .details-row[b-gtbrhli94c] {
        gap: 8px;
        padding: 4px 0 2px 0;
    }

    .service-detail[b-gtbrhli94c] {
        font-size: 0.75rem;
    }

    .detail-line[b-gtbrhli94c] {
        font-size: 0.9rem;
        gap: 6px;
    }

    .canceled-banner[b-gtbrhli94c] {
        font-size: 0.85rem;
        padding: 8px 12px;
        gap: 8px;
    }

    /* Flight Info Card Small Mobile */
    .flight-info-card[b-gtbrhli94c] {
        padding: 10px 12px;
    }

        .flight-info-card .detail-value[b-gtbrhli94c] {
            font-size: 0.9rem;
        }
}
/* /Components/BookingComponent.razor.rz.scp.css */
/* ===============================
   Service Type Box - Main Container
   =============================== */
.service-type-box[b-rsyuilsy6j] {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 12px;
    background-color: #f9f9f9;
    gap: 4px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    margin-bottom: 16px; /* Spacing between tiles */
}

    .service-type-box:hover[b-rsyuilsy6j] {
        background-color: #e6f0ff;
        border-color: var(--brand-blue, var(--brand-blue));
    }

    .service-type-box:focus[b-rsyuilsy6j] {
        outline: 2px solid var(--brand-blue, var(--brand-blue));
        outline-offset: 2px;
    }

    .service-type-box:last-child[b-rsyuilsy6j] {
        margin-bottom: 0;
    }

.no-border[b-rsyuilsy6j] {
    border: none !important;
    background-color: transparent;
    padding: 0;
}

/* ===============================
   MINIMIZED STATE
   =============================== */
.service-type-box.min[b-rsyuilsy6j] {
    padding: 8px 6px;
    gap: 0;
}

.minimized-row[b-rsyuilsy6j] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.min-image-container[b-rsyuilsy6j] {
    flex: 0 0 auto;
}

.vehicle-thumb[b-rsyuilsy6j] {
    height: 48px;
    width: auto;
    max-width: 80px;
    object-fit: contain;
    border-radius: 12px;
}

.min-description[b-rsyuilsy6j] {
    flex: 1;
    min-width: 0;
}

    .min-description .service-short-description[b-rsyuilsy6j] {
        margin: 0;
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--brand-blue, var(--brand-blue));
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.min-price[b-rsyuilsy6j] {
    flex: 0 0 auto;
}

    .min-price .price[b-rsyuilsy6j] {
        font-size: 1rem;
        font-weight: bold;
        color: #2ecc71;
    }

/* ===============================
   EXPANDED STATE - 3 Column Layout
   =============================== */
.expanded-content[b-rsyuilsy6j] {
    display: grid;
    grid-template-columns: 140px 1fr auto;
    gap: 24px; /* Increased gap for more spacing */
    align-items: start;
}

/* Column 1: Image */
.col-image[b-rsyuilsy6j] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.service-image[b-rsyuilsy6j] {
    width: 100%;
    max-width: 140px;
    height: auto;
    max-height: 120px;
    object-fit: contain;
    border-radius: 16px;
    overflow: hidden;
}

/* Column 2: Details (Logo + Descriptions) */
.col-details[b-rsyuilsy6j] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0; /* Allow text to wrap */
}

.logo-container[b-rsyuilsy6j] {
    display: flex;
    align-items: center;
}

.logo-image[b-rsyuilsy6j] {
    height: 24px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
}

.col-details .service-short-description[b-rsyuilsy6j] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--brand-blue, var(--brand-blue));
}

/* Charter duration display */
.charter-duration[b-rsyuilsy6j] {
    font-weight: 500;
    color: var(--brand-blue-dark, #1a365d);
    white-space: nowrap;
}

.service-long-desc[b-rsyuilsy6j] {
    margin: 0;
    font-size: 0.85rem;
    color: #555;
    line-height: 1.4;
}

/* Column 3: Price Info */
.col-price[b-rsyuilsy6j] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    text-align: right;
    min-width: 150px;
}

/* Price line: price + "Total One-Way" on same line */
.price-line[b-rsyuilsy6j] {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.price-before-discount[b-rsyuilsy6j] {
    text-decoration: line-through;
    color: #888;
    font-size: 0.85rem;
}

.price[b-rsyuilsy6j] {
    font-size: 1.25rem;
    font-weight: bold;
    color: #2ecc71;
}

.price-prefix[b-rsyuilsy6j] {
    font-size: 0.6rem;
    color: #555;
    white-space: nowrap;
}

.hourly-pricing[b-rsyuilsy6j] {
    font-size: 0.75rem;
    color: var(--brand-blue-dark, #1a365d);
    font-weight: 500;
}

.discount-label[b-rsyuilsy6j] {
    font-size: 0.7rem;
    color: #27ae60;
    font-weight: 600;
}

.gratuity-details[b-rsyuilsy6j] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    color: #555;
    margin: 0;
}

.icon-gratuity[b-rsyuilsy6j] {
    color: var(--brand-blue-dark, #0a2b56);
}

.view-details-link[b-rsyuilsy6j] {
    font-size: 0.75rem;
    color: var(--brand-blue, var(--brand-blue));
    text-decoration: underline;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
}

    .view-details-link:hover[b-rsyuilsy6j] {
        color: var(--brand-blue-dark, #1a365d);
    }

.change-button-inline[b-rsyuilsy6j] {
    margin-top: 4px;
    padding: 4px 12px;
    font-size: 0.75rem;
    background: white;
    color: var(--brand-blue-dark, #0a2b56);
    border: 2px solid var(--brand-blue, var(--brand-blue));
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s;
}

    .change-button-inline:hover[b-rsyuilsy6j] {
        background: var(--brand-gold, var(--brand-gold));
        border-color: var(--brand-gold, var(--brand-gold));
    }

/* Minimize toggle in expanded view */
.col-price .min-toggle[b-rsyuilsy6j] {
    margin-top: 4px;
}

/* ===============================
   MOBILE PRICE SECTION (Hidden on Desktop)
   =============================== */
.mobile-price-section[b-rsyuilsy6j] {
    display: none;
}

/* ===============================
   DETAILS ROW (Passengers, Luggage, Cancel)
   =============================== */
.details-row[b-rsyuilsy6j] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    padding: 6px 0;
    border-top: 1px solid #e0e0e0;
    margin-top: 0;
}

.service-detail[b-rsyuilsy6j] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.85rem;
    color: #555;
}

    .service-detail .icon[b-rsyuilsy6j] {
        font-size: 0.9rem;
        color: var(--brand-blue-dark, #0a2b56);
    }

/* ===============================
   SELECT BUTTON ROW
   =============================== */
.select-button-row[b-rsyuilsy6j] {
    padding: 0;
}

/* White/outline button style */
.select-button-cta[b-rsyuilsy6j] {
    width: 100%;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 600;
    background: white;
    color: var(--brand-blue, var(--brand-blue));
    border: 2px solid var(--brand-blue, var(--brand-blue));
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

    .select-button-cta:hover[b-rsyuilsy6j] {
        background: var(--brand-blue, var(--brand-blue));
        color: white;
    }

    .select-button-cta:focus[b-rsyuilsy6j] {
        outline: 2px solid var(--brand-gold, var(--brand-gold));
        outline-offset: 2px;
    }

/* Button text: desktop vs mobile */
.btn-text-desktop[b-rsyuilsy6j] {
    display: inline;
}

.btn-text-mobile[b-rsyuilsy6j] {
    display: none;
}

/* ===============================
   MINIMIZE TOGGLE BUTTON
   =============================== */
.min-toggle[b-rsyuilsy6j] {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    line-height: 1;
    color: #666;
}

    .min-toggle:hover[b-rsyuilsy6j] {
        background: rgba(0, 0, 0, 0.05);
    }

    .min-toggle .chev[b-rsyuilsy6j] {
        display: inline-block;
        transition: transform 150ms ease;
        font-size: 1rem;
    }

        .min-toggle .chev[data-state="up"][b-rsyuilsy6j] {
            transform: rotate(180deg);
        }

        .min-toggle .chev[data-state="down"][b-rsyuilsy6j] {
            transform: rotate(0deg);
        }

/* ===============================
   MOBILE RESPONSIVE
   =============================== */
@media (max-width: 768px) {
    .service-type-box[b-rsyuilsy6j] {
        margin-bottom: 12px;
    }

    .expanded-content[b-rsyuilsy6j] {
        grid-template-columns: 100px 1fr;
        gap: 12px;
    }

    /* Hide price column on mobile - show in mobile-price-section instead */
    .col-price[b-rsyuilsy6j] {
        display: none;
    }

    .service-image[b-rsyuilsy6j] {
        max-width: 100px;
        max-height: 80px;
    }

    .logo-image[b-rsyuilsy6j] {
        height: 20px;
    }

    .col-details .service-short-description[b-rsyuilsy6j] {
        font-size: 0.9rem;
    }

    .service-long-desc[b-rsyuilsy6j] {
        font-size: 0.8rem;
    }

    /* Show mobile price section */
    .mobile-price-section[b-rsyuilsy6j] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 12px 0;
        border-top: 1px solid #e0e0e0;
        text-align: center;
    }

        .mobile-price-section .price-line[b-rsyuilsy6j] {
            justify-content: center;
        }

        .mobile-price-section .price[b-rsyuilsy6j] {
            font-size: 1.3rem;
        }

        .mobile-price-section .gratuity-details[b-rsyuilsy6j] {
            justify-content: center;
        }

    .details-row[b-rsyuilsy6j] {
        gap: 12px;
        padding: 6px 0;
        border-top: none; /* Remove double border on mobile */
    }

    .service-detail[b-rsyuilsy6j] {
        font-size: 0.8rem;
    }

    /* Button text swap on mobile */
    .btn-text-desktop[b-rsyuilsy6j] {
        display: none;
    }

    .btn-text-mobile[b-rsyuilsy6j] {
        display: inline;
    }

    .select-button-cta[b-rsyuilsy6j] {
        padding: 10px 20px;
        font-size: 0.95rem;
    }

    /* Minimized row adjustments */
    .minimized-row[b-rsyuilsy6j] {
        gap: 8px;
    }

    .vehicle-thumb[b-rsyuilsy6j] {
        height: 40px;
        max-width: 60px;
    }

    .min-description .service-short-description[b-rsyuilsy6j] {
        font-size: 0.85rem;
    }

    .min-price .price[b-rsyuilsy6j] {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .service-type-box[b-rsyuilsy6j] {
        padding: 10px;
        gap: 10px;
        margin-bottom: 10px;
    }

    .expanded-content[b-rsyuilsy6j] {
        grid-template-columns: 80px 1fr;
        gap: 10px;
    }

    .service-image[b-rsyuilsy6j] {
        max-width: 80px;
        max-height: 70px;
    }

    .col-details .service-short-description[b-rsyuilsy6j] {
        font-size: 0.85rem;
    }

    .service-long-desc[b-rsyuilsy6j] {
        font-size: 0.75rem;
    }

    .mobile-price-section .price[b-rsyuilsy6j] {
        font-size: 1.15rem;
    }

    .details-row[b-rsyuilsy6j] {
        gap: 10px;
        padding: 5px 0;
    }

    .service-detail[b-rsyuilsy6j] {
        font-size: 0.75rem;
    }

    .select-button-cta[b-rsyuilsy6j] {
        padding: 10px 16px;
        font-size: 0.9rem;
    }
}

/* ===============================
   PRICE DETAILS MODAL
   =============================== */
.price-modal-backdrop[b-rsyuilsy6j] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

.price-modal-content[b-rsyuilsy6j] {
    background: white;
    border-radius: 16px;
    max-width: 400px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.price-modal-header[b-rsyuilsy6j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
}

    .price-modal-header h3[b-rsyuilsy6j] {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--brand-blue-dark, #1a365d);
    }

.price-modal-close[b-rsyuilsy6j] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

    .price-modal-close:hover[b-rsyuilsy6j] {
        color: #374151;
    }

.price-modal-body[b-rsyuilsy6j] {
    padding: 20px;
}

.price-modal-service-name[b-rsyuilsy6j] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--brand-blue, #2563eb);
    margin-bottom: 16px;
    text-align: center;
}

.price-line-items[b-rsyuilsy6j] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.price-line-item[b-rsyuilsy6j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.95rem;
}

.price-line-label[b-rsyuilsy6j] {
    color: #4b5563;
}

.price-line-value[b-rsyuilsy6j] {
    font-weight: 500;
    color: #1f2937;
}

.price-line-divider[b-rsyuilsy6j] {
    height: 1px;
    background-color: #e5e7eb;
    margin: 8px 0;
}

.discount-line .price-line-label[b-rsyuilsy6j] {
    color: #059669;
}

.discount-value[b-rsyuilsy6j] {
    color: #059669 !important;
    font-weight: 600 !important;
}

.gratuity-value[b-rsyuilsy6j] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.gratuity-included-badge[b-rsyuilsy6j] {
    font-size: 0.7rem;
    background-color: #d1fae5;
    color: #059669;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
}

.gratuity-not-included[b-rsyuilsy6j] {
    color: #9ca3af;
    font-style: italic;
    font-weight: normal;
}

.total-line[b-rsyuilsy6j] {
    font-size: 1.1rem;
    font-weight: 600;
}

    .total-line .price-line-label[b-rsyuilsy6j] {
        color: #1f2937;
    }

.total-value[b-rsyuilsy6j] {
    color: #2ecc71 !important;
    font-size: 1.2rem !important;
}

.price-modal-hourly-info[b-rsyuilsy6j] {
    margin-top: 16px;
    padding: 12px;
    background-color: #f0f9ff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--brand-blue-dark, #1a365d);
}

    .price-modal-hourly-info .hourly-icon[b-rsyuilsy6j] {
        font-size: 1rem;
    }

.price-modal-footer[b-rsyuilsy6j] {
    padding: 16px 20px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: center;
}

/* Mobile modal adjustments */
@media (max-width: 480px) {
    .price-modal-content[b-rsyuilsy6j] {
        margin: 10px;
        max-width: calc(100% - 20px);
    }

    .price-modal-header[b-rsyuilsy6j] {
        padding: 12px 16px;
    }

    .price-modal-body[b-rsyuilsy6j] {
        padding: 16px;
    }

    .price-line-item[b-rsyuilsy6j] {
        font-size: 0.9rem;
    }

    .total-value[b-rsyuilsy6j] {
        font-size: 1.1rem !important;
    }
}
/* /Components/BookingConfirmationDialog.razor.rz.scp.css */
/* =============================================================================
 * BOOKING CONFIRMATION MODAL
 * ============================================================================= */

.confirmation-overlay[b-b3ifxzavcd] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3000;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.confirmation-modal[b-b3ifxzavcd] {
    background: white;
    border-radius: 16px;
    max-width: 480px;
    width: 100%;
    max-height: 90vh;
    max-height: 90dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: confirmationSlideIn-b-b3ifxzavcd 0.4s ease-out;
}

@keyframes confirmationSlideIn-b-b3ifxzavcd {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.confirmation-header[b-b3ifxzavcd] {
    flex-shrink: 0;
    background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
    color: white;
    padding: 16px 20px;
    text-align: center;
}

.confirmation-checkmark[b-b3ifxzavcd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: white;
    color: #4caf50;
    border-radius: 50%;
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 8px;
    animation: checkmarkBounce-b-b3ifxzavcd 0.6s ease-out 0.2s;
}

@keyframes checkmarkBounce-b-b3ifxzavcd {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

.confirmation-header h2[b-b3ifxzavcd] {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
}

.confirmation-body[b-b3ifxzavcd] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 16px;
    -webkit-overflow-scrolling: touch;
}

.confirmation-message[b-b3ifxzavcd] {
    text-align: center;
    color: #555;
    margin-bottom: 10px;
    line-height: 1.4;
    font-size: 0.9rem;
}

.email-hint[b-b3ifxzavcd] {
    display: block;
    font-size: 0.75rem;
    color: #888;
    margin-top: 4px;
    font-style: italic;
}

/* SCROLLABLE TRIPS CONTAINER - Key fix for mobile */
.confirmation-details[b-b3ifxzavcd] {
    margin: 10px 0;
    max-height: 35vh;
    max-height: 35dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 4px;
}

    /* Subtle scrollbar for trips */
    .confirmation-details[b-b3ifxzavcd]::-webkit-scrollbar {
        width: 5px;
    }

    .confirmation-details[b-b3ifxzavcd]::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
    }

    .confirmation-details[b-b3ifxzavcd]::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 3px;
    }

.confirmation-card[b-b3ifxzavcd] {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
}

    .confirmation-card:last-child[b-b3ifxzavcd] {
        margin-bottom: 0;
    }

.confirmation-number-row[b-b3ifxzavcd],
.confirmation-pickup-row[b-b3ifxzavcd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    flex-wrap: wrap;
    gap: 4px;
}

    .confirmation-number-row:last-child[b-b3ifxzavcd],
    .confirmation-pickup-row:last-child[b-b3ifxzavcd] {
        margin-bottom: 0;
    }

.conf-label[b-b3ifxzavcd] {
    color: #666;
    font-size: 0.85rem;
}

.conf-number[b-b3ifxzavcd] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1rem;
    font-weight: 700;
    color: #1565c0;
    background: #e3f2fd;
    padding: 4px 8px;
    border-radius: 4px;
}

.conf-datetime[b-b3ifxzavcd] {
    font-weight: 600;
    color: #333;
    text-align: right;
    font-size: 0.9rem;
}

.conf-trip-type[b-b3ifxzavcd] {
    font-size: 0.75rem;
    color: #888;
    text-align: center;
    padding-top: 6px;
    border-top: 1px dashed #ddd;
    margin-top: 6px;
}

.confirmation-note[b-b3ifxzavcd] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    background: #e3f2fd;
    padding: 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    color: #1565c0;
    margin-top: 10px;
}

    .confirmation-note i[b-b3ifxzavcd] {
        flex-shrink: 0;
        margin-top: 1px;
    }

.confirmation-footer[b-b3ifxzavcd] {
    flex-shrink: 0;
    padding: 12px 16px;
    text-align: center;
    border-top: 1px solid #eee;
    background: #fafafa;
}

.confirmation-ok-btn[b-b3ifxzavcd] {
    min-width: 120px;
    padding: 10px 28px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 50px;
    background: var(--brand-blue, #4285F4) !important;
    border: none !important;
}

    .confirmation-ok-btn:hover[b-b3ifxzavcd] {
        background: #3367D6 !important;
    }

/* Redirecting state */
.redirecting-message[b-b3ifxzavcd] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #555;
    font-size: 0.95rem;
    padding: 12px 0;
}

.spinner[b-b3ifxzavcd] {
    width: 20px;
    height: 20px;
    border: 2px solid #e0e0e0;
    border-top-color: var(--brand-blue, #4285F4);
    border-radius: 50%;
    animation: spin-b-b3ifxzavcd 0.8s linear infinite;
}

@keyframes spin-b-b3ifxzavcd {
    to {
        transform: rotate(360deg);
    }
}

/* Mobile-specific adjustments for confirmation modal */
@media (max-width: 576px) {
    .confirmation-overlay[b-b3ifxzavcd] {
        padding: 12px;
    }

    .confirmation-modal[b-b3ifxzavcd] {
        width: 100%;
        max-height: 85vh;
        max-height: 85dvh;
    }

    .confirmation-header[b-b3ifxzavcd] {
        padding: 20px 16px;
    }

    .confirmation-checkmark[b-b3ifxzavcd] {
        width: 50px;
        height: 50px;
        font-size: 1.6rem;
    }

    .confirmation-header h2[b-b3ifxzavcd] {
        font-size: 1.25rem;
    }

    .confirmation-body[b-b3ifxzavcd] {
        padding: 16px;
    }

    .confirmation-message[b-b3ifxzavcd] {
        font-size: 0.9rem;
        margin-bottom: 12px;
    }

    .confirmation-details[b-b3ifxzavcd] {
        max-height: 30vh;
        max-height: 30dvh;
    }

    .confirmation-card[b-b3ifxzavcd] {
        padding: 12px;
    }

    .conf-number[b-b3ifxzavcd] {
        font-size: 0.9rem;
    }

    .conf-datetime[b-b3ifxzavcd] {
        font-size: 0.85rem;
    }

    .confirmation-footer[b-b3ifxzavcd] {
        padding: 12px 16px;
    }

    .confirmation-ok-btn[b-b3ifxzavcd] {
        min-width: 120px;
        padding: 12px 24px;
    }
}
/* /Components/BookingErrorDialog.razor.rz.scp.css */
.booking-error-dialog[b-nt5drrq8o4] {
    padding: 0 8px;
    text-align: center;
}

.error-icon[b-nt5drrq8o4] {
    margin-bottom: 16px;
}

    .error-icon i[b-nt5drrq8o4] {
        font-size: 3rem;
        color: #dc3545;
    }

.error-message[b-nt5drrq8o4] {
    color: #333;
    font-size: 0.95rem;
    margin-bottom: 16px;
    line-height: 1.5;
}

.reference-id[b-nt5drrq8o4] {
    color: #666;
    font-size: 0.8rem;
    margin: 0;
    padding: 8px 12px;
    background: #f5f5f5;
    border-radius: 4px;
    font-family: monospace;
    word-break: break-all;
}

.dialog-buttons[b-nt5drrq8o4] {
    display: flex;
    justify-content: center;
    padding: 16px 8px 8px;
    border-top: 1px solid #eee;
    margin-top: 16px;
}

    .dialog-buttons .btn[b-nt5drrq8o4] {
        min-width: 100px;
        border-radius: 20px;
    }
/* /Components/CancelReservationDialog.razor.rz.scp.css */
.cancel-dialog[b-twu1bqlrwq] {
    padding: 24px;
    min-width: 340px;
    max-width: 420px;
}

/* Loading & Error States */
.loading-section[b-twu1bqlrwq],
.error-section[b-twu1bqlrwq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 32px 16px;
    text-align: center;
}

    .error-section .material-icons[b-twu1bqlrwq] {
        font-size: 48px;
        color: #dc3545;
    }

/* Confirm Section */
.confirm-section[b-twu1bqlrwq] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.confirm-header[b-twu1bqlrwq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.warning-icon[b-twu1bqlrwq] {
    font-size: 48px;
    color: #f59e0b;
}

.confirm-message[b-twu1bqlrwq] {
    font-size: 1.1rem;
    color: #374151;
    margin: 0;
}

    .confirm-message strong[b-twu1bqlrwq] {
        color: var(--brand-blue, #1a73e8);
    }

/* Reservation Card */
.reservation-card[b-twu1bqlrwq] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
}

.date-row[b-twu1bqlrwq] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 16px;
}

    .date-row .material-icons[b-twu1bqlrwq] {
        font-size: 20px;
        color: var(--brand-blue, #1a73e8);
    }

.date-text[b-twu1bqlrwq] {
    font-weight: 600;
    color: #1f2937;
}

.time-text[b-twu1bqlrwq] {
    margin-left: auto;
    font-weight: 500;
    color: #6b7280;
    background: white;
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 0.875rem;
}

/* Route Timeline */
.route-section[b-twu1bqlrwq] {
    display: flex;
    gap: 16px;
}

.route-timeline[b-twu1bqlrwq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 0;
}

.timeline-dot[b-twu1bqlrwq] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid;
    background: white;
    flex-shrink: 0;
}

    .timeline-dot.pickup[b-twu1bqlrwq] {
        border-color: var(--brand-blue, #1a73e8);
        background: var(--brand-blue, #1a73e8);
    }

    .timeline-dot.dropoff[b-twu1bqlrwq] {
        border-color: #ef4444;
        background: #ef4444;
    }

.timeline-line[b-twu1bqlrwq] {
    width: 2px;
    flex: 1;
    min-height: 40px;
    background: linear-gradient(to bottom, var(--brand-blue, #1a73e8), #ef4444);
}

.route-details[b-twu1bqlrwq] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    min-height: 80px;
}

.route-point[b-twu1bqlrwq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.route-label[b-twu1bqlrwq] {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #9ca3af;
}

.route-address[b-twu1bqlrwq] {
    font-size: 0.9rem;
    color: #374151;
    line-height: 1.3;
}

/* Warning Banner */
.warning-banner[b-twu1bqlrwq] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: #fef3c7;
    border-radius: 8px;
    color: #92400e;
    font-size: 0.875rem;
}

    .warning-banner .material-icons[b-twu1bqlrwq] {
        font-size: 18px;
    }

/* Dialog Actions */
.dialog-actions[b-twu1bqlrwq] {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.btn-secondary[b-twu1bqlrwq],
.btn-danger[b-twu1bqlrwq],
.btn-primary[b-twu1bqlrwq] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

    .btn-secondary .material-icons[b-twu1bqlrwq],
    .btn-danger .material-icons[b-twu1bqlrwq],
    .btn-primary .material-icons[b-twu1bqlrwq] {
        font-size: 20px;
    }

.btn-secondary[b-twu1bqlrwq] {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
}

    .btn-secondary:hover[b-twu1bqlrwq] {
        background: #e2e8f0;
    }

.btn-danger[b-twu1bqlrwq] {
    background: #dc2626;
    color: white;
}

    .btn-danger:hover[b-twu1bqlrwq] {
        background: #b91c1c;
    }

.btn-primary[b-twu1bqlrwq] {
    background: var(--brand-blue, #1a73e8);
    color: white;
}

    .btn-primary:hover[b-twu1bqlrwq] {
        background: var(--brand-blue-dark, #1557b0);
        filter: brightness(0.9);
    }

/* Processing Section */
.processing-section[b-twu1bqlrwq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 48px 24px;
}

    .processing-section p[b-twu1bqlrwq] {
        color: #6b7280;
        margin: 0;
    }

.spinner[b-twu1bqlrwq] {
    width: 44px;
    height: 44px;
    border: 3px solid #e5e7eb;
    border-top-color: var(--brand-blue, #1a73e8);
    border-radius: 50%;
    animation: spin-b-twu1bqlrwq 0.8s linear infinite;
}

@keyframes spin-b-twu1bqlrwq {
    to {
        transform: rotate(360deg);
    }
}

/* Result Section */
.result-section[b-twu1bqlrwq] {
    padding: 16px 0;
}

.result-content[b-twu1bqlrwq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    padding: 24px 16px;
}

.result-icon[b-twu1bqlrwq] {
    font-size: 56px;
}

.result-content.success .result-icon[b-twu1bqlrwq] {
    color: #22c55e;
}

.result-content.error .result-icon[b-twu1bqlrwq] {
    color: #ef4444;
}

.result-title[b-twu1bqlrwq] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

.result-subtitle[b-twu1bqlrwq] {
    font-size: 0.95rem;
    color: #6b7280;
    margin: 0;
}

/* Close button for error loading state */
.btn-close[b-twu1bqlrwq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    background: var(--brand-blue, #1a73e8);
    color: white;
    transition: all 0.2s ease;
}

    .btn-close:hover[b-twu1bqlrwq] {
        filter: brightness(0.9);
    }
/* /Components/CardValidationErrorDialog.razor.rz.scp.css */
.card-error-dialog[b-xt2uncoxoq] {
    padding: 0 8px;
}

.error-icon[b-xt2uncoxoq] {
    text-align: center;
    margin-bottom: 16px;
}

    .error-icon i[b-xt2uncoxoq] {
        font-size: 3rem;
        color: #dc3545;
    }

.error-intro[b-xt2uncoxoq] {
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
    font-size: 0.95rem;
}

.error-list[b-xt2uncoxoq] {
    list-style: none;
    padding: 0;
    margin: 0 0 8px 0;
}

    .error-list li[b-xt2uncoxoq] {
        position: relative;
        padding: 10px 12px 10px 32px;
        margin-bottom: 8px;
        background: #fff5f5;
        border: 1px solid #ffcdd2;
        border-radius: 6px;
        color: #c62828;
        font-size: 0.9rem;
    }

        .error-list li:last-child[b-xt2uncoxoq] {
            margin-bottom: 0;
        }

        .error-list li[b-xt2uncoxoq]::before {
            content: "\f623"; /* Bootstrap Icons exclamation-triangle-fill */
            font-family: "bootstrap-icons";
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
            color: #e57373;
            font-size: 0.85rem;
        }

.dialog-buttons[b-xt2uncoxoq] {
    display: flex;
    justify-content: center;
    padding: 16px 8px 8px;
    border-top: 1px solid #eee;
    margin-top: 16px;
}

    .dialog-buttons .btn[b-xt2uncoxoq] {
        min-width: 100px;
        border-radius: 20px;
    }
/* /Components/ChangePasswordDialog.razor.rz.scp.css */
.change-password-container[b-cxasyekfgi] {
    background-color: #f8f9fa;
    min-width: 400px;
}

.change-password-header[b-cxasyekfgi] {
    padding: 20px 20px 10px 20px;
    border-bottom: 1px solid #e0e0e0;
}

    .change-password-header h5[b-cxasyekfgi] {
        margin: 0 0 8px 0;
        color: #1a5276;
        font-weight: 600;
    }

    .change-password-header .text-muted[b-cxasyekfgi] {
        margin: 0;
        font-size: 0.9rem;
    }

.change-password-body[b-cxasyekfgi] {
    padding: 20px;
}

.change-password-footer[b-cxasyekfgi] {
    padding: 20px;
    border-top: 1px solid #e0e0e0;
    background-color: #fff;
}

/* Buttons */
.change-button[b-cxasyekfgi] {
    background-color: #d4a847 !important;
    border-color: #d4a847 !important;
    color: white !important;
    border-radius: 25px;
    font-weight: 500;
}

    .change-button:hover:not(:disabled)[b-cxasyekfgi] {
        background-color: #c49a3a !important;
        border-color: #c49a3a !important;
    }

    .change-button:disabled[b-cxasyekfgi] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.cancel-button[b-cxasyekfgi] {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: white !important;
    border-radius: 25px;
    font-weight: 500;
    min-width: 100px;
}

    .cancel-button:hover:not(:disabled)[b-cxasyekfgi] {
        background-color: #5a6268 !important;
        border-color: #545b62 !important;
    }

/* Alert styling */
.alert[b-cxasyekfgi] {
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 0.9rem;
}

.alert-danger[b-cxasyekfgi] {
    background-color: #f8d7da;
    border-color: #f5c2c7;
    color: #842029;
}

/* Radzen FormField Overrides */
[b-cxasyekfgi] .rz-form-field {
    width: 100%;
}

    [b-cxasyekfgi] .rz-form-field.rz-variant-outlined .rz-form-field-content {
        background: #fff;
    }

/* Responsive adjustments */
@media (max-width: 576px) {
    .change-password-container[b-cxasyekfgi] {
        min-width: 300px;
    }

    .cancel-button[b-cxasyekfgi] {
        min-width: 80px;
    }
}
/* /Components/CharterPickupDateTime.razor.rz.scp.css */
/* ===============================
   Charter Pickup DateTime Component
   =============================== */

.charter-pickup-container[b-2xw1k9j37u] {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
}

.charter-pickup-header[b-2xw1k9j37u] {
    margin-bottom: 24px;
}

    .charter-pickup-header h3[b-2xw1k9j37u] {
        font-size: 1.5rem;
        font-weight: 600;
        color: var(--brand-blue-dark, var(--brand-blue-dark));
        margin: 0 0 8px 0;
    }

.charter-pickup-subtitle[b-2xw1k9j37u] {
    font-size: 0.95rem;
    color: #6c757d;
    margin: 0;
}

.charter-pickup-body[b-2xw1k9j37u] {
    max-width: 400px;
    margin: 0 auto;
}

/* ===============================
   DateTime Button (matches FlightInfoComponent)
   =============================== */

.charter-datetime-group[b-2xw1k9j37u] {
    position: relative;
    margin: 20px 0;
}

.charter-datetime-label[b-2xw1k9j37u] {
    position: absolute;
    left: 12px;
    top: -8px;
    background-color: white;
    padding: 0 4px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--brand-blue, var(--brand-blue));
    pointer-events: none;
    z-index: 2;
}

.charter-datetime-button[b-2xw1k9j37u] {
    width: 100%;
    min-height: 56px;
    padding: 12px 16px;
    border: 1px solid var(--field-border, #d9d9d9);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

    .charter-datetime-button:hover[b-2xw1k9j37u] {
        border-color: var(--brand-blue, #1B63C7);
    }

    .charter-datetime-button:focus[b-2xw1k9j37u] {
        border-color: var(--field-focus, #1B63C7);
        box-shadow: 0 0 0 .25rem var(--field-ring, rgba(27, 99, 199, 0.25));
        outline: 0;
    }

    .charter-datetime-button.has-value[b-2xw1k9j37u] {
        border-color: var(--brand-blue, #1B63C7);
    }

        .charter-datetime-button.has-value .charter-datetime-label[b-2xw1k9j37u] {
            font-weight: 600;
        }

/* DateTime Display (when value is set) */
.datetime-display[b-2xw1k9j37u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--brand-blue-dark, var(--brand-blue-dark));
}

.datetime-date[b-2xw1k9j37u] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--brand-blue-dark, var(--brand-blue-dark));
}

.datetime-time-row[b-2xw1k9j37u] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.datetime-time[b-2xw1k9j37u] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--brand-blue, var(--brand-blue));
}

/* Time Chip (Morning, Evening, etc.) */
.time-chip[b-2xw1k9j37u] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.time-chip.time-morning[b-2xw1k9j37u],
.time-chip.time-early-morning[b-2xw1k9j37u] {
    background-color: #fff3cd;
    color: #856404;
}

.time-chip.time-midday[b-2xw1k9j37u],
.time-chip.time-afternoon[b-2xw1k9j37u] {
    background-color: #d4edda;
    color: #155724;
}

.time-chip.time-evening[b-2xw1k9j37u] {
    background-color: #cce5ff;
    color: #004085;
}

.time-chip.time-midnight[b-2xw1k9j37u],
.time-chip.time-after-midnight[b-2xw1k9j37u],
.time-chip.time-before-midnight[b-2xw1k9j37u],
.time-chip.time-night[b-2xw1k9j37u] {
    background-color: #e2e3e5;
    color: #383d41;
}

/* DateTime Placeholder (when no value) */
.datetime-placeholder[b-2xw1k9j37u] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--field-placeholder, #8a8a8a);
    font-size: 1rem;
}

    .datetime-placeholder i[b-2xw1k9j37u] {
        font-size: 1.25rem;
        opacity: 0.7;
    }

    .datetime-placeholder span[b-2xw1k9j37u] {
        opacity: 0.75;
    }

/* ===============================
   Validation Error
   =============================== */

.validation-error[b-2xw1k9j37u] {
    margin-top: 8px;
    padding: 8px 12px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 4px;
    color: #856404;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 6px;
    text-align: left;
}

    .validation-error i[b-2xw1k9j37u] {
        font-size: 1rem;
        flex-shrink: 0;
    }

/* ===============================
   Helper Text
   =============================== */

.charter-helper-text[b-2xw1k9j37u] {
    margin-top: 16px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
    color: #6c757d;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
}

    .charter-helper-text i[b-2xw1k9j37u] {
        font-size: 1rem;
        color: var(--brand-blue, var(--brand-blue));
        flex-shrink: 0;
    }

/* ===============================
   Mobile Responsive
   =============================== */

@media (max-width: 500px) {
    .charter-pickup-container[b-2xw1k9j37u] {
        padding: 16px;
    }

    .charter-pickup-header h3[b-2xw1k9j37u] {
        font-size: 1.25rem;
    }

    .charter-pickup-subtitle[b-2xw1k9j37u] {
        font-size: 0.875rem;
    }

    .charter-datetime-button[b-2xw1k9j37u] {
        min-height: 52px;
        padding: 10px 14px;
    }

    .datetime-date[b-2xw1k9j37u] {
        font-size: 0.9rem;
    }

    .datetime-time[b-2xw1k9j37u] {
        font-size: 1.1rem;
    }

    .datetime-placeholder[b-2xw1k9j37u] {
        font-size: 0.9rem;
    }

        .datetime-placeholder i[b-2xw1k9j37u] {
            font-size: 1.1rem;
        }
}

@media (max-width: 400px) {
    .charter-pickup-header h3[b-2xw1k9j37u] {
        font-size: 1.1rem;
    }

    .datetime-date[b-2xw1k9j37u] {
        font-size: 0.85rem;
    }

    .datetime-time[b-2xw1k9j37u] {
        font-size: 1rem;
    }
}
/* /Components/ChatWidget.razor.rz.scp.css */
/* =========================
   Chat Widget Container
   ========================= */

.chat-widget-container[b-fx9kikokn1] {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

/* =========================
   Toggle Button
   ========================= */

.chat-toggle-button[b-fx9kikokn1] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: var(--brand-color, #2963A8);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
    position: relative;
}

    .chat-toggle-button:hover[b-fx9kikokn1] {
        transform: scale(1.05);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    }

    .chat-toggle-button:active[b-fx9kikokn1] {
        transform: scale(0.98);
    }

    .chat-toggle-button:disabled[b-fx9kikokn1] {
        opacity: 0.5;
        cursor: not-allowed;
    }

        .chat-toggle-button:disabled:hover[b-fx9kikokn1] {
            transform: none;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

    .chat-toggle-button i[b-fx9kikokn1] {
        font-size: 24px;
    }

.unread-badge[b-fx9kikokn1] {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #e53935;
    color: white;
    font-size: 11px;
    font-weight: 600;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

/* =========================
   Chat Window
   ========================= */

.chat-window[b-fx9kikokn1] {
    position: absolute;
    bottom: 70px;
    right: 0;
    width: 360px;
    max-width: calc(100vw - 40px);
    height: 500px;
    max-height: calc(100vh - 120px);
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideUp-b-fx9kikokn1 0.2s ease;
}

@keyframes slideUp-b-fx9kikokn1 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================
   Chat Header
   ========================= */

.chat-header[b-fx9kikokn1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--brand-color, #2963A8);
    color: white;
}

.chat-header-info[b-fx9kikokn1] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.chat-avatar[b-fx9kikokn1] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: white;
    padding: 4px;
    object-fit: contain;
}

.chat-header-text[b-fx9kikokn1] {
    display: flex;
    flex-direction: column;
}

.chat-title[b-fx9kikokn1] {
    font-weight: 600;
    font-size: 15px;
}

.chat-status[b-fx9kikokn1] {
    font-size: 12px;
    opacity: 0.9;
}

.status-online[b-fx9kikokn1]::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4caf50;
    margin-right: 6px;
}

.status-typing[b-fx9kikokn1] {
    font-style: italic;
}

.chat-minimize-btn[b-fx9kikokn1] {
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.2s;
}

    .chat-minimize-btn:hover[b-fx9kikokn1] {
        background: rgba(255, 255, 255, 0.1);
    }

/* =========================
   Messages Container
   ========================= */

.chat-messages[b-fx9kikokn1] {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #f8f9fa;
}

/* =========================
   Welcome Message
   ========================= */

.chat-welcome[b-fx9kikokn1] {
    text-align: center;
    padding: 8px 16px;
    color: #666;
}

    .chat-welcome .welcome-header[b-fx9kikokn1] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-bottom: 4px;
    }

    .chat-welcome .welcome-icon[b-fx9kikokn1] {
        font-size: 24px;
        color: var(--brand-color, #2963A8);
    }

    .chat-welcome h3[b-fx9kikokn1] {
        margin: 0;
        font-size: 16px;
        color: #333;
    }

    .chat-welcome p[b-fx9kikokn1] {
        margin: 0 0 6px 0;
        font-size: 13px;
    }

    .chat-welcome ul[b-fx9kikokn1] {
        list-style: none;
        padding: 0;
        margin: 0;
        text-align: left;
        display: inline-block;
    }

        .chat-welcome ul li[b-fx9kikokn1] {
            padding: 3px 0;
            font-size: 13px;
        }

            .chat-welcome ul li[b-fx9kikokn1]::before {
                content: '✓';
                color: var(--brand-color, #2963A8);
                margin-right: 8px;
                font-weight: bold;
            }

/* =========================
   Messages
   ========================= */

.message[b-fx9kikokn1] {
    display: flex;
    gap: 8px;
    max-width: 85%;
}

.message-user[b-fx9kikokn1] {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.message-assistant[b-fx9kikokn1] {
    align-self: flex-start;
}

.message-avatar[b-fx9kikokn1] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

    .message-avatar img[b-fx9kikokn1] {
        width: 100%;
        height: 100%;
        object-fit: contain;
        background: white;
        padding: 2px;
    }

.message-content[b-fx9kikokn1] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.message-bubble[b-fx9kikokn1] {
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
}

.message-user .message-bubble[b-fx9kikokn1] {
    background: var(--brand-color, #2963A8);
    color: white;
    border-bottom-right-radius: 4px;
}

.message-assistant .message-bubble[b-fx9kikokn1] {
    background: white;
    color: #333;
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.message-time[b-fx9kikokn1] {
    font-size: 11px;
    color: #999;
    padding: 0 4px;
}

.message-user .message-time[b-fx9kikokn1] {
    text-align: right;
}

/* =========================
   Typing Indicator
   ========================= */

.typing-indicator[b-fx9kikokn1] {
    display: flex;
    gap: 4px;
    padding: 12px 14px;
}

    .typing-indicator span[b-fx9kikokn1] {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #bbb;
        animation: typing-b-fx9kikokn1 1.4s infinite ease-in-out;
    }

        .typing-indicator span:nth-child(1)[b-fx9kikokn1] {
            animation-delay: 0s;
        }

        .typing-indicator span:nth-child(2)[b-fx9kikokn1] {
            animation-delay: 0.2s;
        }

        .typing-indicator span:nth-child(3)[b-fx9kikokn1] {
            animation-delay: 0.4s;
        }

@keyframes typing-b-fx9kikokn1 {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

/* =========================
   Error Message
   ========================= */

.chat-error[b-fx9kikokn1] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #fff3cd;
    color: #856404;
    border-radius: 8px;
    font-size: 13px;
}

    .chat-error i[b-fx9kikokn1] {
        color: #e65100;
    }

    .chat-error button[b-fx9kikokn1] {
        margin-left: auto;
        background: transparent;
        border: none;
        color: #856404;
        cursor: pointer;
        text-decoration: underline;
        font-size: 12px;
    }

/* =========================
   reCAPTCHA Container
   ========================= */

.chat-recaptcha-container[b-fx9kikokn1] {
    padding: 16px;
    text-align: center;
    background: linear-gradient(to bottom, #f8f9fa, #ffffff);
    border-top: 1px solid #e9ecef;
}

.chat-recaptcha-container .recaptcha-widget[b-fx9kikokn1] {
    display: inline-block;
    transform: scale(0.9);
    transform-origin: center;
}

.recaptcha-hint[b-fx9kikokn1] {
    margin: 10px 0 0 0;
    font-size: 12px;
    color: #6c757d;
    line-height: 1.4;
}

/* Mobile adjustments for reCAPTCHA */
@media (max-width: 400px) {
    .chat-recaptcha-container .recaptcha-widget[b-fx9kikokn1] {
        transform: scale(0.77);
        transform-origin: center;
    }

    .chat-recaptcha-container[b-fx9kikokn1] {
        padding: 12px 8px;
    }
}

/* =========================
   Input Container
   ========================= */

.chat-input-container[b-fx9kikokn1] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 12px 16px;
    background: white;
    border-top: 1px solid #eee;
}

.chat-input[b-fx9kikokn1] {
    flex: 1;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 10px 16px;
    font-size: 16px;
    resize: none;
    max-height: 100px;
    outline: none;
    transition: border-color 0.2s;
    font-family: inherit;
}

    .chat-input:focus[b-fx9kikokn1] {
        border-color: var(--brand-color, #2963A8);
    }

    .chat-input[b-fx9kikokn1]::placeholder {
        color: #999;
    }

    .chat-input:disabled[b-fx9kikokn1] {
        background: #f5f5f5;
    }

.chat-send-btn[b-fx9kikokn1] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--brand-color, #2963A8);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

    .chat-send-btn:hover:not(:disabled)[b-fx9kikokn1] {
        transform: scale(1.05);
    }

    .chat-send-btn:disabled[b-fx9kikokn1] {
        background: #ccc;
        cursor: not-allowed;
    }

    .chat-send-btn i[b-fx9kikokn1] {
        font-size: 16px;
    }

/* =========================
   Footer
   ========================= */

.chat-footer[b-fx9kikokn1] {
    padding: 8px 16px;
    text-align: center;
    font-size: 11px;
    color: #999;
    background: #fafafa;
    border-top: 1px solid #eee;
}

/* =========================
   Mobile Responsive
   ========================= */

@media (max-width: 480px) {
    .chat-widget-container[b-fx9kikokn1] {
        bottom: 16px;
        right: 16px;
    }

    .chat-toggle-button[b-fx9kikokn1] {
        width: 52px;
        height: 52px;
    }

        .chat-toggle-button i[b-fx9kikokn1] {
            font-size: 22px;
        }

    .chat-window[b-fx9kikokn1] {
        position: fixed;
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        height: calc(100vh - 60px);
        max-height: calc(100vh - 60px);
        border-radius: 16px 16px 0 0;
    }

    .chat-messages[b-fx9kikokn1] {
        padding: 12px;
    }

    .message[b-fx9kikokn1] {
        max-width: 90%;
    }
}

/* =========================
   Message Content Formatting
   ========================= */

.message-bubble strong[b-fx9kikokn1] {
    font-weight: 600;
}

/* =========================
   Chat Action Buttons (Links styled as buttons)
   ========================= */

[b-fx9kikokn1] .lookup-confirmation-link,
[b-fx9kikokn1] .find-my-trip-link {
    display: inline-block;
    background: var(--brand-color, #2963A8);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
    margin-top: 8px;
    transition: all 0.2s ease;
    cursor: pointer;
}

    [b-fx9kikokn1] .lookup-confirmation-link:hover,
    [b-fx9kikokn1] .find-my-trip-link:hover {
        background: var(--brand-color-dark, #1e4a7a);
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    [b-fx9kikokn1] .lookup-confirmation-link:active,
    [b-fx9kikokn1] .find-my-trip-link:active {
        transform: translateY(0);
    }

/* Book Now Button - prominent CTA for booking links */
[b-fx9kikokn1] .chat-book-now-btn {
    display: inline-block;
    background: linear-gradient(135deg, #28a745 0%, #218838 100%);
    color: white !important;
    padding: 12px 24px;
    border-radius: 25px;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 14px;
    margin: 12px 0;
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(40, 167, 69, 0.3);
    text-align: center;
}

    [b-fx9kikokn1] .chat-book-now-btn:hover {
        background: linear-gradient(135deg, #218838 0%, #1e7e34 100%);
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(40, 167, 69, 0.4);
        color: white !important;
        text-decoration: none !important;
    }

    [b-fx9kikokn1] .chat-book-now-btn:active {
        transform: translateY(0);
        box-shadow: 0 2px 6px rgba(40, 167, 69, 0.3);
    }

.message-bubble em[b-fx9kikokn1] {
    font-style: italic;
}

.message-bubble li[b-fx9kikokn1] {
    list-style-position: inside;
    margin-left: 0;
}

/* =========================
   Accessibility
   ========================= */

.chat-toggle-button:focus[b-fx9kikokn1],
.chat-send-btn:focus[b-fx9kikokn1],
.chat-input:focus[b-fx9kikokn1],
.chat-minimize-btn:focus[b-fx9kikokn1] {
    outline: 2px solid var(--brand-color, #2963A8);
    outline-offset: 2px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .chat-window[b-fx9kikokn1] {
        animation: none;
    }

    .typing-indicator span[b-fx9kikokn1] {
        animation: none;
        opacity: 0.6;
    }

    .chat-toggle-button:hover[b-fx9kikokn1] {
        transform: none;
    }
}
/* /Components/CountrySelectionDialog.razor.rz.scp.css */
/* Country Selection Dialog */

/* Dialog content wrapper - use flexbox to fill available space */
[b-j0dqhd3yz8] .rz-dialog-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Search Container */
.search-container[b-j0dqhd3yz8] {
    padding: 16px 20px;
    border-bottom: 1px solid #dee2e6;
    background: #fff;
    flex-shrink: 0;
}

.search-input[b-j0dqhd3yz8] {
    width: 100%;
    padding: 10px 14px;
    font-size: 15px;
    border: 1.5px solid #dee2e6;
    border-radius: 6px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .search-input:focus[b-j0dqhd3yz8] {
        border-color: var(--brand-blue, var(--brand-blue));
        box-shadow: 0 0 0 3px rgba(41, 99, 168, 0.1);
    }

    .search-input[b-j0dqhd3yz8]::placeholder {
        color: #999;
    }

/* Country List */
.country-list[b-j0dqhd3yz8] {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
    overflow-y: auto;
    min-height: 0; /* Required for flex overflow to work */
}

    .country-list li[b-j0dqhd3yz8] {
        padding: 12px 20px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 15px;
        transition: background-color 0.15s;
        border: none;
    }

        .country-list li:hover[b-j0dqhd3yz8] {
            background: #f8f9fa;
        }

        .country-list li:active[b-j0dqhd3yz8] {
            background: #e9ecef;
        }

    /* Focus styles for keyboard navigation */
    .country-list li.country-item:focus[b-j0dqhd3yz8] {
        outline: none;
        background: #e3f2fd;
        box-shadow: inset 0 0 0 2px var(--brand-blue, #2963a8);
    }

    .country-list li.country-item.focused[b-j0dqhd3yz8] {
        background: #e3f2fd;
    }

    .country-list .flag-emoji[b-j0dqhd3yz8] {
        font-size: 24px;
        line-height: 1;
    }

    .country-list .section-header[b-j0dqhd3yz8] {
        padding: 12px 20px;
        font-weight: 600;
        font-size: 13px;
        color: #6c757d;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        cursor: default;
        background: transparent;
    }

        .country-list .section-header:hover[b-j0dqhd3yz8] {
            background: transparent;
        }

    .country-list .divider[b-j0dqhd3yz8] {
        height: 1px;
        background: #dee2e6;
        margin: 8px 0;
        padding: 0;
        cursor: default;
    }

        .country-list .divider:hover[b-j0dqhd3yz8] {
            background: #dee2e6;
        }
/* /Components/CruiseComponent.razor.rz.scp.css */
.cruise-info-content[b-nphwe9x9he] {
    max-width: 100%;
}

/* Section frame - matches flight component styling */
.section-frame[b-nphwe9x9he] {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 16px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.section-frame-collapsed[b-nphwe9x9he] {
    padding: 12px;
}

.frame-heading[b-nphwe9x9he] {
    font-size: 13px;
    font-weight: 600;
    color: var(--brand-blue-dark, #0a2b56);
    background: white;
    padding: 0 8px;
    position: absolute;
    top: -10px;
    left: 16px;
}

/* Info banner */
.cruise-info-banner[b-nphwe9x9he] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #e8f4fd;
    border: 1px solid #b8daff;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 13px;
    color: #333;
    line-height: 1.4;
}

/* Field rows */
.cruise-field-row[b-nphwe9x9he] {
    width: 100%;
}

/* Float dropdown - matches flight component */
.float-dropdown[b-nphwe9x9he] {
    position: relative;
}

.float-dropdown .float-label[b-nphwe9x9he] {
    position: absolute;
    top: 50%;
    left: 44px;
    transform: translateY(-50%);
    font-size: 14px;
    color: #999;
    pointer-events: none;
    transition: all 0.15s ease;
    background: transparent;
    padding: 0 4px;
}

.float-dropdown.has-value .float-label[b-nphwe9x9he],
.float-dropdown:focus-within .float-label[b-nphwe9x9he] {
    top: 6px;
    left: 12px;
    transform: none;
    font-size: 10px;
    color: var(--brand-blue, #005EB8);
    background: white;
}

/* Cruise code inline badge */
.cruise-code-inline[b-nphwe9x9he] {
    background: var(--brand-blue-dark, #0a2b56);
    color: white;
    font-weight: 700;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
}

/* Ship name input wrapper */
.ship-name-input-wrapper[b-nphwe9x9he] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 56px;
    padding: 0 14px;
    border: 1px solid var(--field-border, #d9d9d9);
    border-radius: 8px;
    background: white;
    transition: border-color 0.2s ease;
}

.ship-name-input-wrapper:focus-within[b-nphwe9x9he] {
    border-color: var(--brand-blue, #005EB8);
    box-shadow: 0 0 0 2px rgba(41, 99, 168, 0.15);
}

.ship-name-input[b-nphwe9x9he] {
    flex: 1;
    border: none;
    outline: none;
    font-size: 16px;
    font-family: inherit;
    background: transparent;
    padding: 8px 0 0 0;
    height: 100%;
    text-align: center;
}

.ship-name-input[b-nphwe9x9he]::placeholder {
    color: transparent;
}

.ship-name-input:focus[b-nphwe9x9he]::placeholder {
    color: #bbb;
    font-style: italic;
}

/* When input has content or focus, show the float label */
.ship-name-input:not(:placeholder-shown) ~ .float-label[b-nphwe9x9he],
.ship-name-input:focus ~ .float-label[b-nphwe9x9he] {
    /* Handled by parent .has-value / :focus-within */
}

/* Validation shake animation - matches FlightComponent */
@keyframes validationShake-b-nphwe9x9he {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-6px); }
    20%, 40%, 60%, 80% { transform: translateX(6px); }
}

.validation-shake[b-nphwe9x9he] {
    animation: validationShake-b-nphwe9x9he 0.5s ease-in-out;
}

.validation-error[b-nphwe9x9he] {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25) !important;
}

.validation-error .ship-name-input-wrapper[b-nphwe9x9he] {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25) !important;
}

/* Attention shake for collapsed summary */
@keyframes attentionShake-b-nphwe9x9he {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.attention-shake[b-nphwe9x9he] {
    animation: attentionShake-b-nphwe9x9he 0.5s ease-in-out;
    border-color: #f59e0b !important;
}

/* ===== COLLAPSED SUMMARY ===== */
.collapsed-summary[b-nphwe9x9he] {
    width: 100%;
}

.cruise-summary-button[b-nphwe9x9he] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    text-align: left;
    transition: background 0.15s ease;
    border-radius: 8px;
}

.cruise-summary-button:hover[b-nphwe9x9he] {
    background: #f5f6f8;
}

.cruise-summary-button:focus-visible[b-nphwe9x9he] {
    outline: 3px solid var(--brand-blue, #005EB8);
    outline-offset: 2px;
}

.summary-cruise-icon[b-nphwe9x9he] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.summary-cruise-line[b-nphwe9x9he] {
    flex-shrink: 0;
    min-width: 40px;
}

.cruise-line-code[b-nphwe9x9he] {
    background: var(--brand-blue-dark, #0a2b56);
    color: white;
    font-weight: 700;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
}

.cruise-line-placeholder[b-nphwe9x9he] {
    color: #999;
    font-size: 13px;
}

.summary-ship-name[b-nphwe9x9he] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ship-name-text[b-nphwe9x9he] {
    color: #333;
    font-size: 13px;
}

.ship-name-placeholder[b-nphwe9x9he] {
    color: #bbb;
    font-size: 13px;
}

.summary-datetime[b-nphwe9x9he] {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.summary-datetime .datetime-label[b-nphwe9x9he] {
    font-size: 10px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.summary-datetime .datetime-text[b-nphwe9x9he] {
    font-size: 13px;
    color: #333;
    font-weight: 500;
}

.summary-datetime .datetime-placeholder[b-nphwe9x9he] {
    font-size: 13px;
    color: #bbb;
}

.summary-expand-icon[b-nphwe9x9he] {
    flex-shrink: 0;
    color: #999;
}

/* Pulse attention animation for empty fields */
.pulse-attention[b-nphwe9x9he] {
    animation: pulseAttention-b-nphwe9x9he 2s ease-in-out infinite;
}

@keyframes pulseAttention-b-nphwe9x9he {
    0%, 100% { box-shadow: 0 0 0 0 rgba(41, 99, 168, 0); }
    50% { box-shadow: 0 0 0 4px rgba(41, 99, 168, 0.15); }
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 480px) {
    .section-frame[b-nphwe9x9he] {
        padding: 14px 12px;
        gap: 10px;
    }

    .cruise-info-banner[b-nphwe9x9he] {
        font-size: 12px;
        padding: 10px 12px;
    }

    .cruise-summary-button[b-nphwe9x9he] {
        gap: 6px;
        padding: 6px 8px;
        font-size: 13px;
    }

    .summary-ship-name[b-nphwe9x9he] {
        display: none;
    }

    .summary-cruise-icon[b-nphwe9x9he] {
        width: 28px;
        height: 28px;
    }
}

/* Accessibility */
.visually-hidden[b-nphwe9x9he] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* /Components/CruiseLineSelectionModal.razor.rz.scp.css */
@media (max-width: 480px) {
    :global(.rz-dialog.dlg-cruise-line)[b-dwum1hwues] {
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
    }

    :global(.rz-dialog.dlg-cruise-line .rz-dialog-content)[b-dwum1hwues] {
        height: 100%;
        padding: 0 !important;
        overflow: hidden !important;
        display: flex;
        flex-direction: column;
    }
}

.cruise-modal-container[b-dwum1hwues] {
    max-height: 75vh;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.modal-header-section[b-dwum1hwues] {
    padding: 12px 20px 10px 20px;
    flex-shrink: 0;
}

.cruise-search-box[b-dwum1hwues] {
    width: 100%;
    flex-shrink: 0;
    height: 44px;
    padding: 10px 14px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 6px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cruise-search-box:focus[b-dwum1hwues] {
    border-color: var(--brand-blue, #005EB8);
    box-shadow: 0 0 0 2px rgba(41, 99, 168, 0.2);
}

.cruise-search-box[b-dwum1hwues]::placeholder {
    color: #999;
}

.cruise-lines-list[b-dwum1hwues] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding: 8px 20px 80px 20px;
}

.cruise-row-button[b-dwum1hwues] {
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    font-family: inherit;
    display: block;
}

.cruise-row-button:hover[b-dwum1hwues] {
    background: #f8f9fa;
    border-color: var(--brand-blue, #005EB8);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.cruise-row-button:focus[b-dwum1hwues] {
    outline: 2px solid var(--brand-blue, #005EB8);
    outline-offset: 2px;
}

.cruise-row-button.selected[b-dwum1hwues] {
    background: #e8f4fd;
    border-color: var(--brand-blue, #005EB8);
    border-width: 2px;
}

.cruise-row-content[b-dwum1hwues] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cruise-code-badge[b-dwum1hwues] {
    width: 42px;
    height: 32px;
    background: var(--brand-blue-dark, #0a2b56);
    color: white;
    font-weight: 700;
    font-size: 11px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cruise-name[b-dwum1hwues] {
    flex: 1;
}

.not-in-list-container[b-dwum1hwues] {
    padding: 10px 20px;
    border-top: 1px solid #e0e0e0;
    text-align: center;
    background: #f5f6f8;
    flex-shrink: 0;
}

.not-in-list-link[b-dwum1hwues] {
    color: var(--brand-gold, #c5a030);
    text-decoration: underline;
    cursor: pointer;
    font-size: 14px;
}

.not-in-list-link:hover[b-dwum1hwues] {
    color: var(--brand-blue-dark, #0a2b56);
}

@media (max-width: 480px) {
    .cruise-modal-container[b-dwum1hwues] {
        height: 100%;
        display: flex;
        flex-direction: column;
        position: relative;
        overflow: hidden;
    }

    .modal-header-section[b-dwum1hwues] {
        padding: 10px 16px 8px 16px;
        flex-shrink: 0;
    }

    .cruise-lines-list[b-dwum1hwues] {
        padding: 6px 16px 8px 16px;
        gap: 2px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        flex: 1;
        min-height: 0;
        margin-bottom: 50px;
    }

    .cruise-row-button[b-dwum1hwues] {
        padding: 9px 12px;
        font-size: 20px;
    }

    .not-in-list-container[b-dwum1hwues] {
        padding: 12px 16px;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: #f5f6f8;
        z-index: 10;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
    }
}

.cruise-row-button:focus-visible[b-dwum1hwues] {
    outline: 3px solid var(--brand-blue, #005EB8);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(0, 94, 184, 0.25);
}
/* /Components/DateTimeEntryComponent.razor.rz.scp.css */
/* ===============================
   DateTime Entry Wrapper Component

   This wrapper component renders either:
   - DateTimeEntryDesktop (side-by-side calendar + time picker)
   - DateTimeEntryMobile (stacked layout with tap-to-expand)

   Each child component has its own scoped CSS.
   This file is kept minimal.
   =============================== */

/* No specific styles needed - child components handle their own styling */
/* /Components/DateTimeEntryDesktop.razor.rz.scp.css */
/* ===============================
   Desktop DateTime Entry - Side by Side Layout
   =============================== */

.datetime-entry-desktop[b-s21ubkdpzv] {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.desktop-body[b-s21ubkdpzv] {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ===============================
   Panel Labels
   =============================== */

.panel-label[b-s21ubkdpzv] {
    font-size: 13px;
    font-weight: 600;
    color: var(--brand-blue, #0a4a8a);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

    .panel-label i[b-s21ubkdpzv] {
        font-size: 14px;
        color: var(--brand-blue, #0a4a8a);
    }

/* ===============================
   Side-by-Side Container
   =============================== */

.side-by-side-container[b-s21ubkdpzv] {
    display: flex;
    gap: 16px;
    align-items: stretch;
    justify-content: center;
}

/* ===============================
   Panel Separator (+ between date and time)
   =============================== */

.panel-separator[b-s21ubkdpzv] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 28px; /* Align with panels (accounts for label height) */
}

.separator-plus[b-s21ubkdpzv] {
    font-size: 24px;
    font-weight: 300;
    color: #adb5bd;
    line-height: 1;
}

.calendar-panel[b-s21ubkdpzv] {
    flex: 0 0 auto;
    min-width: 320px;
    display: flex;
    flex-direction: column;
}

.time-panel[b-s21ubkdpzv] {
    flex: 0 0 220px;
    display: flex;
    flex-direction: column;
}

/* Time wheel matches calendar style - fixed height to match calendar */
.inline-time-wheel[b-s21ubkdpzv] {
    display: flex;
    flex-direction: column;
    background: linear-gradient(to bottom, #f8fafc, #fff, #f8fafc);
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    height: 322px;
    overflow: hidden;
}

/* ===============================
   Custom Calendar Styles
   =============================== */

.custom-calendar[b-s21ubkdpzv] {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 16px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    width: 100%;
    flex: 1;
}

.calendar-header[b-s21ubkdpzv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding: 0 4px;
}

.calendar-month-year[b-s21ubkdpzv] {
    font-size: 16px;
    font-weight: 600;
    color: var(--brand-blue-dark, #06325f);
}

.calendar-nav-btn[b-s21ubkdpzv] {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-blue, #0a4a8a);
    transition: background-color 0.2s;
}

    .calendar-nav-btn:hover:not(:disabled)[b-s21ubkdpzv] {
        background-color: rgba(10, 74, 138, 0.1);
    }

    .calendar-nav-btn:disabled[b-s21ubkdpzv] {
        color: #ccc;
        cursor: not-allowed;
    }

.calendar-weekdays[b-s21ubkdpzv] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 8px;
    text-align: center;
}

    .calendar-weekdays span[b-s21ubkdpzv] {
        font-size: 11px;
        font-weight: 600;
        color: #666;
        padding: 4px 0;
    }

.calendar-grid[b-s21ubkdpzv] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.calendar-day[b-s21ubkdpzv] {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border: none;
    background: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.15s ease;
    color: #333;
    padding: 0;
    min-width: 36px;
    min-height: 36px;
    width: 100%;
}

    .calendar-day:hover:not(.disabled):not(.empty)[b-s21ubkdpzv] {
        background-color: rgba(10, 74, 138, 0.1);
    }

    .calendar-day.empty[b-s21ubkdpzv] {
        cursor: default;
    }

    .calendar-day.today:not(.selected)[b-s21ubkdpzv] {
        border: 1.5px solid rgba(10, 74, 138, 0.35);
        font-weight: 500;
    }

    .calendar-day.selected[b-s21ubkdpzv] {
        background-color: var(--brand-blue, #0a4a8a);
        color: white;
        font-weight: 600;
    }

    .calendar-day.disabled[b-s21ubkdpzv] {
        color: #ccc;
        cursor: not-allowed;
    }

/* ===============================
   Inline Time Wheel Styles
   =============================== */

.wheel-picker-inline[b-s21ubkdpzv] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex: 1;
    position: relative;
    overflow: hidden;
}

/* Selection band centered vertically in the wheel picker */
/* Container is 322px - 16px padding = 306px usable. Center = (306-38)/2 = 134px */
.selection-highlight-inline[b-s21ubkdpzv] {
    position: absolute;
    left: 8px;
    right: 8px;
    top: 134px;
    height: 38px;
    background: linear-gradient(to right, rgba(10, 74, 138, 0.08), rgba(10, 74, 138, 0.12), rgba(10, 74, 138, 0.08));
    border-radius: 8px;
    border-top: 1px solid rgba(10, 74, 138, 0.2);
    border-bottom: 1px solid rgba(10, 74, 138, 0.2);
    pointer-events: none;
    z-index: 1;
    transition: all 0.2s ease;
}

    /* Unselected state - dashed border, less prominent */
    .selection-highlight-inline.unselected[b-s21ubkdpzv] {
        background: linear-gradient(to right, rgba(150, 150, 150, 0.05), rgba(150, 150, 150, 0.08), rgba(150, 150, 150, 0.05));
        border-top: 1.5px dashed rgba(150, 150, 150, 0.4);
        border-bottom: 1.5px dashed rgba(150, 150, 150, 0.4);
    }

.wheel-column-inline[b-s21ubkdpzv] {
    flex: 1;
    height: 100%;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    position: relative;
    z-index: 2;
}

    .wheel-column-inline[b-s21ubkdpzv]::-webkit-scrollbar {
        display: none;
    }

.wheel-column-period-inline[b-s21ubkdpzv] {
    flex: 0 0 auto;
    min-width: 50px;
}

/* Padding creates space above/below items so selected item can be centered */
/* Height matches selection band position (134px) */
.wheel-padding-inline[b-s21ubkdpzv] {
    height: 134px;
    min-height: 134px;
    flex-shrink: 0;
}

.wheel-item-inline[b-s21ubkdpzv] {
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 500;
    color: #999;
    cursor: pointer;
    scroll-snap-align: center;
    transition: all 0.15s ease;
    user-select: none;
}

    .wheel-item-inline:hover[b-s21ubkdpzv] {
        color: #666;
    }

    /* Centered but not selected - shows in highlight band but clearly unselected */
    .wheel-item-inline.centered[b-s21ubkdpzv] {
        font-size: 17px;
        font-weight: 500;
        color: #aaa;
        opacity: 0.7;
    }

    /* Actually selected by user */
    .wheel-item-inline.selected[b-s21ubkdpzv] {
        font-size: 18px;
        font-weight: 700;
        color: var(--brand-blue-dark, #06325f);
        opacity: 1;
    }

.wheel-separator-inline[b-s21ubkdpzv] {
    font-size: 20px;
    font-weight: 700;
    color: var(--brand-blue-dark, #06325f);
    padding: 0 2px;
    align-self: center;
    z-index: 2;
    transition: opacity 0.2s ease;
}

    /* Fade separator when time not fully selected */
    .wheel-separator-inline.unselected[b-s21ubkdpzv] {
        opacity: 0.4;
    }

.wheel-spacer-inline[b-s21ubkdpzv] {
    width: 8px;
    flex-shrink: 0;
}

/* ===============================
   Approximate Time Hint (full width)
   =============================== */

.approx-time-hint-full[b-s21ubkdpzv] {
    margin: 0;
    font-size: 12px;
    font-style: italic;
    color: #666;
    text-align: center;
    line-height: 1.3;
    padding: 8px 16px;
    background: #f8f9fa;
    border-radius: 6px;
}

/* ===============================
   Time Preview Full Width
   =============================== */

.time-preview-full[b-s21ubkdpzv] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-radius: 8px;
    flex-wrap: wrap;
}

.time-value-preview[b-s21ubkdpzv] {
    font-size: 15px;
    font-weight: 600;
    color: var(--brand-blue-dark, #06325f);
}

.time-placeholder-preview[b-s21ubkdpzv] {
    font-size: 14px;
    color: #666;
}

/* ===============================
   Time Chip Styles
   =============================== */

.time-chip[b-s21ubkdpzv] {
    padding: 3px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #F2F6FF 0%, #E5EEFF 100%);
    color: var(--brand-blue-dark, #06325f);
    border: 1px solid var(--brand-blue, #0a4a8a);
    font-size: 11px;
    font-weight: 500;
    text-transform: capitalize;
}

.time-chip.time-morning[b-s21ubkdpzv] {
    background: linear-gradient(135deg, #FFF9E6 0%, #FFF3CC 100%);
    border-color: #F59E0B;
    color: #92400E;
}

.time-chip.time-midday[b-s21ubkdpzv],
.time-chip.time-afternoon[b-s21ubkdpzv] {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    border-color: #F59E0B;
    color: #92400E;
}

.time-chip.time-evening[b-s21ubkdpzv] {
    background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%);
    border-color: #6366F1;
    color: #312E81;
}

.time-chip.time-midnight[b-s21ubkdpzv],
.time-chip.time-after-midnight[b-s21ubkdpzv],
.time-chip.time-before-midnight[b-s21ubkdpzv],
.time-chip.time-night[b-s21ubkdpzv] {
    background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%);
    border-color: #4F46E5;
    color: #1E1B4B;
}

.time-chip.time-early-morning[b-s21ubkdpzv] {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    border-color: #F59E0B;
    color: #92400E;
}

/* ===============================
   Footer Buttons
   =============================== */

.desktop-footer[b-s21ubkdpzv] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    align-items: stretch;
    padding: 12px 0 0 0;
    border-top: 1px solid #e5e5e5;
}

    .desktop-footer .btn-cancel[b-s21ubkdpzv] {
        background: #e8e8e8;
        color: #555;
        border: none;
        border-radius: var(--field-radius, 12px);
        padding: 10px 24px;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.3;
        cursor: pointer;
        transition: all 0.2s;
        white-space: nowrap;
        flex-shrink: 0;
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .desktop-footer .btn-cancel:hover[b-s21ubkdpzv] {
            background: #d8d8d8;
            color: #333;
        }

    .desktop-footer[b-s21ubkdpzv]  .rz-button.rz-button-primary {
        border-radius: var(--field-radius, 12px) !important;
        padding: 10px 24px !important;
        flex-shrink: 1;
        min-width: 0;
        min-height: 40px !important;
    }

    .desktop-footer[b-s21ubkdpzv]  .rz-button .rz-button-text {
        font-size: 12px !important;
        line-height: 1.3 !important;
    }

/* ===============================
   Manual Entry Mode
   =============================== */

.manual-entry-section[b-s21ubkdpzv] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 0;
}

.manual-entry-field[b-s21ubkdpzv] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.manual-entry-label[b-s21ubkdpzv] {
    font-size: 14px;
    font-weight: 600;
    color: var(--brand-blue, #0a4a8a);
}

.manual-entry-input[b-s21ubkdpzv] {
    padding: 12px 14px;
    font-size: 16px;
    border: 2px solid #ced4da;
    border-radius: 8px;
    background: #fff;
    color: #333;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
    box-sizing: border-box;
}

    .manual-entry-input:focus[b-s21ubkdpzv] {
        outline: none;
        border-color: var(--brand-blue, #0a4a8a);
        box-shadow: 0 0 0 3px rgba(10, 74, 138, 0.15);
    }

    .manual-entry-input.input-error[b-s21ubkdpzv] {
        border-color: #dc3545;
    }

        .manual-entry-input.input-error:focus[b-s21ubkdpzv] {
            box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
        }

    .manual-entry-input[b-s21ubkdpzv]::placeholder {
        color: #999;
    }

.manual-entry-hint[b-s21ubkdpzv] {
    font-size: 12px;
    color: #666;
    font-style: italic;
}

.manual-entry-error[b-s21ubkdpzv] {
    font-size: 12px;
    color: #dc3545;
    font-weight: 500;
}

.manual-entry-approx-hint[b-s21ubkdpzv] {
    margin: 4px 0 0 0;
    font-size: 12px;
    font-style: italic;
    color: #666;
    text-align: center;
    padding: 8px;
    background: #f8f9fa;
    border-radius: 6px;
}

.manual-entry-preview[b-s21ubkdpzv] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px;
    background: linear-gradient(135deg, #f0f7ff 0%, #e5eeff 100%);
    border: 1px solid var(--brand-blue, #0a4a8a);
    border-radius: 8px;
    margin-top: 4px;
}

.preview-label[b-s21ubkdpzv] {
    font-size: 12px;
    font-weight: 600;
    color: var(--brand-blue, #0a4a8a);
}

.preview-value[b-s21ubkdpzv] {
    font-size: 14px;
    font-weight: 500;
    color: var(--brand-blue-dark, #06325f);
}

/* ===============================
   Manual Entry Toggle Link
   =============================== */

.manual-entry-toggle[b-s21ubkdpzv] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.manual-entry-toggle-link[b-s21ubkdpzv] {
    background: none;
    border: none;
    color: var(--brand-blue, #0a4a8a);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background-color 0.2s, color 0.2s;
    display: flex;
    align-items: center;
    gap: 5px;
}

    .manual-entry-toggle-link:hover[b-s21ubkdpzv] {
        background-color: rgba(10, 74, 138, 0.08);
        text-decoration: underline;
    }

    .manual-entry-toggle-link:focus[b-s21ubkdpzv] {
        outline: 2px solid var(--brand-blue, #0a4a8a);
        outline-offset: 2px;
    }

.toggle-icon[b-s21ubkdpzv] {
    font-size: 16px;
}

.keyboard-hint[b-s21ubkdpzv] {
    font-size: 10px;
    color: #888;
    font-weight: 400;
}

/* ===============================
   Screen Reader Only
   =============================== */

.sr-only[b-s21ubkdpzv] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ===============================
   Validation Shake Animation
   =============================== */

@keyframes validationShake-b-s21ubkdpzv {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-6px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(6px);
    }
}

.validation-shake[b-s21ubkdpzv] {
    animation: validationShake-b-s21ubkdpzv 0.6s ease-in-out;
}

    .validation-shake .custom-calendar[b-s21ubkdpzv],
    .validation-shake .inline-time-wheel[b-s21ubkdpzv] {
        border-color: #dc3545;
        box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25);
    }

/* Validation error message text */
.validation-error-message[b-s21ubkdpzv] {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 4px;
    text-align: center;
}
/* /Components/DateTimeEntryMobile.razor.rz.scp.css */
/* ===============================
   Mobile DateTime Entry - Stacked Layout
   =============================== */

.datetime-entry-mobile[b-vqkmmm4p9z] {
    width: 100%;
    max-height: 88dvh;
    display: flex;
    flex-direction: column;
}

.mobile-body[b-vqkmmm4p9z] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 0px;
    overflow-y: auto;
    align-items: center;
}

/* ===============================
   Calendar Section
   =============================== */

.calendar-section[b-vqkmmm4p9z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 12px;
    width: 100%;
    max-width: 350px;
}

[b-vqkmmm4p9z] .inline-calendar {
    width: 100%;
}

[b-vqkmmm4p9z] .inline-calendar .rz-datepicker-calendar {
    width: 100%;
}

/* Style the Radzen inline calendar */
[b-vqkmmm4p9z] .inline-calendar .rz-datepicker-calendar {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Make today indicator more faint (when not selected) */
[b-vqkmmm4p9z] .inline-calendar .rz-calendar-today:not(.rz-state-active) {
    border: 1.5px solid rgba(10, 74, 138, 0.35) !important;
    font-weight: 500;
}

[b-vqkmmm4p9z] .inline-calendar .rz-datepicker-calendar table {
    width: 100%;
}

/* ===============================
   Time Section
   =============================== */

.time-section[b-vqkmmm4p9z] {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    width: 100%;
    max-width: 350px;
}

/* ===============================
   Combined Time Picker Button
   =============================== */
.time-tap-target-combined[b-vqkmmm4p9z] {
    display: flex;
    flex-direction: column;
    background: linear-gradient(to bottom, #ffffff, #f8fafc);
    border: 2px solid #ced4da;
    border-radius: 10px;
    padding: 18px 16px 12px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    position: relative;
}

    .time-tap-target-combined:hover[b-vqkmmm4p9z] {
        border-color: var(--brand-blue, #0a4a8a);
        background: linear-gradient(to bottom, #ffffff, #f0f7ff);
        box-shadow: 0 2px 8px rgba(10, 74, 138, 0.15);
    }

    .time-tap-target-combined:active[b-vqkmmm4p9z] {
        background: linear-gradient(to bottom, #f0f7ff, #e5eeff);
    }

.time-combined-label[b-vqkmmm4p9z] {
    position: absolute;
    left: 16px;
    top: 0;
    transform: translateY(-50%);
    font-size: 12px;
    font-weight: 600;
    color: var(--brand-blue, #0a4a8a);
    background: white;
    padding: 0 6px;
    pointer-events: none;
}

.time-combined-row[b-vqkmmm4p9z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.time-combined-hint[b-vqkmmm4p9z] {
    margin: 6px 0 0 0;
    padding-top: 6px;
    border-top: 1px solid #e5e5e5;
    font-size: 11px;
    font-style: italic;
    color: #666;
    text-align: center;
    line-height: 1.3;
}

/* Left icon (clock) */
[b-vqkmmm4p9z] .time-tap-icon-left {
    color: var(--brand-blue, #0a4a8a);
    font-size: 24px !important;
    flex-shrink: 0;
}

/* Right icon (chevron) */
[b-vqkmmm4p9z] .time-tap-icon-right {
    color: #999;
    font-size: 24px !important;
    flex-shrink: 0;
    transition: transform 0.2s, color 0.2s;
}

.time-tap-target-combined:hover[b-vqkmmm4p9z]  .time-tap-icon-right {
    color: var(--brand-blue, #0a4a8a);
    transform: translateX(2px);
}

.time-display-value[b-vqkmmm4p9z] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    flex: 1;
    justify-content: center;
}

.time-value[b-vqkmmm4p9z] {
    font-size: 18px;
    font-weight: 600;
    color: var(--brand-blue-dark, #06325f);
}

.time-placeholder[b-vqkmmm4p9z] {
    font-size: 16px;
    color: #666;
    font-weight: 500;
}

/* Time chip in combined target */
.time-chip[b-vqkmmm4p9z] {
    padding: 3px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #F2F6FF 0%, #E5EEFF 100%);
    color: var(--brand-blue-dark, #06325f);
    border: 1px solid var(--brand-blue, #0a4a8a);
    font-size: 12px;
    font-weight: 500;
    text-transform: capitalize;
}

/* Time chip color variants */
.time-chip.time-morning[b-vqkmmm4p9z] {
    background: linear-gradient(135deg, #FFF9E6 0%, #FFF3CC 100%);
    border-color: #F59E0B;
    color: #92400E;
}

.time-chip.time-midday[b-vqkmmm4p9z],
.time-chip.time-afternoon[b-vqkmmm4p9z] {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    border-color: #F59E0B;
    color: #92400E;
}

.time-chip.time-evening[b-vqkmmm4p9z] {
    background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%);
    border-color: #6366F1;
    color: #312E81;
}

.time-chip.time-midnight[b-vqkmmm4p9z],
.time-chip.time-after-midnight[b-vqkmmm4p9z],
.time-chip.time-before-midnight[b-vqkmmm4p9z],
.time-chip.time-night[b-vqkmmm4p9z] {
    background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%);
    border-color: #4F46E5;
    color: #1E1B4B;
}

.time-chip.time-early-morning[b-vqkmmm4p9z] {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    border-color: #F59E0B;
    color: #92400E;
}

/* ===============================
   Dialog Footer Button Styling
   =============================== */

.mobile-footer[b-vqkmmm4p9z] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    align-items: stretch;
    padding: 12px 0;
    margin-top: 4px;
    width: 100%;
    max-width: 350px;
}

    .mobile-footer .btn-cancel[b-vqkmmm4p9z] {
        background: #e8e8e8;
        color: #555;
        border: none;
        border-radius: var(--field-radius, 12px);
        padding: 10px 24px;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.3;
        cursor: pointer;
        transition: all 0.2s;
        white-space: nowrap;
        flex-shrink: 0;
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .mobile-footer .btn-cancel:hover[b-vqkmmm4p9z] {
            background: #d8d8d8;
            color: #333;
        }

    .mobile-footer[b-vqkmmm4p9z]  .rz-button.rz-button-primary {
        border-radius: var(--field-radius, 12px) !important;
        padding: 10px 24px !important;
        flex-shrink: 1;
        min-width: 0;
        min-height: 40px !important;
    }

    .mobile-footer[b-vqkmmm4p9z]  .rz-button .rz-button-text {
        font-size: 12px !important;
        line-height: 1.3 !important;
    }

/* Mobile: keep side-by-side but smaller */
@media (max-width: 480px) {
    .mobile-footer[b-vqkmmm4p9z] {
        padding: 12px;
        gap: 8px;
    }

        .mobile-footer .btn-cancel[b-vqkmmm4p9z] {
            padding: 8px 16px;
            font-size: 11px;
            line-height: 1.3;
            min-height: 36px;
        }

        .mobile-footer[b-vqkmmm4p9z]  .rz-button.rz-button-primary {
            padding: 8px 16px !important;
            min-height: 36px !important;
        }

        .mobile-footer[b-vqkmmm4p9z]  .rz-button .rz-button-text {
            font-size: 11px !important;
        }
}

/* ===============================
   Mobile Responsive Adjustments
   =============================== */

@media (max-width: 480px) {
    .time-combined-label[b-vqkmmm4p9z] {
        font-size: 11px;
    }

    .time-combined-hint[b-vqkmmm4p9z] {
        font-size: 10px;
    }

    .time-value[b-vqkmmm4p9z] {
        font-size: 16px;
    }

    .time-placeholder[b-vqkmmm4p9z] {
        font-size: 14px;
    }
}
/* /Components/DeleteProfileDialog.razor.rz.scp.css */
.delete-profile-dialog[b-l1jd90hnmp] {
    padding: 20px;
}

.dialog-content[b-l1jd90hnmp] {
    min-height: 200px;
}

.warning-section[b-l1jd90hnmp] {
    text-align: center;
    padding: 20px;
    background-color: #fff5f5;
    border: 2px solid #fee;
    border-radius: 8px;
}

    .warning-section h5[b-l1jd90hnmp] {
        color: #c0392b;
        font-weight: 600;
    }

    .warning-section p[b-l1jd90hnmp] {
        color: #555;
        margin-bottom: 15px;
    }

.warning-list[b-l1jd90hnmp] {
    text-align: left;
    display: inline-block;
    margin: 0;
    padding-left: 20px;
    color: #666;
}

    .warning-list li[b-l1jd90hnmp] {
        margin-bottom: 8px;
    }

.confirmation-section[b-l1jd90hnmp] {
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 8px;
}

    .confirmation-section p[b-l1jd90hnmp] {
        color: #333;
        font-size: 0.95rem;
    }

    .confirmation-section strong[b-l1jd90hnmp] {
        color: #c0392b;
        font-family: monospace;
        font-size: 1.1em;
        padding: 2px 6px;
        background-color: #fee;
        border-radius: 3px;
    }

.dialog-footer[b-l1jd90hnmp] {
    border-top: 1px solid #e0e0e0;
    padding-top: 20px;
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .delete-profile-dialog[b-l1jd90hnmp] {
        padding: 15px;
    }

    .warning-section[b-l1jd90hnmp] {
        padding: 15px;
    }

    .confirmation-section[b-l1jd90hnmp] {
        padding: 12px;
    }
}
/* /Components/FeedbackButton.razor.rz.scp.css */
/* =========================
   Floating Feedback Button
   ========================= */

/* Fixed position bottom-left corner */
.feedback-button-container[b-xgj35ym00k] {
    position: fixed;
    bottom: 12px;
    left: 12px;
    z-index: 100; /* Below InfoCapture dialog (z-index 1000) */
}

.feedback-button[b-xgj35ym00k] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    background: transparent;
    color: #666;
    border: none;
    font-size: 12px;
    font-weight: 400;
    cursor: pointer;
    transition: color 0.2s ease;
}

    .feedback-button:hover[b-xgj35ym00k] {
        color: #1976d2;
        text-decoration: underline;
    }

    .feedback-button:active[b-xgj35ym00k] {
        color: #1565c0;
    }

    .feedback-button i[b-xgj35ym00k] {
        font-size: 12px;
    }

.feedback-label[b-xgj35ym00k] {
    font-size: 12px;
}

/* Mobile responsive - show just icon on small screens */
@media (max-width: 500px) {
    .feedback-button-container[b-xgj35ym00k] {
        bottom: 8px;
        left: 8px;
    }

    .feedback-button[b-xgj35ym00k] {
        padding: 4px;
    }

    .feedback-label[b-xgj35ym00k] {
        display: none;
    }

    .feedback-button i[b-xgj35ym00k] {
        font-size: 11px;
    }
}
/* /Components/FeedbackDialog.razor.rz.scp.css */
/* =========================
   FeedbackDialog
   ========================= */

.feedback-dialog[b-0erhl7jd2a] {
    padding: 0;
}

/* =========================
   Success State
   ========================= */

.success-content[b-0erhl7jd2a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 24px;
    text-align: center;
}

.success-icon[b-0erhl7jd2a] {
    font-size: 64px;
    color: #22c55e;
    margin-bottom: 16px;
}

.success-content h3[b-0erhl7jd2a] {
    margin: 0 0 12px 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary, var(--brand-blue-dark));
}

.success-message[b-0erhl7jd2a] {
    margin: 0 0 24px 0;
    font-size: 15px;
    color: #555;
    line-height: 1.5;
}

.success-footer[b-0erhl7jd2a] {
    margin-top: 8px;
}

/* =========================
   Dialog Body
   ========================= */

.dialog-body[b-0erhl7jd2a] {
    padding: 16px 20px;
    max-height: 60vh;
    overflow-y: auto;
}

/* =========================
   Purpose Statement
   ========================= */

.purpose-statement[b-0erhl7jd2a] {
    margin-bottom: 14px;
    padding: 10px 14px;
    background-color: #f0f7ff;
    border: 1px solid #d0e3f7;
    border-radius: 8px;
}

.purpose-text[b-0erhl7jd2a] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--brand-blue, var(--brand-blue));
}

    .purpose-text i[b-0erhl7jd2a] {
        font-size: 16px;
        flex-shrink: 0;
    }

.purpose-note[b-0erhl7jd2a] {
    margin: 0;
    font-size: 13px;
    color: #555;
    line-height: 1.5;
    padding-left: 26px;
}

    .purpose-note strong[b-0erhl7jd2a] {
        color: #333;
    }

    .purpose-note a[b-0erhl7jd2a] {
        color: var(--brand-blue, var(--brand-blue));
        text-decoration: underline;
    }

        .purpose-note a:hover[b-0erhl7jd2a] {
            color: #1e4a7a;
        }

/* Error Message */
.error-message[b-0erhl7jd2a] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #dc2626;
    font-size: 14px;
}

    .error-message i[b-0erhl7jd2a] {
        font-size: 16px;
        flex-shrink: 0;
    }

/* =========================
   Sections
   ========================= */

.section[b-0erhl7jd2a] {
    margin-bottom: 12px;
}

.section-label[b-0erhl7jd2a] {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, var(--brand-blue-dark));
    margin-bottom: 8px;
}

.optional-label[b-0erhl7jd2a] {
    font-weight: 400;
    color: #888;
    font-size: 12px;
}

/* =========================
   Category Selection
   ========================= */

.category-options[b-0erhl7jd2a] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.category-option[b-0erhl7jd2a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 6px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #fff;
    text-align: center;
}

    .category-option i[b-0erhl7jd2a] {
        font-size: 18px;
        color: #6b7280;
        transition: color 0.2s ease;
    }

    .category-option span[b-0erhl7jd2a] {
        font-size: 11px;
        font-weight: 500;
        color: #374151;
    }

    .category-option:hover[b-0erhl7jd2a] {
        border-color: var(--brand-blue, var(--brand-blue));
        background-color: #f8fafc;
    }

    .category-option.selected[b-0erhl7jd2a] {
        border-color: var(--brand-blue, var(--brand-blue));
        background-color: #eff6ff;
    }

        .category-option.selected i[b-0erhl7jd2a] {
            color: var(--brand-blue, var(--brand-blue));
        }

    .category-option.invalid[b-0erhl7jd2a] {
        border-color: #dc3545;
    }

/* =========================
   Fields Layout
   ========================= */

.fields-row[b-0erhl7jd2a] {
    display: flex;
    flex-direction: column;
}

.field-description[b-0erhl7jd2a] {
    min-width: 0;
}

.field-email-recaptcha[b-0erhl7jd2a] {
    display: flex;
    flex-direction: column;
}

/* =========================
   Float Field Container
   ========================= */

.float-field[b-0erhl7jd2a] {
    position: relative;
    width: 100%;
    margin-bottom: 8px;
}

/* Input Fields */
.float-input[b-0erhl7jd2a] {
    width: 100%;
    height: auto;
    min-height: 48px;
    padding: 20px 12px 8px 12px;
    font-size: 15px;
    line-height: 1.4;
    color: var(--text-primary, var(--brand-blue-dark));
    border: 1.5px solid var(--brand-blue, var(--brand-blue));
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-family: inherit;
}

    .float-input:focus[b-0erhl7jd2a] {
        border-color: var(--brand-blue, var(--brand-blue));
        box-shadow: 0 0 0 3px rgba(41, 99, 168, 0.1);
        outline: none;
    }

    .float-input[b-0erhl7jd2a]::placeholder {
        color: transparent;
        opacity: 0;
    }

    .float-input:disabled[b-0erhl7jd2a] {
        background-color: #f5f5f5;
        cursor: not-allowed;
        opacity: 0.7;
    }

/* Description textarea specific */
.description-input[b-0erhl7jd2a] {
    min-height: 80px;
    resize: vertical;
}

/* Floating Label */
.float-label[b-0erhl7jd2a] {
    position: absolute;
    left: 14px;
    top: 24px;
    transform: translateY(-50%);
    font-size: 15px;
    color: var(--hint-text, #999999);
    background: #fff;
    padding: 0 4px;
    pointer-events: none;
    transition: top 0.18s ease, font-size 0.18s ease, transform 0.18s ease, color 0.18s ease;
    z-index: 1;
}

/* Float label up when field has focus or value */
.float-input:focus + .float-label[b-0erhl7jd2a],
.float-field.has-value .float-label[b-0erhl7jd2a] {
    top: 0;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--brand-blue, var(--brand-blue));
    font-weight: 500;
}

/* Invalid state */
.float-field.invalid .float-input[b-0erhl7jd2a] {
    border-color: #dc3545;
}

.float-field.invalid .float-label[b-0erhl7jd2a] {
    color: #dc3545;
}

.field-error[b-0erhl7jd2a] {
    display: block;
    color: #dc3545;
    font-size: 12px;
    margin-top: 4px;
    padding-left: 14px;
}

/* =========================
   reCAPTCHA Section
   ========================= */

.recaptcha-section[b-0erhl7jd2a] {
    margin: 6px 0;
    display: flex;
    flex-direction: column;
}

.recaptcha-widget[b-0erhl7jd2a] {
    min-height: 78px;
}

.recaptcha-section .field-error[b-0erhl7jd2a] {
    padding-left: 0;
    margin-top: 8px;
}

/* =========================
   Bottom Info Row
   ========================= */

.bottom-info-row[b-0erhl7jd2a] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}

.page-info[b-0erhl7jd2a] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background-color: #f5f5f5;
    border-radius: 6px;
    font-size: 12px;
    color: #666;
}

    .page-info i[b-0erhl7jd2a] {
        color: #888;
        font-size: 12px;
        flex-shrink: 0;
    }

.expectations-note[b-0erhl7jd2a] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 12px;
    color: #888;
    font-style: italic;
}

    .expectations-note i[b-0erhl7jd2a] {
        font-size: 12px;
        color: #aaa;
        flex-shrink: 0;
        margin-top: 1px;
    }

/* =========================
   Dialog Footer
   ========================= */

.dialog-footer[b-0erhl7jd2a] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 12px 20px;
    border-top: 1px solid #e0e0e0;
    background-color: #fafafa;
}

    .dialog-footer[b-0erhl7jd2a]  .rz-button.rz-light {
        background: white;
        color: var(--brand-blue, var(--brand-blue));
        border: 1px solid var(--brand-blue, var(--brand-blue));
        font-weight: 500;
    }

        .dialog-footer[b-0erhl7jd2a]  .rz-button.rz-light:hover {
            background: var(--brand-blue, var(--brand-blue));
            color: white;
        }

/* =========================
   Responsive
   ========================= */

/* Narrow screens */
@media (max-width: 520px) {
    .category-options[b-0erhl7jd2a] {
        grid-template-columns: 1fr 1fr;
    }

    .category-option[b-0erhl7jd2a] {
        flex-direction: row;
        justify-content: flex-start;
        gap: 8px;
        padding: 8px 10px;
    }

        .category-option i[b-0erhl7jd2a] {
            font-size: 16px;
        }

        .category-option span[b-0erhl7jd2a] {
            font-size: 12px;
        }
}
/* /Components/FindMyTripComponent.razor.rz.scp.css */
/* =====================================================
   Find My Trip Component Styles
   ===================================================== */

.find-my-trip-container[b-td2hvwu5eh] {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 16px;
}

/* =====================================================
   Search Form Styles
   ===================================================== */

.search-form-card[b-td2hvwu5eh] {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.form-header[b-td2hvwu5eh] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

    .form-header h3[b-td2hvwu5eh] {
        margin: 0;
        font-size: 1.5rem;
        color: #222;
    }

.form-description[b-td2hvwu5eh] {
    color: #666;
    margin-bottom: 20px;
    font-size: 0.95rem;
}

/* Form Fields - Native Input Styling */
.form-fields[b-td2hvwu5eh] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-field[b-td2hvwu5eh] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .form-field label[b-td2hvwu5eh] {
        font-size: 0.85rem;
        font-weight: 500;
        color: #555;
    }

.form-input[b-td2hvwu5eh] {
    width: 100%;
    padding: 12px 14px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

    .form-input:focus[b-td2hvwu5eh] {
        outline: none;
        border-color: var(--brand-blue);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-blue) 15%, transparent);
    }

    .form-input:disabled[b-td2hvwu5eh] {
        background-color: #f5f5f5;
        cursor: not-allowed;
    }

    .form-input[b-td2hvwu5eh]::placeholder {
        color: #999;
    }

/* Action Buttons */
.action-buttons[b-td2hvwu5eh] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 8px;
}

.btn-reset[b-td2hvwu5eh] {
    padding: 10px 20px;
    font-size: 0.95rem;
    font-weight: 500;
    border: 2px solid #6c757d;
    border-radius: 6px;
    background: transparent;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-reset:hover:not(:disabled)[b-td2hvwu5eh] {
        background: rgba(108, 117, 125, 0.1);
    }

    .btn-reset:disabled[b-td2hvwu5eh] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.btn-search[b-td2hvwu5eh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    font-size: 0.95rem;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    background: var(--brand-blue);
    color: white;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-search:hover:not(:disabled)[b-td2hvwu5eh] {
        background: var(--brand-blue-dark);
    }

    .btn-search:disabled[b-td2hvwu5eh],
    .btn-search.disabled[b-td2hvwu5eh] {
        background: color-mix(in srgb, var(--brand-blue) 50%, white);
        cursor: not-allowed;
    }

.spinner-small[b-td2hvwu5eh] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-td2hvwu5eh 0.8s linear infinite;
}

.round-trip-note[b-td2hvwu5eh] {
    color: #666;
    font-size: 0.8rem;
    margin-top: 8px;
    margin-bottom: 0;
    padding: 8px 10px;
    background: #f8f9fa;
    border-radius: 4px;
}

.recaptcha-container[b-td2hvwu5eh] {
    display: flex;
    justify-content: center;
    margin: 8px 0;
}

.recaptcha-widget[b-td2hvwu5eh] {
    min-height: 78px;
}

/* Lookup Link - Prominent Style */
.lookup-link-prominent[b-td2hvwu5eh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f4fd 100%);
    border: 1px solid var(--brand-blue);
    border-radius: 6px;
    color: var(--brand-blue);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    padding: 10px 16px;
    margin-bottom: 16px;
    transition: all 0.2s;
    width: 100%;
    justify-content: center;
}

    .lookup-link-prominent:hover[b-td2hvwu5eh] {
        background: linear-gradient(135deg, #e0efff 0%, #d8ecfc 100%);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

/* =====================================================
   Loading State
   ===================================================== */

.loading-container[b-td2hvwu5eh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 60px 20px;
    color: #555;
    font-size: 1rem;
}

.loading-spinner[b-td2hvwu5eh] {
    width: 40px;
    height: 40px;
    border: 4px solid #e0e0e0;
    border-top: 4px solid var(--brand-blue);
    border-radius: 50%;
    animation: spin-b-td2hvwu5eh 1s linear infinite;
}

@keyframes spin-b-td2hvwu5eh {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* =====================================================
   Results Header
   ===================================================== */

.results-header[b-td2hvwu5eh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

    .results-header h3[b-td2hvwu5eh] {
        margin: 0;
        font-size: 1.25rem;
        color: #222;
    }

.back-button[b-td2hvwu5eh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: transparent;
    border: 2px solid var(--brand-blue);
    border-radius: 50px;
    color: var(--brand-blue);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

    .back-button:hover[b-td2hvwu5eh] {
        background: color-mix(in srgb, var(--brand-blue) 10%, transparent);
    }

/* =====================================================
   Reservation Cards
   ===================================================== */

.reservation-list[b-td2hvwu5eh] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.reservation-item[b-td2hvwu5eh] {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid #e0e0e0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    padding: 16px;
    background: #fff;
}

    .reservation-item.canceled[b-td2hvwu5eh] {
        opacity: 0.85;
        background: linear-gradient(135deg, #fff 0%, #fff5f5 100%);
        border-color: #f5c6cb;
    }

.canceled-watermark[b-td2hvwu5eh] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    font-weight: 900;
    color: rgba(220, 53, 69, 0.25);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    pointer-events: none;
    white-space: nowrap;
    z-index: 1;
    user-select: none;
}

.trip-direction-label[b-td2hvwu5eh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: var(--brand-blue-50);
    color: var(--brand-blue);
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 12px;
    width: fit-content;
}

.reservation-details[b-td2hvwu5eh] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    z-index: 2;
}

.detail-line[b-td2hvwu5eh] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .detail-line.date-time[b-td2hvwu5eh] {
        font-weight: 600;
        color: #222;
    }

    .detail-line.confirmation[b-td2hvwu5eh] {
        font-size: 0.95rem;
        color: #444;
    }

    .detail-line.pickup-address[b-td2hvwu5eh],
    .detail-line.dropoff-address[b-td2hvwu5eh] {
        font-size: 0.95rem;
        color: #555;
        align-items: flex-start;
    }

.address-content[b-td2hvwu5eh] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.address-label[b-td2hvwu5eh] {
    font-size: 0.7rem;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.address-text[b-td2hvwu5eh] {
    display: flex;
    align-items: center;
    color: #333;
}

.location-indicator[b-td2hvwu5eh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 4px;
}

.location-dot[b-td2hvwu5eh] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pickup-dot[b-td2hvwu5eh] {
    background-color: var(--brand-blue);
    border: 2px solid var(--brand-blue-dark);
}

.dropoff-dot[b-td2hvwu5eh] {
    background-color: var(--brand-blue);
    border: 2px solid var(--brand-blue-dark);
}

.location-line[b-td2hvwu5eh] {
    width: 2px;
    height: 20px;
    background-image: linear-gradient(to bottom, #666 50%, transparent 50%);
    background-size: 2px 6px;
    background-repeat: repeat-y;
    margin-top: 2px;
}

.detail-line.meta-info[b-td2hvwu5eh] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.9rem;
    color: #555;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #f0f0f0;
}

.service-type-image[b-td2hvwu5eh] {
    width: 50px;
    height: 28px;
    object-fit: contain;
    border-radius: 3px;
}

.service-name[b-td2hvwu5eh] {
    font-weight: 500;
    color: #333;
}

.meta-separator[b-td2hvwu5eh] {
    color: #ccc;
    font-size: 0.8rem;
}

.passenger-count[b-td2hvwu5eh] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: #666;
}

.pax-bags-count[b-td2hvwu5eh] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: #666;
}

.trip-cost[b-td2hvwu5eh] {
    font-weight: 600;
    color: #2ecc71;
}

/* Private Fare Badge - for hidden corporate rates */
.private-fare-badge[b-td2hvwu5eh] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px solid #dee2e6;
    border-radius: 4px;
    color: #495057;
    font-size: 0.75rem;
    font-weight: 500;
}

    .private-fare-badge i[b-td2hvwu5eh] {
        color: #6c757d;
        font-size: 0.7rem;
    }

/* =====================================================
   Action Buttons
   ===================================================== */

.reservation-actions[b-td2hvwu5eh] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
    position: relative;
    z-index: 2;
}

.action-btn[b-td2hvwu5eh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 0.9rem;
    border: 2px solid var(--brand-blue);
    border-radius: 50px;
    background: transparent;
    color: var(--brand-blue);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

    .action-btn:hover[b-td2hvwu5eh] {
        background-color: color-mix(in srgb, var(--brand-blue) 10%, transparent);
    }

    .action-btn:disabled[b-td2hvwu5eh] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.action-cancel:hover[b-td2hvwu5eh] {
    background-color: rgba(220, 53, 69, 0.1);
}

.action-view:hover[b-td2hvwu5eh] {
    background-color: rgba(40, 167, 69, 0.1);
}

.action-email:hover[b-td2hvwu5eh] {
    background-color: rgba(111, 66, 193, 0.1);
}

.btn-label[b-td2hvwu5eh] {
    display: inline-block;
    line-height: 1;
}

/* =====================================================
   Not Found State
   ===================================================== */

.not-found-container[b-td2hvwu5eh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 60px 20px;
    text-align: center;
}

    .not-found-container h3[b-td2hvwu5eh] {
        margin: 0;
        color: #dc3545;
    }

    .not-found-container p[b-td2hvwu5eh] {
        color: #666;
        max-width: 400px;
        margin: 0;
    }

.link-to-account-section[b-td2hvwu5eh] {
    margin-top: 20px;
}

/* =====================================================
   Responsive Styles
   ===================================================== */

@media (max-width: 600px) {
    .find-my-trip-container[b-td2hvwu5eh] {
        padding: 12px;
    }

    .search-form-card[b-td2hvwu5eh] {
        padding: 16px;
    }

    .form-header h3[b-td2hvwu5eh] {
        font-size: 1.25rem;
    }

    .action-buttons[b-td2hvwu5eh] {
        flex-direction: column;
    }

    .btn-reset[b-td2hvwu5eh],
    .btn-search[b-td2hvwu5eh] {
        width: 100%;
    }

    .results-header[b-td2hvwu5eh] {
        flex-direction: column;
        align-items: flex-start;
    }

    .reservation-item[b-td2hvwu5eh] {
        padding: 12px;
    }

    .reservation-actions[b-td2hvwu5eh] {
        justify-content: center;
    }

    .action-btn[b-td2hvwu5eh] {
        flex: 1 1 45%;
        justify-content: center;
        min-width: 120px;
    }

    .detail-line[b-td2hvwu5eh] {
        font-size: 0.9rem;
    }

    .canceled-watermark[b-td2hvwu5eh] {
        font-size: 2rem;
    }

    .trip-direction-label[b-td2hvwu5eh] {
        font-size: 0.8rem;
    }
}

@media (max-width: 400px) {
    .action-btn[b-td2hvwu5eh] {
        flex: 1 1 100%;
        padding: 10px 12px;
    }

    .recaptcha-container[b-td2hvwu5eh] {
        transform: scale(0.9);
        transform-origin: center;
    }
}
/* /Components/FlightComponent.razor.rz.scp.css */
/* ===============================
   Flight Info � Layout & Containers
   =============================== */

.flight-info-content[b-5fw1n9iaex] {
    width: 100%;
    max-width: 100%; /* Changed from 460px to match other components */
    margin: 0 auto;
    padding: 5px 5px 0;
    text-align: center;
}

.input-container[b-5fw1n9iaex] {
    position: relative;
    margin: 6px 0;
    width: 100%;
}

.input-wrapper[b-5fw1n9iaex] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.input-row[b-5fw1n9iaex] {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex-wrap: nowrap;
}

.input-column[b-5fw1n9iaex] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: auto;
}

/* ===============================
   Floating Picker (Airline / Flight # / Trip Type)
   =============================== */

.float-field .selected-picker[b-5fw1n9iaex] {
    position: relative;
    z-index: 1;
    min-height: var(--field-min-h);
    padding: var(--field-pad-top) var(--field-pad-x) var(--field-pad-bot) var(--field-pad-x);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    color: var(--brand-blue);
    font-size: var(--field-font-size);
    line-height: var(--field-line);
    border: 1px solid var(--field-border) !important;
    border-radius: var(--field-radius);
    background: #fff;
    box-sizing: border-box;
    cursor: pointer;
}

.float-field:focus-within .selected-picker[b-5fw1n9iaex] {
    border-color: var(--field-focus) !important;
    box-shadow: 0 0 0 .25rem var(--field-ring) !important;
    outline: 0;
}

.float-label[b-5fw1n9iaex] {
    z-index: 2;
}

.float-field.always-float .float-label[b-5fw1n9iaex] {
    top: var(--label-float-top);
    transform: none;
    font-size: var(--label-float);
    opacity: .85;
}

/* Content layout inside picker */
.airline-picker .picker-value[b-5fw1n9iaex],
.flightnum-picker .picker-value[b-5fw1n9iaex],
.triptype-picker .picker-value[b-5fw1n9iaex] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.airline-picker .airline-code[b-5fw1n9iaex],
.flightnum-picker .flightnum[b-5fw1n9iaex] {
    font-weight: 500;
    white-space: nowrap;
}

.airline-picker .airline-name[b-5fw1n9iaex],
.flightnum-picker .flightnum[b-5fw1n9iaex] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.airline-picker .dash[b-5fw1n9iaex],
.flightnum-picker .dash[b-5fw1n9iaex] {
    opacity: .6;
}

.flightnum-picker .chevron[b-5fw1n9iaex],
.airline-picker .chevron[b-5fw1n9iaex],
.triptype-picker .chevron[b-5fw1n9iaex] {
    font-size: 12px;
    margin-left: 6px;
    color: #666;
}

/* Float label when focused or has a value */
.float-field:focus-within .float-label[b-5fw1n9iaex],
.float-field.has-value .float-label[b-5fw1n9iaex] {
    top: var(--label-float-top);
    transform: none;
    font-size: var(--label-float);
    opacity: .85;
}

/* ===============================
   Row 1: Date + Time (grid)
   =============================== */

.flight-top[b-5fw1n9iaex] {
    display: grid;
    grid-template-columns: minmax(150px,1fr) minmax(120px,1fr);
    gap: 1px;
    justify-content: center;
    margin-bottom: 10px; /* Match other field spacing */
}


@media (max-width: 360px) {
    .flight-row-airline[b-5fw1n9iaex] {
        grid-template-columns: 1fr;
    }
}

/* Make inputs/pickers fill their grid cells */
.flight-top .input-column[b-5fw1n9iaex],
.flight-row-airline .input-column[b-5fw1n9iaex] {
    width: 100%;
}

.airline-picker .selected-picker[b-5fw1n9iaex],
.flightnum-picker .selected-picker[b-5fw1n9iaex],
.triptype-picker .selected-picker[b-5fw1n9iaex] {
    width: 100%;
}

/* Slightly tighter picker padding on mobile */
@media (max-width: 500px) {
    .float-field .selected-picker[b-5fw1n9iaex] {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* ===============================
   Trip Type Dropdown Menu
   =============================== */

.triptype-picker[b-5fw1n9iaex] {
    position: relative;
}

    .triptype-picker .picker-menu[b-5fw1n9iaex] {
        position: absolute;
        left: 0;
        right: 0;
        top: calc(100% + 4px);
        background: #fff;
        border: 1px solid var(--field-border);
        border-radius: var(--field-radius);
        box-shadow: 0 4px 12px rgba(0,0,0,.12);
        list-style: none;
        padding: 4px 0;
        margin: 0;
        z-index: 1006;
        color: var(--brand-blue);
    }

        .triptype-picker .picker-menu li[b-5fw1n9iaex] {
            padding: 8px 12px;
            cursor: pointer;
            color: var(--brand-blue);
        }

            .triptype-picker .picker-menu li:hover[b-5fw1n9iaex] {
                background: #f8f9fa;
            }

/* ===============================
   Modals & Lists
   =============================== */

.modal-backdrop[b-5fw1n9iaex] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 1005;
    display: flex;
    justify-content: center;
    align-items: center;
}

.flight-info-modal-content[b-5fw1n9iaex] {
    background: #fff;
    border-radius: 8px;
    width: 280px;
    max-height: 80vh;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
    animation: fadeIn-b-5fw1n9iaex .3s ease-in-out;
    display: flex;
    flex-direction: column;
}

.flight-info-airline-modal-content[b-5fw1n9iaex] {
    background: #fff;
    border-radius: 8px;
    width: 400px;
    max-height: 80vh;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
    animation: fadeIn-b-5fw1n9iaex .3s ease-in-out;
    display: flex;
    flex-direction: column;
}

.modal-header[b-5fw1n9iaex] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid #ced4da;
}

    .modal-header h3[b-5fw1n9iaex] {
        margin: 0;
        font-size: 1em;
        color: var(--brand-blue);
    }

.close-button[b-5fw1n9iaex] {
    background: none;
    border: none;
    font-size: 1em;
    cursor: pointer;
    padding: 0;
}

.modal-body[b-5fw1n9iaex] {
    padding: 10px;
    font-size: 1em;
    line-height: 1.4;
}

.airline-search-box[b-5fw1n9iaex] {
    width: 100%;
    padding: 8px 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
}

.airline-list[b-5fw1n9iaex] {
    list-style: none;
    padding: 0;
    margin: 0 6px 6px 6px;
    max-height: 60vh;
    overflow-y: auto;
    width: calc(100% - 12px);
}

    .airline-list li[b-5fw1n9iaex] {
        padding: 5px 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
        color: var(--brand-blue);
        font-size: 1em;
    }

        .airline-list li:hover[b-5fw1n9iaex] {
            background-color: #f8f9fa;
        }

.airport-section-header[b-5fw1n9iaex],
.airline-section-header[b-5fw1n9iaex] {
    display: block;
    text-align: center;
    color: white !important;
    margin: 4px 0;
    font-size: .6em !important;
    font-weight: 700;
    background-color: var(--brand-blue-dark) !important;
}

.airport-section-header[b-5fw1n9iaex] {
    all: unset;
    display: block;
    text-align: center;
    color: #666;
    margin: 4px 0;
    font-size: .6em;
    font-weight: 500;
}

.no-flight-option[b-5fw1n9iaex] {
    text-align: center;
    margin-top: 8px;
}

    .no-flight-option a[b-5fw1n9iaex] {
        color: var(--brand-blue-light, var(--brand-blue-light));
        text-decoration: underline;
        font-size: .9em;
        cursor: pointer;
    }

        .no-flight-option a:hover[b-5fw1n9iaex] {
            color: var(--brand-blue-dark, var(--brand-blue-dark));
        }

/* ===============================
   Flights modal + grid
   =============================== */

.flights-modal-content[b-5fw1n9iaex] {
    background: #fff;
    padding: 5px;
    border-radius: 8px;
    width: 95%;
    max-width: 500px;
    box-shadow: 0 0 20px rgba(0,0,0,.3);
}

.flights-modal-body[b-5fw1n9iaex] {
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: auto;
    line-height: 1.2; /* was 2; huge rows */
}

.flights-grid[b-5fw1n9iaex] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* predictable columns */
    margin-top: 12px;
}

    /* Header: brand dark blue with white text, sticky */
    .flights-grid thead th[b-5fw1n9iaex] {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--brand-blue-dark);
        color: #fff;
        border-bottom: 1px solid #ccc;
        text-align: center;
        padding: .12rem .28rem;
        font-size: .78rem;
        line-height: 1.05;
    }

    /* Body cells: brand blue text */
    .flights-grid tbody td[b-5fw1n9iaex] {
        color: var(--brand-blue);
        padding: 5px 8px; /* Increased from .12rem .28rem to match airline list */
        line-height: 1.4; /* Improved from 2.05 for better readability */
        vertical-align: middle;
        font-size: .9rem !important;
        word-wrap: break-word;
        overflow-wrap: anywhere;
    }

    .flights-grid tbody tr:hover[b-5fw1n9iaex] {
        background-color: #eaf1fb;
        cursor: pointer;
        transition: background-color .2s ease;
    }

/* ===== Mobile compacting ===== */
@media (max-width: 430px) {
    /* Make it truly fit on small phones */
    .flights-grid[b-5fw1n9iaex] {
        width: 100%;
    }

        .flights-grid thead th[b-5fw1n9iaex],
        .flights-grid tbody td[b-5fw1n9iaex] {
            padding: 6px 4px; /* Increased from .30rem .14rem for better mobile spacing */
            font-size: .7rem;
            line-height: 1.3; /* Improved from 2.05 for better readability */
        }

        /* Column widths (sum = 100%) */
        /* 1: Airline  2: From  3: To  4: Flt#  5: Departs  6: Arrives */
        .flights-grid th:nth-child(1)[b-5fw1n9iaex],
        .flights-grid td:nth-child(1)[b-5fw1n9iaex] {
            width: 12%;
        }
        /* narrower airline */
        .flights-grid th:nth-child(2)[b-5fw1n9iaex],
        .flights-grid td:nth-child(2)[b-5fw1n9iaex] {
            width: 12%;
            text-align: center;
            white-space: nowrap;
        }

        .flights-grid th:nth-child(3)[b-5fw1n9iaex],
        .flights-grid td:nth-child(3)[b-5fw1n9iaex] {
            width: 12%;
            text-align: center;
            white-space: nowrap;
        }

        .flights-grid th:nth-child(4)[b-5fw1n9iaex],
        .flights-grid td:nth-child(4)[b-5fw1n9iaex] {
            width: 20%;
            text-align: center;
            white-space: nowrap;
        }

        .flights-grid th:nth-child(5)[b-5fw1n9iaex],
        .flights-grid td:nth-child(5)[b-5fw1n9iaex] {
            width: 20%;
            text-align: right;
            white-space: nowrap;
            font-variant-numeric: tabular-nums;
        }

        .flights-grid th:nth-child(6)[b-5fw1n9iaex],
        .flights-grid td:nth-child(6)[b-5fw1n9iaex] {
            width: 8%;
            text-align: right;
            white-space: nowrap;
            font-variant-numeric: tabular-nums;
        }

        /* Airline: smaller font + allow 2 lines */
        .flights-grid td:nth-child(1)[b-5fw1n9iaex] {
            white-space: normal;
            word-break: break-word;
            font-size: .64rem;
            line-height: 1.3; /* Improved from 2.05 */
        }

        /* Keep rows tappable but with better spacing */
        .flights-grid tbody tr > td[b-5fw1n9iaex] {
            padding-top: 6px; /* Increased from .14rem */
            padding-bottom: 6px; /* Increased from .14rem */
        }
}

/* ===============================
   Misc / Helpers
   =============================== */

.help-link[b-5fw1n9iaex] {
    margin-left: 8px;
    color: var(--brand-blue-light, var(--brand-blue-light));
    text-decoration: underline;
    cursor: pointer;
    font-size: .9rem;
    line-height: 1;
    margin-top: 2px;
}

    .help-link:hover[b-5fw1n9iaex] {
        color: var(--brand-blue-dark, var(--brand-blue-dark));
    }

.error-message[b-5fw1n9iaex] {
    color: #dc3545;
    font-size: 1em;
    margin-top: 8px;
    text-align: center;
}

hr[b-5fw1n9iaex] {
    margin: .8rem 0;
    color: inherit;
    border: 0;
    border-top: var(--bs-border-width) solid;
    opacity: .25;
}

@keyframes fadeIn-b-5fw1n9iaex {
    from {
        opacity: 0;
        transform: scale(.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===============================
   Brand text colors on inputs + topline
   =============================== */

.flight-info-content input[b-5fw1n9iaex],
.flight-info-content select[b-5fw1n9iaex],
.flight-info-content textarea[b-5fw1n9iaex] {
    color: var(--brand-blue);
    caret-color: var(--brand-blue);
}

    .flight-info-content input[b-5fw1n9iaex]::placeholder,
    .flight-info-content textarea[b-5fw1n9iaex]::placeholder {
        color: var(--brand-blue);
        opacity: .6;
    }

.float-field .selected-picker[b-5fw1n9iaex] {
    color: var(--brand-blue);
}

.flight-topline[b-5fw1n9iaex] {
    color: var(--brand-gold);
    font-weight: 600;
}
/* === Time Picker Modal (non-iOS path) === */
.timepicker-overlay[b-5fw1n9iaex] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(1px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4000; /* above everything */
}

.timepicker-modal[b-5fw1n9iaex] {
    width: min(92vw, 380px);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0,0,0,.20);
    padding: 16px;
}

.timepicker-header[b-5fw1n9iaex] {
    font-weight: 600;
    font-size: 1.05rem;
    margin-bottom: 10px;
}

.timepicker-row[b-5fw1n9iaex] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}

.timepicker-col label[b-5fw1n9iaex] {
    display: block;
    font-size: .85rem;
    margin-bottom: 6px;
    color: #444;
}

.timepicker-col select[b-5fw1n9iaex] {
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background: #fff;
    font-size: 1rem;
}

    .timepicker-col select:focus[b-5fw1n9iaex] {
        outline: none;
        border-color: var(--brand-blue, var(--brand-blue));
        box-shadow: 0 0 0 3px rgba(66,133,244,.15);
    }

.timepicker-actions[b-5fw1n9iaex] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

    .timepicker-actions .btn-primary[b-5fw1n9iaex],
    .timepicker-actions .btn-secondary[b-5fw1n9iaex] {
        border-radius: 8px;
        padding: 8px 14px;
        font-size: .95rem;
        border: 1px solid transparent;
        cursor: pointer;
    }

    .timepicker-actions .btn-primary[b-5fw1n9iaex] {
        background: var(--brand-blue, var(--brand-blue));
        color: #fff;
        border-color: var(--brand-blue, var(--brand-blue));
    }

    .timepicker-actions .btn-secondary[b-5fw1n9iaex] {
        background: #fff;
        color: var(--brand-blue, var(--brand-blue));
        border-color: var(--brand-blue, var(--brand-blue));
    }

/* Make the readonly time field look clickable on the custom (non-iOS) path */
#FlightTime[readonly][b-5fw1n9iaex] {
    cursor: pointer;
}

/* Responsive tweaks */
@media (max-width: 480px) {
    .timepicker-modal[b-5fw1n9iaex] {
        width: calc(100vw - 24px);
    }

    .timepicker-row[b-5fw1n9iaex] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .timepicker-modal[b-5fw1n9iaex] {
        transition: none;
    }
}
/* Placeholder tint for non-iOS readonly input */
#FlightTime[readonly][b-5fw1n9iaex]::placeholder {
    color: #9ca3af; /* neutral-400 */
    opacity: 1; /* ensure visible in Safari/Edge */
}

/* Small hint under native iOS input (only when empty) */
.input-hint[b-5fw1n9iaex] {
    margin-top: 4px;
    font-size: .85rem;
    color: #9ca3af;
}
/* Applies when size>1 turns <select> into a listbox */
.timepicker-col select[size][b-5fw1n9iaex] {
    /* Optional: consistent height based on rows; browsers honor `size` first */
    --row-height: 2rem;
    height: calc(var(--row-height) * 8); /* match DropdownRows (8) */
    min-width: 100%;
    overflow: auto;
}

    .timepicker-col select[size]:focus[b-5fw1n9iaex] {
        outline: none;
        border-color: var(--brand-blue, var(--brand-blue));
        box-shadow: 0 0 0 3px rgba(66,133,244,.15);
    }

.timepicker-col select[b-5fw1n9iaex] {
    width: 100%;
    min-width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background: #fff;
    font-size: 1rem;
}

    .timepicker-col select:focus[b-5fw1n9iaex] {
        outline: none;
        border-color: var(--brand-blue, var(--brand-blue));
        box-shadow: 0 0 0 3px rgba(66,133,244,.15);
    }




/* ==============================================================================
   NOTE: This component now uses the reusable .section-frame and .frame-heading 
   classes from site.css for the bordered flight info section with label.
   
   The markup uses:
   - <div class="section-frame"> for the container
   - <span class="frame-heading"> for the label on the border
   
   Colors defined in site.css:
   - Frame background: lightcyan
   - Frame heading background: powderblue
   - Border: var(--brand-blue)
   ============================================================================== */


/* Small instruction line above pickup */
.address-section-header[b-5fw1n9iaex] {
    font-size: .9rem;
    color: #555;
    margin-bottom: 8px;
}

/* Keep each address on its own row */
.address-row[b-5fw1n9iaex] {
    display: block;
}


/* Ensure the wrapper is positioned for floating labels */
.float-field[b-5fw1n9iaex] {
    position: relative;
}

    /* Make date/time tall enough and leave room for the floating label */
    .float-field input[type="date"][b-5fw1n9iaex],
    .float-field input[type="time"][b-5fw1n9iaex] {
        height: 56px; /* was too short,  */
        line-height: 56px;
        padding-top: 18px; /* room for the label when not floated */
        padding-bottom: 8px;
        padding-left: 12px; /* consistent text inset */
    }

    /* Floating label baseline position and behavior */
    .float-field .float-label[b-5fw1n9iaex] {
        position: absolute;
        left: 12px;
        top: 14px; /* sits inside the input when empty */
        pointer-events: none;
        transition: top .15s ease, font-size .15s ease;
        background: #fff; /* mask input border/text when floated */
        padding: 0 4px;
        z-index: 1; /* keep it above the input text */
    }

    /* When there is a value OR the field is focused, float the label up */
    .float-field.has-value .float-label[b-5fw1n9iaex],
    .float-field:focus-within .float-label[b-5fw1n9iaex] {
        top: 4px;
        font-size: 12px; /* shrink a bit so it doesn't overlap */
    }


    /* Float label support for text inputs (Flight #) */
    .float-field input[type="text"][b-5fw1n9iaex],
    .float-field input:not([type])[b-5fw1n9iaex] {
        height: 56px !important;
        line-height: 56px !important;
        padding-top: 18px; /* room for the label when not floated */
        padding-bottom: 8px;
        padding-left: 12px;
    }

:root[b-5fw1n9iaex] {
    --label-float-top: 4px !important;
    --label-float: 12px;
}
/* Airline picker floating label fix */
.airline-picker[b-5fw1n9iaex] {
    position: relative;
    overflow: visible; /* don't clip the label */
}

    .airline-picker .float-label[b-5fw1n9iaex] {
        position: absolute;
        left: 12px;
        top: 4px !important; /* same minimized height as other fields */
        font-size: 12px;
        padding: 0 4px;
        background: #fff; /* mask border under text */
        pointer-events: none; /* clicks pass through to picker */
        z-index: 3; /* above picker contents */
    }

    /* Give the picker content room so the label doesn't overlap it */
    .airline-picker .selected-picker[b-5fw1n9iaex] {
        padding-top: 18px;
        position: relative;
        z-index: 1;
    }


/* Invisible full-screen click-off layer shown when the Trip Type menu is open */
.picker-overlay[b-5fw1n9iaex] {
    position: fixed;
    inset: 0; /* top/right/bottom/left: 0 */
    background: transparent;
    z-index: 998; /* below the menu, above the page */
}

/* Ensure the Trip Type menu sits above the overlay */
.triptype-picker .picker-menu[b-5fw1n9iaex] {
    position: absolute;
    z-index: 999;
}
/* Trip Type floating label */
.triptype-picker[b-5fw1n9iaex] {
    position: relative;
    overflow: visible; /* ensure the label isn't clipped */
}

    .triptype-picker .float-label[b-5fw1n9iaex] {
        position: absolute;
        left: 12px;
        top: 4px !important; /* same minimized position as others */
        font-size: 12px;
        padding: 0 4px;
        background: #fff; /* mask the border under the text */
        pointer-events: none;
        z-index: 3;
    }

    /* Space for the label above the picker value */
    .triptype-picker .selected-picker[b-5fw1n9iaex] {
        padding-top: 18px;
        position: relative;
        z-index: 1;
    }



/* Unify control height */
:root[b-5fw1n9iaex] {
    --control-h: 56px !important;
}

.float-field input[type="text"][b-5fw1n9iaex],
.float-field input[type="date"][b-5fw1n9iaex],
.float-field input[type="time"][b-5fw1n9iaex],
.airline-picker .selected-picker[b-5fw1n9iaex],
.triptype-picker .selected-picker[b-5fw1n9iaex] {
    height: var(--control-h);
    line-height: var(--control-h);
    padding-top: 18px; /* room for floating label */
    padding-bottom: 8px;
    box-sizing: border-box;
}

/* Floating label positions (consistent across all) */
.float-field .float-label[b-5fw1n9iaex] {
    top: 16px;
}

.float-field.has-value .float-label[b-5fw1n9iaex],
.float-field:focus-within .float-label[b-5fw1n9iaex] {
    top: 4px;
    font-size: 12px;
}
/* Lock date/time floating labels in the high position */
.float-field.always-float[b-5fw1n9iaex] {
    --label-float-top: 4px;
}

    .float-field.always-float .float-label[b-5fw1n9iaex],
    .float-field.always-float:focus-within .float-label[b-5fw1n9iaex] {
        top: 4px !important; /* same position focused/unfocused */
        font-size: var(--label-float) !important;
        transition: none !important; /* no slide animation */
    }


/* Airline: big hint when empty, small/top when has value or focused */
:root[b-5fw1n9iaex] {
    --label-inside: 14px;
    --label-inside-top: 18px; /* tweak to your eye; 18�20px centers well in 56px fields */
    --label-float-top: 4px; /* your unified float position */
    --label-float: 12px;
}

.airline-picker[b-5fw1n9iaex] {
    position: relative;
    overflow: visible;
}

    /* inside (empty) */
    .airline-picker .float-label[b-5fw1n9iaex] {
        position: absolute;
        left: 12px;
        top: var(--label-inside-top);
        font-size: var(--label-inside);
        padding: 0 4px;
        background: #fff;
        pointer-events: none;
        z-index: 3;
    }

    /* floated (has value or focus) */
    .airline-picker.has-value .float-label[b-5fw1n9iaex],
    .airline-picker:focus-within .float-label[b-5fw1n9iaex] {
        top: var(--label-float-top);
        font-size: var(--label-float);
    }

.flights-grid td.emph-time[b-5fw1n9iaex] {
    font-weight: 700;
}


/* === Flight Info: section headers (append at end) ======================== */
.flight-info-content[b-5fw1n9iaex] {
    /* tokens (map to your existing brand vars if present) */
    --fi-blue: var(--brand-blue, #005EB8);
    --fi-blue-dark: var(--brand-blue-dark, #0F2B5B);
    --fi-blue-50: #F2F6FF;
    --fi-gold: var(--brand-gold, #FFB300);
    --fi-border: #DFE3EE;
}

/* Primary section header (used above each block like Date/Time, Airline/Flight/Trip) */
.fi-heading[b-5fw1n9iaex] {
    margin: 10px 0 6px 0;
    padding: 8px 10px;
    color: var(--fi-blue-dark);
    background: var(--fi-blue-50);
    border-left: 6px solid var(--fi-blue);
    border-radius: 8px;
    font-weight: 700;
    line-height: 1.2;
}

/* Optional smaller header (if you have sub-sections per leg) */
.fi-subheading[b-5fw1n9iaex] {
    margin: 8px 0 4px 0;
    padding: 6px 10px;
    color: var(--fi-blue-dark);
    background: #F7FAFF;
    border-left: 4px solid var(--fi-blue);
    border-radius: 6px;
    font-weight: 600;
}

/* Keep forms visually tied to the header */
.fi-block[b-5fw1n9iaex] {
    border: 1px solid var(--fi-border);
    border-radius: 10px;
    padding: 10px;
    background: #fff;
}

/* Make modal titles match the dark brand color */
.modal-header h3[b-5fw1n9iaex] {
    color: var(--fi-blue-dark);
}
/* Tokens (reuse your brand vars if you have them) */
.flight-info-content[b-5fw1n9iaex], :root[b-5fw1n9iaex] {
    --fi-blue: var(--brand-blue, #005EB8);
    --fi-blue-dark: var(--brand-blue-dark, #0F2B5B);
    --fi-blue-50: #F2F6FF;
}

/* Highlighted "From � ? �" row */
/* .fi-route - MOVED TO site.css for global use across all components */
/* Normalize date input height to match other 56px controls */
.flight-info-content[b-5fw1n9iaex] {
    --fi-input-h: 56px;
}

    .flight-info-content input[type="date"][b-5fw1n9iaex] {
        height: var(--fi-input-h);
        min-height: var(--fi-input-h);
        line-height: calc(var(--fi-input-h) - 2px); /* accounts for 1px borders */
        box-sizing: border-box;
        padding-block: 0; /* prevent vertical padding differences */
        padding-inline: 12px;
        font-size: 16px; /* consistent metrics + avoids iOS zoom */
        /* Keep native picker icon */
    }

        /* Remove extra internal padding in WebKit (Chrome/Safari) */
        .flight-info-content input[type="date"][b-5fw1n9iaex]::-webkit-datetime-edit,
        .flight-info-content input[type="date"][b-5fw1n9iaex]::-webkit-datetime-edit-fields-wrapper,
        .flight-info-content input[type="date"][b-5fw1n9iaex]::-webkit-datetime-edit-text,
        .flight-info-content input[type="date"][b-5fw1n9iaex]::-webkit-datetime-edit-month-field,
        .flight-info-content input[type="date"][b-5fw1n9iaex]::-webkit-datetime-edit-day-field,
        .flight-info-content input[type="date"][b-5fw1n9iaex]::-webkit-datetime-edit-year-field {
            padding: 0;
        }

        .flight-info-content input[type="date"][b-5fw1n9iaex]::-webkit-date-and-time-value {
            min-height: auto;
        }

        .flight-info-content input[type="date"][b-5fw1n9iaex]::-webkit-calendar-picker-indicator {
            margin: 0 8px 0 0; /* keeps icon aligned without changing height */
            padding: 0;
        }

    /* If you also use a time input, normalize it too */
    .flight-info-content input[type="time"][b-5fw1n9iaex] {
        height: var(--fi-input-h);
        min-height: var(--fi-input-h);
        line-height: calc(var(--fi-input-h) - 2px);
        box-sizing: border-box;
        padding-block: 0;
        padding-inline: 2px;
        font-size: 16px;
    }
/* Make heading labels span full width (even inside flex parents) */
label.app-heading[b-5fw1n9iaex] {
    display: block;
    width: 100%;
    flex: 1 1 100%;
    align-self: stretch;
    box-sizing: border-box;
}

/* optional helper if you want centered text */
.app-heading.center[b-5fw1n9iaex] {
    text-align: center;
}


/* Make input columns compact inside the Flight Info card only */
.fi-block .input-column[b-5fw1n9iaex] {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 8px; /* space between rows */
}

/* Reduce inner field spacing */
.fi-block .float-field[b-5fw1n9iaex] {
    margin-bottom: 8px !important; /* was ~22px globally */
}

/* Ensure controls don't force extra height */
.fi-block .float-input.form-control[b-5fw1n9iaex],
.fi-block .selected-picker[b-5fw1n9iaex],
.fi-block .selected-country[b-5fw1n9iaex] {
    min-height: 46px !important; /* tighten control height */
    padding-top: 16px !important; /* keep label centered when empty */
    padding-bottom: 8px !important;
}

/* Float label positions for the tighter control */
.fi-block .float-input:placeholder-shown + .float-label[b-5fw1n9iaex] {
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
}

.fi-block .float-input:focus + .float-label[b-5fw1n9iaex],
.fi-block .float-input:not(:placeholder-shown) + .float-label[b-5fw1n9iaex] {
    top: 6px;
    transform: none;
    font-size: .78rem;
}

.input-column[b-5fw1n9iaex] {
    line-height: normal !important;
    height: 60px;
    padding-top: 6px;
}


.fi-block .input-column[b-5fw1n9iaex] {
    line-height: normal !important;
}

.flight-date[b-5fw1n9iaex] {
    padding-top: 12px !important;
}



/* === Mobile tweaks: make flights modal narrower, Flight # slimmer === */
@media (max-width: 430px) {
    /* Keep the dialog comfortably within the viewport */
    .flights-modal-content[b-5fw1n9iaex] {
        width: 96vw;
        max-width: 420px;
    }

    /* Rebalance table columns so nothing overflows */
    /* 1: Airline | 2: From | 3: To | 4: Flight # | 5: Departs | 6: Arrives */
    .flights-grid th:nth-child(1)[b-5fw1n9iaex],
    .flights-grid td:nth-child(1)[b-5fw1n9iaex] {
        width: 10%;
    }
    /* Airline */
    .flights-grid th:nth-child(2)[b-5fw1n9iaex],
    .flights-grid td:nth-child(2)[b-5fw1n9iaex] {
        width: 10%;
        text-align: center;
        white-space: nowrap;
    }
    /* From */
    .flights-grid th:nth-child(3)[b-5fw1n9iaex],
    .flights-grid td:nth-child(3)[b-5fw1n9iaex] {
        width: 10%;
        text-align: center;
        white-space: nowrap;
    }
    /* To */
    .flights-grid th:nth-child(4)[b-5fw1n9iaex],
    .flights-grid td:nth-child(4)[b-5fw1n9iaex] {
        width: 12%;
        text-align: center;
        white-space: nowrap;
    }
    /* Flight # (narrower) */
    .flights-grid th:nth-child(5)[b-5fw1n9iaex],
    .flights-grid td:nth-child(5)[b-5fw1n9iaex] {
        width: 16%;
        text-align: right;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }
    /* Departs */
    .flights-grid th:nth-child(6)[b-5fw1n9iaex],
    .flights-grid td:nth-child(6)[b-5fw1n9iaex] {
        width: 16%;
        text-align: right;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }
    /* Arrives */

    /* Abbreviate long headers to save horizontal space */
    .flights-grid thead th:nth-child(4)[b-5fw1n9iaex],
    .flights-grid thead th:nth-child(5)[b-5fw1n9iaex],
    .flights-grid thead th:nth-child(6)[b-5fw1n9iaex] {
        font-size: 0;
    }

        .flights-grid thead th:nth-child(4)[b-5fw1n9iaex]::after {
            content: 'Flt#';
            font-size: .7rem;
        }

        .flights-grid thead th:nth-child(5)[b-5fw1n9iaex]::after {
            content: 'Depart';
            font-size: .7rem;
        }

        .flights-grid thead th:nth-child(6)[b-5fw1n9iaex]::after {
            content: 'Arrive';
            font-size: .7rem;
        }

    /* Slightly tighter rows for better fit */
    .flights-grid thead th[b-5fw1n9iaex],
    .flights-grid tbody td[b-5fw1n9iaex] {
        padding: .28rem .12rem;
        font-size: .7rem;
        line-height: 1.6;
    }
}





/* Radzen input sizing within our floating field */
.float-field[b-5fw1n9iaex] {
    position: relative;
}

    .float-field .rz-inputtext[b-5fw1n9iaex] {
        height: 56px; /* match your control height */
        line-height: 56px;
        padding-top: 18px; /* room for label when not floated */
        padding-bottom: 8px;
        padding-left: 12px;
        box-sizing: border-box;
    }

    /* Float label behavior (works with your existing .float-label styles) */
    .float-field.has-value .float-label[b-5fw1n9iaex],
    .float-field:focus-within .float-label[b-5fw1n9iaex] {
        top: 4px;
        font-size: 12px;
        opacity: .85;
    }




/* Full width + sizing for the DatePicker */
.fi-datetime[b-5fw1n9iaex] {
    display: block;
    width: 100%;
}

    /* IMPORTANT: style Radzen's inner input across the component boundary */
    .float-field[b-5fw1n9iaex]  .rz-inputtext,
    .fi-datetime[b-5fw1n9iaex]  .rz-inputtext {
        height: 56px;
        line-height: 56px;
        padding-top: 18px; /* space for floating label */
        padding-bottom: 8px;
        padding-left: 12px;
        box-sizing: border-box;
        /* match your other fields */
        font-family: inherit;
        font-size: 16px;
        color: var(--brand-blue, #005EB8);
        border-radius: 8px;
        width: 100%;
    }

        /* Focus state */
        .fi-datetime[b-5fw1n9iaex]  .rz-inputtext:focus {
            outline: none;
            border-color: var(--brand-blue, #1B63C7);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-blue, #1B63C7) 22%, transparent);
        }

/* Make the popup sit above your modals */
:root :where(.fi-datetime)[b-5fw1n9iaex]  .rz-datepicker-popup,
:root :where(.fi-datetime)[b-5fw1n9iaex]  .rz-timepicker-popup {
    z-index: 3000;
}

/* Span both columns in the .flight-top grid */
.flight-top .input-column--full[b-5fw1n9iaex] {
    grid-column: 1 / -1;
    width: 100%;
}


/* Tiny "meaning" chip that sits inside the field */
.float-field .time-chip[b-5fw1n9iaex] {
    position: absolute;
    right: 44px; /* leave room for Radzen's calendar icon */
    top: 14px; /* aligns when label is inside */
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--fi-blue-50, #F2F6FF);
    color: var(--fi-blue-dark, #0F2B5B);
    border: 1px solid var(--fi-border, #DFE3EE);
    font-size: .75rem;
    line-height: 1.4;
    pointer-events: none; /* don't steal clicks */
    white-space: nowrap;
}

/* When the label floats, nudge the chip up a bit to match */
.float-field.has-value .time-chip[b-5fw1n9iaex],
.float-field:focus-within .time-chip[b-5fw1n9iaex] {
    top: 6px;
}


/* Keep the chip visible and readable on small screens */
.float-field .time-chip[b-5fw1n9iaex] {
    position: absolute;
    right: 44px; /* leaves room for calendar icon */
    top: 14px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #F2F6FF;
    color: var(--brand-blue-dark);
    border: 1px solid var(--brand-blue);
    font-size: .75rem;
    line-height: 1.4;
    pointer-events: none;
    white-space: nowrap;
    max-width: 55%; /* prevent overlap; truncate if needed */
    overflow: hidden;
    text-overflow: ellipsis;
}

.float-field.has-value .time-chip[b-5fw1n9iaex],
.float-field:focus-within .time-chip[b-5fw1n9iaex] {
    top: 20px;
}

/* Tighten on very narrow phones */
@media (max-width: 400px) {
    .float-field .time-chip[b-5fw1n9iaex] {
        right: 40px;
        font-size: .55rem;
        font-weight: 600;
        max-width: 35%;
    }
}


/* Carrier row: Airline | Flight # (narrow) | Trip Type (wider) */
.flight-row-airline[b-5fw1n9iaex] {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) /* Airline */
    minmax(90px, 0.55fr) /* Flight # narrower */
    minmax(220px, 1.45fr) /* Trip Type wider */;
    gap: 12px;
}

    /* Prevent overflow forcing wraps */
    .flight-row-airline .input-column[b-5fw1n9iaex] {
        min-width: 0;
    }

    /* Keep values to one line */
    .flight-row-airline .picker-value[b-5fw1n9iaex] {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* Mobile: still 3 cols but tighter; Trip Type keeps more room */
@media (max-width: 420px) {
    .flight-row-airline[b-5fw1n9iaex] {
        grid-template-columns: 1fr 0.6fr 1.2fr;
        gap: 5px;
    }

    .float-field input[type="text"][b-5fw1n9iaex],
    .airline-picker .selected-picker[b-5fw1n9iaex],
    .triptype-picker .selected-picker[b-5fw1n9iaex] {
        height: 44px;
        padding-top: 14px;
        padding-bottom: 6px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .flight-row-airline .picker-value[b-5fw1n9iaex],
    .flight-row-airline input.form-control[b-5fw1n9iaex] {
        font-size: 0.95rem;
        text-align: center;
    }
}
/* Ensure Radzen dropdown panels overlay sticky footers/buttons */
:root :where(.rz-dropdown-panel)[b-5fw1n9iaex] {
    z-index: 5000; /* higher than your bottom nav/buttons */
}


/* Make the dropdown fill its cell and match your 56px control height */
.triptype-picker[b-5fw1n9iaex],
.triptype-picker[b-5fw1n9iaex]  .rz-dropdown,
.triptype-picker[b-5fw1n9iaex]  .rz-inputtext {
    width: 100%;
    max-width: 100%;
}

/* Your file already normalizes Radzen input height via ::deep .rz-inputtext.
   This ensures the Trip Type field inherits the same metrics. */



/* Make all three columns shrink within the frame */
.flight-row-airline[b-5fw1n9iaex] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) /* Airline */
    minmax(0, 0.6fr) /* Flight # */
    minmax(0, 1.4fr); /* Trip Type */
    gap: 6px;
}

    /* Don't let the Trip Type widget size itself wider than its grid cell */
    .flight-row-airline .input-column[b-5fw1n9iaex] {
        min-width: 0;
    }

.triptype-picker[b-5fw1n9iaex],
.triptype-picker[b-5fw1n9iaex]  .rz-dropdown {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

    /* Ensure long labels don't stretch the column */
    .triptype-picker[b-5fw1n9iaex]  .rz-dropdown-label {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }



@media (max-width: 480px) {
    .flight-row-airline[b-5fw1n9iaex] {
        /* Airline | Flight # | Trip Type */
        grid-template-columns: minmax(0, 1.0fr) /* shrink Airline a bit */
        minmax(0, 1.0fr) /* widen Flight # */
        minmax(0, 1fr); /* Trip Type unchanged */
        gap: 6px;
        text-align: center;
    }

        /* let the Flight # control actually use the space */
        .flight-row-airline .input-column--flightnum[b-5fw1n9iaex] {
            min-width: 0;
            text-align: center !important;
        }

            .flight-row-airline .input-column--flightnum[b-5fw1n9iaex]  .rz-inputtext {
                width: 100%;
                max-width: 100%;
                box-sizing: border-box;
                text-align: center;
            }
}
/* Center the text inside the Radzen textbox / inputmask for Flight # */
.flight-row-airline .input-column--flightnum[b-5fw1n9iaex]  .rz-inputtext,
.flight-row-airline .input-column--flightnum[b-5fw1n9iaex]  .rz-inputmask {
    text-align: center !important;
    font-variant-numeric: tabular-nums;
}

/* Center the text inside a plain <input type="text"> (if that's what you use) */
.flight-row-airline .input-column--flightnum input[type="text"][b-5fw1n9iaex] {
    text-align: center !important;
    font-variant-numeric: tabular-nums;
}

/* Center the placeholder too (optional) */
.flight-row-airline .input-column--flightnum [b-5fw1n9iaex]::placeholder {
    text-align: center !important;
}

/* Faux "picker" button version of Flight # */
.flightnum-picker .selected-picker[b-5fw1n9iaex] {
    /* keep your layout; space-between is fine if .picker-value flexes */
}

    .flightnum-picker .selected-picker .picker-value[b-5fw1n9iaex] {
        display: flex;
        flex: 1 1 auto;
        justify-content: center;
        text-align: center !important;
        font-variant-numeric: tabular-nums;
    }

/* --- Center Flight # in the faux picker button --- */
/* Your global rule sets .selected-picker { justify-content: space-between }.
   Override *only* for the Flight # picker and give the label its own center column. */
.flightnum-picker .selected-picker[b-5fw1n9iaex] {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr; /* left spacer | label | chevron */
    align-items: center;
    justify-content: normal !important; /* beat space-between */
}

    .flightnum-picker .selected-picker .picker-value[b-5fw1n9iaex] {
        grid-column: 2; /* the middle track */
        justify-self: center; /* center the label block */
        text-align: center; /* center text inside */
        font-variant-numeric: tabular-nums;
    }

    /* keep the chevron parked to the right column */
    .flightnum-picker .selected-picker .chevron[b-5fw1n9iaex] {
        grid-column: 3;
        justify-self: end;
    }

/* If your label text is wrapped in a .flightnum span, center it too */
.flightnum-picker .picker-value .flightnum[b-5fw1n9iaex] {
    text-align: center;
    margin: 0 auto; /* guard against any stray inline spacing */
}

/* --- Center Flight # in a plain <input> (if used) --- */
.input-column--flightnum input[type="text"][b-5fw1n9iaex],
.input-column--flightnum input:not([type])[b-5fw1n9iaex] {
    text-align: center !important;
    font-variant-numeric: tabular-nums;
}

/* (optional) center the placeholder as well */
.input-column--flightnum [b-5fw1n9iaex]::placeholder {
    text-align: center;
}


/* Boxed toggle matches other fields */
.international-picker .selected-picker[b-5fw1n9iaex] {
    /* your .selected-picker base styles already provide border, radius, etc. */
    display: flex;
    align-items: center;
    justify-content: center; /* center switch + labels */
    gap: 5px;
    width: 100%;
}

/* Ensure 56px height like other fields */
:root[b-5fw1n9iaex] {
    --control-h: 56px !important;
}

.international-picker .selected-picker[b-5fw1n9iaex] {
    height: var(--control-h);
    line-height: var(--control-h);
    padding-top: 18px; /* keep room for the floated label */
    padding-bottom: 8px;
    box-sizing: border-box;
}

/* Small "No / Yes" labels around the switch */
.intl-switch-text[b-5fw1n9iaex] {
    font-size: .95rem;
    color: var(--brand-blue);
    line-height: 1;
    user-select: none;
}

/* Keep the switch from stretching the box */
.international-picker .selected-picker :where(.rz-switch, input[type="checkbox"])[b-5fw1n9iaex] {
    flex: 0 0 auto;
}

/* If this field sits in the 3-col row, allow it to shrink cleanly */
.flight-row-airline .input-column--intl[b-5fw1n9iaex] {
    min-width: 0;
}
/* === International picker: float the label like the others === */
.international-picker[b-5fw1n9iaex] {
    position: relative;
    overflow: visible; /* don't clip the label */
}

    .international-picker .float-label[b-5fw1n9iaex] {
        position: absolute;
        left: 12px;
        top: 4px !important; /* same "floated" position */
        font-size: 12px;
        padding: 0 4px;
        background: #fff; /* mask the border under text */
        color: var(--brand-blue); /* match your brand text color */
        pointer-events: none;
        z-index: 3; /* above .selected-picker */
    }

    /* ensure room for the label inside the box */
    .international-picker .selected-picker[b-5fw1n9iaex] {
        padding-top: 18px;
        position: relative;
        z-index: 1;
    }

/* Make all hints in the Airline | Flight # | Trip Type row a fixed size */
.flight-row-airline .float-label[b-5fw1n9iaex] {
    font-size: 12px !important;
}
/* Make it obvious the whole frame is clickable */
.fi-datetime.clickable[b-5fw1n9iaex] {
    cursor: pointer;
}
    /* Keep cursor text on the actual input so it still looks like a field */
    .fi-datetime.clickable input[b-5fw1n9iaex] {
        cursor: text;
    }



/* Ensure the field is a positioning context */
.float-field[b-5fw1n9iaex] {
    position: relative;
}



/* Keep your input/label styles as-is (you already have them) */
/* Clickable Yes/No labels */
.intl-switch-text[b-5fw1n9iaex] {
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    outline: none;
}

    .intl-switch-text:hover[b-5fw1n9iaex] {
        background: #f8f9fa;
    }

    .intl-switch-text:focus-visible[b-5fw1n9iaex] {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-blue, #1B63C7) 22%, transparent);
    }

    .intl-switch-text.active[b-5fw1n9iaex] {
        font-weight: 700;
        text-decoration: underline;
    }



/* Since we removed the built-in button, keep some right padding for chips/custom icon */
.fi-datetime[b-5fw1n9iaex]  .rz-inputtext {
    padding-right: 44px; /* same space you budgeted for the icon */
}

.fi-datetime[b-5fw1n9iaex] {
    scroll-margin-top: 72px;
}



    /* Match Radzen input height + layout assumptions */
    .fi-datetime .selected-picker[b-5fw1n9iaex] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 56px; /* Radzen input height */
        padding: 0 12px;
        border: 1px solid var(--field-border, #d9d9d9);
        border-radius: 4px;
        background: #fff;
    }

    /* Placeholder vs value */
    .fi-datetime .picker-placeholder[b-5fw1n9iaex] {
        opacity: .75;
        color: var(--field-placeholder, #8a8a8a);
    }

    .fi-datetime .picker-value[b-5fw1n9iaex] {
        color: var(--field-text, #222);
    }

    /* Calendar icon placement */
    .fi-datetime .picker-icon[b-5fw1n9iaex] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        margin-left: 8px;
        flex: 0 0 auto;
        opacity: .8;
    }

    /* Focus ring to mimic Radzen focus */
    .fi-datetime.is-focused .selected-picker[b-5fw1n9iaex] {
        border-color: var(--field-focus, #3b82f6) !important;
        box-shadow: 0 0 0 .2rem var(--field-ring, rgba(59,130,246,.15)) !important;
    }

    /* Floating label behavior */
    .fi-datetime .float-label[b-5fw1n9iaex] {
        transition: transform .16s ease, color .16s ease, top .16s ease;
        transform-origin: left top;
    }

    /* Float when focused OR has a value (like Radzen) */
    .fi-datetime.is-focused .float-label[b-5fw1n9iaex],
    .fi-datetime.has-value .float-label[b-5fw1n9iaex] {
        color: var(--brand-blue, #0a66c2);
        transform: translateY(-14px) scale(.86);
    }


/* Button resets so it looks like your Radzen input face */
.float-field.fi-datetime[b-5fw1n9iaex] {
    position: relative;
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 0;
}

/* The "box" */
.fi-datetime .selected-picker[b-5fw1n9iaex] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px; /* Radzen input height */
    padding: 0 12px;
    border: 1px solid var(--field-border, #d9d9d9);
    border-radius: 4px;
    background: #fff;
}

/* Placeholder vs value */
.fi-datetime .picker-placeholder[b-5fw1n9iaex] {
    opacity: .75;
    color: var(--field-placeholder, #8a8a8a);
}

.fi-datetime .picker-value[b-5fw1n9iaex] {
    color: var(--field-text, #222);
}

/* Icon */
.fi-datetime .picker-icon[b-5fw1n9iaex] {
    margin-left: 8px;
    flex: 0 0 auto;
    opacity: .85;
}

/* Focus ring: button focus triggers it */
.float-field.fi-datetime:focus .selected-picker[b-5fw1n9iaex] {
    border-color: var(--field-focus, #3b82f6) !important;
    box-shadow: 0 0 0 .2rem var(--field-ring, rgba(59,130,246,.15)) !important;
    outline: 0;
}

/* Floating label positioning (56px baseline) */
.float-field.fi-datetime .float-label[b-5fw1n9iaex] {
    position: absolute;
    left: 12px;
    top: 18px;
    pointer-events: none;
    transition: transform .16s ease, color .16s ease;
    transform-origin: left top;
}

/* Float when focused OR when there's a value */
.float-field.fi-datetime:focus .float-label[b-5fw1n9iaex],
.fi-datetime.has-value .float-label[b-5fw1n9iaex] {
    color: var(--brand-blue, #0a66c2);
    transform: translateY(-14px) scale(.86);
}

/* Click affordance */
.fi-datetime.clickable .selected-picker[b-5fw1n9iaex] {
    cursor: pointer;
}
/* Overall scale (quick win) */
.dp-sm[b-5fw1n9iaex] {
    --dp-scale: 0.59; /* try 0.85�0.95 */
}

.dp-sm[b-5fw1n9iaex] {
    transform-origin: top left;
}
    /* in case the panel uses transforms */
    .dp-sm[b-5fw1n9iaex],
    .dp-sm *[b-5fw1n9iaex] {
        /* If Radzen wraps the panel, the class may be on the root popup element. */
    }

        /* Typography + hit-targets */
        .dp-sm .rz-calendar[b-5fw1n9iaex] {
            font-size: 0.875rem;
        }
            /* smaller text */
            .dp-sm .rz-calendar .rz-calendar-day[b-5fw1n9iaex],
            .dp-sm .rz-calendar .rz-calendar-month[b-5fw1n9iaex] {
                width: 2rem;
                height: 2rem;
                line-height: 2rem; /* smaller cells */
                padding: 0;
            }

            .dp-sm .rz-calendar .rz-calendar-title[b-5fw1n9iaex] {
                padding: .25rem .5rem;
            }

        /* Time section trims */
        .dp-sm .rz-timepicker[b-5fw1n9iaex] {
            font-size: 0.875rem;
        }

            .dp-sm .rz-timepicker .rz-inputtext[b-5fw1n9iaex] {
                width: 2.75rem;
            }
            /* hour/min boxes */
            .dp-sm .rz-timepicker .rz-seconds[b-5fw1n9iaex] {
                display: none;
            }
/* if seconds still render */
/* popup calendar compaction � older/alt wrappers */
.rz-popup .rz-calendar[b-5fw1n9iaex],
.rz-calendar.rz-calendar-popup[b-5fw1n9iaex],
body > div[class*="rz-overlay"] .rz-calendar[b-5fw1n9iaex] {
    font-size: 0.875rem;
}

    .rz-popup .rz-calendar .rz-calendar-day[b-5fw1n9iaex],
    .rz-calendar.rz-calendar-popup .rz-calendar-day[b-5fw1n9iaex],
    body > div[class*="rz-overlay"] .rz-calendar .rz-calendar-day[b-5fw1n9iaex],
    .rz-popup .rz-calendar .rz-calendar-month[b-5fw1n9iaex],
    .rz-calendar.rz-calendar-popup .rz-calendar-month[b-5fw1n9iaex],
    body > div[class*="rz-overlay"] .rz-calendar .rz-calendar-month[b-5fw1n9iaex] {
        width: 2rem;
        height: 2rem;
        line-height: 2rem;
        padding: 0;
    }



/* ===============================
   ADD TO FlightComponent_razor.css
   Custom DateTime Button Picker Styles
   =============================== */

/* Match the look of fi-datetime but as a button */
.float-field.fi-datetime-custom[b-5fw1n9iaex] {
    position: relative;
    display: block;
    width: 100%;
    cursor: pointer;
    background: transparent;
    border: 0;
    padding: 0;
    text-align: left;
}

/* The "box" */
.fi-datetime-custom .selected-picker[b-5fw1n9iaex] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px; /* Match Radzen input height */
    padding: 18px 12px 8px 12px; /* Top padding for floating label */
    border: 1px solid var(--field-border, #d9d9d9);
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Placeholder vs value */
.fi-datetime-custom .picker-placeholder[b-5fw1n9iaex] {
    opacity: .75;
    color: var(--field-placeholder, #8a8a8a);
    font-size: 16px;
}

.fi-datetime-custom .picker-value[b-5fw1n9iaex] {
    color: var(--brand-blue, #005EB8);
    font-size: 16px;
    flex: 1;
}

    .fi-datetime-custom .picker-value span[b-5fw1n9iaex] {
        color: var(--brand-blue, #005EB8);
    }

/* Icon */
.fi-datetime-custom .picker-icon[b-5fw1n9iaex] {
    margin-right: 8px;
    flex: 0 0 auto;
    opacity: .85;
    color: var(--brand-blue, #005EB8);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
}

/* Focus ring: button focus triggers it */
.float-field.fi-datetime-custom:focus .selected-picker[b-5fw1n9iaex],
.float-field.fi-datetime-custom:focus-within .selected-picker[b-5fw1n9iaex] {
    border-color: var(--field-focus, #1B63C7) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-blue, #1B63C7) 22%, transparent) !important;
    outline: 0;
}

/* Hover state */
.float-field.fi-datetime-custom:hover .selected-picker[b-5fw1n9iaex] {
    border-color: var(--brand-blue, #1B63C7);
}


/* Time chip positioning - positioned on right side (icon is on left) */
.float-field.fi-datetime-custom .time-chip[b-5fw1n9iaex] {
    position: absolute;
    right: 12px; /* icon is now on left, so more room on right */
    top: 20px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #F2F6FF;
    color: var(--brand-blue-dark);
    border: 1px solid var(--brand-blue);
    font-size: .75rem;
    line-height: 1.4;
    pointer-events: none;
    white-space: nowrap;
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 1;
}

/* Adjust chip position when label floats */
.float-field.fi-datetime-custom.has-value .time-chip[b-5fw1n9iaex] {
    top: 20px;
}

/* Tighten on very narrow phones */
@media (max-width: 400px) {
    .float-field.fi-datetime-custom .time-chip[b-5fw1n9iaex] {
        right: 8px;
        font-size: .55rem;
        font-weight: 600;
        max-width: 35%;
    }
}

/* ===============================
   Flight Info Summary Button
   =============================== */

.flight-info-summary[b-5fw1n9iaex] {
    width: 100%;
}

.flight-summary-picker[b-5fw1n9iaex] {
    position: relative;
    width: 100%;
}

    .flight-summary-picker .selected-picker[b-5fw1n9iaex] {
        position: relative;
        z-index: 1;
        min-height: var(--field-min-h, 56px);
        padding: 12px; /* Balanced padding since label is on border */
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        color: var(--brand-blue);
        font-size: var(--field-font-size, 16px);
        line-height: var(--field-line, 1.5);
        border: 1px solid var(--field-border, #d9d9d9) !important;
        border-radius: var(--field-radius, 8px);
        background: #fff;
        box-sizing: border-box;
        cursor: pointer;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

        .flight-summary-picker .selected-picker:hover[b-5fw1n9iaex] {
            border-color: var(--brand-blue, #1B63C7);
        }

    .flight-summary-picker:focus .selected-picker[b-5fw1n9iaex],
    .flight-summary-picker:focus-within .selected-picker[b-5fw1n9iaex] {
        border-color: var(--field-focus, #1B63C7) !important;
        box-shadow: 0 0 0 .25rem var(--field-ring, rgba(27, 99, 199, 0.25)) !important;
        outline: 0;
    }

    .flight-summary-picker .picker-value[b-5fw1n9iaex] {
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
        flex: 1;
    }

    .flight-summary-picker .flight-summary-text[b-5fw1n9iaex] {
        color: var(--brand-blue);
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .flight-summary-picker .picker-placeholder[b-5fw1n9iaex] {
        color: var(--brand-blue);
        opacity: 0.75;
    }

    .flight-summary-picker .chevron[b-5fw1n9iaex] {
        font-size: 12px;
        margin-left: 6px;
        color: #666;
        flex-shrink: 0;
    }

    /* Float label positioning - STATIONARY on top border (like PassengersBags) */
    .flight-summary-picker .float-label[b-5fw1n9iaex] {
        position: absolute;
        left: 12px;
        top: -8px;
        background-color: white;
        padding: 0 4px;
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--brand-blue, var(--brand-blue));
        pointer-events: none;
        z-index: 2;
    }

    /* Focus state - label stays in same position, just changes weight */
    .flight-summary-picker:focus .float-label[b-5fw1n9iaex],
    .flight-summary-picker:focus-within .float-label[b-5fw1n9iaex],
    .flight-summary-picker.has-value .float-label[b-5fw1n9iaex],
    .flight-summary-picker.always-float .float-label[b-5fw1n9iaex] {
        color: var(--brand-blue, var(--brand-blue));
        font-weight: 600;
    }

/* ===============================
   ADD TO FlightComponent_razor.css
   Custom DateTime Button Picker Styles
   =============================== */

/* Match the look of fi-datetime but as a button */
.float-field.fi-datetime-custom[b-5fw1n9iaex] {
    position: relative;
    display: block;
    width: 100%;
    cursor: pointer;
    background: transparent;
    border: 0;
    padding: 0;
}

/* The "box" */
.fi-datetime-custom .selected-picker[b-5fw1n9iaex] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px; /* Match Radzen input height */
    padding: 12px; /* Balanced padding since label is on border */
    border: 1px solid var(--field-border, #d9d9d9);
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Placeholder vs value */
.fi-datetime-custom .picker-placeholder[b-5fw1n9iaex] {
    opacity: .75;
    color: var(--field-placeholder, #8a8a8a);
    font-size: 16px;
}

.fi-datetime-custom .picker-value[b-5fw1n9iaex] {
    color: var(--brand-blue, #005EB8);
    font-size: 16px;
    flex: 1;
}

    .fi-datetime-custom .picker-value span[b-5fw1n9iaex] {
        color: var(--brand-blue, #005EB8);
    }

/* Icon */
.fi-datetime-custom .picker-icon[b-5fw1n9iaex] {
    margin-right: 8px;
    flex: 0 0 auto;
    opacity: .85;
    color: var(--brand-blue, #005EB8);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
}

/* Focus ring: button focus triggers it */
.float-field.fi-datetime-custom:focus .selected-picker[b-5fw1n9iaex],
.float-field.fi-datetime-custom:focus-within .selected-picker[b-5fw1n9iaex] {
    border-color: var(--field-focus, #1B63C7) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-blue, #1B63C7) 22%, transparent) !important;
    outline: 0;
}

/* Hover state */
.float-field.fi-datetime-custom:hover .selected-picker[b-5fw1n9iaex] {
    border-color: var(--brand-blue, #1B63C7);
}

/* Floating label positioning - STATIONARY on top border (like PassengersBags) */
.float-field.fi-datetime-custom .float-label[b-5fw1n9iaex] {
    position: absolute;
    left: 12px;
    top: -8px;
    background-color: white;
    padding: 0 4px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--brand-blue, var(--brand-blue));
    pointer-events: none;
    z-index: 2;
}

/* Focus state - label stays in same position, just changes weight */
.float-field.fi-datetime-custom:focus .float-label[b-5fw1n9iaex],
.float-field.fi-datetime-custom.has-value .float-label[b-5fw1n9iaex],
.float-field.fi-datetime-custom.always-float .float-label[b-5fw1n9iaex] {
    color: var(--brand-blue, var(--brand-blue));
    font-weight: 600;
}

/* Time chip positioning - positioned on right side (icon is on left) */
.float-field.fi-datetime-custom .time-chip[b-5fw1n9iaex] {
    position: absolute;
    right: 12px; /* icon is now on left, so more room on right */
    top: 16px; /* Adjusted for reduced padding */
    padding: 2px 8px;
    border-radius: 999px;
    background: #F2F6FF;
    color: var(--brand-blue-dark);
    border: 1px solid var(--brand-blue);
    font-size: .75rem;
    line-height: 1.4;
    pointer-events: none;
    white-space: nowrap;
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 1;
}

/* Adjust chip position when label floats */
.float-field.fi-datetime-custom.has-value .time-chip[b-5fw1n9iaex] {
    top: 16px;
}

/* Tighten on very narrow phones */
@media (max-width: 400px) {
    .float-field.fi-datetime-custom .time-chip[b-5fw1n9iaex] {
        right: 8px;
        font-size: .55rem;
        font-weight: 600;
        max-width: 35%;
    }
}

/* Time chip color variations based on time of day */
.float-field.fi-datetime-custom .time-chip.time-morning[b-5fw1n9iaex] {
    background: linear-gradient(135deg, #FFF9E6 0%, #FFF3CC 100%);
    border-color: #F59E0B;
    color: #92400E;
}

.float-field.fi-datetime-custom .time-chip.time-midday[b-5fw1n9iaex],
.float-field.fi-datetime-custom .time-chip.time-afternoon[b-5fw1n9iaex] {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    border-color: #F59E0B;
    color: #92400E;
}

.float-field.fi-datetime-custom .time-chip.time-evening[b-5fw1n9iaex] {
    background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%);
    border-color: #6366F1;
    color: #312E81;
}

.float-field.fi-datetime-custom .time-chip.time-midnight[b-5fw1n9iaex],
.float-field.fi-datetime-custom .time-chip.time-after-midnight[b-5fw1n9iaex],
.float-field.fi-datetime-custom .time-chip.time-before-midnight[b-5fw1n9iaex],
.float-field.fi-datetime-custom .time-chip.time-night[b-5fw1n9iaex] {
    background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%);
    border-color: #4F46E5;
    color: #1E1B4B;
}

.float-field.fi-datetime-custom .time-chip.time-early-morning[b-5fw1n9iaex] {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    border-color: #F59E0B;
    color: #92400E;
}

/* ===============================
   RadzenDropDown as Display Triggers
   =============================== */

/* Prevent dropdown panels from opening - these are triggers only */
.rz-dropdown-datetime .rz-dropdown-panel[b-5fw1n9iaex],
.rz-dropdown-flightinfo .rz-dropdown-panel[b-5fw1n9iaex] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Disable the dropdown arrow */
.rz-dropdown-datetime .rz-dropdown-toggle[b-5fw1n9iaex],
.rz-dropdown-flightinfo .rz-dropdown-toggle[b-5fw1n9iaex] {
    display: none !important;
}

/* Make entire dropdown clickable */
.rz-dropdown-datetime[b-5fw1n9iaex],
.rz-dropdown-flightinfo[b-5fw1n9iaex] {
    cursor: pointer !important;
}

    .rz-dropdown-datetime .rz-dropdown-label-container[b-5fw1n9iaex],
    .rz-dropdown-flightinfo .rz-dropdown-label-container[b-5fw1n9iaex] {
        cursor: pointer !important;
        pointer-events: all !important;
    }

/* Inline time chip for RadzenDropDown template */
.time-chip-inline[b-5fw1n9iaex] {
    padding: 2px 8px;
    border-radius: 999px;
    background: #F2F6FF;
    color: var(--brand-blue-dark);
    border: 1px solid var(--brand-blue);
    font-size: 0.75rem;
    line-height: 1.4;
    white-space: nowrap;
}

    /* Time chip color variations */
    .time-chip-inline.time-morning[b-5fw1n9iaex] {
        background: linear-gradient(135deg, #FFF9E6 0%, #FFF3CC 100%);
        border-color: #F59E0B;
        color: #92400E;
    }

    .time-chip-inline.time-midday[b-5fw1n9iaex],
    .time-chip-inline.time-afternoon[b-5fw1n9iaex] {
        background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
        border-color: #F59E0B;
        color: #92400E;
    }

    .time-chip-inline.time-evening[b-5fw1n9iaex] {
        background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%);
        border-color: #6366F1;
        color: #312E81;
    }

    .time-chip-inline.time-midnight[b-5fw1n9iaex],
    .time-chip-inline.time-after-midnight[b-5fw1n9iaex],
    .time-chip-inline.time-before-midnight[b-5fw1n9iaex],
    .time-chip-inline.time-night[b-5fw1n9iaex] {
        background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%);
        border-color: #4F46E5;
        color: #1E1B4B;
    }

    .time-chip-inline.time-early-morning[b-5fw1n9iaex] {
        background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
        border-color: #F59E0B;
        color: #92400E;
    }

/* ===============================
   RadzenButton Picker Styles
   =============================== */

/* DateTime and FlightInfo Button Pickers */
.datetime-button[b-5fw1n9iaex],
.airline-button[b-5fw1n9iaex],
.flightinfo-button[b-5fw1n9iaex] {
    cursor: pointer !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

    .datetime-button:hover[b-5fw1n9iaex],
    .airline-button:hover[b-5fw1n9iaex],
    .flightinfo-button:hover[b-5fw1n9iaex] {
        border-color: var(--brand-blue, #1B63C7) !important;
    }

    .datetime-button:focus[b-5fw1n9iaex],
    .airline-button:focus[b-5fw1n9iaex],
    .flightinfo-button:focus[b-5fw1n9iaex],
    .datetime-button.rz-button:focus[b-5fw1n9iaex],
    .airline-button.rz-button:focus[b-5fw1n9iaex],
    .flightinfo-button.rz-button:focus[b-5fw1n9iaex] {
        outline: none !important;
        border-color: var(--brand-blue, #005EB8) !important;
        box-shadow: 0 0 0 3px rgba(41, 99, 168, 0.35), 0 0 8px rgba(41, 99, 168, 0.25) !important;
    }

/* ===============================
   Float Labels for Button Pickers - WITH !important to override site.css
   =============================== */
.float-dropdown.datetime-picker[b-5fw1n9iaex],
.float-dropdown.airline-picker[b-5fw1n9iaex],
.float-dropdown.flight-info-picker[b-5fw1n9iaex],
.float-dropdown.flight-type-picker[b-5fw1n9iaex] {
    position: relative !important;
}

    .float-dropdown.datetime-picker .float-label[b-5fw1n9iaex],
    .float-dropdown.airline-picker .float-label[b-5fw1n9iaex],
    .float-dropdown.flight-info-picker .float-label[b-5fw1n9iaex],
    .float-dropdown.flight-type-picker .float-label[b-5fw1n9iaex] {
        position: absolute !important;
        left: 12px !important;
        top: -8px !important;
        background-color: white !important;
        padding: 0 4px !important;
        font-size: 0.75rem !important;
        font-weight: 500 !important;
        color: var(--brand-blue, var(--brand-blue)) !important;
        pointer-events: none !important;
        z-index: 2 !important;
    }

    .float-dropdown.datetime-picker.has-value .float-label[b-5fw1n9iaex],
    .float-dropdown.airline-picker.has-value .float-label[b-5fw1n9iaex],
    .float-dropdown.flight-info-picker.has-value .float-label[b-5fw1n9iaex],
    .float-dropdown.flight-type-picker.has-value .float-label[b-5fw1n9iaex] {
        font-weight: 600 !important;
    }

/* ===============================
   Info Links (Help)
   =============================== */

.flight-help-info[b-5fw1n9iaex] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-link[b-5fw1n9iaex] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--brand-blue, var(--brand-blue));
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
}

    .info-link:hover[b-5fw1n9iaex] {
        text-decoration: underline;
        color: var(--brand-blue-dark, var(--brand-blue-hover));
    }

.info-icon[b-5fw1n9iaex] {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    max-width: 16px;
    max-height: 16px;
    fill: currentColor;
    flex-shrink: 0;
    display: inline-block;
}

    .info-icon path[b-5fw1n9iaex] {
        fill: currentColor;
    }

/* Hide flight help info link on mobile */
@media (max-width: 600px) {
    .flight-help-info[b-5fw1n9iaex] {
        display: none !important;
    }

    /* Tighter spacing on mobile */
    .flight-info-summary[b-5fw1n9iaex] {
        margin-top: 10px !important;
    }
}

/* ===============================
   Flight DateTime Button Pulse Animation
   =============================== */
@keyframes flight-pulse-b-5fw1n9iaex {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(41, 99, 168, 0.7);
        border-color: var(--brand-blue, var(--brand-blue));
        transform: scale(1);
        background-color: #fff;
    }

    50% {
        box-shadow: 0 0 0 15px rgba(41, 99, 168, 0);
        border-color: var(--brand-blue, var(--brand-blue));
        transform: scale(1.02);
        background-color: #f0f7ff;
    }
}

.datetime-button.pulse-attention[b-5fw1n9iaex] {
    animation: flight-pulse-b-5fw1n9iaex 1.2s ease-in-out 4;
    position: relative;
}

/* Flight time badge - appears on right side of datetime button */
.flight-time-badge[b-5fw1n9iaex] {
    position: absolute;
    top: -18px;
    right: -8px;
    background: linear-gradient(135deg, var(--brand-blue) 0%, #1e4d7b 100%);
    color: white;
    padding: 5px 12px;
    border-radius: 14px;
    font-size: 0.75rem;
    font-weight: 600;
    box-shadow: 0 3px 10px rgba(41, 99, 168, 0.4);
    animation: badge-pulse-b-5fw1n9iaex 0.8s ease-in-out 3;
    z-index: 10;
    white-space: nowrap;
    pointer-events: none;
}

@keyframes badge-pulse-b-5fw1n9iaex {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.08);
        opacity: 0.9;
    }
}

/* Mobile adjustments */
@media (max-width: 480px) {
    .flight-time-badge[b-5fw1n9iaex] {
        font-size: 0.7rem;
        padding: 4px 10px;
    }
}

/* ===============================
   Flight Type (Domestic/International) Picker
   =============================== */
.flight-type-picker[b-5fw1n9iaex] {
    border: 1px solid var(--field-border, #d9d9d9);
    border-radius: var(--field-radius, 12px);
    background: white;
    min-height: 56px;
    position: relative;
    transition: border-color 0.2s;
}

.flight-type-container[b-5fw1n9iaex] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    min-height: 56px;
    box-sizing: border-box;
}

.flight-type-switch[b-5fw1n9iaex] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.flight-type-link[b-5fw1n9iaex] {
    padding: 6px 12px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
    user-select: none;
    color: #999;
    text-decoration: none;
    border-radius: 4px;
}

    .flight-type-link:hover[b-5fw1n9iaex] {
        color: var(--brand-blue, var(--brand-blue));
        background: #f0f7ff;
    }

    .flight-type-link.active[b-5fw1n9iaex] {
        font-weight: 700;
        color: var(--brand-blue, var(--brand-blue));
        background: #e3f2fd;
    }

    .flight-type-link.international.active[b-5fw1n9iaex] {
        color: var(--brand-gold, var(--brand-gold));
        background: #fff8e1;
    }

/* Mobile adjustments */
@media (max-width: 480px) {
    .flight-type-link[b-5fw1n9iaex] {
        font-size: 13px;
        padding: 5px 10px;
    }

    .flight-type-container[b-5fw1n9iaex] {
        padding: 10px 12px;
    }
}


/* Wrapper for inline airline logo with fallback */
.airline-logo-wrapper-inline[b-5fw1n9iaex] {
    width: 28px;
    height: 28px;
    position: relative;
    flex-shrink: 0;
}

/* Fallback - always visible as background layer */
.airline-button-fallback[b-5fw1n9iaex] {
    display: flex;
    width: 28px;
    height: 28px;
    background: var(--brand-blue-dark, #0a2b56);
    color: white;
    font-weight: 700;
    font-size: 10px;
    border-radius: 4px;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
}

/* Airline button logo - positioned above fallback */
.airline-button-logo[b-5fw1n9iaex] {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 4px;
    background-color: white;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
/* ===============================
   COLLAPSED SUMMARY VIEW
   =============================== */

/* Collapsed frame variant - more compact */
.section-frame-collapsed[b-5fw1n9iaex] {
    padding: 12px 12px 8px 12px;
}

    .section-frame-collapsed .frame-heading[b-5fw1n9iaex] {
        margin-bottom: 8px;
    }

.flight-collapsed-summary[b-5fw1n9iaex] {
    width: 100%;
}

.flight-summary-button[b-5fw1n9iaex] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid var(--brand-blue, var(--brand-blue));
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    font-family: inherit;
}

    .flight-summary-button:hover[b-5fw1n9iaex] {
        background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
        border-color: var(--brand-blue-dark, var(--brand-blue-hover));
        box-shadow: 0 2px 8px rgba(41, 99, 168, 0.15);
    }

    .flight-summary-button:focus[b-5fw1n9iaex] {
        outline: none;
        border-color: var(--brand-blue-dark, var(--brand-blue-hover));
        box-shadow: 0 0 0 3px rgba(41, 99, 168, 0.2);
    }

/* Airline Logo */
.summary-airline-logo[b-5fw1n9iaex] {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Fallback - always visible as background layer */
.summary-logo-fallback[b-5fw1n9iaex] {
    display: flex;
    width: 32px;
    height: 32px;
    background: var(--brand-blue-dark, #0a2b56);
    color: white;
    font-weight: 700;
    font-size: 10px;
    border-radius: 4px;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 2px;
    left: 2px;
}

/* Logo image - positioned above fallback */
.summary-logo-img[b-5fw1n9iaex] {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 4px;
    background: white;
    position: absolute;
    top: 2px;
    left: 2px;
    z-index: 1;
}

/* Flight Number */
.summary-flight-number[b-5fw1n9iaex] {
    flex: 0 0 auto;
    min-width: 70px;
}

    .summary-flight-number .flight-num[b-5fw1n9iaex] {
        font-weight: 600;
        font-size: 14px;
        color: var(--brand-blue-dark, var(--brand-blue-dark));
    }

    .summary-flight-number .flight-num-placeholder[b-5fw1n9iaex] {
        font-size: 13px;
        color: #999;
        font-style: italic;
    }

/* Route: PHX ? SAN */
.summary-route[b-5fw1n9iaex] {
    flex: 1 1 auto;
    text-align: center;
    min-width: 0;
}

    .summary-route .route-text[b-5fw1n9iaex] {
        font-weight: 600;
        font-size: 14px;
        color: var(--brand-blue, var(--brand-blue));
        white-space: nowrap;
    }

    .summary-route .route-text-placeholder[b-5fw1n9iaex] {
        font-size: 13px;
        color: #999;
    }

/* Date/Time */
.summary-datetime[b-5fw1n9iaex] {
    flex: 0 0 auto;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

    .summary-datetime .datetime-label[b-5fw1n9iaex] {
        font-size: 11px;
        font-weight: 500;
        color: var(--brand-blue, var(--brand-blue));
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    .summary-datetime .datetime-text[b-5fw1n9iaex] {
        font-size: 13px;
        font-weight: 500;
        color: var(--brand-blue-dark, var(--brand-blue-dark));
    }

    .summary-datetime .datetime-placeholder[b-5fw1n9iaex] {
        font-size: 12px;
        color: #999;
        font-style: italic;
    }

/* Expand Icon */
.summary-expand-icon[b-5fw1n9iaex] {
    flex: 0 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-blue, var(--brand-blue));
}

/* Mobile responsive adjustments - larger mobile */
@media (max-width: 600px) {
    .flight-summary-button[b-5fw1n9iaex] {
        gap: 10px;
        padding: 8px 12px;
    }

    .summary-route[b-5fw1n9iaex] {
        overflow: hidden;
    }

        .summary-route .route-text-placeholder[b-5fw1n9iaex] {
            font-size: 12px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
        }
}

/* Mobile responsive adjustments */
@media (max-width: 480px) {
    .flight-summary-button[b-5fw1n9iaex] {
        gap: 8px;
        padding: 8px 10px;
    }

    .summary-airline-logo[b-5fw1n9iaex] {
        flex: 0 0 28px;
        width: 28px;
        height: 28px;
    }

    .summary-logo-img[b-5fw1n9iaex],
    .summary-logo-fallback[b-5fw1n9iaex] {
        width: 26px;
        height: 26px;
        font-size: 9px;
    }

    .summary-flight-number[b-5fw1n9iaex] {
        min-width: 50px;
    }

        .summary-flight-number .flight-num[b-5fw1n9iaex] {
            font-size: 13px;
        }

        .summary-flight-number .flight-num-placeholder[b-5fw1n9iaex] {
            font-size: 12px;
        }

    .summary-route[b-5fw1n9iaex] {
        overflow: hidden;
    }

        .summary-route .route-text[b-5fw1n9iaex] {
            font-size: 13px;
        }

        .summary-route .route-text-placeholder[b-5fw1n9iaex] {
            font-size: 11px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
        }

    .summary-datetime .datetime-label[b-5fw1n9iaex] {
        font-size: 10px;
    }

    .summary-datetime .datetime-text[b-5fw1n9iaex] {
        font-size: 12px;
    }

    .summary-datetime .datetime-placeholder[b-5fw1n9iaex] {
        font-size: 11px;
    }

    .summary-expand-icon[b-5fw1n9iaex] {
        flex: 0 0 20px;
    }
}

@media (max-width: 360px) {
    .flight-summary-button[b-5fw1n9iaex] {
        flex-wrap: wrap;
        gap: 6px;
    }

    .summary-airline-logo[b-5fw1n9iaex] {
        order: 1;
    }

    .summary-flight-number[b-5fw1n9iaex] {
        order: 2;
        flex: 1;
    }

    .summary-expand-icon[b-5fw1n9iaex] {
        order: 3;
    }

    .summary-route[b-5fw1n9iaex] {
        order: 4;
        flex: 0 0 50%;
        text-align: left;
    }

    .summary-datetime[b-5fw1n9iaex] {
        order: 5;
        flex: 0 0 auto;
    }
}

/* ===============================
   EXPAND/COLLAPSE ANIMATION
   =============================== */

/* Keyframes for expand animation */
@keyframes expandIn-b-5fw1n9iaex {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Apply animation to expanded section (not collapsed) */
.section-frame:not(.section-frame-collapsed)[b-5fw1n9iaex] {
    animation: expandIn-b-5fw1n9iaex 1.0s ease-out forwards;
}

/* Collapsed summary gets a subtle fade when appearing */
.section-frame-collapsed[b-5fw1n9iaex] {
    animation: fadeIn-b-5fw1n9iaex 1.0s ease-out;
}

@keyframes fadeIn-b-5fw1n9iaex {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
/* ===============================
   Validation Shake Animation
   Add this section to FlightComponent.razor.css
   =============================== */

@keyframes validationShake-b-5fw1n9iaex {
    0%, 100% {
        transform: translateX(0);
    }

    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-6px);
    }

    20%, 40%, 60%, 80% {
        transform: translateX(6px);
    }
}

.float-dropdown.validation-shake[b-5fw1n9iaex] {
    animation: validationShake-b-5fw1n9iaex 0.5s ease-in-out;
}

.float-dropdown.validation-error .rz-button[b-5fw1n9iaex] {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25) !important;
}

.float-dropdown.validation-error .float-label[b-5fw1n9iaex] {
    color: #dc3545 !important;
}

/* Also target the RadzenButton directly for validation error state */
.float-dropdown.validation-error .datetime-button[b-5fw1n9iaex],
.float-dropdown.validation-error .airline-button[b-5fw1n9iaex],
.float-dropdown.validation-error .flightinfo-button[b-5fw1n9iaex] {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25) !important;
}

/* ===== ATTENTION SHAKE FOR COLLAPSED RETURN TRIP ===== */
/* Keyframes for attention-grabbing shake on collapsed summary */
@keyframes attentionShake-b-5fw1n9iaex {
    0%, 100% {
        transform: translateX(0);
    }

    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }

    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

/* Applied to collapsed summary when return trip needs attention */
.flight-collapsed-summary.attention-shake[b-5fw1n9iaex] {
    animation: attentionShake-b-5fw1n9iaex 0.5s ease-in-out;
}

.flight-collapsed-summary.attention-shake .flight-summary-button[b-5fw1n9iaex] {
    border-color: var(--brand-orange, #f59e0b) !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.3) !important;
}

/* ===============================
   ACCESSIBILITY ENHANCEMENTS
   =============================== */

/* Focused state for keyboard navigation - collapsed summary button */
.flight-summary-button:focus-visible[b-5fw1n9iaex] {
    outline: 3px solid var(--brand-blue, #005EB8);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(0, 94, 184, 0.25);
}

/* Flight type radio buttons - keyboard focus */
.flight-type-link:focus-visible[b-5fw1n9iaex] {
    outline: 3px solid var(--brand-blue, #005EB8);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(0, 94, 184, 0.25);
}

/* DateTime, Airline, and Flight selection buttons - keyboard focus */
.datetime-button:focus-visible[b-5fw1n9iaex],
.airline-button:focus-visible[b-5fw1n9iaex],
.flightinfo-button:focus-visible[b-5fw1n9iaex] {
    outline: 2px solid var(--brand-blue, #005EB8) !important;
    outline-offset: 2px;
}

/* Ensure Radzen buttons get the focus style */
:deep(.rz-button):focus-visible[b-5fw1n9iaex] {
    outline: 3px solid var(--brand-blue, #005EB8) !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(0, 94, 184, 0.25) !important;
}
/* /Components/FlightInfoComponent.razor.rz.scp.css */
/* ===============================
   Flight Info � Layout & Containers
   =============================== */

/* Main container for flight info section - ensures proper scrolling */
.flight-info-container[b-cs6vz5n3k2] {
    width: 100%;
    max-width: 100%;
    overflow: visible; /* Don't trap scroll events */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    touch-action: pan-y; /* Allow vertical scrolling */
}

/* Return trip toggle block - two-line layout */
.return-trip-block[b-cs6vz5n3k2] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    margin: 8px 0;
}

    /* Keep checkbox from shrinking */
    .return-trip-block input[type="checkbox"][b-cs6vz5n3k2] {
        flex-shrink: 0;
        margin-top: 3px;
        width: 18px;
        height: 18px;
    }

/* Container for the two-line label */
.return-trip-label-block[b-cs6vz5n3k2] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

/* Main row with "Add a Return Trip" and badge */
.return-trip-main-row[b-cs6vz5n3k2] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

    /* Icon in main row */
    .return-trip-main-row .rzi[b-cs6vz5n3k2] {
        font-size: 18px !important;
        line-height: 1;
        color: var(--brand-blue, var(--brand-blue));
    }

/* Main text styling */
.return-trip-main-text[b-cs6vz5n3k2] {
    cursor: pointer;
    user-select: none;
    font-size: 1rem;
    color: var(--brand-blue, var(--brand-blue));
    font-weight: 600;
    margin: 0;
}

/* Route text (smaller, secondary) */
.return-trip-route-text[b-cs6vz5n3k2] {
    cursor: pointer;
    user-select: none;
    font-size: 0.8rem;
    color: #666;
    font-weight: 400;
    margin: 0;
}

/* Legacy class - kept for compatibility */
.Add-A-Return-Trip-Text[b-cs6vz5n3k2] {
    cursor: pointer;
    user-select: none;
    font-size: 14px;
    color: var(--brand-blue, var(--brand-blue));
    font-weight: 500;
    flex: 1;
    min-width: 0;
}

/* Return trip badge - appears when leg 0 is complete but return not selected */
.return-trip-badge[b-cs6vz5n3k2] {
    background: linear-gradient(135deg, var(--brand-blue) 0%, #1e4d7b 100%);
    color: white;
    padding: 5px 12px;
    border-radius: 14px;
    font-size: 0.75rem;
    font-weight: 600;
    box-shadow: 0 3px 10px rgba(41, 99, 168, 0.4);
    animation: return-badge-pulse-b-cs6vz5n3k2 0.8s ease-in-out 3;
    white-space: nowrap;
}

@keyframes return-badge-pulse-b-cs6vz5n3k2 {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.08);
        opacity: 0.9;
    }
}

/* Mobile adjustments */
@media (max-width: 600px) {
    .return-trip-block[b-cs6vz5n3k2] {
        gap: 8px;
        padding: 4px 12px;
        margin: 0;
    }

        .return-trip-block input[type="checkbox"][b-cs6vz5n3k2] {
            width: 20px;
            height: 20px;
            min-width: 20px;
            margin-top: 2px;
        }

    .return-trip-main-text[b-cs6vz5n3k2] {
        font-size: 0.95rem;
    }

    .return-trip-route-text[b-cs6vz5n3k2] {
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .return-trip-badge[b-cs6vz5n3k2] {
        font-size: 0.7rem;
        padding: 4px 10px;
    }
}

.flight-info-content[b-cs6vz5n3k2] {
    width: 100%;
    max-width: 100%; /* Changed from 460px to match other components */
    margin: 0 auto;
    padding: 5px 5px 0;
    text-align: center;
}

.input-container[b-cs6vz5n3k2] {
    position: relative;
    margin: 6px 0;
    width: 100%;
}

.input-wrapper[b-cs6vz5n3k2] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.input-row[b-cs6vz5n3k2] {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex-wrap: nowrap;
}

.input-column[b-cs6vz5n3k2] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: auto;
}

/* ===============================
   Floating Picker (Airline / Flight # / Trip Type)
   =============================== */

.float-field .selected-picker[b-cs6vz5n3k2] {
    position: relative;
    z-index: 1;
    min-height: var(--field-min-h);
    padding: var(--field-pad-top) var(--field-pad-x) var(--field-pad-bot) var(--field-pad-x);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    color: var(--brand-blue-dark);
    font-size: var(--field-font-size);
    line-height: var(--field-line);
    border: 1px solid var(--field-border) !important;
    border-radius: var(--field-radius);
    background: #fff;
    box-sizing: border-box;
    cursor: pointer;
}

.float-field:focus-within .selected-picker[b-cs6vz5n3k2] {
    border-color: var(--field-focus) !important;
    box-shadow: 0 0 0 .25rem var(--field-ring) !important;
    outline: 0;
}

.float-label[b-cs6vz5n3k2] {
    z-index: 2;
}

.float-field.always-float .float-label[b-cs6vz5n3k2] {
    top: var(--label-float-top);
    transform: none;
    font-size: var(--label-float);
    opacity: .85;
}

/* Content layout inside picker */
.airline-picker .picker-value[b-cs6vz5n3k2],
.flightnum-picker .picker-value[b-cs6vz5n3k2],
.triptype-picker .picker-value[b-cs6vz5n3k2] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.airline-picker .airline-code[b-cs6vz5n3k2],
.flightnum-picker .flightnum[b-cs6vz5n3k2] {
    font-weight: 500;
    white-space: nowrap;
}

.airline-picker .airline-name[b-cs6vz5n3k2],
.flightnum-picker .flightnum[b-cs6vz5n3k2] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.airline-picker .dash[b-cs6vz5n3k2],
.flightnum-picker .dash[b-cs6vz5n3k2] {
    opacity: .6;
}

.flightnum-picker .chevron[b-cs6vz5n3k2],
.airline-picker .chevron[b-cs6vz5n3k2],
.triptype-picker .chevron[b-cs6vz5n3k2] {
    font-size: 12px;
    margin-left: 6px;
    color: #666;
}

/* Float label when focused or has a value */
.float-field:focus-within .float-label[b-cs6vz5n3k2],
.float-field.has-value .float-label[b-cs6vz5n3k2] {
    top: var(--label-float-top);
    transform: none;
    font-size: var(--label-float);
    opacity: .85;
}

/* ===============================
   Row 1: Date + Time (grid)
   =============================== */

.flight-top[b-cs6vz5n3k2] {
    display: grid;
    grid-template-columns: minmax(150px,1fr) minmax(120px,1fr);
    gap: 1px;
    justify-content: center;
}


@media (max-width: 360px) {
    .flight-row-airline[b-cs6vz5n3k2] {
        grid-template-columns: 1fr;
    }
}

/* Make inputs/pickers fill their grid cells */
.flight-top .input-column[b-cs6vz5n3k2],
.flight-row-airline .input-column[b-cs6vz5n3k2] {
    width: 100%;
}

.airline-picker .selected-picker[b-cs6vz5n3k2],
.flightnum-picker .selected-picker[b-cs6vz5n3k2],
.triptype-picker .selected-picker[b-cs6vz5n3k2] {
    width: 100%;
}

/* Slightly tighter picker padding on mobile */
@media (max-width: 500px) {
    .float-field .selected-picker[b-cs6vz5n3k2] {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* ===============================
   Trip Type Dropdown Menu
   =============================== */

.triptype-picker[b-cs6vz5n3k2] {
    position: relative;
}

    .triptype-picker .picker-menu[b-cs6vz5n3k2] {
        position: absolute;
        left: 0;
        right: 0;
        top: calc(100% + 4px);
        background: #fff;
        border: 1px solid var(--field-border);
        border-radius: var(--field-radius);
        box-shadow: 0 4px 12px rgba(0,0,0,.12);
        list-style: none;
        padding: 4px 0;
        margin: 0;
        z-index: 1006;
        color: var(--brand-blue-dark);
    }

        .triptype-picker .picker-menu li[b-cs6vz5n3k2] {
            padding: 8px 12px;
            cursor: pointer;
            color: var(--brand-blue-dark);
        }

            .triptype-picker .picker-menu li:hover[b-cs6vz5n3k2] {
                background: #f8f9fa;
            }

/* ===============================
   Modals & Lists
   =============================== */

.modal-backdrop[b-cs6vz5n3k2] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 1005;
    display: flex;
    justify-content: center;
    align-items: center;
}

.flight-info-modal-content[b-cs6vz5n3k2] {
    background: #fff;
    border-radius: 8px;
    width: 280px;
    max-height: 80vh;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
    animation: fadeIn-b-cs6vz5n3k2 .3s ease-in-out;
    display: flex;
    flex-direction: column;
}

.flight-info-airline-modal-content[b-cs6vz5n3k2] {
    background: #fff;
    border-radius: 8px;
    width: 400px;
    max-height: 80vh;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
    animation: fadeIn-b-cs6vz5n3k2 .3s ease-in-out;
    display: flex;
    flex-direction: column;
}

.modal-header[b-cs6vz5n3k2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid #ced4da;
}

    .modal-header h3[b-cs6vz5n3k2] {
        margin: 0;
        font-size: 1em;
        color: var(--brand-blue-dark);
    }

.close-button[b-cs6vz5n3k2] {
    background: none;
    border: none;
    font-size: 1em;
    cursor: pointer;
    padding: 0;
}

.modal-body[b-cs6vz5n3k2] {
    padding: 10px;
    font-size: 1em;
    line-height: 1.4;
}

.airline-search-box[b-cs6vz5n3k2] {
    width: 100%;
    padding: 8px 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
}

.airline-list[b-cs6vz5n3k2] {
    list-style: none;
    padding: 0;
    margin: 0 6px 6px 6px;
    max-height: 60vh;
    overflow-y: auto;
    width: calc(100% - 12px);
}

    .airline-list li[b-cs6vz5n3k2] {
        padding: 5px 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
        color: var(--brand-blue-dark);
        font-size: 1em;
    }

        .airline-list li:hover[b-cs6vz5n3k2] {
            background-color: #f8f9fa;
        }

.airport-section-header[b-cs6vz5n3k2],
.airline-section-header[b-cs6vz5n3k2] {
    display: block;
    text-align: center;
    color: white !important;
    margin: 4px 0;
    font-size: .6em !important;
    font-weight: 700;
    background-color: var(--brand-blue-dark) !important;
}

.airport-section-header[b-cs6vz5n3k2] {
    all: unset;
    display: block;
    text-align: center;
    color: #666;
    margin: 4px 0;
    font-size: .6em;
    font-weight: 500;
}

.no-flight-option[b-cs6vz5n3k2] {
    text-align: center;
    margin-top: 8px;
}

    .no-flight-option a[b-cs6vz5n3k2] {
        color: var(--brand-blue-light, var(--brand-blue-light));
        text-decoration: underline;
        font-size: .9em;
        cursor: pointer;
    }

        .no-flight-option a:hover[b-cs6vz5n3k2] {
            color: var(--brand-blue-dark, var(--brand-blue-dark));
        }

/* ===============================
   Flights modal + grid
   =============================== */

.flights-modal-content[b-cs6vz5n3k2] {
    background: #fff;
    padding: 5px;
    border-radius: 8px;
    width: 95%;
    max-width: 500px;
    box-shadow: 0 0 20px rgba(0,0,0,.3);
}

.flights-modal-body[b-cs6vz5n3k2] {
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: auto;
    line-height: 1.2; /* was 2; huge rows */
}

.flights-grid[b-cs6vz5n3k2] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* predictable columns */
    margin-top: 12px;
}

    /* Header: brand dark blue with white text, sticky */
    .flights-grid thead th[b-cs6vz5n3k2] {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--brand-blue-dark);
        color: #fff;
        border-bottom: 1px solid #ccc;
        text-align: center;
        padding: .12rem .28rem;
        font-size: .78rem;
        line-height: 1.05;
    }

    /* Body cells: brand blue text */
    .flights-grid tbody td[b-cs6vz5n3k2] {
        color: var(--brand-blue-dark);
        padding: 5px 8px; /* Increased from .12rem .28rem to match airline list */
        line-height: 1.4; /* Improved from 2.05 for better readability */
        vertical-align: middle;
        font-size: .9rem !important;
        word-wrap: break-word;
        overflow-wrap: anywhere;
    }

    .flights-grid tbody tr:hover[b-cs6vz5n3k2] {
        background-color: #eaf1fb;
        cursor: pointer;
        transition: background-color .2s ease;
    }

/* ===== Mobile compacting ===== */
@media (max-width: 430px) {
    /* Make it truly fit on small phones */
    .flights-grid[b-cs6vz5n3k2] {
        width: 100%;
    }

        .flights-grid thead th[b-cs6vz5n3k2],
        .flights-grid tbody td[b-cs6vz5n3k2] {
            padding: 6px 4px; /* Increased from .30rem .14rem for better mobile spacing */
            font-size: .7rem;
            line-height: 1.3; /* Improved from 2.05 for better readability */
        }

        /* Column widths (sum = 100%) */
        /* 1: Airline  2: From  3: To  4: Flt#  5: Departs  6: Arrives */
        .flights-grid th:nth-child(1)[b-cs6vz5n3k2],
        .flights-grid td:nth-child(1)[b-cs6vz5n3k2] {
            width: 12%;
        }
        /* narrower airline */
        .flights-grid th:nth-child(2)[b-cs6vz5n3k2],
        .flights-grid td:nth-child(2)[b-cs6vz5n3k2] {
            width: 12%;
            text-align: center;
            white-space: nowrap;
        }

        .flights-grid th:nth-child(3)[b-cs6vz5n3k2],
        .flights-grid td:nth-child(3)[b-cs6vz5n3k2] {
            width: 12%;
            text-align: center;
            white-space: nowrap;
        }

        .flights-grid th:nth-child(4)[b-cs6vz5n3k2],
        .flights-grid td:nth-child(4)[b-cs6vz5n3k2] {
            width: 20%;
            text-align: center;
            white-space: nowrap;
        }

        .flights-grid th:nth-child(5)[b-cs6vz5n3k2],
        .flights-grid td:nth-child(5)[b-cs6vz5n3k2] {
            width: 20%;
            text-align: right;
            white-space: nowrap;
            font-variant-numeric: tabular-nums;
        }

        .flights-grid th:nth-child(6)[b-cs6vz5n3k2],
        .flights-grid td:nth-child(6)[b-cs6vz5n3k2] {
            width: 8%;
            text-align: right;
            white-space: nowrap;
            font-variant-numeric: tabular-nums;
        }

        /* Airline: smaller font + allow 2 lines */
        .flights-grid td:nth-child(1)[b-cs6vz5n3k2] {
            white-space: normal;
            word-break: break-word;
            font-size: .64rem;
            line-height: 1.3; /* Improved from 2.05 */
        }

        /* Keep rows tappable but with better spacing */
        .flights-grid tbody tr > td[b-cs6vz5n3k2] {
            padding-top: 6px; /* Increased from .14rem */
            padding-bottom: 6px; /* Increased from .14rem */
        }
}

/* ===============================
   Misc / Helpers
   =============================== */

.help-link[b-cs6vz5n3k2] {
    margin-left: 8px;
    color: var(--brand-blue-light, var(--brand-blue-light));
    text-decoration: underline;
    cursor: pointer;
    font-size: .9rem;
    line-height: 1;
    margin-top: 2px;
}

    .help-link:hover[b-cs6vz5n3k2] {
        color: var(--brand-blue-dark, var(--brand-blue-dark));
    }

.error-message[b-cs6vz5n3k2] {
    color: #dc3545;
    font-size: 1em;
    margin-top: 8px;
    text-align: center;
}

hr[b-cs6vz5n3k2] {
    margin: .8rem 0;
    color: inherit;
    border: 0;
    border-top: var(--bs-border-width) solid;
    opacity: .25;
}

@keyframes fadeIn-b-cs6vz5n3k2 {
    from {
        opacity: 0;
        transform: scale(.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===============================
   Brand text colors on inputs + topline
   =============================== */

.flight-info-content input[b-cs6vz5n3k2],
.flight-info-content select[b-cs6vz5n3k2],
.flight-info-content textarea[b-cs6vz5n3k2] {
    color: var(--brand-blue-dark);
    caret-color: var(--brand-blue-dark);
}

    .flight-info-content input[b-cs6vz5n3k2]::placeholder,
    .flight-info-content textarea[b-cs6vz5n3k2]::placeholder {
        color: var(--brand-blue-dark);
        opacity: .6;
    }

.float-field .selected-picker[b-cs6vz5n3k2] {
    color: var(--brand-blue-dark);
}

.flight-topline[b-cs6vz5n3k2] {
    color: var(--brand-gold);
    font-weight: 600;
}
/* === Time Picker Modal (non-iOS path) === */
.timepicker-overlay[b-cs6vz5n3k2] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(1px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4000; /* above everything */
}

.timepicker-modal[b-cs6vz5n3k2] {
    width: min(92vw, 380px);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0,0,0,.20);
    padding: 16px;
}

.timepicker-header[b-cs6vz5n3k2] {
    font-weight: 600;
    font-size: 1.05rem;
    margin-bottom: 10px;
}

.timepicker-row[b-cs6vz5n3k2] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}

.timepicker-col label[b-cs6vz5n3k2] {
    display: block;
    font-size: .85rem;
    margin-bottom: 6px;
    color: #444;
}

.timepicker-col select[b-cs6vz5n3k2] {
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background: #fff;
    font-size: 1rem;
}

    .timepicker-col select:focus[b-cs6vz5n3k2] {
        outline: none;
        border-color: var(--brand-blue, var(--brand-blue));
        box-shadow: 0 0 0 3px rgba(66,133,244,.15);
    }

.timepicker-actions[b-cs6vz5n3k2] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

    .timepicker-actions .btn-primary[b-cs6vz5n3k2],
    .timepicker-actions .btn-secondary[b-cs6vz5n3k2] {
        border-radius: 8px;
        padding: 8px 14px;
        font-size: .95rem;
        border: 1px solid transparent;
        cursor: pointer;
    }

    .timepicker-actions .btn-primary[b-cs6vz5n3k2] {
        background: var(--brand-blue, var(--brand-blue));
        color: #fff;
        border-color: var(--brand-blue, var(--brand-blue));
    }

    .timepicker-actions .btn-secondary[b-cs6vz5n3k2] {
        background: #fff;
        color: var(--brand-blue, var(--brand-blue));
        border-color: var(--brand-blue, var(--brand-blue));
    }

/* Make the readonly time field look clickable on the custom (non-iOS) path */
#FlightTime[readonly][b-cs6vz5n3k2] {
    cursor: pointer;
}

/* Responsive tweaks */
@media (max-width: 480px) {
    .timepicker-modal[b-cs6vz5n3k2] {
        width: calc(100vw - 24px);
    }

    .timepicker-row[b-cs6vz5n3k2] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .timepicker-modal[b-cs6vz5n3k2] {
        transition: none;
    }
}
/* Placeholder tint for non-iOS readonly input */
#FlightTime[readonly][b-cs6vz5n3k2]::placeholder {
    color: #9ca3af; /* neutral-400 */
    opacity: 1; /* ensure visible in Safari/Edge */
}

/* Small hint under native iOS input (only when empty) */
.input-hint[b-cs6vz5n3k2] {
    margin-top: 4px;
    font-size: .85rem;
    color: #9ca3af;
}
/* Applies when size>1 turns <select> into a listbox */
.timepicker-col select[size][b-cs6vz5n3k2] {
    /* Optional: consistent height based on rows; browsers honor `size` first */
    --row-height: 2rem;
    height: calc(var(--row-height) * 8); /* match DropdownRows (8) */
    min-width: 100%;
    overflow: auto;
}

    .timepicker-col select[size]:focus[b-cs6vz5n3k2] {
        outline: none;
        border-color: var(--brand-blue, var(--brand-blue));
        box-shadow: 0 0 0 3px rgba(66,133,244,.15);
    }

.timepicker-col select[b-cs6vz5n3k2] {
    width: 100%;
    min-width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background: #fff;
    font-size: 1rem;
}

    .timepicker-col select:focus[b-cs6vz5n3k2] {
        outline: none;
        border-color: var(--brand-blue, var(--brand-blue));
        box-shadow: 0 0 0 3px rgba(66,133,244,.15);
    }




/* ==============================================================================
   NOTE: This component now uses the reusable .section-frame and .frame-heading 
   classes from site.css for the bordered flight info section with label.
   
   The markup uses:
   - <div class="section-frame"> for the container
   - <span class="frame-heading"> for the label on the border
   
   Colors defined in site.css:
   - Frame background: lightcyan
   - Frame heading background: powderblue
   - Border: var(--brand-blue)
   ============================================================================== */


/* Small instruction line above pickup */
.address-section-header[b-cs6vz5n3k2] {
    font-size: .9rem;
    color: #555;
    margin-bottom: 8px;
}

/* Keep each address on its own row */
.address-row[b-cs6vz5n3k2] {
    display: block;
}


/* Ensure the wrapper is positioned for floating labels */
.float-field[b-cs6vz5n3k2] {
    position: relative;
}

    /* Make date/time tall enough and leave room for the floating label */
    .float-field input[type="date"][b-cs6vz5n3k2],
    .float-field input[type="time"][b-cs6vz5n3k2] {
        height: 56px; /* was too short,  */
        line-height: 56px;
        padding-top: 18px; /* room for the label when not floated */
        padding-bottom: 8px;
        padding-left: 12px; /* consistent text inset */
    }

    /* Floating label baseline position and behavior */
    .float-field .float-label[b-cs6vz5n3k2] {
        position: absolute;
        left: 12px;
        top: 14px; /* sits inside the input when empty */
        pointer-events: none;
        transition: top .15s ease, font-size .15s ease;
        background: #fff; /* mask input border/text when floated */
        padding: 0 4px;
        z-index: 1; /* keep it above the input text */
    }

    /* When there is a value OR the field is focused, float the label up */
    .float-field.has-value .float-label[b-cs6vz5n3k2],
    .float-field:focus-within .float-label[b-cs6vz5n3k2] {
        top: 4px;
        font-size: 12px; /* shrink a bit so it doesn't overlap */
    }


    /* Float label support for text inputs (Flight #) */
    .float-field input[type="text"][b-cs6vz5n3k2],
    .float-field input:not([type])[b-cs6vz5n3k2] {
        height: 56px !important;
        line-height: 56px !important;
        padding-top: 18px; /* room for the label when not floated */
        padding-bottom: 8px;
        padding-left: 12px;
    }

:root[b-cs6vz5n3k2] {
    --label-float-top: 4px !important;
    --label-float: 12px;
}
/* Airline picker floating label fix */
.airline-picker[b-cs6vz5n3k2] {
    position: relative;
    overflow: visible; /* don't clip the label */
}

    .airline-picker .float-label[b-cs6vz5n3k2] {
        position: absolute;
        left: 12px;
        top: 4px !important; /* same minimized height as other fields */
        font-size: 12px;
        padding: 0 4px;
        background: #fff; /* mask border under text */
        pointer-events: none; /* clicks pass through to picker */
        z-index: 3; /* above picker contents */
    }

    /* Give the picker content room so the label doesn't overlap it */
    .airline-picker .selected-picker[b-cs6vz5n3k2] {
        padding-top: 18px;
        position: relative;
        z-index: 1;
    }


/* Invisible full-screen click-off layer shown when the Trip Type menu is open */
.picker-overlay[b-cs6vz5n3k2] {
    position: fixed;
    inset: 0; /* top/right/bottom/left: 0 */
    background: transparent;
    z-index: 998; /* below the menu, above the page */
}

/* Ensure the Trip Type menu sits above the overlay */
.triptype-picker .picker-menu[b-cs6vz5n3k2] {
    position: absolute;
    z-index: 999;
}
/* Trip Type floating label */
.triptype-picker[b-cs6vz5n3k2] {
    position: relative;
    overflow: visible; /* ensure the label isn't clipped */
}

    .triptype-picker .float-label[b-cs6vz5n3k2] {
        position: absolute;
        left: 12px;
        top: 4px !important; /* same minimized position as others */
        font-size: 12px;
        padding: 0 4px;
        background: #fff; /* mask the border under the text */
        pointer-events: none;
        z-index: 3;
    }

    /* Space for the label above the picker value */
    .triptype-picker .selected-picker[b-cs6vz5n3k2] {
        padding-top: 18px;
        position: relative;
        z-index: 1;
    }



/* Unify control height */
:root[b-cs6vz5n3k2] {
    --control-h: 56px !important;
}

.float-field input[type="text"][b-cs6vz5n3k2],
.float-field input[type="date"][b-cs6vz5n3k2],
.float-field input[type="time"][b-cs6vz5n3k2],
.airline-picker .selected-picker[b-cs6vz5n3k2],
.triptype-picker .selected-picker[b-cs6vz5n3k2] {
    height: var(--control-h);
    line-height: var(--control-h);
    padding-top: 18px; /* room for floating label */
    padding-bottom: 8px;
    box-sizing: border-box;
}

/* Floating label positions (consistent across all) */
.float-field .float-label[b-cs6vz5n3k2] {
    top: 16px;
}

.float-field.has-value .float-label[b-cs6vz5n3k2],
.float-field:focus-within .float-label[b-cs6vz5n3k2] {
    top: 4px;
    font-size: 12px;
}
/* Lock date/time floating labels in the high position */
.float-field.always-float[b-cs6vz5n3k2] {
    --label-float-top: 4px;
}

    .float-field.always-float .float-label[b-cs6vz5n3k2],
    .float-field.always-float:focus-within .float-label[b-cs6vz5n3k2] {
        top: 4px !important; /* same position focused/unfocused */
        font-size: var(--label-float) !important;
        transition: none !important; /* no slide animation */
    }


/* Airline: big hint when empty, small/top when has value or focused */
:root[b-cs6vz5n3k2] {
    --label-inside: 14px;
    --label-inside-top: 18px; /* tweak to your eye; 18�20px centers well in 56px fields */
    --label-float-top: 4px; /* your unified float position */
    --label-float: 12px;
}

.airline-picker[b-cs6vz5n3k2] {
    position: relative;
    overflow: visible;
}

    /* inside (empty) */
    .airline-picker .float-label[b-cs6vz5n3k2] {
        position: absolute;
        left: 12px;
        top: var(--label-inside-top);
        font-size: var(--label-inside);
        padding: 0 4px;
        background: #fff;
        pointer-events: none;
        z-index: 3;
    }

    /* floated (has value or focus) */
    .airline-picker.has-value .float-label[b-cs6vz5n3k2],
    .airline-picker:focus-within .float-label[b-cs6vz5n3k2] {
        top: var(--label-float-top);
        font-size: var(--label-float);
    }

.flights-grid td.emph-time[b-cs6vz5n3k2] {
    font-weight: 700;
}


/* === Flight Info: section headers (append at end) ======================== */
.flight-info-content[b-cs6vz5n3k2] {
    /* tokens (map to your existing brand vars if present) */
    --fi-blue: var(--brand-blue, #005EB8);
    --fi-blue-dark: var(--brand-blue-dark, #0F2B5B);
    --fi-blue-50: #F2F6FF;
    --fi-gold: var(--brand-gold, #FFB300);
    --fi-border: #DFE3EE;
}

/* Primary section header (used above each block like Date/Time, Airline/Flight/Trip) */
.fi-heading[b-cs6vz5n3k2] {
    margin: 10px 0 6px 0;
    padding: 8px 10px;
    color: var(--fi-blue-dark);
    background: var(--fi-blue-50);
    border-left: 6px solid var(--fi-blue);
    border-radius: 8px;
    font-weight: 700;
    line-height: 1.2;
}

/* Optional smaller header (if you have sub-sections per leg) */
.fi-subheading[b-cs6vz5n3k2] {
    margin: 8px 0 4px 0;
    padding: 6px 10px;
    color: var(--fi-blue-dark);
    background: #F7FAFF;
    border-left: 4px solid var(--fi-blue);
    border-radius: 6px;
    font-weight: 600;
}

/* Keep forms visually tied to the header */
.fi-block[b-cs6vz5n3k2] {
    border: 1px solid var(--fi-border);
    border-radius: 10px;
    padding: 10px;
    background: #fff;
}

/* Make modal titles match the dark brand color */
.modal-header h3[b-cs6vz5n3k2] {
    color: var(--fi-blue-dark);
}
/* Tokens (reuse your brand vars if you have them) */
.flight-info-content[b-cs6vz5n3k2], :root[b-cs6vz5n3k2] {
    --fi-blue: var(--brand-blue, #005EB8);
    --fi-blue-dark: var(--brand-blue-dark, #0F2B5B);
    --fi-blue-50: #F2F6FF;
}

/* Highlighted �From � ? �� row */
/* .fi-route - MOVED TO site.css for global use across all components */
/* Normalize date input height to match other 56px controls */
.flight-info-content[b-cs6vz5n3k2] {
    --fi-input-h: 56px;
}

    .flight-info-content input[type="date"][b-cs6vz5n3k2] {
        height: var(--fi-input-h);
        min-height: var(--fi-input-h);
        line-height: calc(var(--fi-input-h) - 2px); /* accounts for 1px borders */
        box-sizing: border-box;
        padding-block: 0; /* prevent vertical padding differences */
        padding-inline: 12px;
        font-size: 16px; /* consistent metrics + avoids iOS zoom */
        /* Keep native picker icon */
    }

        /* Remove extra internal padding in WebKit (Chrome/Safari) */
        .flight-info-content input[type="date"][b-cs6vz5n3k2]::-webkit-datetime-edit,
        .flight-info-content input[type="date"][b-cs6vz5n3k2]::-webkit-datetime-edit-fields-wrapper,
        .flight-info-content input[type="date"][b-cs6vz5n3k2]::-webkit-datetime-edit-text,
        .flight-info-content input[type="date"][b-cs6vz5n3k2]::-webkit-datetime-edit-month-field,
        .flight-info-content input[type="date"][b-cs6vz5n3k2]::-webkit-datetime-edit-day-field,
        .flight-info-content input[type="date"][b-cs6vz5n3k2]::-webkit-datetime-edit-year-field {
            padding: 0;
        }

        .flight-info-content input[type="date"][b-cs6vz5n3k2]::-webkit-date-and-time-value {
            min-height: auto;
        }

        .flight-info-content input[type="date"][b-cs6vz5n3k2]::-webkit-calendar-picker-indicator {
            margin: 0 8px 0 0; /* keeps icon aligned without changing height */
            padding: 0;
        }

    /* If you also use a time input, normalize it too */
    .flight-info-content input[type="time"][b-cs6vz5n3k2] {
        height: var(--fi-input-h);
        min-height: var(--fi-input-h);
        line-height: calc(var(--fi-input-h) - 2px);
        box-sizing: border-box;
        padding-block: 0;
        padding-inline: 2px;
        font-size: 16px;
    }
/* Make heading labels span full width (even inside flex parents) */
label.app-heading[b-cs6vz5n3k2] {
    display: block;
    width: 100%;
    flex: 1 1 100%;
    align-self: stretch;
    box-sizing: border-box;
}

/* optional helper if you want centered text */
.app-heading.center[b-cs6vz5n3k2] {
    text-align: center;
}


/* Make input columns compact inside the Flight Info card only */
.fi-block .input-column[b-cs6vz5n3k2] {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 8px; /* space between rows */
}

/* Reduce inner field spacing */
.fi-block .float-field[b-cs6vz5n3k2] {
    margin-bottom: 8px !important; /* was ~22px globally */
}

/* Ensure controls don't force extra height */
.fi-block .float-input.form-control[b-cs6vz5n3k2],
.fi-block .selected-picker[b-cs6vz5n3k2],
.fi-block .selected-country[b-cs6vz5n3k2] {
    min-height: 46px !important; /* tighten control height */
    padding-top: 16px !important; /* keep label centered when empty */
    padding-bottom: 8px !important;
}

/* Float label positions for the tighter control */
.fi-block .float-input:placeholder-shown + .float-label[b-cs6vz5n3k2] {
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
}

.fi-block .float-input:focus + .float-label[b-cs6vz5n3k2],
.fi-block .float-input:not(:placeholder-shown) + .float-label[b-cs6vz5n3k2] {
    top: 6px;
    transform: none;
    font-size: .78rem;
}

.input-column[b-cs6vz5n3k2] {
    line-height: normal !important;
    height: 60px;
    padding-top: 6px;
}


.fi-block .input-column[b-cs6vz5n3k2] {
    line-height: normal !important;
}

.flight-date[b-cs6vz5n3k2] {
    padding-top: 12px !important;
}



/* === Mobile tweaks: make flights modal narrower, Flight # slimmer === */
@media (max-width: 430px) {
    /* Keep the dialog comfortably within the viewport */
    .flights-modal-content[b-cs6vz5n3k2] {
        width: 96vw;
        max-width: 420px;
    }

    /* Rebalance table columns so nothing overflows */
    /* 1: Airline | 2: From | 3: To | 4: Flight # | 5: Departs | 6: Arrives */
    .flights-grid th:nth-child(1)[b-cs6vz5n3k2],
    .flights-grid td:nth-child(1)[b-cs6vz5n3k2] {
        width: 10%;
    }
    /* Airline */
    .flights-grid th:nth-child(2)[b-cs6vz5n3k2],
    .flights-grid td:nth-child(2)[b-cs6vz5n3k2] {
        width: 10%;
        text-align: center;
        white-space: nowrap;
    }
    /* From */
    .flights-grid th:nth-child(3)[b-cs6vz5n3k2],
    .flights-grid td:nth-child(3)[b-cs6vz5n3k2] {
        width: 10%;
        text-align: center;
        white-space: nowrap;
    }
    /* To */
    .flights-grid th:nth-child(4)[b-cs6vz5n3k2],
    .flights-grid td:nth-child(4)[b-cs6vz5n3k2] {
        width: 12%;
        text-align: center;
        white-space: nowrap;
    }
    /* Flight # (narrower) */
    .flights-grid th:nth-child(5)[b-cs6vz5n3k2],
    .flights-grid td:nth-child(5)[b-cs6vz5n3k2] {
        width: 16%;
        text-align: right;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }
    /* Departs */
    .flights-grid th:nth-child(6)[b-cs6vz5n3k2],
    .flights-grid td:nth-child(6)[b-cs6vz5n3k2] {
        width: 16%;
        text-align: right;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }
    /* Arrives */

    /* Abbreviate long headers to save horizontal space */
    .flights-grid thead th:nth-child(4)[b-cs6vz5n3k2],
    .flights-grid thead th:nth-child(5)[b-cs6vz5n3k2],
    .flights-grid thead th:nth-child(6)[b-cs6vz5n3k2] {
        font-size: 0;
    }

        .flights-grid thead th:nth-child(4)[b-cs6vz5n3k2]::after {
            content: 'Flt#';
            font-size: .7rem;
        }

        .flights-grid thead th:nth-child(5)[b-cs6vz5n3k2]::after {
            content: 'Depart';
            font-size: .7rem;
        }

        .flights-grid thead th:nth-child(6)[b-cs6vz5n3k2]::after {
            content: 'Arrive';
            font-size: .7rem;
        }

    /* Slightly tighter rows for better fit */
    .flights-grid thead th[b-cs6vz5n3k2],
    .flights-grid tbody td[b-cs6vz5n3k2] {
        padding: .28rem .12rem;
        font-size: .7rem;
        line-height: 1.6;
    }
}






/* Radzen input sizing within our floating field */
.float-field[b-cs6vz5n3k2] {
    position: relative;
}

    .float-field .rz-inputtext[b-cs6vz5n3k2] {
        height: 56px; /* match your control height */
        line-height: 56px;
        padding-top: 18px; /* room for label when not floated */
        padding-bottom: 8px;
        padding-left: 12px;
        box-sizing: border-box;
    }

    /* Float label behavior (works with your existing .float-label styles) */
    .float-field.has-value .float-label[b-cs6vz5n3k2],
    .float-field:focus-within .float-label[b-cs6vz5n3k2] {
        top: 4px;
        font-size: 12px;
        opacity: .85;
    }




/* Full width + sizing for the DatePicker */
.fi-datetime[b-cs6vz5n3k2] {
    display: block;
    width: 100%;
}

    /* IMPORTANT: style Radzen�s inner input across the component boundary */
    .float-field[b-cs6vz5n3k2]  .rz-inputtext,
    .fi-datetime[b-cs6vz5n3k2]  .rz-inputtext {
        height: 56px;
        line-height: 56px;
        padding-top: 18px; /* space for floating label */
        padding-bottom: 8px;
        padding-left: 12px;
        box-sizing: border-box;
        /* match your other fields */
        font-family: inherit;
        font-size: 16px;
        color: var(--brand-blue-dark, var(--brand-blue-dark));
        border-radius: 8px;
        width: 100%;
    }

        /* Focus state */
        .fi-datetime[b-cs6vz5n3k2]  .rz-inputtext:focus {
            outline: none;
            border-color: var(--brand-blue, #1B63C7);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-blue, #1B63C7) 22%, transparent);
        }

/* Make the popup sit above your modals */
:root :where(.fi-datetime)[b-cs6vz5n3k2]  .rz-datepicker-popup,
:root :where(.fi-datetime)[b-cs6vz5n3k2]  .rz-timepicker-popup {
    z-index: 3000;
}

/* Span both columns in the .flight-top grid */
.flight-top .input-column--full[b-cs6vz5n3k2] {
    grid-column: 1 / -1;
    width: 100%;
}


/* Tiny �meaning� chip that sits inside the field */
.float-field .time-chip[b-cs6vz5n3k2] {
    position: absolute;
    right: 44px; /* leave room for Radzen�s calendar icon */
    top: 14px; /* aligns when label is inside */
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--fi-blue-50, #F2F6FF);
    color: var(--fi-blue-dark, #0F2B5B);
    border: 1px solid var(--fi-border, #DFE3EE);
    font-size: .75rem;
    line-height: 1.4;
    pointer-events: none; /* don�t steal clicks */
    white-space: nowrap;
}

/* When the label floats, nudge the chip up a bit to match */
.float-field.has-value .time-chip[b-cs6vz5n3k2],
.float-field:focus-within .time-chip[b-cs6vz5n3k2] {
    top: 6px;
}


/* Keep the chip visible and readable on small screens */
.float-field .time-chip[b-cs6vz5n3k2] {
    position: absolute;
    right: 44px; /* leaves room for calendar icon */
    top: 14px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #F2F6FF;
    color: var(--brand-blue-dark);
    border: 1px solid var(--brand-blue);
    font-size: .75rem;
    line-height: 1.4;
    pointer-events: none;
    white-space: nowrap;
    max-width: 55%; /* prevent overlap; truncate if needed */
    overflow: hidden;
    text-overflow: ellipsis;
}

.float-field.has-value .time-chip[b-cs6vz5n3k2],
.float-field:focus-within .time-chip[b-cs6vz5n3k2] {
    top: 20px;
}

/* Tighten on very narrow phones */
@media (max-width: 400px) {
    .float-field .time-chip[b-cs6vz5n3k2] {
        right: 40px;
        font-size: .55rem;
        font-weight: 600;
        max-width: 35%;
    }
}


/* Carrier row: Airline | Flight # (narrow) | Trip Type (wider) */
.flight-row-airline[b-cs6vz5n3k2] {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) /* Airline */
    minmax(90px, 0.55fr) /* Flight # narrower */
    minmax(220px, 1.45fr) /* Trip Type wider */;
    gap: 12px;
}

    /* Prevent overflow forcing wraps */
    .flight-row-airline .input-column[b-cs6vz5n3k2] {
        min-width: 0;
    }

    /* Keep values to one line */
    .flight-row-airline .picker-value[b-cs6vz5n3k2] {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* Mobile: still 3 cols but tighter; Trip Type keeps more room */
@media (max-width: 420px) {
    .flight-row-airline[b-cs6vz5n3k2] {
        grid-template-columns: 1fr 0.6fr 1.2fr;
        gap: 5px;
    }

    .float-field input[type="text"][b-cs6vz5n3k2],
    .airline-picker .selected-picker[b-cs6vz5n3k2],
    .triptype-picker .selected-picker[b-cs6vz5n3k2] {
        height: 44px;
        padding-top: 14px;
        padding-bottom: 6px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .flight-row-airline .picker-value[b-cs6vz5n3k2],
    .flight-row-airline input.form-control[b-cs6vz5n3k2] {
        font-size: 0.95rem;
        text-align: center;
    }
}
/* Ensure Radzen dropdown panels overlay sticky footers/buttons */
:root :where(.rz-dropdown-panel)[b-cs6vz5n3k2] {
    z-index: 5000; /* higher than your bottom nav/buttons */
}


/* Make the dropdown fill its cell and match your 56px control height */
.triptype-picker[b-cs6vz5n3k2],
.triptype-picker[b-cs6vz5n3k2]  .rz-dropdown,
.triptype-picker[b-cs6vz5n3k2]  .rz-inputtext {
    width: 100%;
    max-width: 100%;
}

/* Your file already normalizes Radzen input height via ::deep .rz-inputtext.
   This ensures the Trip Type field inherits the same metrics. */



/* Make all three columns shrink within the frame */
.flight-row-airline[b-cs6vz5n3k2] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) /* Airline */
    minmax(0, 0.6fr) /* Flight # */
    minmax(0, 1.4fr); /* Trip Type */
    gap: 6px;
}

    /* Don�t let the Trip Type widget size itself wider than its grid cell */
    .flight-row-airline .input-column[b-cs6vz5n3k2] {
        min-width: 0;
    }

.triptype-picker[b-cs6vz5n3k2],
.triptype-picker[b-cs6vz5n3k2]  .rz-dropdown {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

    /* Ensure long labels don�t stretch the column */
    .triptype-picker[b-cs6vz5n3k2]  .rz-dropdown-label {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }



@media (max-width: 480px) {
    .flight-row-airline[b-cs6vz5n3k2] {
        /* Airline | Flight # | Trip Type */
        grid-template-columns: minmax(0, 1.0fr) /* shrink Airline a bit */
        minmax(0, 1.0fr) /* widen Flight # */
        minmax(0, 1fr); /* Trip Type unchanged */
        gap: 6px;
        text-align: center;
    }

        /* let the Flight # control actually use the space */
        .flight-row-airline .input-column--flightnum[b-cs6vz5n3k2] {
            min-width: 0;
            text-align: center !important;
        }

            .flight-row-airline .input-column--flightnum[b-cs6vz5n3k2]  .rz-inputtext {
                width: 100%;
                max-width: 100%;
                box-sizing: border-box;
                text-align: center;
            }
}
/* Center the text inside the Radzen textbox / inputmask for Flight # */
.flight-row-airline .input-column--flightnum[b-cs6vz5n3k2]  .rz-inputtext,
.flight-row-airline .input-column--flightnum[b-cs6vz5n3k2]  .rz-inputmask {
    text-align: center !important;
    font-variant-numeric: tabular-nums;
}

/* Center the text inside a plain <input type="text"> (if that�s what you use) */
.flight-row-airline .input-column--flightnum input[type="text"][b-cs6vz5n3k2] {
    text-align: center !important;
    font-variant-numeric: tabular-nums;
}

/* Center the placeholder too (optional) */
.flight-row-airline .input-column--flightnum [b-cs6vz5n3k2]::placeholder {
    text-align: center !important;
}

/* Faux �picker� button version of Flight # */
.flightnum-picker .selected-picker[b-cs6vz5n3k2] {
    /* keep your layout; space-between is fine if .picker-value flexes */
}

    .flightnum-picker .selected-picker .picker-value[b-cs6vz5n3k2] {
        display: flex;
        flex: 1 1 auto;
        justify-content: center;
        text-align: center !important;
        font-variant-numeric: tabular-nums;
    }

/* --- Center Flight # in the faux picker button --- */
/* Your global rule sets .selected-picker { justify-content: space-between }.
   Override *only* for the Flight # picker and give the label its own center column. */
.flightnum-picker .selected-picker[b-cs6vz5n3k2] {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr; /* left spacer | label | chevron */
    align-items: center;
    justify-content: normal !important; /* beat space-between */
}

    .flightnum-picker .selected-picker .picker-value[b-cs6vz5n3k2] {
        grid-column: 2; /* the middle track */
        justify-self: center; /* center the label block */
        text-align: center; /* center text inside */
        font-variant-numeric: tabular-nums;
    }

    /* keep the chevron parked to the right column */
    .flightnum-picker .selected-picker .chevron[b-cs6vz5n3k2] {
        grid-column: 3;
        justify-self: end;
    }

/* If your label text is wrapped in a .flightnum span, center it too */
.flightnum-picker .picker-value .flightnum[b-cs6vz5n3k2] {
    text-align: center;
    margin: 0 auto; /* guard against any stray inline spacing */
}

/* --- Center Flight # in a plain <input> (if used) --- */
.input-column--flightnum input[type="text"][b-cs6vz5n3k2],
.input-column--flightnum input:not([type])[b-cs6vz5n3k2] {
    text-align: center !important;
    font-variant-numeric: tabular-nums;
}

/* (optional) center the placeholder as well */
.input-column--flightnum [b-cs6vz5n3k2]::placeholder {
    text-align: center;
}


/* Boxed toggle matches other fields */
.international-picker .selected-picker[b-cs6vz5n3k2] {
    /* your .selected-picker base styles already provide border, radius, etc. */
    display: flex;
    align-items: center;
    justify-content: center; /* center switch + labels */
    gap: 5px;
    width: 100%;
}

/* Ensure 56px height like other fields */
:root[b-cs6vz5n3k2] {
    --control-h: 56px !important;
}

.international-picker .selected-picker[b-cs6vz5n3k2] {
    height: var(--control-h);
    line-height: var(--control-h);
    padding-top: 18px; /* keep room for the floated label */
    padding-bottom: 8px;
    box-sizing: border-box;
}

/* Small �No / Yes� labels around the switch */
.intl-switch-text[b-cs6vz5n3k2] {
    font-size: .95rem;
    color: var(--brand-blue);
    line-height: 1;
    user-select: none;
}

/* Keep the switch from stretching the box */
.international-picker .selected-picker :where(.rz-switch, input[type="checkbox"])[b-cs6vz5n3k2] {
    flex: 0 0 auto;
}

/* If this field sits in the 3-col row, allow it to shrink cleanly */
.flight-row-airline .input-column--intl[b-cs6vz5n3k2] {
    min-width: 0;
}
/* === International picker: float the label like the others === */
.international-picker[b-cs6vz5n3k2] {
    position: relative;
    overflow: visible; /* don�t clip the label */
}

    .international-picker .float-label[b-cs6vz5n3k2] {
        position: absolute;
        left: 12px;
        top: 4px !important; /* same �floated� position */
        font-size: 12px;
        padding: 0 4px;
        background: #fff; /* mask the border under text */
        color: var(--brand-blue); /* match your brand text color */
        pointer-events: none;
        z-index: 3; /* above .selected-picker */
    }

    /* ensure room for the label inside the box */
    .international-picker .selected-picker[b-cs6vz5n3k2] {
        padding-top: 18px;
        position: relative;
        z-index: 1;
    }
/* === International picker: float the label like the others === */
.international-picker[b-cs6vz5n3k2] {
    position: relative;
    overflow: visible; /* don�t clip the label */
}

    .international-picker .float-label[b-cs6vz5n3k2] {
        position: absolute;
        left: 12px;
        top: 4px !important; /* same �floated� position */
        font-size: 12px;
        padding: 0 4px;
        background: #fff; /* mask the border under text */
        color: var(--brand-blue); /* match your brand text color */
        pointer-events: none;
        z-index: 3; /* above .selected-picker */
    }

    /* ensure room for the label inside the box */
    .international-picker .selected-picker[b-cs6vz5n3k2] {
        padding-top: 18px;
        position: relative;
        z-index: 1;
    }
/* Make all hints in the Airline | Flight # | Trip Type row a fixed size */
.flight-row-airline .float-label[b-cs6vz5n3k2] {
    font-size: 12px !important;
}
/* Make it obvious the whole frame is clickable */
.fi-datetime.clickable[b-cs6vz5n3k2] {
    cursor: pointer;
}
    /* Keep cursor text on the actual input so it still looks like a field */
    .fi-datetime.clickable input[b-cs6vz5n3k2] {
        cursor: text;
    }



/* Ensure the field is a positioning context */
.float-field[b-cs6vz5n3k2] {
    position: relative;
}



/* Keep your input/label styles as-is (you already have them) */
/* Clickable Yes/No labels */
.intl-switch-text[b-cs6vz5n3k2] {
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    outline: none;
}

    .intl-switch-text:hover[b-cs6vz5n3k2] {
        background: #f8f9fa;
    }

    .intl-switch-text:focus-visible[b-cs6vz5n3k2] {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-blue, #1B63C7) 22%, transparent);
    }

    .intl-switch-text.active[b-cs6vz5n3k2] {
        font-weight: 700;
        text-decoration: underline;
    }



/* Since we removed the built-in button, keep some right padding for chips/custom icon */
.fi-datetime[b-cs6vz5n3k2]  .rz-inputtext {
    padding-right: 44px; /* same space you budgeted for the icon */
}

.fi-datetime[b-cs6vz5n3k2] {
    scroll-margin-top: 72px;
}



    /* Match Radzen input height + layout assumptions */
    .fi-datetime .selected-picker[b-cs6vz5n3k2] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 56px; /* Radzen input height */
        padding: 0 12px;
        border: 1px solid var(--field-border, #d9d9d9);
        border-radius: 4px;
        background: #fff;
    }

    /* Placeholder vs value */
    .fi-datetime .picker-placeholder[b-cs6vz5n3k2] {
        opacity: .75;
        color: var(--field-placeholder, #8a8a8a);
    }

    .fi-datetime .picker-value[b-cs6vz5n3k2] {
        color: var(--field-text, #222);
    }

    /* Calendar icon placement */
    .fi-datetime .picker-icon[b-cs6vz5n3k2] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        margin-left: 8px;
        flex: 0 0 auto;
        opacity: .8;
    }

    /* Focus ring to mimic Radzen focus */
    .fi-datetime.is-focused .selected-picker[b-cs6vz5n3k2] {
        border-color: var(--field-focus, #3b82f6) !important;
        box-shadow: 0 0 0 .2rem var(--field-ring, rgba(59,130,246,.15)) !important;
    }

    /* Floating label behavior */
    .fi-datetime .float-label[b-cs6vz5n3k2] {
        transition: transform .16s ease, color .16s ease, top .16s ease;
        transform-origin: left top;
    }

    /* Float when focused OR has a value (like Radzen) */
    .fi-datetime.is-focused .float-label[b-cs6vz5n3k2],
    .fi-datetime.has-value .float-label[b-cs6vz5n3k2] {
        color: var(--brand-blue, #0a66c2);
        transform: translateY(-14px) scale(.86);
    }


/* Button resets so it looks like your Radzen input face */
.float-field.fi-datetime[b-cs6vz5n3k2] {
    position: relative;
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 0;
}

/* The �box� */
.fi-datetime .selected-picker[b-cs6vz5n3k2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px; /* Radzen input height */
    padding: 0 12px;
    border: 1px solid var(--field-border, #d9d9d9);
    border-radius: 4px;
    background: #fff;
}

/* Placeholder vs value */
.fi-datetime .picker-placeholder[b-cs6vz5n3k2] {
    opacity: .75;
    color: var(--field-placeholder, #8a8a8a);
}

.fi-datetime .picker-value[b-cs6vz5n3k2] {
    color: var(--field-text, #222);
}

/* Icon */
.fi-datetime .picker-icon[b-cs6vz5n3k2] {
    margin-left: 8px;
    flex: 0 0 auto;
    opacity: .85;
}

/* Focus ring: button focus triggers it */
.float-field.fi-datetime:focus .selected-picker[b-cs6vz5n3k2] {
    border-color: var(--field-focus, #3b82f6) !important;
    box-shadow: 0 0 0 .2rem var(--field-ring, rgba(59,130,246,.15)) !important;
    outline: 0;
}

/* Floating label positioning (56px baseline) */
.float-field.fi-datetime .float-label[b-cs6vz5n3k2] {
    position: absolute;
    left: 12px;
    top: 18px;
    pointer-events: none;
    transition: transform .16s ease, color .16s ease;
    transform-origin: left top;
}

/* Float when focused OR when there�s a value */
.float-field.fi-datetime:focus .float-label[b-cs6vz5n3k2],
.fi-datetime.has-value .float-label[b-cs6vz5n3k2] {
    color: var(--brand-blue, #0a66c2);
    transform: translateY(-14px) scale(.86);
}

/* Click affordance */
.fi-datetime.clickable .selected-picker[b-cs6vz5n3k2] {
    cursor: pointer;
}
/* Overall scale (quick win) */
.dp-sm[b-cs6vz5n3k2] {
    --dp-scale: 0.59; /* try 0.85�0.95 */
}

.dp-sm[b-cs6vz5n3k2] {
    transform-origin: top left;
}
    /* in case the panel uses transforms */
    .dp-sm[b-cs6vz5n3k2],
    .dp-sm *[b-cs6vz5n3k2] {
        /* If Radzen wraps the panel, the class may be on the root popup element. */
    }

        /* Typography + hit-targets */
        .dp-sm .rz-calendar[b-cs6vz5n3k2] {
            font-size: 0.875rem;
        }
            /* smaller text */
            .dp-sm .rz-calendar .rz-calendar-day[b-cs6vz5n3k2],
            .dp-sm .rz-calendar .rz-calendar-month[b-cs6vz5n3k2] {
                width: 2rem;
                height: 2rem;
                line-height: 2rem; /* smaller cells */
                padding: 0;
            }

            .dp-sm .rz-calendar .rz-calendar-title[b-cs6vz5n3k2] {
                padding: .25rem .5rem;
            }

        /* Time section trims */
        .dp-sm .rz-timepicker[b-cs6vz5n3k2] {
            font-size: 0.875rem;
        }

            .dp-sm .rz-timepicker .rz-inputtext[b-cs6vz5n3k2] {
                width: 2.75rem;
            }
            /* hour/min boxes */
            .dp-sm .rz-timepicker .rz-seconds[b-cs6vz5n3k2] {
                display: none;
            }
/* if seconds still render */
/* popup calendar compaction � older/alt wrappers */
.rz-popup .rz-calendar[b-cs6vz5n3k2],
.rz-calendar.rz-calendar-popup[b-cs6vz5n3k2],
body > div[class*="rz-overlay"] .rz-calendar[b-cs6vz5n3k2] {
    font-size: 0.875rem;
}

    .rz-popup .rz-calendar .rz-calendar-day[b-cs6vz5n3k2],
    .rz-calendar.rz-calendar-popup .rz-calendar-day[b-cs6vz5n3k2],
    body > div[class*="rz-overlay"] .rz-calendar .rz-calendar-day[b-cs6vz5n3k2],
    .rz-popup .rz-calendar .rz-calendar-month[b-cs6vz5n3k2],
    .rz-calendar.rz-calendar-popup .rz-calendar-month[b-cs6vz5n3k2],
    body > div[class*="rz-overlay"] .rz-calendar .rz-calendar-month[b-cs6vz5n3k2] {
        width: 2rem;
        height: 2rem;
        line-height: 2rem;
        padding: 0;
    }



/* ===============================
   ADD TO FlightComponent_razor.css
   Custom DateTime Button Picker Styles
   =============================== */

/* Match the look of fi-datetime but as a button */
.float-field.fi-datetime-custom[b-cs6vz5n3k2] {
    position: relative;
    display: block;
    width: 100%;
    cursor: pointer;
    background: transparent;
    border: 0;
    padding: 0;
    text-align: left;
}

/* The "box" */
.fi-datetime-custom .selected-picker[b-cs6vz5n3k2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px; /* Match Radzen input height */
    padding: 18px 12px 8px 12px; /* Top padding for floating label */
    border: 1px solid var(--field-border, #d9d9d9);
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Placeholder vs value */
.fi-datetime-custom .picker-placeholder[b-cs6vz5n3k2] {
    opacity: .75;
    color: var(--field-placeholder, #8a8a8a);
    font-size: 16px;
}

.fi-datetime-custom .picker-value[b-cs6vz5n3k2] {
    color: var(--brand-blue-dark, var(--brand-blue-dark));
    font-size: 16px;
    flex: 1;
}

    .fi-datetime-custom .picker-value span[b-cs6vz5n3k2] {
        color: var(--brand-blue-dark, var(--brand-blue-dark));
    }

/* Icon */
.fi-datetime-custom .picker-icon[b-cs6vz5n3k2] {
    margin-right: 8px;
    flex: 0 0 auto;
    opacity: .85;
    color: var(--brand-blue-dark, var(--brand-blue-dark));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
}

/* Focus ring: button focus triggers it */
.float-field.fi-datetime-custom:focus .selected-picker[b-cs6vz5n3k2],
.float-field.fi-datetime-custom:focus-within .selected-picker[b-cs6vz5n3k2] {
    border-color: var(--field-focus, #1B63C7) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-blue, #1B63C7) 22%, transparent) !important;
    outline: 0;
}

/* Hover state */
.float-field.fi-datetime-custom:hover .selected-picker[b-cs6vz5n3k2] {
    border-color: var(--brand-blue, #1B63C7);
}


/* Time chip positioning - positioned on right side (icon is on left) */
.float-field.fi-datetime-custom .time-chip[b-cs6vz5n3k2] {
    position: absolute;
    right: 12px; /* icon is now on left, so more room on right */
    top: 20px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #F2F6FF;
    color: var(--brand-blue-dark);
    border: 1px solid var(--brand-blue);
    font-size: .75rem;
    line-height: 1.4;
    pointer-events: none;
    white-space: nowrap;
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 1;
}

/* Adjust chip position when label floats */
.float-field.fi-datetime-custom.has-value .time-chip[b-cs6vz5n3k2] {
    top: 20px;
}

/* Tighten on very narrow phones */
@media (max-width: 400px) {
    .float-field.fi-datetime-custom .time-chip[b-cs6vz5n3k2] {
        right: 8px;
        font-size: .55rem;
        font-weight: 600;
        max-width: 35%;
    }
}

/* ===============================
   Flight Info Summary Button
   =============================== */

.flight-info-summary[b-cs6vz5n3k2] {
    width: 100%;
}

.flight-summary-picker[b-cs6vz5n3k2] {
    position: relative;
    width: 100%;
}

    .flight-summary-picker .selected-picker[b-cs6vz5n3k2] {
        position: relative;
        z-index: 1;
        min-height: var(--field-min-h, 56px);
        padding: 12px; /* Balanced padding since label is on border */
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        color: var(--brand-blue-dark);
        font-size: var(--field-font-size, 16px);
        line-height: var(--field-line, 1.5);
        border: 1px solid var(--field-border, #d9d9d9) !important;
        border-radius: var(--field-radius, 8px);
        background: #fff;
        box-sizing: border-box;
        cursor: pointer;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

        .flight-summary-picker .selected-picker:hover[b-cs6vz5n3k2] {
            border-color: var(--brand-blue, #1B63C7);
        }

    .flight-summary-picker:focus .selected-picker[b-cs6vz5n3k2],
    .flight-summary-picker:focus-within .selected-picker[b-cs6vz5n3k2] {
        border-color: var(--field-focus, #1B63C7) !important;
        box-shadow: 0 0 0 .25rem var(--field-ring, rgba(27, 99, 199, 0.25)) !important;
        outline: 0;
    }

    .flight-summary-picker .picker-value[b-cs6vz5n3k2] {
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
        flex: 1;
    }

    .flight-summary-picker .flight-summary-text[b-cs6vz5n3k2] {
        color: var(--brand-blue-dark);
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .flight-summary-picker .picker-placeholder[b-cs6vz5n3k2] {
        color: var(--brand-blue-dark);
        opacity: 0.75;
    }

    .flight-summary-picker .chevron[b-cs6vz5n3k2] {
        font-size: 12px;
        margin-left: 6px;
        color: #666;
        flex-shrink: 0;
    }

    /* Float label positioning - STATIONARY on top border (like PassengersBags) */
    .flight-summary-picker .float-label[b-cs6vz5n3k2] {
        position: absolute;
        left: 12px;
        top: -8px;
        background-color: white;
        padding: 0 4px;
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--brand-blue, var(--brand-blue));
        pointer-events: none;
        z-index: 2;
    }

    /* Focus state - label stays in same position, just changes weight */
    .flight-summary-picker:focus .float-label[b-cs6vz5n3k2],
    .flight-summary-picker:focus-within .float-label[b-cs6vz5n3k2],
    .flight-summary-picker.has-value .float-label[b-cs6vz5n3k2],
    .flight-summary-picker.always-float .float-label[b-cs6vz5n3k2] {
        color: var(--brand-blue, var(--brand-blue));
        font-weight: 600;
    }

/* ===============================
   ADD TO FlightComponent_razor.css
   Custom DateTime Button Picker Styles
   =============================== */

/* Match the look of fi-datetime but as a button */
.float-field.fi-datetime-custom[b-cs6vz5n3k2] {
    position: relative;
    display: block;
    width: 100%;
    cursor: pointer;
    background: transparent;
    border: 0;
    padding: 0;
}

/* The "box" */
.fi-datetime-custom .selected-picker[b-cs6vz5n3k2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px; /* Match Radzen input height */
    padding: 12px; /* Balanced padding since label is on border */
    border: 1px solid var(--field-border, #d9d9d9);
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Placeholder vs value */
.fi-datetime-custom .picker-placeholder[b-cs6vz5n3k2] {
    opacity: .75;
    color: var(--field-placeholder, #8a8a8a);
    font-size: 16px;
}

.fi-datetime-custom .picker-value[b-cs6vz5n3k2] {
    color: var(--brand-blue-dark, var(--brand-blue-dark));
    font-size: 16px;
    flex: 1;
}

    .fi-datetime-custom .picker-value span[b-cs6vz5n3k2] {
        color: var(--brand-blue-dark, var(--brand-blue-dark));
    }

/* Icon */
.fi-datetime-custom .picker-icon[b-cs6vz5n3k2] {
    margin-right: 8px;
    flex: 0 0 auto;
    opacity: .85;
    color: var(--brand-blue-dark, var(--brand-blue-dark));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
}

/* Focus ring: button focus triggers it */
.float-field.fi-datetime-custom:focus .selected-picker[b-cs6vz5n3k2],
.float-field.fi-datetime-custom:focus-within .selected-picker[b-cs6vz5n3k2] {
    border-color: var(--field-focus, #1B63C7) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-blue, #1B63C7) 22%, transparent) !important;
    outline: 0;
}

/* Hover state */
.float-field.fi-datetime-custom:hover .selected-picker[b-cs6vz5n3k2] {
    border-color: var(--brand-blue, #1B63C7);
}

/* Floating label positioning - STATIONARY on top border (like PassengersBags) */
.float-field.fi-datetime-custom .float-label[b-cs6vz5n3k2] {
    position: absolute;
    left: 12px;
    top: -8px;
    background-color: white;
    padding: 0 4px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--brand-blue, var(--brand-blue));
    pointer-events: none;
    z-index: 2;
}

/* Focus state - label stays in same position, just changes weight */
.float-field.fi-datetime-custom:focus .float-label[b-cs6vz5n3k2],
.float-field.fi-datetime-custom.has-value .float-label[b-cs6vz5n3k2],
.float-field.fi-datetime-custom.always-float .float-label[b-cs6vz5n3k2] {
    color: var(--brand-blue, var(--brand-blue));
    font-weight: 600;
}

/* Time chip positioning - positioned on right side (icon is on left) */
.float-field.fi-datetime-custom .time-chip[b-cs6vz5n3k2] {
    position: absolute;
    right: 12px; /* icon is now on left, so more room on right */
    top: 16px; /* Adjusted for reduced padding */
    padding: 2px 8px;
    border-radius: 999px;
    background: #F2F6FF;
    color: var(--brand-blue-dark);
    border: 1px solid var(--brand-blue);
    font-size: .75rem;
    line-height: 1.4;
    pointer-events: none;
    white-space: nowrap;
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 1;
}

/* Adjust chip position when label floats */
.float-field.fi-datetime-custom.has-value .time-chip[b-cs6vz5n3k2] {
    top: 16px;
}

/* Tighten on very narrow phones */
@media (max-width: 400px) {
    .float-field.fi-datetime-custom .time-chip[b-cs6vz5n3k2] {
        right: 8px;
        font-size: .55rem;
        font-weight: 600;
        max-width: 35%;
    }
}

/* Time chip color variations based on time of day */
.float-field.fi-datetime-custom .time-chip.time-morning[b-cs6vz5n3k2] {
    background: linear-gradient(135deg, #FFF9E6 0%, #FFF3CC 100%);
    border-color: #F59E0B;
    color: #92400E;
}

.float-field.fi-datetime-custom .time-chip.time-midday[b-cs6vz5n3k2],
.float-field.fi-datetime-custom .time-chip.time-afternoon[b-cs6vz5n3k2] {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    border-color: #F59E0B;
    color: #92400E;
}

.float-field.fi-datetime-custom .time-chip.time-evening[b-cs6vz5n3k2] {
    background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%);
    border-color: #6366F1;
    color: #312E81;
}

.float-field.fi-datetime-custom .time-chip.time-midnight[b-cs6vz5n3k2],
.float-field.fi-datetime-custom .time-chip.time-after-midnight[b-cs6vz5n3k2],
.float-field.fi-datetime-custom .time-chip.time-before-midnight[b-cs6vz5n3k2],
.float-field.fi-datetime-custom .time-chip.time-night[b-cs6vz5n3k2] {
    background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%);
    border-color: #4F46E5;
    color: #1E1B4B;
}

.float-field.fi-datetime-custom .time-chip.time-early-morning[b-cs6vz5n3k2] {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    border-color: #F59E0B;
    color: #92400E;
}

/* ===============================
   RadzenDropDown as Display Triggers
   =============================== */

/* Prevent dropdown panels from opening - these are triggers only */
.rz-dropdown-datetime .rz-dropdown-panel[b-cs6vz5n3k2],
.rz-dropdown-flightinfo .rz-dropdown-panel[b-cs6vz5n3k2] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Disable the dropdown arrow */
.rz-dropdown-datetime .rz-dropdown-toggle[b-cs6vz5n3k2],
.rz-dropdown-flightinfo .rz-dropdown-toggle[b-cs6vz5n3k2] {
    display: none !important;
}

/* Make entire dropdown clickable */
.rz-dropdown-datetime[b-cs6vz5n3k2],
.rz-dropdown-flightinfo[b-cs6vz5n3k2] {
    cursor: pointer !important;
}

    .rz-dropdown-datetime .rz-dropdown-label-container[b-cs6vz5n3k2],
    .rz-dropdown-flightinfo .rz-dropdown-label-container[b-cs6vz5n3k2] {
        cursor: pointer !important;
        pointer-events: all !important;
    }

/* Inline time chip for RadzenDropDown template */
.time-chip-inline[b-cs6vz5n3k2] {
    padding: 2px 8px;
    border-radius: 999px;
    background: #F2F6FF;
    color: var(--brand-blue-dark);
    border: 1px solid var(--brand-blue);
    font-size: 0.75rem;
    line-height: 1.4;
    white-space: nowrap;
}

    /* Time chip color variations */
    .time-chip-inline.time-morning[b-cs6vz5n3k2] {
        background: linear-gradient(135deg, #FFF9E6 0%, #FFF3CC 100%);
        border-color: #F59E0B;
        color: #92400E;
    }

    .time-chip-inline.time-midday[b-cs6vz5n3k2],
    .time-chip-inline.time-afternoon[b-cs6vz5n3k2] {
        background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
        border-color: #F59E0B;
        color: #92400E;
    }

    .time-chip-inline.time-evening[b-cs6vz5n3k2] {
        background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%);
        border-color: #6366F1;
        color: #312E81;
    }

    .time-chip-inline.time-midnight[b-cs6vz5n3k2],
    .time-chip-inline.time-after-midnight[b-cs6vz5n3k2],
    .time-chip-inline.time-before-midnight[b-cs6vz5n3k2],
    .time-chip-inline.time-night[b-cs6vz5n3k2] {
        background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%);
        border-color: #4F46E5;
        color: #1E1B4B;
    }

    .time-chip-inline.time-early-morning[b-cs6vz5n3k2] {
        background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
        border-color: #F59E0B;
        color: #92400E;
    }

/* ===============================
   RadzenButton Picker Styles
   =============================== */

/* DateTime and FlightInfo Button Pickers */
.datetime-button[b-cs6vz5n3k2],
.flightinfo-button[b-cs6vz5n3k2] {
    cursor: pointer !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

    .datetime-button:hover[b-cs6vz5n3k2],
    .flightinfo-button:hover[b-cs6vz5n3k2] {
        border-color: var(--brand-blue, #1B63C7) !important;
    }

    .datetime-button:focus[b-cs6vz5n3k2],
    .flightinfo-button:focus[b-cs6vz5n3k2] {
        border-color: var(--field-focus, #1B63C7) !important;
        box-shadow: 0 0 0 .25rem var(--field-ring, rgba(27, 99, 199, 0.25)) !important;
        outline: 0 !important;
    }

/* Ensure float labels work with button pickers */
.float-dropdown.datetime-picker[b-cs6vz5n3k2],
.float-dropdown.flight-info-picker[b-cs6vz5n3k2] {
    position: relative;
}

    .float-dropdown.datetime-picker .float-label[b-cs6vz5n3k2],
    .float-dropdown.flight-info-picker .float-label[b-cs6vz5n3k2] {
        position: absolute;
        left: 12px;
        top: -8px;
        background-color: white;
        padding: 0 4px;
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--brand-blue, var(--brand-blue));
        pointer-events: none;
        z-index: 2;
    }

    .float-dropdown.datetime-picker.has-value .float-label[b-cs6vz5n3k2],
    .float-dropdown.flight-info-picker.has-value .float-label[b-cs6vz5n3k2] {
        font-weight: 600;
    }

/* ===============================
   Info Links (Help)
   =============================== */

.flight-help-info[b-cs6vz5n3k2] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-link[b-cs6vz5n3k2] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--brand-blue, var(--brand-blue));
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
}

    .info-link:hover[b-cs6vz5n3k2] {
        text-decoration: underline;
        color: var(--brand-blue-dark, var(--brand-blue-hover));
    }

.info-icon[b-cs6vz5n3k2] {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    max-width: 16px;
    max-height: 16px;
    fill: currentColor;
    flex-shrink: 0;
    display: inline-block;
}

    .info-icon path[b-cs6vz5n3k2] {
        fill: currentColor;
    }
/* ===============================
   Flight Info � Layout & Containers
   =============================== */

/* Main container for flight info section - ensures proper scrolling */
.flight-info-container[b-cs6vz5n3k2] {
    width: 100%;
    max-width: 100%;
    overflow: visible; /* Don't trap scroll events */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    touch-action: pan-y; /* Allow vertical scrolling */
}

/* Note: return-trip-block styles defined earlier in file */

.flight-info-content[b-cs6vz5n3k2] {
    width: 100%;
    max-width: 100%; /* Changed from 460px to match other components */
    margin: 0 auto;
    padding: 5px 5px 0;
    text-align: center;
}

.input-container[b-cs6vz5n3k2] {
    position: relative;
    margin: 6px 0;
    width: 100%;
}

.input-wrapper[b-cs6vz5n3k2] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.input-row[b-cs6vz5n3k2] {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex-wrap: nowrap;
}

.input-column[b-cs6vz5n3k2] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: auto;
}

/* ===============================
   Floating Picker (Airline / Flight # / Trip Type)
   =============================== */

.float-field .selected-picker[b-cs6vz5n3k2] {
    position: relative;
    z-index: 1;
    min-height: var(--field-min-h);
    padding: var(--field-pad-top) var(--field-pad-x) var(--field-pad-bot) var(--field-pad-x);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    color: var(--brand-blue-dark);
    font-size: var(--field-font-size);
    line-height: var(--field-line);
    border: 1px solid var(--field-border) !important;
    border-radius: var(--field-radius);
    background: #fff;
    box-sizing: border-box;
    cursor: pointer;
}

.float-field:focus-within .selected-picker[b-cs6vz5n3k2] {
    border-color: var(--field-focus) !important;
    box-shadow: 0 0 0 .25rem var(--field-ring) !important;
    outline: 0;
}

.float-label[b-cs6vz5n3k2] {
    z-index: 2;
}

.float-field.always-float .float-label[b-cs6vz5n3k2] {
    top: var(--label-float-top);
    transform: none;
    font-size: var(--label-float);
    opacity: .85;
}

/* Content layout inside picker */
.airline-picker .picker-value[b-cs6vz5n3k2],
.flightnum-picker .picker-value[b-cs6vz5n3k2],
.triptype-picker .picker-value[b-cs6vz5n3k2] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.airline-picker .airline-code[b-cs6vz5n3k2],
.flightnum-picker .flightnum[b-cs6vz5n3k2] {
    font-weight: 500;
    white-space: nowrap;
}

.airline-picker .airline-name[b-cs6vz5n3k2],
.flightnum-picker .flightnum[b-cs6vz5n3k2] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.airline-picker .dash[b-cs6vz5n3k2],
.flightnum-picker .dash[b-cs6vz5n3k2] {
    opacity: .6;
}

.flightnum-picker .chevron[b-cs6vz5n3k2],
.airline-picker .chevron[b-cs6vz5n3k2],
.triptype-picker .chevron[b-cs6vz5n3k2] {
    font-size: 12px;
    margin-left: 6px;
    color: #666;
}

/* Float label when focused or has a value */
.float-field:focus-within .float-label[b-cs6vz5n3k2],
.float-field.has-value .float-label[b-cs6vz5n3k2] {
    top: var(--label-float-top);
    transform: none;
    font-size: var(--label-float);
    opacity: .85;
}

/* ===============================
   Row 1: Date + Time (grid)
   =============================== */

.flight-top[b-cs6vz5n3k2] {
    display: grid;
    grid-template-columns: minmax(150px,1fr) minmax(120px,1fr);
    gap: 1px;
    justify-content: center;
}


@media (max-width: 360px) {
    .flight-row-airline[b-cs6vz5n3k2] {
        grid-template-columns: 1fr;
    }
}

/* Make inputs/pickers fill their grid cells */
.flight-top .input-column[b-cs6vz5n3k2],
.flight-row-airline .input-column[b-cs6vz5n3k2] {
    width: 100%;
}

.airline-picker .selected-picker[b-cs6vz5n3k2],
.flightnum-picker .selected-picker[b-cs6vz5n3k2],
.triptype-picker .selected-picker[b-cs6vz5n3k2] {
    width: 100%;
}

/* Slightly tighter picker padding on mobile */
@media (max-width: 500px) {
    .float-field .selected-picker[b-cs6vz5n3k2] {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* ===============================
   Trip Type Dropdown Menu
   =============================== */

.triptype-picker[b-cs6vz5n3k2] {
    position: relative;
}

    .triptype-picker .picker-menu[b-cs6vz5n3k2] {
        position: absolute;
        left: 0;
        right: 0;
        top: calc(100% + 4px);
        background: #fff;
        border: 1px solid var(--field-border);
        border-radius: var(--field-radius);
        box-shadow: 0 4px 12px rgba(0,0,0,.12);
        list-style: none;
        padding: 4px 0;
        margin: 0;
        z-index: 1006;
        color: var(--brand-blue-dark);
    }

        .triptype-picker .picker-menu li[b-cs6vz5n3k2] {
            padding: 8px 12px;
            cursor: pointer;
            color: var(--brand-blue-dark);
        }

            .triptype-picker .picker-menu li:hover[b-cs6vz5n3k2] {
                background: #f8f9fa;
            }

/* ===============================
   Modals & Lists
   =============================== */

.modal-backdrop[b-cs6vz5n3k2] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 1005;
    display: flex;
    justify-content: center;
    align-items: center;
}

.flight-info-modal-content[b-cs6vz5n3k2] {
    background: #fff;
    border-radius: 8px;
    width: 280px;
    max-height: 80vh;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
    animation: fadeIn-b-cs6vz5n3k2 .3s ease-in-out;
    display: flex;
    flex-direction: column;
}

.flight-info-airline-modal-content[b-cs6vz5n3k2] {
    background: #fff;
    border-radius: 8px;
    width: 400px;
    max-height: 80vh;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
    animation: fadeIn-b-cs6vz5n3k2 .3s ease-in-out;
    display: flex;
    flex-direction: column;
}

.modal-header[b-cs6vz5n3k2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid #ced4da;
}

    .modal-header h3[b-cs6vz5n3k2] {
        margin: 0;
        font-size: 1em;
        color: var(--brand-blue-dark);
    }

.close-button[b-cs6vz5n3k2] {
    background: none;
    border: none;
    font-size: 1em;
    cursor: pointer;
    padding: 0;
}

.modal-body[b-cs6vz5n3k2] {
    padding: 10px;
    font-size: 1em;
    line-height: 1.4;
}

.airline-search-box[b-cs6vz5n3k2] {
    width: 100%;
    padding: 8px 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
}

.airline-list[b-cs6vz5n3k2] {
    list-style: none;
    padding: 0;
    margin: 0 6px 6px 6px;
    max-height: 60vh;
    overflow-y: auto;
    width: calc(100% - 12px);
}

    .airline-list li[b-cs6vz5n3k2] {
        padding: 5px 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
        color: var(--brand-blue-dark);
        font-size: 1em;
    }

        .airline-list li:hover[b-cs6vz5n3k2] {
            background-color: #f8f9fa;
        }

.airport-section-header[b-cs6vz5n3k2],
.airline-section-header[b-cs6vz5n3k2] {
    display: block;
    text-align: center;
    color: white !important;
    margin: 4px 0;
    font-size: .6em !important;
    font-weight: 700;
    background-color: var(--brand-blue-dark) !important;
}

.airport-section-header[b-cs6vz5n3k2] {
    all: unset;
    display: block;
    text-align: center;
    color: #666;
    margin: 4px 0;
    font-size: .6em;
    font-weight: 500;
}

.no-flight-option[b-cs6vz5n3k2] {
    text-align: center;
    margin-top: 8px;
}

    .no-flight-option a[b-cs6vz5n3k2] {
        color: var(--brand-blue-light, var(--brand-blue-light));
        text-decoration: underline;
        font-size: .9em;
        cursor: pointer;
    }

        .no-flight-option a:hover[b-cs6vz5n3k2] {
            color: var(--brand-blue-dark, var(--brand-blue-dark));
        }

/* ===============================
   Flights modal + grid
   =============================== */

.flights-modal-content[b-cs6vz5n3k2] {
    background: #fff;
    padding: 5px;
    border-radius: 8px;
    width: 95%;
    max-width: 500px;
    box-shadow: 0 0 20px rgba(0,0,0,.3);
}

.flights-modal-body[b-cs6vz5n3k2] {
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: auto;
    line-height: 1.2; /* was 2; huge rows */
}

.flights-grid[b-cs6vz5n3k2] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* predictable columns */
    margin-top: 12px;
}

    /* Header: brand dark blue with white text, sticky */
    .flights-grid thead th[b-cs6vz5n3k2] {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--brand-blue-dark);
        color: #fff;
        border-bottom: 1px solid #ccc;
        text-align: center;
        padding: .12rem .28rem;
        font-size: .78rem;
        line-height: 1.05;
    }

    /* Body cells: brand blue text */
    .flights-grid tbody td[b-cs6vz5n3k2] {
        color: var(--brand-blue-dark);
        padding: 5px 8px; /* Increased from .12rem .28rem to match airline list */
        line-height: 1.4; /* Improved from 2.05 for better readability */
        vertical-align: middle;
        font-size: .9rem !important;
        word-wrap: break-word;
        overflow-wrap: anywhere;
    }

    .flights-grid tbody tr:hover[b-cs6vz5n3k2] {
        background-color: #eaf1fb;
        cursor: pointer;
        transition: background-color .2s ease;
    }

/* ===== Mobile compacting ===== */
@media (max-width: 430px) {
    /* Make it truly fit on small phones */
    .flights-grid[b-cs6vz5n3k2] {
        width: 100%;
    }

        .flights-grid thead th[b-cs6vz5n3k2],
        .flights-grid tbody td[b-cs6vz5n3k2] {
            padding: 6px 4px; /* Increased from .30rem .14rem for better mobile spacing */
            font-size: .7rem;
            line-height: 1.3; /* Improved from 2.05 for better readability */
        }

        /* Column widths (sum = 100%) */
        /* 1: Airline  2: From  3: To  4: Flt#  5: Departs  6: Arrives */
        .flights-grid th:nth-child(1)[b-cs6vz5n3k2],
        .flights-grid td:nth-child(1)[b-cs6vz5n3k2] {
            width: 12%;
        }
        /* narrower airline */
        .flights-grid th:nth-child(2)[b-cs6vz5n3k2],
        .flights-grid td:nth-child(2)[b-cs6vz5n3k2] {
            width: 12%;
            text-align: center;
            white-space: nowrap;
        }

        .flights-grid th:nth-child(3)[b-cs6vz5n3k2],
        .flights-grid td:nth-child(3)[b-cs6vz5n3k2] {
            width: 12%;
            text-align: center;
            white-space: nowrap;
        }

        .flights-grid th:nth-child(4)[b-cs6vz5n3k2],
        .flights-grid td:nth-child(4)[b-cs6vz5n3k2] {
            width: 20%;
            text-align: center;
            white-space: nowrap;
        }

        .flights-grid th:nth-child(5)[b-cs6vz5n3k2],
        .flights-grid td:nth-child(5)[b-cs6vz5n3k2] {
            width: 20%;
            text-align: right;
            white-space: nowrap;
            font-variant-numeric: tabular-nums;
        }

        .flights-grid th:nth-child(6)[b-cs6vz5n3k2],
        .flights-grid td:nth-child(6)[b-cs6vz5n3k2] {
            width: 8%;
            text-align: right;
            white-space: nowrap;
            font-variant-numeric: tabular-nums;
        }

        /* Airline: smaller font + allow 2 lines */
        .flights-grid td:nth-child(1)[b-cs6vz5n3k2] {
            white-space: normal;
            word-break: break-word;
            font-size: .64rem;
            line-height: 1.3; /* Improved from 2.05 */
        }

        /* Keep rows tappable but with better spacing */
        .flights-grid tbody tr > td[b-cs6vz5n3k2] {
            padding-top: 6px; /* Increased from .14rem */
            padding-bottom: 6px; /* Increased from .14rem */
        }
}

/* ===============================
   Misc / Helpers
   =============================== */

.help-link[b-cs6vz5n3k2] {
    margin-left: 8px;
    color: var(--brand-blue-light, var(--brand-blue-light));
    text-decoration: underline;
    cursor: pointer;
    font-size: .9rem;
    line-height: 1;
    margin-top: 2px;
}

    .help-link:hover[b-cs6vz5n3k2] {
        color: var(--brand-blue-dark, var(--brand-blue-dark));
    }

.error-message[b-cs6vz5n3k2] {
    color: #dc3545;
    font-size: 1em;
    margin-top: 8px;
    text-align: center;
}

hr[b-cs6vz5n3k2] {
    margin: .8rem 0;
    color: inherit;
    border: 0;
    border-top: var(--bs-border-width) solid;
    opacity: .25;
}

@keyframes fadeIn-b-cs6vz5n3k2 {
    from {
        opacity: 0;
        transform: scale(.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===============================
   Brand text colors on inputs + topline
   =============================== */

.flight-info-content input[b-cs6vz5n3k2],
.flight-info-content select[b-cs6vz5n3k2],
.flight-info-content textarea[b-cs6vz5n3k2] {
    color: var(--brand-blue-dark);
    caret-color: var(--brand-blue-dark);
}

    .flight-info-content input[b-cs6vz5n3k2]::placeholder,
    .flight-info-content textarea[b-cs6vz5n3k2]::placeholder {
        color: var(--brand-blue-dark);
        opacity: .6;
    }

.float-field .selected-picker[b-cs6vz5n3k2] {
    color: var(--brand-blue-dark);
}

.flight-topline[b-cs6vz5n3k2] {
    color: var(--brand-gold);
    font-weight: 600;
}
/* === Time Picker Modal (non-iOS path) === */
.timepicker-overlay[b-cs6vz5n3k2] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(1px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4000; /* above everything */
}

.timepicker-modal[b-cs6vz5n3k2] {
    width: min(92vw, 380px);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0,0,0,.20);
    padding: 16px;
}

.timepicker-header[b-cs6vz5n3k2] {
    font-weight: 600;
    font-size: 1.05rem;
    margin-bottom: 10px;
}

.timepicker-row[b-cs6vz5n3k2] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}

.timepicker-col label[b-cs6vz5n3k2] {
    display: block;
    font-size: .85rem;
    margin-bottom: 6px;
    color: #444;
}

.timepicker-col select[b-cs6vz5n3k2] {
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background: #fff;
    font-size: 1rem;
}

    .timepicker-col select:focus[b-cs6vz5n3k2] {
        outline: none;
        border-color: var(--brand-blue, var(--brand-blue));
        box-shadow: 0 0 0 3px rgba(66,133,244,.15);
    }

.timepicker-actions[b-cs6vz5n3k2] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

    .timepicker-actions .btn-primary[b-cs6vz5n3k2],
    .timepicker-actions .btn-secondary[b-cs6vz5n3k2] {
        border-radius: 8px;
        padding: 8px 14px;
        font-size: .95rem;
        border: 1px solid transparent;
        cursor: pointer;
    }

    .timepicker-actions .btn-primary[b-cs6vz5n3k2] {
        background: var(--brand-blue, var(--brand-blue));
        color: #fff;
        border-color: var(--brand-blue, var(--brand-blue));
    }

    .timepicker-actions .btn-secondary[b-cs6vz5n3k2] {
        background: #fff;
        color: var(--brand-blue, var(--brand-blue));
        border-color: var(--brand-blue, var(--brand-blue));
    }

/* Make the readonly time field look clickable on the custom (non-iOS) path */
#FlightTime[readonly][b-cs6vz5n3k2] {
    cursor: pointer;
}

/* Responsive tweaks */
@media (max-width: 480px) {
    .timepicker-modal[b-cs6vz5n3k2] {
        width: calc(100vw - 24px);
    }

    .timepicker-row[b-cs6vz5n3k2] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .timepicker-modal[b-cs6vz5n3k2] {
        transition: none;
    }
}
/* Placeholder tint for non-iOS readonly input */
#FlightTime[readonly][b-cs6vz5n3k2]::placeholder {
    color: #9ca3af; /* neutral-400 */
    opacity: 1; /* ensure visible in Safari/Edge */
}

/* Small hint under native iOS input (only when empty) */
.input-hint[b-cs6vz5n3k2] {
    margin-top: 4px;
    font-size: .85rem;
    color: #9ca3af;
}
/* Applies when size>1 turns <select> into a listbox */
.timepicker-col select[size][b-cs6vz5n3k2] {
    /* Optional: consistent height based on rows; browsers honor `size` first */
    --row-height: 2rem;
    height: calc(var(--row-height) * 8); /* match DropdownRows (8) */
    min-width: 100%;
    overflow: auto;
}

    .timepicker-col select[size]:focus[b-cs6vz5n3k2] {
        outline: none;
        border-color: var(--brand-blue, var(--brand-blue));
        box-shadow: 0 0 0 3px rgba(66,133,244,.15);
    }

.timepicker-col select[b-cs6vz5n3k2] {
    width: 100%;
    min-width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background: #fff;
    font-size: 1rem;
}

    .timepicker-col select:focus[b-cs6vz5n3k2] {
        outline: none;
        border-color: var(--brand-blue, var(--brand-blue));
        box-shadow: 0 0 0 3px rgba(66,133,244,.15);
    }




/* ==============================================================================
   NOTE: This component now uses the reusable .section-frame and .frame-heading 
   classes from site.css for the bordered flight info section with label.
   
   The markup uses:
   - <div class="section-frame"> for the container
   - <span class="frame-heading"> for the label on the border
   
   Colors defined in site.css:
   - Frame background: lightcyan
   - Frame heading background: powderblue
   - Border: var(--brand-blue)
   ============================================================================== */


/* Small instruction line above pickup */
.address-section-header[b-cs6vz5n3k2] {
    font-size: .9rem;
    color: #555;
    margin-bottom: 8px;
}

/* Keep each address on its own row */
.address-row[b-cs6vz5n3k2] {
    display: block;
}


/* Ensure the wrapper is positioned for floating labels */
.float-field[b-cs6vz5n3k2] {
    position: relative;
}

    /* Make date/time tall enough and leave room for the floating label */
    .float-field input[type="date"][b-cs6vz5n3k2],
    .float-field input[type="time"][b-cs6vz5n3k2] {
        height: 56px; /* was too short,  */
        line-height: 56px;
        padding-top: 18px; /* room for the label when not floated */
        padding-bottom: 8px;
        padding-left: 12px; /* consistent text inset */
    }

    /* Floating label baseline position and behavior */
    .float-field .float-label[b-cs6vz5n3k2] {
        position: absolute;
        left: 12px;
        top: 14px; /* sits inside the input when empty */
        pointer-events: none;
        transition: top .15s ease, font-size .15s ease;
        background: #fff; /* mask input border/text when floated */
        padding: 0 4px;
        z-index: 1; /* keep it above the input text */
    }

    /* When there is a value OR the field is focused, float the label up */
    .float-field.has-value .float-label[b-cs6vz5n3k2],
    .float-field:focus-within .float-label[b-cs6vz5n3k2] {
        top: 4px;
        font-size: 12px; /* shrink a bit so it doesn't overlap */
    }


    /* Float label support for text inputs (Flight #) */
    .float-field input[type="text"][b-cs6vz5n3k2],
    .float-field input:not([type])[b-cs6vz5n3k2] {
        height: 56px !important;
        line-height: 56px !important;
        padding-top: 18px; /* room for the label when not floated */
        padding-bottom: 8px;
        padding-left: 12px;
    }

:root[b-cs6vz5n3k2] {
    --label-float-top: 4px !important;
    --label-float: 12px;
}
/* Airline picker floating label fix */
.airline-picker[b-cs6vz5n3k2] {
    position: relative;
    overflow: visible; /* don't clip the label */
}

    .airline-picker .float-label[b-cs6vz5n3k2] {
        position: absolute;
        left: 12px;
        top: 4px !important; /* same minimized height as other fields */
        font-size: 12px;
        padding: 0 4px;
        background: #fff; /* mask border under text */
        pointer-events: none; /* clicks pass through to picker */
        z-index: 3; /* above picker contents */
    }

    /* Give the picker content room so the label doesn't overlap it */
    .airline-picker .selected-picker[b-cs6vz5n3k2] {
        padding-top: 18px;
        position: relative;
        z-index: 1;
    }


/* Invisible full-screen click-off layer shown when the Trip Type menu is open */
.picker-overlay[b-cs6vz5n3k2] {
    position: fixed;
    inset: 0; /* top/right/bottom/left: 0 */
    background: transparent;
    z-index: 998; /* below the menu, above the page */
}

/* Ensure the Trip Type menu sits above the overlay */
.triptype-picker .picker-menu[b-cs6vz5n3k2] {
    position: absolute;
    z-index: 999;
}
/* Trip Type floating label */
.triptype-picker[b-cs6vz5n3k2] {
    position: relative;
    overflow: visible; /* ensure the label isn't clipped */
}

    .triptype-picker .float-label[b-cs6vz5n3k2] {
        position: absolute;
        left: 12px;
        top: 4px !important; /* same minimized position as others */
        font-size: 12px;
        padding: 0 4px;
        background: #fff; /* mask the border under the text */
        pointer-events: none;
        z-index: 3;
    }

    /* Space for the label above the picker value */
    .triptype-picker .selected-picker[b-cs6vz5n3k2] {
        padding-top: 18px;
        position: relative;
        z-index: 1;
    }



/* Unify control height */
:root[b-cs6vz5n3k2] {
    --control-h: 56px !important;
}

.float-field input[type="text"][b-cs6vz5n3k2],
.float-field input[type="date"][b-cs6vz5n3k2],
.float-field input[type="time"][b-cs6vz5n3k2],
.airline-picker .selected-picker[b-cs6vz5n3k2],
.triptype-picker .selected-picker[b-cs6vz5n3k2] {
    height: var(--control-h);
    line-height: var(--control-h);
    padding-top: 18px; /* room for floating label */
    padding-bottom: 8px;
    box-sizing: border-box;
}

/* Floating label positions (consistent across all) */
.float-field .float-label[b-cs6vz5n3k2] {
    top: 16px;
}

.float-field.has-value .float-label[b-cs6vz5n3k2],
.float-field:focus-within .float-label[b-cs6vz5n3k2] {
    top: 4px;
    font-size: 12px;
}
/* Lock date/time floating labels in the high position */
.float-field.always-float[b-cs6vz5n3k2] {
    --label-float-top: 4px;
}

    .float-field.always-float .float-label[b-cs6vz5n3k2],
    .float-field.always-float:focus-within .float-label[b-cs6vz5n3k2] {
        top: 4px !important; /* same position focused/unfocused */
        font-size: var(--label-float) !important;
        transition: none !important; /* no slide animation */
    }


/* Airline: big hint when empty, small/top when has value or focused */
:root[b-cs6vz5n3k2] {
    --label-inside: 14px;
    --label-inside-top: 18px; /* tweak to your eye; 18�20px centers well in 56px fields */
    --label-float-top: 4px; /* your unified float position */
    --label-float: 12px;
}

.airline-picker[b-cs6vz5n3k2] {
    position: relative;
    overflow: visible;
}

    /* inside (empty) */
    .airline-picker .float-label[b-cs6vz5n3k2] {
        position: absolute;
        left: 12px;
        top: var(--label-inside-top);
        font-size: var(--label-inside);
        padding: 0 4px;
        background: #fff;
        pointer-events: none;
        z-index: 3;
    }

    /* floated (has value or focus) */
    .airline-picker.has-value .float-label[b-cs6vz5n3k2],
    .airline-picker:focus-within .float-label[b-cs6vz5n3k2] {
        top: var(--label-float-top);
        font-size: var(--label-float);
    }

.flights-grid td.emph-time[b-cs6vz5n3k2] {
    font-weight: 700;
}


/* === Flight Info: section headers (append at end) ======================== */
.flight-info-content[b-cs6vz5n3k2] {
    /* tokens (map to your existing brand vars if present) */
    --fi-blue: var(--brand-blue, #005EB8);
    --fi-blue-dark: var(--brand-blue-dark, #0F2B5B);
    --fi-blue-50: #F2F6FF;
    --fi-gold: var(--brand-gold, #FFB300);
    --fi-border: #DFE3EE;
}

/* Primary section header (used above each block like Date/Time, Airline/Flight/Trip) */
.fi-heading[b-cs6vz5n3k2] {
    margin: 10px 0 6px 0;
    padding: 8px 10px;
    color: var(--fi-blue-dark);
    background: var(--fi-blue-50);
    border-left: 6px solid var(--fi-blue);
    border-radius: 8px;
    font-weight: 700;
    line-height: 1.2;
}

/* Optional smaller header (if you have sub-sections per leg) */
.fi-subheading[b-cs6vz5n3k2] {
    margin: 8px 0 4px 0;
    padding: 6px 10px;
    color: var(--fi-blue-dark);
    background: #F7FAFF;
    border-left: 4px solid var(--fi-blue);
    border-radius: 6px;
    font-weight: 600;
}

/* Keep forms visually tied to the header */
.fi-block[b-cs6vz5n3k2] {
    border: 1px solid var(--fi-border);
    border-radius: 10px;
    padding: 10px;
    background: #fff;
}

/* Make modal titles match the dark brand color */
.modal-header h3[b-cs6vz5n3k2] {
    color: var(--fi-blue-dark);
}
/* Tokens (reuse your brand vars if you have them) */
.flight-info-content[b-cs6vz5n3k2], :root[b-cs6vz5n3k2] {
    --fi-blue: var(--brand-blue, #005EB8);
    --fi-blue-dark: var(--brand-blue-dark, #0F2B5B);
    --fi-blue-50: #F2F6FF;
}

/* Highlighted �From � ? �� row */
/* .fi-route - MOVED TO site.css for global use across all components */
/* Normalize date input height to match other 56px controls */
.flight-info-content[b-cs6vz5n3k2] {
    --fi-input-h: 56px;
}

    .flight-info-content input[type="date"][b-cs6vz5n3k2] {
        height: var(--fi-input-h);
        min-height: var(--fi-input-h);
        line-height: calc(var(--fi-input-h) - 2px); /* accounts for 1px borders */
        box-sizing: border-box;
        padding-block: 0; /* prevent vertical padding differences */
        padding-inline: 12px;
        font-size: 16px; /* consistent metrics + avoids iOS zoom */
        /* Keep native picker icon */
    }

        /* Remove extra internal padding in WebKit (Chrome/Safari) */
        .flight-info-content input[type="date"][b-cs6vz5n3k2]::-webkit-datetime-edit,
        .flight-info-content input[type="date"][b-cs6vz5n3k2]::-webkit-datetime-edit-fields-wrapper,
        .flight-info-content input[type="date"][b-cs6vz5n3k2]::-webkit-datetime-edit-text,
        .flight-info-content input[type="date"][b-cs6vz5n3k2]::-webkit-datetime-edit-month-field,
        .flight-info-content input[type="date"][b-cs6vz5n3k2]::-webkit-datetime-edit-day-field,
        .flight-info-content input[type="date"][b-cs6vz5n3k2]::-webkit-datetime-edit-year-field {
            padding: 0;
        }

        .flight-info-content input[type="date"][b-cs6vz5n3k2]::-webkit-date-and-time-value {
            min-height: auto;
        }

        .flight-info-content input[type="date"][b-cs6vz5n3k2]::-webkit-calendar-picker-indicator {
            margin: 0 8px 0 0; /* keeps icon aligned without changing height */
            padding: 0;
        }

    /* If you also use a time input, normalize it too */
    .flight-info-content input[type="time"][b-cs6vz5n3k2] {
        height: var(--fi-input-h);
        min-height: var(--fi-input-h);
        line-height: calc(var(--fi-input-h) - 2px);
        box-sizing: border-box;
        padding-block: 0;
        padding-inline: 2px;
        font-size: 16px;
    }
/* Make heading labels span full width (even inside flex parents) */
label.app-heading[b-cs6vz5n3k2] {
    display: block;
    width: 100%;
    flex: 1 1 100%;
    align-self: stretch;
    box-sizing: border-box;
}

/* optional helper if you want centered text */
.app-heading.center[b-cs6vz5n3k2] {
    text-align: center;
}


/* Make input columns compact inside the Flight Info card only */
.fi-block .input-column[b-cs6vz5n3k2] {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 8px; /* space between rows */
}

/* Reduce inner field spacing */
.fi-block .float-field[b-cs6vz5n3k2] {
    margin-bottom: 8px !important; /* was ~22px globally */
}

/* Ensure controls don't force extra height */
.fi-block .float-input.form-control[b-cs6vz5n3k2],
.fi-block .selected-picker[b-cs6vz5n3k2],
.fi-block .selected-country[b-cs6vz5n3k2] {
    min-height: 46px !important; /* tighten control height */
    padding-top: 16px !important; /* keep label centered when empty */
    padding-bottom: 8px !important;
}

/* Float label positions for the tighter control */
.fi-block .float-input:placeholder-shown + .float-label[b-cs6vz5n3k2] {
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
}

.fi-block .float-input:focus + .float-label[b-cs6vz5n3k2],
.fi-block .float-input:not(:placeholder-shown) + .float-label[b-cs6vz5n3k2] {
    top: 6px;
    transform: none;
    font-size: .78rem;
}

.input-column[b-cs6vz5n3k2] {
    line-height: normal !important;
    height: 60px;
    padding-top: 6px;
}


.fi-block .input-column[b-cs6vz5n3k2] {
    line-height: normal !important;
}

.flight-date[b-cs6vz5n3k2] {
    padding-top: 12px !important;
}



/* === Mobile tweaks: make flights modal narrower, Flight # slimmer === */
@media (max-width: 430px) {
    /* Keep the dialog comfortably within the viewport */
    .flights-modal-content[b-cs6vz5n3k2] {
        width: 96vw;
        max-width: 420px;
    }

    /* Rebalance table columns so nothing overflows */
    /* 1: Airline | 2: From | 3: To | 4: Flight # | 5: Departs | 6: Arrives */
    .flights-grid th:nth-child(1)[b-cs6vz5n3k2],
    .flights-grid td:nth-child(1)[b-cs6vz5n3k2] {
        width: 10%;
    }
    /* Airline */
    .flights-grid th:nth-child(2)[b-cs6vz5n3k2],
    .flights-grid td:nth-child(2)[b-cs6vz5n3k2] {
        width: 10%;
        text-align: center;
        white-space: nowrap;
    }
    /* From */
    .flights-grid th:nth-child(3)[b-cs6vz5n3k2],
    .flights-grid td:nth-child(3)[b-cs6vz5n3k2] {
        width: 10%;
        text-align: center;
        white-space: nowrap;
    }
    /* To */
    .flights-grid th:nth-child(4)[b-cs6vz5n3k2],
    .flights-grid td:nth-child(4)[b-cs6vz5n3k2] {
        width: 12%;
        text-align: center;
        white-space: nowrap;
    }
    /* Flight # (narrower) */
    .flights-grid th:nth-child(5)[b-cs6vz5n3k2],
    .flights-grid td:nth-child(5)[b-cs6vz5n3k2] {
        width: 16%;
        text-align: right;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }
    /* Departs */
    .flights-grid th:nth-child(6)[b-cs6vz5n3k2],
    .flights-grid td:nth-child(6)[b-cs6vz5n3k2] {
        width: 16%;
        text-align: right;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }
    /* Arrives */

    /* Abbreviate long headers to save horizontal space */
    .flights-grid thead th:nth-child(4)[b-cs6vz5n3k2],
    .flights-grid thead th:nth-child(5)[b-cs6vz5n3k2],
    .flights-grid thead th:nth-child(6)[b-cs6vz5n3k2] {
        font-size: 0;
    }

        .flights-grid thead th:nth-child(4)[b-cs6vz5n3k2]::after {
            content: 'Flt#';
            font-size: .7rem;
        }

        .flights-grid thead th:nth-child(5)[b-cs6vz5n3k2]::after {
            content: 'Depart';
            font-size: .7rem;
        }

        .flights-grid thead th:nth-child(6)[b-cs6vz5n3k2]::after {
            content: 'Arrive';
            font-size: .7rem;
        }

    /* Slightly tighter rows for better fit */
    .flights-grid thead th[b-cs6vz5n3k2],
    .flights-grid tbody td[b-cs6vz5n3k2] {
        padding: .28rem .12rem;
        font-size: .7rem;
        line-height: 1.6;
    }
}






/* Radzen input sizing within our floating field */
.float-field[b-cs6vz5n3k2] {
    position: relative;
}

    .float-field .rz-inputtext[b-cs6vz5n3k2] {
        height: 56px; /* match your control height */
        line-height: 56px;
        padding-top: 18px; /* room for label when not floated */
        padding-bottom: 8px;
        padding-left: 12px;
        box-sizing: border-box;
    }

    /* Float label behavior (works with your existing .float-label styles) */
    .float-field.has-value .float-label[b-cs6vz5n3k2],
    .float-field:focus-within .float-label[b-cs6vz5n3k2] {
        top: 4px;
        font-size: 12px;
        opacity: .85;
    }




/* Full width + sizing for the DatePicker */
.fi-datetime[b-cs6vz5n3k2] {
    display: block;
    width: 100%;
}

    /* IMPORTANT: style Radzen�s inner input across the component boundary */
    .float-field[b-cs6vz5n3k2]  .rz-inputtext,
    .fi-datetime[b-cs6vz5n3k2]  .rz-inputtext {
        height: 56px;
        line-height: 56px;
        padding-top: 18px; /* space for floating label */
        padding-bottom: 8px;
        padding-left: 12px;
        box-sizing: border-box;
        /* match your other fields */
        font-family: inherit;
        font-size: 16px;
        color: var(--brand-blue-dark, var(--brand-blue-dark));
        border-radius: 8px;
        width: 100%;
    }

        /* Focus state */
        .fi-datetime[b-cs6vz5n3k2]  .rz-inputtext:focus {
            outline: none;
            border-color: var(--brand-blue, #1B63C7);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-blue, #1B63C7) 22%, transparent);
        }

/* Make the popup sit above your modals */
:root :where(.fi-datetime)[b-cs6vz5n3k2]  .rz-datepicker-popup,
:root :where(.fi-datetime)[b-cs6vz5n3k2]  .rz-timepicker-popup {
    z-index: 3000;
}

/* Span both columns in the .flight-top grid */
.flight-top .input-column--full[b-cs6vz5n3k2] {
    grid-column: 1 / -1;
    width: 100%;
}


/* Tiny �meaning� chip that sits inside the field */
.float-field .time-chip[b-cs6vz5n3k2] {
    position: absolute;
    right: 44px; /* leave room for Radzen�s calendar icon */
    top: 14px; /* aligns when label is inside */
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--fi-blue-50, #F2F6FF);
    color: var(--fi-blue-dark, #0F2B5B);
    border: 1px solid var(--fi-border, #DFE3EE);
    font-size: .75rem;
    line-height: 1.4;
    pointer-events: none; /* don�t steal clicks */
    white-space: nowrap;
}

/* When the label floats, nudge the chip up a bit to match */
.float-field.has-value .time-chip[b-cs6vz5n3k2],
.float-field:focus-within .time-chip[b-cs6vz5n3k2] {
    top: 6px;
}


/* Keep the chip visible and readable on small screens */
.float-field .time-chip[b-cs6vz5n3k2] {
    position: absolute;
    right: 44px; /* leaves room for calendar icon */
    top: 14px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #F2F6FF;
    color: var(--brand-blue-dark);
    border: 1px solid var(--brand-blue);
    font-size: .75rem;
    line-height: 1.4;
    pointer-events: none;
    white-space: nowrap;
    max-width: 55%; /* prevent overlap; truncate if needed */
    overflow: hidden;
    text-overflow: ellipsis;
}

.float-field.has-value .time-chip[b-cs6vz5n3k2],
.float-field:focus-within .time-chip[b-cs6vz5n3k2] {
    top: 20px;
}

/* Tighten on very narrow phones */
@media (max-width: 400px) {
    .float-field .time-chip[b-cs6vz5n3k2] {
        right: 40px;
        font-size: .55rem;
        font-weight: 600;
        max-width: 35%;
    }
}


/* Carrier row: Airline | Flight # (narrow) | Trip Type (wider) */
.flight-row-airline[b-cs6vz5n3k2] {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) /* Airline */
    minmax(90px, 0.55fr) /* Flight # narrower */
    minmax(220px, 1.45fr) /* Trip Type wider */;
    gap: 12px;
}

    /* Prevent overflow forcing wraps */
    .flight-row-airline .input-column[b-cs6vz5n3k2] {
        min-width: 0;
    }

    /* Keep values to one line */
    .flight-row-airline .picker-value[b-cs6vz5n3k2] {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* Mobile: still 3 cols but tighter; Trip Type keeps more room */
@media (max-width: 420px) {
    .flight-row-airline[b-cs6vz5n3k2] {
        grid-template-columns: 1fr 0.6fr 1.2fr;
        gap: 5px;
    }

    .float-field input[type="text"][b-cs6vz5n3k2],
    .airline-picker .selected-picker[b-cs6vz5n3k2],
    .triptype-picker .selected-picker[b-cs6vz5n3k2] {
        height: 44px;
        padding-top: 14px;
        padding-bottom: 6px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .flight-row-airline .picker-value[b-cs6vz5n3k2],
    .flight-row-airline input.form-control[b-cs6vz5n3k2] {
        font-size: 0.95rem;
        text-align: center;
    }
}
/* Ensure Radzen dropdown panels overlay sticky footers/buttons */
:root :where(.rz-dropdown-panel)[b-cs6vz5n3k2] {
    z-index: 5000; /* higher than your bottom nav/buttons */
}


/* Make the dropdown fill its cell and match your 56px control height */
.triptype-picker[b-cs6vz5n3k2],
.triptype-picker[b-cs6vz5n3k2]  .rz-dropdown,
.triptype-picker[b-cs6vz5n3k2]  .rz-inputtext {
    width: 100%;
    max-width: 100%;
}

/* Your file already normalizes Radzen input height via ::deep .rz-inputtext.
   This ensures the Trip Type field inherits the same metrics. */



/* Make all three columns shrink within the frame */
.flight-row-airline[b-cs6vz5n3k2] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) /* Airline */
    minmax(0, 0.6fr) /* Flight # */
    minmax(0, 1.4fr); /* Trip Type */
    gap: 6px;
}

    /* Don�t let the Trip Type widget size itself wider than its grid cell */
    .flight-row-airline .input-column[b-cs6vz5n3k2] {
        min-width: 0;
    }

.triptype-picker[b-cs6vz5n3k2],
.triptype-picker[b-cs6vz5n3k2]  .rz-dropdown {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

    /* Ensure long labels don�t stretch the column */
    .triptype-picker[b-cs6vz5n3k2]  .rz-dropdown-label {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }



@media (max-width: 480px) {
    .flight-row-airline[b-cs6vz5n3k2] {
        /* Airline | Flight # | Trip Type */
        grid-template-columns: minmax(0, 1.0fr) /* shrink Airline a bit */
        minmax(0, 1.0fr) /* widen Flight # */
        minmax(0, 1fr); /* Trip Type unchanged */
        gap: 6px;
        text-align: center;
    }

        /* let the Flight # control actually use the space */
        .flight-row-airline .input-column--flightnum[b-cs6vz5n3k2] {
            min-width: 0;
            text-align: center !important;
        }

            .flight-row-airline .input-column--flightnum[b-cs6vz5n3k2]  .rz-inputtext {
                width: 100%;
                max-width: 100%;
                box-sizing: border-box;
                text-align: center;
            }
}
/* Center the text inside the Radzen textbox / inputmask for Flight # */
.flight-row-airline .input-column--flightnum[b-cs6vz5n3k2]  .rz-inputtext,
.flight-row-airline .input-column--flightnum[b-cs6vz5n3k2]  .rz-inputmask {
    text-align: center !important;
    font-variant-numeric: tabular-nums;
}

/* Center the text inside a plain <input type="text"> (if that�s what you use) */
.flight-row-airline .input-column--flightnum input[type="text"][b-cs6vz5n3k2] {
    text-align: center !important;
    font-variant-numeric: tabular-nums;
}

/* Center the placeholder too (optional) */
.flight-row-airline .input-column--flightnum [b-cs6vz5n3k2]::placeholder {
    text-align: center !important;
}

/* Faux �picker� button version of Flight # */
.flightnum-picker .selected-picker[b-cs6vz5n3k2] {
    /* keep your layout; space-between is fine if .picker-value flexes */
}

    .flightnum-picker .selected-picker .picker-value[b-cs6vz5n3k2] {
        display: flex;
        flex: 1 1 auto;
        justify-content: center;
        text-align: center !important;
        font-variant-numeric: tabular-nums;
    }

/* --- Center Flight # in the faux picker button --- */
/* Your global rule sets .selected-picker { justify-content: space-between }.
   Override *only* for the Flight # picker and give the label its own center column. */
.flightnum-picker .selected-picker[b-cs6vz5n3k2] {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr; /* left spacer | label | chevron */
    align-items: center;
    justify-content: normal !important; /* beat space-between */
}

    .flightnum-picker .selected-picker .picker-value[b-cs6vz5n3k2] {
        grid-column: 2; /* the middle track */
        justify-self: center; /* center the label block */
        text-align: center; /* center text inside */
        font-variant-numeric: tabular-nums;
    }

    /* keep the chevron parked to the right column */
    .flightnum-picker .selected-picker .chevron[b-cs6vz5n3k2] {
        grid-column: 3;
        justify-self: end;
    }

/* If your label text is wrapped in a .flightnum span, center it too */
.flightnum-picker .picker-value .flightnum[b-cs6vz5n3k2] {
    text-align: center;
    margin: 0 auto; /* guard against any stray inline spacing */
}

/* --- Center Flight # in a plain <input> (if used) --- */
.input-column--flightnum input[type="text"][b-cs6vz5n3k2],
.input-column--flightnum input:not([type])[b-cs6vz5n3k2] {
    text-align: center !important;
    font-variant-numeric: tabular-nums;
}

/* (optional) center the placeholder as well */
.input-column--flightnum [b-cs6vz5n3k2]::placeholder {
    text-align: center;
}


/* Boxed toggle matches other fields */
.international-picker .selected-picker[b-cs6vz5n3k2] {
    /* your .selected-picker base styles already provide border, radius, etc. */
    display: flex;
    align-items: center;
    justify-content: center; /* center switch + labels */
    gap: 5px;
    width: 100%;
}

/* Ensure 56px height like other fields */
:root[b-cs6vz5n3k2] {
    --control-h: 56px !important;
}

.international-picker .selected-picker[b-cs6vz5n3k2] {
    height: var(--control-h);
    line-height: var(--control-h);
    padding-top: 18px; /* keep room for the floated label */
    padding-bottom: 8px;
    box-sizing: border-box;
}

/* Small �No / Yes� labels around the switch */
.intl-switch-text[b-cs6vz5n3k2] {
    font-size: .95rem;
    color: var(--brand-blue);
    line-height: 1;
    user-select: none;
}

/* Keep the switch from stretching the box */
.international-picker .selected-picker :where(.rz-switch, input[type="checkbox"])[b-cs6vz5n3k2] {
    flex: 0 0 auto;
}

/* If this field sits in the 3-col row, allow it to shrink cleanly */
.flight-row-airline .input-column--intl[b-cs6vz5n3k2] {
    min-width: 0;
}
/* === International picker: float the label like the others === */
.international-picker[b-cs6vz5n3k2] {
    position: relative;
    overflow: visible; /* don�t clip the label */
}

    .international-picker .float-label[b-cs6vz5n3k2] {
        position: absolute;
        left: 12px;
        top: 4px !important; /* same �floated� position */
        font-size: 12px;
        padding: 0 4px;
        background: #fff; /* mask the border under text */
        color: var(--brand-blue); /* match your brand text color */
        pointer-events: none;
        z-index: 3; /* above .selected-picker */
    }

    /* ensure room for the label inside the box */
    .international-picker .selected-picker[b-cs6vz5n3k2] {
        padding-top: 18px;
        position: relative;
        z-index: 1;
    }
/* === International picker: float the label like the others === */
.international-picker[b-cs6vz5n3k2] {
    position: relative;
    overflow: visible; /* don�t clip the label */
}

    .international-picker .float-label[b-cs6vz5n3k2] {
        position: absolute;
        left: 12px;
        top: 4px !important; /* same �floated� position */
        font-size: 12px;
        padding: 0 4px;
        background: #fff; /* mask the border under text */
        color: var(--brand-blue); /* match your brand text color */
        pointer-events: none;
        z-index: 3; /* above .selected-picker */
    }

    /* ensure room for the label inside the box */
    .international-picker .selected-picker[b-cs6vz5n3k2] {
        padding-top: 18px;
        position: relative;
        z-index: 1;
    }
/* Make all hints in the Airline | Flight # | Trip Type row a fixed size */
.flight-row-airline .float-label[b-cs6vz5n3k2] {
    font-size: 12px !important;
}
/* Make it obvious the whole frame is clickable */
.fi-datetime.clickable[b-cs6vz5n3k2] {
    cursor: pointer;
}
    /* Keep cursor text on the actual input so it still looks like a field */
    .fi-datetime.clickable input[b-cs6vz5n3k2] {
        cursor: text;
    }



/* Ensure the field is a positioning context */
.float-field[b-cs6vz5n3k2] {
    position: relative;
}



/* Keep your input/label styles as-is (you already have them) */
/* Clickable Yes/No labels */
.intl-switch-text[b-cs6vz5n3k2] {
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    outline: none;
}

    .intl-switch-text:hover[b-cs6vz5n3k2] {
        background: #f8f9fa;
    }

    .intl-switch-text:focus-visible[b-cs6vz5n3k2] {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-blue, #1B63C7) 22%, transparent);
    }

    .intl-switch-text.active[b-cs6vz5n3k2] {
        font-weight: 700;
        text-decoration: underline;
    }



/* Since we removed the built-in button, keep some right padding for chips/custom icon */
.fi-datetime[b-cs6vz5n3k2]  .rz-inputtext {
    padding-right: 44px; /* same space you budgeted for the icon */
}

.fi-datetime[b-cs6vz5n3k2] {
    scroll-margin-top: 72px;
}



    /* Match Radzen input height + layout assumptions */
    .fi-datetime .selected-picker[b-cs6vz5n3k2] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 56px; /* Radzen input height */
        padding: 0 12px;
        border: 1px solid var(--field-border, #d9d9d9);
        border-radius: 4px;
        background: #fff;
    }

    /* Placeholder vs value */
    .fi-datetime .picker-placeholder[b-cs6vz5n3k2] {
        opacity: .75;
        color: var(--field-placeholder, #8a8a8a);
    }

    .fi-datetime .picker-value[b-cs6vz5n3k2] {
        color: var(--field-text, #222);
    }

    /* Calendar icon placement */
    .fi-datetime .picker-icon[b-cs6vz5n3k2] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        margin-left: 8px;
        flex: 0 0 auto;
        opacity: .8;
    }

    /* Focus ring to mimic Radzen focus */
    .fi-datetime.is-focused .selected-picker[b-cs6vz5n3k2] {
        border-color: var(--field-focus, #3b82f6) !important;
        box-shadow: 0 0 0 .2rem var(--field-ring, rgba(59,130,246,.15)) !important;
    }

    /* Floating label behavior */
    .fi-datetime .float-label[b-cs6vz5n3k2] {
        transition: transform .16s ease, color .16s ease, top .16s ease;
        transform-origin: left top;
    }

    /* Float when focused OR has a value (like Radzen) */
    .fi-datetime.is-focused .float-label[b-cs6vz5n3k2],
    .fi-datetime.has-value .float-label[b-cs6vz5n3k2] {
        color: var(--brand-blue, #0a66c2);
        transform: translateY(-14px) scale(.86);
    }


/* Button resets so it looks like your Radzen input face */
.float-field.fi-datetime[b-cs6vz5n3k2] {
    position: relative;
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 0;
}

/* The �box� */
.fi-datetime .selected-picker[b-cs6vz5n3k2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px; /* Radzen input height */
    padding: 0 12px;
    border: 1px solid var(--field-border, #d9d9d9);
    border-radius: 4px;
    background: #fff;
}

/* Placeholder vs value */
.fi-datetime .picker-placeholder[b-cs6vz5n3k2] {
    opacity: .75;
    color: var(--field-placeholder, #8a8a8a);
}

.fi-datetime .picker-value[b-cs6vz5n3k2] {
    color: var(--field-text, #222);
}

/* Icon */
.fi-datetime .picker-icon[b-cs6vz5n3k2] {
    margin-left: 8px;
    flex: 0 0 auto;
    opacity: .85;
}

/* Focus ring: button focus triggers it */
.float-field.fi-datetime:focus .selected-picker[b-cs6vz5n3k2] {
    border-color: var(--field-focus, #3b82f6) !important;
    box-shadow: 0 0 0 .2rem var(--field-ring, rgba(59,130,246,.15)) !important;
    outline: 0;
}

/* Floating label positioning (56px baseline) */
.float-field.fi-datetime .float-label[b-cs6vz5n3k2] {
    position: absolute;
    left: 12px;
    top: 18px;
    pointer-events: none;
    transition: transform .16s ease, color .16s ease;
    transform-origin: left top;
}

/* Float when focused OR when there�s a value */
.float-field.fi-datetime:focus .float-label[b-cs6vz5n3k2],
.fi-datetime.has-value .float-label[b-cs6vz5n3k2] {
    color: var(--brand-blue, #0a66c2);
    transform: translateY(-14px) scale(.86);
}

/* Click affordance */
.fi-datetime.clickable .selected-picker[b-cs6vz5n3k2] {
    cursor: pointer;
}
/* Overall scale (quick win) */
.dp-sm[b-cs6vz5n3k2] {
    --dp-scale: 0.59; /* try 0.85�0.95 */
}

.dp-sm[b-cs6vz5n3k2] {
    transform-origin: top left;
}
    /* in case the panel uses transforms */
    .dp-sm[b-cs6vz5n3k2],
    .dp-sm *[b-cs6vz5n3k2] {
        /* If Radzen wraps the panel, the class may be on the root popup element. */
    }

        /* Typography + hit-targets */
        .dp-sm .rz-calendar[b-cs6vz5n3k2] {
            font-size: 0.875rem;
        }
            /* smaller text */
            .dp-sm .rz-calendar .rz-calendar-day[b-cs6vz5n3k2],
            .dp-sm .rz-calendar .rz-calendar-month[b-cs6vz5n3k2] {
                width: 2rem;
                height: 2rem;
                line-height: 2rem; /* smaller cells */
                padding: 0;
            }

            .dp-sm .rz-calendar .rz-calendar-title[b-cs6vz5n3k2] {
                padding: .25rem .5rem;
            }

        /* Time section trims */
        .dp-sm .rz-timepicker[b-cs6vz5n3k2] {
            font-size: 0.875rem;
        }

            .dp-sm .rz-timepicker .rz-inputtext[b-cs6vz5n3k2] {
                width: 2.75rem;
            }
            /* hour/min boxes */
            .dp-sm .rz-timepicker .rz-seconds[b-cs6vz5n3k2] {
                display: none;
            }
/* if seconds still render */
/* popup calendar compaction � older/alt wrappers */
.rz-popup .rz-calendar[b-cs6vz5n3k2],
.rz-calendar.rz-calendar-popup[b-cs6vz5n3k2],
body > div[class*="rz-overlay"] .rz-calendar[b-cs6vz5n3k2] {
    font-size: 0.875rem;
}

    .rz-popup .rz-calendar .rz-calendar-day[b-cs6vz5n3k2],
    .rz-calendar.rz-calendar-popup .rz-calendar-day[b-cs6vz5n3k2],
    body > div[class*="rz-overlay"] .rz-calendar .rz-calendar-day[b-cs6vz5n3k2],
    .rz-popup .rz-calendar .rz-calendar-month[b-cs6vz5n3k2],
    .rz-calendar.rz-calendar-popup .rz-calendar-month[b-cs6vz5n3k2],
    body > div[class*="rz-overlay"] .rz-calendar .rz-calendar-month[b-cs6vz5n3k2] {
        width: 2rem;
        height: 2rem;
        line-height: 2rem;
        padding: 0;
    }



/* ===============================
   ADD TO FlightComponent_razor.css
   Custom DateTime Button Picker Styles
   =============================== */

/* Match the look of fi-datetime but as a button */
.float-field.fi-datetime-custom[b-cs6vz5n3k2] {
    position: relative;
    display: block;
    width: 100%;
    cursor: pointer;
    background: transparent;
    border: 0;
    padding: 0;
    text-align: left;
}

/* The "box" */
.fi-datetime-custom .selected-picker[b-cs6vz5n3k2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px; /* Match Radzen input height */
    padding: 18px 12px 8px 12px; /* Top padding for floating label */
    border: 1px solid var(--field-border, #d9d9d9);
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Placeholder vs value */
.fi-datetime-custom .picker-placeholder[b-cs6vz5n3k2] {
    opacity: .75;
    color: var(--field-placeholder, #8a8a8a);
    font-size: 16px;
}

.fi-datetime-custom .picker-value[b-cs6vz5n3k2] {
    color: var(--brand-blue-dark, var(--brand-blue-dark));
    font-size: 16px;
    flex: 1;
}

    .fi-datetime-custom .picker-value span[b-cs6vz5n3k2] {
        color: var(--brand-blue-dark, var(--brand-blue-dark));
    }

/* Icon */
.fi-datetime-custom .picker-icon[b-cs6vz5n3k2] {
    margin-right: 8px;
    flex: 0 0 auto;
    opacity: .85;
    color: var(--brand-blue-dark, var(--brand-blue-dark));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
}

/* Focus ring: button focus triggers it */
.float-field.fi-datetime-custom:focus .selected-picker[b-cs6vz5n3k2],
.float-field.fi-datetime-custom:focus-within .selected-picker[b-cs6vz5n3k2] {
    border-color: var(--field-focus, #1B63C7) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-blue, #1B63C7) 22%, transparent) !important;
    outline: 0;
}

/* Hover state */
.float-field.fi-datetime-custom:hover .selected-picker[b-cs6vz5n3k2] {
    border-color: var(--brand-blue, #1B63C7);
}


/* Time chip positioning - positioned on right side (icon is on left) */
.float-field.fi-datetime-custom .time-chip[b-cs6vz5n3k2] {
    position: absolute;
    right: 12px; /* icon is now on left, so more room on right */
    top: 20px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #F2F6FF;
    color: var(--brand-blue-dark);
    border: 1px solid var(--brand-blue);
    font-size: .75rem;
    line-height: 1.4;
    pointer-events: none;
    white-space: nowrap;
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 1;
}

/* Adjust chip position when label floats */
.float-field.fi-datetime-custom.has-value .time-chip[b-cs6vz5n3k2] {
    top: 20px;
}

/* Tighten on very narrow phones */
@media (max-width: 400px) {
    .float-field.fi-datetime-custom .time-chip[b-cs6vz5n3k2] {
        right: 8px;
        font-size: .55rem;
        font-weight: 600;
        max-width: 35%;
    }
}

/* ===============================
   Flight Info Summary Button
   =============================== */

.flight-info-summary[b-cs6vz5n3k2] {
    width: 100%;
}

.flight-summary-picker[b-cs6vz5n3k2] {
    position: relative;
    width: 100%;
}

    .flight-summary-picker .selected-picker[b-cs6vz5n3k2] {
        position: relative;
        z-index: 1;
        min-height: var(--field-min-h, 56px);
        padding: 12px; /* Balanced padding since label is on border */
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        color: var(--brand-blue-dark);
        font-size: var(--field-font-size, 16px);
        line-height: var(--field-line, 1.5);
        border: 1px solid var(--field-border, #d9d9d9) !important;
        border-radius: var(--field-radius, 8px);
        background: #fff;
        box-sizing: border-box;
        cursor: pointer;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

        .flight-summary-picker .selected-picker:hover[b-cs6vz5n3k2] {
            border-color: var(--brand-blue, #1B63C7);
        }

    .flight-summary-picker:focus .selected-picker[b-cs6vz5n3k2],
    .flight-summary-picker:focus-within .selected-picker[b-cs6vz5n3k2] {
        border-color: var(--field-focus, #1B63C7) !important;
        box-shadow: 0 0 0 .25rem var(--field-ring, rgba(27, 99, 199, 0.25)) !important;
        outline: 0;
    }

    .flight-summary-picker .picker-value[b-cs6vz5n3k2] {
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
        flex: 1;
    }

    .flight-summary-picker .flight-summary-text[b-cs6vz5n3k2] {
        color: var(--brand-blue-dark);
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .flight-summary-picker .picker-placeholder[b-cs6vz5n3k2] {
        color: var(--brand-blue-dark);
        opacity: 0.75;
    }

    .flight-summary-picker .chevron[b-cs6vz5n3k2] {
        font-size: 12px;
        margin-left: 6px;
        color: #666;
        flex-shrink: 0;
    }

    /* Float label positioning - STATIONARY on top border (like PassengersBags) */
    .flight-summary-picker .float-label[b-cs6vz5n3k2] {
        position: absolute;
        left: 12px;
        top: -8px;
        background-color: white;
        padding: 0 4px;
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--brand-blue, var(--brand-blue));
        pointer-events: none;
        z-index: 2;
    }

    /* Focus state - label stays in same position, just changes weight */
    .flight-summary-picker:focus .float-label[b-cs6vz5n3k2],
    .flight-summary-picker:focus-within .float-label[b-cs6vz5n3k2],
    .flight-summary-picker.has-value .float-label[b-cs6vz5n3k2],
    .flight-summary-picker.always-float .float-label[b-cs6vz5n3k2] {
        color: var(--brand-blue, var(--brand-blue));
        font-weight: 600;
    }

/* ===============================
   ADD TO FlightComponent_razor.css
   Custom DateTime Button Picker Styles
   =============================== */

/* Match the look of fi-datetime but as a button */
.float-field.fi-datetime-custom[b-cs6vz5n3k2] {
    position: relative;
    display: block;
    width: 100%;
    cursor: pointer;
    background: transparent;
    border: 0;
    padding: 0;
}

/* The "box" */
.fi-datetime-custom .selected-picker[b-cs6vz5n3k2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px; /* Match Radzen input height */
    padding: 12px; /* Balanced padding since label is on border */
    border: 1px solid var(--field-border, #d9d9d9);
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Placeholder vs value */
.fi-datetime-custom .picker-placeholder[b-cs6vz5n3k2] {
    opacity: .75;
    color: var(--field-placeholder, #8a8a8a);
    font-size: 16px;
}

.fi-datetime-custom .picker-value[b-cs6vz5n3k2] {
    color: var(--brand-blue-dark, var(--brand-blue-dark));
    font-size: 16px;
    flex: 1;
}

    .fi-datetime-custom .picker-value span[b-cs6vz5n3k2] {
        color: var(--brand-blue-dark, var(--brand-blue-dark));
    }

/* Icon */
.fi-datetime-custom .picker-icon[b-cs6vz5n3k2] {
    margin-right: 8px;
    flex: 0 0 auto;
    opacity: .85;
    color: var(--brand-blue-dark, var(--brand-blue-dark));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
}

/* Focus ring: button focus triggers it */
.float-field.fi-datetime-custom:focus .selected-picker[b-cs6vz5n3k2],
.float-field.fi-datetime-custom:focus-within .selected-picker[b-cs6vz5n3k2] {
    border-color: var(--field-focus, #1B63C7) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-blue, #1B63C7) 22%, transparent) !important;
    outline: 0;
}

/* Hover state */
.float-field.fi-datetime-custom:hover .selected-picker[b-cs6vz5n3k2] {
    border-color: var(--brand-blue, #1B63C7);
}

/* Floating label positioning - STATIONARY on top border (like PassengersBags) */
.float-field.fi-datetime-custom .float-label[b-cs6vz5n3k2] {
    position: absolute;
    left: 12px;
    top: -8px;
    background-color: white;
    padding: 0 4px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--brand-blue, var(--brand-blue));
    pointer-events: none;
    z-index: 2;
}

/* Focus state - label stays in same position, just changes weight */
.float-field.fi-datetime-custom:focus .float-label[b-cs6vz5n3k2],
.float-field.fi-datetime-custom.has-value .float-label[b-cs6vz5n3k2],
.float-field.fi-datetime-custom.always-float .float-label[b-cs6vz5n3k2] {
    color: var(--brand-blue, var(--brand-blue));
    font-weight: 600;
}

/* Time chip positioning - positioned on right side (icon is on left) */
.float-field.fi-datetime-custom .time-chip[b-cs6vz5n3k2] {
    position: absolute;
    right: 12px; /* icon is now on left, so more room on right */
    top: 16px; /* Adjusted for reduced padding */
    padding: 2px 8px;
    border-radius: 999px;
    background: #F2F6FF;
    color: var(--brand-blue-dark);
    border: 1px solid var(--brand-blue);
    font-size: .75rem;
    line-height: 1.4;
    pointer-events: none;
    white-space: nowrap;
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 1;
}

/* Adjust chip position when label floats */
.float-field.fi-datetime-custom.has-value .time-chip[b-cs6vz5n3k2] {
    top: 16px;
}

/* Tighten on very narrow phones */
@media (max-width: 400px) {
    .float-field.fi-datetime-custom .time-chip[b-cs6vz5n3k2] {
        right: 8px;
        font-size: .55rem;
        font-weight: 600;
        max-width: 35%;
    }
}

/* Time chip color variations based on time of day */
.float-field.fi-datetime-custom .time-chip.time-morning[b-cs6vz5n3k2] {
    background: linear-gradient(135deg, #FFF9E6 0%, #FFF3CC 100%);
    border-color: #F59E0B;
    color: #92400E;
}

.float-field.fi-datetime-custom .time-chip.time-midday[b-cs6vz5n3k2],
.float-field.fi-datetime-custom .time-chip.time-afternoon[b-cs6vz5n3k2] {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    border-color: #F59E0B;
    color: #92400E;
}

.float-field.fi-datetime-custom .time-chip.time-evening[b-cs6vz5n3k2] {
    background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%);
    border-color: #6366F1;
    color: #312E81;
}

.float-field.fi-datetime-custom .time-chip.time-midnight[b-cs6vz5n3k2],
.float-field.fi-datetime-custom .time-chip.time-after-midnight[b-cs6vz5n3k2],
.float-field.fi-datetime-custom .time-chip.time-before-midnight[b-cs6vz5n3k2],
.float-field.fi-datetime-custom .time-chip.time-night[b-cs6vz5n3k2] {
    background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%);
    border-color: #4F46E5;
    color: #1E1B4B;
}

.float-field.fi-datetime-custom .time-chip.time-early-morning[b-cs6vz5n3k2] {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    border-color: #F59E0B;
    color: #92400E;
}

/* ===============================
   RadzenDropDown as Display Triggers
   =============================== */

/* Prevent dropdown panels from opening - these are triggers only */
.rz-dropdown-datetime .rz-dropdown-panel[b-cs6vz5n3k2],
.rz-dropdown-flightinfo .rz-dropdown-panel[b-cs6vz5n3k2] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Disable the dropdown arrow */
.rz-dropdown-datetime .rz-dropdown-toggle[b-cs6vz5n3k2],
.rz-dropdown-flightinfo .rz-dropdown-toggle[b-cs6vz5n3k2] {
    display: none !important;
}

/* Make entire dropdown clickable */
.rz-dropdown-datetime[b-cs6vz5n3k2],
.rz-dropdown-flightinfo[b-cs6vz5n3k2] {
    cursor: pointer !important;
}

    .rz-dropdown-datetime .rz-dropdown-label-container[b-cs6vz5n3k2],
    .rz-dropdown-flightinfo .rz-dropdown-label-container[b-cs6vz5n3k2] {
        cursor: pointer !important;
        pointer-events: all !important;
    }

/* Inline time chip for RadzenDropDown template */
.time-chip-inline[b-cs6vz5n3k2] {
    padding: 2px 8px;
    border-radius: 999px;
    background: #F2F6FF;
    color: var(--brand-blue-dark);
    border: 1px solid var(--brand-blue);
    font-size: 0.75rem;
    line-height: 1.4;
    white-space: nowrap;
}

    /* Time chip color variations */
    .time-chip-inline.time-morning[b-cs6vz5n3k2] {
        background: linear-gradient(135deg, #FFF9E6 0%, #FFF3CC 100%);
        border-color: #F59E0B;
        color: #92400E;
    }

    .time-chip-inline.time-midday[b-cs6vz5n3k2],
    .time-chip-inline.time-afternoon[b-cs6vz5n3k2] {
        background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
        border-color: #F59E0B;
        color: #92400E;
    }

    .time-chip-inline.time-evening[b-cs6vz5n3k2] {
        background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%);
        border-color: #6366F1;
        color: #312E81;
    }

    .time-chip-inline.time-midnight[b-cs6vz5n3k2],
    .time-chip-inline.time-after-midnight[b-cs6vz5n3k2],
    .time-chip-inline.time-before-midnight[b-cs6vz5n3k2],
    .time-chip-inline.time-night[b-cs6vz5n3k2] {
        background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%);
        border-color: #4F46E5;
        color: #1E1B4B;
    }

    .time-chip-inline.time-early-morning[b-cs6vz5n3k2] {
        background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
        border-color: #F59E0B;
        color: #92400E;
    }

/* ===============================
   RadzenButton Picker Styles
   =============================== */

/* DateTime and FlightInfo Button Pickers */
.datetime-button[b-cs6vz5n3k2],
.flightinfo-button[b-cs6vz5n3k2] {
    cursor: pointer !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

    .datetime-button:hover[b-cs6vz5n3k2],
    .flightinfo-button:hover[b-cs6vz5n3k2] {
        border-color: var(--brand-blue, #1B63C7) !important;
    }

    .datetime-button:focus[b-cs6vz5n3k2],
    .flightinfo-button:focus[b-cs6vz5n3k2] {
        border-color: var(--field-focus, #1B63C7) !important;
        box-shadow: 0 0 0 .25rem var(--field-ring, rgba(27, 99, 199, 0.25)) !important;
        outline: 0 !important;
    }

/* Ensure float labels work with button pickers */
.float-dropdown.datetime-picker[b-cs6vz5n3k2],
.float-dropdown.flight-info-picker[b-cs6vz5n3k2] {
    position: relative;
}

    .float-dropdown.datetime-picker .float-label[b-cs6vz5n3k2],
    .float-dropdown.flight-info-picker .float-label[b-cs6vz5n3k2] {
        position: absolute;
        left: 12px;
        top: -8px;
        background-color: white;
        padding: 0 4px;
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--brand-blue, var(--brand-blue));
        pointer-events: none;
        z-index: 2;
    }

    .float-dropdown.datetime-picker.has-value .float-label[b-cs6vz5n3k2],
    .float-dropdown.flight-info-picker.has-value .float-label[b-cs6vz5n3k2] {
        font-weight: 600;
    }

/* ===============================
   Info Links (Help)
   =============================== */

.flight-help-info[b-cs6vz5n3k2] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-link[b-cs6vz5n3k2] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--brand-blue, var(--brand-blue));
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
}

    .info-link:hover[b-cs6vz5n3k2] {
        text-decoration: underline;
        color: var(--brand-blue-dark, var(--brand-blue-hover));
    }

.info-icon[b-cs6vz5n3k2] {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    max-width: 16px;
    max-height: 16px;
    fill: currentColor;
    flex-shrink: 0;
    display: inline-block;
}

    .info-icon path[b-cs6vz5n3k2] {
        fill: currentColor;
    }
/* /Components/FlightSelectionModal.razor.rz.scp.css */
/* ===============================
   Flight Selection Modal - Main Container
   =============================== */
.flight-modal-container[b-hhalazhff3] {
    padding: 10px 0px 0px 0px; /* Just enough for floating label */
    max-height: 80vh;
    overflow: hidden; /* Let the list scroll, not the container */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ===============================
   Float Field Framework (Shared)
   =============================== */
.float-field[b-hhalazhff3] {
    position: relative;
    border: 1px solid var(--field-border, #d9d9d9);
    border-radius: 8px;
    background: white;
    padding: 20px 16px 16px 16px;
    min-height: 56px;
    transition: border-color 0.2s;
    overflow: visible; /* Allow label to extend beyond border */
    margin-bottom: 0; /* Prevent inherited margins */
}

    .float-field:focus-within[b-hhalazhff3] {
        border-color: var(--brand-blue, var(--brand-blue));
    }

    .float-field.has-value[b-hhalazhff3] {
        border-color: var(--brand-blue, var(--brand-blue));
    }

.float-label[b-hhalazhff3] {
    position: absolute !important;
    top: -12px !important;
    left: 20px !important;
    background: transparent !important;
    padding: 0 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #666 !important;
    transition: all 0.2s !important;
    pointer-events: none !important;
    z-index: 10 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

.float-field.has-value .float-label[b-hhalazhff3],
.float-field:focus-within .float-label[b-hhalazhff3] {
    color: var(--brand-blue, var(--brand-blue)) !important;
}
/* Override float-field border for flights-frame */
.flights-frame[b-hhalazhff3] {
    border: 1px solid var(--brand-blue, #2963A8) !important;
    border-radius: 8px;
}
/* ===============================
   Float Label Content Wrapper
   =============================== */
.float-label-content[b-hhalazhff3] {
    display: inline-flex;
    align-items: center;
    background: white;
    padding: 4px 8px;
    line-height: 1.2;
    box-shadow: 0 0 0 3px white;
}

/* ===============================
   Airline Logo in Float Label
   =============================== */
.airline-logo-label[b-hhalazhff3] {
    height: 16px;
    width: auto;
    vertical-align: middle;
    margin-right: 4px;
    object-fit: contain;
}

/* ===============================
   Flights Frame
   =============================== */
.flights-frame[b-hhalazhff3] {
    padding: 16px 12px 12px 12px;
    overflow: visible;
    display: flex;
    flex-direction: column;
    flex: 1; /* Take available space */
    min-height: 0; /* Important for flex children to shrink */
}

.flights-grid-content[b-hhalazhff3] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    flex: 1; /* Grow to fill available space */
    min-height: 0; /* Allow shrinking */
    padding: 4px;
}

/* ===============================
   International Picker (Flight Type)
   =============================== */
.international-picker[b-hhalazhff3] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 12px 16px;
    overflow: visible; /* Allow label to extend beyond */
    flex-shrink: 0; /* Don't shrink this section */
    margin-bottom: 0 !important; /* Override inherited margin */
}

    .international-picker.has-value[b-hhalazhff3] {
        border-color: var(--brand-blue, var(--brand-blue));
    }

    .international-picker .float-label[b-hhalazhff3] {
        top: -12px !important;
    }

.intl-switch-container[b-hhalazhff3] {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    justify-content: center;
    flex-wrap: nowrap;
}

.intl-link[b-hhalazhff3] {
    padding: 4px 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
    user-select: none;
    color: var(--brand-blue, var(--brand-blue));
    text-decoration: underline;
    white-space: nowrap;
}

    .intl-link:hover[b-hhalazhff3] {
        color: var(--brand-blue-dark, #1e4a7a);
    }

    .intl-link.active[b-hhalazhff3] {
        font-weight: 700;
        color: var(--brand-blue, var(--brand-blue));
        text-decoration: none;
    }

        .intl-link.active.international[b-hhalazhff3] {
            color: var(--brand-gold, var(--brand-gold));
        }

/* ===============================
   Validation Error
   =============================== */
.validation-error[b-hhalazhff3] {
    padding: 12px 16px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 8px;
    color: #856404;
    font-size: 14px;
    flex-shrink: 0;
}

/* ===============================
   Don't Have Flight Checkbox
   =============================== */
.dont-have-flight-checkbox[b-hhalazhff3] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
}

.checkbox-label[b-hhalazhff3] {
    cursor: pointer;
    user-select: none;
    font-size: 14px;
    color: #333;
}

/* ===============================
   Search Filter Row
   =============================== */
.search-filter-row[b-hhalazhff3] {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.search-link[b-hhalazhff3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    color: var(--brand-blue, var(--brand-blue));
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    padding: 12px 16px;
    background: #f0f7ff;
    border: 1px solid var(--brand-blue, var(--brand-blue));
    border-radius: 8px;
    transition: all 0.2s;
}

    .search-link:hover[b-hhalazhff3] {
        background: #e0efff;
        text-decoration: none;
    }

.search-icon[b-hhalazhff3] {
    font-size: 18px;
    vertical-align: middle;
}

/* Filter Chip */
.filter-chip[b-hhalazhff3] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--brand-blue, var(--brand-blue));
    color: white;
    padding: 6px 8px 6px 12px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
}

.filter-chip-text[b-hhalazhff3] {
    white-space: nowrap;
}

.filter-chip-clear[b-hhalazhff3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    padding: 0;
    transition: background 0.2s;
}

    .filter-chip-clear:hover[b-hhalazhff3] {
        background: rgba(255, 255, 255, 0.4);
    }

/* ===============================
   Search Box (Legacy - kept for compatibility)
   =============================== */
.flight-search-box[b-hhalazhff3] {
    width: 100%;
    margin-bottom: 8px;
}

/* ===============================
   Flights List Container
   =============================== */
.flights-list[b-hhalazhff3] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ===============================
   Grid System - Header and Rows
   =============================== */

/* Shared grid layout for both header and data rows */
.flight-grid-header[b-hhalazhff3],
.flight-grid-row[b-hhalazhff3] {
    display: grid;
    grid-template-columns: 90px 100px 100px 1fr 30px;
    gap: 12px;
    align-items: center;
    width: 100%;
    padding: 12px;
    box-sizing: border-box;
}

/* Grid Header */
.flight-grid-header[b-hhalazhff3] {
    background: var(--brand-blue-dark, #0a2b56);
    color: white;
    font-weight: 600;
    border-radius: 4px;
    font-size: 14px;
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Grid Row (inside button) - has its own padding */
.flight-grid-row[b-hhalazhff3] {
    font-size: 14px;
}

/* Column Styling */
.col-flight[b-hhalazhff3] {
    font-weight: 600;
    color: var(--brand-blue, var(--brand-blue));
    text-align: left;
}

.col-depart[b-hhalazhff3],
.col-arrive[b-hhalazhff3] {
    text-align: center;
    color: #333;
}

.col-airports[b-hhalazhff3] {
    text-align: left;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Checkmark column */
.col-check[b-hhalazhff3] {
    text-align: center;
    color: var(--brand-blue-dark, #0a2b56);
}

.checkmark[b-hhalazhff3] {
    font-size: 18px;
    font-weight: bold;
    color: var(--brand-blue-dark, #0a2b56);
}

/* International globe icon */
.intl-icon[b-hhalazhff3] {
    margin-left: 4px;
    font-size: 14px;
}

/* Header column colors */
.flight-grid-header .col-flight[b-hhalazhff3],
.flight-grid-header .col-depart[b-hhalazhff3],
.flight-grid-header .col-arrive[b-hhalazhff3],
.flight-grid-header .col-airports[b-hhalazhff3] {
    color: white;
    text-align: center;
}

.flight-grid-header .col-flight[b-hhalazhff3] {
    text-align: left;
}

.flight-grid-header .col-airports[b-hhalazhff3] {
    text-align: left;
}

/* ===============================
   Flight Row Buttons
   =============================== */
.flight-row-button[b-hhalazhff3] {
    width: 100%;
    text-align: left;
    padding: 0;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    display: block;
}

    .flight-row-button:hover[b-hhalazhff3] {
        background: #f8f9fa;
        border-color: var(--brand-blue, var(--brand-blue));
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .flight-row-button:focus[b-hhalazhff3] {
        outline: 2px solid var(--brand-blue, var(--brand-blue));
        outline-offset: 2px;
    }

    .flight-row-button.selected[b-hhalazhff3] {
        background: #e3f2fd;
        border-color: var(--brand-blue, var(--brand-blue));
        border-width: 2px;
    }

/* ===============================
   Special Row Types
   =============================== */

/* Context Text */
.context-text[b-hhalazhff3] {
    padding: 8px;
    color: #666;
    font-size: 14px;
    font-style: italic;
}

/* No Flights Message */
.no-flights-message[b-hhalazhff3] {
    padding: 20px;
    text-align: center;
    color: #666;
    font-size: 14px;
}

/* ===============================
   Show More/Fewer Flights Toggle
   =============================== */
.show-more-flights[b-hhalazhff3] {
    padding: 12px 8px;
    text-align: center;
    border-top: 1px solid #e8eaed;
    margin-top: 4px;
}

    .show-more-flights a[b-hhalazhff3] {
        color: var(--brand-blue, var(--brand-blue));
        text-decoration: underline;
        font-size: 14px;
        cursor: pointer;
    }

        .show-more-flights a:hover[b-hhalazhff3] {
            color: var(--brand-blue-dark, #1e4a7a);
        }

/* ===============================
   Modal Actions (Footer Buttons)
   =============================== */
.modal-actions[b-hhalazhff3] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 16px;
    border-top: 1px solid #e8eaed;
    background: #fff;
    margin-top: auto;
    flex-shrink: 0; /* Don't shrink the buttons */
}

/* ===============================
   Mobile Responsive
   =============================== */
@media (max-width: 600px) {
    .flight-modal-container[b-hhalazhff3] {
        padding-top: 10px;
    }

    .flight-grid-header[b-hhalazhff3],
    .flight-grid-row[b-hhalazhff3] {
        grid-template-columns: 78px 74px 74px 1fr 24px;
        gap: 8px;
        font-size: 16px !important;
        padding: 16px 10px;
    }

    /* Flight number stays bold */
    .col-flight[b-hhalazhff3] {
        font-size: 16px !important;
        font-weight: 600;
    }

    /* Times - normal weight, emphasized class will bold the important one */
    .col-depart[b-hhalazhff3],
    .col-arrive[b-hhalazhff3] {
        font-size: 16px !important;
    }

    /* Airports column - normal weight, emphasized span will bold the important airport */
    .col-airports[b-hhalazhff3] {
        font-size: 12px !important;
    }

    /* Larger tap targets for flight rows */
    .flight-row-button[b-hhalazhff3] {
        margin-bottom: 8px;
    }

    .modal-actions[b-hhalazhff3] {
        padding: 12px 12px;
        flex-wrap: nowrap;
    }

        .modal-actions :deep(.rz-button)[b-hhalazhff3] {
            font-size: 14px !important;
            padding: 10px 14px !important;
        }

    .intl-switch-container[b-hhalazhff3] {
        gap: 12px;
        flex-wrap: nowrap;
    }

    .intl-link[b-hhalazhff3] {
        font-size: 14px;
        padding: 4px 6px;
    }

    .intl-icon[b-hhalazhff3] {
        font-size: 14px;
        margin-left: 2px;
    }

    /* Search link mobile */
    .search-link[b-hhalazhff3] {
        font-size: 14px;
    }

    /* Filter chip mobile - larger tap target */
    .filter-chip[b-hhalazhff3] {
        padding: 8px 10px 8px 14px;
        font-size: 14px;
    }

    .filter-chip-clear[b-hhalazhff3] {
        width: 24px;
        height: 24px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .flight-modal-container[b-hhalazhff3] {
        padding: 10px 8px 12px 8px;
    }

    .flight-grid-header[b-hhalazhff3],
    .flight-grid-row[b-hhalazhff3] {
        grid-template-columns: 74px 70px 70px 1fr 22px;
        gap: 6px;
        font-size: 15px !important;
        padding: 14px 8px;
    }

    /* Flight number stays bold */
    .col-flight[b-hhalazhff3] {
        font-size: 15px !important;
        font-weight: 600;
    }

    /* Times - normal weight */
    .col-depart[b-hhalazhff3],
    .col-arrive[b-hhalazhff3] {
        font-size: 15px !important;
    }

    /* Airports column */
    .col-airports[b-hhalazhff3] {
        font-size: 11px !important;
    }

    .flight-row-button[b-hhalazhff3] {
        margin-bottom: 6px;
    }

    .modal-actions :deep(.rz-button)[b-hhalazhff3] {
        font-size: 13px !important;
        padding: 10px 12px !important;
    }

    .intl-link[b-hhalazhff3] {
        font-size: 13px;
    }

    .intl-icon[b-hhalazhff3] {
        font-size: 13px;
        margin-left: 1px;
    }
}

/* Extra small phones (iPhone SE, etc.) */
@media (max-width: 375px) {
    .flight-grid-header[b-hhalazhff3],
    .flight-grid-row[b-hhalazhff3] {
        grid-template-columns: 68px 64px 64px 1fr 20px;
        gap: 4px;
        font-size: 14px !important;
        padding: 12px 6px;
    }

    .col-flight[b-hhalazhff3],
    .col-depart[b-hhalazhff3],
    .col-arrive[b-hhalazhff3] {
        font-size: 14px !important;
    }

    .col-airports[b-hhalazhff3] {
        font-size: 12px !important;
    }

    .modal-actions :deep(.rz-button)[b-hhalazhff3] {
        font-size: 12px !important;
        padding: 9px 10px !important;
    }
}

/* Emphasized time column (departure time for departures, arrival time for arrivals) */
.col-depart.emphasized[b-hhalazhff3],
.col-arrive.emphasized[b-hhalazhff3] {
    font-weight: 700;
    color: var(--brand-blue-dark, #0a2b56);
}

/* Emphasized elements (relevant time and destination airport) */
.col-depart.emphasized[b-hhalazhff3],
.col-arrive.emphasized[b-hhalazhff3],
.col-airports span.emphasized[b-hhalazhff3] {
    font-weight: 700;
    color: var(--brand-blue-dark, #0a2b56);
}



.float-label[b-hhalazhff3] {
    top: -16px !important;
}

.float-label-content[b-hhalazhff3] {
    display: inline-flex;
    align-items: center;
    background: white;
    padding: 8px 8px;
    line-height: 1;
}

/* ===============================
   ACCESSIBILITY ENHANCEMENTS
   =============================== */

/* Focused state for keyboard navigation (distinct from selected) */
.flight-row-button.focused[b-hhalazhff3] {
    background: #f0f7ff;
    border-color: var(--brand-blue, #005EB8);
    box-shadow: inset 0 0 0 2px var(--brand-blue, #005EB8);
}

.flight-row-button.focused.selected[b-hhalazhff3] {
    background: #d4ebfc;
}

/* Focus-visible for keyboard users - enhanced visibility */
.flight-row-button:focus-visible[b-hhalazhff3] {
    outline: 3px solid var(--brand-blue, #005EB8);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(0, 94, 184, 0.25);
}

/* Link button styles (for "I don't have a flight" and "My flight isn't in list") - enhanced visibility */
.link-button:focus-visible[b-hhalazhff3] {
    outline: 3px solid var(--brand-blue, #005EB8);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(0, 94, 184, 0.25);
}

/* Filter chip clear button - enhanced visibility */
.filter-chip-clear:focus-visible[b-hhalazhff3] {
    outline: 3px solid white;
    outline-offset: 1px;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.4);
}

/* Show more/fewer flights toggle - enhanced visibility */
.show-more-flights button:focus-visible[b-hhalazhff3] {
    outline: 3px solid var(--brand-blue, #005EB8);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(0, 94, 184, 0.25);
}

/* Search button - enhanced visibility */
.search-filter-row :deep(.rz-button):focus-visible[b-hhalazhff3] {
    outline: 3px solid var(--brand-blue, #005EB8) !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(0, 94, 184, 0.25) !important;
}

/* ===============================
   Fallback Links (bottom of modal)
   =============================== */
.flight-fallback-links[b-hhalazhff3] {
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid #e8eaed;
    background: #fafafa;
    flex-shrink: 0;
    gap: 16px;
}

.flight-fallback-links .link-button[b-hhalazhff3] {
    color: var(--brand-blue, #2963A8);
    text-decoration: none;
    cursor: pointer;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px 12px;
    font: inherit;
    font-size: 13px;
}

.flight-fallback-links .link-button:hover[b-hhalazhff3] {
    color: var(--brand-blue-dark, #1e4a7a);
    background: #f5f5f5;
    border-color: #ccc;
}

.flight-fallback-links .link-button:focus-visible[b-hhalazhff3] {
    outline: 3px solid var(--brand-blue, #005EB8);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(0, 94, 184, 0.25);
}

@media (max-width: 480px) {
    .flight-fallback-links[b-hhalazhff3] {
        flex-direction: column;
        gap: 8px;
        padding: 10px 12px;
    }

    .flight-fallback-links .link-button[b-hhalazhff3] {
        font-size: 14px;
        text-align: center;
    }
}
/* /Components/HourlyServiceAcknowledgementDialog.razor.rz.scp.css */
.hourly-dialog-content[b-1x0vxwjaah] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 4px;
}

.hourly-dialog-body[b-1x0vxwjaah] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hourly-intro[b-1x0vxwjaah] {
    margin: 0;
    line-height: 1.5;
    color: #333;
    font-size: 0.95rem;
}

.hourly-terms[b-1x0vxwjaah] {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 16px;
    border-left: 4px solid var(--brand-blue, #1a3c6e);
}

.terms-header[b-1x0vxwjaah] {
    margin: 0 0 12px 0;
    font-weight: 600;
    color: #333;
    font-size: 0.95rem;
}

.terms-list[b-1x0vxwjaah] {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .terms-list li[b-1x0vxwjaah] {
        line-height: 1.5;
        color: #555;
        font-size: 0.9rem;
    }

        .terms-list li strong[b-1x0vxwjaah] {
            color: #333;
        }

.hourly-acknowledgement[b-1x0vxwjaah] {
    padding-top: 8px;
    border-top: 1px solid #e9ecef;
}

.acknowledgement-label[b-1x0vxwjaah] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.acknowledgement-checkbox[b-1x0vxwjaah] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    cursor: pointer;
    accent-color: var(--brand-blue, #1a3c6e);
}

.acknowledgement-text[b-1x0vxwjaah] {
    font-size: 0.95rem;
    color: #333;
    font-weight: 500;
}

.hourly-dialog-footer[b-1x0vxwjaah] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 8px;
    border-top: 1px solid #e9ecef;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .hourly-dialog-footer[b-1x0vxwjaah] {
        flex-direction: column-reverse;
    }

        .hourly-dialog-footer .rz-button[b-1x0vxwjaah] {
            width: 100%;
        }
}
/* /Components/InfoCaptureDialog.razor.rz.scp.css */
/* 
 * =============================================================================
 * Z-INDEX HIERARCHY - IMPORTANT!
 * =============================================================================
 * To prevent footer overlap issues with child component dialogs:
 * 
 * PARENT COMPONENT (InfoCaptureDialog):
 *   - .modal-overlay: z-index: 1000 (fixed backdrop)
 *   - .modal-content: z-index: auto, position: relative (creates stacking context)
 *   - .modal-body: z-index: 1 (relative to modal-content)
 *   - .modal-footer: z-index: 10 (relative to modal-content, sticky)
 * 
 * CHILD COMPONENT DIALOGS (AddressEntry, FlightInfo, etc.):
 *   - Should use z-index: 2000+ for their overlays/modals
 *   - This ensures they appear ABOVE the parent's sticky footer
 * 
 * INLINE MODE:
 *   - .inline-footer: z-index: 1000 (fixed at bottom)
 * =============================================================================
 */

.close-icon[b-6h2v50t4rn] {
    display: block;
    width: 20px;
    height: 20px;
    position: relative;
    background: var(--brand-blue);
    border-radius: 4px;
}

    .close-icon[b-6h2v50t4rn]::before,
    .close-icon[b-6h2v50t4rn]::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 12px;
        height: 2px;
        background: #fff;
        transform-origin: center;
    }

    .close-icon[b-6h2v50t4rn]::before {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    .close-icon[b-6h2v50t4rn]::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

.close-button[b-6h2v50t4rn] {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 1.5em;
    color: #333;
    cursor: pointer;
    line-height: 1;
    padding: 5px;
    z-index: 1001;
    transition: color 0.2s ease;
}

    .close-button:hover[b-6h2v50t4rn] {
        color: #000;
    }

    .close-button span[b-6h2v50t4rn] {
        display: inline-block;
    }

.modal-overlay[b-6h2v50t4rn] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content[b-6h2v50t4rn] {
    background: white;
    padding: 5px;
    border-radius: 8px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto; /* Center when screen is wider than max-width */
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: relative;
}

.modal-header[b-6h2v50t4rn] {
    padding: 10px;
    border-bottom: 1px solid #ccc;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50px;
}

    .modal-header h2[b-6h2v50t4rn] {
        margin: 0;
        font-size: 1.3em;
        flex: 1;
        max-width: calc(100% - 50px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
    }

.modal-body[b-6h2v50t4rn] {
    flex: 1;
    overflow-y: auto;
    padding: 2px;
    position: relative;
    z-index: 1;
}

.component-1 .modal-body[b-6h2v50t4rn] {
    padding-top: 10px;
}

.modal-footer[b-6h2v50t4rn] {
    padding: 8px;
    border-top: 1px solid #ccc;
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 6px;
    background-color: white;
    position: sticky;
    bottom: 0;
    z-index: 10;
}

.error-message[b-6h2v50t4rn] {
    color: red;
    font-size: 0.85em;
    margin: 8px 10px;
    text-align: center;
}

.info-capture-close[b-6h2v50t4rn] {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
    color: var(--brand-blue);
    background-color: var(--brand-blue);
    line-height: 1;
    padding: 0;
    justify-self: end;
}

    .info-capture-close:hover[b-6h2v50t4rn] {
        color: #666;
    }

    .info-capture-close .close-icon[b-6h2v50t4rn] {
        display: inline-block;
        width: 16px;
        height: 16px;
    }

/* =============================================================================
   PROGRESS ICONS IN FOOTER
   ============================================================================= */

.progress-icons[b-6h2v50t4rn] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-self: center;
}

    .progress-icons .icon[b-6h2v50t4rn] {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        border: 2px solid #ccc;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 0.8rem;
        color: #999;
        background-color: #fff;
    }

        .progress-icons .icon.completed[b-6h2v50t4rn] {
            border-color: var(--brand-blue, var(--brand-blue));
            background-color: var(--brand-blue, var(--brand-blue));
            color: #fff;
        }

            .progress-icons .icon.completed .checkmark[b-6h2v50t4rn] {
                font-weight: bold;
                font-size: 0.9rem;
            }

        .progress-icons .icon.active[b-6h2v50t4rn] {
            border-color: var(--brand-blue, var(--brand-blue));
            color: var(--brand-blue, var(--brand-blue));
            background-color: #fff;
            font-weight: 600;
        }

        .progress-icons .icon.pending[b-6h2v50t4rn] {
            border-color: #ccc;
            color: #999;
            background-color: #fff;
        }

        /* Clickable completed steps */
        .progress-icons .icon.completed.clickable[b-6h2v50t4rn] {
            cursor: pointer;
            transition: transform 0.15s ease, box-shadow 0.15s ease;
        }

            .progress-icons .icon.completed.clickable:hover[b-6h2v50t4rn] {
                transform: scale(1.15);
                box-shadow: 0 2px 8px rgba(41, 99, 168, 0.4);
            }

            .progress-icons .icon.completed.clickable:active[b-6h2v50t4rn] {
                transform: scale(1.05);
            }

/* Footer button positioning */
.footer-spacer[b-6h2v50t4rn] {
    min-width: 140px; /* Match Continue button width to center progress icons */
    justify-self: start;
}

/* Feedback link in footer */
.feedback-link[b-6h2v50t4rn] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    background: transparent;
    color: #666;
    border: none;
    font-size: 12px;
    font-weight: 400;
    cursor: pointer;
    transition: color 0.2s ease;
    min-width: 140px;
    justify-self: start;
}

    .feedback-link:hover[b-6h2v50t4rn] {
        color: #1976d2;
        text-decoration: underline;
    }

    .feedback-link:active[b-6h2v50t4rn] {
        color: #1565c0;
    }

    .feedback-link i[b-6h2v50t4rn] {
        font-size: 12px;
    }

.feedback-link-text[b-6h2v50t4rn] {
    font-size: 12px;
}

.modal-footer .btn.btn-primary[b-6h2v50t4rn],
.inline-footer .btn.btn-primary[b-6h2v50t4rn] {
    justify-self: end;
    padding: 12px 32px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    min-width: 140px !important;
}

/* =============================================================================
   INLINE MODE LAYOUT (Main container + Trip Summary Panel)
   ============================================================================= */

/* Main container - flex layout for left content + right panel */
.icd-container[b-6h2v50t4rn] {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    position: relative;
    z-index: 200; /* Above floating feedback button (z-index 100) */
    min-height: calc(100vh - 200px);
    min-height: calc(100dvh - 200px);
    overflow: visible; /* Ensure scrolling isn't blocked */
}

/* Left panel wrapper */
.icd-main[b-6h2v50t4rn] {
    flex: 1 1 auto;
    min-width: 0;
    position: relative; /* Needed for absolute positioning of exit button */
    overflow: visible; /* Allow content to scroll with page */
}

/* Inline container */
.inline-container[b-6h2v50t4rn] {
    display: block;
    width: 100%;
    margin: 0;
}

/* Inline content card */
.inline-content[b-6h2v50t4rn] {
    background: #fff;
    padding: 2px;
    border-radius: 8px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto; /* Center when screen is wider than max-width */
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
    overflow: visible; /* Allow content to extend and page to scroll */
}

/* Header */
.inline-header[b-6h2v50t4rn] {
    flex-shrink: 0;
    padding: 4px 3px;
}

/* Body - content scrolls with page */
.inline-body[b-6h2v50t4rn] {
    flex: 1 1 auto;
    padding: 4px 3px;
    padding-bottom: 80px; /* Space for fixed footer (approx 60px + safe-area) */
    overflow: visible; /* Let content flow naturally, page scrolls */
}

/* Footer - FIXED at bottom of viewport */
.inline-footer[b-6h2v50t4rn] {
    position: fixed !important;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 1000;
    box-shadow: 0 -2px 8px rgba(0,0,0,.1);
    padding: 8px 16px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    border-top: 1px solid #e0e0e0;
}

    .inline-footer .progress-icons[b-6h2v50t4rn] {
        justify-self: center;
    }

/* On desktop, footer stops before Trip Summary panel */
@media (min-width: 992px) {
    .inline-footer[b-6h2v50t4rn] {
        right: 300px;
    }
}

/* =============================================================================
   RIGHT PANEL - TRIP SUMMARY (Sticky with independent scroll)
   ============================================================================= */

.icd-panel[b-6h2v50t4rn] {
    flex: 0 0 280px;
    max-width: 280px;
    position: sticky;
    top: 10px;
    height: calc(100vh - 140px);
    max-height: calc(100vh - 140px);
    height: calc(100dvh - 140px);
    max-height: calc(100dvh - 140px);
    overflow: hidden;
    border-left: 1px solid rgba(0,0,0,0.08);
    padding-left: 12px;
    font-size: 0.85rem;
    display: flex;
    flex-direction: column;
    background: white;
    align-self: flex-start;
}

.icd-panel-header[b-6h2v50t4rn] {
    padding: 12px;
    margin-bottom: 0;
    margin-left: -12px;
    margin-right: -8px;
    border-bottom: 2px solid #e0e0e0;
    flex: 0 0 auto;
    background-color: var(--brand-blue-50, #F2F6FF);
    text-align: center;
}

    .icd-panel-header h6[b-6h2v50t4rn] {
        font-weight: 600;
        color: var(--brand-blue-dark, var(--brand-blue-dark));
        font-size: 0.92rem;
        margin: 0;
    }

/* Panel body - scrollbar only when content overflows */
.icd-panel-body[b-6h2v50t4rn] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 0;
    min-height: 0;
    padding: 8px 6px 12px 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.2) transparent;
}

    /* Always show scrollbar when content overflows */
    .icd-panel-body[b-6h2v50t4rn]::-webkit-scrollbar {
        width: 6px;
    }

    .icd-panel-body[b-6h2v50t4rn]::-webkit-scrollbar-track {
        background: transparent;
    }

    .icd-panel-body[b-6h2v50t4rn]::-webkit-scrollbar-thumb {
        background-color: rgba(0,0,0,0.2);
        border-radius: 3px;
    }

        .icd-panel-body[b-6h2v50t4rn]::-webkit-scrollbar-thumb:hover {
            background-color: rgba(0,0,0,0.3);
        }

/* Hide panel on smaller screens */
@media (max-width: 991px) {
    .icd-panel[b-6h2v50t4rn] {
        display: none;
    }

    .inline-footer[b-6h2v50t4rn] {
        right: 0;
    }

    /* Fix scrolling on mobile when panel is hidden */
    .icd-container[b-6h2v50t4rn] {
        display: block; /* Switch from flex to block on mobile */
        overflow: visible; /* Let page scroll naturally */
        -webkit-overflow-scrolling: touch;
        min-height: auto;
        height: auto;
    }

    .icd-main[b-6h2v50t4rn] {
        overflow: visible;
    }

    .inline-content[b-6h2v50t4rn] {
        overflow: visible;
        max-height: none; /* Remove any max-height constraint */
    }

    .inline-body[b-6h2v50t4rn] {
        overflow: visible; /* Let content flow naturally */
    }
}

/* Tablet constraint - constrain width in the awkward middle range (768px - 991px) */
/* This prevents content from stretching too wide on iPad and similar devices */
@media (min-width: 768px) and (max-width: 991px) {
    .icd-main[b-6h2v50t4rn] {
        max-width: 580px;
        margin: 0 auto;
    }
}

/* =============================================================================
   SUMMARY STEP CARDS (Inside Trip Summary Panel)
   ============================================================================= */

.summary-step[b-6h2v50t4rn] {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: white;
    transition: all 0.2s ease;
}

    .summary-step.pending[b-6h2v50t4rn] {
        opacity: 0.5;
        background: #f9f9f9;
    }

    .summary-step.active[b-6h2v50t4rn] {
        border-color: var(--brand-blue, var(--brand-blue));
        box-shadow: 0 0 0 1px var(--brand-blue, var(--brand-blue));
    }

    .summary-step.completed[b-6h2v50t4rn] {
        border-color: #d0e0d0;
        background: #f8fff8;
    }

.summary-step-header[b-6h2v50t4rn] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

    /* Add chevron indicator for clickable headers */
    .summary-step-header[b-6h2v50t4rn]::after {
        content: '�';
        font-size: 16px;
        color: #999;
        margin-left: auto;
        transition: all 0.2s;
        font-weight: bold;
    }

.summary-step.completed .summary-step-header:hover[b-6h2v50t4rn],
.summary-step.active .summary-step-header:hover[b-6h2v50t4rn] {
    background-color: rgba(41, 99, 168, 0.08);
}

    /* Enhance hover effect with chevron animation */
    .summary-step.completed .summary-step-header:hover[b-6h2v50t4rn]::after,
    .summary-step.active .summary-step-header:hover[b-6h2v50t4rn]::after {
        color: var(--brand-blue, var(--brand-blue));
        transform: translateX(2px);
    }

.summary-step.pending .summary-step-header[b-6h2v50t4rn] {
    cursor: default;
}

    /* Hide chevron for pending steps */
    .summary-step.pending .summary-step-header[b-6h2v50t4rn]::after {
        display: none;
    }

.summary-step-icon[b-6h2v50t4rn] {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .summary-step-icon .icon[b-6h2v50t4rn] {
        font-size: 15px;
        margin: 0;
        /* Reset the progress icon styles for summary icons */
        width: auto;
        height: auto;
        border: none;
        border-radius: 0;
        background: transparent;
    }

.summary-step-title[b-6h2v50t4rn] {
    flex: 1;
    font-weight: 500;
    color: #333;
    font-size: 0.82rem;
}

.summary-step-check[b-6h2v50t4rn] {
    color: #28a745;
    font-weight: bold;
    font-size: 14px;
}

.summary-step-content[b-6h2v50t4rn] {
    padding: 0 6px 5px 30px;
    font-size: 0.78rem;
    color: #555;
    line-height: 1.25;
}

.summary-location[b-6h2v50t4rn] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .summary-location i[b-6h2v50t4rn],
    .summary-location > span:first-child[b-6h2v50t4rn] {
        font-size: 13px;
        flex-shrink: 0;
    }

    .summary-location span:not(:first-child)[b-6h2v50t4rn] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.summary-leg-label[b-6h2v50t4rn] {
    font-size: 0.7rem;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    margin-top: 4px;
    margin-bottom: 2px;
    letter-spacing: 0.5px;
}

    .summary-leg-label:first-child[b-6h2v50t4rn] {
        margin-top: 0;
    }

.summary-leg-row[b-6h2v50t4rn] {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 3px;
    align-items: start;
    margin-bottom: 4px;
    margin-left: -2px;
}

    .summary-leg-row:last-child[b-6h2v50t4rn] {
        margin-bottom: 0;
    }

.summary-leg-number[b-6h2v50t4rn] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #e0e0e0;
    color: #666;
    font-size: 0.7rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: -2px;
}

.summary-leg-content[b-6h2v50t4rn] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.trip-summary-icon[b-6h2v50t4rn] {
    font-size: 14px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    text-align: center;
}

    /* Material icon specific sizing */
    .trip-summary-icon.material-icons[b-6h2v50t4rn] {
        font-size: 14px;
    }

.trip-summary-airport[b-6h2v50t4rn] {
    color: var(--brand-blue-dark, var(--brand-blue-hover));
}

.trip-summary-location-pickup[b-6h2v50t4rn] {
    color: #28a745;
}

.trip-summary-location-dropoff[b-6h2v50t4rn] {
    color: #dc3545;
}

.summary-service[b-6h2v50t4rn] {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .summary-service img.summary-vehicle-img[b-6h2v50t4rn] {
        width: 44px;
        height: 26px;
        object-fit: contain;
        flex-shrink: 0;
    }

    .summary-service i[b-6h2v50t4rn] {
        font-size: 16px;
        flex-shrink: 0;
    }

    .summary-service span[b-6h2v50t4rn] {
        flex: 1;
    }

/* =============================================================================
   ICONS (Base + Title Display)
   ============================================================================= */

.icon[b-6h2v50t4rn] {
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    text-align: center;
    line-height: 1.1em;
    margin-right: .35rem;
    color: var(--brand-blue,#216fed);
    font-family: "bootstrap-icons";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-location[b-6h2v50t4rn]::before {
    content: "\F3E8"; /* Bootstrap Icons geo-alt U+F3E8 */
    font-family: "bootstrap-icons";
}

.icon-passengers[b-6h2v50t4rn]::before {
    content: "\F4D0"; /* Bootstrap Icons people U+F4D0 */
    font-family: "bootstrap-icons";
}

.icon-flight[b-6h2v50t4rn]::before {
    content: "\F7CD"; /* Bootstrap Icons airplane U+F7CD */
    font-family: "bootstrap-icons";
}

.icon-cruise[b-6h2v50t4rn]::before {
    content: "directions_boat";
    font-family: "Material Icons";
}

.icon-cruise[b-6h2v50t4rn] {
    color: var(--brand-blue-dark,#1a73e8);
}

.icon-service[b-6h2v50t4rn]::before {
    content: "\F7E1"; /* Bootstrap Icons car-front U+F7E1 */
    font-family: "bootstrap-icons";
}

.icon-vehicle[b-6h2v50t4rn]::before {
    content: "\F7E1"; /* Bootstrap Icons car-front U+F7E1 */
    font-family: "bootstrap-icons";
}

.icon-time[b-6h2v50t4rn]::before {
    content: "\F293"; /* Bootstrap Icons clock U+F293 */
    font-family: "bootstrap-icons";
}

.icon-clock[b-6h2v50t4rn]::before {
    content: "\F293"; /* Bootstrap Icons clock U+F293 */
    font-family: "bootstrap-icons";
}

.icon-contact[b-6h2v50t4rn]::before {
    content: "\F4D9"; /* Bootstrap Icons person U+F4D9 */
    font-family: "bootstrap-icons";
}

.icon-payment[b-6h2v50t4rn]::before {
    content: "\F2DC"; /* Bootstrap Icons credit-card U+F2DC */
    font-family: "bootstrap-icons";
}

.icon-info[b-6h2v50t4rn]::before {
    content: "\F431"; /* Bootstrap Icons info-circle U+F431 */
    font-family: "bootstrap-icons";
}

.icon-review[b-6h2v50t4rn]::before {
    content: "\F26B"; /* Bootstrap Icons check-circle U+F26B */
    font-family: "bootstrap-icons";
}

.icon-flight[b-6h2v50t4rn] {
    color: var(--brand-blue-dark,#1a73e8);
}

.icon-payment[b-6h2v50t4rn] {
    color: #444;
}

.icon-passengers[b-6h2v50t4rn] {
    color: #444;
}

.icon-review[b-6h2v50t4rn] {
    color: #28a745;
}

/* Modal title icons */
.modal-title-display .icon[b-6h2v50t4rn] {
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    text-align: center;
    line-height: 1.1em;
    margin-right: .35rem;
    color: var(--brand-blue,#216fed);
    font-variant-emoji: text;
}

/* Make both headers 3-column grids */
.modal-header[b-6h2v50t4rn],
.inline-header[b-6h2v50t4rn] {
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: .5rem;
    width: 100%;
}

    .modal-header .icon[b-6h2v50t4rn],
    .inline-header .icon[b-6h2v50t4rn] {
        display: inline-block;
        min-width: 1.25rem;
    }

.modal-title-display[b-6h2v50t4rn] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    margin: 0;
}

/* =============================================================================
   BOOK NOW BUTTON
   ============================================================================= */

.book-now-btn[b-6h2v50t4rn] {
    background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%) !important;
    border: none !important;
    color: white !important;
    font-weight: 600;
    padding: 10px 24px;
    border-radius: 50px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

    .book-now-btn:hover:not(:disabled)[b-6h2v50t4rn] {
        background: linear-gradient(135deg, #43a047 0%, #1b5e20 100%) !important;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3);
    }

    .book-now-btn:disabled[b-6h2v50t4rn] {
        background: #ccc !important;
        cursor: not-allowed;
    }

/* =============================================================================
   EXIT BOOKING BUTTON AND CONFIRMATION MODAL
   ============================================================================= */

.exit-booking-button[b-6h2v50t4rn] {
    display: none;
}

/* Desktop exit button - in top-right of main content area */
@media (min-width: 992px) {
    .exit-booking-button.desktop-exit[b-6h2v50t4rn] {
        display: flex;
        position: absolute;
        top: 8px;
        right: 8px;
        width: 32px;
        height: 32px;
        background: white;
        border: 1px solid #ddd;
        font-size: 18px;
        line-height: 1;
        color: #666;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: all 0.2s ease;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
        z-index: 100;
    }

        .exit-booking-button.desktop-exit:hover[b-6h2v50t4rn] {
            background-color: #f5f5f5;
            color: #333;
            border-color: #999;
        }
}

@media (max-width: 991px) {
    .exit-booking-button.mobile-exit[b-6h2v50t4rn] {
        display: flex;
        position: absolute;
        top: -5px;
        right: 8px;
        width: 36px;
        height: 36px;
        background: white;
        border: 1px solid #ddd;
        font-size: 20px;
        line-height: 1;
        color: #666;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: all 0.2s ease;
        z-index: 1000;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

        .exit-booking-button.mobile-exit:hover[b-6h2v50t4rn] {
            background-color: #f5f5f5;
            color: #333;
            border-color: #999;
        }
}

/* Exit confirmation modal */
.exit-modal-overlay[b-6h2v50t4rn] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
    animation: fadeIn-b-6h2v50t4rn 0.2s ease-out;
}

@keyframes fadeIn-b-6h2v50t4rn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.exit-modal-content[b-6h2v50t4rn] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    max-width: 450px;
    width: 100%;
    animation: slideIn-b-6h2v50t4rn 0.2s ease-out;
}

@keyframes slideIn-b-6h2v50t4rn {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.exit-modal-header[b-6h2v50t4rn] {
    padding: 20px 24px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .exit-modal-header h3[b-6h2v50t4rn] {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: #333;
    }

.exit-modal-close[b-6h2v50t4rn] {
    background: none;
    border: none;
    font-size: 24px;
    color: #666;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.2s;
}

    .exit-modal-close:hover[b-6h2v50t4rn] {
        background-color: rgba(0, 0, 0, 0.05);
    }

.exit-modal-body[b-6h2v50t4rn] {
    padding: 24px;
}

    .exit-modal-body p[b-6h2v50t4rn] {
        margin: 0;
        font-size: 1rem;
        color: #555;
        line-height: 1.5;
    }

.exit-modal-footer[b-6h2v50t4rn] {
    padding: 16px 24px;
    border-top: 1px solid #e0e0e0;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

    .exit-modal-footer .btn[b-6h2v50t4rn] {
        padding: 10px 24px;
        border-radius: 6px;
        font-weight: 500;
        font-size: 0.95rem;
        transition: all 0.2s ease;
    }

    .exit-modal-footer .btn-secondary[b-6h2v50t4rn] {
        background-color: #f5f5f5;
        border: 1px solid #ddd;
        color: #333;
    }

        .exit-modal-footer .btn-secondary:hover[b-6h2v50t4rn] {
            background-color: #e0e0e0;
        }

    .exit-modal-footer .btn-danger[b-6h2v50t4rn] {
        background-color: #dc3545;
        border: 1px solid #dc3545;
        color: white;
    }

        .exit-modal-footer .btn-danger:hover[b-6h2v50t4rn] {
            background-color: #c82333;
            border-color: #bd2130;
        }

@media (max-width: 480px) {
    .exit-modal-content[b-6h2v50t4rn] {
        margin: 20px;
    }

    .exit-modal-header[b-6h2v50t4rn],
    .exit-modal-body[b-6h2v50t4rn],
    .exit-modal-footer[b-6h2v50t4rn] {
        padding: 16px;
    }

    .exit-modal-footer[b-6h2v50t4rn] {
        flex-direction: column;
    }

        .exit-modal-footer .btn[b-6h2v50t4rn] {
            width: 100%;
        }
}


/* =============================================================================
 * MOBILE RESPONSIVE - FOOTER COMPACTING FOR IPHONE
 * ============================================================================= */
@media (max-width: 576px) {
    /* Make footer more compact on mobile */
    .modal-footer[b-6h2v50t4rn],
    .inline-footer[b-6h2v50t4rn] {
        padding: 6px 4px;
        gap: 4px;
    }

    /* Reduce progress icon size */
    .progress-icons[b-6h2v50t4rn] {
        gap: 4px;
    }

        .progress-icons .icon[b-6h2v50t4rn] {
            width: 20px;
            height: 20px;
            font-size: 0.7rem;
            border-width: 1.5px;
        }

            .progress-icons .icon.completed .checkmark[b-6h2v50t4rn] {
                font-size: 0.75rem;
            }

    /* Make buttons easier to tap on mobile - meet 44px touch target */
    .modal-footer .btn[b-6h2v50t4rn],
    .inline-footer .btn[b-6h2v50t4rn] {
        padding: 12px 16px;
        font-size: 0.95rem;
        min-height: 44px;
    }

    /* Specifically target the Book Now button */
    .book-now-btn[b-6h2v50t4rn] {
        padding: 12px 20px !important;
        font-size: 1rem !important;
        min-height: 44px !important;
    }

    /* Footer spacer - smaller on mobile */
    .footer-spacer[b-6h2v50t4rn] {
        min-width: 60px;
    }

    /* Feedback link - hide text on mobile */
    .feedback-link[b-6h2v50t4rn] {
        min-width: 60px;
    }

    .feedback-link-text[b-6h2v50t4rn] {
        display: none;
    }
}

/* Extra small screens (iPhone SE, smaller phones) */
@media (max-width: 375px) {
    .modal-footer[b-6h2v50t4rn],
    .inline-footer[b-6h2v50t4rn] {
        padding: 5px 3px;
        gap: 3px;
    }

    .progress-icons[b-6h2v50t4rn] {
        gap: 3px;
    }

        .progress-icons .icon[b-6h2v50t4rn] {
            width: 18px;
            height: 18px;
            font-size: 0.65rem;
        }

    .modal-footer .btn[b-6h2v50t4rn],
    .inline-footer .btn[b-6h2v50t4rn] {
        padding: 12px 14px;
        font-size: 0.9rem;
        min-height: 44px;
    }

    .book-now-btn[b-6h2v50t4rn] {
        padding: 12px 16px !important;
        font-size: 0.95rem !important;
        min-height: 44px !important;
    }

    /* Footer spacer - minimal on very small screens */
    .footer-spacer[b-6h2v50t4rn] {
        min-width: 40px;
    }

    /* Feedback link - minimal on very small screens */
    .feedback-link[b-6h2v50t4rn] {
        min-width: 40px;
    }
}

/* =============================================================================
 * VALIDATION PENDING BUTTON STATE
 * Shows reduced opacity when validation is incomplete but still clickable
 * ============================================================================= */

.btn-validation-pending[b-6h2v50t4rn] {
    opacity: 0.65;
    cursor: pointer !important;
}

    .btn-validation-pending:hover[b-6h2v50t4rn] {
        opacity: 0.75;
    }

/* =============================================================================
 * TRIP SUMMARY - INCOMPLETE STEP STYLING
 * Shows prompts for incomplete fields in the summary panel
 * ============================================================================= */

.summary-step-incomplete[b-6h2v50t4rn] {
    color: #6c757d;
    font-style: italic;
    font-size: 0.9em;
}

    .summary-step-incomplete span[b-6h2v50t4rn] {
        display: flex;
        align-items: center;
        gap: 4px;
    }

/* Add a subtle indicator for incomplete steps */
.summary-step:has(.summary-step-incomplete) .summary-step-icon[b-6h2v50t4rn] {
    opacity: 0.6;
}

/* =============================================================================
 * TRIP SUMMARY - INVALID SERVICE TYPE STATE
 * Shows warning when service type no longer accommodates passenger count
 * ============================================================================= */

/* Invalid step styling - yellow/warning theme */
.summary-step.step-invalid[b-6h2v50t4rn] {
    border-left: 3px solid #f0ad4e;
    background-color: rgba(240, 173, 78, 0.08);
    border-color: #f0ad4e;
}

    .summary-step.step-invalid .summary-step-header[b-6h2v50t4rn] {
        background-color: rgba(240, 173, 78, 0.05);
    }

        .summary-step.step-invalid .summary-step-header:hover[b-6h2v50t4rn] {
            background-color: rgba(240, 173, 78, 0.15);
        }

/* Warning icon next to step title */
.summary-step-warning[b-6h2v50t4rn] {
    color: #f0ad4e;
    font-size: 1rem;
    margin-left: auto;
    animation: warningPulse-b-6h2v50t4rn 2s ease-in-out infinite;
}

@keyframes warningPulse-b-6h2v50t4rn {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

/* Reselect warning banner inside content */
.summary-reselect-warning[b-6h2v50t4rn] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: #856404;
    background-color: #fff3cd;
    padding: 6px 8px;
    border-radius: 4px;
    margin-bottom: 6px;
    border: 1px solid #ffeeba;
}

    .summary-reselect-warning .material-icons[b-6h2v50t4rn] {
        font-size: 16px;
        color: #d39e00;
        flex-shrink: 0;
    }

    .summary-reselect-warning span:not(.material-icons)[b-6h2v50t4rn] {
        line-height: 1.3;
    }

/* Invalid service row styling */
.summary-service.invalid[b-6h2v50t4rn],
.summary-leg-row.invalid[b-6h2v50t4rn] {
    opacity: 0.65;
}

    .summary-service.invalid .summary-vehicle-img[b-6h2v50t4rn],
    .summary-leg-row.invalid .summary-vehicle-img[b-6h2v50t4rn] {
        filter: grayscale(80%);
        opacity: 0.6;
    }

/* Grayscale for invalid vehicle images */
.summary-vehicle-img.img-invalid[b-6h2v50t4rn] {
    filter: grayscale(80%);
    opacity: 0.6;
}

/* Strikethrough text for invalid service name */
.text-decoration-line-through[b-6h2v50t4rn] {
    text-decoration: line-through;
}

/* Missing service type styling */
.summary-service-missing[b-6h2v50t4rn] {
    padding: 2px 0;
}

.summary-leg-row.missing[b-6h2v50t4rn] {
    opacity: 0.8;
}

    .summary-leg-row.missing .summary-leg-number[b-6h2v50t4rn] {
        background-color: #f0ad4e;
        color: white;
    }
/* /Components/LinkTripDialog.razor.rz.scp.css */
/* Link Trip Dialog Styles */
.link-trip-dialog[b-4ah5kko8jg] {
    padding: 8px;
}

.dialog-description[b-4ah5kko8jg] {
    color: #555;
    font-size: 0.95rem;
    margin-bottom: 20px;
    line-height: 1.5;
}

.form-group[b-4ah5kko8jg] {
    margin-bottom: 16px;
}

    .form-group label[b-4ah5kko8jg] {
        display: block;
        font-weight: 500;
        color: #333;
        margin-bottom: 6px;
        font-size: 0.9rem;
    }

    .form-group .form-control[b-4ah5kko8jg] {
        width: 100%;
        padding: 10px 12px;
        font-size: 1rem;
        border: 1px solid #ddd;
        border-radius: 6px;
        transition: border-color 0.2s, box-shadow 0.2s;
    }

        .form-group .form-control:focus[b-4ah5kko8jg] {
            outline: none;
            border-color: var(--brand-blue, var(--brand-blue));
            box-shadow: 0 0 0 3px rgba(41, 99, 168, 0.15);
        }

        .form-group .form-control.is-invalid[b-4ah5kko8jg] {
            border-color: #dc3545;
        }

            .form-group .form-control.is-invalid:focus[b-4ah5kko8jg] {
                box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
            }

        .form-group .form-control:disabled[b-4ah5kko8jg] {
            background-color: #f5f5f5;
            cursor: not-allowed;
        }

.invalid-feedback[b-4ah5kko8jg] {
    display: block;
    color: #dc3545;
    font-size: 0.8rem;
    margin-top: 4px;
}

.alert[b-4ah5kko8jg] {
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
}

.alert-danger[b-4ah5kko8jg] {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.alert-success[b-4ah5kko8jg] {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.dialog-actions[b-4ah5kko8jg] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #e9ecef;
}

    .dialog-actions .btn[b-4ah5kko8jg] {
        padding: 10px 24px;
        font-size: 0.95rem;
        font-weight: 500;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.2s;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 100px;
    }

    .dialog-actions .btn-secondary[b-4ah5kko8jg] {
        background-color: #f8f9fa;
        border: 1px solid #ddd;
        color: #333;
    }

        .dialog-actions .btn-secondary:hover:not(:disabled)[b-4ah5kko8jg] {
            background-color: #e9ecef;
        }

    .dialog-actions .btn-primary[b-4ah5kko8jg] {
        background-color: var(--brand-blue, var(--brand-blue));
        border: 1px solid var(--brand-blue, var(--brand-blue));
        color: white;
    }

        .dialog-actions .btn-primary:hover:not(:disabled)[b-4ah5kko8jg] {
            background-color: var(--brand-blue-dark, var(--brand-blue-dark));
            border-color: var(--brand-blue-dark, var(--brand-blue-dark));
        }

    .dialog-actions .btn:disabled[b-4ah5kko8jg] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.spinner-border-sm[b-4ah5kko8jg] {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}

.me-2[b-4ah5kko8jg] {
    margin-right: 0.5rem;
}

/* Radzen Icon alignment in alerts */
.alert[b-4ah5kko8jg]  .rzi {
    font-size: 1.1rem;
}
/* /Components/LoginComponent.razor.rz.scp.css */
.login-component[b-ixec968o6l] {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
}

.form-label[b-ixec968o6l] {
    font-weight: 500;
    color: #333;
    margin-bottom: 0.25rem;
}

.form-control[b-ixec968o6l] {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px 12px;
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .form-control:focus[b-ixec968o6l] {
        border-color: #4285F4;
        box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2);
        outline: none;
    }

    .form-control:disabled[b-ixec968o6l] {
        background-color: #f5f5f5;
        cursor: not-allowed;
    }

/* Sign In Button - matches old gold/tan style */
.btn-signin[b-ixec968o6l] {
    background-color: #C9A227;
    border: none;
    border-radius: 4px;
    color: white;
    padding: 10px 24px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .btn-signin:hover:not(:disabled)[b-ixec968o6l] {
        background-color: #B8911F;
    }

    .btn-signin:disabled[b-ixec968o6l] {
        opacity: 0.7;
        cursor: not-allowed;
    }

/* Forgot Password Link */
.forgot-password-link[b-ixec968o6l] {
    color: #4285F4;
    text-decoration: none;
    font-size: 0.95rem;
}

    .forgot-password-link:hover[b-ixec968o6l] {
        text-decoration: underline;
        color: #3367D6;
    }

/* OR Separator */
.or-separator[b-ixec968o6l] {
    display: flex;
    align-items: center;
    margin: 20px 0;
}

    .or-separator .line[b-ixec968o6l] {
        flex: 1;
        height: 1px;
        background: #ccc;
    }

    .or-separator .or-text[b-ixec968o6l] {
        margin: 0 12px;
        font-size: 0.9rem;
        color: #666;
        font-weight: 500;
    }

/* Google Sign-In Button */
.google-signin-btn[b-ixec968o6l] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-color: white;
    border: 1px solid #dadce0;
    border-radius: 50px;
    color: #3c4043;
    font-family: inherit;
    font-weight: 500;
    padding: 10px 16px;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    margin-bottom: 24px;
}

    .google-signin-btn:hover:not(:disabled)[b-ixec968o6l] {
        background-color: #f8f9fa;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    }

    .google-signin-btn:disabled[b-ixec968o6l] {
        opacity: 0.7;
        cursor: not-allowed;
    }

    .google-signin-btn img[b-ixec968o6l] {
        width: 20px;
        height: 20px;
        margin-right: 10px;
    }

/* Register Section */
.register-section[b-ixec968o6l] {
    text-align: center;
    padding-top: 16px;
    border-top: 1px solid #eee;
}

    .register-section h5[b-ixec968o6l] {
        font-size: 1.1rem;
        font-weight: 600;
        color: #333;
        margin-bottom: 12px;
    }

/* Join Now Link - text link style to differentiate from primary Sign In button */
.btn-join[b-ixec968o6l] {
    background-color: transparent;
    border: none;
    border-radius: 0;
    color: #4285F4;
    padding: 8px 16px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: underline;
    transition: color 0.2s ease;
}

    .btn-join:hover:not(:disabled)[b-ixec968o6l] {
        color: #3367D6;
        text-decoration: underline;
    }

    .btn-join:disabled[b-ixec968o6l] {
        opacity: 0.7;
        cursor: not-allowed;
    }

/* Alert Messages */
.alert[b-ixec968o6l] {
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 16px;
    font-size: 0.95rem;
}

.alert-danger[b-ixec968o6l] {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.alert-success[b-ixec968o6l] {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

/* Validation Messages */
.validation-message[b-ixec968o6l] {
    color: #dc3545;
    font-size: 0.85rem;
    margin-top: 4px;
}

/* Spinner */
.spinner-border-sm[b-ixec968o6l] {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}

/* ===== Forgot Password Styles ===== */

.forgot-password-form[b-ixec968o6l],
.forgot-password-success[b-ixec968o6l] {
    padding: 10px 0;
}

.forgot-password-title[b-ixec968o6l] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.forgot-password-instructions[b-ixec968o6l] {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.5;
}

/* Back to Login Button - secondary style */
.btn-back-to-login[b-ixec968o6l] {
    background-color: transparent;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #666;
    padding: 10px 24px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

    .btn-back-to-login:hover:not(:disabled)[b-ixec968o6l] {
        background-color: #f5f5f5;
        border-color: #999;
        color: #333;
    }

    .btn-back-to-login:disabled[b-ixec968o6l] {
        opacity: 0.7;
        cursor: not-allowed;
    }

/* Success State */
.forgot-password-success[b-ixec968o6l] {
    text-align: center;
}

.success-icon[b-ixec968o6l] {
    display: flex;
    justify-content: center;
}

.reset-sent-message[b-ixec968o6l] {
    font-size: 0.95rem;
    color: #333;
    line-height: 1.6;
    text-align: center;
}

    .reset-sent-message strong[b-ixec968o6l] {
        color: #155724;
    }

/* ===== reCAPTCHA Styles ===== */

.recaptcha-container[b-ixec968o6l] {
    display: flex;
    justify-content: center;
}

.recaptcha-widget[b-ixec968o6l] {
    transform-origin: center;
}
/* /Components/LookupConfirmationDialog.razor.rz.scp.css */
/* =====================================================
   Lookup Confirmation Dialog Styles
   ===================================================== */

.lookup-confirmation-dialog[b-v019a6k4fk] {
    padding: 8px;
}

/* Form Header */
.form-header[b-v019a6k4fk] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

    .form-header h3[b-v019a6k4fk] {
        margin: 0;
        font-size: 1.25rem;
        color: #222;
    }

/* Form Container */
.form-container[b-v019a6k4fk] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dialog-message[b-v019a6k4fk] {
    color: #666;
    font-size: 0.95rem;
    margin: 0 0 8px 0;
    line-height: 1.5;
}

/* Form Fields */
.form-fields[b-v019a6k4fk] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-field[b-v019a6k4fk] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .form-field label[b-v019a6k4fk] {
        font-size: 0.85rem;
        font-weight: 500;
        color: #555;
    }

.form-input[b-v019a6k4fk] {
    width: 100%;
    padding: 12px 14px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

    .form-input:focus[b-v019a6k4fk] {
        outline: none;
        border-color: var(--brand-blue);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-blue) 15%, transparent);
    }

    .form-input:disabled[b-v019a6k4fk] {
        background-color: #f5f5f5;
        cursor: not-allowed;
    }

    .form-input[b-v019a6k4fk]::placeholder {
        color: #999;
    }

    .form-input.input-error[b-v019a6k4fk] {
        border-color: #dc3545;
    }

.field-error[b-v019a6k4fk] {
    font-size: 0.8rem;
    color: #dc3545;
    margin-top: 2px;
}

/* reCAPTCHA */
.recaptcha-container[b-v019a6k4fk] {
    display: flex;
    justify-content: center;
    margin: 8px 0;
}

.recaptcha-widget[b-v019a6k4fk] {
    min-height: 78px;
}

/* Dialog Actions */
.dialog-actions[b-v019a6k4fk] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid #e0e0e0;
}

.dialog-btn[b-v019a6k4fk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-cancel[b-v019a6k4fk] {
    border: 2px solid #6c757d;
    background: transparent;
    color: #6c757d;
}

    .btn-cancel:hover[b-v019a6k4fk] {
        background: rgba(108, 117, 125, 0.1);
    }

.btn-submit[b-v019a6k4fk] {
    border: none;
    background: var(--brand-blue);
    color: white;
    font-weight: 600;
}

    .btn-submit:hover:not(:disabled)[b-v019a6k4fk] {
        background: var(--brand-blue-dark);
    }

    .btn-submit:disabled[b-v019a6k4fk],
    .btn-submit.disabled[b-v019a6k4fk] {
        background: color-mix(in srgb, var(--brand-blue) 50%, white);
        cursor: not-allowed;
    }

.btn-primary[b-v019a6k4fk] {
    border: none;
    background: var(--brand-blue);
    color: white;
    font-weight: 600;
}

    .btn-primary:hover[b-v019a6k4fk] {
        background: var(--brand-blue-dark);
    }

.btn-secondary[b-v019a6k4fk] {
    border: 2px solid var(--brand-blue);
    background: transparent;
    color: var(--brand-blue);
}

    .btn-secondary:hover[b-v019a6k4fk] {
        background: color-mix(in srgb, var(--brand-blue) 10%, transparent);
    }

/* Spinner */
.spinner-small[b-v019a6k4fk] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-v019a6k4fk 0.8s linear infinite;
}

/* Submitting State */
.submitting-container[b-v019a6k4fk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 40px 20px;
    color: #555;
    font-size: 1rem;
}

.submitting-spinner[b-v019a6k4fk] {
    width: 40px;
    height: 40px;
    border: 4px solid #e0e0e0;
    border-top: 4px solid var(--brand-blue);
    border-radius: 50%;
    animation: spin-b-v019a6k4fk 1s linear infinite;
}

@keyframes spin-b-v019a6k4fk {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Success State */
.success-container[b-v019a6k4fk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 20px;
}

    .success-container h4[b-v019a6k4fk] {
        margin: 0;
        color: #28a745;
        font-size: 1.25rem;
    }

    .success-container p[b-v019a6k4fk] {
        margin: 0;
        color: #666;
        font-size: 0.95rem;
    }

.delivery-note[b-v019a6k4fk] {
    font-size: 0.85rem !important;
    color: #666 !important;
    font-style: italic;
}

.success-actions[b-v019a6k4fk] {
    margin-top: 16px;
}

/* Not Found State */
.not-found-container[b-v019a6k4fk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 20px;
}

    .not-found-container h4[b-v019a6k4fk] {
        margin: 0;
        color: #dc3545;
        font-size: 1.25rem;
    }

    .not-found-container p[b-v019a6k4fk] {
        margin: 0;
        color: #666;
        font-size: 0.95rem;
    }

.help-text[b-v019a6k4fk] {
    font-size: 0.85rem !important;
    color: #888 !important;
}

.not-found-actions[b-v019a6k4fk] {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

/* Responsive */
@media (max-width: 480px) {
    .dialog-actions[b-v019a6k4fk] {
        flex-direction: column;
    }

    .dialog-btn[b-v019a6k4fk] {
        width: 100%;
    }

    .not-found-actions[b-v019a6k4fk] {
        flex-direction: column;
        width: 100%;
    }

        .not-found-actions .dialog-btn[b-v019a6k4fk] {
            width: 100%;
        }

    .recaptcha-container[b-v019a6k4fk] {
        transform: scale(0.9);
        transform-origin: center;
    }
}
/* /Components/NumberSelectorModal.razor.rz.scp.css */
/* NumberSelectorModal - Scrollable list for selecting numbers */

.number-selector-modal[b-x9q9mwyadh] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    outline: none; /* Remove focus outline on container */
}

.selector-list[b-x9q9mwyadh] {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.selector-item[b-x9q9mwyadh] {
    display: block;
    width: 100%;
    padding: 14px 20px;
    font-size: 1rem;
    font-family: inherit;
    text-align: center;
    color: var(--brand-blue-dark, #003366);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color 0.1s ease, box-shadow 0.1s ease;
}

/* Remove all browser focus styles - we manage focus via .focused class */
.selector-item:focus[b-x9q9mwyadh],
.selector-item:focus-visible[b-x9q9mwyadh] {
    outline: none;
}

.selector-item:hover:not(.focused)[b-x9q9mwyadh] {
    background-color: #f0f4ff;
}

/* Keyboard navigation focus state - THE ONLY highlight */
.selector-item.focused[b-x9q9mwyadh] {
    background-color: var(--brand-blue, #0066cc);
    color: #fff;
}

/* Hint text at bottom of modal */
.selector-hint[b-x9q9mwyadh] {
    padding: 12px 16px;
    font-size: 0.8rem;
    color: #666;
    background-color: #f8f9fa;
    border-top: 1px solid #e9ecef;
    text-align: center;
    line-height: 1.4;
}

/* Mobile touch targets */
@media (max-width: 400px) {
    .selector-item[b-x9q9mwyadh] {
        padding: 16px 20px;
        font-size: 1.1rem;
        min-height: 52px;
    }

    .selector-hint[b-x9q9mwyadh] {
        font-size: 0.75rem;
        padding: 10px 12px;
    }
}
/* /Components/PassengerContactInfoComponent.razor.rz.scp.css */
/* =========================
   PassengerContactInfoComponent
   Floating labels with 8px borders
   ========================= */

/* Container */
.passenger-contact-info-content[b-lxnq7omibc] {
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,.1);
    position: relative;
    overflow-x: hidden; /* Prevent horizontal scrollbar during shake animation */
    overflow-y: visible;
}

    /* Float Field Container */
    .passenger-contact-info-content .float-field[b-lxnq7omibc] {
        position: relative;
        width: 100%;
        margin-bottom: 22px;
    }

    /* Input Fields - Full Width, 8px Rounded Borders */
    .passenger-contact-info-content .float-input.form-control[b-lxnq7omibc] {
        width: 100%;
        height: auto;
        min-height: 56px;
        padding: 24px 14px 10px 14px;
        font-size: 16px;
        line-height: 1.45;
        color: var(--text-primary, var(--brand-blue-dark));
        border: 1.5px solid var(--brand-blue, var(--brand-blue));
        border-radius: 8px;
        background: #fff;
        box-sizing: border-box;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

        .passenger-contact-info-content .float-input.form-control:focus[b-lxnq7omibc] {
            border-color: var(--brand-blue, var(--brand-blue));
            box-shadow: 0 0 0 3px rgba(41, 99, 168, 0.1);
            outline: none;
        }

        /* Empty placeholder - don't show */
        .passenger-contact-info-content .float-input.form-control[b-lxnq7omibc]::placeholder {
            color: transparent;
            opacity: 0;
        }

    /* Floating Label - Animates Up When Field Has Value or Focus */
    .passenger-contact-info-content .float-label[b-lxnq7omibc] {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 15px;
        color: var(--hint-text, #999999);
        background: #fff;
        padding: 0 4px;
        pointer-events: none;
        transition: top 0.18s ease, font-size 0.18s ease, transform 0.18s ease, color 0.18s ease;
        z-index: 1;
    }

    /* Float label up when field has focus or value */
    .passenger-contact-info-content .float-input:focus + .float-label[b-lxnq7omibc],
    .passenger-contact-info-content .float-field.has-value .float-label[b-lxnq7omibc] {
        top: 0;
        transform: translateY(-50%);
        font-size: 12px;
        color: var(--brand-blue, var(--brand-blue));
        font-weight: 500;
    }

    /* Always-float variant for country selector */
    .passenger-contact-info-content .float-field.always-float .float-label[b-lxnq7omibc] {
        top: 0;
        transform: translateY(-50%);
        font-size: 12px;
        color: var(--brand-blue, var(--brand-blue));
        font-weight: 500;
        left: 20px;
        z-index: 2;
    }

/* Phone Row Layout */
.phone-input-row[b-lxnq7omibc] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 20px;
}

.phone-country-code-container[b-lxnq7omibc] {
    flex: 0 0 140px;
}

.phone-number-input-container[b-lxnq7omibc] {
    flex: 1;
    min-width: 0;
}

    /* Remove margin from float-fields inside phone row since row has its own margin */
    .phone-country-code-container .float-field[b-lxnq7omibc],
    .phone-number-input-container .float-field[b-lxnq7omibc] {
        margin-bottom: 0;
    }

/* Country Selector Button - 8px Rounded Border, FIXED PADDING */
.passenger-contact-info-content .selected-country[b-lxnq7omibc] {
    width: 100%;
    min-height: 56px;
    padding: 12px 16px; /* Reduced top/bottom padding from 14px to 12px */
    font-size: 15px;
    border: 1.5px solid var(--brand-blue, var(--brand-blue));
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

    .passenger-contact-info-content .selected-country:hover[b-lxnq7omibc] {
        border-color: var(--brand-blue-dark, var(--brand-blue-dark));
    }

    .passenger-contact-info-content .selected-country:focus[b-lxnq7omibc] {
        outline: none;
        border-color: var(--brand-blue, var(--brand-blue));
        box-shadow: 0 0 0 3px rgba(41, 99, 168, 0.1);
    }

.flag-emoji[b-lxnq7omibc] {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
    margin: 0; /* Remove any default margin */
}

.dial-code[b-lxnq7omibc] {
    font-size: 15px;
    color: var(--text-primary, var(--brand-blue-dark));
    font-weight: 600;
    line-height: 1;
    margin: 0; /* Remove any default margin */
}

.chevron[b-lxnq7omibc] {
    margin-left: auto;
    color: #6c757d;
    font-size: 14px;
    line-height: 1;
}

/* Help Text */
.field-help-text[b-lxnq7omibc] {
    display: block;
    margin-top: -16px;
    margin-bottom: 16px;
    font-size: 13px;
    color: #6c757d;
    padding-left: 14px;
}

/* Checkboxes */
.form-check[b-lxnq7omibc] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.form-check-input[b-lxnq7omibc] {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    flex-shrink: 0;
    cursor: pointer;
}

    .form-check-input:focus[b-lxnq7omibc] {
        outline: none;
        box-shadow: 0 0 0 3px rgba(41, 99, 168, 0.25);
    }

.form-check-label[b-lxnq7omibc] {
    font-weight: 600;
    color: var(--text-primary, var(--brand-blue-dark));
    cursor: pointer;
    margin: 0;
    font-size: 15px;
}

/* Mobile Adjustments */
@media (max-width: 480px) {
    .passenger-contact-info-content[b-lxnq7omibc] {
        padding: 16px;
    }

    .phone-input-row[b-lxnq7omibc] {
        gap: 10px;
        margin-bottom: 16px;
    }

    .phone-country-code-container[b-lxnq7omibc] {
        flex: 0 0 120px;
    }

    .passenger-contact-info-content .float-input.form-control[b-lxnq7omibc] {
        min-height: 52px;
        padding: 22px 10px 8px 10px;
        font-size: 14px;
    }

    .passenger-contact-info-content .float-label[b-lxnq7omibc] {
        left: 10px;
        font-size: 14px;
    }

    .passenger-contact-info-content .float-input:focus + .float-label[b-lxnq7omibc],
    .passenger-contact-info-content .float-field.has-value .float-label[b-lxnq7omibc],
    .passenger-contact-info-content .float-field.always-float .float-label[b-lxnq7omibc] {
        font-size: 11px;
        left: 16px;
    }

    .passenger-contact-info-content .selected-country[b-lxnq7omibc] {
        min-height: 52px;
        padding: 10px 14px; /* Reduced for mobile too */
    }

    .form-check[b-lxnq7omibc] {
        padding: 12px;
    }

    .field-help-text[b-lxnq7omibc] {
        padding-left: 10px;
    }
}

/* Very Small Screens */
@media (max-width: 360px) {
    .phone-input-row[b-lxnq7omibc] {
        flex-direction: column;
        gap: 0;
        margin-bottom: 0;
    }

    .phone-country-code-container[b-lxnq7omibc] {
        flex: 1 1 auto;
        width: 100%;
        margin-bottom: 22px;
    }

    .phone-number-input-container[b-lxnq7omibc] {
        flex: 1 1 auto;
        width: 100%;
    }
}

/* =========================
   VALIDATION SHAKE ANIMATION
   ========================= */

/* Shake animation keyframes */
@keyframes pci-shake-animation-b-lxnq7omibc {
    0%, 100% {
        transform: translateX(0);
    }

    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-6px);
    }

    20%, 40%, 60%, 80% {
        transform: translateX(6px);
    }
}

/* Invalid field styling - red border on inputs */
.passenger-contact-info-content .float-field.pci-invalid .float-input.form-control[b-lxnq7omibc] {
    border-color: #dc3545 !important;
}

    .passenger-contact-info-content .float-field.pci-invalid .float-input.form-control:focus[b-lxnq7omibc] {
        border-color: #dc3545 !important;
        box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15) !important;
    }

/* Invalid label turns red */
.passenger-contact-info-content .float-field.pci-invalid .float-label[b-lxnq7omibc] {
    color: #dc3545 !important;
}

/* Country selector invalid styling */
.passenger-contact-info-content .float-field.pci-invalid .selected-country[b-lxnq7omibc] {
    border-color: #dc3545 !important;
}

    .passenger-contact-info-content .float-field.pci-invalid .selected-country:focus[b-lxnq7omibc] {
        border-color: #dc3545 !important;
        box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15) !important;
    }

/* Shake animation class - applied to inputs and country selector */
.passenger-contact-info-content .float-field.pci-shake .float-input.form-control[b-lxnq7omibc],
.passenger-contact-info-content .float-field.pci-shake .selected-country[b-lxnq7omibc] {
    animation: pci-shake-animation-b-lxnq7omibc 0.5s ease-in-out;
}
/* /Components/PassengersBagsComponent.razor.rz.scp.css */
/* ===============================
   PassengersBags Component
   Unified: Responsive dropdown/modal triggers
   Desktop (lg+): Side-by-side with inline dropdowns
   Mobile: Stacked with modal triggers
   =============================== */

.passengers-bags-content[b-6o4agjaq59] {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    overflow: visible;
    padding-bottom: 84px;
}

/* ===============================
   Unified Fields Layout
   =============================== */
.pax-bags-fields[b-6o4agjaq59] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Desktop: stacked, full width like other components, centered */
@media (min-width: 768px) {
    .pax-bags-fields[b-6o4agjaq59] {
        flex-direction: column;
        gap: 20px;
        max-width: 100%;
        margin: 0 auto;
    }

    .pax-bags-fields .field-group[b-6o4agjaq59] {
        margin-bottom: 0;
    }
}

/* ===============================
   Layout - Vertical Stack
   =============================== */
.field-group[b-6o4agjaq59] {
    margin-bottom: 20px;
}

/* ===============================
   Selector Trigger (looks like a dropdown)
   =============================== */

.selector-trigger-wrapper[b-6o4agjaq59] {
    position: relative;
    width: 100%;
    margin-top: 12px; /* Make room for the floating label */
}

.selector-trigger[b-6o4agjaq59] {
    display: flex;
    align-items: center;
    width: 100%;
    height: 56px;
    padding: 0 14px;
    font-size: 1rem;
    font-family: inherit;
    color: var(--brand-blue-dark, #003366);
    background-color: #fff;
    border: 1px solid var(--brand-blue, #0066cc);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    text-align: left;
}

.selector-trigger:focus[b-6o4agjaq59] {
    outline: none;
    border-color: var(--brand-blue-dark, #003366);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.25);
}

.selector-trigger:hover:not(:focus)[b-6o4agjaq59] {
    border-color: var(--brand-blue-dark, #003366);
}

/* Value text in the trigger */
.trigger-value[b-6o4agjaq59] {
    flex: 1;
    text-align: center;
    padding: 0 8px;
}

/* Placeholder state (no value selected) */
.selector-trigger-wrapper:not(.has-value) .trigger-value[b-6o4agjaq59] {
    color: #999999;
}

/* Value selected state */
.selector-trigger-wrapper.has-value .trigger-value[b-6o4agjaq59] {
    color: var(--brand-blue-dark, #003366);
}

/* Floating label - overlaps the top border, left-aligned */
.selector-trigger-wrapper .float-label[b-6o4agjaq59] {
    position: absolute;
    top: 0;
    left: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    color: var(--brand-blue, #0066cc);
    background-color: #fff;
    padding: 4px 6px;
    pointer-events: none;
    z-index: 2;
    white-space: nowrap;
    transform: translateY(-50%);
}

/* Icon on the left side */
.trigger-icon[b-6o4agjaq59] {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-blue-dark, #003366);
    flex-shrink: 0;
}

.trigger-icon svg[b-6o4agjaq59] {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

/* Dropdown arrow on the right */
.trigger-arrow[b-6o4agjaq59] {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-blue, #0066cc);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.trigger-arrow.is-open[b-6o4agjaq59] {
    transform: rotate(180deg);
}

.trigger-arrow svg[b-6o4agjaq59] {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

/* Trigger open state */
.selector-trigger.is-open[b-6o4agjaq59] {
    border-color: var(--brand-blue-dark, #003366);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.25);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* ===============================
   Desktop Dropdown Popup
   =============================== */
.dropdown-popup[b-6o4agjaq59] {
    display: none; /* Hidden by default, shown on desktop via media query */
}

@media (min-width: 768px) {
    .dropdown-popup[b-6o4agjaq59] {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        max-height: 280px;
        overflow-y: auto;
        background-color: #fff;
        border: 1px solid var(--brand-blue, #0066cc);
        border-top: none;
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        z-index: 1000;
    }

    .dropdown-option[b-6o4agjaq59] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        font-size: 0.9375rem;
        color: var(--brand-blue-dark, #003366);
        cursor: pointer;
        transition: background-color 0.15s ease;
    }

    .dropdown-option:hover[b-6o4agjaq59],
    .dropdown-option.is-highlighted[b-6o4agjaq59] {
        background-color: rgba(0, 102, 204, 0.08);
    }

    .dropdown-option.is-selected[b-6o4agjaq59] {
        background-color: rgba(0, 102, 204, 0.12);
        font-weight: 500;
    }

    .dropdown-option.is-selected.is-highlighted[b-6o4agjaq59] {
        background-color: rgba(0, 102, 204, 0.18);
    }

    .dropdown-option:last-child[b-6o4agjaq59] {
        border-bottom-left-radius: 11px;
        border-bottom-right-radius: 11px;
    }

    .check-icon[b-6o4agjaq59] {
        color: var(--brand-blue, #0066cc);
        font-weight: bold;
        margin-left: 8px;
    }

    /* Desktop trigger adjustments */
    .selector-trigger-wrapper[b-6o4agjaq59] {
        margin-top: 12px; /* More room for floating label */
    }

    .selector-trigger[b-6o4agjaq59] {
        height: 56px;
        border-radius: 12px;
    }

    .selector-trigger.is-open[b-6o4agjaq59] {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    /* Floating label on desktop - centered on the top border */
    .selector-trigger-wrapper .float-label[b-6o4agjaq59] {
        top: 0;
        left: 12px;
        font-size: 0.8125rem;
        padding: 0 6px;
        background-color: #fff;
        z-index: 2;
        transform: translateY(-50%);
    }
}

/* ===============================
   Info Link Text - Responsive
   =============================== */
.info-link-text-short[b-6o4agjaq59] {
    display: none;
}

.info-link-text-long[b-6o4agjaq59] {
    display: inline;
}

@media (min-width: 768px) {
    .info-link-text-short[b-6o4agjaq59] {
        display: inline;
    }

    .info-link-text-long[b-6o4agjaq59] {
        display: none;
    }
}

/* ===============================
   Validation Shake Animation
   =============================== */
@keyframes validationShake-b-6o4agjaq59 {
    0%, 100% {
        transform: translateX(0);
    }

    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-6px);
    }

    20%, 40%, 60%, 80% {
        transform: translateX(6px);
    }
}

.selector-trigger-wrapper.validation-shake[b-6o4agjaq59] {
    animation: validationShake-b-6o4agjaq59 0.5s ease-in-out;
}

.selector-trigger-wrapper.validation-error .selector-trigger[b-6o4agjaq59] {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25) !important;
}

.selector-trigger-wrapper.validation-error .float-label[b-6o4agjaq59] {
    color: #dc3545 !important;
}

/* Field group validation states */
.field-group.validation-shake[b-6o4agjaq59] {
    animation: validationShake-b-6o4agjaq59 0.5s ease-in-out;
}

.field-group.validation-error .selector-trigger[b-6o4agjaq59] {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25) !important;
}

.field-group.validation-error .float-label[b-6o4agjaq59] {
    color: #dc3545 !important;
}

/* Validation error message */
.validation-error-message[b-6o4agjaq59] {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 4px;
    padding-left: 4px;
}

/* Info Links under each field */
.info-links[b-6o4agjaq59] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 6px;
    font-size: 0.875rem;
}

.info-link[b-6o4agjaq59] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--brand-blue, #0066cc);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    /* Reset button styles to look like a link */
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 0.875rem;
}

    .info-link:hover[b-6o4agjaq59] {
        text-decoration: underline;
        color: var(--brand-blue-dark, #003366);
    }

    .info-link:focus[b-6o4agjaq59] {
        outline: 2px solid var(--brand-blue, #0066cc);
        outline-offset: 2px;
        border-radius: 2px;
    }

.info-icon[b-6o4agjaq59] {
    width: 16px;
    height: 16px;
    fill: currentColor;
    flex-shrink: 0;
}

.info-separator[b-6o4agjaq59] {
    color: var(--brand-blue, #0066cc);
    opacity: 0.5;
    font-size: 0.75rem;
}

/* ===============================
   Wheelchair Section - Fixed
   =============================== */

.wc-row.has-icon[b-6o4agjaq59] {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    column-gap: 10px;
    margin-top: 12px;
    padding: 12px;
    border-radius: 4px;
}

/* Desktop: center wheelchair section to match fields */
@media (min-width: 768px) {
    .wc-row.has-icon[b-6o4agjaq59] {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 28px;
    }
}

    .wc-row.has-icon input[type="checkbox"][b-6o4agjaq59] {
        width: 20px;
        height: 20px;
        margin: 0;
        cursor: pointer;
        accent-color: var(--brand-blue, #0066cc);
    }

.wc-badge[b-6o4agjaq59] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 1.3rem;
    color: var(--brand-blue-dark, #003366);
}

.wc-text[b-6o4agjaq59] {
    white-space: normal;
    line-height: 1.3;
    color: var(--brand-blue-dark, #003366);
    cursor: pointer;
}

    .wc-text:hover[b-6o4agjaq59] {
        opacity: 0.8;
    }

    .wc-text b[b-6o4agjaq59] {
        display: block;
        font-weight: 600;
    }

.wc-sub[b-6o4agjaq59] {
    display: block;
    font-size: 0.9rem;
    opacity: 0.9;
    margin-top: 2px;
}

/* ===============================
   Mobile Optimizations
   =============================== */

@media (max-width: 420px) {
    .field-group[b-6o4agjaq59] {
        margin-bottom: 16px;
    }
}

@media (max-width: 400px) {
    .passengers-bags-content[b-6o4agjaq59] {
        padding-bottom: 70px;
    }

    .field-group[b-6o4agjaq59] {
        margin-bottom: 14px;
    }

    /* Larger touch targets on mobile */
    .selector-trigger[b-6o4agjaq59] {
        height: 60px;
    }

    .wc-row.has-icon[b-6o4agjaq59] {
        column-gap: 8px;
        padding: 10px;
    }

    .wc-text[b-6o4agjaq59] {
        font-size: 0.95rem;
    }

    .wc-sub[b-6o4agjaq59] {
        font-size: 0.85rem;
    }
}

@media (max-height: 680px) {
    .passengers-bags-content[b-6o4agjaq59] {
        padding-bottom: 68px;
    }
}

/* ===============================
   Focus styles for accessibility
   =============================== */
.selector-trigger:focus-visible[b-6o4agjaq59] {
    outline: 2px solid var(--brand-blue, #0066cc);
    outline-offset: 2px;
}
/* /Components/PaymentInfoComponent.razor.rz.scp.css */
/* ========== Accessibility Utilities ========== */
.visually-hidden[b-j73gqsxlqj] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.payment-type-content[b-j73gqsxlqj] {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    position: relative;
    overflow: visible;
}

/* ========== Pricing Summary ========== */
.pricing-summary[b-j73gqsxlqj] {
    background: #f8fafc;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.pricing-row[b-j73gqsxlqj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
}

.pricing-row.subtotal-row[b-j73gqsxlqj] {
    border-bottom: 1px solid #e5e9ef;
    padding-bottom: 10px;
}

.pricing-row.gratuity-row[b-j73gqsxlqj] {
    padding: 10px 0;
}

.pricing-row.total-row[b-j73gqsxlqj] {
    border-top: 2px solid var(--brand-blue-dark, var(--brand-blue-dark));
    padding-top: 10px;
    margin-top: 4px;
}

.total-info[b-j73gqsxlqj] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.breakdown-link[b-j73gqsxlqj] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: transparent;
    border: 1px solid var(--brand-blue, var(--brand-blue));
    border-radius: 4px;
    font-size: 0.75em;
    color: var(--brand-blue, var(--brand-blue));
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

    .breakdown-link:hover[b-j73gqsxlqj] {
        background: var(--brand-blue, var(--brand-blue));
        color: white;
    }

    .breakdown-link:focus[b-j73gqsxlqj] {
        outline: 2px solid var(--brand-blue, #2963A8);
        outline-offset: 2px;
    }

    .breakdown-link:focus-visible[b-j73gqsxlqj] {
        outline: 2px solid var(--brand-blue, #2963A8);
        outline-offset: 2px;
    }

.pricing-label[b-j73gqsxlqj] {
    font-size: 0.95em;
    color: #555;
}

.pricing-value[b-j73gqsxlqj] {
    font-size: 1em;
    font-weight: 600;
    color: var(--brand-blue-dark, var(--brand-blue-dark));
}

.pricing-value.total-value[b-j73gqsxlqj] {
    font-size: 1.2em;
    font-weight: 700;
}

.gratuity-info[b-j73gqsxlqj] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gratuity-edit-btn[b-j73gqsxlqj] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.8em;
    color: var(--brand-blue, var(--brand-blue));
    cursor: pointer;
    transition: all 0.2s ease;
}

.gratuity-edit-btn:hover[b-j73gqsxlqj] {
    background: var(--brand-blue, var(--brand-blue));
    color: white;
    border-color: var(--brand-blue, var(--brand-blue));
}

.gratuity-edit-btn:focus[b-j73gqsxlqj] {
    outline: 2px solid var(--brand-blue, #2963A8);
    outline-offset: 2px;
}

.gratuity-edit-btn:focus-visible[b-j73gqsxlqj] {
    outline: 2px solid var(--brand-blue, #2963A8);
    outline-offset: 2px;
}

.gratuity-edit-btn i[b-j73gqsxlqj] {
    font-size: 0.85em;
}

.gratuity-note[b-j73gqsxlqj] {
    font-size: 0.8em;
    color: #666;
    font-style: italic;
    text-align: right;
    padding: 2px 0 6px 0;
}

@media (max-width: 400px) {
    .pricing-summary[b-j73gqsxlqj] {
        padding: 10px 12px;
    }

    .pricing-row.gratuity-row[b-j73gqsxlqj] {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .gratuity-info[b-j73gqsxlqj] {
        flex-wrap: wrap;
    }
}

.expiration-warning[b-j73gqsxlqj] {
    color: var(--cell-red, #d9534f);
    font-weight: 500;
    margin-top: 5px;
}

.input-container[b-j73gqsxlqj] {
    position: relative;
    margin: 12px 0;
    width: 100%;
}

    .input-container label[b-j73gqsxlqj] {
        display: block;
        margin-bottom: 4px;
        font-weight: bold;
        text-align: center;
        color: var(--brand-blue-dark, var(--brand-blue-dark));
    }

.input-wrapper[b-j73gqsxlqj] {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.form-control[b-j73gqsxlqj] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
    box-sizing: border-box;
    color: var(--brand-blue-dark, var(--brand-blue-dark));
}

    .form-control:focus[b-j73gqsxlqj] {
        outline: none;
        border-color: var(--brand-blue, var(--brand-blue));
        box-shadow: 0 0 0 3px rgba(41, 99, 168, 0.1);
    }

.radio-group[b-j73gqsxlqj] {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
}

.radio-label[b-j73gqsxlqj] {
    display: flex;
    align-items: center;
    font-size: 1em;
    cursor: pointer;
    color: var(--brand-blue-dark, var(--brand-blue-dark));
}

    .radio-label input[b-j73gqsxlqj] {
        margin-right: 5px;
        accent-color: var(--brand-blue, var(--brand-blue));
    }

.dropdown-group[b-j73gqsxlqj] {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

    .dropdown-group select[b-j73gqsxlqj] {
        flex: 1;
        max-width: 150px;
        color: var(--brand-blue-dark, var(--brand-blue-dark));
    }

.payment-display[b-j73gqsxlqj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .payment-display i[b-j73gqsxlqj] {
        font-size: 1.1em;
        color: var(--brand-blue, var(--brand-blue));
        width: 20px;
        text-align: center;
    }

.icon-payment[b-j73gqsxlqj],
.icon-account[b-j73gqsxlqj] {
    color: var(--brand-blue, var(--brand-blue));
}

.help-text[b-j73gqsxlqj] {
    display: block;
    font-size: 0.8em;
    color: #666;
    margin-top: 4px;
    text-align: center;
}

.error-message[b-j73gqsxlqj] {
    color: var(--cell-red, #d9534f);
    font-size: 0.85em;
    margin: 8px 0;
    text-align: center;
}

/* CVV input styling */
.cvv-input-wrapper[b-j73gqsxlqj] {
    position: relative;
    max-width: 200px;
    margin: 0 auto;
}

.cvv-input[b-j73gqsxlqj] {
    text-align: center;
    font-size: 1.2em;
    letter-spacing: 4px;
    padding-right: 40px !important;
}

.cvv-icon[b-j73gqsxlqj] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--brand-blue, var(--brand-blue));
    font-size: 1.3em;
    pointer-events: none;
}

    .cvv-icon i[b-j73gqsxlqj] {
        display: block;
    }

/* Braintree Hosted Fields */
.braintree-hosted-field[b-j73gqsxlqj] {
    height: 44px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: white;
    box-sizing: border-box;
}

    .braintree-hosted-field:focus-within[b-j73gqsxlqj] {
        outline: none;
        border-color: var(--brand-blue, var(--brand-blue));
        box-shadow: 0 0 0 3px rgba(41, 99, 168, 0.1);
    }

/* Braintree Security Badge - COMPACT */
.braintree-badge[b-j73gqsxlqj] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    padding: 8px;
    font-size: 13px;
    color: #6c757d;
}

    .braintree-badge .lock-icon[b-j73gqsxlqj] {
        width: 16px;
        height: 16px;
        color: #28a745;
        flex-shrink: 0;
    }

    .braintree-badge .badge-text[b-j73gqsxlqj] {
        font-weight: 500;
    }

    .braintree-badge .braintree-link[b-j73gqsxlqj] {
        display: inline-block;
        text-decoration: none;
        transition: opacity 0.2s;
    }

        .braintree-badge .braintree-link:hover[b-j73gqsxlqj] {
            opacity: 0.8;
        }

    .braintree-badge .braintree-logo[b-j73gqsxlqj] {
        height: 32px;
        width: auto;
        display: block;
    }

/* Payment Type Row - inline label and radios */
.payment-type-row[b-j73gqsxlqj] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.payment-type-label[b-j73gqsxlqj] {
    font-weight: bold;
    color: var(--brand-blue-dark, var(--brand-blue-dark));
    margin: 0;
    white-space: nowrap;
}

.radio-group-inline[b-j73gqsxlqj] {
    display: flex;
    gap: 20px;
    align-items: center;
}

/* ========== Saved Payment Styles ========== */

.payment-source-selector[b-j73gqsxlqj] {
    width: 100%;
}

/* RadzenDropDown customization */
[b-j73gqsxlqj] .payment-dropdown {
    width: 100% !important;
}

    [b-j73gqsxlqj] .payment-dropdown .rz-dropdown {
        width: 100%;
        border: 1px solid #ccc;
        border-radius: 6px;
    }

        [b-j73gqsxlqj] .payment-dropdown .rz-dropdown:hover {
            border-color: var(--brand-blue, var(--brand-blue));
        }

        [b-j73gqsxlqj] .payment-dropdown .rz-dropdown.rz-state-focused {
            border-color: var(--brand-blue, var(--brand-blue));
            box-shadow: 0 0 0 3px rgba(41, 99, 168, 0.1);
        }

/* Dropdown item content with icon */
.dropdown-item-content[b-j73gqsxlqj] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
}

    .dropdown-item-content i[b-j73gqsxlqj] {
        font-size: 1.4rem;
        width: 28px;
        text-align: center;
        flex-shrink: 0;
    }

        /* Card brand icon colors in dropdown */
        .dropdown-item-content i.fa-cc-visa[b-j73gqsxlqj] {
            color: #1A1F71;
        }

        .dropdown-item-content i.fa-cc-mastercard[b-j73gqsxlqj] {
            color: #EB001B;
        }

        .dropdown-item-content i.fa-cc-amex[b-j73gqsxlqj] {
            color: #006FCF;
        }

        .dropdown-item-content i.fa-cc-discover[b-j73gqsxlqj] {
            color: #FF6000;
        }

        .dropdown-item-content i.fa-cc-jcb[b-j73gqsxlqj] {
            color: #0E4C96;
        }

        .dropdown-item-content i.fa-cc-diners-club[b-j73gqsxlqj] {
            color: #0079BE;
        }

        .dropdown-item-content i.fa-credit-card[b-j73gqsxlqj] {
            color: #555;
        }

        .dropdown-item-content i.fa-building[b-j73gqsxlqj] {
            color: var(--brand-blue, var(--brand-blue));
        }

        .dropdown-item-content i.fa-plus[b-j73gqsxlqj] {
            color: var(--brand-blue, var(--brand-blue));
        }

    .dropdown-item-content span[b-j73gqsxlqj] {
        color: var(--brand-blue-dark, var(--brand-blue-dark));
    }

/* Default badge in dropdown */
.dropdown-default-badge[b-j73gqsxlqj] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background-color: #28a745;
    color: white;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-left: auto;
}

/* Saved Payment Display Card */
.saved-payment-display[b-j73gqsxlqj] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px solid #dee2e6;
    border-radius: 10px;
    padding: 14px;
    margin: 12px 0;
}

.saved-card-info[b-j73gqsxlqj],
.saved-account-info[b-j73gqsxlqj] {
    display: flex;
    align-items: center;
    gap: 14px;
}

    .saved-card-info i[b-j73gqsxlqj],
    .saved-account-info i[b-j73gqsxlqj] {
        font-size: 2.5rem;
        color: #555;
        flex-shrink: 0;
    }

        /* Card brand colors */
        .saved-card-info i.fa-cc-visa[b-j73gqsxlqj] {
            color: #1A1F71;
        }

        .saved-card-info i.fa-cc-mastercard[b-j73gqsxlqj] {
            color: #EB001B;
        }

        .saved-card-info i.fa-cc-amex[b-j73gqsxlqj] {
            color: #006FCF;
        }

        .saved-card-info i.fa-cc-discover[b-j73gqsxlqj] {
            color: #FF6000;
        }

        .saved-account-info i.fa-building[b-j73gqsxlqj] {
            color: var(--brand-blue, var(--brand-blue));
        }

.saved-card-details[b-j73gqsxlqj],
.saved-account-details[b-j73gqsxlqj] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.card-number[b-j73gqsxlqj] {
    font-family: 'Courier New', monospace;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--brand-blue-dark, var(--brand-blue-dark));
    letter-spacing: 1px;
}

.card-meta[b-j73gqsxlqj],
.account-meta[b-j73gqsxlqj] {
    font-size: 0.9rem;
    color: #666;
}

.account-name[b-j73gqsxlqj] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--brand-blue-dark, var(--brand-blue-dark));
}

.default-badge[b-j73gqsxlqj] {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background-color: #28a745;
    color: white;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

/* Save Card Checkbox - COMPACT */
.save-card-option[b-j73gqsxlqj] {
    margin-top: 8px !important;
    margin-bottom: 0 !important;
}

.checkbox-label[b-j73gqsxlqj] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.95em;
    color: var(--brand-blue-dark, var(--brand-blue-dark));
}

    .checkbox-label input[type="checkbox"][b-j73gqsxlqj] {
        width: 18px;
        height: 18px;
        accent-color: var(--brand-blue, var(--brand-blue));
        cursor: pointer;
    }

    .checkbox-label span[b-j73gqsxlqj] {
        user-select: none;
    }

/* ========== Special Instructions - COMPACT ========== */
.special-instructions-section[b-j73gqsxlqj] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e9ecef;
}

.special-instructions-textarea[b-j73gqsxlqj] {
    resize: vertical;
    min-height: 50px;
    font-size: 0.95em;
    line-height: 1.4;
}

    .special-instructions-textarea[b-j73gqsxlqj]::placeholder {
        color: #999;
        font-style: italic;
    }

/* ========== Special Instructions Tabs ========== */
.tab-content-wrapper[b-j73gqsxlqj] {
    padding: 8px 0 0 0;
}

[b-j73gqsxlqj] .special-instructions-tabs {
    width: 100%;
}

    [b-j73gqsxlqj] .special-instructions-tabs .rz-tabview-nav {
        display: flex;
        justify-content: center;
        border-bottom: 2px solid #e9ecef;
        gap: 0;
        padding: 0;
        margin: 0;
    }

    [b-j73gqsxlqj] .special-instructions-tabs .rz-tabview-nav-link {
        padding: 8px 20px;
        font-weight: 600;
        font-size: 0.9em;
        color: #666;
        border: none;
        border-bottom: 3px solid transparent;
        background: transparent;
        margin-bottom: -2px;
        transition: all 0.2s ease;
    }

        [b-j73gqsxlqj] .special-instructions-tabs .rz-tabview-nav-link:hover {
            color: var(--brand-blue, var(--brand-blue));
            background: rgba(41, 99, 168, 0.05);
        }

        [b-j73gqsxlqj] .special-instructions-tabs .rz-tabview-nav-link.rz-state-active,
        [b-j73gqsxlqj] .special-instructions-tabs .rz-state-active .rz-tabview-nav-link {
            color: var(--brand-blue, var(--brand-blue));
            border-bottom-color: var(--brand-blue, var(--brand-blue));
            background: transparent;
        }

    [b-j73gqsxlqj] .special-instructions-tabs .rz-tabview-panels {
        padding: 0;
        border: none;
        background: transparent;
    }

    [b-j73gqsxlqj] .special-instructions-tabs .rz-tabview-panel {
        padding: 0;
    }

/* Responsive adjustments */
@media (max-width: 480px) {
    .saved-card-info[b-j73gqsxlqj],
    .saved-account-info[b-j73gqsxlqj] {
        flex-wrap: wrap;
    }

        .saved-card-info i[b-j73gqsxlqj],
        .saved-account-info i[b-j73gqsxlqj] {
            font-size: 2rem;
        }

    .card-number[b-j73gqsxlqj] {
        font-size: 1rem;
    }

    .default-badge[b-j73gqsxlqj] {
        margin-top: 8px;
        width: 100%;
        justify-content: center;
    }

    .payment-type-row[b-j73gqsxlqj] {
        flex-direction: column;
        gap: 10px;
    }

    .radio-group-inline[b-j73gqsxlqj] {
        justify-content: center;
    }

    .dropdown-item-content i[b-j73gqsxlqj] {
        font-size: 1.2rem;
        width: 24px;
    }

    .special-instructions-textarea[b-j73gqsxlqj] {
        min-height: 45px;
    }

    [b-j73gqsxlqj] .special-instructions-tabs .rz-tabview-nav-link {
        padding: 6px 14px;
        font-size: 0.85em;
    }
}

/* ========== Terms Agreement ========== */
.terms-agreement[b-j73gqsxlqj] {
    margin-top: 16px;
    padding: 12px;
    text-align: center;
    font-size: 0.85em;
    color: #666;
    line-height: 1.5;
}

    .terms-agreement a[b-j73gqsxlqj] {
        color: var(--brand-blue, #2963A8);
        text-decoration: underline;
        font-weight: 500;
    }

        .terms-agreement a:hover[b-j73gqsxlqj] {
            color: var(--brand-blue-dark, #102B5B);
        }

        .terms-agreement a:focus[b-j73gqsxlqj] {
            outline: 2px solid var(--brand-blue, #2963A8);
            outline-offset: 2px;
        }

/* =============================================================================
 * TRIP SUMMARY LINK & MODAL (for narrow screens when sidebar is hidden)
 * ============================================================================= */

.trip-summary-link-container[b-j73gqsxlqj] {
    margin-bottom: 16px;
}

.trip-summary-link[b-j73gqsxlqj] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 18px;
    background: linear-gradient(135deg, var(--brand-blue, #2963A8) 0%, var(--brand-blue-dark, #102B5B) 100%);
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 3px 10px rgba(41, 99, 168, 0.3);
}

    .trip-summary-link:hover[b-j73gqsxlqj] {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(41, 99, 168, 0.4);
    }

    .trip-summary-link:active[b-j73gqsxlqj] {
        transform: translateY(0);
        box-shadow: 0 2px 6px rgba(41, 99, 168, 0.3);
    }

    .trip-summary-link:focus[b-j73gqsxlqj] {
        outline: 2px solid var(--brand-blue, #2963A8);
        outline-offset: 3px;
    }

    .trip-summary-link:focus-visible[b-j73gqsxlqj] {
        outline: 2px solid var(--brand-blue, #2963A8);
        outline-offset: 3px;
    }

    .trip-summary-link i:first-child[b-j73gqsxlqj] {
        font-size: 1.3rem;
        color: white;
        opacity: 0.9;
    }

    .trip-summary-link span[b-j73gqsxlqj] {
        flex: 1;
        text-align: left;
    }

    .trip-summary-link i:last-child[b-j73gqsxlqj] {
        font-size: 1rem;
        color: white;
        opacity: 0.7;
        transition: all 0.2s ease;
    }

    .trip-summary-link:hover i:last-child[b-j73gqsxlqj] {
        transform: translateX(4px);
        opacity: 1;
    }

/* Trip Summary Modal Overlay */
.trip-summary-modal-overlay[b-j73gqsxlqj] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2100;
    padding: 20px;
    animation: fadeIn-b-j73gqsxlqj 0.2s ease;
}

@keyframes fadeIn-b-j73gqsxlqj {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Trip Summary Modal Content */
.trip-summary-modal-content[b-j73gqsxlqj] {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 400px;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    animation: slideUp-b-j73gqsxlqj 0.3s ease;
    display: flex;
    flex-direction: column;
}

@keyframes slideUp-b-j73gqsxlqj {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive adjustments for very small screens */
@media (max-width: 480px) {
    .trip-summary-modal-overlay[b-j73gqsxlqj] {
        padding: 10px;
    }

    .trip-summary-modal-content[b-j73gqsxlqj] {
        max-height: 85vh;
        border-radius: 10px;
    }
}

/* =============================================================================
 * TRIP REVIEW MODAL (trip-centric layout for pre-booking review)
 * ============================================================================= */

.trip-review-modal-overlay[b-j73gqsxlqj] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2100;
    padding: 20px;
    animation: fadeIn-b-j73gqsxlqj 0.2s ease;
}

.trip-review-modal-content[b-j73gqsxlqj] {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 420px;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    animation: slideUp-b-j73gqsxlqj 0.3s ease;
    display: flex;
    flex-direction: column;
}

@media (max-width: 480px) {
    .trip-review-modal-overlay[b-j73gqsxlqj] {
        padding: 10px;
    }

    .trip-review-modal-content[b-j73gqsxlqj] {
        max-height: 90vh;
        border-radius: 10px;
    }
}

/* =============================================================================
 * PRICE BREAKDOWN MODAL
 * ============================================================================= */

.price-breakdown-modal-overlay[b-j73gqsxlqj] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2100;
    padding: 20px;
    animation: fadeIn-b-j73gqsxlqj 0.2s ease;
}

.price-breakdown-modal-content[b-j73gqsxlqj] {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 420px;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    animation: slideUp-b-j73gqsxlqj 0.3s ease;
    display: flex;
    flex-direction: column;
}

.price-breakdown-header[b-j73gqsxlqj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 2px solid #e0e0e0;
    background-color: var(--brand-blue-50, #F2F6FF);
}

    .price-breakdown-header h6[b-j73gqsxlqj] {
        font-weight: 600;
        color: var(--brand-blue-dark, var(--brand-blue-dark));
        font-size: 1rem;
        margin: 0;
    }

.price-breakdown-close-btn[b-j73gqsxlqj] {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: #666;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
}

    .price-breakdown-close-btn:hover[b-j73gqsxlqj] {
        background-color: rgba(0, 0, 0, 0.08);
        color: #333;
    }

    .price-breakdown-close-btn:focus[b-j73gqsxlqj] {
        outline: 2px solid var(--brand-blue, #2963A8);
        outline-offset: 2px;
    }

    .price-breakdown-close-btn:focus-visible[b-j73gqsxlqj] {
        outline: 2px solid var(--brand-blue, #2963A8);
        outline-offset: 2px;
    }

.price-breakdown-body[b-j73gqsxlqj] {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
}

.breakdown-trip-section[b-j73gqsxlqj] {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e9ecef;
}

    .breakdown-trip-section:last-of-type[b-j73gqsxlqj] {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }

.breakdown-trip-header[b-j73gqsxlqj] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.breakdown-trip-label[b-j73gqsxlqj] {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--brand-blue-dark, var(--brand-blue-dark));
}

.breakdown-trip-route[b-j73gqsxlqj] {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 10px;
}

.breakdown-line-items[b-j73gqsxlqj] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.breakdown-line[b-j73gqsxlqj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: #444;
}

    .breakdown-line span:first-child[b-j73gqsxlqj] {
        color: #666;
    }

    .breakdown-line span:last-child[b-j73gqsxlqj] {
        font-weight: 500;
        color: var(--brand-blue-dark, var(--brand-blue-dark));
    }

.breakdown-line.discount-line span:last-child[b-j73gqsxlqj] {
    color: #28a745;
}

.breakdown-line.fee-line[b-j73gqsxlqj] {
    font-size: 0.85rem;
}

    .breakdown-line.fee-line span:first-child[b-j73gqsxlqj] {
        padding-left: 8px;
    }

.breakdown-line.trip-subtotal-line[b-j73gqsxlqj] {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed #ddd;
    font-weight: 500;
}

.breakdown-line.gratuity-included-line[b-j73gqsxlqj] {
    font-style: italic;
}

    .breakdown-line.gratuity-included-line span[b-j73gqsxlqj] {
        color: #888 !important;
    }

/* Round trip discount note - single span that spans full width */
.breakdown-line.round-trip-discount-note[b-j73gqsxlqj] {
    justify-content: flex-start;
    font-size: 0.8rem;
    font-style: italic;
}

    .breakdown-line.round-trip-discount-note span[b-j73gqsxlqj] {
        color: #27ae60 !important;
        font-weight: 500;
    }

.breakdown-totals-section[b-j73gqsxlqj] {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 2px solid #e0e0e0;
}

.breakdown-total-line[b-j73gqsxlqj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 0.9rem;
}

    .breakdown-total-line span:first-child[b-j73gqsxlqj] {
        color: #555;
    }

    .breakdown-total-line span:last-child[b-j73gqsxlqj] {
        font-weight: 600;
        color: var(--brand-blue-dark, var(--brand-blue-dark));
    }

.breakdown-total-line.grand-total[b-j73gqsxlqj] {
    margin-top: 8px;
    padding-top: 10px;
    border-top: 2px solid var(--brand-blue-dark, var(--brand-blue-dark));
}

    .breakdown-total-line.grand-total span:first-child[b-j73gqsxlqj] {
        font-weight: 600;
        color: var(--brand-blue-dark, var(--brand-blue-dark));
    }

    .breakdown-total-line.grand-total span:last-child[b-j73gqsxlqj] {
        font-size: 1.1rem;
        font-weight: 700;
    }

.price-breakdown-footer[b-j73gqsxlqj] {
    display: flex;
    justify-content: center;
    padding: 12px 16px;
    border-top: 1px solid #e0e0e0;
    background-color: #f8f9fa;
}

.price-breakdown-close-btn-footer[b-j73gqsxlqj] {
    min-width: 120px;
    padding: 8px 24px;
    font-weight: 500;
    background-color: var(--brand-blue, var(--brand-blue));
    border-color: var(--brand-blue, var(--brand-blue));
}

    .price-breakdown-close-btn-footer:hover[b-j73gqsxlqj] {
        background-color: var(--brand-blue-dark, var(--brand-blue-dark));
        border-color: var(--brand-blue-dark, var(--brand-blue-dark));
    }

    .price-breakdown-close-btn-footer:focus[b-j73gqsxlqj] {
        outline: 2px solid var(--brand-blue-dark, #102B5B);
        outline-offset: 2px;
    }

    .price-breakdown-close-btn-footer:focus-visible[b-j73gqsxlqj] {
        outline: 2px solid var(--brand-blue-dark, #102B5B);
        outline-offset: 2px;
    }

/* Responsive adjustments for price breakdown modal */
@media (max-width: 480px) {
    .price-breakdown-modal-overlay[b-j73gqsxlqj] {
        padding: 10px;
    }

    .price-breakdown-modal-content[b-j73gqsxlqj] {
        max-height: 85vh;
        border-radius: 10px;
    }

    .breakdown-trip-label[b-j73gqsxlqj] {
        font-size: 0.9rem;
    }

    .breakdown-line[b-j73gqsxlqj],
    .breakdown-total-line[b-j73gqsxlqj] {
        font-size: 0.85rem;
    }
}

/* =============================================================================
 * SHAKE ANIMATION FOR VALIDATION
 * ============================================================================= */
@keyframes shake-b-j73gqsxlqj {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

[b-j73gqsxlqj] .shake,
.shake[b-j73gqsxlqj] {
    animation: shake-b-j73gqsxlqj 0.5s ease-in-out;
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

/* Braintree hosted field containers need explicit targeting */
#card-number.shake[b-j73gqsxlqj],
#expiration-date.shake[b-j73gqsxlqj],
#cvv.shake[b-j73gqsxlqj],
#billing-zip.shake[b-j73gqsxlqj] {
    animation: shake-b-j73gqsxlqj 0.5s ease-in-out;
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}
/* /Components/PickupDateTimeComponent.razor.rz.scp.css */
/* ===============================
   Pickup DateTime Modal Content
   =============================== */

.pickup-datetime-content[b-akx3ey46bs] {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: 16px;
}

/* ===============================
   Time Section
   =============================== */

.time-section[b-akx3ey46bs] {
    margin-bottom: 12px;
}

.time-display-card[b-akx3ey46bs] {
    display: flex;
    flex-direction: column;
    background: linear-gradient(to bottom, #ffffff, #f8fafc);
    border: 2px solid #ced4da;
    border-radius: 10px;
    padding: 16px;
    position: relative;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.time-card-label[b-akx3ey46bs] {
    position: absolute;
    left: 16px;
    top: 0;
    transform: translateY(-50%);
    font-size: 12px;
    font-weight: 600;
    color: var(--brand-blue, var(--brand-blue));
    background: white;
    padding: 0 6px;
    pointer-events: none;
}

/* Main time display area */
.time-display-main[b-akx3ey46bs] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px 0 12px 0;
}

.time-icon[b-akx3ey46bs] {
    color: var(--brand-blue, var(--brand-blue));
    font-size: 28px !important;
}

.time-value-block[b-akx3ey46bs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.time-value[b-akx3ey46bs] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--brand-blue-dark, #06325f);
}

/* Time chip styling */
.time-chip[b-akx3ey46bs] {
    padding: 4px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, #F2F6FF 0%, #E5EEFF 100%);
    color: var(--brand-blue-dark, #06325f);
    border: 1px solid var(--brand-blue, var(--brand-blue));
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: capitalize;
}

    /* Time chip color variants */
    .time-chip.time-morning[b-akx3ey46bs] {
        background: linear-gradient(135deg, #FFF9E6 0%, #FFF3CC 100%);
        border-color: #F59E0B;
        color: #92400E;
    }

    .time-chip.time-midday[b-akx3ey46bs],
    .time-chip.time-afternoon[b-akx3ey46bs] {
        background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
        border-color: #F59E0B;
        color: #92400E;
    }

    .time-chip.time-evening[b-akx3ey46bs] {
        background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%);
        border-color: #6366F1;
        color: #312E81;
    }

    .time-chip.time-midnight[b-akx3ey46bs],
    .time-chip.time-after-midnight[b-akx3ey46bs],
    .time-chip.time-before-midnight[b-akx3ey46bs],
    .time-chip.time-night[b-akx3ey46bs] {
        background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%);
        border-color: #4F46E5;
        color: #1E1B4B;
    }

    .time-chip.time-early-morning[b-akx3ey46bs] {
        background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
        border-color: #F59E0B;
        color: #92400E;
    }

/* ===============================
   Adjustment Buttons
   =============================== */

.adjustment-buttons[b-akx3ey46bs] {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid #e5e5e5;
}

.adjust-btn[b-akx3ey46bs] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    min-width: 110px;
    touch-action: manipulation; /* Prevents iOS double-tap zoom */
}

.adjust-earlier[b-akx3ey46bs] {
    background: white;
    color: var(--brand-blue, var(--brand-blue));
    border: 2px solid var(--brand-blue, var(--brand-blue));
}

    .adjust-earlier:hover:not(:disabled)[b-akx3ey46bs] {
        background: var(--brand-blue, var(--brand-blue));
        color: white;
    }

.adjust-later[b-akx3ey46bs] {
    background: white;
    color: var(--brand-blue, var(--brand-blue));
    border: 2px solid var(--brand-blue, var(--brand-blue));
}

    .adjust-later:hover:not(:disabled)[b-akx3ey46bs] {
        background: var(--brand-blue, var(--brand-blue));
        color: white;
    }

.adjust-btn:disabled[b-akx3ey46bs] {
    opacity: 0.6;
    cursor: not-allowed;
}

.adjust-btn .rzi[b-akx3ey46bs] {
    font-size: 18px !important;
}

/* Spinner */
.spinner-small[b-akx3ey46bs] {
    width: 14px;
    height: 14px;
    border: 2px solid #ccc;
    border-top: 2px solid var(--brand-blue, var(--brand-blue));
    border-radius: 50%;
    animation: spin-b-akx3ey46bs 0.7s linear infinite;
    display: inline-block;
}

@keyframes spin-b-akx3ey46bs {
    to {
        transform: rotate(360deg);
    }
}

/* ===============================
   Suggested Time Info
   =============================== */

.suggested-diff[b-akx3ey46bs] {
    margin: 8px 0 0 0;
    font-size: 0.8rem;
    color: #666;
    text-align: center;
    font-style: italic;
}

.suggested-time-hint[b-akx3ey46bs] {
    margin: 0 0 8px 0;
    font-size: 0.75rem;
    color: #666;
    text-align: center;
    line-height: 1.5;
}

.cruise-wait-warning[b-akx3ey46bs] {
    margin: 4px 0 8px 0;
    font-size: 0.75rem;
    color: #92400E;
    background: #FEF3C7;
    border: 1px solid #F59E0B;
    border-radius: 6px;
    padding: 8px 12px;
    line-height: 1.4;
    text-align: center;
}

/* ===============================
   Footer Buttons
   =============================== */

.pickup-footer[b-akx3ey46bs] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    align-items: center;
    padding: 12px 0 0 0;
    margin-top: 4px;
}

    .pickup-footer .btn-cancel[b-akx3ey46bs] {
        background: #e8e8e8;
        color: #555;
        border: none;
        border-radius: 50px;
        padding: 12px 24px;
        font-size: 0.9rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
        white-space: nowrap;
    }

        .pickup-footer .btn-cancel:hover[b-akx3ey46bs] {
            background: #d8d8d8;
            color: #333;
        }

    .pickup-footer .rz-button.rz-button-primary[b-akx3ey46bs] {
        border-radius: 50px !important;
        padding: 12px 24px !important;
    }

/* ===============================
   Screen Reader Only
   =============================== */

.sr-only[b-akx3ey46bs] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* ===============================
   Mobile Responsive
   =============================== */

@media (max-width: 480px) {
    .pickup-datetime-content[b-akx3ey46bs] {
        padding: 12px;
    }

    .time-display-card[b-akx3ey46bs] {
        padding: 14px 12px;
    }

    .time-value[b-akx3ey46bs] {
        font-size: 1.3rem;
    }

    .time-chip[b-akx3ey46bs] {
        font-size: 0.7rem;
    }

    .adjustment-buttons[b-akx3ey46bs] {
        gap: 8px;
    }

    .adjust-btn[b-akx3ey46bs] {
        padding: 8px 16px;
        font-size: 0.85rem;
        min-width: 100px;
    }

    .pickup-footer[b-akx3ey46bs] {
        gap: 8px;
    }

        .pickup-footer .btn-cancel[b-akx3ey46bs] {
            padding: 10px 16px;
            font-size: 0.85rem;
        }

        .pickup-footer .rz-button.rz-button-primary[b-akx3ey46bs] {
            padding: 10px 16px !important;
        }

        .pickup-footer .rz-button .rz-button-text[b-akx3ey46bs] {
            font-size: 12px !important;
        }
}

/* ===============================
   High Contrast Mode
   =============================== */

@media (prefers-contrast: high) {
    .time-display-card[b-akx3ey46bs] {
        border: 3px solid #000;
        background: #fff;
    }

    .time-card-label[b-akx3ey46bs] {
        color: #000;
    }

    .time-value[b-akx3ey46bs] {
        color: #000;
    }

    .adjust-btn[b-akx3ey46bs] {
        border-width: 3px;
    }
}
/* /Components/PreviewJsonDialog.razor.rz.scp.css */
.preview-dialog[b-lfpnmi7qzd] {
    padding: 1rem;
    min-width: 350px;
}

.preview-summary h4[b-lfpnmi7qzd] {
    margin-bottom: 1rem;
    color: #333;
    font-size: 1.1rem;
}

.preview-stats[b-lfpnmi7qzd] {
    background: #f8f9fa;
    border-radius: 6px;
    padding: 0.75rem;
    margin-bottom: 1rem;
}

.preview-item[b-lfpnmi7qzd] {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
    font-size: 0.9rem;
}

    .preview-item + .preview-item[b-lfpnmi7qzd] {
        border-top: 1px solid #e9ecef;
        margin-top: 0.25rem;
        padding-top: 0.5rem;
    }

.preview-total[b-lfpnmi7qzd] {
    font-size: 0.875rem;
    color: #6c757d;
    text-align: right;
}

.copy-success-banner[b-lfpnmi7qzd] {
    background: #d4edda;
    color: #155724;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

    .copy-success-banner .checkmark[b-lfpnmi7qzd] {
        font-weight: bold;
        font-size: 1rem;
    }

.preview-buttons[b-lfpnmi7qzd] {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e9ecef;
}

    .preview-buttons .btn[b-lfpnmi7qzd] {
        min-width: 140px;
    }

        .preview-buttons .btn i[b-lfpnmi7qzd] {
            margin-right: 0.25rem;
        }
/* /Components/ProfileComponent.razor.rz.scp.css */
/* =========================
   ProfileComponent
   Matching PassengerContactInfoComponent styling
   ========================= */

/* Container */
.profile-container[b-gakbtw0wii] {
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,.1);
    position: relative;
    overflow-x: hidden;
    overflow-y: visible;
}

.profile-body[b-gakbtw0wii] {
    padding: 0;
}

.profile-footer[b-gakbtw0wii] {
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
    margin-top: 10px;
}

/* Register Mode Header */
.register-header[b-gakbtw0wii] {
    margin-bottom: 24px;
    text-align: center;
}

    .register-header h4[b-gakbtw0wii] {
        color: var(--brand-blue-dark, #102B5B);
        font-weight: 600;
        margin-bottom: 8px;
    }

    .register-header p[b-gakbtw0wii] {
        color: #6c757d;
        margin: 0;
        font-size: 14px;
    }

/* =========================
   FLOAT FIELD STYLING
   ========================= */

/* Float Field Container */
.profile-container .float-field[b-gakbtw0wii] {
    position: relative;
    width: 100%;
    margin-bottom: 22px;
}

/* Input Fields - Full Width, 8px Rounded Borders */
.profile-container .float-input.form-control[b-gakbtw0wii] {
    width: 100%;
    height: auto;
    min-height: 56px;
    padding: 24px 14px 10px 14px;
    font-size: 16px;
    line-height: 1.45;
    color: var(--text-primary, var(--brand-blue-dark, #102B5B));
    border: 1.5px solid var(--brand-blue, #2963A8);
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .profile-container .float-input.form-control:focus[b-gakbtw0wii] {
        border-color: var(--brand-blue, #2963A8);
        box-shadow: 0 0 0 3px rgba(41, 99, 168, 0.1);
        outline: none;
    }

    /* Empty placeholder - don't show */
    .profile-container .float-input.form-control[b-gakbtw0wii]::placeholder {
        color: transparent;
        opacity: 0;
    }

/* Floating Label - Animates Up When Field Has Value or Focus */
.profile-container .float-label[b-gakbtw0wii] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    color: var(--hint-text, #999999);
    background: #fff;
    padding: 0 4px;
    pointer-events: none;
    transition: top 0.18s ease, font-size 0.18s ease, transform 0.18s ease, color 0.18s ease;
    z-index: 1;
}

/* Float label up when field has focus or value */
.profile-container .float-input:focus + .float-label[b-gakbtw0wii],
.profile-container .float-field.has-value .float-label[b-gakbtw0wii] {
    top: 0;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--brand-blue, #2963A8);
    font-weight: 500;
}

/* Always-float variant for selects and country selector */
.profile-container .float-field.always-float .float-label[b-gakbtw0wii] {
    top: 0;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--brand-blue, #2963A8);
    font-weight: 500;
    left: 20px;
    z-index: 2;
}

/* Select elements */
.profile-container select.float-input.form-control[b-gakbtw0wii] {
    padding-top: 20px;
    padding-bottom: 8px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 20px;
    padding-right: 40px;
}

/* =========================
   ROW LAYOUTS
   ========================= */

/* Name Row - Two columns */
.name-row[b-gakbtw0wii] {
    display: flex;
    gap: 12px;
    margin-bottom: 0; /* float-fields have their own margin */
}

    .name-row .float-field[b-gakbtw0wii] {
        flex: 1;
    }

/* Settings Row - Two columns */
.settings-row[b-gakbtw0wii] {
    display: flex;
    gap: 12px;
    margin-bottom: 0;
}

    .settings-row .float-field[b-gakbtw0wii] {
        flex: 1;
    }

/* Language field - less prominent */
.language-field[b-gakbtw0wii] {
    max-width: 200px;
}

/* =========================
   PHONE INPUT ROW
   ========================= */

.phone-input-row[b-gakbtw0wii] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 0;
}

.phone-country-code-container[b-gakbtw0wii] {
    flex: 0 0 140px;
}

.phone-number-input-container[b-gakbtw0wii] {
    flex: 1;
    min-width: 0;
}

/* Country Selector Button */
.profile-container .selected-country[b-gakbtw0wii] {
    width: 100%;
    min-height: 56px;
    padding: 12px 16px;
    font-size: 15px;
    border: 1.5px solid var(--brand-blue, #2963A8);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

    .profile-container .selected-country:hover[b-gakbtw0wii] {
        border-color: var(--brand-blue-dark, #102B5B);
    }

    .profile-container .selected-country:focus[b-gakbtw0wii] {
        outline: none;
        border-color: var(--brand-blue, #2963A8);
        box-shadow: 0 0 0 3px rgba(41, 99, 168, 0.1);
    }

.flag-emoji[b-gakbtw0wii] {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
    margin: 0;
}

.dial-code[b-gakbtw0wii] {
    font-size: 15px;
    color: var(--text-primary, var(--brand-blue-dark, #102B5B));
    font-weight: 600;
    line-height: 1;
    margin: 0;
}

.chevron[b-gakbtw0wii] {
    margin-left: auto;
    color: #6c757d;
    font-size: 14px;
    line-height: 1;
}

/* =========================
   EMAIL READONLY FIELD
   ========================= */

.email-readonly-field[b-gakbtw0wii] {
    position: relative;
}

    .email-readonly-field .email-readonly[b-gakbtw0wii] {
        background-color: #f5f5f5 !important;
        cursor: not-allowed;
        padding-right: 45px;
    }

.field-lock-icon[b-gakbtw0wii] {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    font-size: 18px;
}

.email-change-link[b-gakbtw0wii] {
    margin-top: -16px;
    margin-bottom: 16px;
    padding-left: 14px;
}

    .email-change-link a[b-gakbtw0wii] {
        color: var(--brand-blue, #2963A8);
        text-decoration: none;
        font-size: 13px;
    }

        .email-change-link a:hover[b-gakbtw0wii] {
            text-decoration: underline;
        }

    .email-change-link[b-gakbtw0wii]  .rz-icon {
        font-size: 12px;
        vertical-align: middle;
    }

/* =========================
   PASSWORD FIELDS
   ========================= */

.password-input-wrapper[b-gakbtw0wii] {
    position: relative;
    width: 100%;
}

    .password-input-wrapper .float-input.form-control[b-gakbtw0wii] {
        padding-right: 50px;
    }

.password-toggle-btn[b-gakbtw0wii] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    z-index: 10;
    border-radius: 4px;
    transition: background-color 0.15s ease;
}

    .password-toggle-btn:hover[b-gakbtw0wii] {
        background-color: rgba(0, 0, 0, 0.05);
    }

    .password-toggle-btn i[b-gakbtw0wii] {
        font-size: 1.2rem;
        pointer-events: none;
    }

.password-hint[b-gakbtw0wii] {
    display: block;
    margin-top: -16px;
    margin-bottom: 20px;
    font-size: 13px;
    color: #6c757d;
    padding-left: 14px;
}

/* =========================
   CHECKBOXES
   ========================= */

.form-check[b-gakbtw0wii] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.form-check-input[b-gakbtw0wii] {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--brand-blue, #2963A8);
}

.form-check-icon[b-gakbtw0wii] {
    color: var(--brand-blue, #2963A8);
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.form-check-content[b-gakbtw0wii] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-check-label[b-gakbtw0wii] {
    font-weight: 600;
    color: var(--text-primary, var(--brand-blue-dark, #102B5B));
    cursor: pointer;
    margin: 0;
    font-size: 15px;
}

.form-check-content small[b-gakbtw0wii] {
    color: #6c757d;
    font-size: 13px;
    font-weight: 400;
}

/* Terms checkbox - highlight required */
.terms-check[b-gakbtw0wii] {
    border: 1px solid var(--brand-blue, #2963A8);
    background: #f0f7ff;
}

    .terms-check a[b-gakbtw0wii] {
        color: var(--brand-blue, #2963A8);
        text-decoration: underline;
    }

        .terms-check a:hover[b-gakbtw0wii] {
            color: var(--brand-blue-dark, #102B5B);
        }

/* reCAPTCHA */
.recaptcha-container[b-gakbtw0wii] {
    margin-top: 16px;
    margin-bottom: 8px;
}

/* =========================
   BUTTONS
   ========================= */

.button-row[b-gakbtw0wii] {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.btn-close-profile[b-gakbtw0wii] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    min-width: 100px;
    font-size: 15px;
    font-weight: 500;
    color: #333;
    background-color: #e9ecef;
    border: 1px solid #dee2e6;
    border-radius: 25px;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

    .btn-close-profile:hover[b-gakbtw0wii] {
        background-color: #dee2e6;
        border-color: #ced4da;
    }

    .btn-close-profile[b-gakbtw0wii]  .rz-icon {
        font-size: 18px;
    }

.btn-save-profile[b-gakbtw0wii] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    font-size: 16px;
    font-weight: 600;
    color: white;
    background-color: var(--brand-gold, #CCA433);
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

    .btn-save-profile:hover:not(:disabled)[b-gakbtw0wii] {
        background-color: #b89330;
    }

    .btn-save-profile:disabled[b-gakbtw0wii] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .btn-save-profile.saving[b-gakbtw0wii] {
        opacity: 0.8;
    }

    .btn-save-profile[b-gakbtw0wii]  .rz-icon {
        font-size: 20px;
    }

    .btn-save-profile[b-gakbtw0wii]  .rz-progressbar-circular {
        width: 20px !important;
        height: 20px !important;
    }

/* =========================
   PROFILE LINKS
   ========================= */

.profile-links-row[b-gakbtw0wii] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.change-password-link[b-gakbtw0wii] {
    color: var(--brand-blue, #2963A8);
    text-decoration: none;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

    .change-password-link:hover[b-gakbtw0wii] {
        text-decoration: underline;
        color: var(--brand-blue-dark, #102B5B);
    }

    .change-password-link[b-gakbtw0wii]  .rz-icon {
        font-size: 14px;
    }

.delete-link[b-gakbtw0wii] {
    color: #c0392b;
    text-decoration: none;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

    .delete-link:hover[b-gakbtw0wii] {
        text-decoration: underline;
        color: #a93226;
    }

    .delete-link[b-gakbtw0wii]  .rz-icon {
        font-size: 14px;
    }

.login-link-row[b-gakbtw0wii] {
    text-align: center;
}

    .login-link-row p[b-gakbtw0wii] {
        margin: 0;
        font-size: 14px;
        color: #6c757d;
    }

    .login-link-row a[b-gakbtw0wii] {
        color: var(--brand-blue, #2963A8);
        text-decoration: none;
        font-weight: 500;
    }

        .login-link-row a:hover[b-gakbtw0wii] {
            text-decoration: underline;
        }

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

@media (max-width: 768px) {
    .profile-container[b-gakbtw0wii] {
        padding: 16px;
    }

    .name-row[b-gakbtw0wii],
    .settings-row[b-gakbtw0wii] {
        flex-direction: column;
        gap: 0;
    }

    .language-field[b-gakbtw0wii] {
        max-width: 100%;
    }

    .phone-input-row[b-gakbtw0wii] {
        gap: 10px;
    }

    .phone-country-code-container[b-gakbtw0wii] {
        flex: 0 0 120px;
    }

    .profile-container .float-input.form-control[b-gakbtw0wii] {
        min-height: 52px;
        padding: 22px 10px 8px 10px;
        font-size: 14px;
    }

    .profile-container .float-label[b-gakbtw0wii] {
        left: 10px;
        font-size: 14px;
    }

    .profile-container .float-input:focus + .float-label[b-gakbtw0wii],
    .profile-container .float-field.has-value .float-label[b-gakbtw0wii],
    .profile-container .float-field.always-float .float-label[b-gakbtw0wii] {
        font-size: 11px;
        left: 16px;
    }

    .profile-container .selected-country[b-gakbtw0wii] {
        min-height: 52px;
        padding: 10px 14px;
    }

    .form-check[b-gakbtw0wii] {
        padding: 12px;
    }

    .button-row[b-gakbtw0wii] {
        flex-direction: column;
        gap: 10px;
    }

    .btn-close-profile[b-gakbtw0wii] {
        width: 100%;
    }

    .btn-save-profile[b-gakbtw0wii] {
        width: 100%;
    }

    .profile-links-row[b-gakbtw0wii] {
        justify-content: center;
        gap: 20px;
    }
}

/* Very Small Screens */
@media (max-width: 360px) {
    .phone-input-row[b-gakbtw0wii] {
        flex-direction: column;
        gap: 0;
    }

    .phone-country-code-container[b-gakbtw0wii] {
        flex: 1 1 auto;
        width: 100%;
    }

        .phone-country-code-container .float-field[b-gakbtw0wii] {
            margin-bottom: 22px;
        }

    .phone-number-input-container[b-gakbtw0wii] {
        flex: 1 1 auto;
        width: 100%;
    }
}

/* =========================
   ALERT STYLING
   ========================= */

.alert-warning[b-gakbtw0wii] {
    padding: 16px;
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 8px;
    color: #856404;
    text-align: center;
}
/* /Components/RecentGuestBookings.razor.rz.scp.css */
/* ===============================
   Recent Guest Bookings Container
   =============================== */
.recent-bookings-container[b-efif6icm4b] {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 16px;
    margin: 20px auto;
    max-width: 600px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* ===============================
   Header
   =============================== */
.recent-bookings-header[b-efif6icm4b] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e9ecef;
}

.header-title[b-efif6icm4b] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .header-title h3[b-efif6icm4b] {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
        color: var(--brand-blue-dark, #0a2b56);
    }

    .header-title[b-efif6icm4b]  .rzi {
        font-size: 1.25rem;
        color: var(--brand-blue, var(--brand-blue));
    }

.session-note[b-efif6icm4b] {
    font-size: 0.75rem;
    color: #6c757d;
    font-style: italic;
}

/* ===============================
   Bookings List
   =============================== */
.bookings-list[b-efif6icm4b] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ===============================
   Booking Card
   =============================== */
.booking-card[b-efif6icm4b] {
    display: flex;
    align-items: center;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

    .booking-card:hover[b-efif6icm4b] {
        background: #e8f4fd;
        border-color: var(--brand-blue, var(--brand-blue));
    }

.booking-main[b-efif6icm4b] {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 16px;
    min-width: 0;
}

/* Date/Time Column */
.booking-datetime[b-efif6icm4b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
    padding-right: 12px;
    border-right: 1px solid #dee2e6;
}

.booking-date[b-efif6icm4b] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--brand-blue-dark, #0a2b56);
}

.booking-time[b-efif6icm4b] {
    font-size: 0.75rem;
    color: #6c757d;
}

/* Details Column */
.booking-details[b-efif6icm4b] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.booking-service[b-efif6icm4b] {
    font-size: 0.95rem;
    font-weight: 500;
    color: #333;
}

.booking-meta[b-efif6icm4b] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.8rem;
    color: #6c757d;
}

.booking-direction[b-efif6icm4b] {
    color: var(--brand-blue, var(--brand-blue));
}

.booking-confirm[b-efif6icm4b] {
    font-family: monospace;
    background: #e9ecef;
    padding: 2px 6px;
    border-radius: 4px;
}

/* Action Arrow */
.booking-action[b-efif6icm4b] {
    margin-left: 8px;
    color: #adb5bd;
    transition: color 0.2s ease;
}

    .booking-action[b-efif6icm4b]  .rzi {
        font-size: 1.25rem;
    }

.booking-card:hover .booking-action[b-efif6icm4b] {
    color: var(--brand-blue, var(--brand-blue));
}

/* ===============================
   Link Account CTA
   =============================== */
.link-account-cta[b-efif6icm4b] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e9ecef;
    font-size: 0.85rem;
    color: #6c757d;
}

    .link-account-cta[b-efif6icm4b]  .rzi {
        font-size: 1rem;
        color: var(--brand-gold, var(--brand-gold));
    }

    .link-account-cta span[b-efif6icm4b] {
        line-height: 1.4;
    }

/* ===============================
   Mobile Responsive
   =============================== */
@media (max-width: 480px) {
    .recent-bookings-header[b-efif6icm4b] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .booking-datetime[b-efif6icm4b] {
        min-width: 70px;
    }

    .booking-meta[b-efif6icm4b] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .link-account-cta[b-efif6icm4b] {
        flex-direction: column;
        text-align: center;
        gap: 4px;
    }
}
/* /Components/ReservationEdit/EditDateTimeDialog.razor.rz.scp.css */
/* =========================
   EditDateTimeDialog
   Single-screen editor for flight and pickup times
   ========================= */

.edit-dialog-content[b-xq1q5zts3k] {
    padding: 0;
}

.edit-dialog-body[b-xq1q5zts3k] {
    padding: 16px;
}

/* Error Message */
.error-message[b-xq1q5zts3k] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #dc2626;
    font-size: 14px;
}

    .error-message i[b-xq1q5zts3k] {
        font-size: 16px;
        flex-shrink: 0;
    }

/* =========================
   DateTime Field
   ========================= */
.datetime-field[b-xq1q5zts3k] {
    margin-bottom: 12px;
}

.field-label[b-xq1q5zts3k] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    margin-bottom: 8px;
}

    .field-label i[b-xq1q5zts3k] {
        font-size: 14px;
        color: var(--brand-blue, #2963a8);
    }

/* =========================
   Sync Hint
   ========================= */
.sync-hint[b-xq1q5zts3k] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
    background-color: #f0f7ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    color: #1e40af;
    font-size: 12px;
    line-height: 1.4;
}

    .sync-hint i[b-xq1q5zts3k] {
        font-size: 14px;
        flex-shrink: 0;
        margin-top: 2px;
        color: var(--brand-blue, #2963a8);
    }

/* =========================
   Time Section (Flight / Pickup)
   ========================= */
.time-section[b-xq1q5zts3k] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 12px;
}

    .time-section:last-of-type[b-xq1q5zts3k] {
        margin-bottom: 0;
    }

.time-section-header[b-xq1q5zts3k] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

/* Simple inline icon for section headers */
.section-icon[b-xq1q5zts3k] {
    font-size: 1.1rem !important;
    flex-shrink: 0;
}

    .section-icon.flight-icon[b-xq1q5zts3k] {
        color: #4285F4;
    }

    .section-icon.pickup-icon[b-xq1q5zts3k] {
        color: #34A853;
    }

.time-section-title[b-xq1q5zts3k] {
    font-size: 14px;
    font-weight: 600;
    color: var(--brand-blue-dark, #0a2b56);
}

.time-section-subtitle[b-xq1q5zts3k] {
    font-size: 11px;
    color: #64748b;
    margin-left: 4px;
}

    .time-section-subtitle.day-offset[b-xq1q5zts3k] {
        color: #d97706;
        font-weight: 500;
    }

/* Pickup delta display (below pickup time) */
.pickup-delta[b-xq1q5zts3k] {
    margin-top: 8px;
    padding: 6px 10px;
    background: #f0f7ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--brand-blue, #2963a8);
    text-align: center;
}

/* =========================
   Time Control with +/- buttons
   ========================= */
.time-control[b-xq1q5zts3k] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.time-adjust-btn[b-xq1q5zts3k] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 2px solid var(--brand-blue, #2963a8);
    border-radius: 50%;
    background: white;
    color: var(--brand-blue, #2963a8);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    touch-action: manipulation; /* Prevent double-tap zoom on mobile */
    user-select: none; /* Prevent text selection on rapid clicks */
    -webkit-user-select: none;
}

    .time-adjust-btn:hover:not(:disabled)[b-xq1q5zts3k] {
        background: var(--brand-blue, #2963a8);
        color: white;
    }

    .time-adjust-btn:active:not(:disabled)[b-xq1q5zts3k] {
        transform: scale(0.95);
    }

    .time-adjust-btn:disabled[b-xq1q5zts3k] {
        border-color: #cbd5e1;
        color: #cbd5e1;
        cursor: not-allowed;
        opacity: 0.6;
    }

    .time-adjust-btn i[b-xq1q5zts3k] {
        font-size: 12px;
    }

/* Time Display Button */
.time-display[b-xq1q5zts3k] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: white;
    color: var(--brand-blue-dark, #0a2b56);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    touch-action: manipulation; /* Prevent double-tap zoom on mobile */
    user-select: none;
    -webkit-user-select: none;
}

    .time-display:hover:not(:disabled)[b-xq1q5zts3k] {
        border-color: var(--brand-blue, #2963a8);
        background: #f0f7ff;
    }

    .time-display:disabled[b-xq1q5zts3k] {
        cursor: not-allowed;
        opacity: 0.6;
    }

/* =========================
   Dialog Footer
   ========================= */
.edit-dialog-footer[b-xq1q5zts3k] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #e0e0e0;
    background-color: #fafafa;
}

    .edit-dialog-footer[b-xq1q5zts3k]  .rz-button.rz-light {
        background: white;
        color: var(--brand-blue, #2963a8);
        border: 1px solid var(--brand-blue, #2963a8);
        font-weight: 500;
    }

        .edit-dialog-footer[b-xq1q5zts3k]  .rz-button.rz-light:hover {
            background: var(--brand-blue, #2963a8);
            color: white;
        }

/* RadzenDatePicker styling */
.datetime-field[b-xq1q5zts3k]  .rz-datepicker {
    width: 100%;
}

    .datetime-field[b-xq1q5zts3k]  .rz-datepicker .rz-inputtext {
        width: 100%;
        height: 44px;
        font-size: 15px;
        border-radius: 8px;
    }

/* =========================
   Responsive adjustments
   ========================= */
@media (max-width: 480px) {
    .edit-dialog-body[b-xq1q5zts3k] {
        padding: 14px;
    }

    .time-section[b-xq1q5zts3k] {
        padding: 10px;
    }

    .time-section-title[b-xq1q5zts3k] {
        font-size: 13px;
    }

    .time-adjust-btn[b-xq1q5zts3k] {
        width: 32px;
        height: 32px;
    }

    .time-display[b-xq1q5zts3k] {
        height: 36px;
        font-size: 15px;
    }

    .field-label[b-xq1q5zts3k] {
        font-size: 12px;
    }

    .sync-hint[b-xq1q5zts3k] {
        font-size: 11px;
        padding: 8px 10px;
    }

    .pickup-delta[b-xq1q5zts3k] {
        font-size: 11px;
        padding: 5px 8px;
    }
}
/* /Components/ReservationEdit/EditEmailDialog.razor.rz.scp.css */
/* =========================
   EditEmailDialog
   Floating labels matching PassengerContactInfoComponent style
   ========================= */

.edit-dialog-content[b-sjm6ajb5ks] {
    padding: 0;
}

.edit-dialog-body[b-sjm6ajb5ks] {
    padding: 20px;
}

/* Error Message */
.error-message[b-sjm6ajb5ks] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #dc2626;
    font-size: 14px;
}

    .error-message i[b-sjm6ajb5ks] {
        font-size: 16px;
        flex-shrink: 0;
    }

/* Disabled state */
.float-input:disabled[b-sjm6ajb5ks] {
    background-color: #f5f5f5;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Float Field Container */
.float-field[b-sjm6ajb5ks] {
    position: relative;
    width: 100%;
    margin-bottom: 0;
}

/* Input Fields */
.float-input[b-sjm6ajb5ks] {
    width: 100%;
    height: auto;
    min-height: 56px;
    padding: 24px 14px 10px 14px;
    font-size: 16px;
    line-height: 1.45;
    color: var(--text-primary, var(--brand-blue-dark));
    border: 1.5px solid var(--brand-blue, var(--brand-blue));
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .float-input:focus[b-sjm6ajb5ks] {
        border-color: var(--brand-blue, var(--brand-blue));
        box-shadow: 0 0 0 3px rgba(41, 99, 168, 0.1);
        outline: none;
    }

    .float-input[b-sjm6ajb5ks]::placeholder {
        color: transparent;
        opacity: 0;
    }

/* Floating Label */
.float-label[b-sjm6ajb5ks] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    color: var(--hint-text, #999999);
    background: #fff;
    padding: 0 4px;
    pointer-events: none;
    transition: top 0.18s ease, font-size 0.18s ease, transform 0.18s ease, color 0.18s ease;
    z-index: 1;
}

/* Float label up when field has focus or value */
.float-input:focus + .float-label[b-sjm6ajb5ks],
.float-field.has-value .float-label[b-sjm6ajb5ks] {
    top: 0;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--brand-blue, var(--brand-blue));
    font-weight: 500;
}

/* Invalid state */
.float-field.invalid .float-input[b-sjm6ajb5ks] {
    border-color: #dc3545;
}

.float-field.invalid .float-label[b-sjm6ajb5ks] {
    color: #dc3545;
}

.field-error[b-sjm6ajb5ks] {
    display: block;
    color: #dc3545;
    font-size: 12px;
    margin-top: 4px;
    padding-left: 14px;
}

/* Dialog Footer */
.edit-dialog-footer[b-sjm6ajb5ks] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #e0e0e0;
    background-color: #fafafa;
}

    .edit-dialog-footer[b-sjm6ajb5ks]  .rz-button.rz-light {
        background: white;
        color: var(--brand-blue, var(--brand-blue));
        border: 1px solid var(--brand-blue, var(--brand-blue));
        font-weight: 500;
    }

        .edit-dialog-footer[b-sjm6ajb5ks]  .rz-button.rz-light:hover {
            background: var(--brand-blue, var(--brand-blue));
            color: white;
        }
/* /Components/ReservationEdit/EditFlightNumberDialog.razor.rz.scp.css */
/* =========================
   EditFlightNumberDialog
   Floating labels matching PassengerContactInfoComponent style
   ========================= */

.edit-dialog-content[b-1gfregxgs3] {
    padding: 0;
}

.edit-dialog-body[b-1gfregxgs3] {
    padding: 20px;
}

/* Error Message */
.error-message[b-1gfregxgs3] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #dc2626;
    font-size: 14px;
}

    .error-message i[b-1gfregxgs3] {
        font-size: 16px;
        flex-shrink: 0;
    }

/* Airline Context Display */
.airline-context[b-1gfregxgs3] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    background-color: #f0f7ff;
    border: 1px solid #b3d4fc;
    border-radius: 8px;
    color: var(--brand-blue, #2963A8);
    font-size: 14px;
    font-weight: 500;
}

    .airline-context i[b-1gfregxgs3] {
        font-size: 16px;
        flex-shrink: 0;
    }

/* Disabled state */
.float-input:disabled[b-1gfregxgs3] {
    background-color: #f5f5f5;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Disabled field container */
.float-field.disabled .float-label[b-1gfregxgs3] {
    color: #999;
    background: #f5f5f5;
}

/* Float Field Container */
.float-field[b-1gfregxgs3] {
    position: relative;
    width: 100%;
    margin-bottom: 20px;
}

    .float-field:last-child[b-1gfregxgs3] {
        margin-bottom: 0;
    }

/* Input Fields */
.float-input[b-1gfregxgs3] {
    width: 100%;
    height: auto;
    min-height: 56px;
    padding: 24px 14px 10px 14px;
    font-size: 16px;
    line-height: 1.45;
    color: var(--text-primary, var(--brand-blue-dark));
    border: 1.5px solid var(--brand-blue, var(--brand-blue));
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .float-input:focus[b-1gfregxgs3] {
        border-color: var(--brand-blue, var(--brand-blue));
        box-shadow: 0 0 0 3px rgba(41, 99, 168, 0.1);
        outline: none;
    }

    .float-input[b-1gfregxgs3]::placeholder {
        color: transparent;
        opacity: 0;
    }

/* Floating Label */
.float-label[b-1gfregxgs3] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    color: var(--hint-text, #999999);
    background: #fff;
    padding: 0 4px;
    pointer-events: none;
    transition: top 0.18s ease, font-size 0.18s ease, transform 0.18s ease, color 0.18s ease;
    z-index: 1;
}

/* Float label up when field has focus or value */
.float-input:focus + .float-label[b-1gfregxgs3],
.float-field.has-value .float-label[b-1gfregxgs3] {
    top: 0;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--brand-blue, var(--brand-blue));
    font-weight: 500;
}

/* Invalid state */
.float-field.invalid .float-input[b-1gfregxgs3] {
    border-color: #dc3545;
}

.float-field.invalid .float-label[b-1gfregxgs3] {
    color: #dc3545;
}

.field-error[b-1gfregxgs3] {
    display: block;
    color: #dc3545;
    font-size: 12px;
    margin-top: 4px;
    padding-left: 14px;
}

/* No Flight Checkbox Option */
.no-flight-option[b-1gfregxgs3] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
}

    .no-flight-option input[type="checkbox"][b-1gfregxgs3] {
        width: 18px;
        height: 18px;
        accent-color: var(--brand-blue, #2963A8);
        cursor: pointer;
        flex-shrink: 0;
    }

    .no-flight-option label[b-1gfregxgs3] {
        font-size: 14px;
        color: #555;
        cursor: pointer;
    }

    .no-flight-option input[type="checkbox"]:disabled[b-1gfregxgs3] {
        cursor: not-allowed;
        opacity: 0.6;
    }

    .no-flight-option input[type="checkbox"]:disabled + label[b-1gfregxgs3] {
        cursor: not-allowed;
        opacity: 0.6;
    }

/* Dialog Footer */
.edit-dialog-footer[b-1gfregxgs3] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #e0e0e0;
    background-color: #fafafa;
}

    .edit-dialog-footer[b-1gfregxgs3]  .rz-button.rz-light {
        background: white;
        color: var(--brand-blue, var(--brand-blue));
        border: 1px solid var(--brand-blue, var(--brand-blue));
        font-weight: 500;
    }

        .edit-dialog-footer[b-1gfregxgs3]  .rz-button.rz-light:hover {
            background: var(--brand-blue, var(--brand-blue));
            color: white;
        }
/* /Components/ReservationEdit/EditNameDialog.razor.rz.scp.css */
/* =========================
   EditNameDialog
   Floating labels matching PassengerContactInfoComponent style
   ========================= */

.edit-dialog-content[b-j7mqrxiu73] {
    padding: 0;
}

.edit-dialog-body[b-j7mqrxiu73] {
    padding: 20px;
}

/* Error Message */
.error-message[b-j7mqrxiu73] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #dc2626;
    font-size: 14px;
}

    .error-message i[b-j7mqrxiu73] {
        font-size: 16px;
        flex-shrink: 0;
    }

/* Disabled state */
.float-input:disabled[b-j7mqrxiu73] {
    background-color: #f5f5f5;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Float Field Container */
.float-field[b-j7mqrxiu73] {
    position: relative;
    width: 100%;
    margin-bottom: 20px;
}

    .float-field:last-child[b-j7mqrxiu73] {
        margin-bottom: 0;
    }

/* Input Fields */
.float-input[b-j7mqrxiu73] {
    width: 100%;
    height: auto;
    min-height: 56px;
    padding: 24px 14px 10px 14px;
    font-size: 16px;
    line-height: 1.45;
    color: var(--text-primary, var(--brand-blue-dark));
    border: 1.5px solid var(--brand-blue, var(--brand-blue));
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .float-input:focus[b-j7mqrxiu73] {
        border-color: var(--brand-blue, var(--brand-blue));
        box-shadow: 0 0 0 3px rgba(41, 99, 168, 0.1);
        outline: none;
    }

    .float-input[b-j7mqrxiu73]::placeholder {
        color: transparent;
        opacity: 0;
    }

/* Floating Label */
.float-label[b-j7mqrxiu73] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    color: var(--hint-text, #999999);
    background: #fff;
    padding: 0 4px;
    pointer-events: none;
    transition: top 0.18s ease, font-size 0.18s ease, transform 0.18s ease, color 0.18s ease;
    z-index: 1;
}

/* Float label up when field has focus or value */
.float-input:focus + .float-label[b-j7mqrxiu73],
.float-field.has-value .float-label[b-j7mqrxiu73] {
    top: 0;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--brand-blue, var(--brand-blue));
    font-weight: 500;
}

/* Invalid state */
.float-field.invalid .float-input[b-j7mqrxiu73] {
    border-color: #dc3545;
}

.float-field.invalid .float-label[b-j7mqrxiu73] {
    color: #dc3545;
}

.field-error[b-j7mqrxiu73] {
    display: block;
    color: #dc3545;
    font-size: 12px;
    margin-top: 4px;
    padding-left: 14px;
}

/* Dialog Footer */
.edit-dialog-footer[b-j7mqrxiu73] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #e0e0e0;
    background-color: #fafafa;
}

    .edit-dialog-footer[b-j7mqrxiu73]  .rz-button.rz-light {
        background: white;
        color: var(--brand-blue, var(--brand-blue));
        border: 1px solid var(--brand-blue, var(--brand-blue));
        font-weight: 500;
    }

        .edit-dialog-footer[b-j7mqrxiu73]  .rz-button.rz-light:hover {
            background: var(--brand-blue, var(--brand-blue));
            color: white;
        }
/* /Components/ReservationEdit/EditPassengersBagsDialog.razor.rz.scp.css */
/* =========================
   EditPassengersBagsDialog
   Counter controls for passengers and bags
   ========================= */

.edit-dialog-content[b-cz1fiu1p0n] {
    padding: 0;
}

.edit-dialog-body[b-cz1fiu1p0n] {
    padding: 20px;
}

/* Error Message */
.error-message[b-cz1fiu1p0n] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #dc2626;
    font-size: 14px;
}

    .error-message i[b-cz1fiu1p0n] {
        font-size: 16px;
        flex-shrink: 0;
    }

/* Counter Field */
.counter-field[b-cz1fiu1p0n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    margin-bottom: 16px;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

    .counter-field:last-of-type[b-cz1fiu1p0n] {
        margin-bottom: 0;
    }

.counter-label[b-cz1fiu1p0n] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary, var(--brand-blue-dark));
}

    .counter-label i[b-cz1fiu1p0n] {
        font-size: 18px;
        color: var(--brand-blue, var(--brand-blue));
        width: 24px;
        text-align: center;
    }

.counter-controls[b-cz1fiu1p0n] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.counter-btn[b-cz1fiu1p0n] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 2px solid var(--brand-blue, var(--brand-blue));
    border-radius: 50%;
    background: white;
    color: var(--brand-blue, var(--brand-blue));
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .counter-btn:hover:not(:disabled)[b-cz1fiu1p0n] {
        background: var(--brand-blue, var(--brand-blue));
        color: white;
    }

    .counter-btn:active:not(:disabled)[b-cz1fiu1p0n] {
        transform: scale(0.95);
    }

    .counter-btn:disabled[b-cz1fiu1p0n] {
        border-color: #cbd5e1;
        color: #cbd5e1;
        cursor: not-allowed;
        opacity: 0.6;
    }

    .counter-btn i[b-cz1fiu1p0n] {
        font-size: 14px;
    }

.counter-value[b-cz1fiu1p0n] {
    min-width: 40px;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary, var(--brand-blue-dark));
}

.counter-hint[b-cz1fiu1p0n] {
    font-size: 12px;
    color: var(--hint-text, #999999);
    margin-left: 16px;
    white-space: nowrap;
}

.calc-hint[b-cz1fiu1p0n] {
    font-style: italic;
    margin-left: 4px;
}

/* Disabled field state (per-person pricing) */
.counter-field.disabled-field[b-cz1fiu1p0n] {
    background-color: #f1f5f9;
    opacity: 0.7;
}

    .counter-field.disabled-field .counter-label[b-cz1fiu1p0n] {
        color: #64748b;
    }

        .counter-field.disabled-field .counter-label i[b-cz1fiu1p0n] {
            color: #94a3b8;
        }

    .counter-field.disabled-field .counter-value[b-cz1fiu1p0n] {
        color: #64748b;
    }

.locked-hint[b-cz1fiu1p0n] {
    color: #ef4444;
    font-weight: 500;
}

/* Vehicle Capacity Note */
.vehicle-capacity-note[b-cz1fiu1p0n] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 14px;
    margin-top: 16px;
    background-color: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 8px;
    color: #0369a1;
    font-size: 13px;
    line-height: 1.4;
}

    .vehicle-capacity-note i[b-cz1fiu1p0n] {
        font-size: 14px;
        flex-shrink: 0;
        margin-top: 1px;
    }

/* Dialog Footer */
.edit-dialog-footer[b-cz1fiu1p0n] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #e0e0e0;
    background-color: #fafafa;
}

    .edit-dialog-footer[b-cz1fiu1p0n]  .rz-button.rz-light {
        background: white;
        color: var(--brand-blue, var(--brand-blue));
        border: 1px solid var(--brand-blue, var(--brand-blue));
        font-weight: 500;
    }

        .edit-dialog-footer[b-cz1fiu1p0n]  .rz-button.rz-light:hover {
            background: var(--brand-blue, var(--brand-blue));
            color: white;
        }

/* Responsive adjustments */
@media (max-width: 480px) {
    .counter-field[b-cz1fiu1p0n] {
        flex-wrap: wrap;
        gap: 12px;
    }

    .counter-label[b-cz1fiu1p0n] {
        flex: 1 1 100%;
    }

    .counter-controls[b-cz1fiu1p0n] {
        flex: 1;
        justify-content: center;
    }

    .counter-hint[b-cz1fiu1p0n] {
        flex: 1 1 100%;
        text-align: center;
        margin-left: 0;
        margin-top: 4px;
    }
}
/* /Components/ReservationEdit/EditPhoneDialog.razor.rz.scp.css */
/* =========================
   EditPhoneDialog
   Floating labels matching PassengerContactInfoComponent style
   ========================= */

.edit-dialog-content[b-h0j195xfhf] {
    padding: 0;
}

.edit-dialog-body[b-h0j195xfhf] {
    padding: 20px;
}

/* Error Message */
.error-message[b-h0j195xfhf] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #dc2626;
    font-size: 14px;
}

    .error-message i[b-h0j195xfhf] {
        font-size: 16px;
        flex-shrink: 0;
    }

/* Phone Input Row */
.phone-input-row[b-h0j195xfhf] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.phone-country-code-container[b-h0j195xfhf] {
    flex: 0 0 140px;
}

.phone-number-input-container[b-h0j195xfhf] {
    flex: 1;
}

/* Float Field Container */
.float-field[b-h0j195xfhf] {
    position: relative;
    width: 100%;
    margin-bottom: 0;
}

/* Input Fields */
.float-input[b-h0j195xfhf] {
    width: 100%;
    height: auto;
    min-height: 56px;
    padding: 24px 14px 10px 14px;
    font-size: 16px;
    line-height: 1.45;
    color: var(--text-primary, var(--brand-blue-dark));
    border: 1.5px solid var(--brand-blue, var(--brand-blue));
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .float-input:focus[b-h0j195xfhf] {
        border-color: var(--brand-blue, var(--brand-blue));
        box-shadow: 0 0 0 3px rgba(41, 99, 168, 0.1);
        outline: none;
    }

    .float-input[b-h0j195xfhf]::placeholder {
        color: transparent;
        opacity: 0;
    }

/* Disabled state */
.float-input:disabled[b-h0j195xfhf] {
    background-color: #f5f5f5;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Floating Label */
.float-label[b-h0j195xfhf] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    color: var(--hint-text, #999999);
    background: #fff;
    padding: 0 4px;
    pointer-events: none;
    transition: top 0.18s ease, font-size 0.18s ease, transform 0.18s ease, color 0.18s ease;
    z-index: 1;
}

/* Float label up when field has focus or value */
.float-input:focus + .float-label[b-h0j195xfhf],
.float-field.has-value .float-label[b-h0j195xfhf] {
    top: 0;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--brand-blue, var(--brand-blue));
    font-weight: 500;
}

/* Always float for country selector */
.float-field.always-float .float-label[b-h0j195xfhf] {
    top: 0;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--brand-blue, var(--brand-blue));
    font-weight: 500;
}

/* Invalid state */
.float-field.invalid .float-input[b-h0j195xfhf],
.float-field.invalid .selected-country[b-h0j195xfhf] {
    border-color: #dc3545;
}

.float-field.invalid .float-label[b-h0j195xfhf] {
    color: #dc3545;
}

.field-error[b-h0j195xfhf] {
    display: block;
    color: #dc3545;
    font-size: 12px;
    margin-top: 4px;
    padding-left: 14px;
}

/* Country Selector */
.selected-country[b-h0j195xfhf] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 56px;
    padding: 24px 10px 10px 14px;
    font-size: 15px;
    color: var(--text-primary, var(--brand-blue-dark));
    border: 1.5px solid var(--brand-blue, var(--brand-blue));
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .selected-country:hover:not(.disabled)[b-h0j195xfhf] {
        border-color: var(--brand-blue, var(--brand-blue));
        box-shadow: 0 0 0 3px rgba(41, 99, 168, 0.1);
    }

    .selected-country.disabled[b-h0j195xfhf] {
        background-color: #f5f5f5;
        cursor: not-allowed;
        opacity: 0.7;
    }

.flag-emoji[b-h0j195xfhf] {
    font-size: 20px;
    line-height: 1;
}

.dial-code[b-h0j195xfhf] {
    font-size: 14px;
    color: var(--text-primary, var(--brand-blue-dark));
}

.chevron[b-h0j195xfhf] {
    margin-left: auto;
    font-size: 12px;
    color: #666;
}

/* Dialog Footer */
.edit-dialog-footer[b-h0j195xfhf] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #e0e0e0;
    background-color: #fafafa;
}

    .edit-dialog-footer[b-h0j195xfhf]  .rz-button.rz-light {
        background: white;
        color: var(--brand-blue, var(--brand-blue));
        border: 1px solid var(--brand-blue, var(--brand-blue));
        font-weight: 500;
    }

        .edit-dialog-footer[b-h0j195xfhf]  .rz-button.rz-light:hover {
            background: var(--brand-blue, var(--brand-blue));
            color: white;
        }
/* /Components/ReservationEdit/EditSpecialInfoDialog.razor.rz.scp.css */
/* =========================
   EditSpecialInfoDialog
   ========================= */

.edit-dialog-content[b-u7845zgbjk] {
    padding: 0;
}

.edit-dialog-body[b-u7845zgbjk] {
    padding: 20px;
}

/* Error Message */
.error-message[b-u7845zgbjk] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #dc2626;
    font-size: 14px;
}

    .error-message i[b-u7845zgbjk] {
        font-size: 16px;
        flex-shrink: 0;
    }

/* Info Hint */
.info-hint[b-u7845zgbjk] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    background-color: #f0f7ff;
    border: 1px solid #b3d4fc;
    border-radius: 8px;
    color: #555;
    font-size: 13px;
    line-height: 1.4;
}

    .info-hint i[b-u7845zgbjk] {
        font-size: 14px;
        color: var(--brand-blue, #2963A8);
        flex-shrink: 0;
        margin-top: 2px;
    }

/* Textarea Field Container */
.textarea-field[b-u7845zgbjk] {
    position: relative;
    width: 100%;
}

/* Textarea Input */
.textarea-input[b-u7845zgbjk] {
    width: 100%;
    min-height: 120px;
    padding: 24px 14px 10px 14px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-primary, #333);
    border: 1.5px solid var(--brand-blue, #2963A8);
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
    resize: vertical;
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .textarea-input:focus[b-u7845zgbjk] {
        border-color: var(--brand-blue, #2963A8);
        box-shadow: 0 0 0 3px rgba(41, 99, 168, 0.1);
        outline: none;
    }

    .textarea-input[b-u7845zgbjk]::placeholder {
        color: transparent;
        opacity: 0;
    }

    .textarea-input:disabled[b-u7845zgbjk] {
        background-color: #f5f5f5;
        cursor: not-allowed;
        opacity: 0.7;
    }

/* Floating Label for Textarea */
.textarea-label[b-u7845zgbjk] {
    position: absolute;
    left: 14px;
    top: 18px;
    font-size: 15px;
    color: var(--hint-text, #999999);
    background: #fff;
    padding: 0 4px;
    pointer-events: none;
    transition: top 0.18s ease, font-size 0.18s ease, color 0.18s ease;
    z-index: 1;
}

/* Float label up when field has focus or value */
.textarea-input:focus + .textarea-label[b-u7845zgbjk],
.textarea-field.has-value .textarea-label[b-u7845zgbjk] {
    top: 0;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--brand-blue, #2963A8);
    font-weight: 500;
}

/* Character Count */
.char-count[b-u7845zgbjk] {
    text-align: right;
    font-size: 12px;
    color: #999;
    margin-top: 4px;
    padding-right: 4px;
}

/* Dialog Footer */
.edit-dialog-footer[b-u7845zgbjk] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #e0e0e0;
    background-color: #fafafa;
}

    .edit-dialog-footer[b-u7845zgbjk]  .rz-button.rz-light {
        background: white;
        color: var(--brand-blue, #2963A8);
        border: 1px solid var(--brand-blue, #2963A8);
        font-weight: 500;
    }

        .edit-dialog-footer[b-u7845zgbjk]  .rz-button.rz-light:hover {
            background: var(--brand-blue, #2963A8);
            color: white;
        }
/* /Components/ReservationEdit/ReportFlightIssueDialog.razor.rz.scp.css */
/* =========================
   ReportFlightIssueDialog
   ========================= */

.report-flight-issue-dialog[b-rbtv6u8a4z] {
    padding: 0;
}

/* =========================
   Success State
   ========================= */

.success-content[b-rbtv6u8a4z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 24px;
    text-align: center;
}

.success-icon[b-rbtv6u8a4z] {
    font-size: 64px;
    color: #22c55e;
    margin-bottom: 16px;
}

.success-content h3[b-rbtv6u8a4z] {
    margin: 0 0 12px 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary, var(--brand-blue-dark));
}

.success-message[b-rbtv6u8a4z] {
    margin: 0 0 8px 0;
    font-size: 15px;
    color: #555;
    line-height: 1.5;
}

.call-option[b-rbtv6u8a4z] {
    margin: 0 0 24px 0;
    font-size: 14px;
    color: #666;
}

.success-footer[b-rbtv6u8a4z] {
    margin-top: 8px;
}

/* =========================
   Dialog Body
   ========================= */

.dialog-body[b-rbtv6u8a4z] {
    padding: 20px;
    max-height: 60vh;
    overflow-y: auto;
}

/* Call Banner */
.call-banner[b-rbtv6u8a4z] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    background-color: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 8px;
    color: #0369a1;
    font-size: 14px;
    line-height: 1.4;
}

    .call-banner i[b-rbtv6u8a4z] {
        flex-shrink: 0;
        margin-top: 2px;
    }

.phone-link[b-rbtv6u8a4z] {
    color: var(--brand-blue, var(--brand-blue));
    font-weight: 600;
    text-decoration: none;
}

    .phone-link:hover[b-rbtv6u8a4z] {
        text-decoration: underline;
    }

/* Error Message */
.error-message[b-rbtv6u8a4z] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #dc2626;
    font-size: 14px;
}

    .error-message i[b-rbtv6u8a4z] {
        font-size: 16px;
        flex-shrink: 0;
    }

/* =========================
   Sections
   ========================= */

.section[b-rbtv6u8a4z] {
    margin-bottom: 20px;
}

.section-label[b-rbtv6u8a4z] {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, var(--brand-blue-dark));
    margin-bottom: 10px;
}

.optional-label[b-rbtv6u8a4z] {
    font-weight: 400;
    color: #888;
    font-size: 12px;
}

/* =========================
   Issue Type Selection
   ========================= */

.issue-type-options[b-rbtv6u8a4z] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.issue-type-options.three-col[b-rbtv6u8a4z] {
    grid-template-columns: 1fr 1fr 1fr;
}

.issue-option[b-rbtv6u8a4z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #fff;
    text-align: center;
}

    .issue-option input[type="radio"][b-rbtv6u8a4z] {
        display: none;
    }

    .issue-option i[b-rbtv6u8a4z] {
        font-size: 20px;
        color: #6b7280;
        transition: color 0.2s ease;
    }

    .issue-option span[b-rbtv6u8a4z] {
        font-size: 12px;
        font-weight: 500;
        color: #374151;
    }

    .issue-option:hover[b-rbtv6u8a4z] {
        border-color: var(--brand-blue, var(--brand-blue));
        background-color: #f8fafc;
    }

    .issue-option.selected[b-rbtv6u8a4z] {
        border-color: var(--brand-blue, var(--brand-blue));
        background-color: #eff6ff;
    }

        .issue-option.selected i[b-rbtv6u8a4z] {
            color: var(--brand-blue, var(--brand-blue));
        }

    .issue-option.invalid[b-rbtv6u8a4z] {
        border-color: #dc3545;
    }

/* =========================
   Know Time Options (for Delayed/Early)
   ========================= */

.know-time-options[b-rbtv6u8a4z] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.know-time-option[b-rbtv6u8a4z] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #fff;
}

    .know-time-option input[type="radio"][b-rbtv6u8a4z] {
        width: 18px;
        height: 18px;
        accent-color: var(--brand-blue, var(--brand-blue));
    }

    .know-time-option span[b-rbtv6u8a4z] {
        font-size: 14px;
        color: #374151;
    }

    .know-time-option:hover[b-rbtv6u8a4z] {
        border-color: var(--brand-blue, var(--brand-blue));
        background-color: #f8fafc;
    }

    .know-time-option.selected[b-rbtv6u8a4z] {
        border-color: var(--brand-blue, var(--brand-blue));
        background-color: #eff6ff;
    }

/* Field label (for inline labels like "Arrival Date & Time") */
.field-label[b-rbtv6u8a4z] {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #555;
    margin-bottom: 8px;
    margin-top: 4px;
}

/* =========================
   Phone Input Row
   ========================= */

.phone-input-row[b-rbtv6u8a4z] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.phone-country-code-container[b-rbtv6u8a4z] {
    flex: 0 0 140px;
}

.phone-number-input-container[b-rbtv6u8a4z] {
    flex: 1;
}

/* =========================
   Float Field Container
   ========================= */

.float-field[b-rbtv6u8a4z] {
    position: relative;
    width: 100%;
    margin-bottom: 16px;
}

/* Input Fields */
.float-input[b-rbtv6u8a4z] {
    width: 100%;
    height: auto;
    min-height: 48px;
    padding: 20px 12px 8px 12px;
    font-size: 15px;
    line-height: 1.4;
    color: var(--text-primary, var(--brand-blue-dark));
    border: 1.5px solid var(--brand-blue, var(--brand-blue));
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .float-input:focus[b-rbtv6u8a4z] {
        border-color: var(--brand-blue, var(--brand-blue));
        box-shadow: 0 0 0 3px rgba(41, 99, 168, 0.1);
        outline: none;
    }

    .float-input[b-rbtv6u8a4z]::placeholder {
        color: transparent;
        opacity: 0;
    }

    .float-input:disabled[b-rbtv6u8a4z] {
        background-color: #f5f5f5;
        cursor: not-allowed;
        opacity: 0.7;
    }

/* Floating Label */
.float-label[b-rbtv6u8a4z] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    color: var(--hint-text, #999999);
    background: #fff;
    padding: 0 4px;
    pointer-events: none;
    transition: top 0.18s ease, font-size 0.18s ease, transform 0.18s ease, color 0.18s ease;
    z-index: 1;
}

/* Float label up when field has focus or value */
.float-input:focus + .float-label[b-rbtv6u8a4z],
.float-field.has-value .float-label[b-rbtv6u8a4z] {
    top: 0;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--brand-blue, var(--brand-blue));
    font-weight: 500;
}

/* Always float for selectors */
.float-field.always-float .float-label[b-rbtv6u8a4z] {
    top: 0;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--brand-blue, var(--brand-blue));
    font-weight: 500;
}

/* Invalid state */
.float-field.invalid .float-input[b-rbtv6u8a4z],
.float-field.invalid .selected-country[b-rbtv6u8a4z],
.float-field.invalid .airline-selector[b-rbtv6u8a4z] {
    border-color: #dc3545;
}

.float-field.invalid .float-label[b-rbtv6u8a4z] {
    color: #dc3545;
}

.field-error[b-rbtv6u8a4z] {
    display: block;
    color: #dc3545;
    font-size: 12px;
    margin-top: 4px;
    padding-left: 14px;
}

/* =========================
   Country Selector
   ========================= */

.selected-country[b-rbtv6u8a4z] {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    padding: 16px 8px 6px 10px;
    font-size: 13px;
    color: var(--text-primary, var(--brand-blue-dark));
    border: 1.5px solid var(--brand-blue, var(--brand-blue));
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .selected-country:hover:not(.disabled)[b-rbtv6u8a4z] {
        border-color: var(--brand-blue, var(--brand-blue));
        box-shadow: 0 0 0 3px rgba(41, 99, 168, 0.1);
    }

    .selected-country.disabled[b-rbtv6u8a4z] {
        background-color: #f5f5f5;
        cursor: not-allowed;
        opacity: 0.7;
    }

.flag-emoji[b-rbtv6u8a4z] {
    font-size: 16px;
    line-height: 1;
}

.dial-code[b-rbtv6u8a4z] {
    font-size: 13px;
    color: var(--text-primary, var(--brand-blue-dark));
}

.chevron[b-rbtv6u8a4z] {
    margin-left: auto;
    font-size: 12px;
    color: #666;
}

/* =========================
   Airline Selector
   ========================= */

.airline-selector[b-rbtv6u8a4z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    padding: 24px 14px 10px 14px;
    font-size: 15px;
    color: var(--text-primary, var(--brand-blue-dark));
    border: 1.5px solid var(--brand-blue, var(--brand-blue));
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .airline-selector:hover:not(.disabled)[b-rbtv6u8a4z] {
        border-color: var(--brand-blue, var(--brand-blue));
        box-shadow: 0 0 0 3px rgba(41, 99, 168, 0.1);
    }

    .airline-selector.disabled[b-rbtv6u8a4z] {
        background-color: #f5f5f5;
        cursor: not-allowed;
        opacity: 0.7;
    }

.airline-name[b-rbtv6u8a4z] {
    font-size: 15px;
    color: var(--text-primary, var(--brand-blue-dark));
}

.airline-placeholder[b-rbtv6u8a4z] {
    font-size: 15px;
    color: var(--hint-text, #999999);
}

/* =========================
   DateTime Row
   ========================= */

.datetime-row[b-rbtv6u8a4z] {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

.date-input-container[b-rbtv6u8a4z] {
    flex: 1;
}

    .date-input-container[b-rbtv6u8a4z]  .rz-datepicker {
        width: 100%;
    }

    .date-input-container[b-rbtv6u8a4z]  .rz-inputtext {
        min-height: 56px;
        padding: 16px 14px;
        font-size: 15px;
        border: 1.5px solid var(--brand-blue, var(--brand-blue));
        border-radius: 8px;
    }

.time-display-container[b-rbtv6u8a4z] {
    flex: 0 0 120px;
}

.time-display[b-rbtv6u8a4z] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 56px;
    padding: 16px 14px;
    font-size: 15px;
    color: var(--text-primary, var(--brand-blue-dark));
    border: 1.5px solid var(--brand-blue, var(--brand-blue));
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .time-display:hover:not(.disabled)[b-rbtv6u8a4z] {
        border-color: var(--brand-blue, var(--brand-blue));
        box-shadow: 0 0 0 3px rgba(41, 99, 168, 0.1);
    }

    .time-display.disabled[b-rbtv6u8a4z] {
        background-color: #f5f5f5;
        cursor: not-allowed;
        opacity: 0.7;
    }

    .time-display i[b-rbtv6u8a4z] {
        color: var(--brand-blue, var(--brand-blue));
    }

/* =========================
   Disclaimer
   ========================= */

.disclaimer[b-rbtv6u8a4z] {
    display: flex;
    gap: 10px;
    padding: 14px;
    margin-top: 8px;
    background-color: #fefce8;
    border: 1px solid #fef08a;
    border-radius: 8px;
}

    .disclaimer i[b-rbtv6u8a4z] {
        flex-shrink: 0;
        color: #ca8a04;
        font-size: 16px;
        margin-top: 2px;
    }

    .disclaimer p[b-rbtv6u8a4z] {
        margin: 0;
        font-size: 13px;
        color: #854d0e;
        line-height: 1.5;
    }

/* =========================
   Dialog Footer
   ========================= */

.dialog-footer[b-rbtv6u8a4z] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #e0e0e0;
    background-color: #fafafa;
}

    .dialog-footer[b-rbtv6u8a4z]  .rz-button.rz-light {
        background: white;
        color: var(--brand-blue, var(--brand-blue));
        border: 1px solid var(--brand-blue, var(--brand-blue));
        font-weight: 500;
    }

        .dialog-footer[b-rbtv6u8a4z]  .rz-button.rz-light:hover {
            background: var(--brand-blue, var(--brand-blue));
            color: white;
        }

/* =========================
   Responsive
   ========================= */

@media (max-width: 500px) {
    .issue-type-options[b-rbtv6u8a4z] {
        grid-template-columns: 1fr;
    }

    .issue-option[b-rbtv6u8a4z] {
        flex-direction: row;
        justify-content: flex-start;
        padding: 12px 14px;
    }

        .issue-option i[b-rbtv6u8a4z] {
            font-size: 20px;
        }

    .phone-input-row[b-rbtv6u8a4z] {
        flex-direction: column;
        gap: 0;
    }

    .phone-country-code-container[b-rbtv6u8a4z] {
        flex: none;
        width: 100%;
        margin-bottom: 0;
    }

        .phone-country-code-container .float-field[b-rbtv6u8a4z] {
            margin-bottom: 12px;
        }

    .phone-number-input-container[b-rbtv6u8a4z] {
        width: 100%;
    }

    .datetime-row[b-rbtv6u8a4z] {
        flex-direction: column;
    }

    .time-display-container[b-rbtv6u8a4z] {
        flex: none;
        width: 100%;
    }
}
/* /Components/ReviewComponent.razor.rz.scp.css */
/* =============================================================================
 * REVIEW COMPONENT STYLES
 * ============================================================================= */

.review-page[b-7esn7rxytg] {
    padding: 16px;
    max-width: 700px;
    margin: 0 auto;
}

.review-section[b-7esn7rxytg] {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
}

.review-section-header[b-7esn7rxytg] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #f8f9ff 0%, #e8f4fd 100%);
    border-bottom: 1px solid #e0e0e0;
}

    .review-section-header h3[b-7esn7rxytg] {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
        color: #1a5276;
        flex: 1;
    }

.review-icon[b-7esn7rxytg] {
    font-size: 1.2rem;
    color: var(--brand-blue, #4285F4);
    font-variant-emoji: text;
}

.edit-btn[b-7esn7rxytg] {
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 20px;
}

    .edit-btn i[b-7esn7rxytg] {
        font-size: 0.7rem;
    }

.review-section-content[b-7esn7rxytg] {
    padding: 12px 16px;
}

.review-row[b-7esn7rxytg] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px 0;
    border-bottom: 1px dashed rgba(0,0,0,0.08);
}

    .review-row:last-child[b-7esn7rxytg] {
        border-bottom: none;
    }

.review-label[b-7esn7rxytg] {
    color: #666;
    font-size: 0.9rem;
    flex-shrink: 0;
    margin-right: 12px;
}

.review-value[b-7esn7rxytg] {
    color: #333;
    font-weight: 500;
    text-align: right;
}

.datetime-value[b-7esn7rxytg] {
    color: var(--brand-blue, #4285F4);
    font-weight: 600;
}

/* Reservation Section (Trip Details) */
.reservation-section[b-7esn7rxytg] {
    border: 2px solid #d0e3f0;
}

.reservation-header[b-7esn7rxytg] {
    background: linear-gradient(135deg, #e8f4fd 0%, #d0e3f0 100%);
}

    .reservation-header h3[b-7esn7rxytg] {
        color: #1565c0;
    }

.review-subsection[b-7esn7rxytg] {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
}

    .review-subsection:last-child[b-7esn7rxytg] {
        border-bottom: none;
    }

    .review-subsection h4[b-7esn7rxytg] {
        font-size: 0.85rem;
        font-weight: 600;
        color: #555;
        margin: 0 0 10px 0;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

/* Location Display */
.review-locations[b-7esn7rxytg] {
    position: relative;
}

.location-item[b-7esn7rxytg] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 0;
}

.location-marker[b-7esn7rxytg] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.pickup-marker[b-7esn7rxytg] {
    background: #e3f2fd;
    color: #1565c0;
    border: 2px solid #1565c0;
}

.dropoff-marker[b-7esn7rxytg] {
    background: #fff3e0;
    color: #ef6c00;
    border: 2px solid #ef6c00;
}

.location-details[b-7esn7rxytg] {
    flex: 1;
}

.location-type[b-7esn7rxytg] {
    display: block;
    font-size: 0.75rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.location-address[b-7esn7rxytg] {
    font-size: 0.9rem;
    color: #333;
    line-height: 1.4;
}

.location-connector[b-7esn7rxytg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 0 13px;
    padding: 4px 0;
}

.connector-line[b-7esn7rxytg] {
    width: 2px;
    height: 20px;
    background: linear-gradient(180deg, #1565c0 0%, #ef6c00 100%);
}

.connector-arrow[b-7esn7rxytg] {
    color: #888;
    font-size: 0.7rem;
}

/* Flight Info Card */
.flight-info-card[b-7esn7rxytg] {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 12px;
    border: 1px solid #e0e0e0;
}

.flight-main[b-7esn7rxytg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.airline-name[b-7esn7rxytg] {
    font-weight: 600;
    color: #333;
}

.flight-number[b-7esn7rxytg] {
    color: var(--brand-blue, #4285F4);
    font-weight: 600;
}

/* Combined flight route and time on one line */
.flight-route-time[b-7esn7rxytg] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 0;
    border-top: 1px dashed #ddd;
    margin-top: 8px;
    flex-wrap: wrap;
}

.airport-code[b-7esn7rxytg] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #333;
}

.route-arrow[b-7esn7rxytg] {
    color: #888;
}

.flight-separator[b-7esn7rxytg] {
    color: #ccc;
    margin: 0 4px;
}

.flight-datetime[b-7esn7rxytg] {
    color: var(--brand-blue, #4285F4);
    font-weight: 600;
}

.international-badge[b-7esn7rxytg] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    padding: 4px 8px;
    background: #e8f5e9;
    color: #2e7d32;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

/* Service Type Card */
.service-type-card[b-7esn7rxytg] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.service-type-placeholder[b-7esn7rxytg] {
    width: 70px;
    height: 50px;
    background: transparent;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .service-type-placeholder img[b-7esn7rxytg] {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.placeholder-icon[b-7esn7rxytg] {
    font-size: 1.5rem;
    font-variant-emoji: text;
    color: #888;
}

.service-type-details[b-7esn7rxytg] {
    flex: 1;
}

.service-type-name[b-7esn7rxytg] {
    display: block;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.service-type-charter[b-7esn7rxytg] {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--brand-blue, #1B63C7);
    margin-bottom: 4px;
}

.service-type-desc[b-7esn7rxytg] {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.4;
}

/* Price Section */
.price-section[b-7esn7rxytg] {
    background: #f0f4f8;
}

.price-row[b-7esn7rxytg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.price-label[b-7esn7rxytg] {
    font-size: 0.95rem;
    color: #555;
}

.price-value[b-7esn7rxytg] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
}

/* Total Section */
.total-section[b-7esn7rxytg] {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    border: 2px solid #4caf50;
}

.total-row[b-7esn7rxytg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
}

.total-label[b-7esn7rxytg] {
    font-size: 1.2rem;
    font-weight: 600;
    color: #2e7d32;
}

.total-value[b-7esn7rxytg] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1b5e20;
}

/* Payment Info Card */
.payment-info-card[b-7esn7rxytg] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.payment-method[b-7esn7rxytg] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.payment-icon[b-7esn7rxytg] {
    font-size: 1.2rem;
}

.payment-type[b-7esn7rxytg] {
    font-weight: 600;
    color: #333;
}

/* Terms Section */
.terms-section[b-7esn7rxytg] {
    background: #fffde7;
    border: 1px solid #fdd835;
}

.terms-disclaimer[b-7esn7rxytg] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
}

    .terms-disclaimer i[b-7esn7rxytg] {
        font-size: 1.2rem;
        color: #f9a825;
        flex-shrink: 0;
        margin-top: 2px;
    }

    .terms-disclaimer span[b-7esn7rxytg] {
        font-size: 0.9rem;
        color: #555;
        line-height: 1.5;
    }

        .terms-disclaimer span a[b-7esn7rxytg] {
            color: var(--brand-blue, #4285F4);
            text-decoration: underline;
        }

            .terms-disclaimer span a:hover[b-7esn7rxytg] {
                color: #3367D6;
            }

/* =============================================================================
 * RESPONSIVE ADJUSTMENTS
 * ============================================================================= */

@media (max-width: 576px) {
    .review-page[b-7esn7rxytg] {
        padding: 10px;
    }

    .review-section-header[b-7esn7rxytg] {
        padding: 10px 12px;
    }

        .review-section-header h3[b-7esn7rxytg] {
            font-size: 0.9rem;
        }

    .review-section-content[b-7esn7rxytg] {
        padding: 10px 12px;
    }

    .review-row[b-7esn7rxytg] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .review-value[b-7esn7rxytg] {
        text-align: left;
    }

    .service-type-card[b-7esn7rxytg] {
        flex-direction: column;
        text-align: center;
    }

    .location-item[b-7esn7rxytg] {
        gap: 8px;
    }

    .location-marker[b-7esn7rxytg] {
        width: 24px;
        height: 24px;
        font-size: 0.75rem;
    }

    .location-connector[b-7esn7rxytg] {
        margin-left: 11px;
    }

    .total-row[b-7esn7rxytg] {
        flex-direction: column;
        gap: 4px;
        text-align: center;
    }
}
/* /Components/SaveFavoriteModal.razor.rz.scp.css */
.save-favorite-modal[b-h9hdoynvff] {
    padding: 0;
}

.modal-body[b-h9hdoynvff] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Address preview at top */
.address-preview[b-h9hdoynvff] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    background: #f5f7fa;
    border-radius: 8px;
    font-size: 0.95rem;
    color: #333;
}

    .address-preview .address-icon[b-h9hdoynvff] {
        color: #4285F4;
        font-size: 1.3rem;
        flex-shrink: 0;
    }

    .address-preview .address-text[b-h9hdoynvff] {
        line-height: 1.4;
        word-break: break-word;
    }

/* Float label input styling (matching existing app style) */
.float-field[b-h9hdoynvff] {
    position: relative;
    margin-top: 8px;
}

    .float-field .float-input[b-h9hdoynvff] {
        width: 100%;
        padding: 16px 12px 8px;
        font-size: 1rem;
        border: 1px solid #d9d9d9;
        border-radius: 8px;
        outline: none;
        transition: border-color 0.2s, box-shadow 0.2s;
    }

        .float-field .float-input:focus[b-h9hdoynvff] {
            border-color: #4285F4;
            box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2);
        }

    .float-field .float-label[b-h9hdoynvff] {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1rem;
        color: #666;
        pointer-events: none;
        transition: all 0.2s;
        background: white;
        padding: 0 4px;
    }

    .float-field.always-float .float-label[b-h9hdoynvff],
    .float-field.has-value .float-label[b-h9hdoynvff],
    .float-field .float-input:focus ~ .float-label[b-h9hdoynvff] {
        top: 0;
        font-size: 0.75rem;
        color: #4285F4;
    }

/* Quick suggestion chips */
.quick-suggestions[b-h9hdoynvff] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.suggestions-label[b-h9hdoynvff] {
    font-size: 0.85rem;
    color: #666;
}

.suggestion-chip[b-h9hdoynvff] {
    padding: 6px 14px;
    font-size: 0.85rem;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    background: white;
    color: #333;
    cursor: pointer;
    transition: all 0.2s;
}

    .suggestion-chip:hover[b-h9hdoynvff] {
        background: #f0f4ff;
        border-color: #4285F4;
        color: #4285F4;
    }

/* Unit number preview */
.unit-preview[b-h9hdoynvff] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: #666;
    padding: 8px 12px;
    background: #fafafa;
    border-radius: 6px;
}

    .unit-preview .unit-icon[b-h9hdoynvff] {
        font-size: 1.1rem;
        color: #888;
    }

/* Modal footer */
.modal-footer[b-h9hdoynvff] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #e8e8e8;
    background: #fafafa;
}

.btn-cancel[b-h9hdoynvff] {
    padding: 10px 20px;
    font-size: 0.95rem;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    background: white;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-cancel:hover[b-h9hdoynvff] {
        background: #f5f5f5;
        border-color: #bbb;
    }

.btn-save[b-h9hdoynvff] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 0.95rem;
    border: none;
    border-radius: 8px;
    background: #4285F4;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-save:hover:not(:disabled)[b-h9hdoynvff] {
        background: #3367D6;
    }

    .btn-save:disabled[b-h9hdoynvff] {
        opacity: 0.7;
        cursor: not-allowed;
    }

    .btn-save .btn-icon[b-h9hdoynvff] {
        font-size: 1.1rem;
    }

/* Responsive */
@media (max-width: 480px) {
    .modal-body[b-h9hdoynvff] {
        padding: 16px;
    }

    .quick-suggestions[b-h9hdoynvff] {
        justify-content: flex-start;
    }

    .modal-footer[b-h9hdoynvff] {
        padding: 12px 16px;
    }

    .btn-cancel[b-h9hdoynvff],
    .btn-save[b-h9hdoynvff] {
        padding: 10px 16px;
        font-size: 0.9rem;
    }
}
/* /Components/SelectedServiceTypes.razor.rz.scp.css */
/* ==============================================================================
   NOTE: This component uses the reusable .section-frame and .frame-heading 
   classes from site.css for the bordered leg cards with titles on the border.
   
   Each leg uses:
   - <div class="section-frame"> for the leg container
   - <span class="frame-heading"> for the leg title (e.g., "Depart PHX - Ride from Gilbert - phx")
   
   Colors defined in site.css:
   - Frame background: lightcyan
   - Frame heading background: powderblue
   - Border: var(--brand-blue)
   ============================================================================== */

.service-selection-container[b-0lmww1yz1c] {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Reduced from 16px for compactness */
    padding: 16px; /* Increased from 2px for better spacing */
    width: 100%;
    margin: 0 auto;
}

.service-types-list[b-0lmww1yz1c] {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Reduced from 12px */
}

.selected-service[b-0lmww1yz1c] {
    border: 2px solid #4285f5;
    /*background-color: #e6f0ff;*/
    background-color: darkblue;
    border-radius: 50px; /* Pill-shaped rounded border */
}

.service-type-hint[b-0lmww1yz1c] {
    font-size: .80em; /* Slightly smaller for compactness */
    font-weight: 500;
    color: #333;
    white-space: nowrap; /* Prevent wrapping */
    overflow: hidden; /* Hide overflow */
    text-overflow: ellipsis; /* Add ellipsis if too long */
    max-width: 100%; /* Constrain to container width */
    margin-bottom: 8px; /* Reduced from default */
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.loading-container[b-0lmww1yz1c] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px;
}

.loading-message[b-0lmww1yz1c] {
    text-align: center;
    color: var(--brand-blue-dark);
    font-size: 1em; /* Slightly smaller */
    margin: 0; /* Remove default margin */
}

.spinner-border[b-0lmww1yz1c] {
    width: 1.5rem;
    height: 1.5rem;
}


.modal-backdrop[b-0lmww1yz1c] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1005;
}

/* Confirm modal for delete confirmation */
.confirm-modal[b-0lmww1yz1c] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 8px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 1010;
    animation: fadeIn-b-0lmww1yz1c 0.2s ease-in-out;
}

.modal-title[b-0lmww1yz1c] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.modal-actions[b-0lmww1yz1c] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 12px 16px;
    border-top: 1px solid #e0e0e0;
}

    .modal-actions .btn[b-0lmww1yz1c] {
        padding: 8px 16px;
        border-radius: 6px;
        font-size: 0.95rem;
        cursor: pointer;
        border: none;
        transition: all 0.2s ease;
    }

    .modal-actions .btn-secondary[b-0lmww1yz1c] {
        background: #f5f5f5;
        color: #333;
    }

        .modal-actions .btn-secondary:hover[b-0lmww1yz1c] {
            background: #e0e0e0;
        }

    .modal-actions .btn-primary[b-0lmww1yz1c] {
        background: #dc3545;
        color: white;
    }

        .modal-actions .btn-primary:hover[b-0lmww1yz1c] {
            background: #c82333;
        }

.flight-info-modal-content[b-0lmww1yz1c] {
    background: white;
    border-radius: 8px;
    width: 280px;
    max-height: 80vh;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    animation: fadeIn-b-0lmww1yz1c 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
}

.modal-header[b-0lmww1yz1c] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #e0e0e0;
}

    .modal-header h3[b-0lmww1yz1c] {
        margin: 0;
        font-size: 1em;
    }

.modal-body[b-0lmww1yz1c] {
    padding: 16px;
    font-size: 1em;
    line-height: 1.5;
}

.close-button[b-0lmww1yz1c] {
    background: none;
    border: none;
    font-size: 1em;
    cursor: pointer;
    padding: 0;
}

.modal-body input[type="checkbox"][b-0lmww1yz1c] {
    margin-right: 6px;
}

.st-grid[b-0lmww1yz1c] {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
}

@media (min-width: 900px) {
    .st-grid[b-0lmww1yz1c] {
        grid-template-columns: 1fr 1fr;
    }
}

.st-card[b-0lmww1yz1c] {
    border: 1px solid #e2e6ef;
    border-radius: 10px;
    background: #fff;
    padding: 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.st-card-header h4[b-0lmww1yz1c] {
    margin: 0 0 4px 0;
    font-weight: 700;
}

.st-leg-route[b-0lmww1yz1c] {
    font-size: .95rem;
    opacity: .85;
}

.service-types-list[b-0lmww1yz1c] {
    display: grid;
    gap: 10px;
}

.service-card[b-0lmww1yz1c] {
    border: 1px solid #dce3f5;
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
}

    .service-card:hover[b-0lmww1yz1c] {
        background: #f7faff;
    }

.service-title[b-0lmww1yz1c] {
    font-weight: 600;
}

.service-desc[b-0lmww1yz1c] {
    opacity: .85;
}

/* Service button styling - layout handled by rz-button-3col class in site.css */

.service-button span[b-0lmww1yz1c],
.service-button i.rzi[b-0lmww1yz1c] {
    color: #999999 !important;
}

/* Hover effect to make it more obvious it's clickable */
.service-button:hover[b-0lmww1yz1c] {
    background: #f8f9fa !important;
    border-color: var(--brand-blue, var(--brand-blue)) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

    .service-button:hover span[b-0lmww1yz1c],
    .service-button:hover i.rzi[b-0lmww1yz1c] {
        color: var(--brand-blue, var(--brand-blue)) !important;
    }

/* Disabled state */
.service-button:disabled[b-0lmww1yz1c] {
    opacity: 0.5;
    cursor: not-allowed;
}

    .service-button:disabled:hover[b-0lmww1yz1c] {
        background: white !important;
        border-color: var(--field-border, #d9d9d9) !important;
        box-shadow: none !important;
    }

    .service-button:disabled span[b-0lmww1yz1c],
    .service-button:disabled i.rzi[b-0lmww1yz1c] {
        color: #999999 !important;
    }

.selected-service-summary[b-0lmww1yz1c] {
    border: 2px solid #4285f5;
    border-radius: 8px;
    padding: 12px;
    background: #f7faff;
    display: grid;
    gap: 6px;
}

.ss-row[b-0lmww1yz1c] {
    display: flex;
    gap: 6px;
    align-items: baseline;
}

.ss-label[b-0lmww1yz1c] {
    font-weight: 600;
    min-width: 150px;
}

.ss-change-btn[b-0lmww1yz1c] {
    align-self: start;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #4285f5;
    background: white;
    cursor: pointer;
}

    .ss-change-btn:hover[b-0lmww1yz1c] {
        background: #e9f1ff;
    }

.service-types-list[b-0lmww1yz1c] {
    display: grid;
    gap: 10px;
}

.service-card[b-0lmww1yz1c] {
    border: 1px solid #dce3f5;
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
}

    .service-card:hover[b-0lmww1yz1c] {
        background: #f7faff;
    }

.service-title[b-0lmww1yz1c] {
    font-weight: 600;
}

.service-desc[b-0lmww1yz1c] {
    opacity: .85;
}

/* Toggle row for checkbox options */
.toggle-row[b-0lmww1yz1c] {
    justify-content: center;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0; /* Reduced from 16px for compact spacing */
    margin: 4px 0; /* Reduced from 8px for compact spacing */
}

.toggle-text[b-0lmww1yz1c] {
    cursor: pointer;
    margin: 0;
    line-height: 1.4;
    user-select: none;
}

/* Remove/trash button styling - positioned in top-right of section-frame */
.section-frame .remove-leg-btn[b-0lmww1yz1c] {
    position: absolute;
    top: 2px;
    right: 6px;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
    z-index: 3; /* Above the frame-heading */
}

    .section-frame .remove-leg-btn:hover[b-0lmww1yz1c] {
        background-color: rgba(244, 67, 54, 0.1);
        color: #f44336;
    }

    .section-frame .remove-leg-btn:active[b-0lmww1yz1c] {
        background-color: rgba(244, 67, 54, 0.2);
    }


.legs-grid[b-0lmww1yz1c] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.leg-row[b-0lmww1yz1c] {
    width: 100%;
}

.leg-selected[b-0lmww1yz1c], .leg-selected-details[b-0lmww1yz1c] {
    margin-top: 12px;
}

/* Additional service selector container */
.sel-st-container[b-0lmww1yz1c] {
    width: 100%;
    max-width: 100%;
    overflow: visible;
    flex: 1 1 auto;
    min-height: 0;
    padding-bottom: 60px; /* Clear the fixed stepper footer */
}

/* ===============================
   Pickup Time Split Layout (Option 3B)
   =============================== */

.pickup-time-row[b-0lmww1yz1c] {
    display: flex !important;
    margin-top: 6px;
    overflow: visible;
}

.pickup-time-split[b-0lmww1yz1c] {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    background: var(--brand-blue-50, #F2F6FF);
    border: 1px solid var(--brand-border, #DFE3EE);
    border-radius: 12px;
    overflow: visible;
    width: 100%;
}

.pickup-time-info[b-0lmww1yz1c] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
}

.pickup-clock-icon[b-0lmww1yz1c] {
    width: 32px;
    height: 32px;
    background: #f0f4f8;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-blue-dark, #1a3a5c);
    flex-shrink: 0;
}

    .pickup-clock-icon .rzi[b-0lmww1yz1c] {
        font-size: 16px;
        color: var(--brand-blue, var(--brand-blue));
    }

.pickup-time-details[b-0lmww1yz1c] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0; /* Allow text truncation */
}

.pickup-time-label[b-0lmww1yz1c] {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.pickup-time-value[b-0lmww1yz1c] {
    font-size: 14px;
    color: #333;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pickup-adjust-button[b-0lmww1yz1c] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 16px;
    background: #fff;
    border: none;
    border-left: 1px solid var(--brand-border, #DFE3EE);
    color: var(--brand-blue, #1a5a96);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s, color 0.1s;
    white-space: nowrap;
    flex-shrink: 0;
}

    .pickup-adjust-button:hover[b-0lmww1yz1c] {
        background: #f0f7ff;
        color: var(--brand-blue-dark, #1a3a5c);
    }

    .pickup-adjust-button:active[b-0lmww1yz1c] {
        background: #e0efff;
    }

    .pickup-adjust-button .adjust-icon[b-0lmww1yz1c] {
        font-size: 18px;
    }

    .pickup-adjust-button .chevron[b-0lmww1yz1c] {
        font-size: 16px;
        opacity: 0.7;
    }

/* Mobile responsive for split layout */
@media (max-width: 480px) {
    .sel-st-container[b-0lmww1yz1c] {
        padding-bottom: 80px; /* More clearance for mobile footer */
    }

    .pickup-time-split[b-0lmww1yz1c] {
        max-width: 100%;
    }

    .pickup-time-info[b-0lmww1yz1c] {
        padding: 8px 10px;
        min-width: 0;
        flex: 1;
        gap: 8px;
    }

    .pickup-adjust-button[b-0lmww1yz1c] {
        padding: 8px 12px;
    }

        /* Hide text and chevron on mobile, show only icon */
        .pickup-adjust-button .adjust-text[b-0lmww1yz1c],
        .pickup-adjust-button .chevron[b-0lmww1yz1c] {
            display: none;
        }

        .pickup-adjust-button .adjust-icon[b-0lmww1yz1c] {
            font-size: 20px;
        }

    .pickup-time-value[b-0lmww1yz1c] {
        font-size: 12px;
        flex-wrap: nowrap;
        overflow: hidden;
    }

        .pickup-time-value > span:first-child[b-0lmww1yz1c] {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            min-width: 0;
        }

    .pickup-clock-icon[b-0lmww1yz1c] {
        width: 24px;
        height: 24px;
    }

        .pickup-clock-icon .rzi[b-0lmww1yz1c] {
            font-size: 14px;
        }

    .time-chip-inline[b-0lmww1yz1c] {
        font-size: 10px;
        padding: 2px 6px;
        flex-shrink: 0;
    }

    /* Address button mobile styling */
    .address-button .rz-button-text[b-0lmww1yz1c],
    .address-button .rz-button-box span[b-0lmww1yz1c] {
        font-size: 12px !important;
        line-height: 1 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Float label position fix on mobile */
    .float-label[b-0lmww1yz1c] {
        top: -10px;
    }
}

/* Float label for other dropdowns */
.float-dropdown[b-0lmww1yz1c] {
    position: relative;
}

.float-label[b-0lmww1yz1c] {
    position: absolute;
    top: -8px;
    left: 12px;
    background: white;
    padding: 0 4px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--brand-blue, var(--brand-blue));
    pointer-events: none;
    z-index: 1;
}

/* Address row container - overflow-x hidden prevents scrollbar during shake animation */
/* padding-top provides space for the floating label */
.address-row[b-0lmww1yz1c] {
    overflow-x: hidden;
    overflow-y: visible;
    padding-top: 12px;
}

/* Secondary ride options container needs visible overflow for dropdown */
#secondary-ride-options[b-0lmww1yz1c] {
    overflow: visible !important;
}

/* Address button styling */
.address-button[b-0lmww1yz1c] {
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 12px !important;
}

    .address-button:hover[b-0lmww1yz1c] {
        border-color: var(--brand-blue, var(--brand-blue)) !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

/* Legacy styles - keeping for backward compatibility */
.pickup-time-link[b-0lmww1yz1c] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.92rem;
    line-height: 1.2;
    color: var(--brand-blue, var(--brand-blue));
}

.pickup-time-text[b-0lmww1yz1c] {
    font-weight: 500;
}

.pickup-edit-btn[b-0lmww1yz1c] {
    border: none;
    background: transparent;
    padding: 0 4px;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--brand-blue, var(--brand-blue));
    transition: opacity 0.2s ease;
}

    .pickup-edit-btn:hover[b-0lmww1yz1c] {
        opacity: 0.75;
        text-decoration: underline;
    }

/* Mobile responsive */
@media (max-width: 600px) {
    .pickup-time-link[b-0lmww1yz1c] {
        font-size: 0.8rem;
    }

    .pickup-edit-btn[b-0lmww1yz1c] {
        font-size: 0.85rem;
    }
}

/* Time Chip Styling for Pickup Time */
.time-chip-inline[b-0lmww1yz1c] {
    padding: 2px 8px;
    border-radius: 999px;
    background: #F2F6FF;
    color: var(--brand-blue-dark);
    border: 1px solid var(--brand-blue);
    font-size: 0.75rem;
    line-height: 1.4;
    white-space: nowrap;
}

    /* Time chip color variations based on time of day */
    .time-chip-inline.time-morning[b-0lmww1yz1c] {
        background: linear-gradient(135deg, #FFF9E6 0%, #FFF3CC 100%);
        border-color: #F59E0B;
        color: #92400E;
    }

    .time-chip-inline.time-midday[b-0lmww1yz1c],
    .time-chip-inline.time-afternoon[b-0lmww1yz1c] {
        background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
        border-color: #F59E0B;
        color: #92400E;
    }

    .time-chip-inline.time-evening[b-0lmww1yz1c] {
        background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%);
        border-color: #6366F1;
        color: #312E81;
    }

    .time-chip-inline.time-midnight[b-0lmww1yz1c],
    .time-chip-inline.time-after-midnight[b-0lmww1yz1c],
    .time-chip-inline.time-before-midnight[b-0lmww1yz1c],
    .time-chip-inline.time-night[b-0lmww1yz1c] {
        background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%);
        border-color: #4F46E5;
        color: #1E1B4B;
    }

    .time-chip-inline.time-early-morning[b-0lmww1yz1c] {
        background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
        border-color: #F59E0B;
        color: #92400E;
    }

/* Animation for modal appearance */
@keyframes fadeIn-b-0lmww1yz1c {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* ===============================
   Service Type Image Styling - Circular Images
   =============================== */
/* Make service type images circular */
.service-button img[b-0lmww1yz1c],
.service-card img[b-0lmww1yz1c],
.service-type img[b-0lmww1yz1c],
.st-card img[b-0lmww1yz1c],
img[class*="service"][b-0lmww1yz1c] {
    border-radius: 50% !important;
    object-fit: cover;
}

/* Ensure images maintain aspect ratio when circular */
.service-button img[b-0lmww1yz1c],
.service-card img[b-0lmww1yz1c],
.service-type img[b-0lmww1yz1c] {
    width: auto;
    height: auto;
    max-width: 100%;
}

/* ===============================
   Unit Number Link & Modal
   =============================== */

/* Unit link row - sits below the address button */
.unit-link-row[b-0lmww1yz1c] {
    display: flex;
    justify-content: flex-end;
    margin-top: -14px; /* Pull up into the margin-bottom of address-row */
    margin-bottom: 8px;
    padding-right: 4px;
}

.unit-link[b-0lmww1yz1c] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    color: var(--brand-blue-light, var(--brand-blue-light));
    text-decoration: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

    .unit-link:hover[b-0lmww1yz1c] {
        background-color: rgba(49, 128, 244, 0.08);
        color: var(--brand-blue, var(--brand-blue));
        text-decoration: none;
    }

.unit-link-icon[b-0lmww1yz1c] {
    font-size: 16px !important;
}

.unit-edit-hint[b-0lmww1yz1c] {
    font-size: 0.75rem;
    color: #888;
    margin-left: 2px;
}

/* Unit modal overlay */
.unit-modal-overlay[b-0lmww1yz1c] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    padding: 16px;
}

/* Unit modal content */
.unit-modal-content[b-0lmww1yz1c] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 400px;
    max-height: 90vh;
    overflow-y: auto;
}

.unit-modal-header[b-0lmww1yz1c] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
}

    .unit-modal-header h3[b-0lmww1yz1c] {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--brand-blue-dark, var(--brand-blue-dark));
    }

.unit-modal-close[b-0lmww1yz1c] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #666;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s ease;
}

    .unit-modal-close:hover[b-0lmww1yz1c] {
        color: #333;
    }

.unit-modal-body[b-0lmww1yz1c] {
    padding: 20px;
}

.unit-modal-footer[b-0lmww1yz1c] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 20px;
    border-top: 1px solid #e0e0e0;
    background: #fafafa;
    border-radius: 0 0 12px 12px;
}

/* Float field styling for unit modal input */
.float-field[b-0lmww1yz1c] {
    position: relative;
}

    .float-field .float-input[b-0lmww1yz1c] {
        width: 100%;
        padding: 16px 12px 8px;
        border: 1px solid #d9d9d9;
        border-radius: 8px;
        font-size: 1rem;
        transition: border-color 0.2s ease;
    }

        .float-field .float-input:focus[b-0lmww1yz1c] {
            outline: none;
            border-color: var(--brand-blue, var(--brand-blue));
        }

    .float-field .float-label[b-0lmww1yz1c] {
        position: absolute;
        top: -8px;
        left: 12px;
        background: white;
        padding: 0 4px;
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--brand-blue, var(--brand-blue));
        pointer-events: none;
    }

    .float-field.always-float .float-label[b-0lmww1yz1c] {
        display: block;
    }

/* Mobile adjustments for unit modal */
@media (max-width: 480px) {
    .unit-link-row[b-0lmww1yz1c] {
        margin-top: -10px;
        margin-bottom: 4px;
    }

    .unit-link[b-0lmww1yz1c] {
        font-size: 0.8rem;
    }

    .unit-modal-content[b-0lmww1yz1c] {
        max-width: 100%;
        margin: 0 8px;
    }

    .unit-modal-header[b-0lmww1yz1c] {
        padding: 14px 16px;
    }

    .unit-modal-body[b-0lmww1yz1c] {
        padding: 16px;
    }

    .unit-modal-footer[b-0lmww1yz1c] {
        padding: 14px 16px;
        flex-wrap: wrap;
    }
}

/* Ensure parent dialog content scrolls when containing service type selector */
:global(.rz-dialog-content:has(.sel-st-container))[b-0lmww1yz1c] {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: calc(100vh - 140px); /* Account for titlebar and footer */
}

:global(.rz-dialog:has(.sel-st-container))[b-0lmww1yz1c] {
    max-height: 95vh;
}

/* Pickup time adjust badge - temporary notification */
.pickup-adjust-wrapper[b-0lmww1yz1c] {
    position: relative;
    display: inline-flex;
    overflow: visible;
}

.pickup-adjust-badge[b-0lmww1yz1c] {
    position: absolute;
    top: -14px;
    right: 0;
    transform: none;
    background: linear-gradient(135deg, var(--brand-blue) 0%, #1e4d7b 100%);
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(41, 99, 168, 0.4);
    animation: pickup-badge-pulse-b-0lmww1yz1c 0.8s ease-in-out 3, pickup-badge-fadeout-b-0lmww1yz1c 0.5s ease-out 4s forwards;
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
}

@keyframes pickup-badge-pulse-b-0lmww1yz1c {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.08);
        opacity: 0.9;
    }
}

@keyframes pickup-badge-fadeout-b-0lmww1yz1c {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        visibility: hidden;
    }
}

@media (max-width: 480px) {
    .pickup-adjust-badge[b-0lmww1yz1c] {
        font-size: 0.65rem;
        padding: 3px 8px;
        top: -12px;
    }
}

/* ===============================
   Validation Shake Animation
   =============================== */

/* Shake animation keyframes */
@keyframes validationShake-b-0lmww1yz1c {
    0%, 100% {
        transform: translateX(0);
    }

    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-6px);
    }

    20%, 40%, 60%, 80% {
        transform: translateX(6px);
    }
}

/* Gentler hint shake - for guiding user attention without error styling */
@keyframes hintShake-b-0lmww1yz1c {
    0%, 100% {
        transform: translateX(0);
    }

    15%, 45%, 75% {
        transform: translateX(-4px);
    }

    30%, 60%, 90% {
        transform: translateX(4px);
    }
}

/* Apply hint shake animation to service picker - friendly attention-grabber */
[b-0lmww1yz1c] .service-picker.hint-shake {
    animation: hintShake-b-0lmww1yz1c 0.5s ease-in-out;
}

/* Hint shake styling - use brand blue instead of red for a friendly look */
[b-0lmww1yz1c] .service-picker.hint-shake .rz-button {
    border-color: var(--brand-blue, var(--brand-blue)) !important;
    box-shadow: 0 0 0 3px rgba(41, 99, 168, 0.25) !important;
}

/* Apply shake animation to service picker */
[b-0lmww1yz1c] .service-picker.validation-shake {
    animation: validationShake-b-0lmww1yz1c 0.5s ease-in-out;
}

/* Error state styling for the button inside the service picker */
[b-0lmww1yz1c] .service-picker.validation-error .rz-button {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25) !important;
}

    /* Also style the icons and text red during error state */
    [b-0lmww1yz1c] .service-picker.validation-error .rz-button span,
    [b-0lmww1yz1c] .service-picker.validation-error .rz-button i.rzi {
        color: #dc3545 !important;
    }

/* Error state for float label */
[b-0lmww1yz1c] .service-picker.validation-error .float-label {
    color: #dc3545 !important;
}

/* Apply shake animation to address picker */
[b-0lmww1yz1c] .address-button-picker.validation-shake {
    animation: validationShake-b-0lmww1yz1c 0.5s ease-in-out;
}

/* Error state styling for the button inside the address picker */
[b-0lmww1yz1c] .address-button-picker.validation-error .rz-button {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25) !important;
}

    /* Also style the icons and text red during error state */
    [b-0lmww1yz1c] .address-button-picker.validation-error .rz-button span,
    [b-0lmww1yz1c] .address-button-picker.validation-error .rz-button i.rzi {
        color: #dc3545 !important;
    }

/* Error state for float label on address picker */
[b-0lmww1yz1c] .address-button-picker.validation-error .float-label {
    color: #dc3545 !important;
}

/* ============================================================================
   Remove Ride Options Confirmation Modal
   ============================================================================ */
.remove-rides-backdrop[b-0lmww1yz1c] {
    z-index: 1050;
}

.remove-rides-modal[b-0lmww1yz1c] {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    animation: fadeIn-b-0lmww1yz1c 0.2s ease-in-out;
    overflow: hidden;
}

.remove-rides-header[b-0lmww1yz1c] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
}

    .remove-rides-header h3[b-0lmww1yz1c] {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 600;
        color: #333;
    }

.remove-rides-close[b-0lmww1yz1c] {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: #666;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s;
}

    .remove-rides-close:hover[b-0lmww1yz1c] {
        background: #f0f0f0;
    }

    .remove-rides-close:focus[b-0lmww1yz1c] {
        outline: 2px solid var(--brand-blue, #0066cc);
        outline-offset: 2px;
    }

.remove-rides-body[b-0lmww1yz1c] {
    padding: 20px;
}

    .remove-rides-body p[b-0lmww1yz1c] {
        margin: 0;
        font-size: 0.95rem;
        line-height: 1.5;
        color: #333;
    }

.remove-rides-footer[b-0lmww1yz1c] {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #e0e0e0;
    justify-content: flex-start;
}

.remove-rides-confirm[b-0lmww1yz1c] {
    background: var(--brand-blue, #0066cc);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

    .remove-rides-confirm:hover[b-0lmww1yz1c] {
        background: var(--brand-blue-dark, #004499);
    }

    .remove-rides-confirm:focus[b-0lmww1yz1c] {
        outline: 2px solid var(--brand-blue, #0066cc);
        outline-offset: 2px;
    }

.remove-rides-cancel[b-0lmww1yz1c] {
    background: #f5f5f5;
    color: #333;
    border: 1px solid #ddd;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

    .remove-rides-cancel:hover[b-0lmww1yz1c] {
        background: #e0e0e0;
    }

    .remove-rides-cancel:focus[b-0lmww1yz1c] {
        outline: 2px solid var(--brand-blue, #0066cc);
        outline-offset: 2px;
    }

/* ============================================================================
   Remove Leg Confirmation Modal
   ============================================================================ */
.remove-leg-backdrop[b-0lmww1yz1c] {
    z-index: 1050;
}

.remove-leg-modal[b-0lmww1yz1c] {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    animation: fadeIn-b-0lmww1yz1c 0.2s ease-in-out;
    overflow: hidden;
}

.remove-leg-header[b-0lmww1yz1c] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
}

    .remove-leg-header h3[b-0lmww1yz1c] {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 600;
        color: #333;
    }

.remove-leg-close[b-0lmww1yz1c] {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: #666;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s;
}

    .remove-leg-close:hover[b-0lmww1yz1c] {
        background: #f0f0f0;
    }

    .remove-leg-close:focus[b-0lmww1yz1c] {
        outline: 2px solid var(--brand-blue, #0066cc);
        outline-offset: 2px;
    }

.remove-leg-body[b-0lmww1yz1c] {
    padding: 20px;
}

    .remove-leg-body p[b-0lmww1yz1c] {
        margin: 0;
        font-size: 0.95rem;
        line-height: 1.5;
        color: #333;
    }

.remove-leg-footer[b-0lmww1yz1c] {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #e0e0e0;
    justify-content: flex-start;
}

.remove-leg-confirm[b-0lmww1yz1c] {
    background: var(--brand-blue, #0066cc);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

    .remove-leg-confirm:hover[b-0lmww1yz1c] {
        background: var(--brand-blue-dark, #004499);
    }

    .remove-leg-confirm:focus[b-0lmww1yz1c] {
        outline: 2px solid var(--brand-blue, #0066cc);
        outline-offset: 2px;
    }

.remove-leg-cancel[b-0lmww1yz1c] {
    background: #f5f5f5;
    color: #333;
    border: 1px solid #ddd;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

    .remove-leg-cancel:hover[b-0lmww1yz1c] {
        background: #e0e0e0;
    }

    .remove-leg-cancel:focus[b-0lmww1yz1c] {
        outline: 2px solid var(--brand-blue, #0066cc);
        outline-offset: 2px;
    }

/* ============================================================================
   Responsive Mobile/Desktop Visibility for Secondary Address
   ============================================================================ */

/* Mobile-only: visible on mobile, hidden on desktop */
.mobile-only[b-0lmww1yz1c] {
    display: block;
}

/* Desktop-only: hidden on mobile, visible on desktop */
.desktop-only[b-0lmww1yz1c] {
    display: none;
}

/* Inline address field styling for desktop */
.inline-address-field[b-0lmww1yz1c] {
    position: relative;
    width: 100%;
}

.inline-float-label[b-0lmww1yz1c] {
    position: absolute;
    top: -8px;
    left: 12px;
    background: white;
    padding: 0 4px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--brand-blue, #0066cc);
    pointer-events: none;
    z-index: 1;
}

/* Prevent scrollbar on the inline address input wrapper and allow dropdown to show */
.inline-address-field[b-0lmww1yz1c]  .address-input-field {
    overflow: visible;
    position: relative;
}

.inline-address-field[b-0lmww1yz1c]  .input-wrapper {
    overflow: visible;
}

/* Ensure the address input itself doesn't scroll - fix scrollbar issue */
.inline-address-field[b-0lmww1yz1c]  .address-input {
    overflow: hidden !important;
    resize: none;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.inline-address-field[b-0lmww1yz1c]  .address-input::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Opera */
    width: 0;
    height: 0;
}

/* The dropdown menu styling */
.inline-address-field[b-0lmww1yz1c]  .autocomplete-dropdown {
    z-index: 10001 !important;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 300px !important;
}

/* Desktop media query - switch visibility */
@media (min-width: 768px) {
    /* Hide mobile button on desktop */
    .mobile-only[b-0lmww1yz1c] {
        display: none !important;
    }

    /* Show inline input on desktop */
    .desktop-only[b-0lmww1yz1c] {
        display: block !important;
    }

    /* Inline address field adjustments for desktop */
    .inline-address-field[b-0lmww1yz1c] {
        margin-top: 4px;
    }

    /* Style the inline address input to match the rest of the form */
    .inline-address-field[b-0lmww1yz1c]  .address-input-field {
        border: 1px solid var(--field-border, #d9d9d9);
        border-radius: 12px;
        background: white;
        transition: border-color 0.2s, box-shadow 0.2s;
        overflow: visible;
    }

    .inline-address-field[b-0lmww1yz1c]  .address-input-field:focus-within {
        border-color: var(--brand-blue, #0066cc);
        box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
    }

    .inline-address-field[b-0lmww1yz1c]  .address-input {
        padding: 14px 12px 14px 40px;
        font-size: 0.95rem;
    }

    .inline-address-field[b-0lmww1yz1c]  .search-icon {
        left: 12px;
        color: var(--brand-blue, #0066cc);
    }
}
/* /Components/SendEmailConfirmationDialog.razor.rz.scp.css */
.email-confirmation-dialog[b-au80qn5rvb] {
    padding: 20px;
    min-width: 320px;
    max-width: 400px;
}

/* Form container */
.form-container[b-au80qn5rvb] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dialog-message[b-au80qn5rvb] {
    color: #555;
    font-size: 0.95rem;
    margin: 0;
}

/* Form group */
.form-group[b-au80qn5rvb] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .form-group label[b-au80qn5rvb] {
        font-weight: 500;
        color: #333;
        font-size: 0.9rem;
    }

.email-input[b-au80qn5rvb] {
    padding: 10px 12px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .email-input:focus[b-au80qn5rvb] {
        outline: none;
        border-color: #4285F4;
        box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.15);
    }

    .email-input.input-error[b-au80qn5rvb] {
        border-color: #dc3545;
    }

        .email-input.input-error:focus[b-au80qn5rvb] {
            box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
        }

.error-message[b-au80qn5rvb] {
    color: #dc3545;
    font-size: 0.85rem;
}

/* Dialog actions */
.dialog-actions[b-au80qn5rvb] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 10px;
}

.dialog-btn[b-au80qn5rvb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    font-size: 0.95rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s, opacity 0.2s;
}

    .dialog-btn:disabled[b-au80qn5rvb] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.btn-cancel[b-au80qn5rvb] {
    background-color: #f0f0f0;
    color: #333;
}

    .btn-cancel:hover:not(:disabled)[b-au80qn5rvb] {
        background-color: #e0e0e0;
    }

.btn-send[b-au80qn5rvb] {
    background-color: #4285F4;
    color: #fff;
}

    .btn-send:hover:not(:disabled)[b-au80qn5rvb] {
        background-color: #3367D6;
    }

.btn-primary[b-au80qn5rvb] {
    background-color: #4285F4;
    color: #fff;
    min-width: 120px;
}

    .btn-primary:hover:not(:disabled)[b-au80qn5rvb] {
        background-color: #3367D6;
    }

/* Sending state */
.sending-container[b-au80qn5rvb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 40px 20px;
    color: #555;
}

.sending-spinner[b-au80qn5rvb] {
    width: 32px;
    height: 32px;
    border: 3px solid #e0e0e0;
    border-top: 3px solid #4285F4;
    border-radius: 50%;
    animation: spin-b-au80qn5rvb 1s linear infinite;
}

@keyframes spin-b-au80qn5rvb {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Success state */
.success-container[b-au80qn5rvb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 20px;
}

    .success-container h4[b-au80qn5rvb] {
        margin: 0;
        color: #28a745;
        font-size: 1.25rem;
    }

    .success-container p[b-au80qn5rvb] {
        margin: 0;
        color: #555;
    }

.email-sent-to[b-au80qn5rvb] {
    font-weight: 600;
    color: #333 !important;
    font-size: 1.05rem;
}

.success-actions[b-au80qn5rvb] {
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Mobile adjustments */
@media (max-width: 480px) {
    .email-confirmation-dialog[b-au80qn5rvb] {
        padding: 16px;
        min-width: unset;
        max-width: unset;
    }

    .dialog-actions[b-au80qn5rvb] {
        flex-direction: column;
    }

    .dialog-btn[b-au80qn5rvb] {
        width: 100%;
    }
}
/* /Components/ServiceTypeComponent.razor.rz.scp.css */
/* ===============================
   Service Type Box - Main Container
   =============================== */
.service-type-box[b-p5pg8iqqgv] {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 12px;
    background-color: #f9f9f9;
    gap: 4px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    margin-bottom: 8px; /* Spacing between tiles */
}

    .service-type-box:hover[b-p5pg8iqqgv] {
        background-color: #e6f0ff;
        border-color: var(--brand-blue, var(--brand-blue));
    }

    .service-type-box:focus[b-p5pg8iqqgv] {
        outline: 2px solid var(--brand-blue, var(--brand-blue));
        outline-offset: 2px;
    }

    .service-type-box:last-child[b-p5pg8iqqgv] {
        margin-bottom: 0;
    }

.no-border[b-p5pg8iqqgv] {
    border: none !important;
    background-color: transparent;
    padding: 0;
}

/* ===============================
   MINIMIZED STATE
   =============================== */
.service-type-box.min[b-p5pg8iqqgv] {
    padding: 8px 12px;
    gap: 0;
}

.minimized-row[b-p5pg8iqqgv] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.min-image-container[b-p5pg8iqqgv] {
    flex: 0 0 auto;
}

.vehicle-thumb[b-p5pg8iqqgv] {
    height: 48px;
    width: auto;
    max-width: 80px;
    object-fit: contain;
    border-radius: 12px;
}

.min-description[b-p5pg8iqqgv] {
    flex: 1;
    min-width: 0;
}

    .min-description .service-short-description[b-p5pg8iqqgv] {
        margin: 0;
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--brand-blue, var(--brand-blue));
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.min-price[b-p5pg8iqqgv] {
    flex: 0 0 auto;
}

    .min-price .price[b-p5pg8iqqgv] {
        font-size: 1rem;
        font-weight: bold;
        color: #2ecc71;
    }

/* ===============================
   EXPANDED STATE - 3 Column Layout
   =============================== */
.expanded-content[b-p5pg8iqqgv] {
    display: grid;
    grid-template-columns: 140px 1fr auto;
    gap: 24px; /* Increased gap for more spacing */
    align-items: start;
}

/* Column 1: Image */
.col-image[b-p5pg8iqqgv] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.service-image[b-p5pg8iqqgv] {
    width: 100%;
    max-width: 140px;
    height: auto;
    max-height: 120px;
    object-fit: contain;
    border-radius: 16px;
    overflow: hidden;
}

/* Column 2: Details (Logo + Descriptions) */
.col-details[b-p5pg8iqqgv] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0; /* Allow text to wrap */
}

.logo-container[b-p5pg8iqqgv] {
    display: flex;
    align-items: center;
}

.logo-image[b-p5pg8iqqgv] {
    height: 24px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
}

.col-details .service-short-description[b-p5pg8iqqgv] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--brand-blue, var(--brand-blue));
}

/* Charter duration display */
.charter-duration[b-p5pg8iqqgv] {
    font-weight: 500;
    color: var(--brand-blue-dark, #1a365d);
    white-space: nowrap;
}

.service-long-desc[b-p5pg8iqqgv] {
    margin: 0;
    font-size: 0.85rem;
    color: #555;
    line-height: 1.4;
}

/* Column 3: Price Info */
.col-price[b-p5pg8iqqgv] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    text-align: right;
    min-width: 150px;
}

/* Price line: price + "Total One-Way" on same line */
.price-line[b-p5pg8iqqgv] {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.price-before-discount[b-p5pg8iqqgv] {
    text-decoration: line-through;
    color: #888;
    font-size: 0.85rem;
}

.price[b-p5pg8iqqgv] {
    font-size: 1.25rem;
    font-weight: bold;
    color: #2ecc71;
}

.price-prefix[b-p5pg8iqqgv] {
    font-size: 0.6rem;
    color: #555;
    white-space: nowrap;
}

.hourly-pricing[b-p5pg8iqqgv] {
    font-size: 0.75rem;
    color: var(--brand-blue-dark, #1a365d);
    font-weight: 500;
}

.discount-label[b-p5pg8iqqgv] {
    font-size: 0.7rem;
    color: #27ae60;
    font-weight: 600;
}

/* Round-trip discount label with icon */
.round-trip-discount[b-p5pg8iqqgv] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.round-trip-discount[b-p5pg8iqqgv]::before {
    content: "🎫";
    font-size: 0.85em;
}

/* Discount label in minimized state */
.min-discount[b-p5pg8iqqgv] {
    display: block;
    margin-top: 2px;
}

.gratuity-details[b-p5pg8iqqgv] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    color: #555;
    margin: 0;
}

.icon-gratuity[b-p5pg8iqqgv] {
    color: var(--brand-blue-dark, #0a2b56);
}

.view-details-link[b-p5pg8iqqgv] {
    font-size: 0.75rem;
    color: var(--brand-blue, var(--brand-blue));
    text-decoration: underline;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
}

    .view-details-link:hover[b-p5pg8iqqgv] {
        color: var(--brand-blue-dark, #1a365d);
    }

.change-button-inline[b-p5pg8iqqgv] {
    margin-top: 4px;
    padding: 4px 12px;
    font-size: 0.75rem;
    background: white;
    color: var(--brand-blue-dark, #0a2b56);
    border: 2px solid var(--brand-blue, var(--brand-blue));
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s;
}

    .change-button-inline:hover[b-p5pg8iqqgv] {
        background: var(--brand-gold, var(--brand-gold));
        border-color: var(--brand-gold, var(--brand-gold));
    }

/* Minimize toggle in expanded view */
.col-price .min-toggle[b-p5pg8iqqgv] {
    margin-top: 4px;
}

/* ===============================
   MOBILE PRICE SECTION (Hidden on Desktop)
   =============================== */
.mobile-price-section[b-p5pg8iqqgv] {
    display: none;
}

/* ===============================
   ASAP NOTICE
   =============================== */
.asap-notice[b-p5pg8iqqgv] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 8px;
    color: #856404;
    font-size: 0.85rem;
    margin: 8px 0;
}

    .asap-notice i[b-p5pg8iqqgv] {
        color: #d39e00;
        font-size: 1rem;
        flex-shrink: 0;
    }

/* ===============================
   DETAILS ROW (Passengers, Luggage, Cancel)
   =============================== */
.details-row[b-p5pg8iqqgv] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    padding: 8px 0 4px 0;
    border-top: 1px solid #e0e0e0;
    margin-top: 0;
}

.service-detail[b-p5pg8iqqgv] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.85rem;
    color: #555;
}

    .service-detail .icon[b-p5pg8iqqgv] {
        font-size: 0.9rem;
        color: var(--brand-blue-dark, #0a2b56);
    }

/* ===============================
   SELECT BUTTON ROW
   =============================== */
.select-button-row[b-p5pg8iqqgv] {
    padding: 0;
}

/* White/outline button style */
.select-button-cta[b-p5pg8iqqgv] {
    width: 100%;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 600;
    background: white;
    color: var(--brand-blue, var(--brand-blue));
    border: 2px solid var(--brand-blue, var(--brand-blue));
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

    .select-button-cta:hover[b-p5pg8iqqgv] {
        background: var(--brand-blue, var(--brand-blue));
        color: white;
    }

    .select-button-cta:focus[b-p5pg8iqqgv] {
        outline: 2px solid var(--brand-gold, var(--brand-gold));
        outline-offset: 2px;
    }

/* ===============================
   MINIMIZE TOGGLE BUTTON
   =============================== */
.min-toggle[b-p5pg8iqqgv] {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    line-height: 1;
    color: #666;
}

    .min-toggle:hover[b-p5pg8iqqgv] {
        background: rgba(0, 0, 0, 0.05);
    }

    .min-toggle .chev[b-p5pg8iqqgv] {
        display: inline-block;
        transition: transform 150ms ease;
        font-size: 1rem;
    }

        .min-toggle .chev[data-state="up"][b-p5pg8iqqgv] {
            transform: rotate(180deg);
        }

        .min-toggle .chev[data-state="down"][b-p5pg8iqqgv] {
            transform: rotate(0deg);
        }

/* ===============================
   MOBILE RESPONSIVE
   =============================== */
@media (max-width: 768px) {
    .service-type-box[b-p5pg8iqqgv] {
        margin-bottom: 12px;
    }

    .expanded-content[b-p5pg8iqqgv] {
        grid-template-columns: 100px 1fr;
        gap: 12px;
    }

    /* Hide price column on mobile - show in mobile-price-section instead */
    .col-price[b-p5pg8iqqgv] {
        display: none;
    }

    .service-image[b-p5pg8iqqgv] {
        max-width: 100px;
        max-height: 80px;
    }

    .logo-image[b-p5pg8iqqgv] {
        height: 20px;
    }

    .col-details .service-short-description[b-p5pg8iqqgv] {
        font-size: 0.9rem;
    }

    .service-long-desc[b-p5pg8iqqgv] {
        font-size: 0.8rem;
    }

    /* Show mobile price section */
    .mobile-price-section[b-p5pg8iqqgv] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: 8px 0;
        border-top: 1px solid #e0e0e0;
        text-align: center;
    }

        .mobile-price-section .price-line[b-p5pg8iqqgv] {
            justify-content: center;
        }

        .mobile-price-section .price[b-p5pg8iqqgv] {
            font-size: 1.2rem;
        }

        .mobile-price-section .gratuity-details[b-p5pg8iqqgv] {
            justify-content: center;
        }

    .details-row[b-p5pg8iqqgv] {
        gap: 10px;
        padding: 6px 0 2px 0;
        border-top: none; /* Remove double border on mobile */
    }

    .service-detail[b-p5pg8iqqgv] {
        font-size: 0.8rem;
    }

    .select-button-cta[b-p5pg8iqqgv] {
        padding: 8px 16px;
        font-size: 0.9rem;
    }

    /* Minimized row adjustments */
    .minimized-row[b-p5pg8iqqgv] {
        gap: 8px;
    }

    .vehicle-thumb[b-p5pg8iqqgv] {
        height: 40px;
        max-width: 60px;
    }

    .min-description .service-short-description[b-p5pg8iqqgv] {
        font-size: 0.85rem;
    }

    .min-price .price[b-p5pg8iqqgv] {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .service-type-box[b-p5pg8iqqgv] {
        padding: 8px;
        gap: 6px;
        margin-bottom: 10px;
    }

    .expanded-content[b-p5pg8iqqgv] {
        grid-template-columns: 80px 1fr;
        gap: 8px;
    }

    .service-image[b-p5pg8iqqgv] {
        max-width: 80px;
        max-height: 70px;
    }

    .col-details .service-short-description[b-p5pg8iqqgv] {
        font-size: 0.85rem;
    }

    .service-long-desc[b-p5pg8iqqgv] {
        font-size: 0.75rem;
        line-height: 1.3;
    }

    .mobile-price-section[b-p5pg8iqqgv] {
        padding: 6px 0;
        gap: 1px;
    }

        .mobile-price-section .price[b-p5pg8iqqgv] {
            font-size: 1.1rem;
        }

        .mobile-price-section .gratuity-details[b-p5pg8iqqgv] {
            font-size: 0.7rem;
        }

        .mobile-price-section .view-details-link[b-p5pg8iqqgv] {
            font-size: 0.7rem;
        }

    .details-row[b-p5pg8iqqgv] {
        gap: 8px;
        padding: 4px 0 2px 0;
    }

    .service-detail[b-p5pg8iqqgv] {
        font-size: 0.75rem;
    }

    .select-button-cta[b-p5pg8iqqgv] {
        padding: 8px 16px;
        font-size: 0.85rem;
    }
}

/* ===============================
   PRICE DETAILS MODAL
   =============================== */
.price-modal-backdrop[b-p5pg8iqqgv] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

.price-modal-content[b-p5pg8iqqgv] {
    background: white;
    border-radius: 16px;
    max-width: 400px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.price-modal-header[b-p5pg8iqqgv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
}

    .price-modal-header h3[b-p5pg8iqqgv] {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--brand-blue-dark, #1a365d);
    }

.price-modal-close[b-p5pg8iqqgv] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

    .price-modal-close:hover[b-p5pg8iqqgv] {
        color: #374151;
    }

.price-modal-body[b-p5pg8iqqgv] {
    padding: 20px;
}

.price-modal-service-name[b-p5pg8iqqgv] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--brand-blue, #2563eb);
    margin-bottom: 16px;
    text-align: center;
}

.price-line-items[b-p5pg8iqqgv] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.price-line-item[b-p5pg8iqqgv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.95rem;
}

.price-line-label[b-p5pg8iqqgv] {
    color: #4b5563;
}

.price-line-value[b-p5pg8iqqgv] {
    font-weight: 500;
    color: #1f2937;
}

.price-line-divider[b-p5pg8iqqgv] {
    height: 1px;
    background-color: #e5e7eb;
    margin: 8px 0;
}

.discount-line .price-line-label[b-p5pg8iqqgv] {
    color: #059669;
}

.discount-value[b-p5pg8iqqgv] {
    color: #059669 !important;
    font-weight: 600 !important;
}

.gratuity-value[b-p5pg8iqqgv] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.gratuity-included-badge[b-p5pg8iqqgv] {
    font-size: 0.7rem;
    background-color: #d1fae5;
    color: #059669;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
}

.gratuity-not-included[b-p5pg8iqqgv] {
    color: #9ca3af;
    font-style: italic;
    font-weight: normal;
}

.total-line[b-p5pg8iqqgv] {
    font-size: 1.1rem;
    font-weight: 600;
}

    .total-line .price-line-label[b-p5pg8iqqgv] {
        color: #1f2937;
    }

.total-value[b-p5pg8iqqgv] {
    color: #2ecc71 !important;
    font-size: 1.2rem !important;
}

.price-modal-hourly-info[b-p5pg8iqqgv] {
    margin-top: 16px;
    padding: 12px;
    background-color: #f0f9ff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--brand-blue-dark, #1a365d);
}

    .price-modal-hourly-info .hourly-icon[b-p5pg8iqqgv] {
        font-size: 1rem;
    }

.price-modal-footer[b-p5pg8iqqgv] {
    padding: 16px 20px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: center;
}

/* Mobile modal adjustments */
@media (max-width: 480px) {
    .price-modal-content[b-p5pg8iqqgv] {
        margin: 10px;
        max-width: calc(100% - 20px);
    }

    .price-modal-header[b-p5pg8iqqgv] {
        padding: 12px 16px;
    }

    .price-modal-body[b-p5pg8iqqgv] {
        padding: 16px;
    }

    .price-line-item[b-p5pg8iqqgv] {
        font-size: 0.9rem;
    }

    .total-value[b-p5pg8iqqgv] {
        font-size: 1.1rem !important;
    }
}
/* /Components/ServiceTypeSelectionComponent.razor.rz.scp.css */
.service-selection-title[b-2lulpfpuwt] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    text-align: center;
    margin: 0 0 8px 0;
    padding: 0;
}

.service-selection-container[b-2lulpfpuwt] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 2px;
    max-width: 800px;
    margin: 0 auto;
}

.service-types-list[b-2lulpfpuwt] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Allow focus outline to show */
    outline: none;
}

/* Focus styles for keyboard navigation */
.service-types-list:focus-visible[b-2lulpfpuwt] {
    outline: none;
}

.selected-service[b-2lulpfpuwt] {
    border: 2px solid var(--brand-blue, var(--brand-blue));
    background-color: var(--brand-blue-dark, var(--brand-blue-dark));
}

.service-type-hint[b-2lulpfpuwt] {
    font-size: .95em;
    font-weight: 500;
    color: #444;
    margin-bottom: 2px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    display: flex;
    justify-content: center;
    border: none;
    padding: 0;
}

.trip-details-hint-container[b-2lulpfpuwt] {
    text-align: center;
    margin-bottom: 0px;
    color: #555;
    font-size: 0.9em;
}

.loading-container[b-2lulpfpuwt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px 10px;
}

.loading-message[b-2lulpfpuwt] {
    text-align: center;
    color: var(--brand-blue-dark);
    font-size: 1em;
    margin: 0;
}

.unavailable-services-notice[b-2lulpfpuwt] {
    text-align: center;
    font-size: 0.8em;
    color: #888;
    font-style: italic;
    margin-bottom: 2px;
    padding: 0 8px;
}

/* Capacity Exceeded Section - Not styled as an error */
.capacity-exceeded-container[b-2lulpfpuwt] {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 16px;
    text-align: center;
}

.capacity-exceeded-message[b-2lulpfpuwt] {
    color: #495057;
    font-size: 1em;
    margin-bottom: 16px;
    line-height: 1.5;
}

/* Multiple Reservations Note */
.multiple-reservations-note[b-2lulpfpuwt] {
    color: #856404;
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 6px;
    padding: 8px 16px;
    font-weight: 500;
    font-size: 0.95em;
    margin-bottom: 16px;
}

/* Adjust Passenger Counts Button */
.adjust-passengers-button[b-2lulpfpuwt] {
    margin-bottom: 16px;
    background-color: #fff !important;
    color: #333 !important;
    border: 1px solid #333 !important;
}

    .adjust-passengers-button:hover[b-2lulpfpuwt] {
        background-color: #f0f0f0 !important;
    }

.capacity-table-header[b-2lulpfpuwt] {
    color: #333;
    margin-bottom: 8px;
    text-align: left;
}

/* Vehicle Capacity Table Styles */
.vehicle-capacity-table[b-2lulpfpuwt] {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 16px 0;
    font-size: 0.9em;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    overflow: hidden;
}

    .vehicle-capacity-table thead[b-2lulpfpuwt] {
        background-color: var(--brand-blue, var(--brand-blue));
        color: #fff;
    }

    .vehicle-capacity-table th[b-2lulpfpuwt] {
        padding: 10px 12px;
        text-align: left;
        font-weight: 600;
    }

    .vehicle-capacity-table .vehicle-name-header[b-2lulpfpuwt] {
        text-align: left;
    }

    .vehicle-capacity-table .capacity-header[b-2lulpfpuwt] {
        text-align: center;
        width: 60px;
    }

    .vehicle-capacity-table .price-header[b-2lulpfpuwt] {
        text-align: right;
        width: 90px;
    }

    .vehicle-capacity-table th .material-icons[b-2lulpfpuwt] {
        font-size: 1.1em;
        vertical-align: middle;
    }

    .vehicle-capacity-table tbody tr[b-2lulpfpuwt] {
        border-bottom: 1px solid #e0e0e0;
    }

        .vehicle-capacity-table tbody tr:last-child[b-2lulpfpuwt] {
            border-bottom: none;
        }

        .vehicle-capacity-table tbody tr.alt-row[b-2lulpfpuwt] {
            background-color: #f8f9fa;
        }

    .vehicle-capacity-table td[b-2lulpfpuwt] {
        padding: 10px 12px;
        color: #333;
    }

    .vehicle-capacity-table .vehicle-name-cell[b-2lulpfpuwt] {
        text-align: left;
    }

    .vehicle-capacity-table .capacity-cell[b-2lulpfpuwt] {
        text-align: center;
        font-weight: 500;
        color: var(--brand-blue-dark, var(--brand-blue-dark));
    }

    .vehicle-capacity-table .price-cell[b-2lulpfpuwt] {
        text-align: right;
        font-weight: 600;
        color: var(--brand-blue-dark, var(--brand-blue-dark));
    }

.capacity-actions[b-2lulpfpuwt] {
    margin-top: 12px;
    text-align: center;
}

    .capacity-actions .btn[b-2lulpfpuwt] {
        min-width: 100px;
    }

/* ============================================
   MODAL BACKDROP (shared by all ASAP modals)
   ============================================ */
.modal-backdrop[b-2lulpfpuwt] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1050;
}

/* ============================================
   ASAP WAITING MODAL
   ============================================ */
.asap-waiting-modal[b-2lulpfpuwt] {
    background: white;
    border-radius: 16px;
    padding: 32px 40px;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    animation: modalSlideIn-b-2lulpfpuwt 0.3s ease-out;
}

.asap-waiting-content[b-2lulpfpuwt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
}

.asap-waiting-title[b-2lulpfpuwt] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--brand-blue-dark, var(--brand-blue-dark));
}

.asap-waiting-message[b-2lulpfpuwt] {
    margin: 0;
    font-size: 1rem;
    color: #555;
    line-height: 1.5;
}

.asap-waiting-timer[b-2lulpfpuwt] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--brand-blue, var(--brand-blue));
    font-variant-numeric: tabular-nums;
}

.asap-cancel-button[b-2lulpfpuwt] {
    margin-top: 8px;
    padding: 10px 24px;
    min-width: 120px;
}

/* ============================================
   ASAP REJECTED MODAL
   ============================================ */
.asap-rejected-modal[b-2lulpfpuwt] {
    background: white;
    border-radius: 16px;
    padding: 32px 40px;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    animation: modalSlideIn-b-2lulpfpuwt 0.3s ease-out;
}

.asap-rejected-content[b-2lulpfpuwt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
}

.asap-rejected-icon[b-2lulpfpuwt] {
    font-size: 4rem;
    color: #e74c3c;
}

    .asap-rejected-icon i[b-2lulpfpuwt] {
        display: block;
    }

.asap-rejected-title[b-2lulpfpuwt] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
}

.asap-rejected-message[b-2lulpfpuwt] {
    margin: 0;
    font-size: 1rem;
    color: #555;
    line-height: 1.5;
}

/* ============================================
   ASAP APPROVED MODAL
   ============================================ */
.asap-approved-modal[b-2lulpfpuwt] {
    background: white;
    border-radius: 16px;
    padding: 32px 40px;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    animation: modalSlideIn-b-2lulpfpuwt 0.3s ease-out;
}

.asap-approved-content[b-2lulpfpuwt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
}

.asap-approved-icon[b-2lulpfpuwt] {
    font-size: 4rem;
    color: #2ecc71;
}

    .asap-approved-icon i[b-2lulpfpuwt] {
        display: block;
    }

.asap-approved-title[b-2lulpfpuwt] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
}

.asap-approved-message[b-2lulpfpuwt] {
    margin: 0;
    font-size: 1rem;
    color: #555;
    line-height: 1.5;
}

.asap-approved-urgency[b-2lulpfpuwt] {
    margin: 0;
    font-size: 0.9rem;
    color: #856404;
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 6px;
    padding: 8px 16px;
    font-weight: 500;
}

/* ============================================
   ASAP ALTERNATE TIME MODAL
   ============================================ */
.asap-alternate-modal[b-2lulpfpuwt] {
    background: white;
    border-radius: 16px;
    padding: 32px 40px;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    animation: modalSlideIn-b-2lulpfpuwt 0.3s ease-out;
}

.asap-alternate-content[b-2lulpfpuwt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}

.asap-alternate-icon[b-2lulpfpuwt] {
    font-size: 3.5rem;
    color: var(--brand-blue, var(--brand-blue));
}

    .asap-alternate-icon i[b-2lulpfpuwt] {
        display: block;
    }

.asap-alternate-title[b-2lulpfpuwt] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
}

.asap-alternate-message[b-2lulpfpuwt] {
    margin: 0;
    font-size: 1rem;
    color: #555;
    line-height: 1.5;
}

.asap-alternate-time[b-2lulpfpuwt] {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    color: var(--brand-blue-dark, var(--brand-blue-dark));
}

.asap-alternate-date[b-2lulpfpuwt] {
    margin: 0;
    font-size: 1rem;
    color: #666;
    font-weight: 500;
}

.asap-alternate-actions[b-2lulpfpuwt] {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

    .asap-alternate-actions .btn[b-2lulpfpuwt] {
        min-width: 120px;
    }

/* Modal animation */
@keyframes modalSlideIn-b-2lulpfpuwt {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Mobile responsive */
@media (max-width: 480px) {
    .asap-waiting-modal[b-2lulpfpuwt],
    .asap-rejected-modal[b-2lulpfpuwt],
    .asap-approved-modal[b-2lulpfpuwt],
    .asap-alternate-modal[b-2lulpfpuwt] {
        padding: 24px 20px;
        width: 95%;
    }

    .asap-waiting-title[b-2lulpfpuwt],
    .asap-rejected-title[b-2lulpfpuwt],
    .asap-approved-title[b-2lulpfpuwt],
    .asap-alternate-title[b-2lulpfpuwt] {
        font-size: 1.25rem;
    }

    .asap-waiting-message[b-2lulpfpuwt],
    .asap-rejected-message[b-2lulpfpuwt],
    .asap-approved-message[b-2lulpfpuwt],
    .asap-alternate-message[b-2lulpfpuwt] {
        font-size: 0.9rem;
    }

    .asap-rejected-icon[b-2lulpfpuwt],
    .asap-approved-icon[b-2lulpfpuwt] {
        font-size: 3rem;
    }

    .asap-alternate-icon[b-2lulpfpuwt] {
        font-size: 2.5rem;
    }

    .asap-alternate-time[b-2lulpfpuwt] {
        font-size: 1.5rem;
    }

    .asap-alternate-actions[b-2lulpfpuwt] {
        flex-direction: column;
        width: 100%;
    }

        .asap-alternate-actions .btn[b-2lulpfpuwt] {
            width: 100%;
        }
}
/* /Components/SharedRidePickupTimeComponent.razor.rz.scp.css */
/* ===============================
   Shared Ride Pickup Time Component
   =============================== */

.shared-ride-pickup-content[b-agkdif9rn7] {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: 16px;
}

/* ===============================
   Header Info
   =============================== */

.pickup-header-info[b-agkdif9rn7] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: linear-gradient(135deg, #F0F7FF 0%, #E5F0FF 100%);
    border: 1px solid #B8D4F8;
    border-radius: 8px;
    margin-bottom: 16px;
}

    .pickup-header-info .info-icon[b-agkdif9rn7] {
        color: var(--brand-blue, var(--brand-blue));
        font-size: 20px !important;
        flex-shrink: 0;
        margin-top: 2px;
    }

    .pickup-header-info p[b-agkdif9rn7] {
        margin: 0;
        font-size: 0.85rem;
        color: #1e3a5f;
        line-height: 1.4;
    }

/* ===============================
   Time Slots Section
   =============================== */

.time-slots-section[b-agkdif9rn7] {
    margin-bottom: 16px;
}

.slots-label[b-agkdif9rn7] {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--brand-blue, var(--brand-blue));
    margin-bottom: 10px;
}

.time-slots-list[b-agkdif9rn7] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ===============================
   Time Slot Card
   =============================== */

.time-slot-card[b-agkdif9rn7] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #ffffff;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    width: 100%;
    font-family: inherit;
}

    .time-slot-card:hover:not(.closed):not(.selected)[b-agkdif9rn7] {
        border-color: var(--brand-blue, var(--brand-blue));
        background: #f8faff;
    }

    .time-slot-card.selected[b-agkdif9rn7] {
        border-color: var(--brand-blue, var(--brand-blue));
        background: linear-gradient(135deg, #F0F7FF 0%, #E8F2FF 100%);
        box-shadow: 0 2px 8px rgba(41, 99, 168, 0.15);
    }

    .time-slot-card.closed[b-agkdif9rn7] {
        opacity: 0.5;
        cursor: not-allowed;
        background: #f5f5f5;
    }

/* Radio Icon */
.slot-radio[b-agkdif9rn7] {
    flex-shrink: 0;
}

    .slot-radio .radio-unchecked[b-agkdif9rn7] {
        color: #bbb;
        font-size: 24px !important;
    }

    .slot-radio .radio-checked[b-agkdif9rn7] {
        color: var(--brand-blue, var(--brand-blue));
        font-size: 24px !important;
    }

/* Time Info */
.slot-time-info[b-agkdif9rn7] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-grow: 1;
}

.slot-time[b-agkdif9rn7] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--brand-blue-dark, #06325f);
}

/* Time chip styling (same as PickupDateTimeComponent) */
.slot-chip[b-agkdif9rn7] {
    padding: 4px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #F2F6FF 0%, #E5EEFF 100%);
    color: var(--brand-blue-dark, #06325f);
    border: 1px solid var(--brand-blue, var(--brand-blue));
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: capitalize;
}

    /* Time chip color variants */
    .slot-chip.time-morning[b-agkdif9rn7] {
        background: linear-gradient(135deg, #FFF9E6 0%, #FFF3CC 100%);
        border-color: #F59E0B;
        color: #92400E;
    }

    .slot-chip.time-midday[b-agkdif9rn7],
    .slot-chip.time-afternoon[b-agkdif9rn7] {
        background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
        border-color: #F59E0B;
        color: #92400E;
    }

    .slot-chip.time-evening[b-agkdif9rn7] {
        background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%);
        border-color: #6366F1;
        color: #312E81;
    }

    .slot-chip.time-midnight[b-agkdif9rn7],
    .slot-chip.time-after-midnight[b-agkdif9rn7],
    .slot-chip.time-before-midnight[b-agkdif9rn7],
    .slot-chip.time-night[b-agkdif9rn7] {
        background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%);
        border-color: #4F46E5;
        color: #1E1B4B;
    }

    .slot-chip.time-early-morning[b-agkdif9rn7] {
        background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
        border-color: #F59E0B;
        color: #92400E;
    }

/* Unavailable Badge */
.slot-unavailable-badge[b-agkdif9rn7] {
    margin-left: auto;
    padding: 4px 10px;
    background: #fee2e2;
    color: #dc2626;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* ===============================
   No Slots Message
   =============================== */

.no-slots-message[b-agkdif9rn7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px;
    background: #fff8e6;
    border: 1px solid #f0c674;
    border-radius: 8px;
    text-align: center;
}

    .no-slots-message .rzi[b-agkdif9rn7] {
        color: #d97706;
        font-size: 32px !important;
    }

    .no-slots-message p[b-agkdif9rn7] {
        margin: 0;
        color: #92400e;
        font-size: 0.9rem;
    }

/* ===============================
   Selected Summary
   =============================== */

.selected-summary[b-agkdif9rn7] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 8px;
    margin-bottom: 12px;
}

    .selected-summary .summary-icon[b-agkdif9rn7] {
        color: #059669;
        font-size: 20px !important;
    }

    .selected-summary span[b-agkdif9rn7] {
        font-size: 0.9rem;
        color: #065f46;
    }

    .selected-summary strong[b-agkdif9rn7] {
        font-weight: 600;
    }

/* ===============================
   Suggested Time Hint
   =============================== */

.suggested-time-hint[b-agkdif9rn7] {
    margin: 0 0 12px 0;
    font-size: 0.8rem;
    color: #666;
    text-align: center;
    font-style: italic;
}

/* ===============================
   Footer Buttons
   =============================== */

.pickup-footer[b-agkdif9rn7] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    align-items: center;
    padding: 12px 0 0 0;
    margin-top: 4px;
    border-top: 1px solid #eee;
}

    .pickup-footer .btn-cancel[b-agkdif9rn7] {
        background: #e8e8e8;
        color: #555;
        border: none;
        border-radius: 50px;
        padding: 12px 24px;
        font-size: 0.9rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
        white-space: nowrap;
    }

        .pickup-footer .btn-cancel:hover[b-agkdif9rn7] {
            background: #d8d8d8;
            color: #333;
        }

    .pickup-footer .rz-button.rz-button-primary[b-agkdif9rn7] {
        border-radius: 50px !important;
        padding: 12px 24px !important;
    }

        .pickup-footer .rz-button.rz-button-primary:disabled[b-agkdif9rn7] {
            opacity: 0.5;
            cursor: not-allowed;
        }

/* ===============================
   Mobile Responsive
   =============================== */

@media (max-width: 480px) {
    .shared-ride-pickup-content[b-agkdif9rn7] {
        padding: 12px;
    }

    .pickup-header-info[b-agkdif9rn7] {
        padding: 10px 12px;
    }

        .pickup-header-info p[b-agkdif9rn7] {
            font-size: 0.8rem;
        }

    .time-slot-card[b-agkdif9rn7] {
        padding: 12px 14px;
    }

    .slot-time[b-agkdif9rn7] {
        font-size: 1rem;
    }

    .slot-chip[b-agkdif9rn7] {
        font-size: 0.65rem;
        padding: 3px 8px;
    }

    .pickup-footer[b-agkdif9rn7] {
        gap: 8px;
    }

        .pickup-footer .btn-cancel[b-agkdif9rn7] {
            padding: 10px 16px;
            font-size: 0.85rem;
        }

        .pickup-footer .rz-button.rz-button-primary[b-agkdif9rn7] {
            padding: 10px 16px !important;
        }

        .pickup-footer .rz-button .rz-button-text[b-agkdif9rn7] {
            font-size: 12px !important;
        }
}

/* ===============================
   High Contrast Mode
   =============================== */

@media (prefers-contrast: high) {
    .time-slot-card[b-agkdif9rn7] {
        border: 3px solid #000;
    }

        .time-slot-card.selected[b-agkdif9rn7] {
            border-color: #000;
            background: #e0e0e0;
        }

    .slot-time[b-agkdif9rn7] {
        color: #000;
    }
}
/* /Components/TimeWheelPickerComponent.razor.rz.scp.css */
/* ===============================
   Time Wheel Picker Component
   iOS-style wheel picker for mobile time selection
   =============================== */

/* ===============================
   Modal Overlay & Container
   =============================== */
.time-wheel-overlay[b-aoszbft2xl] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 100000; /* Very high to appear above Radzen dialogs */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    isolation: isolate; /* Create new stacking context */
}

    .time-wheel-overlay.open[b-aoszbft2xl] {
        opacity: 1;
        visibility: visible;
    }

.time-wheel-modal[b-aoszbft2xl] {
    background: white;
    border-radius: 16px 16px 0 0;
    width: 100%;
    max-width: 500px;
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
}

.time-wheel-overlay.open .time-wheel-modal[b-aoszbft2xl] {
    transform: translateY(0);
}

/* ===============================
   Modal Header
   =============================== */
.time-wheel-header[b-aoszbft2xl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid #e5e5e5;
}

    .time-wheel-header button[b-aoszbft2xl] {
        background: none;
        border: none;
        font-size: 16px;
        padding: 8px 12px;
        cursor: pointer;
        border-radius: 8px;
        transition: background 0.2s;
        min-height: 44px;
        min-width: 70px;
        -webkit-tap-highlight-color: transparent;
    }

        .time-wheel-header button:active[b-aoszbft2xl] {
            background: #f0f0f0;
        }

.btn-cancel-wheel[b-aoszbft2xl] {
    color: #666;
}

.time-wheel-title[b-aoszbft2xl] {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

/* Header spacer to balance Cancel button on left */
.header-spacer[b-aoszbft2xl] {
    min-width: 70px;
}

/* ===============================
   Descriptive Prompt
   =============================== */
.time-wheel-prompt[b-aoszbft2xl] {
    text-align: center;
    padding: 16px 20px 8px;
}

    .time-wheel-prompt p[b-aoszbft2xl] {
        margin: 0;
        font-size: 15px;
        color: var(--brand-blue-dark, #06325f);
        line-height: 1.4;
    }

    .time-wheel-prompt[b-aoszbft2xl]  .emphasis {
        color: white;
        background: var(--brand-blue, #0a4a8a);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 2px 8px;
        border-radius: 4px;
    }

/* ===============================
   Preview Display
   =============================== */
.time-wheel-preview[b-aoszbft2xl] {
    text-align: center;
    padding: 8px 16px 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.preview-time[b-aoszbft2xl] {
    font-size: 18px;
    font-weight: 600;
    color: var(--brand-blue-dark, #06325f);
}

.time-wheel-preview .time-chip[b-aoszbft2xl] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, #F2F6FF 0%, #E5EEFF 100%);
    border: 1px solid var(--brand-blue, #0a4a8a);
    font-size: 12px;
    font-weight: 500;
    text-transform: capitalize;
    color: var(--brand-blue-dark, #06325f);
}

    /* Time chip color variants */
    .time-wheel-preview .time-chip.time-morning[b-aoszbft2xl] {
        background: linear-gradient(135deg, #FFF9E6 0%, #FFF3CC 100%);
        border-color: #F59E0B;
        color: #92400E;
    }

    .time-wheel-preview .time-chip.time-midday[b-aoszbft2xl],
    .time-wheel-preview .time-chip.time-afternoon[b-aoszbft2xl] {
        background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
        border-color: #F59E0B;
        color: #92400E;
    }

    .time-wheel-preview .time-chip.time-evening[b-aoszbft2xl] {
        background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%);
        border-color: #6366F1;
        color: #312E81;
    }

    .time-wheel-preview .time-chip.time-midnight[b-aoszbft2xl],
    .time-wheel-preview .time-chip.time-after-midnight[b-aoszbft2xl],
    .time-wheel-preview .time-chip.time-before-midnight[b-aoszbft2xl],
    .time-wheel-preview .time-chip.time-night[b-aoszbft2xl] {
        background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%);
        border-color: #4F46E5;
        color: #1E1B4B;
    }

    .time-wheel-preview .time-chip.time-early-morning[b-aoszbft2xl] {
        background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
        border-color: #F59E0B;
        color: #92400E;
    }

/* ===============================
   Wheel Picker Container
   =============================== */
.wheel-picker-container[b-aoszbft2xl] {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Don't stretch children */
    padding: 0 8px;
    position: relative;
    background: #fafafa;
    height: 220px;
    overflow: hidden; /* Clip any overflow from children */
}

/* Selection highlight band - positioned at exact center */
.selection-highlight[b-aoszbft2xl] {
    position: absolute;
    left: 16px;
    right: 16px;
    top: 88px; /* 2 items from top = 2 * 44px */
    height: 44px;
    background: white;
    border-radius: 10px;
    border: 2px solid var(--brand-blue, #0a4a8a);
    pointer-events: none;
    z-index: 1;
    box-shadow: 0 2px 8px rgba(10, 74, 138, 0.1);
}

/* ===============================
   Individual Wheel Column
   =============================== */
.wheel-column[b-aoszbft2xl] {
    flex: 0 0 90px;
    width: 90px;
    height: 220px !important;
    max-height: 220px !important;
    min-height: 220px !important;
    overflow-y: scroll !important;
    overflow-x: hidden;
    position: relative;
    z-index: 2;
    /* CRITICAL for iOS Safari scrolling */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    /* Ensure touch scrolling works inside dialogs */
    touch-action: pan-y;
    /* Hide scrollbar but allow scrolling */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .wheel-column[b-aoszbft2xl]::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

.wheel-column-period[b-aoszbft2xl] {
    flex: 0 0 70px;
    width: 70px;
}

/* Separator colon between hour and minute */
.wheel-separator[b-aoszbft2xl] {
    font-size: 24px;
    font-weight: 600;
    color: var(--brand-blue-dark, #06325f);
    padding: 0 4px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 220px; /* Match container height */
}

/* Spacer between minute and AM/PM */
.wheel-spacer[b-aoszbft2xl] {
    width: 12px;
}

/* ===============================
   Wheel Items
   =============================== */
.wheel-item[b-aoszbft2xl] {
    height: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #999;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s, font-size 0.15s, background 0.15s;
    border-radius: 8px;
    margin: 0 4px;
}

    /* Hover state for desktop */
    .wheel-item:hover[b-aoszbft2xl] {
        background: rgba(10, 74, 138, 0.06);
    }

    /* Active/tap state */
    .wheel-item:active[b-aoszbft2xl] {
        background: rgba(10, 74, 138, 0.12);
    }

    /* Selected item (center) */
    .wheel-item.selected[b-aoszbft2xl] {
        color: var(--brand-blue-dark, #06325f);
        font-weight: 600;
        font-size: 22px;
    }

    /* Adjacent items (1 away from center) */
    .wheel-item.adjacent[b-aoszbft2xl] {
        color: #666;
        font-size: 18px;
    }

    /* Far items (2+ away from center) */
    .wheel-item.far[b-aoszbft2xl] {
        color: #bbb;
        font-size: 16px;
    }

/* Padding elements to allow first/last items to center */
.wheel-padding[b-aoszbft2xl] {
    height: 88px;
    min-height: 88px;
    flex-shrink: 0;
    pointer-events: none;
}

/* ===============================
   Hint Text
   =============================== */
.time-wheel-hint[b-aoszbft2xl] {
    padding: 12px 20px 8px;
    text-align: center;
}

    .time-wheel-hint p[b-aoszbft2xl] {
        margin: 0;
        font-size: 13px;
        font-style: italic;
        color: #666;
        background: #f0f7ff;
        padding: 10px 16px;
        border-radius: 8px;
        line-height: 1.4;
    }

/* ===============================
   Bottom Action Buttons
   =============================== */
.time-wheel-actions[b-aoszbft2xl] {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #e5e5e5;
    background: #fff;
}

.btn-cancel-bottom[b-aoszbft2xl],
.btn-save-bottom[b-aoszbft2xl] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    min-height: 48px;
    -webkit-tap-highlight-color: transparent;
}

.btn-cancel-bottom[b-aoszbft2xl] {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
}

    .btn-cancel-bottom:hover[b-aoszbft2xl] {
        background: #e2e8f0;
    }

    .btn-cancel-bottom:active[b-aoszbft2xl] {
        background: #cbd5e1;
    }

.btn-save-bottom[b-aoszbft2xl] {
    background: var(--brand-blue, #0a4a8a);
    color: white;
}

    .btn-save-bottom:hover[b-aoszbft2xl] {
        filter: brightness(1.1);
    }

    .btn-save-bottom:active[b-aoszbft2xl] {
        filter: brightness(0.95);
    }

/* ===============================
   Desktop - Show more items (9 instead of 5)
   =============================== */
@media (min-width: 768px) {
    .wheel-picker-container[b-aoszbft2xl] {
        height: 396px; /* 9 items * 44px */
    }

    .selection-highlight[b-aoszbft2xl] {
        top: 176px; /* 4 items from top = 4 * 44px */
    }

    .wheel-column[b-aoszbft2xl] {
        height: 396px !important;
        max-height: 396px !important;
        min-height: 396px !important;
    }

    .wheel-padding[b-aoszbft2xl] {
        height: 176px; /* 4 items worth of padding */
        min-height: 176px;
    }

    .wheel-separator[b-aoszbft2xl] {
        height: 396px; /* Match desktop container height */
    }
}

/* ===============================
   Responsive Adjustments
   =============================== */
@media (min-width: 500px) {
    .time-wheel-modal[b-aoszbft2xl] {
        border-radius: 16px;
        margin-bottom: 20px;
    }
}

@media (max-width: 380px) {
    .wheel-column[b-aoszbft2xl] {
        max-width: 75px;
    }

    .wheel-separator[b-aoszbft2xl] {
        font-size: 22px;
        padding: 0 2px;
    }

    .time-wheel-hint p[b-aoszbft2xl] {
        font-size: 12px;
        padding: 8px 12px;
    }

    .time-wheel-prompt p[b-aoszbft2xl] {
        font-size: 14px;
    }

    .btn-cancel-bottom[b-aoszbft2xl],
    .btn-save-bottom[b-aoszbft2xl] {
        padding: 12px 16px;
        font-size: 13px;
    }
}

@media (max-width: 320px) {
    .wheel-column[b-aoszbft2xl] {
        max-width: 65px;
    }

    .wheel-spacer[b-aoszbft2xl] {
        width: 8px;
    }

    .time-wheel-header button[b-aoszbft2xl] {
        padding: 8px;
        min-width: 60px;
        font-size: 14px;
    }

    .time-wheel-prompt p[b-aoszbft2xl] {
        font-size: 13px;
    }

    .header-spacer[b-aoszbft2xl] {
        min-width: 60px;
    }

    .time-wheel-actions[b-aoszbft2xl] {
        padding: 12px 16px;
        gap: 8px;
    }

    .btn-cancel-bottom[b-aoszbft2xl],
    .btn-save-bottom[b-aoszbft2xl] {
        padding: 12px 12px;
        font-size: 12px;
    }
}

/* ===============================
   Animation
   =============================== */
@keyframes slideUp-b-aoszbft2xl {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

.time-wheel-overlay.open .time-wheel-modal[b-aoszbft2xl] {
    animation: slideUp-b-aoszbft2xl 0.3s ease-out;
}
/* /Components/TripReviewPanel.razor.rz.scp.css */
/* ============================================
   TripReviewPanel - Trip-centric review layout
   ============================================ */

.trip-review-panel[b-u2u6baavik] {
    display: flex;
    flex-direction: column;
    max-height: 80vh;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
}

/* Header */
.trip-review-header[b-u2u6baavik] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: linear-gradient(135deg, var(--brand-blue-light) 0%, var(--brand-blue) 100%);
    color: white;
}

.trip-review-header h6[b-u2u6baavik] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.trip-review-close-btn[b-u2u6baavik] {
    background: transparent;
    border: none;
    color: white;
    font-size: 1.5rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.trip-review-close-btn:hover[b-u2u6baavik] {
    opacity: 1;
}

/* Body - scrollable content area */
.trip-review-body[b-u2u6baavik] {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    background: #f8f9fa;
}

/* Trip Card */
.trip-card[b-u2u6baavik] {
    background: white;
    border-radius: 10px;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.trip-card:last-of-type[b-u2u6baavik] {
    margin-bottom: 10px;
}

.trip-card-header[b-u2u6baavik] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: linear-gradient(135deg, #f0f4f8 0%, #e8ecf0 100%);
    border-bottom: 1px solid #e0e4e8;
}

.trip-number[b-u2u6baavik] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: var(--brand-blue-dark);
    color: white;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}

.trip-title[b-u2u6baavik] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--brand-blue-dark);
}

.trip-card-body[b-u2u6baavik] {
    padding: 10px 12px;
}

/* Trip Detail Rows */
.trip-detail-row[b-u2u6baavik] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
}

.trip-detail-row:first-child[b-u2u6baavik] {
    padding-top: 0;
}

.trip-detail-row:last-child[b-u2u6baavik] {
    padding-bottom: 0;
}

.trip-icon[b-u2u6baavik] {
    font-size: 18px;
    width: 20px;
    flex-shrink: 0;
    margin-top: 1px;
}

.pickup-icon[b-u2u6baavik] {
    color: #28a745;
}

.dropoff-icon[b-u2u6baavik] {
    color: #dc3545;
}

.airport-icon[b-u2u6baavik] {
    color: var(--brand-blue-dark);
}

.time-icon[b-u2u6baavik] {
    color: #6c757d;
}

.flight-icon[b-u2u6baavik] {
    color: var(--brand-blue);
}

.service-icon[b-u2u6baavik] {
    color: #6c757d;
}

.contact-icon[b-u2u6baavik] {
    color: #6c757d;
}

.pax-icon[b-u2u6baavik] {
    color: #6c757d;
}

.accessible-icon[b-u2u6baavik] {
    color: var(--brand-blue);
}

.trip-detail-content[b-u2u6baavik] {
    display: flex;
    flex-direction: column;
}

.trip-detail-text[b-u2u6baavik] {
    font-size: 0.85rem;
    color: #333;
    line-height: 1.4;
}

.trip-detail-subtext[b-u2u6baavik] {
    font-size: 0.75rem;
    color: #6c757d;
    margin-top: 2px;
}

/* Service with vehicle image */
.trip-service-info[b-u2u6baavik] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.trip-vehicle-img[b-u2u6baavik] {
    width: 40px;
    height: auto;
    object-fit: contain;
}

/* Shared Info Card (Contact & Passengers) */
.shared-info-card .trip-card-header[b-u2u6baavik] {
    background: linear-gradient(135deg, #e8f4e8 0%, #dcedc8 100%);
}

.shared-info-icon[b-u2u6baavik] {
    font-size: 20px;
    color: #28a745;
}

/* Pricing Summary */
.trip-pricing-summary[b-u2u6baavik] {
    background: white;
    border-radius: 10px;
    padding: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.trip-pricing-summary .pricing-row[b-u2u6baavik] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 0.85rem;
}

.trip-pricing-summary .pricing-label[b-u2u6baavik] {
    color: #555;
}

.trip-pricing-summary .pricing-value[b-u2u6baavik] {
    font-weight: 500;
    color: #333;
}

.trip-pricing-summary .total-row[b-u2u6baavik] {
    border-top: 1px solid #e0e4e8;
    margin-top: 6px;
    padding-top: 10px;
}

.trip-pricing-summary .total-row .pricing-label[b-u2u6baavik],
.trip-pricing-summary .total-row .pricing-value[b-u2u6baavik] {
    font-weight: 700;
    font-size: 1rem;
    color: var(--brand-blue-dark);
}

.pricing-breakdown-link[b-u2u6baavik] {
    margin-top: 10px;
    text-align: center;
}

.breakdown-btn[b-u2u6baavik] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    color: var(--brand-blue);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 6px;
    transition: background-color 0.2s;
}

.breakdown-btn:hover[b-u2u6baavik] {
    background: #f0f4f8;
}

.breakdown-btn .material-icons[b-u2u6baavik] {
    font-size: 18px;
}

/* Footer */
.trip-review-footer[b-u2u6baavik] {
    padding: 12px 16px;
    background: #f8f9fa;
    border-top: 1px solid #e0e4e8;
    text-align: center;
}

.trip-review-close-btn-footer[b-u2u6baavik] {
    min-width: 120px;
    padding: 10px 24px;
    font-weight: 600;
    border-radius: 8px;
}

/* ============================================
   Responsive adjustments
   ============================================ */

@media (max-width: 480px) {
    .trip-review-panel[b-u2u6baavik] {
        max-height: 90vh;
    }

    .trip-review-header[b-u2u6baavik] {
        padding: 12px 14px;
    }

    .trip-review-header h6[b-u2u6baavik] {
        font-size: 1rem;
    }

    .trip-review-body[b-u2u6baavik] {
        padding: 10px;
    }

    .trip-card[b-u2u6baavik] {
        margin-bottom: 8px;
    }

    .trip-card-header[b-u2u6baavik] {
        padding: 8px 10px;
    }

    .trip-card-body[b-u2u6baavik] {
        padding: 8px 10px;
    }

    .trip-detail-row[b-u2u6baavik] {
        padding: 5px 0;
    }

    .trip-icon[b-u2u6baavik] {
        font-size: 16px;
    }

    .trip-detail-text[b-u2u6baavik] {
        font-size: 0.8rem;
    }

    .trip-vehicle-img[b-u2u6baavik] {
        width: 35px;
    }

    .trip-pricing-summary[b-u2u6baavik] {
        padding: 10px;
    }

    .trip-review-footer[b-u2u6baavik] {
        padding: 10px 14px;
    }

    .trip-review-close-btn-footer[b-u2u6baavik] {
        width: 100%;
    }
}
/* /Components/TripSummaryPanel.razor.rz.scp.css */
/* =============================================================================
 * TRIP SUMMARY PANEL COMPONENT
 * Reusable component for displaying trip summary in sidebar or modal
 * ============================================================================= */

.trip-summary-panel[b-k8xjryzx3y] {
    display: flex;
    flex-direction: column;
    font-size: 0.85rem;
    height: 100%;
    overflow: hidden;
}

/* =============================================================================
 * STATIC MAP PREVIEW
 * ============================================================================= */

.trip-summary-map[b-k8xjryzx3y] {
    margin-bottom: 10px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e0e0e0;
    background-color: #f5f5f5;
    position: relative;
}

.trip-summary-map a[b-k8xjryzx3y] {
    display: block;
    position: relative;
    cursor: pointer;
}

.trip-summary-map-img[b-k8xjryzx3y] {
    width: 100%;
    height: auto;
    display: block;
    min-height: 120px;
    object-fit: cover;
    transition: opacity 0.2s ease;
}

.trip-summary-map a:hover .trip-summary-map-img[b-k8xjryzx3y] {
    opacity: 0.85;
}

.map-overlay[b-k8xjryzx3y] {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 4px;
    padding: 2px 6px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    color: #333;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.map-overlay .material-icons[b-k8xjryzx3y] {
    font-size: 14px;
}

.trip-summary-map a:hover .map-overlay[b-k8xjryzx3y] {
    opacity: 1;
}

/* =============================================================================
 * SIDEBAR MODE (non-modal) - Header and Body with scrolling
 * ============================================================================= */

.icd-panel-header[b-k8xjryzx3y] {
    padding: 12px;
    margin-bottom: 0;
    margin-left: -12px;
    margin-right: -8px;
    border-bottom: 2px solid #e0e0e0;
    flex: 0 0 auto;
    background-color: var(--brand-blue-50, #F2F6FF);
    text-align: center;
}

    .icd-panel-header h6[b-k8xjryzx3y] {
        font-weight: 600;
        color: var(--brand-blue-dark, var(--brand-blue-dark));
        font-size: 0.92rem;
        margin: 0;
    }

/* Panel body - scrollable when content overflows */
.icd-panel-body[b-k8xjryzx3y] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 0;
    min-height: 0;
    padding: 8px 6px 12px 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.2) transparent;
}

    /* Webkit scrollbar styling */
    .icd-panel-body[b-k8xjryzx3y]::-webkit-scrollbar {
        width: 6px;
    }

    .icd-panel-body[b-k8xjryzx3y]::-webkit-scrollbar-track {
        background: transparent;
    }

    .icd-panel-body[b-k8xjryzx3y]::-webkit-scrollbar-thumb {
        background-color: rgba(0,0,0,0.2);
        border-radius: 3px;
    }

        .icd-panel-body[b-k8xjryzx3y]::-webkit-scrollbar-thumb:hover {
            background-color: rgba(0,0,0,0.3);
        }

/* =============================================================================
 * MODAL MODE - Header and Body styling
 * ============================================================================= */

/* Modal-specific header styling */
.trip-summary-modal-header[b-k8xjryzx3y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 2px solid #e0e0e0;
    background-color: var(--brand-blue-50, #F2F6FF);
}

    .trip-summary-modal-header h6[b-k8xjryzx3y] {
        font-weight: 600;
        color: var(--brand-blue-dark, var(--brand-blue-dark));
        font-size: 1rem;
        margin: 0;
    }

.trip-summary-close-btn[b-k8xjryzx3y] {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: #666;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
}

    .trip-summary-close-btn:hover[b-k8xjryzx3y] {
        background-color: rgba(0, 0, 0, 0.08);
        color: #333;
    }

/* Modal body styling */
.trip-summary-modal-body[b-k8xjryzx3y] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    overflow-y: auto;
    flex: 1;
    max-height: 60vh;
}

/* Modal footer styling */
.trip-summary-modal-footer[b-k8xjryzx3y] {
    display: flex;
    justify-content: center;
    padding: 12px 16px;
    border-top: 1px solid #e0e0e0;
    background-color: #f8f9fa;
}

.trip-summary-close-btn-footer[b-k8xjryzx3y] {
    min-width: 120px;
    padding: 8px 24px;
    font-weight: 500;
    background-color: var(--brand-blue, var(--brand-blue));
    border-color: var(--brand-blue, var(--brand-blue));
}

    .trip-summary-close-btn-footer:hover[b-k8xjryzx3y] {
        background-color: var(--brand-blue-dark, var(--brand-blue-dark));
        border-color: var(--brand-blue-dark, var(--brand-blue-dark));
    }

/* When in modal mode, give cards slightly more spacing */
.trip-summary-panel.modal-mode .summary-step[b-k8xjryzx3y] {
    margin-bottom: 4px;
}

/* =============================================================================
   SUMMARY STEP CARDS
   ============================================================================= */

[b-k8xjryzx3y] .summary-step {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: white;
    transition: all 0.2s ease;
}

[b-k8xjryzx3y] .summary-step.pending {
    opacity: 0.5;
    background: #f9f9f9;
}

[b-k8xjryzx3y] .summary-step.active {
    border-color: var(--brand-blue, var(--brand-blue));
    box-shadow: 0 0 0 1px var(--brand-blue, var(--brand-blue));
}

[b-k8xjryzx3y] .summary-step.completed {
    border-color: #d0e0d0;
    background: #f8fff8;
}

[b-k8xjryzx3y] .summary-step-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

/* Add chevron indicator for clickable headers */
[b-k8xjryzx3y] .summary-step-header::after {
    content: '›';
    font-size: 16px;
    color: #999;
    margin-left: auto;
    transition: all 0.2s;
    font-weight: bold;
}

[b-k8xjryzx3y] .summary-step.completed .summary-step-header:hover,
[b-k8xjryzx3y] .summary-step.active .summary-step-header:hover {
    background-color: rgba(41, 99, 168, 0.08);
}

/* Enhance hover effect with chevron animation */
[b-k8xjryzx3y] .summary-step.completed .summary-step-header:hover::after,
[b-k8xjryzx3y] .summary-step.active .summary-step-header:hover::after {
    color: var(--brand-blue, var(--brand-blue));
    transform: translateX(2px);
}

[b-k8xjryzx3y] .summary-step.pending .summary-step-header {
    cursor: default;
}

/* Hide chevron for pending steps */
[b-k8xjryzx3y] .summary-step.pending .summary-step-header::after {
    display: none;
}

[b-k8xjryzx3y] .summary-step-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-k8xjryzx3y] .summary-step-icon .icon {
    font-size: 15px;
    margin: 0;
    width: auto;
    height: auto;
    border: none;
    border-radius: 0;
    background: transparent;
}

[b-k8xjryzx3y] .summary-step-title {
    flex: 1;
    font-weight: 500;
    color: #333;
    font-size: 0.82rem;
}

[b-k8xjryzx3y] .summary-step-check {
    color: #28a745;
    font-weight: bold;
    font-size: 14px;
}

[b-k8xjryzx3y] .summary-step-content {
    padding: 0 6px 5px 30px;
    font-size: 0.78rem;
    color: #555;
    line-height: 1.25;
}

[b-k8xjryzx3y] .summary-location {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-k8xjryzx3y] .summary-location i,
[b-k8xjryzx3y] .summary-location > span:first-child {
    font-size: 13px;
    flex-shrink: 0;
}

[b-k8xjryzx3y] .summary-location span:not(:first-child) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-k8xjryzx3y] .summary-leg-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    margin-top: 4px;
    margin-bottom: 2px;
    letter-spacing: 0.5px;
}

[b-k8xjryzx3y] .summary-leg-label:first-child {
    margin-top: 0;
}

[b-k8xjryzx3y] .summary-leg-row {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 3px;
    align-items: start;
    margin-bottom: 4px;
    margin-left: -2px;
}

[b-k8xjryzx3y] .summary-leg-row:last-child {
    margin-bottom: 0;
}

[b-k8xjryzx3y] .summary-leg-number {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #e0e0e0;
    color: #666;
    font-size: 0.7rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: -2px;
}

[b-k8xjryzx3y] .summary-leg-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

[b-k8xjryzx3y] .trip-summary-icon {
    font-size: 14px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    text-align: center;
}

/* Material icon specific sizing */
[b-k8xjryzx3y] .trip-summary-icon.material-icons {
    font-size: 14px;
}

[b-k8xjryzx3y] .trip-summary-airport {
    color: var(--brand-blue-dark, var(--brand-blue-hover));
}

[b-k8xjryzx3y] .trip-summary-location-pickup {
    color: #28a745;
}

[b-k8xjryzx3y] .trip-summary-location-dropoff {
    color: #dc3545;
}

[b-k8xjryzx3y] .summary-service {
    display: flex;
    align-items: center;
    gap: 6px;
}

[b-k8xjryzx3y] .summary-service img.summary-vehicle-img {
    width: 44px;
    height: 26px;
    object-fit: contain;
    flex-shrink: 0;
}

/* =============================================================================
 * INCOMPLETE / INVALID STATE STYLES
 * ============================================================================= */

[b-k8xjryzx3y] .summary-step-incomplete {
    color: #6c757d;
    font-style: italic;
    font-size: 0.9em;
}

[b-k8xjryzx3y] .summary-step-incomplete span {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Add a subtle indicator for incomplete steps */
[b-k8xjryzx3y] .summary-step:has(.summary-step-incomplete) .summary-step-icon {
    opacity: 0.6;
}

/* Invalid step styling - yellow/warning theme */
[b-k8xjryzx3y] .summary-step.step-invalid {
    border-left: 3px solid #f0ad4e;
    background-color: rgba(240, 173, 78, 0.08);
    border-color: #f0ad4e;
}

[b-k8xjryzx3y] .summary-step.step-invalid .summary-step-header {
    background-color: rgba(240, 173, 78, 0.05);
}

[b-k8xjryzx3y] .summary-step.step-invalid .summary-step-header:hover {
    background-color: rgba(240, 173, 78, 0.15);
}

/* Warning icon next to step title */
[b-k8xjryzx3y] .summary-step-warning {
    color: #f0ad4e;
    font-size: 1rem;
    margin-left: auto;
    animation: warningPulse-b-k8xjryzx3y 2s ease-in-out infinite;
}

@keyframes warningPulse-b-k8xjryzx3y {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

/* Reselect warning banner inside content */
[b-k8xjryzx3y] .summary-reselect-warning {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: #856404;
    background-color: #fff3cd;
    padding: 6px 8px;
    border-radius: 4px;
    margin-bottom: 6px;
    border: 1px solid #ffeeba;
}

[b-k8xjryzx3y] .summary-reselect-warning .material-icons {
    font-size: 16px;
    color: #d39e00;
    flex-shrink: 0;
}

[b-k8xjryzx3y] .summary-reselect-warning span:not(.material-icons) {
    line-height: 1.3;
}

/* Invalid service row styling */
[b-k8xjryzx3y] .summary-service.invalid,
[b-k8xjryzx3y] .summary-leg-row.invalid {
    opacity: 0.65;
}

[b-k8xjryzx3y] .summary-service.invalid .summary-vehicle-img,
[b-k8xjryzx3y] .summary-leg-row.invalid .summary-vehicle-img {
    filter: grayscale(80%);
    opacity: 0.6;
}

/* Grayscale for invalid vehicle images */
[b-k8xjryzx3y] .summary-vehicle-img.img-invalid {
    filter: grayscale(80%);
    opacity: 0.6;
}

/* Strikethrough text for invalid service name */
[b-k8xjryzx3y] .text-decoration-line-through {
    text-decoration: line-through;
}

/* Missing service type styling */
[b-k8xjryzx3y] .summary-service-missing {
    padding: 2px 0;
}

[b-k8xjryzx3y] .summary-leg-row.missing {
    opacity: 0.8;
}

[b-k8xjryzx3y] .summary-leg-row.missing .summary-leg-number {
    background-color: #f0ad4e;
    color: white;
}
/* /Components/VerifyAddressesDialog.razor.rz.scp.css */
.verify-addresses-content[b-tvcx638q4r] {
    padding: 4px 0;
}

.distance-callout[b-tvcx638q4r] {
    font-size: 1rem;
    color: #333;
    margin-bottom: 16px;
    line-height: 1.5;
}

    .distance-callout strong[b-tvcx638q4r] {
        color: #c75000;
        font-weight: 600;
    }

.address-card[b-tvcx638q4r] {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 12px;
}

.address-label[b-tvcx638q4r] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.address-value[b-tvcx638q4r] {
    font-size: 0.9rem;
    color: #333;
    line-height: 1.4;
    word-break: break-word;
}

.verify-message[b-tvcx638q4r] {
    font-size: 0.9rem;
    color: #666;
    font-style: italic;
    margin-bottom: 20px;
}

.dialog-buttons[b-tvcx638q4r] {
    display: flex;
    gap: 10px;
}

.btn-confirm[b-tvcx638q4r],
.btn-cancel[b-tvcx638q4r] {
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    border: none;
    transition: background-color 0.2s;
}

.btn-confirm[b-tvcx638q4r] {
    background: var(--brand-blue, #1a73e8);
    color: white;
}

    .btn-confirm:hover[b-tvcx638q4r] {
        background: var(--brand-blue-dark, #1557b0);
    }

.btn-cancel[b-tvcx638q4r] {
    background: #f1f3f4;
    color: #333;
    border: 1px solid #dadce0;
}

    .btn-cancel:hover[b-tvcx638q4r] {
        background: #e8eaed;
    }
/* /Components/WebMemberLocationsComponent.razor.rz.scp.css */
.locations-container[b-qzs7scptdj] {
    width: 100%;
    padding: 16px;
}

/* Header with Add button centered */
.locations-header[b-qzs7scptdj] {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 24px;
}

/* Add New Location button */
.btn-add-location[b-qzs7scptdj] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: 500;
    background-color: var(--brand-blue);
    color: white;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: background-color 0.2s;
}

    .btn-add-location:hover[b-qzs7scptdj] {
        background-color: var(--brand-blue-dark);
    }

    .btn-add-location i[b-qzs7scptdj] {
        font-size: 1.2rem;
    }

/* Empty state */
.no-locations[b-qzs7scptdj] {
    text-align: center;
    padding: 60px 20px;
    color: #666;
}

    .no-locations i[b-qzs7scptdj] {
        font-size: 4rem;
        color: #ddd;
        margin-bottom: 16px;
    }

    .no-locations p[b-qzs7scptdj] {
        margin: 8px 0;
        font-size: 1.1rem;
    }

    .no-locations .help-text[b-qzs7scptdj] {
        font-size: 0.95rem;
        color: #999;
    }

/* Location list - scrollable container */
.location-list[b-qzs7scptdj] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 380px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
}

    /* Custom scrollbar styling */
    .location-list[b-qzs7scptdj]::-webkit-scrollbar {
        width: 8px;
    }

    .location-list[b-qzs7scptdj]::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
    }

    .location-list[b-qzs7scptdj]::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 4px;
    }

        .location-list[b-qzs7scptdj]::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

/* Individual location card */
.location-card[b-qzs7scptdj] {
    display: flex;
    justify-content: space-between;
    border: 1px solid #e0e0e0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    border-radius: 8px;
    padding: 16px;
    background: #fff;
    transition: box-shadow 0.2s;
}

    .location-card:hover[b-qzs7scptdj] {
        box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    }

/* Location info section */
.location-info[b-qzs7scptdj] {
    display: flex;
    gap: 16px;
    flex: 1;
}

.location-icon[b-qzs7scptdj] {
    display: flex;
    align-items: flex-start;
    padding-top: 4px;
}

    .location-icon i[b-qzs7scptdj] {
        font-size: 2rem;
        color: var(--brand-blue);
    }

.location-details[b-qzs7scptdj] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.location-name[b-qzs7scptdj] {
    font-size: 1.15rem;
    font-weight: 600;
    color: #222;
}

.location-address[b-qzs7scptdj] {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.4;
}

.location-unit[b-qzs7scptdj] {
    font-size: 0.9rem;
    color: #777;
    font-style: italic;
}

/* Action buttons - simplified for single delete button */
.location-actions[b-qzs7scptdj] {
    display: flex;
    align-items: center;
}

/* Base style for action buttons */
.action-btn[b-qzs7scptdj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 0.9rem;
    border: 2px solid;
    border-radius: 50px;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    box-sizing: border-box;
}

    .action-btn i[b-qzs7scptdj] {
        font-size: 1rem;
    }

    .action-btn:disabled[b-qzs7scptdj] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* Delete button - red */
.action-delete[b-qzs7scptdj] {
    border-color: #dc3545;
    color: #dc3545;
}

    .action-delete:hover[b-qzs7scptdj] {
        background-color: rgba(220, 53, 69, 0.1);
    }

/* Responsive design */
@media (max-width: 768px) {
    /* Make container use flexbox on mobile */
    .locations-container[b-qzs7scptdj] {
        display: flex;
        flex-direction: column;
        height: 100%;
        padding: 12px;
    }

    .locations-header[b-qzs7scptdj] {
        flex-shrink: 0; /* Don't shrink the header */
    }

    /* Make location list fill available space on mobile */
    .location-list[b-qzs7scptdj] {
        flex: 1; /* Take up remaining space */
        max-height: calc(100vh - 200px);
        /* 200px accounts for: header (80px) + padding + button */
    }
}

@media (max-width: 640px) {
    .locations-header[b-qzs7scptdj] {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-add-location[b-qzs7scptdj] {
        width: 100%;
        justify-content: center;
    }

    .location-card[b-qzs7scptdj] {
        flex-direction: column;
        gap: 16px;
    }

    .location-info[b-qzs7scptdj] {
        flex-direction: row;
    }

    .location-actions[b-qzs7scptdj] {
        width: 100%;
        justify-content: flex-end;
    }

    .action-btn[b-qzs7scptdj] {
        min-width: 120px;
    }

    .location-list[b-qzs7scptdj] {
        max-height: calc(100vh - 200px);
    }
}

@media (max-width: 480px) {
    .location-icon i[b-qzs7scptdj] {
        font-size: 1.5rem;
    }

    .location-name[b-qzs7scptdj] {
        font-size: 1rem;
    }

    .location-address[b-qzs7scptdj] {
        font-size: 0.85rem;
    }

    .action-btn[b-qzs7scptdj] {
        padding: 6px 12px;
        font-size: 0.85rem;
    }

    .btn-add-location[b-qzs7scptdj] {
        font-size: 0.9rem;
        padding: 8px 16px;
    }

    .location-list[b-qzs7scptdj] {
        max-height: calc(100vh - 180px);
        /* Slightly more space on smaller screens */
    }
}

/* Fullscreen modal on mobile devices - using :global() to escape CSS isolation */
@media (max-width: 768px) {
    /* Target the Radzen dialog window with our custom class */
    :global(.favorite-location-modal.rz-dialog)[b-qzs7scptdj] {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    /* Make the dialog content fill the screen */
    :global(.favorite-location-modal .rz-dialog-content)[b-qzs7scptdj] {
        height: calc(100vh - 60px) !important;
        max-height: calc(100vh - 60px) !important;
        overflow-y: auto !important;
    }

    /* Ensure proper spacing for the title bar */
    :global(.favorite-location-modal .rz-dialog-titlebar)[b-qzs7scptdj] {
        border-radius: 0 !important;
    }
}
/* /Components/WebMemberPaymentMethodsComponent.razor.rz.scp.css */
.payment-methods-container[b-160ff34qsq] {
    width: 100%;
    padding: 16px;
}

/* Header with Add button centered */
.payment-methods-header[b-160ff34qsq] {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 24px;
}

/* Add Payment Method button */
.btn-add-payment[b-160ff34qsq] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: 500;
    background-color: #4285F4;
    color: white;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: background-color 0.2s;
}

    .btn-add-payment:hover:not(:disabled)[b-160ff34qsq] {
        background-color: #3367D6;
    }

    .btn-add-payment:disabled[b-160ff34qsq] {
        background-color: #ccc;
        cursor: not-allowed;
        opacity: 0.6;
    }

    .btn-add-payment i[b-160ff34qsq] {
        font-size: 1.2rem;
    }

/* Loading state */
.loading-state[b-160ff34qsq] {
    text-align: center;
    padding: 60px 20px;
    color: #666;
}

    .loading-state i[b-160ff34qsq] {
        font-size: 3rem;
        color: #4285F4;
        margin-bottom: 16px;
        animation: pulse-b-160ff34qsq 1.5s ease-in-out infinite;
    }

@keyframes pulse-b-160ff34qsq {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* Error state */
.error-state[b-160ff34qsq] {
    text-align: center;
    padding: 60px 20px;
    color: #dc3545;
}

    .error-state i[b-160ff34qsq] {
        font-size: 3rem;
        margin-bottom: 16px;
    }

/* Empty state */
.no-payment-methods[b-160ff34qsq] {
    text-align: center;
    padding: 60px 20px;
    color: #666;
}

    .no-payment-methods i[b-160ff34qsq] {
        font-size: 4rem;
        color: #ddd;
        margin-bottom: 16px;
    }

    .no-payment-methods p[b-160ff34qsq] {
        margin: 8px 0;
        font-size: 1.1rem;
    }

    .no-payment-methods .help-text[b-160ff34qsq] {
        font-size: 0.95rem;
        color: #999;
    }

/* Payment section (Credit Cards / Direct Bill) */
.payment-section[b-160ff34qsq] {
    margin-bottom: 32px;
}

    .payment-section:last-child[b-160ff34qsq] {
        margin-bottom: 0;
    }

.section-title[b-160ff34qsq] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.3rem;
    font-weight: 600;
    color: #222;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e0e0e0;
}

    .section-title i[b-160ff34qsq] {
        color: #4285F4;
        font-size: 1.5rem;
    }

/* Payment list - scrollable container */
.payment-list[b-160ff34qsq] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 380px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
}

    /* Custom scrollbar styling */
    .payment-list[b-160ff34qsq]::-webkit-scrollbar {
        width: 8px;
    }

    .payment-list[b-160ff34qsq]::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
    }

    .payment-list[b-160ff34qsq]::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 4px;
    }

        .payment-list[b-160ff34qsq]::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

/* Individual payment card */
.payment-card[b-160ff34qsq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #e0e0e0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    border-radius: 8px;
    padding: 12px;
    background: #fff;
    transition: box-shadow 0.2s;
}

    .payment-card:hover[b-160ff34qsq] {
        box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    }

/* Payment info section */
.payment-info[b-160ff34qsq] {
    display: flex;
    gap: 12px;
    flex: 1;
    align-items: center;
}

.payment-icon[b-160ff34qsq] {
    display: flex;
    align-items: center;
}

    /* Credit card brand icons - smaller for compact view */
    .payment-icon i.fa-brands[b-160ff34qsq],
    .payment-icon i.fa-solid[b-160ff34qsq] {
        font-size: 2.2rem;
        color: #555;
    }

    /* Specific brand colors */
    .payment-icon i.fa-cc-visa[b-160ff34qsq] {
        color: #1A1F71;
    }

    .payment-icon i.fa-cc-mastercard[b-160ff34qsq] {
        color: #EB001B;
    }

    .payment-icon i.fa-cc-amex[b-160ff34qsq] {
        color: #006FCF;
    }

    .payment-icon i.fa-cc-discover[b-160ff34qsq] {
        color: #FF6000;
    }

    .payment-icon i.fa-cc-jcb[b-160ff34qsq] {
        color: #0E4C96;
    }

    .payment-icon i.fa-cc-diners-club[b-160ff34qsq] {
        color: #0079BE;
    }

    /* Generic card icon */
    .payment-icon i.fa-credit-card[b-160ff34qsq] {
        color: #4285F4;
    }

    /* Direct bill building icon */
    .payment-icon i.bi-building-fill[b-160ff34qsq] {
        font-size: 2rem;
        color: #4285F4;
    }

.payment-details[b-160ff34qsq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

/* Primary info (card number, account name) */
.payment-primary[b-160ff34qsq] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 1.05rem;
    font-weight: 600;
    color: #222;
}

.card-last4[b-160ff34qsq] {
    font-family: 'Courier New', monospace;
    letter-spacing: 0.5px;
    color: #222;
    font-size: 1.1rem;
}

.account-name[b-160ff34qsq] {
    font-size: 1.1rem;
    color: #222;
}

/* Default badge */
.default-badge[b-160ff34qsq] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    background-color: #28a745;
    color: white;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* Secondary info (expiration, billing name, account numbers) */
.payment-secondary[b-160ff34qsq] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.85rem;
    color: #666;
}

    .payment-secondary span[b-160ff34qsq] {
        display: block;
    }

/* Inline layout for secondary info - more compact */
.payment-secondary-inline[b-160ff34qsq] {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px 12px;
    align-items: center;
}

    .payment-secondary-inline span[b-160ff34qsq] {
        display: inline;
    }

    /* Add separators between inline items */
    .payment-secondary-inline > span:not(:last-child)[b-160ff34qsq]::after {
        content: "";
    }

.card-nickname[b-160ff34qsq] {
    font-weight: 600;
    color: #4285F4;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

    .card-nickname i[b-160ff34qsq] {
        font-size: 0.8rem;
    }

.card-expiration[b-160ff34qsq] {
    font-weight: 500;
    color: #555;
}

.card-billing-name[b-160ff34qsq] {
    color: #777;
}

.card-zip[b-160ff34qsq] {
    color: #888;
}

.account-number[b-160ff34qsq] {
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    color: #666;
}

.account-info[b-160ff34qsq] {
    color: #777;
}

/* Address */
.payment-address[b-160ff34qsq] {
    font-size: 0.85rem;
    color: #777;
    line-height: 1.4;
    margin-top: 4px;
}

/* Password notice for direct bill */
.password-notice[b-160ff34qsq] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: #856404;
    background-color: #fff3cd;
    padding: 6px 10px;
    border-radius: 4px;
    margin-top: 4px;
    border: 1px solid #ffeeba;
}

    .password-notice i[b-160ff34qsq] {
        font-size: 0.9rem;
    }

/* Action buttons */
.payment-actions[b-160ff34qsq] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Base style for action buttons */
.action-btn[b-160ff34qsq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 0.9rem;
    border: 2px solid;
    border-radius: 50px;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    box-sizing: border-box;
}

    .action-btn i[b-160ff34qsq] {
        font-size: 1rem;
    }

    .action-btn:disabled[b-160ff34qsq] {
        opacity: 0.4;
        cursor: not-allowed;
    }

/* Set as Default button - gold/amber */
.action-set-default[b-160ff34qsq] {
    border-color: #ffc107;
    color: #856404;
}

    .action-set-default:hover:not(:disabled)[b-160ff34qsq] {
        background-color: rgba(255, 193, 7, 0.1);
    }

    .action-set-default i[b-160ff34qsq] {
        color: #ffc107;
    }

/* Delete button - red */
.action-delete[b-160ff34qsq] {
    border-color: #dc3545;
    color: #dc3545;
}

    .action-delete:hover:not(:disabled)[b-160ff34qsq] {
        background-color: rgba(220, 53, 69, 0.1);
    }

/* Responsive design */
@media (max-width: 640px) {
    .payment-methods-header[b-160ff34qsq] {
        flex-direction: column;
        align-items: stretch;
        margin-bottom: 16px;
    }

    .btn-add-payment[b-160ff34qsq] {
        width: 100%;
        justify-content: center;
    }

    .payment-card[b-160ff34qsq] {
        flex-direction: column;
        gap: 10px;
        padding: 10px;
    }

    .payment-info[b-160ff34qsq] {
        flex-direction: row;
        width: 100%;
    }

    .payment-actions[b-160ff34qsq] {
        width: 100%;
        justify-content: center;
        gap: 8px;
    }

    .action-btn[b-160ff34qsq] {
        flex: 1;
        padding: 6px 10px;
        font-size: 0.85rem;
    }

    /* Show only icon for Set as Default on mobile */
    .action-set-default .btn-text[b-160ff34qsq] {
        display: none;
    }

    .payment-list[b-160ff34qsq] {
        max-height: none;
        gap: 8px;
    }

    .payment-primary[b-160ff34qsq] {
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }

    .payment-icon i.fa-brands[b-160ff34qsq],
    .payment-icon i.fa-solid[b-160ff34qsq] {
        font-size: 2rem;
    }

    .section-title[b-160ff34qsq] {
        font-size: 1.1rem;
        margin-bottom: 10px;
        padding-bottom: 6px;
    }

        .section-title i[b-160ff34qsq] {
            font-size: 1.2rem;
        }

    .payment-section[b-160ff34qsq] {
        margin-bottom: 20px;
    }
}

@media (max-width: 480px) {
    .payment-icon i.fa-brands[b-160ff34qsq],
    .payment-icon i.fa-solid[b-160ff34qsq] {
        font-size: 1.8rem;
    }

    .payment-icon i.bi-building-fill[b-160ff34qsq] {
        font-size: 1.4rem;
    }

    .card-last4[b-160ff34qsq],
    .account-name[b-160ff34qsq] {
        font-size: 0.95rem;
    }

    .payment-primary[b-160ff34qsq] {
        font-size: 0.9rem;
    }

    .payment-secondary[b-160ff34qsq] {
        font-size: 0.8rem;
    }

    .default-badge[b-160ff34qsq] {
        font-size: 0.65rem;
        padding: 2px 6px;
    }

    .btn-add-payment[b-160ff34qsq] {
        font-size: 0.9rem;
        padding: 8px 16px;
    }

    .section-title[b-160ff34qsq] {
        font-size: 1rem;
    }
}
/* /Components/WebMemberReservationsComponent.razor.rz.scp.css */
.webmember-dashboard[b-jsb49iu3je] {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex: 1 !important; /* Fill remaining space provided by parent */
    min-height: 0 !important; /* Allow flexbox to shrink below content size */
    height: 100% !important; /* Ensure it fills parent height */
    max-height: 100% !important; /* Constrain to parent */
}

/* Dashboard Header - contains last login and link trip */
.dashboard-header[b-jsb49iu3je] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 8px;
}

/* Last Login */
.last-login[b-jsb49iu3je] {
    font-size: 0.95rem;
    color: #555;
    display: flex;
    align-items: center;
}

/* Link a Trip - hyperlink style */
.link-trip-link[b-jsb49iu3je] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.9rem;
    color: var(--brand-blue);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s;
}

    .link-trip-link:hover[b-jsb49iu3je] {
        color: var(--brand-blue-hover);
        text-decoration: underline;
    }

    .link-trip-link[b-jsb49iu3je]  .rzi {
        font-size: 1.1rem;
    }

/* Scrollable container for all reservations */
.reservations-scroll-container[b-jsb49iu3je] {
    flex: 1 !important; /* Take remaining space */
    min-height: 0 !important; /* Allow shrinking */
    max-height: 100% !important; /* Constrain to parent */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 8px; /* Space for scrollbar */
}

    /* Custom scrollbar styling */
    .reservations-scroll-container[b-jsb49iu3je]::-webkit-scrollbar {
        width: 8px;
    }

    .reservations-scroll-container[b-jsb49iu3je]::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
    }

    .reservations-scroll-container[b-jsb49iu3je]::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 4px;
    }

        .reservations-scroll-container[b-jsb49iu3je]::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

/* Section Titles */
.reservations-section[b-jsb49iu3je] {
    margin-bottom: 32px;
}

    .reservations-section h3[b-jsb49iu3je] {
        font-size: 1.25rem;
        margin-bottom: 12px;
        color: #222;
    }

/* Container for the list of reservations */
.reservation-list[b-jsb49iu3je] {
    display: flex;
    flex-direction: column;
    gap: 10px; /* instead of 16px or more */
}

/* Each reservation "card" (two columns) - base styles defined in later .reservation-item block */

/* Left column: reservation details stacked vertically */
.reservation-details[b-jsb49iu3je] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 70%; /* adjust as needed */
}

.detail-line .icon[b-jsb49iu3je] {
    font-size: 1.1rem;
    color: var(--brand-blue); /* or a neutral gray */
}
/* Individual lines inside details */
.detail-line.date-time[b-jsb49iu3je] {
    font-weight: 600;
    color: #222;
}

.detail-line.pickup-address[b-jsb49iu3je],
.detail-line.dropoff-address[b-jsb49iu3je] {
    font-size: 0.95rem;
    color: #555;
}

/* Right column: action buttons in a row */
.reservation-actions[b-jsb49iu3je] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 25%; /* adjust as needed */
    align-items: flex-end;
}



/* Modify button (blue) */
.modify-btn[b-jsb49iu3je] {
    background-color: var(--brand-blue);
    color: #fff;
}

    .modify-btn:hover[b-jsb49iu3je] {
        background-color: var(--brand-blue-dark);
    }

/* Cancel button (red outline) */
.cancel-btn[b-jsb49iu3je] {
    background-color: var(--brand-blue);
    color: #fff;
    border: 2px solid #dc3545;
}

    .cancel-btn:hover[b-jsb49iu3je] {
        background-color: #dc3545;
        color: #fff;
    }

/* Receipt button (gray outline) */
.receipt-btn[b-jsb49iu3je] {
    background-color: var(--brand-blue);
    color: #fff;
    border: 2px solid #666;
}

    .receipt-btn:hover[b-jsb49iu3je] {
        background-color: #666;
        color: #fff;
    }


/* View button (green outline/text) */
.action-view[b-jsb49iu3je] {
    background-color: var(--brand-blue);
    color: #fff;
}

    .action-view:hover[b-jsb49iu3je] {
        background-color: rgba(40, 167, 69, 0.1);
    }
/* "No reservations" message */
.reservations-section p[b-jsb49iu3je] {
    color: #666;
    font-style: italic;
}



/* Base style for all action buttons (upcoming & previous) */
.action-btn[b-jsb49iu3je] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    font-size: 0.8rem;
    border: 2px solid var(--brand-blue);
    border-radius: 50px;
    background: transparent;
    color: var(--brand-blue);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    /* 1) Force every button to fill the 150px container exactly */
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
}
    /* On hover, lightly fill with a tinted version */
    .action-btn:hover[b-jsb49iu3je] {
        background-color: color-mix(in srgb, var(--brand-blue) 10%, transparent);
    }

    /* When disabled (e.g. canceling), fade out */
    .action-btn:disabled[b-jsb49iu3je] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* Modify: same blue outline (no fill) */
.action-modify[b-jsb49iu3je] {
    border-color: var(--brand-blue);
    color: var(--brand-blue);
}

    .action-modify:hover[b-jsb49iu3je] {
        background-color: color-mix(in srgb, var(--brand-blue) 10%, transparent);
    }

/* Cancel: red outline, red text */
.action-cancel[b-jsb49iu3je] {
    border-color: var(--brand-blue);
    color: var(--brand-blue);
}

    .action-cancel:hover[b-jsb49iu3je] {
        background-color: rgba(220, 53, 69, 0.1); /* pale red */
    }

/* Receipt: gray outline, gray text */
.action-receipt[b-jsb49iu3je] {
    border-color: var(--brand-blue);
    color: var(--brand-blue);
}

    .action-receipt:hover[b-jsb49iu3je] {
        background-color: rgba(108, 117, 125, 0.1); /* pale gray */
    }

/* View: green outline, green text */
.action-view[b-jsb49iu3je] {
    border-color: var(--brand-blue);
    color: var(--brand-blue);
}

    .action-view:hover[b-jsb49iu3je] {
        background-color: rgba(40, 167, 69, 0.1); /* pale green */
    }

/* Email: purple outline, purple text */
.action-email[b-jsb49iu3je] {
    border-color: var(--brand-blue);
    color: var(--brand-blue);
}

    .action-email:hover[b-jsb49iu3je] {
        background-color: rgba(111, 66, 193, 0.1); /* pale purple */
    }

/* Flight Issue: same blue as other buttons */
.action-flight-issue[b-jsb49iu3je] {
    border-color: var(--brand-blue);
    color: var(--brand-blue);
}

    .action-flight-issue:hover[b-jsb49iu3je] {
        background-color: color-mix(in srgb, var(--brand-blue) 10%, transparent);
    }

/* Icon styling inside the button */
.btn-icon[b-jsb49iu3je] {
    font-size: 0.9rem;
    line-height: 1;
}

/* RadzenIcon inside action buttons */
.action-btn[b-jsb49iu3je]  .rzi {
    font-size: 1rem !important;
}

/* Label text inside button (keeps button padding consistent) */
.btn-label[b-jsb49iu3je] {
    display: inline-block;
    line-height: 1;
}



/* Adjust the detail lines so icons and text are nicely aligned */
.detail-line[b-jsb49iu3je] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .detail-line .icon[b-jsb49iu3je] {
        font-size: 1.1rem;
        color: var(--brand-blue);
    }

/* Service type image styling */
.service-type-image[b-jsb49iu3je] {
    width: 60px;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
}

/* Meta info line (service type, passengers, cost) */
.detail-line.meta-info[b-jsb49iu3je] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.9rem;
    color: #555;
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid #f0f0f0;
}

.meta-info .service-type-image[b-jsb49iu3je] {
    width: 50px;
    height: 28px;
    object-fit: contain;
    border-radius: 3px;
}

.meta-info .service-name[b-jsb49iu3je] {
    font-weight: 500;
    color: #333;
}

.meta-info .meta-separator[b-jsb49iu3je] {
    color: #ccc;
    font-size: 0.8rem;
}

.meta-info .passenger-count[b-jsb49iu3je] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: #666;
}

.meta-info .pax-bags-count[b-jsb49iu3je] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: #666;
}

.meta-info .trip-cost[b-jsb49iu3je] {
    font-weight: 600;
    color: #2ecc71;
}

/* Private Fare Badge - for hidden corporate rates */
.meta-info .private-fare-badge[b-jsb49iu3je] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px solid #dee2e6;
    border-radius: 4px;
    color: #495057;
    font-size: 0.75rem;
    font-weight: 500;
}

    .meta-info .private-fare-badge i[b-jsb49iu3je] {
        color: #6c757d;
        font-size: 0.7rem;
    }

/* Payment Type Indicator */
.meta-info .payment-type-indicator[b-jsb49iu3je] {
    display: inline-flex;
    align-items: center;
    color: #6c757d;
}

    .meta-info .payment-type-indicator i[b-jsb49iu3je] {
        font-size: 0.9rem;
    }

/* Location indicator container - holds dot and line */
.location-indicator[b-jsb49iu3je] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 8px;
    position: relative;
}

/* Location dots styling */
.location-dot[b-jsb49iu3je] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Pickup dot - match clock/ticket icon color */
.pickup-dot[b-jsb49iu3je] {
    background-color: var(--brand-blue); /* Blue to match other icons */
    border: 2px solid var(--brand-blue-dark); /* Darker blue border */
}

/* Dropoff dot - match clock/ticket icon color */
.dropoff-dot[b-jsb49iu3je] {
    background-color: var(--brand-blue); /* Blue to match other icons */
    border: 2px solid var(--brand-blue-dark); /* Darker blue border */
}

/* Dashed line connecting pickup to dropoff */
.location-line[b-jsb49iu3je] {
    width: 2px;
    height: 20px;
    background-image: linear-gradient(to bottom, #666 50%, transparent 50%);
    background-size: 2px 6px;
    background-repeat: repeat-y;
    margin-top: 2px;
}

/* Reserve a fixed width for the actions column */
.reservation-actions[b-jsb49iu3je] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 110px; /* keeps buttons aligned vertically */
    align-items: flex-end;
}
/* Make the reservation card a little tighter */
.reservation-item[b-jsb49iu3je] {
    position: relative; /* Allow absolute positioning of watermark */
    overflow: hidden; /* Clip watermark to card boundaries */
    display: flex;
    justify-content: space-between;
    border: 1px solid #e0e0e0;
    border-left: 4px solid var(--brand-blue); /* Accent left border */
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border-radius: 12px;
    padding: 14px 14px 14px 16px;
    background: #fff;
    margin-bottom: 10px; /* slightly more breathing room */
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

    .reservation-item:hover[b-jsb49iu3je] {
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        transform: translateY(-1px);
    }

    /* Canceled reservation styling */
    .reservation-item.canceled[b-jsb49iu3je] {
        opacity: 0.85;
        background: linear-gradient(135deg, #fff 0%, #fff5f5 100%);
        border-color: #f5c6cb;
        border-left: 4px solid #dc3545; /* Red accent for canceled */
    }

    .reservation-item.canceled:hover[b-jsb49iu3je] {
        transform: none; /* Don't lift canceled reservations */
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }

/* Canceled watermark overlay */
.canceled-watermark[b-jsb49iu3je] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(1.5rem, 8vw, 3rem);
    font-weight: 900;
    color: rgba(220, 53, 69, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    pointer-events: none;
    white-space: nowrap;
    max-width: 90%;
    z-index: 1;
    user-select: none;
    text-shadow: 1px 1px 2px rgba(220, 53, 69, 0.1);
}

/* Ensure content stays above watermark */
.reservation-details[b-jsb49iu3je],
.reservation-actions[b-jsb49iu3je] {
    position: relative;
    z-index: 2;
}

/* Loading container */
.loading-container[b-jsb49iu3je] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    color: #555;
    font-size: 1rem;
}

/* Loading spinner animation */
.loading-spinner[b-jsb49iu3je] {
    width: 24px;
    height: 24px;
    border: 3px solid #e0e0e0;
    border-top: 3px solid var(--brand-blue);
    border-radius: 50%;
    animation: spin-b-jsb49iu3je 1s linear infinite;
}

@keyframes spin-b-jsb49iu3je {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ===========================================
   Responsive: stack details + actions on small screens
   =========================================== */
@media (max-width: 768px) {
    .webmember-dashboard[b-jsb49iu3je] {
        padding: 12px;
        /* Ensure proper height calculation on mobile */
        height: 100% !important;
        max-height: 100% !important;
    }

    .last-login[b-jsb49iu3je] {
        font-size: 0.9rem;
    }

    /* CRITICAL: Force scroll container to constrain on mobile */
    .reservations-scroll-container[b-jsb49iu3je] {
        flex: 1 !important;
        min-height: 0 !important;
        max-height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

@media (max-width: 480px) {
    /* Dashboard header stacks on mobile */
    .dashboard-header[b-jsb49iu3je] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        margin-bottom: 12px;
    }

    .link-trip-link[b-jsb49iu3je] {
        margin-top: 2px;
    }

    /* Make the card itself a single column (details above, buttons below) */
    .reservation-item[b-jsb49iu3je] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 10px 10px 10px 14px; /* Maintain left padding for accent border */
    }

    /* Force both left/details and right/actions columns to be full-width */
    .reservation-details[b-jsb49iu3je],
    .reservation-actions[b-jsb49iu3je] {
        width: 100% !important;
    }

    /* Now let the actions container lay buttons in rows, wrapping as needed */
    .reservation-actions[b-jsb49iu3je] {
        display: flex;
        flex-direction: row; /* put buttons side by side */
        flex-wrap: wrap; /* wrap to a new line after two buttons */
        gap: 6px; /* spacing between buttons horizontally & vertically */
        justify-content: space-between;
        margin-top: 4px; /* small gap above the button group */
    }

    /* Each action button should take about half the width of its container */
    .action-btn[b-jsb49iu3je] {
        flex: 1 1 48%; /* grow or shrink so two buttons per row (approx 48% each) */
        min-width: unset; /* remove any old min-width so they can shrink */
        padding: 6px 8px; /* slightly smaller padding on mobile */
        font-size: 0.85rem; /* slightly smaller text on mobile */
    }

    /* Slightly smaller icon/text inside each detail line */
    .detail-line[b-jsb49iu3je] {
        gap: 6px;
        font-size: 0.9rem;
    }

    .btn-icon[b-jsb49iu3je] {
        font-size: 1rem;
    }

    .btn-label[b-jsb49iu3je] {
        font-size: 0.9rem;
    }
}
/* /Pages/AccessGate.razor.rz.scp.css */
.access-gate-container[b-sgjjvd1tk5] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    padding: 20px;
}

.access-gate-card[b-sgjjvd1tk5] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 450px;
    width: 100%;
    overflow: hidden;
}

.logo-section[b-sgjjvd1tk5] {
    background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-dark) 100%);
    padding: 20px;
    text-align: center;
    color: white;
}

    .logo-section .logo[b-sgjjvd1tk5] {
        max-width: 80px;
        margin-bottom: 6px;
    }

    .logo-section h1[b-sgjjvd1tk5] {
        margin: 0;
        font-size: 1.5rem;
        font-weight: 600;
    }

.notice-section[b-sgjjvd1tk5] {
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid #e9ecef;
}

.notice-icon[b-sgjjvd1tk5] {
    font-size: 2.5rem;
    color: var(--brand-gold);
    margin-bottom: 10px;
}

.notice-section h2[b-sgjjvd1tk5] {
    color: #333;
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.notice-text[b-sgjjvd1tk5] {
    color: #666;
    font-size: 0.95rem;
    margin-bottom: 15px;
    line-height: 1.5;
}

.booking-redirect[b-sgjjvd1tk5] {
    background: #f8f9fa;
    padding: 12px;
    border-radius: 8px;
    margin: 0;
}

    .booking-redirect a[b-sgjjvd1tk5] {
        color: var(--brand-blue);
        font-weight: 600;
        text-decoration: none;
    }

        .booking-redirect a:hover[b-sgjjvd1tk5] {
            text-decoration: underline;
        }

.access-section[b-sgjjvd1tk5] {
    padding: 20px;
    background: #fafafa;
}

    .access-section h3[b-sgjjvd1tk5] {
        color: #333;
        font-size: 1.1rem;
        margin-bottom: 10px;
        text-align: center;
    }

.access-text[b-sgjjvd1tk5] {
    color: #666;
    font-size: 0.9rem;
    text-align: center;
    margin-bottom: 15px;
}

.passcode-input-group[b-sgjjvd1tk5] {
    display: flex;
    gap: 10px;
}

.passcode-input[b-sgjjvd1tk5] {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .passcode-input:focus[b-sgjjvd1tk5] {
        outline: none;
        border-color: var(--brand-blue);
        box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.1);
    }

    .passcode-input.input-error[b-sgjjvd1tk5] {
        border-color: #dc3545;
        animation: shake-b-sgjjvd1tk5 0.4s ease-in-out;
    }

@keyframes shake-b-sgjjvd1tk5 {
    0%, 100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}

.access-button[b-sgjjvd1tk5] {
    padding: 12px 20px;
    background: var(--brand-blue);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 1.1rem;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    min-width: 50px;
}

    .access-button:hover:not(:disabled)[b-sgjjvd1tk5] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        background: var(--brand-blue-hover);
    }

    .access-button:disabled[b-sgjjvd1tk5] {
        opacity: 0.7;
        cursor: not-allowed;
    }

.error-message[b-sgjjvd1tk5] {
    color: #dc3545;
    font-size: 0.9rem;
    margin-top: 10px;
    text-align: center;
}

.footer-section[b-sgjjvd1tk5] {
    padding: 15px;
    text-align: center;
    background: #f0f0f0;
}

    .footer-section p[b-sgjjvd1tk5] {
        margin: 0;
        color: #888;
        font-size: 0.8rem;
    }

/* Responsive */
@media (max-width: 480px) {
    .access-gate-container[b-sgjjvd1tk5] {
        padding: 10px;
        align-items: flex-start;
        padding-top: 20px;
    }

    .access-gate-card[b-sgjjvd1tk5] {
        border-radius: 12px;
    }

    .logo-section[b-sgjjvd1tk5] {
        padding: 15px;
    }

        .logo-section .logo[b-sgjjvd1tk5] {
            max-width: 70px;
            margin-bottom: 4px;
        }

        .logo-section h1[b-sgjjvd1tk5] {
            font-size: 1.4rem;
        }

    .notice-section[b-sgjjvd1tk5] {
        padding: 15px;
    }

    .notice-icon[b-sgjjvd1tk5] {
        font-size: 2rem;
        margin-bottom: 10px;
    }

    .notice-section h2[b-sgjjvd1tk5] {
        font-size: 1.1rem;
        margin-bottom: 10px;
    }

    .notice-text[b-sgjjvd1tk5] {
        font-size: 0.9rem;
        margin-bottom: 12px;
        line-height: 1.4;
    }

    .booking-redirect[b-sgjjvd1tk5] {
        padding: 10px;
        font-size: 0.85rem;
    }

    .access-section[b-sgjjvd1tk5] {
        padding: 15px;
    }

        .access-section h3[b-sgjjvd1tk5] {
            font-size: 1rem;
            margin-bottom: 5px;
        }

    .access-text[b-sgjjvd1tk5] {
        font-size: 0.85rem;
        margin-bottom: 10px;
    }

    .passcode-input[b-sgjjvd1tk5] {
        padding: 10px 12px;
        font-size: 1rem;
    }

    .access-button[b-sgjjvd1tk5] {
        padding: 10px 16px;
    }

    .footer-section[b-sgjjvd1tk5] {
        padding: 10px;
    }

        .footer-section p[b-sgjjvd1tk5] {
            font-size: 0.75rem;
        }
}

/* Readonly input styling (prevents mobile keyboard until tapped) */
.passcode-input[readonly][b-sgjjvd1tk5] {
    background-color: #f8f9fa;
    cursor: pointer;
}
/* /Pages/BookingPage.razor.rz.scp.css */
/* Clearance for fixed-position Website Feedback button at bottom-left */
#booking-page-container[b-yj1etzff6i] {
    padding-bottom: 40px;
}

/* Skip link for keyboard/screen reader users */
.skip-link[b-yj1etzff6i] {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 10000;
    background: var(--brand-blue, #1976d2);
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    font-weight: 500;
    border-radius: 0 0 4px 0;
}

.skip-link:focus[b-yj1etzff6i] {
    position: fixed;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    overflow: visible;
    outline: 2px solid white;
    outline-offset: 2px;
}

/* Visually hidden but accessible to screen readers */
.visually-hidden[b-yj1etzff6i] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Feedback link - fixed bottom-left */
.page-feedback-link[b-yj1etzff6i] {
    position: fixed;
    bottom: 12px;
    left: 12px;
    z-index: 100;
}

.feedback-link-btn[b-yj1etzff6i] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    background: transparent;
    color: #666;
    border: none;
    font-size: 12px;
    font-weight: 400;
    cursor: pointer;
    transition: color 0.2s ease;
}

    .feedback-link-btn:hover[b-yj1etzff6i] {
        color: #1976d2;
        text-decoration: underline;
    }

    .feedback-link-btn:active[b-yj1etzff6i] {
        color: #1565c0;
    }

    .feedback-link-btn i[b-yj1etzff6i] {
        font-size: 12px;
    }

/* Hide text on mobile and adjust position */
@media (max-width: 500px) {
    .page-feedback-link[b-yj1etzff6i] {
        bottom: 8px;
        left: 8px;
    }

    .feedback-link-btn span[b-yj1etzff6i] {
        display: none;
    }
}

.register-link[b-yj1etzff6i] {
    font-size: 0.9em;
    color: var(--brand-blue-light, var(--brand-blue-light));
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}

    .register-link:hover[b-yj1etzff6i] {
        color: var(--brand-blue, var(--brand-blue));
        text-decoration: underline;
    }

.container[b-yj1etzff6i] {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.custom-submit-button[b-yj1etzff6i] {
    background-color: var(--brand-gold, var(--brand-gold)) !important;
    border-color: var(--brand-gold, var(--brand-gold)) !important;
    border-radius: 50px;
    color: var(--brand-blue-dark, var(--brand-blue-dark));
    font-weight: 600;
    text-align: center;
    padding: 10px 16px;
    font-size: 1.1rem;
    width: 100%;
    display: block;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

    .custom-submit-button:hover[b-yj1etzff6i] {
        background-color: #b8922e;
        border-color: #b8922e;
        color: var(--brand-blue-dark, var(--brand-blue-dark));
    }

    .custom-submit-button:focus[b-yj1etzff6i] {
        outline: none;
        box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.4);
    }

    .custom-submit-button:focus-visible[b-yj1etzff6i] {
        outline: none;
        box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.5), 0 0 8px rgba(212, 175, 55, 0.3);
    }

/* ===========================================
   DARK BRAND HEADER STYLING
   =========================================== */
.navbar[b-yj1etzff6i] {
    background-color: var(--brand-blue-dark, var(--brand-blue-dark)) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

    /* Menu and profile buttons - white on dark background */
    .navbar .btn-link[b-yj1etzff6i] {
        color: white !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

        .navbar .btn-link:hover[b-yj1etzff6i] {
            color: var(--brand-gold, var(--brand-gold)) !important;
        }

        .navbar .btn-link i[b-yj1etzff6i] {
            color: white !important;
            opacity: 1 !important;
            visibility: visible !important;
        }

            .navbar .btn-link i:hover[b-yj1etzff6i] {
                color: var(--brand-gold, var(--brand-gold)) !important;
            }

/* Dropdown menus stay light */
.dropdown-item[b-yj1etzff6i] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .dropdown-item i[b-yj1etzff6i] {
        width: 18px;
        text-align: center;
        flex-shrink: 0;
    }

    .dropdown-item:hover[b-yj1etzff6i] {
        background-color: #f0f4f8;
        color: var(--brand-blue, var(--brand-blue));
    }

/* Login button with white background */
.btn-outline-primary[b-yj1etzff6i] {
    background-color: white !important;
    border-color: var(--brand-blue, var(--brand-blue)) !important;
    color: var(--brand-blue, var(--brand-blue)) !important;
}

    .btn-outline-primary:hover[b-yj1etzff6i] {
        background-color: var(--brand-blue, var(--brand-blue)) !important;
        color: white !important;
    }

.dropdown-menu[b-yj1etzff6i] {
    display: none;
    max-height: none !important;
    overflow: visible !important;
    z-index: 2000;
}

    .dropdown-menu.show[b-yj1etzff6i] {
        display: block;
    }

.navbar .dropdown[b-yj1etzff6i],
.navbar .dropdown-menu[b-yj1etzff6i] {
    max-height: none !important;
    overflow: visible !important;
    height: auto !important;
}

/* Logo link wrapper */
.navbar-logo-link[b-yj1etzff6i] {
    display: inline-flex;
    cursor: pointer;
}

/* Logo styling - use white/reversed logo on dark header */
.navbar-logo[b-yj1etzff6i] {
    max-width: 300px;
    height: auto;
}

@media (max-width: 767px) {
    .navbar-logo[b-yj1etzff6i] {
        max-width: 120px;
        max-height: 40px;
        width: auto;
    }
}

.login-helper-text[b-yj1etzff6i] {
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 0.125rem;
}

/* Override the default 'btn-primary' inside the login frame */
.login-frame .btn-primary[b-yj1etzff6i] {
    background-color: white !important;
    border-color: var(--brand-blue, var(--brand-blue)) !important;
    color: var(--brand-blue, var(--brand-blue)) !important;
    width: 100%;
}

    .login-frame .btn-primary:hover[b-yj1etzff6i] {
        background-color: var(--brand-blue, var(--brand-blue)) !important;
        color: white !important;
    }

.google-signin-standard[b-yj1etzff6i] {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    border: 1px solid #dadce0;
    color: #3c4043;
    font-family: var(--font-base);
    font-weight: 500;
    padding: 10px;
    font-size: 14px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    border-radius: 50px;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 12px;
}

    .google-signin-standard:hover[b-yj1etzff6i] {
        background-color: #f8f9fa;
    }

    .google-signin-standard img[b-yj1etzff6i] {
        margin-right: 8px;
        width: 20px;
        height: 20px;
    }

.bi-google[b-yj1etzff6i] {
    margin-right: 6px;
}

/* New styles for confirmation modal */
.modal-dialog[b-yj1etzff6i] {
    max-width: 450px;
}

.modal-footer .btn-primary[b-yj1etzff6i] {
    background-color: var(--brand-blue, var(--brand-blue));
    border-color: var(--brand-blue, var(--brand-blue));
}

    .modal-footer .btn-primary:hover[b-yj1etzff6i] {
        background-color: var(--brand-blue-dark, var(--brand-blue-dark));
        border-color: var(--brand-blue-dark, var(--brand-blue-dark));
    }

.or-separator[b-yj1etzff6i] {
    display: flex;
    align-items: center;
    margin: 16px 0;
}

    .or-separator .line[b-yj1etzff6i] {
        flex: 1;
        height: 1px;
        background: #ccc;
    }

    .or-separator .or-text[b-yj1etzff6i] {
        margin: 0 8px;
        font-size: 0.9rem;
        color: #666;
    }

/* ===========================================
   PROFILE NAME & BUTTON - WHITE ON DARK HEADER
   =========================================== */
.profile-name[b-yj1etzff6i] {
    font-weight: 500;
    margin-right: 8px;
    color: white;
    line-height: 1;
    vertical-align: middle;
    font-size: .85em;
}

.profile-button[b-yj1etzff6i] {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    padding: 4px 8px !important;
    border-radius: 20px;
    transition: background-color 0.2s;
}

    .profile-button:hover[b-yj1etzff6i] {
        background-color: rgba(255, 255, 255, 0.1) !important;
    }

    .profile-button:focus[b-yj1etzff6i] {
        box-shadow: none !important;
    }

    .profile-button i[b-yj1etzff6i] {
        margin: 0;
    }

.responsive-logo[b-yj1etzff6i] {
    max-width: 100%;
    height: auto;
}

/* Discrete dev link - barely visible */
.dev-link[b-yj1etzff6i] {
    color: #e0e0e0;
    text-decoration: none;
    font-size: 0.75rem;
    opacity: 0.3;
    transition: opacity 0.2s ease;
}

    .dev-link:hover[b-yj1etzff6i] {
        color: var(--brand-blue, var(--brand-blue));
        opacity: 1;
    }

/* ===========================================
   BENEFITS CARD - Updated to use brand colors
   =========================================== */
.benefits-card[b-yj1etzff6i] {
    background: linear-gradient(135deg, #f8f9ff 0%, #e8f4fd 100%);
    border: 1px solid #d0e3f0;
    border-radius: 12px;
    padding: 14px 16px;
    margin: 0 auto;
    max-width: 400px;
}

.benefits-header[b-yj1etzff6i] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--brand-blue-dark, var(--brand-blue-dark));
    margin-bottom: 6px;
    font-size: 0.9rem;
}

    .benefits-header i[b-yj1etzff6i] {
        color: var(--brand-gold, var(--brand-gold));
        font-size: 0.85rem;
    }

.benefits-list[b-yj1etzff6i] {
    list-style: none;
    padding: 0;
    margin: 0;
    padding-left: 12px;
}

    .benefits-list li[b-yj1etzff6i] {
        display: flex;
        align-items: flex-start;
        gap: 6px;
        padding: 2px 0;
        font-size: 0.8rem;
        color: #555;
    }

        .benefits-list li i[b-yj1etzff6i] {
            color: #28a745;
            margin-top: 1px;
            flex-shrink: 0;
            font-size: 0.75rem;
        }

/* Account Card Section */
.account-card[b-yj1etzff6i] {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 14px 16px;
    margin-top: 12px;
    text-align: center;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

.account-card-label[b-yj1etzff6i] {
    font-size: 0.85rem;
    color: #6c757d;
    margin: 0 0 12px 0;
}

.account-card-buttons[b-yj1etzff6i] {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.account-btn[b-yj1etzff6i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: white;
    color: var(--brand-blue, #2963a8);
    border: 1px solid var(--brand-blue, #2963a8);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 10px 20px;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 140px;
}

    .account-btn:hover[b-yj1etzff6i] {
        background: var(--brand-blue, #2963a8);
        color: white;
    }

    .account-btn i[b-yj1etzff6i] {
        font-size: 1rem;
    }

/* ===========================================
   LOGGED-IN HEADER SPACING
   =========================================== */
.page-header-logged-in[b-yj1etzff6i] {
    padding-top: 4px;
}

@media (max-width: 767px) {
    .page-header-logged-in[b-yj1etzff6i] {
        padding-top: 8px;
    }
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .benefits-card[b-yj1etzff6i] {
        padding: 12px 14px;
    }

    .benefits-list li[b-yj1etzff6i] {
        font-size: 0.78rem;
    }

    .account-card[b-yj1etzff6i] {
        padding: 12px 14px;
    }

    .account-card-buttons[b-yj1etzff6i] {
        flex-direction: column;
        gap: 8px;
    }

    .account-btn[b-yj1etzff6i] {
        width: 100%;
        min-width: unset;
    }
}


.google-signin-standard[b-yj1etzff6i] {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f0f7ff;
    border: 2px solid var(--brand-blue, var(--brand-blue));
    color: #3c4043;
    font-family: var(--font-base);
    font-weight: 500;
    padding: 10px;
    font-size: 14px;
    box-shadow: 0 2px 4px rgba(41, 99, 168, 0.15);
    border-radius: 50px;
    width: 100%;
    max-width: 420px; /* Constrain width */
    margin: 0 auto;
    margin-bottom: 12px;
}

    .google-signin-standard:hover[b-yj1etzff6i] {
        background-color: #e3f0fc; /* Slightly darker on hover */
        border-color: var(--brand-blue-dark, var(--brand-blue-dark));
    }

    .google-signin-standard:focus[b-yj1etzff6i] {
        outline: none;
        box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.3);
    }

    .google-signin-standard:focus-visible[b-yj1etzff6i] {
        outline: none;
        box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.4), 0 0 8px rgba(66, 133, 244, 0.2);
    }

/* ===========================================
   AUTH LOADING SKELETON - Prevents UI flash
   =========================================== */
.auth-loading-placeholder[b-yj1etzff6i] {
    min-height: 200px;
}

.skeleton-title[b-yj1etzff6i] {
    height: 32px;
    width: 220px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-yj1etzff6i 1.5s infinite;
    border-radius: 8px;
    margin: 0 auto 24px auto;
}

.skeleton-button[b-yj1etzff6i] {
    height: 48px;
    width: 100%;
    max-width: 600px;
    background: linear-gradient(90deg, #f5e6c4 25%, #e8d9b7 50%, #f5e6c4 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-yj1etzff6i 1.5s infinite;
    border-radius: 50px;
    margin: 0 auto;
}

@keyframes skeleton-shimmer-b-yj1etzff6i {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* Optional: Fade-in effect when content loads */
.page-header-logged-in[b-yj1etzff6i],
.login-frame[b-yj1etzff6i],
.or-separator[b-yj1etzff6i],
.account-card[b-yj1etzff6i],
.benefits-card[b-yj1etzff6i],
.reservations-wrapper[b-yj1etzff6i] {
    animation: fadeIn-b-yj1etzff6i 0.2s ease-out;
}

@keyframes fadeIn-b-yj1etzff6i {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/* ===========================================
   LOGGED-IN VIEWPORT LOCK - No page scroll
   =========================================== */

/* When logged in, lock the page to viewport height */
/* The container needs to fill remaining space after navbar and feedback link */
.page-wrapper-logged-in[b-yj1etzff6i] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0; /* Critical: allows flex item to shrink below content size */
    overflow: hidden;
}

    /* Header section (welcome message + book button) stays fixed size */
    .page-wrapper-logged-in .page-header-logged-in[b-yj1etzff6i] {
        flex-shrink: 0;
    }

    /* Reservations wrapper fills remaining space */
    .page-wrapper-logged-in .reservations-wrapper[b-yj1etzff6i] {
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }

        /* Override the component's dashboard to fill parent */
        .page-wrapper-logged-in .reservations-wrapper[b-yj1etzff6i]  .webmember-dashboard {
            height: 100%;
            max-height: 100%;
            overflow: hidden;
        }

        /* Ensure the scroll container inside actually scrolls */
        .page-wrapper-logged-in .reservations-wrapper[b-yj1etzff6i]  .reservations-scroll-container {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
        }

    .page-wrapper-logged-in h3.mb-3[b-yj1etzff6i] {
        margin-bottom: 0.5rem !important;
    }

/* Version/copyright info in hamburger menu */
.version-info[b-yj1etzff6i] {
    font-size: 0.65rem;
    color: #bbb;
    padding: 2px 16px 4px;
    cursor: default;
    user-select: text;
    line-height: 1.3;
    letter-spacing: 0.01em;
}

/* /Pages/ChatEmbed.razor.rz.scp.css */
/* =========================
   Chat Embed Container
   ========================= */

.chat-embed-container[b-0zc997nww5] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    background: white;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

/* =========================
   Header
   ========================= */

.chat-embed-header[b-0zc997nww5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--brand-color, #2963A8);
    color: white;
    flex-shrink: 0;
}

.chat-embed-header-info[b-0zc997nww5] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.chat-embed-avatar[b-0zc997nww5] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: white;
    padding: 3px;
    object-fit: contain;
}

.chat-embed-header-text[b-0zc997nww5] {
    display: flex;
    flex-direction: column;
}

.chat-embed-title[b-0zc997nww5] {
    font-weight: 600;
    font-size: 14px;
}

.chat-embed-status[b-0zc997nww5] {
    font-size: 11px;
    opacity: 0.9;
}

.status-online[b-0zc997nww5]::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4caf50;
    margin-right: 5px;
}

.status-typing[b-0zc997nww5] {
    font-style: italic;
}

/* =========================
   Messages Container
   ========================= */

.chat-embed-messages[b-0zc997nww5] {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #f8f9fa;
}

/* =========================
   Welcome Message
   ========================= */

.chat-embed-welcome[b-0zc997nww5] {
    text-align: center;
    padding: 20px 12px;
    color: #666;
}

    .chat-embed-welcome .welcome-icon[b-0zc997nww5] {
        font-size: 40px;
        color: var(--brand-color, #2963A8);
        margin-bottom: 10px;
    }

    .chat-embed-welcome h3[b-0zc997nww5] {
        margin: 0 0 8px 0;
        font-size: 17px;
        color: #333;
    }

    .chat-embed-welcome p[b-0zc997nww5] {
        margin: 0 0 10px 0;
        font-size: 13px;
    }

.context-hint[b-0zc997nww5] {
    background: #e3f2fd;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px !important;
    color: #1565c0;
}

/* Quick Actions */
.quick-actions[b-0zc997nww5] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 16px;
}

.quick-action[b-0zc997nww5] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 20px;
    font-size: 12px;
    color: #555;
    cursor: pointer;
    transition: all 0.2s;
}

    .quick-action:hover[b-0zc997nww5] {
        border-color: var(--brand-color, #2963A8);
        color: var(--brand-color, #2963A8);
        background: #f8f9ff;
    }

    .quick-action i[b-0zc997nww5] {
        font-size: 14px;
        color: var(--brand-color, #2963A8);
    }

/* =========================
   Messages
   ========================= */

.message[b-0zc997nww5] {
    display: flex;
    gap: 8px;
    max-width: 88%;
}

.message-user[b-0zc997nww5] {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.message-assistant[b-0zc997nww5] {
    align-self: flex-start;
}

.message-avatar[b-0zc997nww5] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

    .message-avatar img[b-0zc997nww5] {
        width: 100%;
        height: 100%;
        object-fit: contain;
        background: white;
        padding: 2px;
    }

.message-content[b-0zc997nww5] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.message-bubble[b-0zc997nww5] {
    padding: 9px 13px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.45;
    word-wrap: break-word;
}

.message-user .message-bubble[b-0zc997nww5] {
    background: var(--brand-color, #2963A8);
    color: white;
    border-bottom-right-radius: 4px;
}

.message-assistant .message-bubble[b-0zc997nww5] {
    background: white;
    color: #333;
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.message-time[b-0zc997nww5] {
    font-size: 10px;
    color: #999;
    padding: 0 4px;
}

.message-user .message-time[b-0zc997nww5] {
    text-align: right;
}

/* =========================
   Typing Indicator
   ========================= */

.typing-indicator[b-0zc997nww5] {
    display: flex;
    gap: 4px;
    padding: 11px 13px;
}

    .typing-indicator span[b-0zc997nww5] {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #bbb;
        animation: typing-b-0zc997nww5 1.4s infinite ease-in-out;
    }

        .typing-indicator span:nth-child(1)[b-0zc997nww5] {
            animation-delay: 0s;
        }

        .typing-indicator span:nth-child(2)[b-0zc997nww5] {
            animation-delay: 0.2s;
        }

        .typing-indicator span:nth-child(3)[b-0zc997nww5] {
            animation-delay: 0.4s;
        }

@keyframes typing-b-0zc997nww5 {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-3px);
        opacity: 1;
    }
}

/* =========================
   Error Message
   ========================= */

.chat-embed-error[b-0zc997nww5] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    background: #fff3cd;
    color: #856404;
    border-radius: 8px;
    font-size: 12px;
}

    .chat-embed-error i[b-0zc997nww5] {
        color: #e65100;
    }

    .chat-embed-error button[b-0zc997nww5] {
        margin-left: auto;
        background: transparent;
        border: none;
        color: #856404;
        cursor: pointer;
        text-decoration: underline;
        font-size: 11px;
    }

/* =========================
   Input Container
   ========================= */

.chat-embed-input-container[b-0zc997nww5] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 14px;
    background: white;
    border-top: 1px solid #eee;
    flex-shrink: 0;
}

.chat-embed-input[b-0zc997nww5] {
    flex: 1;
    border: 1px solid #ddd;
    border-radius: 18px;
    padding: 9px 14px;
    font-size: 16px;
    resize: none;
    max-height: 80px;
    outline: none;
    transition: border-color 0.2s;
    font-family: inherit;
}

    .chat-embed-input:focus[b-0zc997nww5] {
        border-color: var(--brand-color, #2963A8);
    }

    .chat-embed-input[b-0zc997nww5]::placeholder {
        color: #999;
    }

    .chat-embed-input:disabled[b-0zc997nww5] {
        background: #f5f5f5;
    }

.chat-embed-send-btn[b-0zc997nww5] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--brand-color, #2963A8);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

    .chat-embed-send-btn:hover:not(:disabled)[b-0zc997nww5] {
        transform: scale(1.05);
    }

    .chat-embed-send-btn:disabled[b-0zc997nww5] {
        background: #ccc;
        cursor: not-allowed;
    }

    .chat-embed-send-btn i[b-0zc997nww5] {
        font-size: 14px;
    }

/* =========================
   Footer
   ========================= */

.chat-embed-footer[b-0zc997nww5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 14px;
    font-size: 10px;
    color: #999;
    background: #fafafa;
    border-top: 1px solid #eee;
    flex-shrink: 0;
}

    .chat-embed-footer a[b-0zc997nww5] {
        color: var(--brand-color, #2963A8);
        text-decoration: none;
    }

        .chat-embed-footer a:hover[b-0zc997nww5] {
            text-decoration: underline;
        }

/* =========================
   Message Formatting
   ========================= */

.message-bubble strong[b-0zc997nww5] {
    font-weight: 600;
}

.message-bubble em[b-0zc997nww5] {
    font-style: italic;
}

.message-bubble li[b-0zc997nww5] {
    list-style-position: inside;
    margin-left: 0;
}

/* =========================
   Accessibility
   ========================= */

.chat-embed-send-btn:focus[b-0zc997nww5],
.chat-embed-input:focus[b-0zc997nww5],
.quick-action:focus[b-0zc997nww5] {
    outline: 2px solid var(--brand-color, #2963A8);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .typing-indicator span[b-0zc997nww5] {
        animation: none;
        opacity: 0.6;
    }

    .chat-embed-send-btn:hover:not(:disabled)[b-0zc997nww5] {
        transform: none;
    }
}
/* /Pages/Login.razor.rz.scp.css */
/* ===========================================
   DARK BRAND HEADER STYLING
   =========================================== */
.navbar[b-fm8acca9cr] {
    background-color: var(--brand-blue-dark, #1a365d) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    margin-bottom: 0;
}

    .navbar .btn-link[b-fm8acca9cr] {
        color: white !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

        .navbar .btn-link:hover[b-fm8acca9cr] {
            color: var(--brand-gold, #d4a019) !important;
        }

        .navbar .btn-link i[b-fm8acca9cr] {
            color: white !important;
            opacity: 1 !important;
            visibility: visible !important;
        }

            .navbar .btn-link i:hover[b-fm8acca9cr] {
                color: var(--brand-gold, #d4a019) !important;
            }

.navbar .dropdown[b-fm8acca9cr],
.navbar .dropdown-menu[b-fm8acca9cr] {
    max-height: none !important;
    overflow: visible !important;
    height: auto !important;
}

.dropdown-menu[b-fm8acca9cr] {
    display: none;
    max-height: none !important;
    overflow: visible !important;
    z-index: 2000;
}

    .dropdown-menu.show[b-fm8acca9cr] {
        display: block;
    }

.dropdown-item[b-fm8acca9cr] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .dropdown-item i[b-fm8acca9cr] {
        width: 18px;
        text-align: center;
        flex-shrink: 0;
    }

    .dropdown-item:hover[b-fm8acca9cr] {
        background-color: #f0f4f8;
        color: var(--brand-blue, #2563eb);
    }

    .dropdown-item.active[b-fm8acca9cr] {
        background-color: #e9ecef;
        color: #495057;
        cursor: default;
        font-weight: 500;
    }

.navbar-logo-link[b-fm8acca9cr] {
    display: inline-flex;
    cursor: pointer;
}

.navbar-logo[b-fm8acca9cr] {
    max-width: 300px;
    height: auto;
}

@media (max-width: 767px) {
    .navbar-logo[b-fm8acca9cr] {
        max-width: 120px;
        max-height: 40px;
        width: auto;
    }
}

/* ===========================================
   LOGIN PAGE STYLING
   =========================================== */
.login-page[b-fm8acca9cr] {
    min-height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
    background-color: #f8f9fa;
}

.back-to-booking[b-fm8acca9cr] {
    width: 100%;
    max-width: 450px;
    margin-bottom: 12px;
}

.back-to-booking-link[b-fm8acca9cr] {
    color: var(--brand-blue, #2563eb);
    text-decoration: none;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
}

    .back-to-booking-link:hover[b-fm8acca9cr] {
        color: var(--brand-blue-dark, #1a365d);
        text-decoration: underline;
    }

.login-container[b-fm8acca9cr] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 32px;
    width: 100%;
    max-width: 450px;
}

.login-title[b-fm8acca9cr] {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 24px;
}

@media (max-width: 480px) {
    .login-page[b-fm8acca9cr] {
        padding: 20px 16px;
    }

    .login-container[b-fm8acca9cr] {
        padding: 24px 20px;
    }
}
/* /Pages/Register.razor.rz.scp.css */
body[b-445egmh0x3] {
}
/* /Pages/ResetPassword.razor.rz.scp.css */
/* ResetPassword.razor.css - Scoped styles for the reset password page */

/* ===========================================
   DARK BRAND HEADER STYLING
   =========================================== */
.navbar[b-x3wowccykn] {
    background-color: var(--brand-blue-dark, #1a365d) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    margin-bottom: 0;
}

    .navbar .btn-link[b-x3wowccykn] {
        color: white !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

        .navbar .btn-link:hover[b-x3wowccykn] {
            color: var(--brand-gold, #d4a019) !important;
        }

        .navbar .btn-link i[b-x3wowccykn] {
            color: white !important;
            opacity: 1 !important;
            visibility: visible !important;
        }

            .navbar .btn-link i:hover[b-x3wowccykn] {
                color: var(--brand-gold, #d4a019) !important;
            }

    .navbar .dropdown[b-x3wowccykn],
    .navbar .dropdown-menu[b-x3wowccykn] {
        max-height: none !important;
        overflow: visible !important;
        height: auto !important;
    }

.dropdown-menu[b-x3wowccykn] {
    display: none;
    max-height: none !important;
    overflow: visible !important;
    z-index: 2000;
}

    .dropdown-menu.show[b-x3wowccykn] {
        display: block;
    }

.dropdown-item[b-x3wowccykn] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .dropdown-item i[b-x3wowccykn] {
        width: 18px;
        text-align: center;
        flex-shrink: 0;
    }

    .dropdown-item:hover[b-x3wowccykn] {
        background-color: #f0f4f8;
        color: var(--brand-blue, #2563eb);
    }

.navbar-logo-link[b-x3wowccykn] {
    display: inline-flex;
    cursor: pointer;
}

.navbar-logo[b-x3wowccykn] {
    max-width: 300px;
    height: auto;
}

@media (max-width: 767px) {
    .navbar-logo[b-x3wowccykn] {
        max-width: 120px;
        max-height: 40px;
        width: auto;
    }
}

/* ===========================================
   RESET PASSWORD PAGE STYLING
   =========================================== */
.reset-password-container[b-x3wowccykn] {
    max-width: 900px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.reset-password-card[b-x3wowccykn] {
    background: white;
    padding: 2rem;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.reset-password-title[b-x3wowccykn] {
    background: #4682b4; /* Match the blue header from screenshot */
    color: white;
    padding: 1rem;
    margin: -2rem -2rem 1.5rem -2rem;
    border-radius: 4px 4px 0 0;
    font-size: 1.5rem;
    font-weight: 500;
}

.reset-instructions[b-x3wowccykn] {
    color: #333;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.form-label[b-x3wowccykn] {
    font-weight: 500;
    color: #333;
    margin-bottom: 0.5rem;
    display: block;
}

/* Password input wrapper - CRITICAL for positioning */
.password-input-wrapper[b-x3wowccykn] {
    position: relative !important;
    width: 100%;
    max-width: 400px;
    display: block;
}

    /* Make sure the input takes full width of wrapper */
    .password-input-wrapper input.form-control[b-x3wowccykn],
    .password-input-wrapper .form-control[b-x3wowccykn] {
        width: 100% !important;
        max-width: 100% !important;
        padding-right: 3rem !important; /* Extra room for button */
        padding-left: 0.75rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        font-size: 1rem;
        border: 1px solid #ccc;
        border-radius: 4px;
        transition: border-color 0.15s ease-in-out;
        box-sizing: border-box;
    }

/* Eye toggle button - positioned absolutely within wrapper */
.password-toggle-btn[b-x3wowccykn] {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 32px;
    height: 32px;
    border: none !important;
    background: transparent !important;
    color: #6c757d;
    cursor: pointer;
    transition: color 0.15s ease-in-out;
    padding: 4px;
    line-height: 1;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .password-toggle-btn:hover[b-x3wowccykn] {
        color: #495057 !important;
        background: transparent !important;
    }

    .password-toggle-btn:focus[b-x3wowccykn] {
        outline: 2px solid #4682b4 !important;
        outline-offset: 2px;
        color: #4682b4 !important;
        background: transparent !important;
    }

    .password-toggle-btn:active[b-x3wowccykn] {
        background: transparent !important;
    }

    .password-toggle-btn i[b-x3wowccykn] {
        font-size: 1.2rem;
        pointer-events: none;
        display: block;
    }

.form-control:focus[b-x3wowccykn] {
    outline: none;
    border-color: #4682b4;
    box-shadow: 0 0 0 0.2rem rgba(70, 130, 180, 0.25);
}

.form-control:disabled[b-x3wowccykn] {
    background-color: #e9ecef;
    cursor: not-allowed;
}

.btn-update-password[b-x3wowccykn] {
    background: #d4a655; /* Match the gold/yellow button from screenshot */
    color: white;
    border: none;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 25px;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-top: 1rem;
}

    .btn-update-password:hover:not(:disabled)[b-x3wowccykn] {
        background: #c89540;
    }

    .btn-update-password:disabled[b-x3wowccykn] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.alert[b-x3wowccykn] {
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-radius: 4px;
}

.alert-danger[b-x3wowccykn] {
    background-color: #f8d7da;
    border: 1px solid #f5c2c7;
    color: #842029;
}

.alert-success[b-x3wowccykn] {
    background-color: #d1e7dd;
    border: 1px solid #badbcc;
    color: #0f5132;
}

.validation-message[b-x3wowccykn] {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.text-danger small[b-x3wowccykn] {
    color: #dc3545;
}

/* Responsive design */
@media (max-width: 768px) {
    .reset-password-container[b-x3wowccykn] {
        margin: 1rem auto;
    }

    .reset-password-card[b-x3wowccykn] {
        padding: 1.5rem;
    }

    .reset-password-title[b-x3wowccykn] {
        margin: -1.5rem -1.5rem 1rem -1.5rem;
        font-size: 1.25rem;
    }

    .password-input-wrapper[b-x3wowccykn] {
        max-width: 100%;
    }

    .btn-update-password[b-x3wowccykn] {
        width: 100%;
    }
}