/* Global Colors and Styles */
:root {
    --primary-blue: #113b63;
    --secondary-gray: #6c757d;
    --deep-gray: #495057;
    --light-gray: #ccc;
    --bg-light-gray: #f8f8f8;
    --border-gray: #dddddd;
    --global-red: #a92327; /* For price elements */
    --danger-red: #ff0000; /* Pure red for warnings */
    --selected-green: #0B8A00; /* Green for Selected Flight */
    --bg-white: #fffff;
    --warning-blue: #25a6ac;
    --review-dark-blue: #1a3d5f; /* Use deep-blue for review stars */
    --text-dark:#333;
}

/* General Styles */
body {
    font-family: "Lato", sans-serif;
}

.w-60 {
    width: 60% !important;
}

.w-70 {
    width:70% !important;
}

.w-80 {
    width: 80% !important;
}

.page-title {
    display: flex;
    align-items: center;
    margin: 2rem 0;
 }

.page-title h1 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
}

.page-title span {
    font-size: 1.25rem;
    font-weight: 700;
}

.page-title span::before {
    content: "";
    display: inline-block;
    /* 0.375rem ≈ 6px，但可以调整 */
    width: 6px;
    height: 6px;
    background-color: currentColor;
    border-radius: 50%;
    margin: 0 0.75rem;
    vertical-align: middle;
}


@media (max-width: 991.98px) {
    .page-title {
        flex-direction: column; /* 改为列布局，实现换行 */
        align-items: flex-start; /* 左对齐 */
        gap: 0.5rem; /* 添加行间距 */
        margin: 1rem 0; /* 调整间距 */
    }

        .page-title h1 {
            font-size: 0.875rem;
            width: 100%;
        }

        .page-title span {
            font-size: 0.75rem;
            font-weight: 400;
            width: 100%;
        }

    .page-title span::before {
        display: none;
    }
}

.btn-primary {
    /*width: auto !important;*/
    padding: 0.375rem 0.75rem;
    flex-shrink: 0;
    background-color: var(--primary-blue) !important;
    border-color: var(--primary-blue) !important;
    letter-spacing: 0.05rem;
}

    .btn-primary:hover,
    .btn-secondary:hover {
        box-shadow: 0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a
    }

.text-primary {
    color: var(--primary-blue) !important;
}

.btn-light {
    background: #fff;
    font-size: 0.875rem;
    border-color: var(--primary-blue) !important;
    padding: 0.4rem 0.8rem;
    color: var(--primary-blue);
}

    .btn-light:hover {
        color: var(--primary-blue);
        background: var(--bg-light-gray);
    }

    .btn-light.active {
        color: var(--primary-blue);
        background: var(--bg-light-gray);
        font-weight:700;
    }

    .btn-light.show {
        color: var(--primary-blue);
        background: var(--bs-gray-200);
    }

.filter-bar-scroll {
    /* 确保桌面端没有 overflow 属性，允许 dropdown 自由渲染 */
    overflow: visible;
    border-top: 1px solid var(--border-gray);
    border-bottom: 1px solid var(--border-gray);
    padding: 0.75rem 0;
    margin: 0.75rem 0;
    gap: .75rem; /* 控件间距 */
    display: flex !important
}

    .filter-bar-scroll .btn-light {
        flex-shrink: 0;
    }

.filter-bar-scroll.gap-2 {
    gap: .75rem !important;
}

@media (max-width: 991.98px) {
    .filter-bar-scroll {
        /* 在移动端重新启用水平滚动，以适应屏幕 */
        overflow-x: auto;
        overflow-y: hidden; /* 明确禁止垂直滚动 */
    }
}

.dropdown-toggle::after {
    border: none !important;
    content: "\f078" !important; /* Font Awesome chevron-down */
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 700 !important; /* Solid图标 */
    font-size: 0.75em !important;
    vertical-align: 0.15em !important; /* 调整垂直对齐 */
    margin-left: 0.6em !important;
    transition: transform 0.2s ease-in-out !important;
}

.btn-outline-primary {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--primary-blue);
    text-transform: uppercase;
    letter-spacing: .1em;
    background-color: var(--bg-white);
    border-width: 2px;
    border-color: var(--primary-blue);
}

    .btn-outline-primary:hover {
        background-color: var(--primary-blue);
        border-color: var(--primary-blue);
    }

    .btn-outline-primary:disabled {
        color: var(--secondary-gray);
        background-color: var(--bg-light-gray);
        border-color: var(--light-gray);
    }

    .btn-outline-primary:active,
    .btn-outline-primary.active {
        background-color: var(--primary-blue) !important;
        border-color: var(--primary-blue) !important;
    }

.btn-sm {
    font-size: 0.825rem;
}

.input-group {
    border: 1px solid #dee2e6;
    border-radius: 3px;
    /* 移除或注释掉 overflow: hidden, 否则会遮挡float label */
    /* overflow: hidden; */
}

.input-group .btn {
    border: 0;
    border-left: 1px solid #dee2e6; /* 添加左侧边框 */
}

/* 聚焦状态 */
.input-group:focus-within {
    border-color: var(--primary-blue);
    box-shadow: none;
}

.input-group:focus-within .float-label-input .form-control,
.input-group:focus-within .btn {
    border-color: var(--primary-blue);
}

/*--BEGIN-------浮动标签效果 */
.float-label-input {
    position: relative;
    display: inline-flex;
    width: 100%;
}

.float-label-input input.form-control {
    position: relative;
    z-index: 2;
    background: transparent;
}

/* 浮动标签样式 */
    .float-label-input .float-label {
        position: absolute;
        top: -0.5rem;
        left: 0.75rem;
        font-size: 0.625rem;
        font-weight: 400;
        color: var(--primary-blue);
        background: #fff;
        padding: 0 0.25rem;
        z-index: 3;
        opacity: 0;
        /* 移除所有transform变换，只使用opacity */
        /*transition: opacity 0.01s linear; */ /* 极短的线性过渡 */
        pointer-events: none;
        white-space: nowrap;
    }

.bg-light .float-label-input .float-label {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-light-rgb),var(--bs-bg-opacity)) !important;
}

/* Focus时显示标签 */
.float-label-input input:focus ~ .float-label,
.float-label-input input:not(:placeholder-shown) ~ .float-label {
    opacity: 1;
}

/* 隐藏placeholder防止重叠 */
.float-label-input input:focus::placeholder {
    color: transparent;
}

/* 可选：当输入框有内容但失去焦点时，也显示浮动标签 */
.float-label-input input:not(:placeholder-shown) ~ .float-label {
    opacity: 1;
}

/*--END-------浮动标签效果 */

/*--BEGIN----input group 和 float label 配合*/
.input-group .float-label-input {
    flex: 1;
}

.input-group .float-label-input .form-control {
    border: 0;
    border-radius: 0;
    border-right: 1px solid #dee2e6; /* 添加右侧边框 */
}

/* 浮动标签调整 */
.input-group .float-label-input {
    position: relative;
}

.input-group .float-label-input .float-label {
    z-index: 10; /* 增加z-index */
    /* 确保标签在.input-group的边界外也能显示 */
    transform: translateY(0); 
}

.input-group .float-label-input .form-control:focus ~ .float-label,
.input-group .float-label-input .form-control:not(:placeholder-shown) ~ .float-label {
    opacity: 1;
}
/*--END----input group 和 float label 配合*/

.icon-car-door {
    display: inline-block;
    width: 1.35rem;
    height: 1.35rem;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 56'%3E%3C!-- 黑色车门主体：左侧斜切轮廓 --%3E%3Cpath d='M35 2h55c4 0 7 3 7 7v40c0 4-3 7-7 7H12c-3 0-5-2-6-4v-15c0-2 1-5 3-7L35 2z' fill='black'/%3E%3C!-- 白色圆角玻璃 --%3E%3Cpath d='M38 7h47c2 0 4 2 4 4v18H21L35 9c1-1.5 2-2 3-2z' fill='white'/%3E%3C!-- 白色门把手 --%3E%3Crect x='76' y='38' width='14' height='7' rx='2' fill='white'/%3E%3C/svg%3E");
}

.form-control-lg {
    border-radius:3px;
    padding: 1rem 0.825rem;
    font-size: 0.875rem;
}

.form-control-lg:focus {
    border-color: var(--primary-blue);
    box-shadow:none;
}

.form-control-md {
    border-radius: 3px;
    padding: 0.75rem 0.825rem;
    font-size: 0.875rem;
}

    .form-control-md:focus {
        border-color: var(--primary-blue);
        box-shadow: none;
    }

[data-bs-toggle="tooltip"] {
    cursor: pointer;
}

.accordion-button .fa-chevron-down {
    transition: transform 0.3s ease;
}

.accordion-button:not(.collapsed) .fa-chevron-down {
    transform: rotate(180deg);
}

.card {
    border-color: var(--border-gray);
}

.card-header {
    background-color: var(--bg-white);
}

.section-title {
    font-weight: 700;
    font-size: 1.25rem;
    /*margin-bottom: 1.5rem;*/
    display: flex;
    align-items: center;
}

    .section-title i {
        margin-right: 10px;
    }

.non-refundable-warning {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.03rem;
    color: var(--warning-blue);
}

.text-dark {
    color: var(--text-dark);
}

.text-secondgray {
    color: var(--secondary-gray);
}

.text-red {
    color: var(--global-red);
}

.text-price {
    color: var(--global-red);
}

.fs-sm {
    font-size: 0.75rem;
}

.fs-md {
    font-size: 0.875rem;
}

.fs-lg {
    font-size: 1rem;
}

.link-underline {
    color: var(--secondary-gray);
    text-decoration: none;
    border-bottom: 2px solid var(--primary-blue);
    padding-top: 2px;
    padding-bottom: 2px;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

    .link-underline:hover {
        color: var(--primary-blue);
        background-color: var(--border-gray);
    }

.btn-underline {
    color: var(--secondary-gray);
    text-decoration: none;
    border-bottom: 2px solid var(--primary-blue);
    border-radius: 0;
    padding: 2px 0 0;
    letter-spacing: 0.05em;
}

    .btn-underline:hover {
        background-color: var(--border-gray);
        border-bottom: 2px solid var(--primary-blue);
    }

    .btn-underline:disabled {
        color: var(--secondary-gray);
        text-decoration: none;
        border:0;
        border-bottom: 2px solid var(--border-gray);
    }

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 991.98px) {
    .text-truncate {
        overflow: visible;
        white-space:normal;
    }
}
    /* ------------------------------------- */
    /* Nav/Breadcrumb Styles */

.breadcrumb-container {
    margin:1.5rem 0;
}
.breadcrumb-item + .breadcrumb-item::before {
    content: "\f105";
    font-family: "Font Awesome 6 Free";
    font-size: 0.75rem;
    font-weight: 900;
    padding: 0 1rem 0 0;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    line-height: 1.2;
    color: var(--secondary-gray);
    position: relative;
    top: 2px;
}

/* 移除原有的变量设置 */
nav {
    --bs-breadcrumb-divider: none;
}

.breadcrumb {
    font-size: 0.875rem;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--deep-gray);
    margin:0;
}

.breadcrumb-item + .breadcrumb-item {
    padding-left: 1rem;
}

.breadcrumb-item a {
    text-decoration: none;
    color: var(--secondary-gray);
}

.breadcrumb-item i {
    margin: 0 0.25rem 0 0;
    vertical-align:baseline
}

