.vpn-error-container {
    background: #fff;
    color: var(--bs-dark-text);
    max-width: 600px;
    margin: 1rem auto;
    padding: 32px 28px 24px 28px;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
    font-size: 1.1rem;
    text-align: left;
    font-weight: 400;
}
.vpn-error-container ul {
    margin-left: 24px;
    margin-bottom: 16px;
}
.vpn-error-container li {
    margin-bottom: 6px;
}
.vpn-error-container p {
    margin-bottom: 12px;
}
#outputDiv a,
.vpn-error-container a {
    color: #1976d2;
    font-weight: bold;
    text-decoration: underline;
    display: inline-block;
    margin-top: 18px;
}

[data-bs-theme="dark"] .vpn-error-container {
    background: var(--bs-dark-bg-subtle);
    color: var(--bs-gray-600);
    box-shadow: 0 4px 24px rgba(255, 255, 255, 0.1);
}

/*
Custom CSS

This file is for your custom CSS. You can add your own styles here without 
modifying the index.html file or any other template files. This file is 
loaded in the template_v3/index.js file. 

This file is intentionally left blank. Add your custom CSS below.

@version 1.0.0
*/

/* Class selection cards */
#subclass_selection .subclass-card {
    position: relative;
    padding: 0;
    border-radius: 12px;
    cursor: pointer;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    transition:
        border-color 120ms ease,
        background-color 120ms ease,
        box-shadow 120ms ease,
        transform 120ms ease;
    /* Default (light) styles - MUST be visible on light backgrounds */
    border: 2px solid #dee2e6;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

#transactions {
    scroll-margin-top: 96px;
}

/* Travel costs gating (claim fields) */
#claim-fields .travel-cost-details {
    margin-bottom: 1rem;
}

#claim-fields {
    --ag-travel-accent: rgba(13, 110, 253, 0.14);
    --ag-travel-bg: rgba(13, 110, 253, 0.02);
}

[data-bs-theme="dark"] #claim-fields {
    --ag-travel-accent: rgba(13, 110, 253, 0.22);
    --ag-travel-bg: rgba(13, 110, 253, 0.035);
}

/*
Subtle “demure” styling for conditional travel-cost *detail* fields.

Important: keep the Yes/No trigger selects (travel_paid_for_travel, hotel_paid, parking_paid, travel_method)
as default styling; only the dependent/conditional fields get the accent treatment.
*/
#claim-fields
    .travel-cost-details[aria-hidden="false"]:not(.d-none):is(
        [data-field-id="_travel_method_other"],
        [data-field-id="_travel_dates"],
        [data-field-id="_travel_people_names"],
        [data-field-id="_travel_amount"],
        [data-field-id="_hotel_name_and_address"],
        [data-field-id="_hotel_reservation_name"],
        [data-field-id="_hotel_check_in_date"],
        [data-field-id="_hotel_check_out_date"],
        [data-field-id="_hotel_people_names"],
        [data-field-id="_hotel_amount"],
        [data-field-id="_parking_dates"],
        [data-field-id="_parking_people_names"],
        [data-field-id="_parking_amount"]
    ) {
    padding: 0.5rem 0.5rem 0.5rem 0.85rem;
    margin-left: 0.25rem;
    border-left: 3px solid var(--ag-travel-accent);
    border-radius: 0.25rem;
    /* Keep it subtle: only a soft left “wash”, not a full highlight block */
    background: linear-gradient(
        90deg,
        var(--ag-travel-bg) 0,
        rgba(0, 0, 0, 0) 26px
    );
}

/* Gentle section prompts (If Yes, continue/provide) without the full accent block */
#claim-fields
    .travel-cost-details[aria-hidden="false"][data-field-id^="__wrapper_"]:not(.d-none):not([data-field-id="__wrapper_1"]) {
    margin-left: 0.25rem;
    padding-left: 0.75rem;
    border-left: 2px solid rgba(13, 110, 253, 0.12);
}

[data-bs-theme="dark"]
    #claim-fields
    .travel-cost-details[aria-hidden="false"][data-field-id^="__wrapper_"]:not(.d-none):not([data-field-id="__wrapper_1"]) {
    border-left-color: rgba(13, 110, 253, 0.2);
}

#claim-fields
    .travel-cost-details[aria-hidden="false"][data-field-id^="__wrapper_"]:not(.d-none):not([data-field-id="__wrapper_1"])
    p {
    margin-bottom: 0;
    font-weight: 600;
}

#subclass_selection .subclass-card:hover {
    border-color: #adb5bd;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#subclass_selection .subclass-card:focus-within {
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    border-color: rgba(13, 110, 253, 0.55);
}