.breadcrumb-item a span {
    border-bottom: 1px solid var(--secondary-gray);
    padding-bottom: 1px;
}

.breadcrumb-item a:hover span {
    border-bottom: 2px solid var(--secondary-gray);
}

.breadcrumb-item.active {
    border-bottom: none;
    color: var(--primary-blue);
    font-weight: 700;
    pointer-events: none;
}


@media (max-width: 576px) {

    nav[aria-label="breadcrumb"] {
        display: grid;
        justify-content: center;
        width: 100%;
    }

    .breadcrumb {
        display: flex;
        justify-content: center;
        flex-wrap: nowrap;
        grid-column: 1; /* 确保在网格中占据一列 */
        font-size: 0.8rem;
    }

    .breadcrumb-item + .breadcrumb-item::before {
        padding: 0 0.4rem 0 0;
        top: 1px;
    }

    .breadcrumb-item + .breadcrumb-item {
        padding-left: 0.4rem;
    }
}

    .breadcrumb-item-text {
        font-size: 0.875rem;
        line-height: 1.2;
        white-space: nowrap;
        text-decoration: none;
    }

    .breadcrumb-separator i {
        font-size: 0.875rem;
        line-height: 1.2;
    }

    @media (max-width: 991.98px) {
        .breadcrumb-item-text {
            font-size: 0.825rem;
        }

        .breadcrumb-separator i {
            font-size: 0.825rem;
        }
    }

    /* Step Classes (step-previous, step-current, step-next) */
    .step-previous {
        color: var(--secondary-gray) !important;
        text-decoration: underline !important;
    }

        .step-previous i {
            color: var(--secondary-gray) !important;
        }

        .step-previous:hover {
            color: var(--primary-blue) !important;
        }

            .step-previous:hover i {
                color: var(--primary-blue) !important;
            }

    .step-current {
        color: var(--primary-blue) !important;
        font-weight: 700 !important;
    }

        .step-current i {
            color: var(--primary-blue) !important;
        }

    .step-next {
        color: var(--secondary-gray) !important;
        font-weight: 400 !important;
    }

        .step-next i {
            color: var(--secondary-gray) !important;
        }

    /* Global HR styling (thin grey line) */
    hr.my-2, hr.mb-3 {
        background-color: #eee;
        border: 0;
        height: 1px;
        opacity: 1;
    }

    .package-price-total {
        font-size: 0.875rem;
        font-weight: 700;
        color: var(--global-red);
        line-height: 1.2;
        white-space: nowrap;
    }

    .included-icons-block {
        display: flex;
        align-items: center;
        gap: 2px;
        margin-top: 1px;
    }

        .included-icons-block .included-icon {
            font-size: 0.8em;
            color: var(--secondary-gray);
        }

        .included-icons-block .included-plus-icon {
            font-size: 0.6em;
            color: var(--secondary-gray);
        }

    .included-text .fw-bold {
        font-size: 0.625rem;
    }

/*start: vacation summary */

.interactive-modal .modal-footer {
   background: var(--bg-light-gray);
}

.img-summary-hotel {
    max-height: 200px;
}

.vacationsummary .accordion-item:last-of-type > .accordion-header .accordion-button.collapsed {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.vacationsummary .hotel-image-sidebar {
    max-width:85px;
}

.vacationsummary .card {
    margin-bottom: 15px;
}

    .vacationsummary .card-header {
        padding: 1rem;
    }

    .vacationsummary .card-body {
        font-size: 0.875rem;
    }

        .vacationsummary .card-body h6 {
            font-size: 0.875rem;
        }

    .vacationsummary .card-flight-result {
        border: 0;
        padding: 0;
        box-shadow: none;
    }

        .vacationsummary .card-flight-result:hover {
            box-shadow: none;
        }

    .vacationsummary .arrow-column {
         padding: 0 26px;
    }

    .vacationsummary .selected-detail-content {
        padding: 15px 0;
    }

    @media (max-width: 991.98px) {
        .vacationsummary .time-duration-column {
            padding-right: 60px;
        }

        .vacationsummary .total-duration-column {
            max-width: calc(100% - 175px);
        }

        .vacationsummary .layover-tags-column {
            max-width: calc(100% - 60px);
        }

        .vacationsummary .arrow-column {
            display: flex !important;
            width: 40px;
            margin-top: -90px;
            order: 2;
            flex-direction: row;
            flex-shrink: 0;
            justify-content: center;
        }

        .vacationsummary .extra-details-row {
            padding: 10px 0 !important;
        }

        .vacationsummary .layover-text {
            padding-left: 0 !important;
        }
    }

/*  iPad mini Landscape, iPad iPad Pro Portrait */
@media (min-width: 992px) and (max-width: 1024px) {
    .vacationsummary .time-duration-column {
        width: 230px;
    }
    .vacationsummary .layover-tags-column {
        width: 135px;
        padding-left: 0;
    }
    .vacationsummary .segment-time, .vacationsummary .segment-airport {
        font-size:0.75rem;
    }

    .vacationsummary .duration-stops-label {
        font-size: 0.75rem;
    }

    .vacationsummary .total-duration-column {
        width:70px;
        font-size: 0.75rem;
        margin:0 5px;
    }
}

/*  iPad mini Landscape, iPad Air Landscape */
@media (min-width: 1024px) and (max-width: 1200px) {
    .vacationsummary .time-duration-column {
        width: 310px;
    }

    .vacationsummary .layover-tags-column {
        width: 135px;
        padding-left: 0;
    }
}

.vacationsummary .logo-column {
    width: 120px;
}

.vacationsummary .expanded-logo-column {
    margin-right: 15px !important;
}

.vacationsummary .layover-text {
    padding-left: 120px;
}

.vacationsummary .flight-main-row[aria-expanded="true"] .airline-logo-img {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 0.3s, opacity 0.3s linear;
}

    .vacationsummary .accordion-button {
        font-size: 0.875rem;
        color: var(--secondary-gray);
        background-color: transparent !important;
        box-shadow: none !important;
        padding: 1rem 0.5rem 1rem !important;
    }

        .vacationsummary .accordion-button:not(.collapsed) {
            background-color: transparent !important;
        }

        .vacationsummary .accordion-button::after {
            display: none !important;
        }

    .vacationsummary .accordion-body {
        padding: 1rem 0.2rem !important;
        color: var(--secondary-gray);
    }

    .vacationsummary hr {
        opacity: 0.1;
        margin: 0;
    }

    .vacationsummary .included-text .d-block {
        font-size: 0.625rem;
        font-weight: bold;
        color: var(--deep-gray);
    }

    .vacationsummary .included-icons-block {
        padding: 0.6rem 0 0;
    }

        .vacationsummary .included-icons-block .included-icon {
            font-size: 0.875rem;
            color: var(--deep-gray);
        }

    /* extras begin */
    .vacationsummary .extras-section {
        margin: 2rem 0;
    }

    .vacationsummary .extras-header {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        margin-bottom: 1rem;
        font-size: 0.875rem;
    }

    .vacationsummary .extras-description {
        font-size: 0.875rem;
        margin-bottom: 1.5rem;
        line-height: 1.5;
    }

    .vacationsummary .extras-carousel-container {
        position: relative;
    }

    .vacationsummary .extras-swiper {
        padding: 0 3px 10px !important;
    }

    .extras-card {
        border: 1px solid #dee2e6;
        border-radius: 0.375rem;
        transition: box-shadow 0.2s ease;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

.swiper .extras-card {
    margin: 0 5px;
}

.extras-card:hover {
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
}

    .extras-card-img {
        width: 100%;
        height: 180px;
        object-fit: cover;
        border-top-left-radius: 0.375rem;
        border-top-right-radius: 0.375rem;
        flex-shrink: 0;
    }

    .extras-card-body {
        padding: 1.25rem 1rem;
        flex: 1; /* have the content filling up the rest of the space */
    }

    /* category of the extra */
    .extras-card-category {
        display: inline-block;
        background-color: var(--border-gray);
        color: var(--deep-gray);
        font-size: 0.75rem;
        font-weight: 600;
        padding: 0.25rem 0.75rem;
        border-radius: 1rem;
        margin-bottom: 0.75rem;
        white-space: nowrap;
    }

    /* title of the extra */
    .extras-card-title {
        font-size: 0.875rem;
        font-weight: 700;
        line-height: 1.3;
        margin-bottom: 0.75rem;
    }

    /* card description, 4 lines with ... */
    .extras-card-text {
        font-size: 0.875rem;
        line-height: 1.5;
        margin-bottom: 1rem;
    }

    .extras-card-footer {
        padding: 0.75rem 1.25rem;
        background-color: #f8f9fa;
        border-top: 1px solid #dee2e6;
        border-bottom-left-radius: 0.375rem;
        border-bottom-right-radius: 0.375rem;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex-shrink: 0; /* prevent footer crashing */
    }

    .extras-card-price-label {
        font-size: 0.75rem;
        font-weight: bold;
        color: var(--deep-gray);
        margin-right: 0.25rem;
    }

    .extras-card-price {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--global-red);
    }

    /* prev/next button styles */
    .extras-carousel-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
        transition: background-color 0.2s ease;
        cursor: pointer;
    }

        .extras-carousel-btn:hover {
            background-color: rgba(0, 0, 0, 0.7);
        }

        .extras-carousel-btn.swiper-button-disabled {
            opacity: 0.35;
            cursor: auto;
            pointer-events: none;
        }

    /* desktop：prev/next button */
    @media (min-width: 992px) {
        .extras-carousel-btn-prev {
            left: -15px;
        }

        .extras-carousel-btn-next {
            right: -15px;
        }

        .extras-card-title {
            /*display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            min-height: 2.6em;*/
        }

        .extras-card-text {
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            /*min-height: 84px;*/
        }
    }

    /* mobile：prev/next button */
    @media (max-width: 991px) {
        .extras-carousel-btn-prev {
            /*left: 5px;*/
            display:none;
        }

        .extras-carousel-btn-next {
            /*right: 5px;*/
            display: none;
        }
    }

    .swiper-slide {
        height: auto;
    }

    .swiper-wrapper {
        display: flex;
    }

    /* responsive modifications */
    @media (max-width: 767px) {
        .extras-card-img {
            height: 225px;
        }

        .extras-card-text {
            /*min-height: 78px;
        -webkit-line-clamp: 3;*/ /* display 3 lines for mobile */
        }
    }

    @media (min-width: 767px) and (max-width: 991px) {
        .extras-card-img {
            height: 225px;
        }
    }

    /* extras end */

/* Cars section styles */
.cars-section {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.cars-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.cars-carousel-container {
    position: relative;
}

.vacationsummary .cars-swiper {
    padding: 0 3px 10px !important;
}

.cars-card {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    transition: box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.swiper ..cars-card {
    margin: 0 5px;
}

    .cars-card:hover {
        box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
    }

.cars-card-logo {
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.cars-logo-img {
    max-height: 125px;
    max-width: 200px;
    object-fit: contain;
}

.cars-card-body {
    padding: 0.5rem 1.25rem;
    flex: 1;
}

.cars-card-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: #333;
    line-height: 1.3;
    margin-bottom: 0.5rem;
}

.cars-card-description {
    color: var(--secondary-gray);
    font-size: 0.75rem;
    margin-bottom: 1rem;
    font-weight: 500;
}

.cars-features {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
}

.cars-feature-item {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
}

.cars-specs-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
}

    .cars-specs-list li {
        font-size: 0.875rem;
        line-height: 1.5;
        margin-bottom: 0.5rem;
        padding-left: 0;
    }

.cars-card-footer {
    padding: 0.85rem 1.25rem;
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
    border-bottom-left-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.cars-price-per-day {
    display: flex;
    align-items: baseline;
}

.cars-price {
    font-size: 0.875rem;
}

.cars-price-label {
    font-size: 0.875rem;
    margin-left: 0.25rem;
}

/* 总价 */
.cars-total-price {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.cars-total-label {
    font-size: 0.875rem;
    color: #666;
    font-weight: 700;
    margin-right: 0.25rem;
}

.cars-total-amount {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--global-red);
}

.cars-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background-color 0.2s ease;
    cursor: pointer;
}

    .cars-carousel-btn:hover {
        background-color: rgba(0, 0, 0, 0.7);
    }

    .cars-carousel-btn.swiper-button-disabled {
        opacity: 0.35;
        cursor: auto;
        pointer-events: none;
    }

@media (min-width: 992px) {
    .cars-carousel-btn-prev {
        left: -15px;
    }

    .cars-carousel-btn-next {
        right: -15px;
    }
}

@media (max-width: 991px) {
    .cars-carousel-btn-prev {
        /*left: 5px;*/
        display:none;
    }

    .cars-carousel-btn-next {
        /*right: 5px;*/
        display: none;
    }
}

.swiper-pagination-bullet-active {
    background:var(--primary-blue) !important;
}

.vacationsummary .extras-swiper-pagination,
.vacationsummary .cars-swiper-pagination {
    width: 100%;
    text-align: center;
    z-index: 10;
}

.row-items .row {
    padding:1rem 0;
    border-bottom:1px solid var(--border-gray);
}

.row-items .row:first-child {
    padding-top: 0;
}

.row-items .row:last-child {
    padding-bottom:0;
    border-bottom: none;
}

/*end: vacation summary */
/* ------------------------------------- */
/* Filter Styles (omitted for brevity) */
.filter-checkbox-container {
    padding: 0 1rem;
    overflow-x: visible;
}

.filter-clear-btn {
    color: var(--secondary-gray) !important;
    font-size: 0.75rem !important;
    text-transform: uppercase;
    text-decoration: none !important;
    position: relative;
    padding-bottom: 1px !important;
    border-radius: 0;
}

        .filter-clear-btn::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: var(--primary-blue);
            transform: translateY(2px);
        }

/* Clear button hover state */
.filter-clear-btn:hover {
    background-color: var(--border-gray);
}

    /* Filter Dropdown Menu Styles */
    .btn-group .dropdown-menu {
        padding: 0;
        min-width: 250px;
    }

.dropdown-menu.dropdown-name-search {
    width:380px;
}

.dropdown-menu.dropdown-name-search {
    width: 380px;
}