#subclass_selection .subclass-card-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

#subclass_selection .subclass-card-inner {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

#subclass_selection .subclass-card-title {
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.2;
    color: rgba(0, 0, 0, 0.9);
}

#subclass_selection .subclass-card-desc {
    margin-top: 6px;
    font-size: 0.92rem;
    line-height: 1.3;
}

#subclass_selection .subclass-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(13, 110, 253, 0.08);
    border: 1px solid rgba(13, 110, 253, 0.18);
    color: rgba(13, 110, 253, 0.95);
    flex: 0 0 auto;
}

#subclass_selection .subclass-card-icon i {
    font-size: 1.2rem;
}

#subclass_selection .subclass-card-check {
    position: absolute;
    top: 16px;
    right: 16px;
    color: rgba(0, 0, 0, 0.28);
    font-size: 1.5rem;
    line-height: 1;
}

#subclass_selection .subclass-card.is-selected {
    border-color: rgba(13, 110, 253, 0.8);
    background: rgba(13, 110, 253, 0.04);
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
}

#subclass_selection .subclass-card.is-selected .subclass-card-check {
    color: rgba(13, 110, 253, 0.95);
}

#subclass_selection .subclass-card-error {
    font-size: 0.85rem;
    color: #dc3545;
    line-height: 0;
}

#subclass_selection .subclass-card-error .error:not(:empty) {
    display: inline-block;
    line-height: 1.3;
    margin-top: 8px;
}

#subclass_selection label.error {
    border-color: rgba(220, 53, 69, 0.8);
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.2);
}

/* Bootstrap text-muted override for better contrast in light mode */
#subclass_selection .subclass-card-desc.text-muted {
    color: rgba(0, 0, 0, 0.72) !important;
}

/* Dark mode overrides using Bootstrap's data-bs-theme attribute */
[data-bs-theme="dark"] #subclass_selection .subclass-card {
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.03);
    box-shadow: none;
}

[data-bs-theme="dark"] #subclass_selection .subclass-card:hover {
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: none;
}

[data-bs-theme="dark"] #subclass_selection .subclass-card-title {
    color: rgba(255, 255, 255, 0.92);
}

[data-bs-theme="dark"] #subclass_selection .subclass-card-desc.text-muted {
    color: rgba(255, 255, 255, 0.72) !important;
}

[data-bs-theme="dark"] #subclass_selection .subclass-card-check {
    color: rgba(255, 255, 255, 0.18);
}

[data-bs-theme="dark"] #subclass_selection .subclass-card-icon {
    background: rgba(13, 110, 253, 0.15);
    border-color: rgba(13, 110, 253, 0.2);
    color: rgba(255, 255, 255, 0.95);
}

[data-bs-theme="dark"] #subclass_selection .subclass-card.is-selected {
    border-color: rgba(13, 110, 253, 0.65);
    background: rgba(13, 110, 253, 0.08);
    box-shadow: 0 0 0 1px rgba(13, 110, 253, 0.2);
}
/* Ticket card section dividers and spacing */
#transactions .ticket-card-section {
    position: relative;
}

#transactions .ticket-card-section:not(:last-child) {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* Dark mode divider */
[data-bs-theme="dark"] #transactions .ticket-card-section:not(:last-child) {
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

/* Tighter spacing for mobile */
@media (max-width: 767.98px) {
    #transactions .border.rounded {
        padding: 1rem !important;
    }

    #transactions .ticket-card-section:not(:last-child) {
        padding-bottom: 0.75rem;
        margin-bottom: 0.75rem;
    }

    #transactions .h5 {
        font-size: 1.1rem;
        margin-bottom: 1rem !important;
    }
}

/* Improve form field spacing within ticket cards */
#transactions .form-label {
    margin-bottom: 0.375rem;
    font-size: 0.95rem;
}

#transactions .form-control,
#transactions .form-select {
    font-size: 0.95rem;
}

/* Subtle visual separation for conditional blocks */
#transactions [data-ticket-field-group="friend_family_details"],
#transactions [data-ticket-field-group="other_holder"] {
    padding-left: 0.5rem;
    border-left: 2px solid rgba(13, 110, 253, 0.15);
    margin-top: 0.75rem;
}

[data-bs-theme="dark"]
    #transactions
    [data-ticket-field-group="friend_family_details"],
[data-bs-theme="dark"] #transactions [data-ticket-field-group="other_holder"] {
    border-left-color: rgba(13, 110, 253, 0.25);
}


/*# sourceMappingURL=common.css.map*/