/* ------------------------------------- */
/* Flight Card Styles - Selected Flight */
.card-flight-result {
    border: 1px solid #ddd;
    margin-bottom: 15px;
    padding: 15px; /* Keep for normal cards */
    border-radius: 6px;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    cursor: pointer; /* Whole card is clickable */
    position: relative; /* Needed for positioning the spinner overlay */
    transition: box-shadow 0.2s ease-out;
}

        .card-flight-result:hover {
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
        }

        /* Important: Exclude specific interactive elements from triggering the card click (Handled in JS, but keeping cursor default here) */
        .card-flight-result .select-btn,
        .card-flight-result a,
        .card-flight-result input {
            cursor: default !important;
        }

    .card-flight-selected {
        border: 2px solid var(--selected-green); /* Thicker green border */
        padding: 0; /* Remove main padding to allow header to be full width */
    }

    .selected-header {
        background-color: var(--selected-green);
        color: #fff;
        padding: 5px 15px; /* Padding top/bottom 5px, left/right 15px */
        border-radius: 4px 4px 0 0; /* Match card radius for top corners */
        font-size: 0.875rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .selected-header i {
            margin-right: 5px;
            font-size: 1rem;
        }

    /* Restore padding to interior elements */
    .card-flight-selected .flight-main-row {
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 15px; /* Add top padding back since card-flight-result padding was removed */
    }

    .card-flight-selected .extra-details-row {
        /* Desktop padding. Mobile is overridden below. */
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 15px;
    }

    .card-flight-selected .expanded-content-wrapper {
        padding: 15px;
    }
    /* END Selected Flight Styles */
    /* ------------------------------------- */
    /* Interactive Card & Loading Styles */
    .loading-spinner-wrapper {
        display: none; /* Hidden by default, shown by JS */
        text-align: center;
        border-top: 1px solid #f8f8f8;
        padding: 15px 0 5px;
        margin: 0 15px;
    }

    /* Adjust margin for selected card if it is interacted with */
    .card-flight-selected .loading-spinner-wrapper {
        margin: 0 15px;
    }

    .selected-air-leg-card.is-expanded .selected-summary-row-desktop .selected-logo-img {
        visibility: hidden;
        opacity: 0;
        transition: visibility 0s 0.3s, opacity 0.3s linear; /* Delayed hide for smoother transition */
    }

    .selected-air-leg-card.is-expanded .logo-column .airline-logo-img {
        visibility: hidden;
        opacity: 0;
        transition: visibility 0s 0.3s, opacity 0.3s linear; /* Delayed hide for smoother transition */
    }

    .card-flight-result.is-expanded .logo-column .airline-logo-img {
        visibility: hidden;
        opacity: 0;
        transition: visibility 0s 0.3s, opacity 0.3s linear; /* Delayed hide for smoother transition */
    }

    /* 调整 time-duration column 宽度/位置以占用 Logo 区域的视觉空白 */
    /* Logo Column 宽度固定为 120px */
    .card-flight-result.is-expanded .time-duration-column {
        /* 1. 移动 time-duration-column 填补 logo 区域 (Desktop only) */
        margin-left: 0px;
    }

    /* ----------------------------------------------------------- */
    /* --- 修正 2: 展开内容区域的鼠标样式为默认 (非手形) --- */
    /* 确保展开内容区域的背景和静态文字不显示 cursor: pointer */
    .card-flight-result .collapse * {
        cursor: default;
    }

    /* 强制覆盖：select 按钮、链接、表单控件恢复其应有的光标 */
    .card-flight-result .collapse .select-btn,
    .card-flight-result .collapse a,
    .card-flight-result .collapse input,
    .card-flight-result .collapse label,
    .card-flight-result .collapse button {
        cursor: pointer !important;
    }

    /* END NEW: Interactive Card & Loading Styles */


    /* Flight Card Desktop Styles */

    /* Ensure non-time columns do not shrink */
    .logo-column, .total-duration-column, .layover-tags-column, .price-column, .arrow-column {
        flex-shrink: 0;
    }

    /* Total duration column must maintain fixed width */
    .total-duration-column {
        width: 90px;
        flex-shrink: 0;
        font-size:1rem;
        font-weight: 700;
        margin: 0 30px;
    }

    /* Core time/line container: fixed width to prevent line overflow */
    .time-duration-column {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 15px;
        padding-right: 15px;
        padding-top: 1rem;
        padding-bottom: 1rem;
        flex-grow: 0;
        flex-shrink: 0;
        width: 380px; /* Set a reasonable fixed width */
        margin-left: 0; /* Default position */
        transition: width 0.3s, margin-left 0.3s;
    }

    /* Time text container: prevents shrinking to ensure time text (+1) width */
    .segment-info {
        width: auto;
        flex-shrink: 0;
        white-space: nowrap;
    }

    .segment-time, .segment-airport {
        color: var(--deep-gray) !important;
        font-size: 1rem;
        line-height: 1.5;
    }

    .segment-airport {
        font-weight: 500 !important;
    }

    .segment-time {
        font-weight: 700 !important;
    }

    .segment-info.text-end {
        text-align: right !important;
    }

    /* Stop-line container: occupies remaining space, allows shrinking for dynamic compensation */
    .stop-line-container {
        flex-grow: 1;
        flex-shrink: 1; /* Allows shrinking */
        text-align: center;
        padding: 0 10px;
    }

    .duration-stops-label {
        font-size: 1rem;
        color: var(--deep-gray);
        font-weight: 600;
        margin-top: 0;
        position: relative;
        top: 10px;
        line-height: 1;
    }

    /* DYNAMIC STOP DOTS CSS */
    .line-with-stops {
        height: 1px;
        position: relative;
        width: 100%;
    }

        .line-with-stops::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 1px;
            background-color: var(--light-gray);
            transform: translateY(-50%);
            z-index: 1;
        }

    .line-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: var(--deep-gray);
        border: 1px solid #fff;
        z-index: 2;
        /* JS will set left: XX% */
        position: absolute;
        top: 50%;
        /* Horizontally and Vertically center the dot itself on the calculated left position */
        transform: translate(-50%, -50%);
    }

    /* Next-day indicator (+1) style */
    .plus-one {
        color: var(--primary-blue);
        font-size: 0.65em;
        font-weight: 700;
        line-height: 1.2;
        vertical-align: super;
        white-space: nowrap;
    }

    /* ------------------------------------- */

    .results-section-header {
        font-size: 1.2rem;
        font-weight: 500;
        color: #495057;
        margin-bottom: 30px;
    }


    .flight-main-row {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .logo-column {
        width: 140px;
        text-align: left;
        padding-right: 10px;
        flex-shrink: 0;
    }

    .airline-logo-img {
        max-width: 100px;
        height: auto;
        vertical-align: middle;
        transition: visibility 0s, opacity 0.3s linear;
    }

    .layover-tags-column {
        width: 160px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 3px;
        padding-left: 10px;
        flex-shrink: 0;
    }

    .layover-tag {
        background-color: #FFE67F;
        color: var(--deep-gray);
        font-size: 0.7rem;
        padding: 4px 0.5rem;
        border-radius: 10px;
        display: flex;
        align-items: center;
        font-weight: 600;
        line-height: 1.2;
        display: inline-flex;
        align-self: flex-start;
    }

        .layover-tag i {
            margin-right: 4px;
            font-size: 0.9rem;
            line-height: 1.2;
        }

    .price-column {
        flex-shrink: 0;
        width: 140px;
        padding: 0 15px;
        border-left: 1px dashed #eee;
        margin-right: 0;
        margin-left: auto;
    }

    .price-row {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        width: auto;
        margin-left: auto;
        gap: 5px;
    }

    .price-large-red {
        font-size: 1.45rem;
        font-weight: 700;
        color: var(--global-red) !important;
        line-height: 1.2;
        flex-shrink: 0;
    }

    .price-details-text {
        font-size: 0.6rem;
        line-height: 1.1;
        color: var(--secondary-gray);
        flex-shrink: 0;
        margin: 0;
        width:min-content;
    }

    .arrow-column {
        width: 30px;
        text-align: right;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .extra-details-row {
        font-size: 0.8em;
        color: #666;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .expanded-content-wrapper {
        display: flex;
        justify-content: space-between;
        margin: 15px 0 0 !important;
        padding: 15px 0px 5px 0px;
        border-top: 1px solid #eee;
    }

    .expanded-flight-segments {
        flex-basis: 65%;
        padding-right: 20px;
    }

    .flight-segment-block {
        margin-bottom: 10px;
    }

        /* Layout fix (Desktop Default: side-by-side) */
        .flight-segment-block .expanded-segment-content {
            display: flex !important;
            align-items: flex-start !important;
            padding-left: 5px !important;
        }

    /* Logo container size and spacing fix */
    .expanded-logo-column {
        text-align: left !important;
        margin-right: 35px !important;
        padding-right: 0 !important;
        padding-bottom: 5px !important;
        flex-shrink: 0 !important;
        padding-top: 0 !important;
        width: 100px !important;
        max-width: 100px !important;
    }

        /* Logo image size fix */
        .expanded-logo-column .segment-airline-logo {
            width: 100% !important;
            max-width: 100px !important;
            height: auto !important;
            margin-top: 0 !important;
        }

    .expanded-info-column {
        flex-grow: 1;
        width: 100%;
    }

    .segment-header {
        font-size: 0.8rem;
        font-weight: 700;
        color: var(--deep-gray);
        line-height: 1.2;
    }

    .segment-subheader {
        font-size: 0.7rem;
        font-weight: 500;
        color: var(--deep-gray);
        line-height: 1.2;
        margin-top: 8px;
        margin-bottom: 5px;
    }

    .flight-segment-detail {
        display: flex;
        flex-direction: column;
        position: relative;
        padding-top: 5px;
        padding-left: 15px;
    }

        /* Vertical Line */
        .flight-segment-detail::before {
            content: '';
            position: absolute;
            left: 4px;
            top: 20px;
            bottom: 15px;
            width: 1px;
            background-color: var(--light-gray);
            z-index: 1;
        }

    .timeline-row {
        position: relative;
        padding: 5px 0;
    }

        .timeline-row:not(:last-child) {
            margin-bottom: 0;
        }

        /* Dot: Adjust top to 9px */
        .timeline-row.time-point::before {
            content: '';
            position: absolute;
            left: -16px;
            top: 9px;
            transform: translateY(0);
            width: 11px;
            height: 11px;
            border-radius: 50%;
            background-color: var(--deep-gray);
            border: 2px solid #fff;
            z-index: 2;
        }

    .travel-time-line-info {
        padding-top: 8px;
        padding-bottom: 8px;
        margin-bottom: 0;
    }

    .timeline-text {
        font-size: 0.8rem;
        color: var(--deep-gray);
        line-height: 1.5;
        font-weight: 600;
    }

    .travel-time-text {
        font-size: 0.8rem;
        font-weight: 500;
        color: var(--secondary-gray);
        line-height: 1.5;
    }

    .layover-separator {
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
        padding: 10px 0;
        margin: 10px 0;
    }

    .layover-text {
        padding-left: 140px;
        font-size: 0.8rem;
        color: var(--secondary-gray);
    }

    .expanded-fare-options {
        flex-basis: 35%;
        padding-left: 20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

        .expanded-fare-options .fare-card input[type="radio"] {
            width: 16px;
            height: 16px;
            flex-shrink: 0;
        }

    .fare-card {
        border: 1px solid #ddd;
        border-radius: 6px;
        padding: 20px;
        cursor: default;
        transition: all 0.2s;
        background-color: #f8f8f8;
    }

        .fare-card.selected {
            border-color: #ddd;
            background-color: #f8f8f8;
        }

    .fare-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .fare-price {
        display: flex;
        align-items: center;
        gap: 5px;
    }

        .fare-price > span {
            font-size: 1.45rem;
            font-weight: 700;
            color: var(--global-red);
        }

        .fare-price small {
            font-size: 0.6rem;
            line-height: 1.1;
            color: var(--secondary-gray);
            flex-shrink: 0;
            text-align: start;
            width: min-content;
        }

    .fare-label {
        display: flex;
        align-items: center;
        cursor: pointer;
    }

    .fare-name {
        font-size: 0.9rem;
        font-weight: 700;
        margin-left: 10px;
    }

    /* Custom Primary Blue for Checked Form Controls (Radio/Checkbox) */
    /* Overrides Bootstrap's default blue for form-check-input elements */
    .form-check-input:checked {
        background-color: var(--primary-blue) !important;
        border-color: var(--primary-blue) !important;
    }

    /* The bare input[type="radio"] is used in the Expanded Fare Options */
    /* accent-color applies to raw radio inputs for the inner circle */
    input[type="radio"] {
        accent-color: var(--primary-blue);
    }

    .fare-card-description {
        font-size: 0.75rem;
        /* Set color to pure danger red */
        color: var(--danger-red);
        margin-top: 5px;
    }

        .compare-link, .fare-card-description a {
            font-size: 0.75rem;
            color: var(--primary-blue) !important;
            text-decoration: underline;
            cursor: pointer;
            margin-top: 5px;
            display: inline-block;
        }

    .baggage-fees-wrapper {
        font-size: 0.8rem;
        color: var(--secondary-gray);
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: 5px;
    }

.baggage-fees-link {
    font-size: 0.75rem;
    letter-spacing: .05em;
    color: var(--secondary-gray) !important;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    font-weight: 700;
    cursor: pointer !important;
    border-style: solid;
    border-width: 0 0 2px 0;
    border-color: var(--primary-blue);
}

    .baggage-fees-link:hover {
        background-color: var(--bg-light-gray);
    }

    .baggage-fees-link i {
        font-size: 0.9em;
        margin-left: 5px;
        color: var(--primary-blue) !important;
        text-decoration: underline !important;
        cursor: pointer !important;
    }

    .fare-footer-row {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-top: 20px;
        gap: 15px;
        padding-top: 10px;
        border-top: 1px solid #eee;
    }

    /* Intermediate Screen Size (e.g., iPad Pro Portrait) */
    @media (min-width: 992px) and (max-width: 1200px) {
        /* Reduce the main time-line block width to save space */
        .time-duration-column {
            width: 330px; /* Reduced from 350px */
        }
        /* Recalculate expanded margin-left/width */
        .card-flight-result.is-expanded .time-duration-column {
            margin-left: -120px;
            width: 450px; /* 330px + 120px = 450px */
        }
        /* Reduce duration column margin to save 40px */
        .total-duration-column {
            margin: 0 10px; /* Reduced from 30px */
        }
    }


    /* MOBILE STYLES */
    @media (max-width: 991.98px) {

        /* 让按钮宽度100% */
        .btn-keep {
            width: 100% !important;
            margin-top: 15px;
            margin-left: 0;
        }

        .number-flights {
            font-size: 0.875rem !important;
        }
        /* Force stacking (column) for expanded content on mobile */
        .flight-segment-block .expanded-segment-content {
            flex-direction: column !important;
        }

        /* General Card Adjustments */
        .card-flight-result {
            padding: 15px;
            position: relative;
            display: block;
        }

        .card-flight-selected {
            padding: 0;
            display: flex;
            flex-direction: column;
        }

            .card-flight-selected .flight-main-row,
            /* Maintain selected card inner padding */
            .card-flight-selected .extra-details-row {
                padding-left: 10px;
                padding-right: 10px;
            }

        /* --- 修正 1 移动端兼容: 确保移动端 Logo 隐藏时，不影响布局 --- */
        .card-flight-result.is-expanded .logo-column .airline-logo-img {
            visibility: hidden;
            opacity: 0;
            transition: visibility 0s 0.3s, opacity 0.3s linear;
        }

        /* 移动端 time-duration-column 不做 margin-left 操作 */
        .card-flight-result.is-expanded .time-duration-column {
            margin-left: 0;
            width: 100%;
            padding-right: 90px;
        }


        .price-column, .arrow-column {
            display: none !important; /* Hide desktop elements (including the arrow column) */
        }

        /* Font size: 0.75rem for text elements in the left column */
        .segment-time, .segment-airport {
            font-size: 0.75rem !important;
        }

        .duration-stops-label {
            font-size: 0.75rem;
        }

        /* --- Left Column (Stacked Details) --- */

        .flight-main-row {
            display: flex;
            flex-wrap: wrap;
            padding-bottom: 0;
            width: 100%;
            align-items: center;
        }

        /* 1. Time/Line/Stops (Order: 1, Row 1/2 - Top Block) */
        .time-duration-column {
            order: 1;
            width: 100%;
            padding: 0;
            gap: 10px;
            padding-right: 90px;
        }

        /* 2. Logo (Order: 2, Row 3 Left - Same Row as Duration) */
        .logo-column {
            order: 2;
            width: 100px;
            flex-shrink: 0;
            /* Crucial fix: set padding-right to 0 to resolve sizing/alignment */
            padding-right: 0;
            margin-top: 5px;
            text-align: left;
        }

        .airline-logo-img {
            max-width: 100%;
            height: auto;
        }

        /* 3. Duration Position (Order: 2, Row 3 Right - Same Row as Logo) */
        .total-duration-column {
            order: 2;
            text-align: right;
            flex-grow: 1;
            flex-shrink: 0;
            font-size: 0.75rem;
            color: var(--deep-gray);
            font-weight: 400;
            margin: 5px 0 0 0 !important;
            padding-right: 0;
            max-width: calc(100% - 190px);
        }

        /* 4. Layover Tags (Order: 3, Row 4) */
        .layover-tags-column {
            max-width: calc(100% - 80px); /* orginal "100% - 90px", changed to "-80px" for extra space if price is long */
            width: 100%;
            order: 3;
            flex-direction: row;
            padding-left: 0;
            margin-top: 5px;
            flex-shrink: 0;
        }

            .layover-tags-column:not(:has(> *)) {
                display: none !important;
            }

        /* 5. Extra Info (Order: 4, Row 5) */
        .extra-details-row {
            /*max-width: calc(100% - 90px);*/
            order: 4;
            display: block;
            border-top: none;
            margin-top: 5px;
            padding-right: 0;
            padding-left: 0;
            /* General rule for normal cards */
            padding: 10px 0 0 0 !important;
        }

            .extra-details-row:where( :has(.details-text:empty), :has(.details-text:is(:empty, :has(> br:only-child))), :has(.details-text:not(:has(*)):not(:has(text))) ) {
                margin: 0 !important;
                padding: 0 !important;
            }

            .extra-details-row .details-text {
                font-size: 0.75rem;
                font-weight: 400;
            }

            /* ------------------------------------------- */
            /* --- Right Column (Absolute Price) --- */

            .extra-details-row .action-right-side {
                position: absolute;
                top: 10px; /* Base offset */
                right: 10px;
                width: 80px;
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                justify-content: flex-start;
                z-index: 10;
            }

        /* Adjust price position for selected card header offset */
        .card-flight-selected .action-right-side {
            top: 45px !important;
        }

        /* Restore side and bottom padding for selected extra-details-row */
        .card-flight-selected .extra-details-row {
            /* Override general rule padding to restore side/bottom spacing */
            padding: 10px 10px 15px 10px !important;
        }

        /* Hide mobile chevron (Requirement: no arrows on mobile) */
        .extra-details-row .action-right-side .mobile-chevron {
            display: none;
        }

        .price-large-red-mobile {
            font-size: 1rem;
            font-weight: 700;
            color: var(--global-red) !important;
        }

        .per-person-text-mobile {
            font-size: 0.6rem;
            font-weight: 600;
            color: var(--secondary-gray);
        }

        /* Hide the select button from the absolute positioned area */
        .extra-details-row .action-right-side .select-btn {
            display: none;
        }

        /* ------------------------------------------- */
        /* Mobile Expanded Content */

        .expanded-content-wrapper {
            margin: 15px 0 0;
            flex-direction: column;
            padding: 15px 0px 5px 0px; /* Mobile padding adjustment (10px sides) */
        }

        .expanded-flight-segments {
            padding-right: 0;
            border-right: none;
            border-bottom: 1px solid #eee;
            padding-bottom: 15px;
        }

        .expanded-fare-options {
            padding-left: 0;
            padding-top: 15px;
        }

        .layover-text {
            padding-left: 5px;
        }

        .fare-footer-row {
            justify-content: space-between;
            margin-top: 10px;
        }

        .baggage-fees-wrapper {
            color: var(--deep-gray) !important;
        }
    }

    /* ------------------------------------- */
    /* Departure Selected Card Styles (New Module) */

    .selected-air-leg-card {
        border: 1px solid #ddd;
        margin-bottom: 15px;
        border-radius: 6px;
        background-color: var(--bg-light-gray); /* Light gray background */
        position: relative;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        /* Mobile adjustment */
        margin-left: -15px;
        margin-right: -15px;
        overflow: hidden;
    }

    @media (min-width: 576px) {
        .selected-air-leg-card {
            margin-left: 0;
            margin-right: 0;
            background-color: transparent;
            /* 2. 边框改为浅灰色，与普通卡片一致 */
            border: 1px solid #ddd;
        }
    }

    /* Desktop Header Row (First Row) */
    .selected-header-row-lg {
        border-bottom: 1px solid #eee;
        /* 2. 减少第一行上下 padding */
        padding: 10px 15px;
        display: none; /* Hide on mobile */
    }

        .selected-header-row-lg .fa-check-circle {
            color: var(--selected-green);
            font-size: 1.2rem;
            margin-right: 10px;
        }

    .departure-card-title {
        /* 1. 桌面端日期/标题字号改为 .875rem */
        font-size: 0.875rem;
        font-weight: 700;
        color: var(--primary-blue);
    }

    /* 1. 修正 "Thu, Dec 25" 的字号 */
    .selected-header-row-lg .text-secondary {
        font-size: 0.875rem;
        font-weight: 400;
        line-height: 1.2;
    }

    /* 2. MODIFY 按钮样式修正 */
    .flight-header-btn {
        color: var(--secondary-gray) !important;
        font-size: 0.75rem !important;
        font-weight: 700;
        text-decoration: none !important; /* 移除默认下划线 */
        padding: 0 !important;
        margin: 0 !important;
        position: relative;
    }

        .flight-header-btn::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: var(--primary-blue);
            transform: translateY(2px);
        }

    .selected-air-leg-card .col-lg-1.arrow-col {
        /* 确保箭头列始终居中对齐，与按钮中心对齐 */
        display: flex;
        align-items: center;
        justify-content: center;
    }


    /* Mobile Header Row */
    .selected-header-row-sm {
        padding: 15px;
        display: flex; /* Show on mobile */
        align-items: center;
        justify-content: space-between;
        font-weight: 700;
        color: var(--primary-blue);
    }

        .selected-header-row-sm .fa-check-circle {
            color: var(--selected-green);
            font-size: 1rem;
            margin-right: 8px;
        }

    /* Summary Row (The clickable area to expand) */
    .selected-summary-row {
        padding: 10px 0px;
        cursor: pointer;
        transition: background-color 0.2s;
    }

        .selected-summary-row:hover {
            background-color: #f0f0f0;
        }

    .summary-logo-col {
        width: 120px;
        text-align: center;
    }

        .summary-logo-col img {
            max-width: 100px;
            height: auto;
        }

    .summary-detail-text {
        font-size: 0.9rem;
        color: var(--deep-gray);
        white-space: nowrap;
    }

    .summary-duration-text {
        font-weight: 700;
        white-space: nowrap;
    }

    /* R1: Desktop Summary Row - Uniform Distribution (6 columns) */
    .selected-summary-row-desktop {
        display: flex; /* Ensure it works as a flex row with bootstrap cols */
        align-items: center;
        justify-content: flex-start;
        /* 1. 完全移除 padding: 5px 15px; 只保留左右侧的 15px 间距，由内部 col 的 margin/padding 或 row 的 g-0/p-x 决定 */
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 0;
        padding-bottom: 0;
        cursor: pointer;
    }

        .selected-summary-row-desktop:hover {
            background-color: #f0f0f0;
        }

        /* 修正 2: 确保时间文本 (5:00 AM - 12:54 PM) 可见且颜色正确 */
        .selected-summary-row-desktop .summary-detail-text .fw-bold {
            color: var(--deep-gray) !important;
            font-size: 0.9rem;
        }

        /* R1: Arrow Column Alignment - FIX: Force center alignment for the arrow to align with MODIFY button */
        .selected-summary-row-desktop .arrow-column {
            justify-content: center !important; /* <--- FIXED: 确保居中对齐 */
            padding-right: 0; /* 箭头列内部无需右侧 padding */
        }

        /* R1: Ensure Selected Logo size for desktop row */
        .selected-summary-row-desktop .selected-logo-img {
            max-width: 100px;
            height: auto;
        }

    @media (max-width: 991.98px) {
        .selected-summary-row {
            padding:0px;
        }
        .selected-air-leg-card .flight-main-row.d-lg-none {
            padding: 0 15px 5px;
        }

        .extra-details-row:where( :has(.details-text:empty), :has(.details-text:is(:empty, :has(> br:only-child))), :has(.details-text:not(:has(*)):not(:has(text))) ) {
            margin: 0 !important;
            padding: 0 !important;
        }

        /* R2: Mobile Extra Details Row - Only for Arrow (override display: block; from mobile styles) */
        .selected-air-leg-card .extra-details-row {
            padding: 0 0 10px 15px !important;
        }

            .selected-air-leg-card .extra-details-row:where(:has(.details-text:empty), :has(.details-text:is(:empty, :has(> br:only-child))), :has(.details-text:not(:has(*)):not(:has(text)))) {
                padding: 0 !important;
            }


            /* R2: Adjust width of the action-right-side to widen the left content area */
            .selected-air-leg-card .extra-details-row .action-right-side {
                position: absolute; /* Keep absolute position */
                top: 85px !important; /* Matches selected card header offset */
                right: 13px;
                width: 50px; /* Smaller width (was 80px) to widen left content */
                min-width: 50px;
                max-width: 50px;
            }

                /* R2: Force display of the chevron and ensure it is centered */
                .selected-air-leg-card .extra-details-row .action-right-side .mobile-chevron {
                    display: block !important;
                    font-size: 1.1rem;
                    color: var(--secondary-gray);
                    margin: 0 auto; /* Center the chevron in its 50px container */
                }

            /* R2: Hide all other children of price-row-mobile (price, select button) */
            .selected-air-leg-card .extra-details-row .price-row-mobile > *:not(.mobile-chevron) {
                display: none !important;
            }

            /* Ensure the price-row-mobile is visible to hold the chevron */
            .selected-air-leg-card .extra-details-row .price-row-mobile {
                display: flex !important;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 100%;
            }

        .selected-air-leg-card .text-secondary {
            font-size: 0.875rem;
        }

        .selected-fare-badge {
            padding: 10px !important;
            margin-top: 15px;
            border: 1px solid #ccc;
            border-radius: 6px;
        }
    }


    /* Expanded Content Styles */
    .selected-detail-content {
        padding: 15px;
        border-top: 1px solid #eee;
    }

    .selected-segment-block {
        padding: 10px 0;
    }

        .selected-segment-block .col-lg-3 img {
            max-width: 100px;
            margin-bottom: 10px;
        }

    .selected-flight-info strong {
        font-size: 0.9rem;
        color: var(--deep-gray);
    }

    .selected-flight-info .mat-caption {
        font-size: 0.75rem;
        color: var(--secondary-gray);
    }

    .selected-timeline-item {
        display: flex;
        align-items: flex-start;
        margin-bottom: 5px;
        position: relative;
    }

        .selected-timeline-item .fa-circle {
            color: var(--deep-gray);
            font-size: 0.6rem;
            margin-right: 8px;
            margin-top: 6px;
            flex-shrink: 0;
            position: relative;
            z-index: 2;
        }

    .selected-timeline-line {
        position: absolute;
        left: 17px;
        top: 25px;
        bottom: 15px;
        width: 1px;
        background-color: #eee;
        z-index: 1;
    }

    .selected-timeline-text {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--deep-gray);
    }

    .selected-travel-time {
        font-size: 0.8rem;
        color: var(--secondary-gray);
        margin-left: 25px;
        padding: 5px 0;
    }

    .selected-layover-separator {
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
        padding: 10px 0;
        margin: 10px 0;
        font-size: 0.8rem;
        color: var(--secondary-gray);
    }

    .selected-fare-badge {
        padding: 0 10px;
        font-size: 0.75rem;
        width: 100%;
    }

        .selected-fare-badge a {
            font-size: 0.75rem;
            color: var(--primary-blue) !important;
            text-decoration: underline;
        }

    @media (min-width: 992px) {
        .selected-header-row-lg {
            display: flex !important; /* Show on desktop */
        }

        .selected-header-row-sm {
            display: none; /* Hide on desktop */
        }

        .selected-detail-content .layover-text {
            padding-left: 0px;
        }

        .selected-fare-badge {
            border: 0;
        }

        .ps-lg-25p {
            padding-left: 25% !important;
        }
    }

    .dropdown-menu .h6 {
        font-weight: 600;
        color: var(--deep-gray);
        font-size:0.875rem;
    }

    /* ------------------------------------- */
    /* Modal Styles (All Filters) */

    /*.all-filters-modal .modal-dialog {
        margin: 0;
        width: 100%;
        max-width: 100%;
        min-height: 100vh;*/ /* 确保移动端全屏 */
    /*}

    .all-filters-modal .modal-content {
        border-radius: 0;
        border: none;
        height: 100vh;
    }*/

    .modal-header {
        border-bottom: 1px solid var(--light-gray);
        padding: 1rem;
    }

    .modal-title {
        font-weight: 700;
        font-size: 1rem;
    }

    .modal-filters-content {
        padding: 0 1rem 1rem;
        flex-grow: 1; /* 确保内容区占据剩余空间并可滚动 */
    }

        .modal-filters-content .filter-title {
            font-size: 1rem;
            font-weight: 700;
            color: var(--text-dark);
            margin-bottom: 0.75rem;
            font-size: 0.875rem;
        }


.modal-filter-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
}

.filter-section {
    padding: 1rem 0 0.5rem;
}

.modal-filter-section {
    padding: 1rem 0 0.5rem;
}

.modal-filters-content .form-check {
    margin-bottom:0.25rem;
}

.dropdown-menu .form-check {
    margin-bottom: 0.25rem;
}

.modal-filters-footer {
    position: sticky;
    bottom: 0;
    background-color: #fff;
    border-top: 1px solid var(--light-gray);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    z-index: 1050; /* 确保在滚动内容之上 */
}

    .show-flights-btn {
        flex-grow: 1; /* 主按钮占据剩余空间 */
        max-width: 70%;
    }

.filter-select {
    border-color: #dee2e6;
    font-size: 0.875rem;
    color: var(--deep-gray);
    border-radius: 3px !important;
    padding: 0.75rem 2.25rem 0.75rem 0.75rem; /* Standard padding */
}

        .filter-select:focus {
            box-shadow: none !important;
            border-color: var(--primary-blue) !important;
        }


    /* Desktop Adjustments (>= 992px) */
    @media (min-width: 992px) {
        /* Modal should be standard size on desktop */
        .all-filters-modal .modal-dialog {
            margin: 1.75rem auto;
            width: auto;
            max-width: 500px; /* Standard or slightly larger desktop modal */
            min-height: auto;
        }

        .all-filters-modal .modal-content {
            height: auto;
            border-radius: 0.5rem;
        }

        .modal-filters-footer {
            position: relative; /* Desktop 取消固定底部 */
        }

        .show-flights-btn {
            max-width: 50%;
        }
    }

    /* ------------------------------------- */
    /* Sort By Bottom Sheet Styles (移动端专用) */
    @media (max-width: 991.98px) {
        .bottom-sheet-modal .modal-dialog {
            /* 将 Modal 容器推到底部 */
            position: fixed;
            bottom: 0;
            left: 0;
            margin: 0;
            width: 100%;
            max-width: 100%;
            transform: translateY(0); /* 覆盖默认居中定位 */
        }

        .bottom-sheet-modal .modal-content {
            /* 圆角设计，使其看起来像底部抽屉 */
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            border-top-left-radius: 12px;
            border-top-right-radius: 12px;
            max-height: 80vh; /* 限制高度，允许滚动 */
            overflow: hidden;
        }

        .bottom-sheet-modal .modal-body {
            max-height: calc(80vh - 120px); /* 确保 body 可滚动，且不超出 max-height */
            overflow-y: auto;
        }

        .bottom-sheet-modal .modal-footer {
            padding: 0.75rem 1rem;
            border-top: 1px solid var(--border-gray);
        }
    }

    /* 桌面端隐藏 Bottom Sheet 的默认行为（虽然 Bootstrap 默认是居中，但以防万一） */
    @media (min-width: 992px) {
        /* 确保 Sort By Dropdown 在桌面端正常工作 */
        #sortByButton[data-bs-toggle="dropdown"] {
            display: block !important;
        }
        /* 确保 Sort By Bottom Sheet 在桌面端不影响布局 */
        .bottom-sheet-modal {
            /* 可以选择性地隐藏或让其保持默认居中行为 */
        }
    }

    /* ------------------------------------- */


    /*
 * Fix for: Applying Bootstrap-like check visual state 
 * for inputs (Stops, Time, Sort By) where native :checked state 
 * visuals are lost due to JavaScript prop() manipulation.
 */
    .form-check-input[type="radio"].js-checked-visual-fix {
        border-width: 0.283em !important;
        border-color: var(--primary-blue) !important;
    }


/* Hotel Styles START */

/* General layout styles */
.hotel-header {
    padding: 15px 0;
    /*border-bottom: 1px solid #eee;*/
}

h5 {
    font-size: 1.1rem;
}

/* Style for the main, discounted price (reduced font size) */
.main-discount-price {
    font-size: 1.5rem;
    color: var(--global-red);
    font-weight: 600;
    line-height: 1;
}

.section-padding {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* New style for the plus icon in the amenities list (加号图标样式) */
.amenity-plus-icon {
    font-size: 0.6rem;
    color: #6c757d; /* text-muted color */
    vertical-align: super;
    margin-left: 2px;
}

/* --- Price Block Specific Styles --- */

/* 1. Price Container: Padding and light gray background */
.price-booking-container {
    background-color: #f8f8f8;
    padding: 1rem;
    border-radius: 0.25rem;
}

/* Price block structure classes (from removed inline styles) */
.price-info {
    line-height: 1.1;
}

.price-from-block {
    line-height: 1.5;
}

.price-per-person-block {
    line-height: 1;
}

/* 3. Per Person Alignment */
.per-person-text {
    font-size: 0.7rem;
    line-height: 1.1;
    color: var(--deep-gray);
    width: min-content;
}

/* Included Items Text (Font size and line height unified and increased) */
.included-text {
    font-size: 0.625rem;
    line-height: 1.5;
    color: #495057;
}

/* Fixed icon size for consistency */
.included-icon {
    font-size: 0.9rem;
    color: #6c757d;
}

/* Icons Block container (from removed inline styles) */
.included-icons-block {
    white-space: nowrap;
    line-height: 1.1;
}

/* Custom style for the plus icon to ensure vertical alignment */
.included-plus-icon {
    font-size: 0.6em;
    vertical-align: middle;
    margin: 0 1px;
    padding-bottom: 2px;
    display: inline-block;
}

/* --- Image Carousel Specific Styles --- */
.hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-swiper {
    height: 285px;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

@media (max-width: 767.98px) {
    .hero-swiper {
        height: 185px;
    }
}

@media (max-width: 991.98px) {
    .hero-swiper {
        height: 200px;
    }
}

@media (min-width: 767px) and (max-width: 991px) {
    .hero-swiper {
        height: 285px;
    }
}

@media (min-width: 1023px) and (max-width: 1200px) {
    .hero-swiper {
        height: 285px;
    }
}

#hotelImageCarousel, .carousel-inner, .carousel-item {
    height: 100%;
}

    .carousel-item .row.g-2 {
        height: 100%;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }

.image-col {
    height: 100%;
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.25rem 0.25rem 0 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Carousel Controls */
.hotel-carousel-control {
    width: 40px;
    height: 40px;
    opacity: 1;
    z-index: 10;
    top: 50%;
    transform: translateY(-50%);
}

.carousel-control-next {
    right: 10px;
}

.carousel-control-prev {
    left: 10px;
}

.carousel-control-icon-custom {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
    line-height: 1;
    transition: background-color 0.2s;
}

/* View All Button */
.btn-view-all-fixed {
    background-color: rgba(0, 0, 0, 0.6) !important;
    color: white !important;
    z-index: 999 !important;
    border: none;
    font-weight: 500;
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
    position: absolute;
    bottom: 8px;
    right: 20px;
    border-radius: 0.25rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.hotel-title {
    font-size:1.25rem;
    color:var(--text-dark);
    font-weight:700;
    margin: 0 0 1.25rem;
}

/* --- Sticky Scroll Navigation --- */
.sticky-nav-menu {
    position: sticky;
    top: 0;
    z-index: 1020;
    background-color: white;
    border-bottom: 1px solid #dee2e6;
}

.nav-link.scroll-tab {
    color: #495057;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    padding: 0.75rem 1.25rem;
    transition: color 0.2s, border-bottom-color 0.2s, background-color 0.2s;
    /* 让 Tab 链接均匀分配宽度 */
    flex-grow: 1;
    text-align: center; /* 文本居中 */
}

/* 覆盖 nav-pills 的默认激活背景色，确保为白色 */
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background-color: transparent !important;
}

.nav-link.scroll-tab.active {
    color: var(--deep-blue);
    border-bottom-color: var(--deep-blue);
    font-weight: 600;
}

/* --- Modal Gallery Specific Styles --- */
.gallery-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 0.25rem;
}

/* --- Hotel Promotions Accordion Custom Styles --- */
/* HIDE the default Bootstrap Accordion indicator on the right side */
.accordion-button::after {
    display: none !important;
}

/* Custom CSS to handle Font Awesome rotation on Accordion collapse */
.accordion-button:not(.collapsed) .accordion-icon {
    transform: rotate(180deg);
    transition: transform 0.2s ease;
}

.accordion-button.collapsed .accordion-icon {
    transform: rotate(0deg);
    transition: transform 0.2s ease;
}

/* Custom style for Check-In Policies card background */
.check-in-bg {
    background-color: #f8f8f8;
}

/* FIX 2: Vertical alignment for titles in details section */
#details_section .col-md-9 .card .h5:first-of-type {
    margin-top: 0.5rem !important;
}

/* New classes for elements where inline styles were removed */
.link-view-all {
    font-size: 0.8rem;
}

.review-chat-icon {
    font-size: 1em;
}

.sub-heading {
    font-size: 0.9rem;
}

.info-icon {
    font-size: 0.9em;
}

.policy-key {
    font-size: 0.9rem;
}

.accordion-content-indent {
    padding-left: 20px;
}

/* --- Reviews Section Specific Styles (Matching hotel-reviews.jpg) --- */

/* Rating Summary Card Styling */
.review-summary-card {
    border-radius: 0.5rem;
    padding: 1.5rem;
}

/* Overall Score */
.overall-score-lg {
    font-size: 2.5rem; /* Large font size for 4.0 */
    font-weight: 700;
}

/* Star Rating Breakdown Bar Styles */
.rating-bar-container {
    padding-left: 20px; /* Indent the rating bars slightly */
}

.rating-bar-label {
    width: 60px; /* Fixed width for '5 Stars' label */
    font-size: 0.8rem;
}

.rating-bar-count {
    font-size: 0.8rem;
    min-width: 15px;
    text-align: right;
}

/* Recommendation Percentage */
.recommend-percent-lg {
    font-size: 2rem;
    font-weight: 700;
    color: #495057;
}

/* Tag/Pill Styles */
.review-tag {
    background-color: #f8f9fa; /* Light gray background */
    border: 1px solid #dee2e6;
    color: #495057;
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
    margin-right: 0.75rem;
    margin-bottom: 0.75rem;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
}

.tag-score-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
}

/* Review List Title */
.review-title-text {
    font-size: 0.95rem;
    font-weight: 600;
}

/* Tag/Pill Styles */
.review-tag {
    background-color: #f8f9fa; /* Light gray background */
    border: 1px solid #dee2e6;
    color: #495057;
    font-size: 0.8rem;
    /* Reduced vertical padding to match the design's height */
    padding: 0.35rem 0.8rem;
    margin-right: 0.75rem;
    margin-bottom: 0.75rem;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    /* Ensure icon and text are aligned */
    line-height: 1.2;
}

/* New Score Badge Style (The numbered circle) */
.review-score-badge {
    background-color: #28a745; /* Bootstrap Green (success) */
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    width: 20px; /* Fixed size for the circle */
    height: 20px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 0.5rem; /* Space between number circle and icon */
    flex-shrink: 0;
}

/* Icon style within the tag */
.review-tag-icon {
    font-size: 0.75rem;
    margin-right: 0.4rem; /* Space between icon and text */
    color: #6c757d; /* Muted gray for icon color (as per design) */
}

/* New style for Dark Blue Review Stars (Left Column) - Used for Most Recent/Proprietary Reviews */
.review-star-blue {
    color: var(--review-dark-blue);
    font-size: 0.9rem;
}

/* New style for Green Review Stars (Left Column) - Used for TripAdvisor Reviews */
.review-star-green {
    color: #28a745;
    font-size: 0.9rem;
}

/* Style for the Submitted By line (Left Column) */
.review-submitted-info {
    font-size: 0.75rem;
    color: #6c757d;
    line-height: 1.4;
    margin-top: 0.25rem;
}

/* Review Title (Right Column) */
.review-title-text {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* Review Content (Right Column) */
.review-content-text {
    font-size: 0.8rem;
    line-height: 1.5;
    color: #495057;
}

/* Ensure the review container uses row/col layout */
.individual-review-item {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #eee;
    margin-bottom: 1.5rem;
}

/* ------------------------------------------- */
/* --- AVAILABLE ROOMS SECTION STYLES
        /* ------------------------------------------- */
.room-card-image {
    position: relative;
    overflow: hidden;
}

/* Style for the room type heading within the card body (e.g., Garden View) */
.room-sub-heading {
    font-size: 0.85rem;
    font-weight: 700;
    color: #495057;
    margin-bottom: 0.25rem;
    line-height: 1.2;
}

/* Style for the detailed room description list */
.room-details-list {
    font-size: 0.8rem; /* Smaller font for details */
    color: #495057; /* Darker than muted */
    margin-bottom: 0.75rem;
    padding-left: 20px; /* For visual list indentation */
}

    .room-details-list li {
        line-height: 1.4;
    }

/* New Room Price Footer Styles (+ $X / per person) */
/*.room-price-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content:space-between;
}

.room-price-delta {
    font-size: 1.5rem; 
    font-weight: 700;
    color: var(--global-red);
    line-height: 1;
}

.room-price-label {
    font-size: 0.7rem;
    color: var(--deep-gray);
    font-weight: 500;
    line-height: 1.2;
    margin-top: 0.1rem;
    text-transform: uppercase;
    width:min-content;
}*/

.room-price-container {
    display: inline-flex; /* 改为行内flex */
    flex-direction: row; /* 水平排列 */
    align-items: center; /* 垂直居中 */
    margin-right: 15px; /* 与按钮间距 */
}

.room-price-delta {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--global-red);
    line-height: 1;
    margin-right: 4px; /* 添加右边距，替代原来的gap */
}

.room-price-label {
    font-size: 0.7rem;
    color: var(--deep-gray);
    font-weight: 500;
    line-height: 1.2;
    margin-top: 0; 
    width: min-content;
}

/* New: Room details link container style, used for centering */
.room-details-container {
    text-align: center;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

/* New: Room card carousel navigation arrow style (similar to the main hotel image navigation) */
.room-carousel-control-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.5); /* Black semi-transparent background */
    color: white;
    border-radius: 50%;
    width: 30px; /* Smaller size */
    height: 30px;
    font-size: 1rem;
    line-height: 1;
    transition: background-color 0.2s;
}

.room-carousel-control {
    width: 30px;
    height: 30px;
    opacity: 1;
    z-index: 10;
    top: 50%;
    transform: translateY(-50%);
}

.room-carousel-control-next {
    right: 5px;
}

.room-carousel-control-prev {
    left: 5px;
}

.room-carousel-container {
    border-radius: 0.25rem 0.25rem 0 0;
    width: 100%;
    height: 185px;
    position: relative;
    overflow: hidden;
}

.room-swiper {
    height: 100%;
}

.room-modal-carousel-container {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.room-modal-carousel-container .swiper{
    height: 100%;
}

@media (max-width: 767.98px) {
    .room-modal-carousel-container {
        height: 185px;
    }
}

.room-details-text-container {
    margin-top: 1rem;
    margin-bottom: 0.75rem;
    height: 120px;
    overflow: hidden;
    mask-image: linear-gradient(white 85%,transparent);
    font-size: 0.75rem;
    color: #495057;
    line-height: 1.6;
}

.room-detail-line {
    font-size: 0.75rem; /* Smaller font for details */
    color: #495057; /* Darker than muted */
    line-height: 1.6;
    margin-bottom: 0; /* Remove default paragraph margin to keep lines tight */
}

/* Style for promotion collapse arrow rotation in the modal */
.promo-toggle-icon {
    transition: transform 0.3s ease;
    font-size: 0.8rem;
}

/* When the collapse link is active (aria-expanded="true"), rotate the icon */
a[aria-expanded="true"] .promo-toggle-icon {
    transform: rotate(180deg);
}
/* Ensure the promo title text looks correct */
.promotion-items-container a .fw-bold.small {
    font-size: 0.95rem; /* Slightly larger than standard small */
}

.content-sections section {
    scroll-margin-top: 1.25rem; /* Adjust this value if the section headers are still obscured */
}

.individual-review-item img {
    margin-left: -15px;
}

/* --- Mobile View Optimizations (Screens less than 768px wide) --- */
@media (max-width: 767.98px) {

    /* 修复 2: TAB 选择器 (Tabs) */
    /* 缩小 Tab 导航文字和间距，防止错位 */
    .nav-link.scroll-tab {
        font-size: 0.925rem; /* 缩小文字 */
        padding: 0.3rem 0.5rem; /* 减小内边距 */
        white-space: nowrap; /* 确保文字不换行 */
    }

    .section-padding {
        padding-top: 30px;
        padding-bottom: 20px;
    }

    /* 修复 3: 图标文本错位 (Icon-Text) */
    /* 统一缩小房间卡片、详情、评论等区域的 'small' 字体，防止文本溢出或换行错位 */
    #rooms_section .card .small,
    .content-sections .small,
    .review-author-info {
        font-size: 0.875rem !important;
    }

    /* 进一步缩小 Reviews 模块中的评分条文字 */
    .rating-bar-label {
        font-size: 0.7rem;
        width: 40px; /* 进一步缩小标签宽度 */
    }

    /* 优化价格块的字体，避免截断 */
    .price-from-block, .price-per-person-block {
        font-size: 0.8rem !important;
    }

    .review-submitted-info {
        margin-bottom: 0.5rem;
    }
}

#hotelPromotionsAccordion .accordion-button
{
    font-size: 0.875rem;
}

.rooms .card-selected .selected-header {
    margin-bottom:-31px;
    z-index:99;
}

.card-selected {
    border: 2px solid var(--selected-green); 
}

.rooms .card-body .card {
    box-shadow:none !important;
}

@media (max-width: 991.98px) {
    .rooms .card-header .fs-lg {
        font-size: 0.825rem;
    }

    .rooms .card-header .fs-md {
        font-size: 0.75rem;
    }

    .rooms .card-header .room-price-delta {
        font-size: 1.2rem;
    }

    .rooms .card-header .room-price-label {
        font-size: 0.6rem;
    }

    .rooms .card-header .btn-outline-primary {
        font-size: 0.7rem;
    }
}

    /* Hotel Styles END */

    /* Hotels START*/

.dropdown-menu {
    min-width: max-content !important;
    max-width: none !important;
}

.filter-checkbox-container {
    padding: 0 1rem;
    /* Ensures no internal horizontal scrollbar */
    overflow-x: visible;
}

    /* Prevents option name and count from wrapping */
    .filter-checkbox-container .form-check-label span {
        white-space: nowrap;
        overflow: hidden;
    }

    /* Ensures cursor pointer on all clickable elements */
    .filter-checkbox-container .form-check-label, .form-check-input[type="checkbox"] {
        cursor: pointer;
        font-size: 0.875rem;
        vertical-align:top;
    }

/* Consistent header/footer look in Name filter */
.dropdown-header-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
}

/* Name Filter Custom Styles */
/* Main Container for Name Search: Border, rounded corners, Flex container */
.name-search-container {
    position: relative;
    border: 2px solid #0056b3; /* Dark blue border */
    border-radius: 8px; /* Rounded corners */
    padding: 1px; /* Remove inner padding */
    background-color: white;
    /* Core: Use display: flex for Input Group layout */
    display: flex;
    align-items: stretch; /* Ensure input field and button have equal height */
}

/* Floating Label for Hotel Name */
.name-search-label {
    position: absolute;
    top: -10px;
    left: 10px;
    font-size: 0.75rem;
    color: #0056b3;
    background-color: white;
    padding: 0 5px;
    font-weight: bold;
    z-index: 20;
}

/* Magnifying Glass Icon inside the input */
.search-icon {
    position: absolute;
    left: 12px; /* Adjust position */
    color: var(--light-gray); /* Light gray color */
    pointer-events: none;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    font-size:12px;
}

/* Search Input Field styling */
.name-search-input {
    padding-left: 32px !important; /*Increase left spacing for Icon */
}

/* Unified Dropdown Header/Footer Styles */
.dropdown-header-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
}


/* Dropdown Width Correction (Responsive) */
.price-filter-dropdown {
    /* Width settings for responsiveness */
    min-width: 360px !important;
}

/* Range Slider Container */
.range-slider-wrap {
    position: relative;
}

/* noUiSlider Styles */
/* Hide noUiSlider Tooltip text */
.noUi-tooltip {
    display: none !important;
}

/* Handle Style Adjustment */
.noUi-handle {
    background: var(--primary-blue) !important; /* Blue background */
    border-radius: 50% !important;
    width: 15px !important;
    height: 15px !important;
    border: none !important;
    box-shadow: none !important;
    /* Maintain vertical centering */
    top: -5px;
    right: -10px !important;
    cursor: pointer;
}

/* Selected Range Color Adjustment */
.noUi-connect {
    background: var(--primary-blue) !important; /* Blue fill */
}

/* Overall Track Background Color */
.noUi-target {
    background: #e9ecef !important; /* Gray track */
    height: 5px !important;
    border-radius: 5px !important;
    border: none !important;
    box-shadow: none !important;
}

.noUi-active .noUi-handle {
    box-shadow: none !important;
}

/* Remove focus state styling */
.noUi-handle:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Remove default Handle background/border on drag */
.noUi-handle:before, .noUi-handle:after {
    display: none !important;
}

/* Layout CSS */
.price-input-group {
    display: flex;
    align-items: stretch;
    gap: 0;
}

/* Layout and Floating Label Corrections */
/* 1. Ensure Input Box occupies space */
.price-input-box {
    /* Ensure input field can flex with the layout */
    flex-grow: 1;
    /* Ensure consistent input field size */
    height: 38px;
}

/* 2. Correct Apply Button Height and Alignment */
.price-apply-btn {
    /* Force match input height */
    height: 38px !important;
    /* Ensure text is vertically centered */
    line-height: 1.5;
    padding: 0.375rem 0.75rem;
    margin-left: 5px; /* Add spacing from Max Input */
}

/* Separator Styles */
.input-separator {
    display: flex; /* Ensure separator is vertically centered */
    align-items: center;
    padding: 0 5px; /* Adjust space around the separator */
}

/* Override Bootstrap Floating Label Styles */
.form-floating > label {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    color: #6c757d; /* Gray text */
}

/* Custom Styles for Float Label and Currency Symbol */
/* Parent container for absolute positioning */
.custom-float-input {
    position: relative;
    /* Ensure sufficient container width */
    flex-grow: 1;
    height: 45px;
    box-sizing: border-box;
    /* Ensure input element inside the container is not stretched */
    display: flex;
}

/* Currency Prefix ($ symbol) styling */
.currency-prefix {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    color: #495057;
    font-size: 0.9rem;
}

/* Floating Label text styling */
.price-label {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    font-size: 1rem;
    transition: all 0.1s ease-out;
    pointer-events: none;
    z-index: 1;
    background-color: transparent;
}

/* Floating effect on focus/content */
.price-input:focus + .price-label,
.price-input + .price-label {
    top: 0px; /* Move upward */
    font-size: 0.65rem; /* Reduce font size */
    background-color: #fff;
    left: 6px;
}

/* Adjust input padding for Label and Currency Symbol */
.price-input {
    width: 100%;
    height: 100% !important;
    line-height: 1.5;
    padding-left: 17px;
    font-size: 0.875rem;
}

    .price-input:focus {
        border-color: var(--primary-blue);
        box-shadow: none;
    }

/* Apply Button Height Correction */
.price-apply-btn {
    height: 45px !important; /* Force match input height */
    text-transform:uppercase;
}

.rooms .row:has(> .card:first-child) {
    margin: 0 !important;
}

.rooms .card-header:not(:has(+ .card-body)) {
    border-bottom: none;
}

/* --- Hotel Card --- */
@media (min-width: 992px) {
    .col-lg-40 {
        flex: 0 0 auto;
        width: 40%;
    }

    .col-lg-20 {
        flex: 0 0 auto;
        width: 20%;
    }
}

.hotel-card {
    border: 1px solid var(--border-gray);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    transition: box-shadow 0.3s ease;
    cursor: pointer;
}

    .hotel-card:hover {
        box-shadow: 0 3px 12px rgba(0,0,0,0.1);
    }

.hotel-card-link {
    text-decoration: none !important;
    color: inherit;
    display: block;
}

/* 1. Image Section (Left) */
.hotel-img-col {
    position: relative;
    height: 260px;
    overflow: hidden;
}

.hotel-carousel-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.hotel-swiper {
    width: 100%;
    height: 100%;
}

/* Critical: Ensure image fills the container without whitespace */
.hotel-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tag-hotel {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: var(--global-red);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 20px;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Swiper Buttons (Cloned from your .extras-carousel-btn) */
.hotel-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px; /* Slightly smaller than extras (40px) to fit hotel card */
    height: 32px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background-color 0.2s ease;
    cursor: pointer;
    font-size: 0.8rem;
}

    .hotel-carousel-btn:hover {
        background-color: rgba(0, 0, 0, 0.7);
    }

.hotel-carousel-btn-prev {
    left: 10px;
}

.hotel-carousel-btn-next {
    right: 10px;
}

/* 2. Content Section */
.hotel-info-col {
    padding: 1rem;
}

.hotel-name {
    font-size: 1.125rem;
    color:#000;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 1rem;
}

.perks-list {
    list-style: none;
    padding-left: 0;
    margin-top: 0.5rem;
    margin-bottom: 0;
}

    .perks-list li {
        font-size: 0.875rem;
        line-height: 1.4;
        margin-bottom: 3px;
        display: flex;
        align-items: flex-start;
    }

        .perks-list li::before {
            content: "";
            margin-right: 22px;
        }

/* 3. Price Section */
.hotel-price-col {
    background-color: var(--bg-light-gray);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .hotel-price-col .final-price {
        font-size: 1.875rem;
        line-height: 2.25rem;
        color: var(--global-red);
        font-weight: 600;
    }

    .hotel-price-col .text-decoration-line-through {
        font-size: 1rem;
    }

.monthly-info {
    border-top:1px solid #ccc;
}

#hotel-results .hotel-card.card-selected {
    border: 2px solid var(--selected-green);
}

#hotel-results .selected-header {
    border-radius:0;
}
/* Mobile Responsive */
@media (max-width: 991.98px) {
    .hotel-img-col {
        height: 160px;
    }

    .hotel-info-col {
        padding: 0.7rem;
    }

    .hotel-name {
        font-size: 0.875rem;
    }

    .hotel-reviews {
        font-size: 0.75rem;
    }

    .tag-hotel {
        font-size: 0.7rem;
    }

    .hotel-price-col {
        background:none;
    }

        .hotel-price-col .final-price {
            font-size: 1.5rem;
            line-height: 2rem;
        }


        .hotel-price-col .text-decoration-line-through {
            font-size: .65rem;
        }

        .hotel-price-col .included-text {
            font-size: .65rem;
        }

        .hotel-price-col .per-person-text {
            text-align: right;
            font-size: .65rem;
            font-weight: 700;
            width: 100%;
        }

    .hotel-price-col {
        padding: 0 0.7rem 0.7rem 0.7rem;
    }

    .monthly-info {
        border-top: none;
        font-size: .65rem;
        margin:0.25rem 0 0;
    }
}

@media (min-width: 767px) and (max-width: 991px) {

    .hotels {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2列等宽 */
        gap: 16px; /* 卡片间距 */
    }

    .hotel-img-col {
        height: 200px;
    }
}

@media (min-width: 1023px) and (max-width: 1200px) {
    .hotel-img-col {
        height: 280px;
    }
}

/* Modal Show Button */
.modal-show-btn {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    flex-grow: 1;
    max-width: 50%;
    text-transform: uppercase;
}

@media (max-width: 991.98px) {
    .modal-show-btn {
        max-width: 60%;
    }
}

/* APPLY Button styling */
.btn-group-apply {
    /* Unified style */
    background-color: #fff;
    color: #6c757d;
    font-weight: 500;
    /* Remove all borders except the left one */
    border-top: none !important;
    border-bottom: none !important;
    border-right: none !important;
    border-left: 1px solid #dee2e6 !important; /* Gray vertical line separator on the left */
    /* Match container's right corner radius */
    border-radius: 0 3px 3px 0 !important;
    height: auto; /* Ensure equal height */
    flex-shrink: 0;
    font-size: 0.75rem;
    text-transform: uppercase;
}

    /* Apply button hover state */
    .btn-group-apply:hover {
        background-color: #f8f9fa !important;
        color: #6c757d !important;
    }

    /* Hotels END*/

.item-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

@media (max-width: 767.98px) {

    .item-list {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media (min-width: 767px) and (max-width: 991px) {
    .item-list {
        grid-template-columns: repeat(2, 1fr);
   }
}

@media (min-width: 991px) and (max-width: 1024px) {
    .item-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

.item-list .cars-card {
    margin:0;
}

.btn-continue {
    padding: 0.375rem 1.5rem;
}

@media (max-width: 767.98px) {
    .continue-wrapper {
        width: 100%;
        padding: 0.25rem;
        background-color: rgba(238, 238, 238, 0.5);
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1030;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.cars-swiper .swiper-slide {
    height:auto;
}

.extras-swiper .swiper-slide {
    height: auto;
}

.mobile-priceinfo .package-price-total {
    font-size: 0.75rem;
}

.mobile-priceinfo .package-price-total {
    font-size: 0.75rem;
}

.mobile-priceinfo .included-icons-block .included-icon {
    font-size: 0.75em;
}

.cars-card-interactive {
    cursor:pointer;
}

.extras-card-interactive {
    cursor: pointer;
}

/* ---Begin-- common item modal */

.item-modal .modal-dialog {
    max-width: 900px;
}

/* Header & Title */
.item-modal .modal-header {
    border-bottom: 1px solid var(--border-gray);
    padding: 1rem 1.5rem;
}

.item-modal .modal-title {
    font-weight: 700;
    color: #333;
    font-size: 1.25rem;
}

.item-modal .modal-body {
    font-size: 0.875rem;
    padding: 1.25rem;
    line-height: 1.5rem;
    color: var(--text-dark);
}

.item-modal .modal-footer {
    background-color: #f8f9fa;
    border-top: 1px solid var(--border-gray);
    justify-content: space-between;
}

.item-modal .price-per-day {
    font-size: 0.875rem;
    color: var(--secondary-gray);
}

.item-modal .total-price-label {
    font-size: 1rem;
    font-weight: 700;
    color: var(--secondary-gray);
    margin-right: 5px;
}

.item-modal .total-price-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--global-red);
}

@media (max-width: 767.98px) {
    .item-modal .modal-title {
        font-size: 1rem;
        margin: 0 0 0 5px;
    }

    .item-modal .price-per-day {
        font-size: 0.75rem;
    }

    .item-modal .total-price-label {
        font-size: 0.825rem;
    }

    .item-modal .total-price-value {
        font-size: 1rem;
    }
}

.item-modal .nav-tabs {
    border-bottom: 1px solid #dee2e6;
}

.item-modal .nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    color: #666;
    font-weight: 600;
    padding: 10px 20px;
}

@media (max-width: 767.98px) {
    .item-modal .nav-tabs .nav-link {
        font-size: 0.825rem;
        padding: 10px 0px;
    }
}

.item-modal .nav-tabs .nav-link:hover {
    color: var(--primary-blue);
    border-color: transparent;
}

.item-modal .nav-tabs .nav-link.active {
    color: var(--primary-blue);
    border-bottom: 2px solid var(--primary-blue);
    background: transparent;
}

.item-modal .form-floating {
    margin-top: 0.5rem;
}

.item-modal .form-floating > .form-select {
    border-color: var(--light-gray);
    font-size: 0.875rem;
    color: var(--deep-gray);
    border-radius: 3px !important;
    padding: 0.625rem 3rem 0.625rem 0.75rem; 
    height: calc(3rem + calc(var(--bs-border-width) * 2));
    min-height: calc(3rem + calc(var(--bs-border-width) * 2));
    line-height: 1.25;
    width:auto;
}

.item-modal .form-floating > .form-select:focus {
    box-shadow: none !important;
    border-color: var(--primary-blue) !important;
}

.item-modal .form-floating > label {
    font-size: 0.75rem;
    top: -9px;
    left: 0;
}
/* Custom Select Dropdown Styling */

.custom-select-container {
    display: inline-block;
    width:auto;
}
/* 1. 确保生成的下拉菜单有最大高度并可滚动 */
.custom-select-menu {
    max-height: 250px;
    overflow-y: auto;
    width: 100%;
}

/* 2. 选项样式：Flex布局，两端对齐 */
.custom-select-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-size:0.875rem;
}

.custom-select-item:hover {
    background-color: #f8f9fa;
    color: var(--primary-blue, #113b63);
}

/* 3. 选中状态样式 */
.custom-select-item.selected {
    font-weight: 700;
    color: var(--primary-blue, #113b63);
    background-color: #f0f8ff;
}

/* 4. 右侧对勾图标 (使用 FontAwesome) */
.custom-select-item.selected::after {
    content: '\f00c'; /* FontAwesome Check Icon */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-left: 10px;
}

/* ---End-- common item modal */

.car-modal .car-img {
    max-height: 200px;
}

.car-modal .company-logo-img {
    max-height: 50px;
    object-fit: contain;
    display: block;
}

.item-list .selected-header {
    display: none;
}

.item-list .card-selected .selected-header {
    display: flex;
}

.card-selected .extras-card-img {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.my-extras {
   border-width: 2px;
}

.my-extras .card-header {
    display: flex;
    justify-content: space-between;
    align-content: center;
    cursor: pointer;
    transition: transform 0.3s ease;
}

    .my-extras .card-header.collapsed {
        background: var(--bg-light-gray);
        border-bottom: 0;
        border-bottom-left-radius: 0.375rem;
        border-bottom-right-radius: 0.375rem;
    }

    .my-extras .card-header i {
        transition: transform 0.3s ease;
        color: var(--secondary-gray);
        margin: 0 0 0 5px;
    }

    .my-extras .card-header.collapsed i {
        transform: rotate(180deg);
    }

.my-extras .extra-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    max-height: 275px;
    overflow-y:scroll;
}

    .my-extras .extra-items .item {
        border: solid 1px var(--border-gray);
        border-radius: 4px;
        display: flex;
        height: 100%;
        justify-content: flex-start;
        cursor: pointer;
    }

    .my-extras .extra-items .item .img {
        width: 128px;
        height: 110px;
        object-fit: cover;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        flex-shrink: 0;
    }

    .my-extras .extra-items .item .description {
        font-size: 0.875rem;
        width: 100%;
        padding: 10px 15px;
    }

@media (max-width: 767.98px) {

    .my-extras {
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1030;
    }

    .my-extras .section-title {
        font-size: 1rem;
    }

    .my-extras .extra-items {
        grid-template-columns: repeat(1, 1fr);
        gap: 1rem;
        max-height: 250px;
    }

    .my-extras .extra-items .item .img {
        width: 110px;
        height: 100px;
    }

        .my-extras .extra-items .item .description {
            font-size: 0.75rem;
        }


    .extra-modal .fs-md {
        font-size: 0.75rem;
    }
}

.item-modal .field-item {
    margin: 1rem 0 0;
}

.item-modal .field-item:first-child {
    margin-top: 0;
}

.item-modal .field-item:last-child {
    margin-bottom: 1rem;
}

    .item-modal .field-item li {
        margin: 0 0 0 1rem;
    }