@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    color: #000;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    overflow-x: hidden;
}

b, strong {
    font-weight: 800;
}

.navigation-bar {
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 80px 5px 80px;
    width: 100%;
    box-sizing: border-box;
    min-height: 70px;
}

.nav-logo {
    height: 60px;
    width: 240px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.nav-logo img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    transform: translateY(-5%);
}

.nav-signin-btn {
    background-color: #0a7e8b;
    border: none;
    border-radius: 40px;
    padding: 16px 20px;
    color: white;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    cursor: pointer;
    width: 150px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-signin-btn:hover {
    background-color: #096b76;
}

.nav-signin-btn.profile-icon {
    font-size: 24px;
    padding: 12px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-signin-btn.profile-icon svg {
    color: white;
}

.header-section {
    position: relative;
    width: 100vw;
    height: 580px;
    overflow: visible;
    margin: 0;
    padding: 0 0 20px 0;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

.header-image {
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 458px;
}

.header-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(1.3);
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
}

.header-content {
    position: absolute;
    top: 129px;
    left: 50%;
    transform: translateX(-50%);
    width: min(792px, calc(100vw - 80px));
    text-align: center;
    color: white;
    z-index: 2;
}

.header-section .header-content h1 {
    color: #FFF;
    text-align: center;
    text-shadow: 0 0 30px rgba(0, 0, 0, 0.45);
    font-family: Inter;
    font-size: 72px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0 0 19px 0;
}

.header-section .header-content p {
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    margin: 0 !important;
    color: white !important;
}

.search-container {
    position: absolute;
    top: 354px;
    left: 50%;
    transform: translateX(-50%);
    width: min(1330px, calc(100vw - 80px));
    height: 211px;
    background: #f9f8f5;
    border-radius: 20px;
    box-shadow: 2px 2px 9px rgba(0, 0, 0, 0.25);
    padding: 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.search-input {
    background: white;
    border-radius: 15px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 1px 2px 8px 0px inset rgba(0, 0, 0, 0.14);
}

.input-group {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    flex: 1;
}

.pin-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pin-icon img {
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    object-fit: contain;
    padding: 2px;
}

.input-group input {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 20px;
    color: black;
    border: none;
    outline: none;
    background: transparent;
    flex: 1;
}

.input-group input::placeholder {
    color: #666;
}

.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: none;
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
}

.autocomplete-item {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: #333;
}

.autocomplete-item:hover {
    background-color: #f8f9fa;
}

.autocomplete-item:last-child {
    border-bottom: none;
}

.arrow-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: black;
    cursor: pointer;
    background: transparent;
    border: none;
    outline: none;
}

.category-buttons {
    display: flex;
    gap: 32px;
    width: 100%;
}

.category-btn {
    flex: 1;
    background: #cfe4e8;
    border: none;
    border-radius: 40px;
    padding: 16px 32px;
    color: #131517;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.category-btn:hover {
    background: #0a7e8b;
    color: white;
}

.category-btn.selected {
    background: rgb(10, 126, 139);
    color: white;
}

.category-btn.selected:hover {
    background: rgb(207, 228, 232);
    color: #131517;
}

@media (max-width: 1200px) {
    .header-content {
        width: 90%;
        max-width: 792px;
    }
    
    .header-content h1 {
        font-size: 56px;
    }
    
    .search-container {
        width: calc(100vw - 80px);
    }
    
    .category-buttons {
        flex-wrap: wrap;
        gap: 16px;
    }
    
    .category-btn {
        flex: 1;
        min-width: 120px;
    }
}

.alert-banner {
    background-color: #0a3954;
    border: 4px solid #0a7e8b;
    border-radius: 70px;
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(1596px, calc(100vw - 40px));
    margin: 40px auto;
}

.alert-banner-text {
    color: #FFF;
    text-align: center;
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin: 0;
    width: 1596px;
    max-width: 100%;
}

@media (max-width: 768px) {
    .alert-banner {
        border-radius: 40px;
        padding: 15px 20px;
        width: calc(100vw - 40px);
        margin: 20px auto;
    }
    
    .alert-banner-text {
        font-size: 16px;
    }
}

.recent-searches-section {
    width: min(1596px, calc(100vw - 40px));
    margin: 40px auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: flex-start;
}

.recent-searches-title {
    font-family: Inter;
    font-size: 40px;
    font-weight: 600;
    color: #000;
    margin: 0;
    text-align: left;
}

.recent-searches-container {
    display: flex;
    gap: 16px;
    width: 100%;
    justify-content: flex-start;
}

.recent-search-card {
    background-color: #cfe4e8;
    border-radius: 20px;
    padding: 20px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    width: 388px;
    flex-shrink: 0;
    box-sizing: border-box;
}

.recent-search-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: #131517;
}

.recent-search-content h3 {
    font-family: Inter;
    font-size: 32px;
    font-weight: 500;
    margin: 0;
    width: 300px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recent-search-details {
    font-family: Inter;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    text-align: left;
}

.recent-search-details p {
    margin: 0;
}

.recent-search-button {
    background-color: #0a7e8b;
    border: none;
    border-radius: 15px;
    padding: 16px 20px;
    color: white;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    margin-left: -10px;
    background-image: url('../images/arrow-right.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
}

.recent-search-button:hover {
    background-color: #096b76;
}

@media (max-width: 1200px) {
    .recent-searches-container {
        overflow-x: auto;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 768px) {
    .recent-searches-section {
        width: calc(100vw - 40px);
        margin: 20px auto;
        gap: 20px;
    }
    
    .recent-searches-title {
        font-size: 32px;
    }
    
    .recent-search-card {
        width: 300px;
    }
    
    .recent-search-content h3 {
        font-size: 28px;
        width: auto;
    }
}

.bundles-section {
    width: min(1596px, calc(100vw - 40px));
    margin: 40px auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
}

.bundles-title {
    color: #000;
    font-family: Inter;
    font-size: 39px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin: 0;
    text-align: left;
}

.bundles-subtitle {
    color: #000;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0;
    text-align: left;
}

.bundles-container {
    display: flex;
    gap: 16px;
    justify-content: flex-start;
}

.bundle-container {
    background-color: #f9f8f5;
    border-radius: 20px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 523px;
    height: 265px;
    box-shadow: 2px 2px 9px rgba(0, 0, 0, 0.25);
    color: black;
    box-sizing: border-box;
    flex-shrink: 0;
}

.bundle-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 16px;
}

.bundle-image {
    width: 220px;
    height: 120px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}

.bundle-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bundle-pricing {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 18px;
    font-style: italic;
    text-align: left;
}

.bundle-pricing p {
    margin: 0;
}

.bundle-footer {
    display: flex;
    align-items: end;
    justify-content: space-between;
    width: 100%;
    gap: 16px;
}

.bundle-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.bundle-info h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 24px;
    margin: 0;
    text-align: left;
}

.bundle-info p {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 12px;
    margin: 0;
    text-align: left;
}

.bundle-button {
    background-color: #0a7e8b;
    border-radius: 15px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    box-sizing: border-box;
}

.bundle-button {
    background-image: url('../images/arrow-right.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
}

.bundle-button:hover {
    background-color: #096b76;
}

@media (max-width: 1200px) {
    .bundles-section {
        overflow-x: auto;
        padding-bottom: 10px;
    }
}

@media (max-width: 768px) {
    .bundles-section {
        width: calc(100vw - 40px);
        margin: 20px auto;
        gap: 12px;
    }
    
    .bundle-container {
        width: 300px;
        height: auto;
        min-height: 265px;
    }
    
    .bundle-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .bundle-image {
        width: 100%;
        height: 180px;
    }
    
    .bundle-pricing {
        width: 100%;
    }
    
    .bundle-info h3 {
        font-size: 21px;
    }
}

.explore-section {
    position: relative;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 20px;
    padding: 48px 40px;
    display: flex !important;
    align-items: end !important;
    gap: 80px;
    width: min(1596px, calc(100vw - 40px));
    height: 675px !important;
    overflow: hidden;
    margin: 40px auto;
    justify-content: center;
}

.explore-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 20px;
}

.explore-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 593px;
    max-width: 100%;
    flex-shrink: 0;
    margin-left: 64px;
    padding: 0 20px;
}

.explore-text {
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: white;
    text-shadow: 0px 0px 30px rgba(0, 0, 0, 0.9);
    text-align: left;
}

.explore-text h1 {
    font-family: 'Inter', sans-serif;
    font-weight: bold;
    font-size: 96px;
    margin: 0;
    line-height: 1;
    color: white !important;
}

.explore-text p {
    font-family: 'Inter', sans-serif;
    font-weight: bold;
    font-size: 16px;
    margin: 0;
}

.explore-button {
    background-color: #0a7e8b;
    border-radius: 40px;
    padding: 16px 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 224px;
}

.explore-button span {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: white;
}

.carousel-container {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 20px;
}

.carousel-arrow {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background 0.3s;
}

.carousel-arrow:hover {
    background: white;
}

.explore-cards {
    position: relative;
    overflow: hidden;
    width: 760px;
    height: 672px;
}

.carousel-track {
    display: flex !important;
    gap: 40px;
    transition: transform 0.5s ease;
    width: calc(360px * 3 + 80px);
    height: 100%;
}

.explore-card {
    background-color: #f9f8f5 !important;
    border-radius: 20px;
    width: 360px !important;
    height: 672px !important;
    position: relative;
    overflow: hidden;
    flex-shrink: 0 !important;
}

.explore-card-image {
    position: absolute !important;
    top: 32px !important;
    left: 32px !important;
    width: calc(100% - 64px) !important;
    max-width: 296px !important;
    height: 447px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}

.explore-card-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

.explore-card-content {
    position: absolute;
    bottom: 32px;
    left: 32px;
    width: calc(100% - 64px);
    max-width: 296px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: black;
    text-align: left;
}

.explore-card-content h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 32px;
    margin: 0;
}

.explore-card-content p {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    margin: 0;
}

.explore-card-gradient {
    position: absolute !important;
    bottom: -10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 428px !important;
    height: 345px !important;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 100%) !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

.weekly-offers-section {
    width: min(1596px, calc(100vw - 40px));
    margin: 40px auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
}

.weekly-offers-title {
    color: #000;
    font-family: Inter;
    font-size: 39px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin: 0;
    text-align: left;
}

.weekly-offers-subtitle {
    color: #000;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0;
    text-align: left;
}

.weekly-offers-container {
    display: flex;
    gap: 16px;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    padding-bottom: 15px;
}

.weekly-offer-card {
    background-color: #f9f8f5;
    border-radius: 20px;
    width: 523px;
    height: 609px;
    position: relative;
    overflow: hidden;
    box-shadow: 2px 2px 9px rgba(0, 0, 0, 0.25);
    flex-shrink: 0;
}

.weekly-offer-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 360px;
}

.weekly-offer-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.weekly-offer-content {
    position: absolute;
    top: 384px;
    left: 24px;
    right: 136px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: black;
    text-align: left;
}

.weekly-offer-content h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 32px;
    margin: 0;
}

.weekly-offer-content p {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    margin: 0;
}

.weekly-offer-button {
    position: absolute;
    top: 512px;
    left: 24px;
    background-color: #0a7e8b;
    border-radius: 15px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 64px;
    height: 64px;
    box-sizing: border-box;
}

.weekly-offer-button {
    background-image: url('../images/arrow-right.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
}

.weekly-offer-button:hover {
    background-color: #096b76;
}

.weekly-offer-discount {
    position: absolute;
    top: 415px;
    right: 43px;
    width: 83px;
    height: 83px;
    background: white;
    border: 2px solid #0a7e8b;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px rgba(10, 126, 139, 0.3);
}

.weekly-offer-discount .percentage {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 34px;
    color: #0a3954;
    line-height: 0.8;
    text-align: center;
    margin: 0;
    transform: translateY(5px);
}

.weekly-offer-discount .off-text {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 13px;
    color: #0a3954;
    text-align: center;
    margin: 0;
    margin-top: 3px;
    transform: translateY(5px);
}

.weekly-offer-discount .percent-symbol {
    font-size: 16px;
}

@media (max-width: 768px) {
    .weekly-offers-section {
        width: calc(100vw - 40px);
        margin: 35px auto 20px auto;
        gap: 12px;
    }
    
    .weekly-offer-card {
        width: 300px;
        min-width: 300px;
    }
    
    .weekly-offer-content {
        right: 105px;
    }
    
    .weekly-offer-content h3 {
        font-size: 28px;
    }
    
    .weekly-offer-discount {
        width: 70px;
        height: 70px;
        right: 25px;
    }
    
    .weekly-offer-discount .percentage {
        font-size: 24px;
    }
    
    .weekly-offer-discount .off-text {
        font-size: 11px;
    }
}

.travel-tips-section {
    width: min(1596px, calc(100vw - 40px));
    margin: 40px auto;
}

.tips-card {
    position: relative;
    width: 100%;
    height: 400px;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    margin: 0 auto;
}

.background-image {
    width: 66.67%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px 0 0 20px;
}

.content-panel {
    background-color: #f9f8f5;
    width: 33.33%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    border-radius: 0 20px 20px 0;
}

.text-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.text-content h2 {
    color: #000;
    font-family: Inter;
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-align: left;
    margin: 0;
}

.text-content p {
    color: #000;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: left;
    margin: 0;
}

.action-button {
    background-color: #0a7e8b;
    color: white;
    border: none;
    border-radius: 40px;
    padding: 12px 24px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    width: 100%;
    text-align: center;
}

.action-button:hover {
    background-color: #096b76;
}

@media (max-width: 1024px) {
    .tips-card {
        max-width: 100%;
        height: 300px;
    }
    
    .text-content h2 {
        font-size: 24px;
    }
    
    .content-panel {
        padding: 16px;
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .travel-tips-section {
        width: calc(100vw - 40px);
        margin: 20px auto;
    }
    
    .tips-card {
        height: auto;
        flex-direction: column;
        max-width: 100%;
    }
    
    .background-image {
        width: 100%;
        height: 200px;
        border-radius: 20px 20px 0 0;
    }
    
    .content-panel {
        width: 100%;
        padding: 20px;
        border-radius: 0 0 20px 20px;
    }
    
    .text-content h2 {
        font-size: 20px;
    }
    
    .action-button {
        padding: 10px 20px;
        font-size: 12px;
    }
}

.footer {
    background-color: #0a3954;
    padding: 60px 0;
    margin-top: 40px;
}

.footer-content {
    width: min(1596px, calc(100vw - 40px));
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 80px;
}

.footer-left {
    display: flex;
    flex-direction: column;
    gap: 50px;
    width: 256px;
}

.footer-logo {
    height: 46px;
    display: flex;
    align-items: center;
}

.logo-text {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 28px;
    color: white;
}

.logo-eaze {
    color: rgb(192, 215, 234);
}

.footer-disclaimer {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 21px;
    line-height: 29px;
    color: #f9f8f5;
    margin: 0;
    text-align: left;
}

.footer-social {
    display: flex;
    gap: 20px;
    align-items: center;
}

.social-icon {
    width: 56px;
    height: 56px;
    background-color: rgba(249, 248, 245, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background-color 0.3s;
}

.social-icon img {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1);
}

.social-icon:hover {
    background-color: rgba(249, 248, 245, 0.2);
}

.footer-links {
    display: flex;
    gap: 68px;
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 162px;
}

.footer-column h3 {
    color: #F9F8F5;
    font-family: Inter;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 35.2px;
    margin: 0 0 10px 0;
    text-align: left;
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.footer-column li {
    margin: 0;
    padding: 6px 0;
}

.footer-column a {
    color: #F9F8F5;
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    text-decoration: none;
    transition: opacity 0.3s;
    display: block;
    text-align: left;
}

.footer-column a:hover {
    opacity: 0.8;
}

@media (max-width: 1200px) {
    .footer-content {
        flex-direction: column;
        gap: 40px;
        align-items: center;
        text-align: center;
    }
    
    .footer-left {
        align-items: center;
        width: auto;
    }
    
    .footer-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .footer {
        padding: 40px 0;
    }
    
    .footer-content {
        width: calc(100vw - 40px);
        gap: 30px;
    }
    
    .footer-left {
        gap: 30px;
    }
    
    .footer-disclaimer {
        font-size: 18px;
        line-height: 24px;
    }
    
    .footer-links {
        gap: 30px;
    }
    
    .footer-column {
        width: auto;
        min-width: 140px;
    }
}

/* Sign In Modal Styles */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.modal-content {
    position: absolute;
    top: 80px;
    right: 80px;
    width: 335px;
    background-color: #f9f8f5;
    border-radius: 20px;
    box-shadow: 2px 2px 24px rgba(0, 0, 0, 0.25);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.modal-header {
    display: flex;
    align-items: center;
    gap: 16px;
}

.profile-image {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
}

.profile-image.profile-image-icon {
    background-color: #0a7e8b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(10, 126, 139, 0.25);
}

.profile-image.profile-image-icon svg {
    width: 56%;
    height: 56%;
    color: #ffffff;
}

.user-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.user-info h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 20px;
    color: black;
    margin: 0;
    cursor: pointer;
    transition: color 0.2s;
}

.user-info h3:hover {
    color: #0a7e8b;
}

.user-info p {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 12px;
    color: #3c6175;
    margin: 4px 0 8px 0;
}

.modal-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: relative;
}

.sign-out-btn {
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.sign-out-btn:hover {
    background: #c82333;
}

.logout-btn {
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #666;
    position: absolute;
    right: 0;
}

.modal-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 8px 8px 8px;
    border-top: 1px solid #cfe4e8;
    cursor: pointer;
}

.menu-item span {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: black;
}

.menu-item-left {
    display: flex;
    align-items: center;
    gap: 4px;
}

.alert-badge {
    background-color: #ff6b6b;
    color: white;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 6px;
    padding: 2px 4px;
    border-radius: 999px;
    min-width: 12px;
    text-align: center;
}

.arrow {
    color: #666;
    font-size: 16px;
}

.current-trip {
    display: flex;
    align-items: center;
    gap: 16px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0px 4px 24px rgba(76, 56, 46, 0.08);
    padding: 0 16px 0 0;
    height: 80px;
}

.trip-image {
    width: 80px;
    height: 80px;
    border-radius: 8px 0 0 8px;
    overflow: hidden;
}

.trip-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.trip-info {
    flex: 1;
}

.trip-info h4 {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: black;
    margin: 0 0 8px 0;
}

.trip-info p {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 8px;
    color: #3c6175;
    margin: 0;
}

.trip-arrow {
    width: 40px;
    height: 40px;
    background-color: #0a7e8b;
    border: none;
    border-radius: 15px;
    color: white;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Laptop/Small Desktop - 1024px to 1366px */
@media (max-width: 1366px) {
    .navigation-bar {
        padding: 15px 40px;
    }
    
    .header-content h1 {
        font-size: 64px;
    }
    
    .search-container {
        width: calc(100vw - 80px);
    }
    
    .explore-section {
        padding: 40px 0;
        gap: 80px;
    }
    
    .explore-content {
        margin-left: 40px;
    }
    
    .explore-text h1 {
        font-size: 80px;
    }
    
    .explore-cards {
        width: 680px;
    }
}



/* Mobile - up to 768px */
@media (max-width: 768px) {
    .navigation-bar {
        padding: 15px 20px 15px 20px;
        align-items: center;
    }
    
    .nav-signin-btn {
        width: 112px;
        padding: 12px 15px;
        font-size: 12px;
    }
    
    .nav-logo {
        height: 65px;
        width: 170px;
    }
    
    .header-section {
        height: auto;
        margin-top: 0;
        padding-bottom: 0;
        padding-top: 280px;
    }
    
    .header-image {
        height: 280px;
        top: 0;
    }
    
    .header-content {
        top: 70px;
        width: calc(100vw - 40px);
    }
    
    .header-section .header-content h1 {
        font-size: 40px;
        margin-bottom: 8px;
    }
    
    .header-content p {
        font-size: 14px;
    }
    
    .search-container {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: calc(100vw - 40px);
        margin: -30px auto 0 auto;
        padding: 20px;
        height: auto;
    }
    
    .search-input {
        padding: 12px 16px;
    }
    
    .input-group input {
        font-size: 16px;
        margin-left: -10px;
    }
    
    .arrow-icon {
        display: none;
    }
    
    .category-buttons {
        flex-direction: row;
        gap: 4px;
        align-items: center;
    }
    
    .category-btn {
        flex: 1;
        padding: 12px 4px;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 14px;
    }
    
    .alert-banner {
        margin: 10px auto 0px auto;
        padding: 15px 10px;
        border-radius: 40px;
    }
    
    .alert-banner-text {
        font-size: 12px;
    }
    
    .alert-banner-text::before {
        content: "This is an alert bar for site wide alerts.";
    }
    
    .alert-banner-text {
        font-size: 0;
    }
    
    .alert-banner-text::before {
        font-size: 12px;
    }
    
    .recent-searches-section {
        width: calc(100vw - 40px);
        margin: 0px auto 20px auto;
        gap: 15px;
    }
    
    .bundles-section {
        width: calc(100vw - 40px);
        margin: 45px auto 0px auto;
        gap: 15px;
        padding: 0 20px 5px 20px;
        box-sizing: border-box;
    }
    
    .weekly-offers-section {
        width: calc(100vw - 40px);
        margin: 35px auto 20px auto;
        gap: 15px;
        padding: 0 20px 5px 20px;
        box-sizing: border-box;
    }
    
    .travel-tips-section {
        width: calc(100vw - 40px);
        margin: 20px auto;
        gap: 15px;
        padding: 0 20px 5px 20px;
        box-sizing: border-box;
    }
    
    .recent-searches-title,
    .bundles-title,
    .weekly-offers-title {
        font-size: 28px;
    }
    
    .bundles-subtitle,
    .weekly-offers-subtitle {
        font-size: 14px;
    }
    
    .recent-search-card {
        width: 280px;
        min-width: 280px;
        padding: 15px;
        overflow: hidden;
    }
    
    .recent-search-content {
        width: 200px;
    }
    
    .recent-search-content h3 {
        font-size: 20px;
        width: 180px;
    }
    
    .recent-search-button {
        margin-left: -30px;
        flex-shrink: 0;
        width: 51px;
        height: 51px;
    }
    
    .bundles-container {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
    
    .bundle-container {
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 240px;
        padding: 12px;
        margin: 0;
        box-sizing: border-box;
    }
    
    .bundle-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .bundle-image {
        width: 100%;
        height: 140px;
    }
    
    .bundle-pricing {
        width: 100%;
        font-size: 12px;
    }
    
    .bundle-info h3 {
        font-size: 18px;
    }
    
    .bundle-info p {
        font-size: 11px;
    }
    
    .explore-section {
        flex-direction: column !important;
        padding: 24px 20px 20px 20px;
        gap: 24px;
        height: auto !important;
        min-height: auto;
        width: calc(100vw - 32px);
        border-radius: 16px;
    }
    
    .explore-content {
        margin-left: 0;
        text-align: center;
        width: 100%;
    }
    
    .explore-text {
        text-align: center;
    }
    
    .explore-text h1 {
        font-size: 42px;
    }
    
    .explore-text p {
        font-size: 14px;
    }
    
    .explore-button {
        width: 180px;
        padding: 12px 24px;
        margin: 0 auto;
    }
    
    .carousel-container {
        width: 100%;
        flex-direction: column;
        gap: 15px;
    }
    
    .carousel-arrow {
        display: none;
    }
    
    .explore-cards {
        width: 100%;
        height: 380px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .carousel-track {
        width: calc(260px * 9 + 40px * 8);
        gap: 16px;
    }
    
    .explore-card {
        width: 260px !important;
        height: 370px !important;
    }
    
    .explore-card-image {
        top: 20px !important;
        left: 20px !important;
        width: calc(100% - 40px) !important;
        height: 220px !important;
    }
    
    .explore-card-content {
        bottom: 20px;
        left: 20px;
        width: calc(100% - 40px);
    }
    
    .explore-card-content h3 {
        font-size: 20px;
    }
    
    .explore-card-content p {
        font-size: 12px;
    }
    
    .explore-card-gradient {
        width: 100% !important;
        height: 200px !important;
    }
    
    .weekly-offers-section {
        margin-top: 45px;
    }
    
    .weekly-offers-container {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
    
    .weekly-offer-card {
        width: calc(100vw - 80px);
        max-width: 400px;
        min-width: 260px;
        height: auto;
        min-height: 460px;
    }
    
    .weekly-offer-image {
        position: relative;
        height: 240px;
    }
    
    .weekly-offer-content {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        padding: 20px;
    }
    
    .weekly-offer-content h3 {
        font-size: 22px;
    }
    
    .weekly-offer-content p {
        font-size: 14px;
    }
    
    .weekly-offer-button {
        position: relative;
        top: auto;
        left: auto;
        margin: 0 20px 20px;
        width: 52px;
        height: 52px;
    }
    
    .weekly-offer-discount {
        width: 60px;
        height: 60px;
        right: 16px;
        top: 16px;
    }
    
    .weekly-offer-discount .percentage {
        font-size: 20px;
    }
    
    .weekly-offer-discount .off-text {
        font-size: 10px;
    }
    
    .tips-card {
        flex-direction: column;
        height: auto;
    }
    
    .background-image {
        width: 100%;
        height: 200px;
        border-radius: 20px 20px 0 0;
    }
    
    .content-panel {
        width: 100%;
        border-radius: 0 0 20px 20px;
        padding: 15px;
        text-align: center;
        box-sizing: border-box;
    }
    
    .text-content {
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .text-content h2 {
        font-size: 20px;
        text-align: center;
        word-wrap: break-word;
        max-width: 100%;
    }
    
    .text-content p {
        font-size: 11px;
        text-align: center;
        word-wrap: break-word;
        max-width: 100%;
    }
    
    .action-button {
        padding: 8px 12px;
        font-size: 10px;
        max-width: 90%;
        margin: 0 auto;
        display: block;
        box-sizing: border-box;
    }
    
    .footer {
        padding: 30px 0;
    }
    
    .footer-content {
        flex-direction: column;
        gap: 25px;
        align-items: center;
        text-align: center;
    }
    
    .footer-left {
        align-items: center;
        gap: 20px;
        width: 100%;
    }
    
    .footer-disclaimer {
        font-size: 16px;
        line-height: 22px;
        text-align: center;
    }
    
    .footer-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 25px;
    }
    
    .footer-column {
        width: auto;
        min-width: 120px;
        text-align: center;
    }
    
    .footer-column h3 {
        font-size: 18px;
        text-align: center;
    }
    
    .footer-column a {
        font-size: 16px;
        text-align: center;
    }
    
    .modal-content {
        top: 20px;
        right: 20px;
        left: 20px;
        width: auto;
        max-width: 320px;
        margin: 0 auto;
    }
    
    .profile-image {
        width: 50px;
        height: 50px;
    }
    
    .user-info h3 {
        font-size: 16px;
    }
    
    .user-info p {
        font-size: 10px;
    }
    
    .menu-item {
        padding: 10px 6px 6px 6px;
    }
    
    .menu-item span {
        font-size: 14px;
    }
    
    .current-trip {
        height: 70px;
        padding: 0 12px 0 0;
    }
    
    .trip-image {
        width: 70px;
        height: 70px;
    }
    
    .trip-info h4 {
        font-size: 14px;
    }
    
    .trip-info p {
        font-size: 7px;
    }
    
    .trip-arrow {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }
}

/* Current Trip Page Styles */
.current-trip-section {
    width: min(1596px, calc(100vw - 40px));
    margin: 40px auto;
    padding: 40px 0;
}

.current-trip-title {
    font-family: 'Inter', sans-serif;
    font-size: 48px;
    font-weight: 700;
    color: #000;
    text-align: center;
    margin: 0 0 40px 0;
}

.trip-details-card {   background: #f9f8f5;  border-radius: 20px;    padding: 40px;   box-shadow: 2px 2px 9px rgba(0, 0, 0, 0.25);  max-width: 900px;   margin: 0 auto;}

.trip-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 2px solid #cfe4e8;
}

.trip-destination h2 {
    font-family: 'Inter', sans-serif;
    font-size: 36px;
    font-weight: 600;
    color: #000;
    margin: 0 0 8px 0;
}

.trip-destination p {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #666;
    margin: 0;
}

.status-badge {
    background: #0a7e8b;
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
}

.trip-content {
    display: flex;
    gap: 40px;
    margin-bottom: 32px;
}

.trip-image-large {
    width: 400px;
    height: 300px;
    border-radius: 15px;
    overflow: hidden;
    flex-shrink: 0;
}

.trip-image-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.trip-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.detail-section h3 {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #000;
    margin: 0 0 12px 0;
}

.detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #e0e0e0;
    gap: 16px;
}

.detail-item .label {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #666;
    white-space: nowrap;
}

.detail-item .label::after {
    content: ' ';
}

.detail-item .value {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #000;
    text-align: right;
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.trip-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
}

.action-btn {
    padding: 12px 24px;
    border-radius: 40px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    border: none;
}

.action-btn.primary {
    background: #0a7e8b;
    color: white;
}

.action-btn.secondary {
    background: #cfe4e8;
    color: #131517;
}

.action-btn:hover {
    opacity: 0.9;
}

/* Responsive Design for Current Trip Page */
@media (max-width: 1024px) {
    .current-trip-section {
        width: calc(100vw - 40px);
        margin: 20px auto;
        padding: 20px 0;
    }
    
    .current-trip-title {
        font-size: 36px;
    }
    
    .trip-details-card {    background: #f9f8f5;  border-radius: 20px;  padding: 40px;    box-shadow: 2px 2px 9px rgba(0, 0, 0, 0.25); max-width: 900px;    margin: 0 auto;}
    
    .trip-content {
        flex-direction: column;
        gap: 24px;
    }
    
    .trip-image-large {
        width: 100%;
        height: 250px;
    }
}

@media (max-width: 768px) {
    .current-trip-title {
        font-size: 28px;
    }
    
    .trip-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .trip-destination h2 {
        font-size: 28px;
    }
    
    .trip-actions {
        flex-direction: column;
    }
    
    .action-btn {
        width: 100%;
    }
}

/* Bundle Detail Page Styles */
.bundle-detail-section {
    width: min(1596px, calc(100vw - 40px));
    margin: 40px auto;
    padding: 40px 0;
}

.bundle-detail-card {
    background: #f9f8f5;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 2px 2px 9px rgba(0, 0, 0, 0.25);
}

.bundle-detail-header {
    display: flex;
    gap: 40px;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 2px solid #cfe4e8;
}

.bundle-detail-image {
    width: 400px;
    height: 300px;
    border-radius: 15px;
    overflow: hidden;
    flex-shrink: 0;
}

.bundle-detail-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bundle-detail-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bundle-detail-info h1 {
    font-family: 'Inter', sans-serif;
    font-size: 48px;
    font-weight: 600;
    color: #000;
    margin: 0;
}

.bundle-description {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #666;
    margin: 0;
}

.bundle-pricing-detail {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.price-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #e0e0e0;
}

.price-label {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #666;
}

/* Flight Search Page Styles */
.flights-section {
    width: min(1596px, calc(100vw - 40px));
    margin: 0 auto;
    padding: 20px 0;
}

.flight-search-bar {
    display: flex;
    align-items: end;
    gap: 16px;
    background: #f9f8f5;
    padding: 20px;
    border-radius: 15px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.search-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 120px;
}

.search-field label {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #666;
}

.search-field input,
.search-field select {
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    background: white;
}

.search-field .autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: none;
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
    margin-top: 4px;
}

.search-field .autocomplete-item {
    padding: 12px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #333;
    border-bottom: 1px solid #f0f0f0;
}

.search-field .autocomplete-item:hover {
    background-color: #f8f9fa;
}

.search-field .autocomplete-item:last-child {
    border-bottom: none;
}

.search-arrow {
    font-size: 20px;
    color: #666;
    margin: 0 8px;
    align-self: center;
}

.search-btn {
    background: #0a7e8b;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.flight-content {
    display: flex;
    gap: 24px;
}

.flight-filters {
    width: 20%;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 0;
    height: fit-content;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.flight-filters h3 {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    padding: 20px 20px 16px 20px;
    border-bottom: 1px solid #f0f0f0;
    color: #333;
}

.filter-group {
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
}

.filter-group:last-child {
    border-bottom: none;
}

.filter-group h4 {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 12px 0;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-group label {
    display: flex;
    align-items: center;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    margin-bottom: 10px;
    cursor: pointer;
    padding: 6px 0;
    transition: color 0.2s;
}

.filter-group label:hover {
    color: #0a7e8b;
}

.filter-group input[type="radio"] {
    margin-right: 10px;
    accent-color: #0a7e8b;
}

.flight-results {
    width: 78%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.flight-card {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 29px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s, border-color 0.2s;
}

.flight-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    border-color: #0a7e8b;
}

.flight-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
}

.airline-info {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
}

.airline {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #0a3954;
    margin-bottom: 4px;
}

.flight-number {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #0a7e8b;
    font-weight: 500;
}

.flight-price {
    text-align: right;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

.price {
    font-family: 'Inter', sans-serif;
    font-size: 35px;
    font-weight: 700;
    color: #0a7e8b;
    display: block;
    line-height: 1;
}

.per-person {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #666;
}

.flight-route {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 19px 29px;
    background: #fafafa;
    border-radius: 8px;
    margin: 10px 0;
}

.departure,
.arrival {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.time {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #0a3954;
    margin-bottom: 4px;
}

.airport {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: #0a7e8b;
    font-weight: 500;
}

.flight-duration {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.duration {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #0a3954;
    font-weight: 500;
    margin-bottom: 8px;
}

.flight-line {
    width: 100%;
    height: 3px;
    background: #cfe4e8;
    position: relative;
    border-radius: 2px;
}

.flight-line::after {
    content: '';
    position: absolute;
    right: -6px;
    top: -4px;
    width: 0;
    height: 0;
    border-left: 10px solid #cfe4e8;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

.flight-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 19px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-top: 10px;
}

.stops,
.class {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: #0a3954;
    font-weight: 500;
    padding: 6px 12px;
    background: #cfe4e8;
    border-radius: 20px;
    margin-right: 8px;
}

.select-btn {
    background: #0a7e8b;
    color: white;
    border: none;
    border-radius: 25px;
    padding: 12px 24px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.select-btn:hover {
    background: #096b76;
}

.price-value {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #0a7e8b;
}

.bundle-detail-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 32px;
}

.included-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.included-item {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #000;
    padding: 4px 0;
}

.bundle-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
}

/* Responsive Design for Bundle Detail Pages */
@media (max-width: 1024px) {
    .bundle-detail-section {
        width: calc(100vw - 40px);
        margin: 20px auto;
        padding: 20px 0;
    }
    
    .bundle-detail-card {
        padding: 24px;
    }
    
    .bundle-detail-header {
        flex-direction: column;
        gap: 24px;
    }
    
    .bundle-detail-image {
        width: 100%;
        height: 250px;
    }
    
    .bundle-detail-info h1 {
        font-size: 36px;
    }
    
    .bundle-detail-content {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

@media (max-width: 768px) {
    .bundle-detail-info h1 {
        font-size: 28px;
    }
    
    .bundle-actions {
        flex-direction: column;
    }
    
    .action-btn {
        width: 100%;
    }
}

/* Flights Page Styles */
.flights-section {
    width: min(1596px, calc(100vw - 40px));
    margin: 40px auto;
    padding: 40px 0;
}

.flights-title {
    font-family: 'Inter', sans-serif;
    font-size: 48px;
    font-weight: 700;
    color: #000;
    text-align: center;
    margin: 0 0 8px 0;
}

.flights-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #666;
    text-align: center;
    margin: 0 0 40px 0;
}

.flights-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
}

.flight-card {
    background: #f9f8f5;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 2px 2px 9px rgba(0, 0, 0, 0.25);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.flight-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-width: 200px;
}

.airline-info h3 {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #000;
    margin: 0 0 4px 0;
}

.airline-info p {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #666;
    margin: 0;
}

.flight-price {
    text-align: right;
}

.flight-price .price {
    font-family: 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #0a7e8b;
    display: block;
}

.flight-price .per-person {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #666;
}

.flight-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.flight-route {
    display: flex;
    align-items: center;
    gap: 20px;
}

.departure, .arrival {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.departure .time, .arrival .time {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #000;
}

.departure .airport, .arrival .airport {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #666;
}

.flight-duration {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.flight-duration .duration {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #666;
}

.flight-line {
    width: 100%;
    height: 2px;
    background: #cfe4e8;
    position: relative;
}

.flight-line::after {
    content: '✈';
    position: absolute;
    right: -8px;
    top: -8px;
    color: #0a7e8b;
    font-size: 16px;
}

.flight-info {
    display: flex;
    gap: 16px;
    justify-content: center;
}

.flight-info span {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #666;
}

.flight-select-btn {
    background: #0a7e8b;
    color: white;
    border: none;
    border-radius: 40px;
    padding: 12px 24px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.flight-select-btn:hover {
    background: #096b76;
}

.flight-filters {
    background: #f9f8f5;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 2px 2px 9px rgba(0, 0, 0, 0.25);
}

.flight-filters h3 {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #000;
    margin: 0 0 16px 0;
}

.filter-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-group label {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #000;
}

.filter-group select {
    padding: 8px 12px;
    border: 1px solid #cfe4e8;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    background: white;
}

/* Responsive Design for Flights Page */
@media (max-width: 1024px) {
    .flights-section {
        width: calc(100vw - 40px);
        margin: 20px auto;
        padding: 20px 0;
    }
    
    .flights-title {
        font-size: 36px;
    }
    
    .flight-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .flight-header {
        width: 100%;
        min-width: auto;
    }
    
    .flight-details {
        width: 100%;
    }
    
    .flight-select-btn {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .flights-title {
        font-size: 28px;
    }
    
    .flight-route {
        flex-direction: column;
        gap: 12px;
    }
    
    .flight-duration {
        order: -1;
    }
    
    .flight-line {
        width: 2px;
        height: 40px;
    }
    
    .flight-line::after {
        right: -8px;
        top: 20px;
        transform: rotate(90deg);
    }
    
    .filter-options {
        grid-template-columns: 1fr;
    }
}

/* Small Mobile - up to 480px */
@media (max-width: 480px) {
    .header-section {
        padding-top: 240px;
    }

    .header-image {
        height: 240px;
    }

    .header-content {
        top: 50px;
    }

    .header-section .header-content h1 {
        font-size: 32px;
    }

    .search-container {
        width: calc(100vw - 32px);
        padding: 16px;
    }

    .category-btn {
        min-width: 80px;
        padding: 10px 8px;
        font-size: 12px;
    }
    
    .explore-text h1 {
        font-size: 32px;
    }
    
    .text-content h2 {
        font-size: 24px;
    }
    
    .recent-search-card {
        width: 240px;
        min-width: 240px;
    }

    .bundle-container {
        width: 100%;
        min-width: auto;
    }

    .weekly-offer-card {
        width: calc(100vw - 64px);
        min-width: 240px;
    }
    
    .explore-card {
        width: 240px !important;
    }
    
    .carousel-track {
        width: calc(240px * 9 + 16px * 8);
    }
    
    .footer-links {
        flex-direction: column;
        gap: 20px;
    }
    
    .modal-content {
        max-width: 280px;
    }
}

/* Notification Banner Styles */
.notification-banner {
    background-color: #0a7e8b;
    color: white;
    padding: 12px 20px;
    text-align: center;
    position: relative;
    z-index: 1001;
}

.notification-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 1596px;
    margin: 0 auto;
}

.notification-content p {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
}

.notification-content a {
    color: white;
    text-decoration: underline;
    font-weight: 600;
}

.notification-content a:hover {
    color: #cfe4e8;
}

.notification-close {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 20px;
}

.notification-close:hover {
    opacity: 0.8;
}

@media (max-width: 768px) {
    .notification-banner {
        padding: 10px 15px;
    }
    
    .notification-content p {
        font-size: 12px;
        padding-right: 30px;
    }
    
    .notification-close {
        right: 10px;
        font-size: 20px;
    }
}

.carousel-arrows-left {
    display: flex;
    flex-direction: column;
    gap: 10px;
}


/* Checkout Input Styling */
.checkout-input {
    width: auto;
    min-width: 200px;
    padding: 8px 12px;
    border: 1px solid #cfe4e8;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #000;
    background: white;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.checkout-input:focus {
    outline: none;
    border-color: #0a7e8b;
    box-shadow: 0 0 0 3px rgba(10, 126, 139, 0.1);
}

.checkout-input::placeholder {
    color: #999;
    font-weight: 400;
}

.detail-item .value {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.detail-section {
    margin-bottom: 24px;
}

.detail-section h3 {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #000;
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #cfe4e8;
}



/* Welcome Text Styling */
.nav-welcome-text { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 400; color: #000; }

.nav-welcome-text strong {
    color: #0a7e8b;
    font-weight: 600;
}



/* Welcome Container Styling */
.nav-welcome-container {
    display: flex;
    align-items: center;
    gap: 12px;
}



/* Checkout Grid Layout */
.checkout-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
}

@media (max-width: 1024px) {
    .checkout-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}


.checkout-grid {
    max-width: 1200px;
    margin: 0 auto;
}

/* ===== Flights Page Styles (Redesigned) ===== */

/* Hero */
.fl-hero {
    position: relative;
    width: 100%;
    height: 180px;
    overflow: hidden;
}

.fl-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0a3954 0%, #0a7e8b 70%, #3db8c1 100%);
}

.fl-hero-inner {
    position: relative;
    z-index: 2;
    width: min(1596px, calc(100vw - 80px));
    margin: 0 auto;
    padding-top: 48px;
}

.fl-hero-inner h1 {
    font-family: 'Inter', sans-serif;
    font-size: 40px;
    font-weight: 700;
    color: white;
    margin: 0 0 6px 0;
    text-align: left;
}

.fl-hero-inner p {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: rgba(207, 228, 232, 0.9);
    margin: 0;
    text-align: left;
}

/* Search Bar */
.fl-search-wrapper {
    width: min(1596px, calc(100vw - 80px));
    margin: 24px auto 0 auto;
    position: relative;
    z-index: 10;
}

.fl-search-bar {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    background: #f9f8f5;
    border-radius: 16px;
    padding: 20px 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.fl-search-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    min-width: 0;
}

.fl-search-field-loc {
    flex: 1.5;
}

.fl-search-field label {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #0a7e8b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: left;
}

.fl-search-field input,
.fl-search-field select {
    padding: 12px 14px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    background: white;
    color: #222;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
    box-sizing: border-box;
}

.fl-search-field input:focus,
.fl-search-field select:focus {
    outline: none;
    border-color: #0a7e8b;
    box-shadow: 0 0 0 3px rgba(10, 126, 139, 0.12);
}

.fl-search-field input::placeholder {
    color: #999;
}

.fl-swap-btn {
    background: #cfe4e8;
    border: none;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    font-size: 18px;
    color: #0a3954;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 2px;
    transition: background 0.2s;
}

.fl-swap-btn:hover {
    background: #0a7e8b;
    color: white;
}

.fl-search-btn {
    background: #0a7e8b;
    color: white;
    border: none;
    border-radius: 10px;
    padding: 12px 28px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.2s;
}

.fl-search-btn:hover {
    background: #096b76;
}

/* Content Grid */
.fl-content-area {
    width: min(1596px, calc(100vw - 80px));
    margin: 32px auto 40px auto;
}

.fl-content-grid {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 24px;
    align-items: start;
}

/* Filters */
.fl-filters {
    background: #f9f8f5;
    border-radius: 16px;
    box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: sticky;
    top: 24px;
}

.fl-filters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    background: #0a3954;
}

.fl-filters-header h3 {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: white;
    margin: 0;
}

.fl-filters-reset {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.fl-filters-reset:hover {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

.fl-filter-group {
    padding: 18px 20px;
    border-bottom: 1px solid #e8e8e8;
}

.fl-filter-group:last-child {
    border-bottom: none;
}

.fl-filter-group h4 {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #0a3954;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 12px 0;
    text-align: left;
}

.fl-filter-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #444;
    transition: color 0.2s;
}

.fl-filter-label:hover {
    color: #0a7e8b;
}

.fl-filter-label input[type="radio"] {
    accent-color: #0a7e8b;
    width: 16px;
    height: 16px;
    margin: 0;
    flex-shrink: 0;
}

/* Results Area */
.fl-results {
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: opacity 0.3s ease;
}

.fl-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.fl-results-count {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #0a3954;
}

.fl-results-sort {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #999;
}

/* Flight Cards */
.fl-card {
    display: grid;
    grid-template-columns: 1fr 180px 180px;
    background: white;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.08);
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}

.fl-card:hover {
    border-color: #0a7e8b;
    box-shadow: 0 4px 18px rgba(10, 126, 139, 0.15);
    transform: translateY(-2px);
}

.fl-card-main {
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.fl-card-airline {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fl-airline-name {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #0a3954;
}

.fl-flight-num {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #0a7e8b;
    background: #cfe4e8;
    padding: 2px 10px;
    border-radius: 20px;
}

.fl-card-route {
    display: flex;
    align-items: center;
    gap: 16px;
}

.fl-time-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 70px;
}

.fl-time-block-end {
    align-items: flex-end;
}

.fl-time {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #0a3954;
}

.fl-airport {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #0a7e8b;
}

.fl-route-line {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.fl-duration {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #666;
}

.fl-line-track {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 0;
}

.fl-line-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.fl-line-dot-start {
    background: #0a7e8b;
}

.fl-line-dot-end {
    background: #0a3954;
}

.fl-line-stop-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #e8a317;
    background: white;
    flex-shrink: 0;
    box-sizing: border-box;
}

.fl-line-bar {
    flex: 1;
    height: 2px;
    background: #cfe4e8;
}

.fl-stops-label {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #999;
}

/* Class Columns */
.fl-card-class {
    padding: 22px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 4px;
    border-left: 1px solid #f0f0f0;
    transition: background 0.2s;
}

.fl-card-class:hover {
    background: #eef7f8;
}

.fl-card-class-premium {
    background: #fafaf7;
}

.fl-card-class-premium:hover {
    background: #eef7f8;
}

.fl-class-label {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #0a3954;
    margin-bottom: 2px;
}

.fl-class-price {
    font-family: 'Inter', sans-serif;
    font-size: 26px;
    font-weight: 800;
    color: #0a7e8b;
}

.fl-seats-left {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #d32f2f;
}

/* Flights Page Responsive */
@media (max-width: 1200px) {
    .fl-content-grid {
        grid-template-columns: 240px 1fr;
    }

    .fl-card {
        grid-template-columns: 1fr 160px 160px;
    }
}

@media (max-width: 1024px) {
    .fl-search-wrapper {
        width: calc(100vw - 40px);
    }

    .fl-content-area {
        width: calc(100vw - 40px);
    }

    .fl-content-grid {
        grid-template-columns: 1fr;
    }

    .fl-filters {
        position: static;
    }

    .fl-hero-inner {
        width: calc(100vw - 40px);
        padding-top: 36px;
    }

    .fl-hero-inner h1 {
        font-size: 32px;
    }

    .fl-search-bar {
        flex-wrap: wrap;
    }

    .fl-search-field {
        min-width: 140px;
    }

    .fl-search-btn {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .fl-hero {
        height: 140px;
    }

    .fl-hero-inner {
        padding-top: 28px;
    }

    .fl-hero-inner h1 {
        font-size: 26px;
    }

    .fl-hero-inner p {
        font-size: 13px;
    }

    .fl-search-bar {
        flex-direction: column;
        gap: 12px;
        padding: 16px;
    }

    .fl-swap-btn {
        align-self: center;
    }

    .fl-search-field {
        width: 100%;
    }

    .fl-card {
        grid-template-columns: 1fr;
    }

    .fl-card-class {
        border-left: none;
        border-top: 1px solid #f0f0f0;
        flex-direction: row;
        justify-content: space-between;
        padding: 14px 20px;
    }

    .fl-class-price {
        font-size: 22px;
    }

    .fl-card-route {
        flex-direction: column;
        gap: 8px;
    }

    .fl-time-block,
    .fl-time-block-end {
        align-items: center;
    }

    .fl-route-line {
        width: 100%;
    }
}

/* ===== Profile Page Styles ===== */
.profile-page {
    width: 100%;
}

/* Profile Hero Banner */
.profile-hero {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: visible;
    margin-bottom: 40px;
}

.profile-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0a3954 0%, #0a7e8b 60%, #3db8c1 100%);
}

.profile-hero-inner {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: min(1596px, calc(100vw - 80px));
    display: flex;
    align-items: flex-end;
    gap: 28px;
    z-index: 2;
}

.profile-avatar {
    width: 120px;
    height: 120px;
    background: #0a7e8b;
    border-radius: 50%;
    border: 5px solid #f9f8f5;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    position: relative;
    z-index: 1;
}

.profile-initial-fallback {
    font-family: 'Inter', sans-serif;
    font-size: 48px;
    font-weight: 700;
    color: white;
    position: absolute;
    z-index: 0;
}

.profile-hero-info {
    padding-bottom: 8px;
}

.profile-hero-info h1 {
    font-family: 'Inter', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: white;
    margin: 0;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
    text-align: left;
}

.profile-hero-info p {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.8);
    margin: 4px 0 0 0;
    text-align: left;
}

/* Profile Content */
.profile-content {
    width: min(1596px, calc(100vw - 80px));
    margin: 0 auto 40px auto;
}

.profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}

.profile-left-col,
.profile-right-col {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Profile Cards */
.profile-card {
    background: #f9f8f5;
    border-radius: 16px;
    box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.profile-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 2px solid #cfe4e8;
}

.profile-card-icon {
    font-size: 20px;
    width: 38px;
    height: 38px;
    background: #cfe4e8;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.profile-card-header h3 {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #0a3954;
    margin: 0;
    text-align: left;
}

.profile-card-body {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Profile Fields */
.profile-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.profile-field-label {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #0a7e8b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: left;
}

.profile-field-value {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #222;
    padding: 10px 14px;
    background: white;
    border-radius: 8px;
    border: 1px solid #e4e4e4;
    text-align: left;
}

.profile-field-row {
    display: flex;
    gap: 16px;
}

.profile-field-half {
    flex: 1;
}

/* Rewards Card */
.profile-rewards-tier {
    display: flex;
    justify-content: center;
}

.profile-tier-badge {
    display: inline-block;
    background: linear-gradient(135deg, #c9963b 0%, #e8c667 50%, #c9963b 100%);
    color: #3d2a00;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    padding: 8px 24px;
    border-radius: 40px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.profile-rewards-points {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
}

.profile-points-value {
    font-family: 'Inter', sans-serif;
    font-size: 40px;
    font-weight: 800;
    color: #0a3954;
}

.profile-points-label {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #666;
}

.profile-rewards-bar-track {
    width: 100%;
    height: 8px;
    background: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}

.profile-rewards-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #0a7e8b, #3db8c1);
    border-radius: 4px;
    transition: width 1s ease;
}

.profile-rewards-next {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #999;
    text-align: center;
    margin: 0;
}

.profile-rewards-perks {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid #e8e8e8;
}

.profile-perk {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #444;
    text-align: left;
}

.profile-perk-check {
    color: #0a7e8b;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

/* Travel Stats */
.profile-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.profile-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 16px;
    border-bottom: 1px solid #e8e8e8;
    border-right: 1px solid #e8e8e8;
}

.profile-stat-item:nth-child(2n) {
    border-right: none;
}

.profile-stat-item:nth-child(n+3) {
    border-bottom: none;
}

.profile-stat-number {
    font-family: 'Inter', sans-serif;
    font-size: 32px;
    font-weight: 800;
    color: #0a7e8b;
}

.profile-stat-desc {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #666;
    margin-top: 4px;
}

/* Profile Page Responsive */
@media (max-width: 1024px) {
    .profile-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .profile-content {
        width: calc(100vw - 40px);
    }

    .profile-hero-inner {
        width: calc(100vw - 40px);
    }
}

@media (max-width: 768px) {
    .profile-hero {
        height: 180px;
        margin-bottom: 30px;
    }

    .profile-hero-inner {
        bottom: 20px;
        gap: 16px;
        width: calc(100vw - 40px);
    }

    .profile-avatar {
        width: 90px;
        height: 90px;
    }

    .profile-avatar span {
        font-size: 36px;
    }

    .profile-hero-info h1 {
        font-size: 24px;
    }

    .profile-hero-info p {
        font-size: 13px;
    }

    .profile-card-header {
        padding: 16px 18px;
    }

    .profile-card-body {
        padding: 16px 18px;
    }

    .profile-field-row {
        flex-direction: column;
        gap: 16px;
    }

    .profile-stat-number {
        font-size: 26px;
    }

    .profile-points-value {
        font-size: 32px;
    }
}

@media (max-width: 480px) {
    .profile-hero {
        height: 150px;
        margin-bottom: 24px;
    }

    .profile-avatar {
        width: 76px;
        height: 76px;
    }

    .profile-avatar span {
        font-size: 30px;
    }

    .profile-hero-info h1 {
        font-size: 20px;
    }
}

/* ===== Bundle Detail Page Styles (Redesigned) ===== */
.bundle-page {
    width: 100%;
}

/* Bundle Hero */
.bundle-hero {
    position: relative;
    width: 100%;
    height: 440px;
    overflow: hidden;
}

.bundle-hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.bundle-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(1.05);
}

.bundle-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(10, 57, 84, 0.75) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.05) 100%);
}

.bundle-hero-content {
    position: absolute;
    bottom: 48px;
    left: 50%;
    transform: translateX(-50%);
    width: min(1596px, calc(100vw - 80px));
    text-align: center;
    color: white;
    z-index: 2;
}

.bundle-hero-content h1 {
    font-family: 'Inter', sans-serif;
    font-size: 64px;
    font-weight: 700;
    margin: 0 0 8px 0;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
    line-height: 1.1;
}

.bundle-hero-content p {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 400;
    margin: 0 auto;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
    max-width: 620px;
}

.bundle-hero-tag {
    display: inline-block;
    background: #0a7e8b;
    color: white;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 40px;
    margin-bottom: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Stats Bar */
.bundle-stats-bar {
    display: flex;
    justify-content: center;
    gap: 0;
    width: min(1596px, calc(100vw - 80px));
    margin: 0 auto;
    background: #0a3954;
    border-radius: 0 0 16px 16px;
    overflow: hidden;
}

.bundle-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 16px;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.bundle-stat:last-child {
    border-right: none;
}

.bundle-stat-value {
    font-family: 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: white;
}

.bundle-stat-label {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: rgba(207, 228, 232, 0.8);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Content Area */
.bundle-content-area {
    width: min(1596px, calc(100vw - 80px));
    margin: 40px auto 0 auto;
}

.bundle-content-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 40px;
    align-items: start;
}

.bundle-main-col {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.bundle-section h2 {
    font-family: 'Inter', sans-serif;
    font-size: 32px;
    font-weight: 600;
    color: #000;
    margin: 0 0 24px 0;
    text-align: left;
}

/* Itinerary Timeline */
.bundle-itinerary {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.itinerary-stop {
    display: flex;
    gap: 20px;
}

.itinerary-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 20px;
    flex-shrink: 0;
    padding-top: 4px;
}

.itinerary-dot {
    width: 14px;
    height: 14px;
    background: #0a7e8b;
    border-radius: 50%;
    border: 3px solid #cfe4e8;
    flex-shrink: 0;
    box-sizing: border-box;
}

.itinerary-line {
    width: 2px;
    flex: 1;
    background: #cfe4e8;
    min-height: 20px;
}

.itinerary-line.last {
    background: transparent;
}

.itinerary-content {
    flex: 1;
    padding-bottom: 32px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.itinerary-day {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #0a7e8b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: left;
}

.itinerary-content h3 {
    font-family: 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #0a3954;
    margin: 0;
    text-align: left;
}

.itinerary-hotel {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #0a7e8b;
    font-style: italic;
    margin: 0;
    text-align: left;
}

.itinerary-desc {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #444;
    margin: 4px 0 0 0;
    line-height: 1.65;
    text-align: left;
}

.itinerary-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.itinerary-tag {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #0a3954;
    background: #cfe4e8;
    padding: 5px 12px;
    border-radius: 20px;
}

/* What's Included Grid */
.bundle-included-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.bundle-included-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: #f9f8f5;
    border-radius: 12px;
    padding: 18px 20px;
    border: 1px solid #e8e8e8;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.bundle-included-card:hover {
    border-color: #cfe4e8;
    box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.08);
}

.bundle-included-icon {
    font-size: 22px;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #cfe4e8;
    border-radius: 10px;
}

.bundle-included-text h4 {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #0a3954;
    margin: 0;
    text-align: left;
}

.bundle-included-text p {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #666;
    margin: 4px 0 0 0;
    line-height: 1.4;
    text-align: left;
}

/* Sidebar */
.bundle-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 24px;
}

.bundle-pricing-card {
    background: #f9f8f5;
    border-radius: 20px;
    padding: 28px;
    box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bundle-pricing-card h3 {
    font-family: 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #000;
    margin: 0 0 4px 0;
    text-align: left;
}

.bundle-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #444;
    padding: 8px 0;
    border-bottom: 1px solid #e8e8e8;
}

.bundle-price-free span:last-child {
    color: #0a7e8b;
    font-weight: 600;
}

.bundle-price-total {
    font-size: 18px;
    font-weight: 700;
    color: #000;
    border-bottom: none;
    padding-top: 12px;
    border-top: 2px solid #0a3954;
}

.bundle-price-total span:last-child {
    color: #0a7e8b;
    font-size: 24px;
}

.bundle-price-note {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #999;
    text-align: center;
    margin: 0;
}

.bundle-cta-btn {
    width: 100%;
    padding: 14px;
    font-size: 16px;
    border-radius: 40px;
    border: none;
    cursor: pointer;
}

/* Quick Facts */
.bundle-quick-facts {
    background: #f9f8f5;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bundle-quick-facts h4 {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #000;
    margin: 0;
    text-align: left;
}

.bundle-fact-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #e8e8e8;
}

.bundle-fact-row:last-child {
    border-bottom: none;
}

.bundle-fact-label {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #666;
}

.bundle-fact-value {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #0a3954;
}

/* Bundle Page Responsive */
@media (max-width: 1200px) {
    .bundle-content-grid {
        grid-template-columns: 1fr 340px;
        gap: 30px;
    }

    .bundle-hero-content h1 {
        font-size: 52px;
    }

    .bundle-stats-bar {
        width: calc(100vw - 80px);
    }
}

@media (max-width: 1024px) {
    .bundle-content-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .bundle-sidebar {
        position: static;
    }

    .bundle-content-area {
        width: calc(100vw - 40px);
    }

    .bundle-hero-content {
        width: calc(100vw - 60px);
    }

    .bundle-hero-content h1 {
        font-size: 44px;
    }

    .bundle-stats-bar {
        width: calc(100vw - 40px);
    }

    .bundle-included-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .bundle-hero {
        height: 340px;
    }

    .bundle-hero-content {
        bottom: 32px;
        width: calc(100vw - 40px);
    }

    .bundle-hero-content h1 {
        font-size: 34px;
    }

    .bundle-hero-content p {
        font-size: 14px;
    }

    .bundle-hero-tag {
        font-size: 11px;
        padding: 5px 12px;
    }

    .bundle-stats-bar {
        flex-wrap: wrap;
        border-radius: 0 0 12px 12px;
        width: calc(100vw - 40px);
    }

    .bundle-stat {
        flex: 1 1 45%;
        padding: 14px 12px;
    }

    .bundle-stat-value {
        font-size: 18px;
    }

    .bundle-content-area {
        width: calc(100vw - 40px);
        margin-top: 28px;
    }

    .bundle-section h2 {
        font-size: 24px;
    }

    .itinerary-content h3 {
        font-size: 20px;
    }

    .bundle-included-grid {
        grid-template-columns: 1fr;
    }

    .bundle-pricing-card {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .bundle-hero {
        height: 280px;
    }

    .bundle-hero-content h1 {
        font-size: 28px;
    }

    .bundle-stat {
        flex: 1 1 45%;
    }
}

/* ===== Hotel Offer Detail Page Styles ===== */
.hotel-offer-page {
    width: 100%;
}

.hotel-hero {
    position: relative;
    width: 100%;
    height: 420px;
    overflow: hidden;
}

.hotel-hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hotel-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(1.1);
}

.hotel-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.15) 60%, rgba(0, 0, 0, 0.05) 100%);
}

.hotel-hero-content {
    position: absolute;
    bottom: 48px;
    left: 50%;
    transform: translateX(-50%);
    width: min(1596px, calc(100vw - 80px));
    color: white;
    z-index: 2;
}

.hotel-hero-content h1 {
    font-family: 'Inter', sans-serif;
    font-size: 64px;
    font-weight: 700;
    margin: 0 0 8px 0;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
    line-height: 1.1;
}

.hotel-hero-content p {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 400;
    margin: 0;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
    max-width: 600px;
}

.hotel-hero-badge {
    display: inline-block;
    background: #0a7e8b;
    color: white;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    padding: 8px 20px;
    border-radius: 40px;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hotel-offer-details {
    width: min(1596px, calc(100vw - 80px));
    margin: 40px auto;
}

.hotel-offer-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 40px;
    align-items: start;
}

.hotel-offer-main {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.hotel-offer-summary {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hotel-rating {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hotel-stars {
    color: #f5a623;
    font-size: 18px;
    letter-spacing: 2px;
}

.hotel-review-score {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #0a7e8b;
}

.hotel-review-count {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #666;
}

.hotel-offer-summary h2 {
    font-family: 'Inter', sans-serif;
    font-size: 36px;
    font-weight: 600;
    color: #000;
    margin: 0;
    text-align: left;
}

.hotel-address {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #666;
    margin: 0;
    text-align: left;
}

.hotel-tagline {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #333;
    margin: 8px 0 0 0;
    line-height: 1.6;
    text-align: left;
}

.hotel-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hotel-section h3 {
    font-family: 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #000;
    margin: 0;
    padding-bottom: 12px;
    border-bottom: 2px solid #cfe4e8;
    text-align: left;
}

/* Room Cards */
.hotel-rooms {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hotel-room-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f9f8f5;
    border-radius: 12px;
    padding: 20px 24px;
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s, border-color 0.2s;
    border: 1px solid transparent;
}

.hotel-room-card:hover {
    box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.15);
    border-color: #cfe4e8;
}

.hotel-room-info h4 {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #0a3954;
    margin: 0 0 4px 0;
    text-align: left;
}

.hotel-room-info p {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #666;
    margin: 0;
    text-align: left;
}

.hotel-room-pricing {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.hotel-room-original {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #999;
    text-decoration: line-through;
}

.hotel-room-price {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #0a7e8b;
}

/* Amenities */
.hotel-amenities-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.hotel-amenity {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #333;
    padding: 8px 0;
    text-align: left;
}

/* Reviews */
.hotel-reviews {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hotel-review-card {
    background: #f9f8f5;
    border-radius: 12px;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

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

.hotel-review-header strong {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #0a3954;
}

.hotel-review-date {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #999;
}

.hotel-review-stars {
    color: #f5a623;
    font-size: 14px;
    letter-spacing: 1px;
}

.hotel-review-card p {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #444;
    margin: 0;
    line-height: 1.6;
    text-align: left;
}

/* Sidebar: Booking Card */
.hotel-offer-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 24px;
}

.hotel-booking-card {
    background: #f9f8f5;
    border-radius: 20px;
    padding: 28px;
    box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hotel-booking-discount {
    background: #0a7e8b;
    color: white;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 8px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hotel-booking-card h3 {
    font-family: 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #000;
    margin: 0;
    text-align: left;
}

.hotel-booking-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hotel-booking-field label {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #666;
    text-align: left;
}

.hotel-booking-field .checkout-input {
    width: 100%;
    box-sizing: border-box;
}

.hotel-booking-summary {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid #cfe4e8;
}

.hotel-booking-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #444;
}

.hotel-booking-savings {
    color: #0a7e8b;
    font-weight: 600;
}

.hotel-booking-total {
    font-size: 18px;
    font-weight: 700;
    color: #000;
    padding-top: 8px;
    border-top: 2px solid #0a3954;
}

.hotel-book-btn {
    width: 100%;
    padding: 16px;
    font-size: 18px;
    border-radius: 40px;
    border: none;
    cursor: pointer;
}

.hotel-booking-note {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #999;
    text-align: center;
    margin: 0;
}

/* Sidebar: Highlights Card */
.hotel-highlights-card {
    background: #f9f8f5;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hotel-highlights-card h4 {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #000;
    margin: 0;
    text-align: left;
}

.hotel-highlight-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #e8e8e8;
}

.hotel-highlight-item:last-child {
    border-bottom: none;
}

.hotel-highlight-label {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #444;
}

.hotel-highlight-value {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #0a7e8b;
}

/* Hotel Offer Page Responsive */
@media (max-width: 1200px) {
    .hotel-offer-grid {
        grid-template-columns: 1fr 340px;
        gap: 30px;
    }

    .hotel-hero-content h1 {
        font-size: 52px;
    }
}

@media (max-width: 1024px) {
    .hotel-offer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .hotel-offer-sidebar {
        position: static;
    }

    .hotel-offer-details {
        width: calc(100vw - 40px);
    }

    .hotel-hero-content {
        width: calc(100vw - 60px);
    }

    .hotel-hero-content h1 {
        font-size: 44px;
    }

    .hotel-amenities-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .hotel-hero {
        height: 320px;
    }

    .hotel-hero-content {
        bottom: 32px;
        width: calc(100vw - 40px);
    }

    .hotel-hero-content h1 {
        font-size: 32px;
    }

    .hotel-hero-content p {
        font-size: 14px;
    }

    .hotel-hero-badge {
        font-size: 13px;
        padding: 6px 14px;
    }

    .hotel-offer-details {
        width: calc(100vw - 40px);
        margin: 24px auto;
    }

    .hotel-offer-summary h2 {
        font-size: 26px;
    }

    .hotel-section h3 {
        font-size: 20px;
    }

    .hotel-amenities-grid {
        grid-template-columns: 1fr;
    }

    .hotel-room-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .hotel-room-pricing {
        align-items: flex-start;
    }

    .hotel-booking-card {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .hotel-hero {
        height: 260px;
    }

    .hotel-hero-content h1 {
        font-size: 26px;
    }

    .hotel-offer-summary h2 {
        font-size: 22px;
    }
}


/* ===== Checkout Page Styles (Redesigned) ===== */

/* Progress bar */
.co-progress-bar {
    background: linear-gradient(135deg, #0a3954 0%, #0a7e8b 100%);
    padding: 24px 0;
}

.co-progress-inner {
    max-width: 580px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.co-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.5);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
}

.co-step-active {
    color: #fff;
}

.co-step-done {
    color: rgba(255,255,255,.7);
}

.co-step-dot {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    transition: all .3s;
}

.co-step-active .co-step-dot {
    background: #fff;
    color: #0a7e8b;
    border-color: #fff;
    box-shadow: 0 0 20px rgba(255,255,255,.25);
}

.co-step-done .co-step-dot {
    background: rgba(255,255,255,.2);
    border-color: rgba(255,255,255,.4);
    color: #fff;
}

.co-step-line {
    width: 80px;
    height: 2px;
    background: rgba(255,255,255,.2);
    margin: 0 12px;
    margin-bottom: 28px;
    border-radius: 2px;
}

.co-step-line-done {
    background: rgba(255,255,255,.5);
}

/* Page container */
.co-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 24px 60px;
}

.co-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 40px;
    align-items: start;
}

/* Form cards */
.co-forms-col {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.co-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e8ecf0;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
    transition: box-shadow .3s;
}

.co-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,.07);
}

.co-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 28px;
    background: #f9f8f5;
    border-bottom: 1px solid #e8ecf0;
}

.co-card-icon {
    font-size: 22px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.co-card-header h3 {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #0a3954;
    margin: 0;
}

.co-card-body {
    padding: 24px 28px 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.co-note {
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    line-height: 1.55;
    color: #56707f;
    background: #f0fafb;
    border: 1px solid #cfe7ea;
    border-radius: 12px;
    padding: 14px 16px;
    margin: 0;
}

.co-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.co-field label {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #5a6872;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.co-field input,
.co-field select {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid #dce2e8;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: #0a3954;
    background: #fff;
    box-sizing: border-box;
    transition: border-color .2s, box-shadow .2s;
    font-weight: 500;
    line-height: 1.3;
}

.co-field select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 40px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230a3954' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px;
}

.co-field input:focus,
.co-field select:focus {
    outline: none;
    border-color: #0a7e8b;
    box-shadow: 0 0 0 3px rgba(10,126,139,.1);
}

.co-field input::placeholder {
    color: #b0b8c1;
    font-weight: 400;
}

.co-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.co-field-row-three {
    grid-template-columns: 1fr 1fr 2fr;
}

/* Summary card (right column) */
.co-summary-col {
    position: sticky;
    top: 24px;
}

.co-summary-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e8ecf0;
    padding: 28px;
    box-shadow: 0 4px 24px rgba(0,0,0,.06);
}

.co-summary-card h3 {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #0a3954;
    margin: 0 0 24px 0;
}

.co-summary-route {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    border-top: 1px solid #e8ecf0;
    border-bottom: 1px solid #e8ecf0;
    margin-bottom: 20px;
}

.co-summary-airport {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.co-summary-code {
    font-family: 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: #0a3954;
}

.co-summary-time {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #5a6872;
}

.co-summary-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
    padding: 0 16px;
    color: #0a7e8b;
}

.co-summary-duration {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #5a6872;
}

.co-summary-line {
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #cfe4e8, #0a7e8b, #cfe4e8);
    border-radius: 2px;
}

.co-summary-arrow > span {
    font-size: 18px;
}

.co-summary-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.co-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
}

.co-summary-row span:first-child {
    color: #5a6872;
}

.co-summary-row span:last-child {
    font-weight: 600;
    color: #0a3954;
}

.co-summary-price-section {
    border-top: 1px solid #e8ecf0;
    padding-top: 16px;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.co-summary-total {
    padding-top: 12px;
    border-top: 2px solid #0a3954;
}

.co-summary-total span:first-child {
    font-size: 16px;
    font-weight: 700;
    color: #0a3954;
}

.co-summary-total span:last-child {
    font-size: 22px;
    font-weight: 800;
    color: #0a7e8b;
}

.co-complete-btn {
    width: 100%;
    padding: 16px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, #0a7e8b, #0a3954);
    color: #fff;
    font-family: 'Inter', sans-serif;
    transition: transform .2s, box-shadow .2s;
    box-shadow: 0 4px 16px rgba(10,126,139,.3);
}

.co-complete-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(10,126,139,.4);
}

.co-back-btn {
    width: 100%;
    padding: 12px;
    margin-top: 10px;
    background: none;
    border: none;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #5a6872;
    cursor: pointer;
    transition: color .2s;
    text-align: center;
}

.co-back-btn:hover {
    color: #0a7e8b;
}

.co-trust-badges {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #5a6872;
}

.co-trust-badges span {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Responsive */
@media (max-width: 1024px) {
    .co-grid {
        grid-template-columns: 1fr;
    }

    .co-summary-col {
        position: static;
        order: -1;
    }
}

@media (max-width: 640px) {
    .co-page {
        padding: 24px 16px 40px;
    }

    .co-card-body {
        padding: 20px;
    }

    .co-field-row,
    .co-field-row-three {
        grid-template-columns: 1fr;
    }

    .co-summary-card {
        padding: 20px;
    }

    .co-progress-inner {
        padding: 0 16px;
    }

    .co-step span {
        font-size: 11px;
    }

    .co-step-line {
        width: 40px;
    }
}

@media (max-width: 480px) {
    .co-step-dot {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    .co-summary-code {
        font-size: 20px;
    }
}


/* ===== Booking Confirmation Page Styles ===== */

.bc-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px 60px;
}

/* Success Banner */
.bc-success-banner {
    text-align: center;
    padding: 48px 24px 40px;
}

.bc-success-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0a7e8b, #0a3954);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 8px 32px rgba(10,126,139,.3);
    animation: bc-pop .5s ease;
}

@keyframes bc-pop {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}

.bc-success-banner h1 {
    font-family: 'Inter', sans-serif;
    font-size: 32px;
    font-weight: 800;
    color: #0a3954;
    margin: 0 0 8px 0;
}

.bc-success-banner p {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: #5a6872;
    margin: 0 0 28px 0;
}

.bc-conf-number {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #f0fafb, #e8f4f5);
    border: 2px solid #cfe4e8;
    border-radius: 14px;
    padding: 18px 40px;
}

.bc-conf-number span {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #5a6872;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.bc-conf-number strong {
    font-family: 'Inter', sans-serif;
    font-size: 30px;
    font-weight: 800;
    color: #0a7e8b;
    letter-spacing: 3px;
}

/* Grid */
.bc-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 32px;
    align-items: start;
}

.bc-details-col,
.bc-sidebar-col {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Cards */
.bc-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e8ecf0;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}

.bc-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 28px;
    background: #f9f8f5;
    border-bottom: 1px solid #e8ecf0;
}

.bc-card-header h3 {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #0a3954;
    margin: 0;
}

.bc-card-body {
    padding: 28px;
}

/* Route Visual */
.bc-route-visual {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    margin-bottom: 24px;
    border-bottom: 1px solid #e8ecf0;
}

.bc-route-point {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.bc-route-code {
    font-family: 'Inter', sans-serif;
    font-size: 28px;
    font-weight: 800;
    color: #0a3954;
}

.bc-route-time {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #5a6872;
}

.bc-route-path {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0 20px;
}

.bc-route-duration {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #5a6872;
}

.bc-route-line-track {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 0;
}

.bc-route-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0a7e8b;
    flex-shrink: 0;
}

.bc-route-line {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, #cfe4e8, #0a7e8b);
}

.bc-route-plane {
    flex-shrink: 0;
    margin: 0 4px;
}

/* Detail Rows */
.bc-detail-rows {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.bc-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
}

.bc-detail-row span:first-child {
    color: #5a6872;
}

.bc-detail-row span:last-child {
    font-weight: 600;
    color: #0a3954;
}

.bc-detail-row-total {
    padding-top: 14px;
    margin-top: 4px;
    border-top: 2px solid #0a3954;
}

.bc-detail-row-total span:first-child {
    font-size: 16px;
    font-weight: 700;
    color: #0a3954;
}

.bc-detail-row-total span:last-child {
    font-size: 20px;
    font-weight: 800;
    color: #0a7e8b;
}

/* Next Steps */
.bc-next-steps {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bc-next-step {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.bc-step-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 10px;
    background: #f0fafb;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cfe4e8;
}

.bc-step-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bc-step-text strong {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #0a3954;
}

.bc-step-text span {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #5a6872;
    line-height: 1.4;
}

/* Actions */
.bc-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bc-secondary-btn {
    width: 100%;
    padding: 14px;
    background: #fff;
    border: 1.5px solid #dce2e8;
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #0a3954;
    cursor: pointer;
    transition: all .2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.bc-secondary-btn:hover {
    border-color: #0a7e8b;
    color: #0a7e8b;
    background: #f0fafb;
}

/* Responsive */
@media (max-width: 1024px) {
    .bc-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .bc-page {
        padding: 0 16px 40px;
    }

    .bc-success-banner {
        padding: 32px 16px 28px;
    }

    .bc-success-banner h1 {
        font-size: 26px;
    }

    .bc-conf-number {
        padding: 14px 24px;
    }

    .bc-conf-number strong {
        font-size: 24px;
        letter-spacing: 2px;
    }

    .bc-card-body {
        padding: 20px;
    }

    .bc-route-code {
        font-size: 22px;
    }
}


/* ===== Current Trip Page Styles (Redesigned) ===== */

/* Page Header (replaces hero banner) */
.ct-page-header {
    background: #f9f8f5;
    border-bottom: 1px solid #e8ecf0;
    padding: 36px 24px;
}

.ct-header-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    flex-wrap: wrap;
}

.ct-header-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ct-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #0a7e8b;
    color: #fff;
    padding: 5px 14px;
    border-radius: 20px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    width: fit-content;
    margin-bottom: 4px;
}

.ct-header-text h1 {
    font-family: 'Inter', sans-serif;
    font-size: 36px;
    font-weight: 800;
    color: #0a3954;
    margin: 0;
    line-height: 1.15;
}

.ct-header-dates {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #5a6872;
    margin: 0;
}

.ct-header-meta {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.ct-header-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #0a3954;
    background: #fff;
    border: 1px solid #e8ecf0;
    padding: 8px 14px;
    border-radius: 10px;
}

/* Sidebar Destination Image Card */
.ct-dest-image-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    height: 200px;
    box-shadow: 0 4px 24px rgba(0,0,0,.08);
}

.ct-dest-image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ct-dest-image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 14px 18px;
    background: linear-gradient(0deg, rgba(10,57,84,.8) 0%, transparent 100%);
}

.ct-dest-image-overlay span {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

/* Page */
.ct-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 24px 60px;
}

.ct-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 32px;
    align-items: start;
}

.ct-main-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ct-sidebar-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 24px;
}

/* Cards */
.ct-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e8ecf0;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
    transition: box-shadow .3s;
}

.ct-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,.07);
}

.ct-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 24px;
    background: #f9f8f5;
    border-bottom: 1px solid #e8ecf0;
}

.ct-card-header h3 {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #0a3954;
    margin: 0;
    flex: 1;
}

.ct-card-tag {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #0a7e8b;
    background: #e8f4f5;
    padding: 4px 12px;
    border-radius: 20px;
}

.ct-card-body {
    padding: 24px;
}

/* Flight Visual */
.ct-flight-visual {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ct-flight-point {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 60px;
}

.ct-flight-code {
    font-family: 'Inter', sans-serif;
    font-size: 26px;
    font-weight: 800;
    color: #0a3954;
}

.ct-flight-time {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #0a3954;
}

.ct-flight-date {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #5a6872;
}

.ct-flight-path {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0 20px;
}

.ct-flight-line-track {
    display: flex;
    align-items: center;
    width: 100%;
}

.ct-flight-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0a7e8b;
    flex-shrink: 0;
}

.ct-flight-line {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, #cfe4e8, #0a7e8b);
}

.ct-flight-plane {
    flex-shrink: 0;
    margin: 0 4px;
}

.ct-flight-duration {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #e6f2f3, #d0e6ea);
    border: 1px solid rgba(10, 126, 139, 0.22);
    box-shadow: 0 2px 6px rgba(10, 126, 139, 0.12);
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    color: #0a3954;
    line-height: 1;
    white-space: nowrap;
}

.ct-flight-duration-icon {
    color: #0a7e8b;
    flex-shrink: 0;
}

.ct-flight-duration-label {
    font-variant-numeric: tabular-nums;
}

/* Hotel Info */
.ct-hotel-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ct-hotel-name-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ct-hotel-name-block h4 {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #0a3954;
    margin: 0;
}

.ct-hotel-stars {
    display: flex;
    gap: 2px;
}

.ct-hotel-addr {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #5a6872;
}

.ct-hotel-dates {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f9f8f5;
    border-radius: 12px;
    padding: 18px 20px;
    border: 1px solid #e8ecf0;
}

.ct-hotel-date-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
}

.ct-hotel-date-label {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #5a6872;
}

.ct-hotel-date-value {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #0a3954;
}

.ct-hotel-date-time {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #5a6872;
}

.ct-hotel-date-divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #0a7e8b;
}

.ct-hotel-date-divider span {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #5a6872;
}

/* Summary Card */
.ct-summary-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e8ecf0;
    padding: 24px;
    box-shadow: 0 4px 24px rgba(0,0,0,.06);
}

.ct-summary-card h3 {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #0a3954;
    margin: 0 0 18px 0;
}

.ct-summary-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ct-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
}

.ct-summary-row span:first-child {
    color: #5a6872;
}

.ct-summary-row span:last-child {
    font-weight: 600;
    color: #0a3954;
}

.ct-summary-total {
    padding-top: 14px;
    margin-top: 4px;
    border-top: 2px solid #0a3954;
}

.ct-summary-total span:first-child {
    font-size: 16px;
    font-weight: 700;
    color: #0a3954;
}

.ct-summary-total span:last-child {
    font-size: 22px;
    font-weight: 800;
    color: #0a7e8b;
}

/* Actions Card */
.ct-actions-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e8ecf0;
    padding: 24px;
}

.ct-actions-card h3 {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #0a3954;
    margin: 0 0 16px 0;
}

.ct-action-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ct-action-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 14px 16px;
    background: #fff;
    border: 1.5px solid #e8ecf0;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #0a3954;
    cursor: pointer;
    transition: all .2s;
}

.ct-action-btn:hover {
    border-color: #0a7e8b;
    color: #0a7e8b;
    background: #f0fafb;
}

/* Countdown Card */
.ct-countdown-card {
    background: linear-gradient(135deg, #0a3954, #0a7e8b);
    border-radius: 16px;
    padding: 28px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.ct-countdown-label {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255,255,255,.7);
}

.ct-countdown-number {
    font-family: 'Inter', sans-serif;
    font-size: 56px;
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
}

.ct-countdown-sub {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: rgba(255,255,255,.7);
    margin-top: 4px;
}

/* Responsive */
@media (max-width: 1024px) {
    .ct-grid {
        grid-template-columns: 1fr;
    }

    .ct-sidebar-col {
        position: static;
    }
}

@media (max-width: 768px) {
    .ct-header-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    /* The frontdoor trip page's `.mt-page-header .ct-header-inner` rule
       (0,2,0 specificity) otherwise outranks the single-class mobile
       stack above and re-asserts `align-items: center`. Repeat the
       selector at matching specificity so the mobile alignment wins. */
    .mt-page-header .ct-header-inner {
        align-items: flex-start;
    }

    .ct-header-text h1 {
        font-size: 30px;
    }

    .ct-header-meta {
        gap: 10px;
    }

    .ct-header-meta span {
        font-size: 12px;
        padding: 6px 10px;
    }
}

@media (max-width: 640px) {
    .ct-page {
        padding: 24px 16px 40px;
    }

    .ct-page-header {
        padding: 24px 16px;
    }

    .ct-header-text h1 {
        font-size: 26px;
    }

    .ct-header-dates {
        font-size: 14px;
    }

    .ct-flight-code {
        font-size: 20px;
    }

    .ct-hotel-dates {
        flex-direction: column;
        gap: 12px;
    }

    .ct-hotel-date-divider {
        flex-direction: row;
        gap: 8px;
    }

    .ct-card-body {
        padding: 18px;
    }

    .ct-dest-image-card {
        height: 160px;
    }
}

/* ── Cookie Consent Banner ── */

.cookie-consent {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    opacity: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 20px;
    max-width: 720px;
    width: calc(100% - 32px);
    padding: 20px 28px;
    background: #0a3954;
    border-top: 3px solid #0a7e8b;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    color: #fff;
    font-family: 'Inter', sans-serif;
    text-align: left;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.cookie-consent__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    flex: 1;
}

.cookie-consent__actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.cookie-consent__btn--accept,
.cookie-consent__btn--decline {
    padding: 10px 22px;
    border-radius: 40px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
}

.cookie-consent__btn--accept {
    background: #0a7e8b;
    color: #fff;
    border: none;
}

.cookie-consent__btn--accept:hover {
    background: #096b76;
}

.cookie-consent__btn--decline {
    background: transparent;
    color: #cfe4e8;
    border: 1px solid #cfe4e8;
}

.cookie-consent__btn--decline:hover {
    background: rgba(207, 228, 232, 0.12);
}

@media (max-width: 600px) {
    .cookie-consent {
        flex-direction: column;
        text-align: center;
        gap: 14px;
        padding: 18px 20px;
        bottom: 12px;
    }

    .cookie-consent__actions {
        width: 100%;
        justify-content: center;
    }
}


/* ===============================================================
   Frontdoor Page (frontdoor.html)
   Lead-generation page: hero CTA + multi-step form card
   Palette: teal #0a7e8b / hover #096b76, navy #0a3954,
            cream #f9f8f5, light-teal #cfe4e8
   =============================================================== */

.demo-page {
    text-align: left;
    color: #0a3954;
    background: #f9f8f5;
    min-height: calc(100vh - 140px);
}

.demo-page *,
.demo-page *::before,
.demo-page *::after {
    box-sizing: border-box;
}

/* ---------- Hero band ---------- */

.demo-hero {
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding: 72px 80px 88px;
    background:
        radial-gradient(1000px 480px at 12% 12%, rgba(10, 126, 139, 0.22), transparent 70%),
        radial-gradient(800px 520px at 95% 20%, rgba(207, 228, 232, 0.22), transparent 70%),
        linear-gradient(135deg, #0a3954 0%, #103f5c 45%, #0a3954 100%);
    overflow: hidden;
    color: #f9f8f5;
}

.demo-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.demo-hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.45;
}

.demo-hero-glow-teal {
    width: 420px;
    height: 420px;
    background: #0a7e8b;
    top: -120px;
    left: -80px;
}

.demo-hero-glow-cream {
    width: 360px;
    height: 360px;
    background: #cfe4e8;
    bottom: -140px;
    right: -80px;
    opacity: 0.25;
}

.demo-hero-inner {
    position: relative;
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 72px;
    align-items: center;
}

/* ---------- Hero copy ---------- */

.demo-hero-copy {
    color: #f9f8f5;
    text-align: left;
}

.demo-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: rgba(207, 228, 232, 0.14);
    border: 1px solid rgba(207, 228, 232, 0.35);
    color: #cfe4e8;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 999px;
    margin-bottom: 22px;
}

.demo-hero-title {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: clamp(40px, 5.2vw, 68px);
    line-height: 1.03;
    letter-spacing: -0.02em;
    margin: 0 0 22px 0;
    color: #f9f8f5;
}

.demo-hero-accent {
    position: relative;
    color: #cfe4e8;
    font-style: italic;
    font-weight: 800;
    white-space: nowrap;
}

.demo-hero-accent::after {
    content: "";
    position: absolute;
    left: 2%;
    right: 2%;
    bottom: 4px;
    height: 10px;
    background: rgba(10, 126, 139, 0.45);
    border-radius: 8px;
    z-index: -1;
}

.demo-hero-lede {
    font-size: 18px;
    line-height: 1.6;
    color: rgba(249, 248, 245, 0.82);
    max-width: 560px;
    margin: 0 0 28px 0;
}

.demo-hero-bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 32px 0;
    display: grid;
    gap: 14px;
}

.demo-hero-bullets li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 16px;
    color: rgba(249, 248, 245, 0.92);
    line-height: 1.45;
}

.demo-hero-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(10, 126, 139, 0.85);
    color: #f9f8f5;
    box-shadow: 0 4px 14px rgba(10, 126, 139, 0.4);
}

.demo-hero-micro {
    font-size: 14px;
    color: rgba(249, 248, 245, 0.7);
    margin: 0;
}

.demo-hero-micro a {
    color: #cfe4e8;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(207, 228, 232, 0.4);
    padding-bottom: 1px;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.demo-hero-micro a:hover {
    color: #f9f8f5;
    border-bottom-color: #f9f8f5;
}

/* ---------- Form card ---------- */

.demo-form-card {
    position: relative;
    background: #ffffff;
    border-radius: 24px;
    padding: 36px 36px 28px;
    box-shadow:
        0 2px 4px rgba(10, 57, 84, 0.06),
        0 20px 60px rgba(10, 57, 84, 0.28),
        0 40px 120px rgba(10, 57, 84, 0.18);
    color: #0a3954;
    text-align: left;
}

.demo-form-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 25px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(10, 126, 139, 0.5), rgba(207, 228, 232, 0.2));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}

.demo-form-card-header {
    margin-bottom: 22px;
}

.demo-form-title {
    margin: 0 0 4px 0;
    font-family: 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #0a3954;
    letter-spacing: -0.01em;
}

.demo-form-subtitle {
    margin: 0;
    font-size: 14px;
    color: #5a7285;
}

/* ---------- Breadcrumb ---------- */

.demo-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0 -4px 28px;
}

.demo-breadcrumb-step {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    padding: 4px 8px;
    cursor: not-allowed;
    font-family: 'Inter', sans-serif;
    color: #94a3b3;
    transition: color 0.2s ease;
}

.demo-breadcrumb-step.is-clickable {
    cursor: pointer;
}

.demo-breadcrumb-step:focus-visible {
    outline: 2px solid #0a7e8b;
    outline-offset: 3px;
    border-radius: 6px;
}

.demo-breadcrumb-bubble {
    position: relative;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f4f6;
    border: 2px solid #e1e6ea;
    color: #94a3b3;
    font-weight: 700;
    font-size: 14px;
    transition: all 0.25s ease;
}

.demo-breadcrumb-check {
    position: absolute;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.demo-breadcrumb-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.demo-breadcrumb-connector {
    flex: 1 1 auto;
    height: 2px;
    min-width: 24px;
    margin: 0 4px;
    background: #e1e6ea;
    border-radius: 2px;
    position: relative;
    top: -9px;
    transition: background 0.3s ease;
}

.demo-breadcrumb-step.is-active .demo-breadcrumb-bubble {
    background: #ffffff;
    border-color: #0a7e8b;
    color: #0a7e8b;
    box-shadow: 0 0 0 4px rgba(10, 126, 139, 0.14);
}

.demo-breadcrumb-step.is-active .demo-breadcrumb-label {
    color: #0a7e8b;
}

.demo-breadcrumb-step.is-complete {
    cursor: pointer;
    color: #0a7e8b;
}

.demo-breadcrumb-step.is-complete .demo-breadcrumb-bubble {
    background: #0a7e8b;
    border-color: #0a7e8b;
    color: #ffffff;
}

.demo-breadcrumb-step.is-complete .demo-breadcrumb-num {
    opacity: 0;
}

.demo-breadcrumb-step.is-complete .demo-breadcrumb-check {
    opacity: 1;
    transform: scale(1);
    color: #ffffff;
}

.demo-breadcrumb-step.is-complete .demo-breadcrumb-label {
    color: #0a3954;
}

.demo-breadcrumb-step.is-complete + .demo-breadcrumb-connector,
.demo-breadcrumb-connector.is-active {
    background: #0a7e8b;
}

/* ---------- Step panels ---------- */

.demo-form {
    display: flex;
    flex-direction: column;
}

.demo-step-panel {
    display: none;
    flex-direction: column;
    gap: 16px;
    animation: demoStepFadeIn 0.28s ease;
}

.demo-step-panel.is-active {
    display: flex;
}

@keyframes demoStepFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.demo-step-header {
    margin-bottom: 4px;
}

.demo-step-title {
    margin: 0 0 2px 0;
    font-size: 18px;
    font-weight: 700;
    color: #0a3954;
}

.demo-step-subtitle {
    margin: 0;
    font-size: 13px;
    color: #6b7e8e;
}

/* ---------- Fields ---------- */

.demo-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.demo-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.demo-fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.demo-field-label {
    font-size: 13px;
    font-weight: 600;
    color: #0a3954;
    letter-spacing: 0.01em;
}

.demo-field-optional {
    color: #94a3b3;
    font-weight: 500;
    margin-left: 4px;
}

.demo-input,
.demo-select {
    width: 100%;
    /* Without border-box, `width: 100%` + padding + border overflows
       the parent by ~31px horizontally -- visible on the narrow sign-in
       lookup modal at mobile widths. */
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: #0a3954;
    background: #ffffff;
    border: 1.5px solid #dde3e8;
    border-radius: 12px;
    padding: 12px 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
}

.demo-input::placeholder {
    color: #a8b3bf;
}

.demo-input:hover,
.demo-select:hover {
    border-color: #b9c6cf;
}

.demo-input:focus,
.demo-select:focus {
    outline: none;
    border-color: #0a7e8b;
    box-shadow: 0 0 0 4px rgba(10, 126, 139, 0.14);
    background: #ffffff;
}

.demo-input:disabled {
    background: #f4f6f8;
    color: #94a3b3;
    cursor: not-allowed;
}

.demo-select-wrap {
    position: relative;
}

.demo-select {
    padding-right: 40px;
    cursor: pointer;
}

.demo-select-chevron {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #0a7e8b;
    pointer-events: none;
}

.demo-field.has-error .demo-input,
.demo-field.has-error .demo-select {
    border-color: #d03a3a;
    box-shadow: 0 0 0 4px rgba(208, 58, 58, 0.12);
}

/* Autocomplete (origin / destination) */

.demo-autocomplete {
    position: relative;
}

.demo-autocomplete-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1.5px solid #dde3e8;
    border-radius: 12px;
    box-shadow: 0 14px 40px rgba(10, 57, 84, 0.16);
    max-height: 260px;
    overflow-y: auto;
    z-index: 30;
    padding: 4px;
    display: none;
}

.demo-autocomplete-dropdown .autocomplete-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 8px;
    border-bottom: none;
    font-size: 14px;
    color: #0a3954;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.demo-autocomplete-dropdown .autocomplete-item:hover,
.demo-autocomplete-dropdown .autocomplete-item.is-active {
    background: #f4f7f9;
    color: #0a7e8b;
}

.demo-autocomplete-dropdown .autocomplete-item-primary {
    font-weight: 600;
    font-size: 14px;
    color: inherit;
    font-variant-numeric: tabular-nums;
}

.demo-autocomplete-dropdown .autocomplete-item-secondary {
    font-size: 12px;
    color: #6b7e8e;
}

.demo-autocomplete-dropdown .autocomplete-item:hover .autocomplete-item-secondary,
.demo-autocomplete-dropdown .autocomplete-item.is-active .autocomplete-item-secondary {
    color: #0a7e8b;
}

/* Phone input with country-code input to the left */

.demo-phone-group {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 8px;
    align-items: stretch;
}

.demo-phone-country-input {
    min-width: 0;
    text-align: center;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.demo-phone-input {
    min-width: 0;
}

/* ── Phone country-code custom dropdown ─────────────────────────────────── */

.demo-phone-country-wrap {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.demo-phone-country-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    flex: 1;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: #0a3954;
    background: #ffffff;
    border: 1.5px solid #dde3e8;
    border-radius: 12px;
    padding: 10px 10px;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
    white-space: nowrap;
}

.demo-phone-country-btn:hover {
    border-color: #b9c6cf;
}

.demo-phone-country-btn:focus-visible {
    outline: none;
    border-color: #0a7e8b;
    box-shadow: 0 0 0 4px rgba(10, 126, 139, 0.14);
}

.demo-phone-country-wrap.is-open .demo-phone-country-btn {
    border-color: #0a7e8b;
    box-shadow: 0 0 0 4px rgba(10, 126, 139, 0.14);
}

.demo-field.has-error .demo-phone-country-btn {
    border-color: #d03a3a;
    box-shadow: 0 0 0 4px rgba(208, 58, 58, 0.12);
}

.demo-phone-country-flag {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.demo-phone-country-dialcode {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #0a3954;
    flex-shrink: 0;
}

.demo-phone-country-chevron {
    flex-shrink: 0;
    color: #0a7e8b;
    margin-left: 1px;
    transition: transform 0.18s ease;
}

.demo-phone-country-wrap.is-open .demo-phone-country-chevron {
    transform: rotate(180deg);
}

/* Dropdown panel */

.demo-phone-country-panel {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    width: 270px;
    background: #ffffff;
    border: 1.5px solid #dde3e8;
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.13);
    z-index: 200;
    overflow: hidden;
}

.demo-phone-country-search-wrap {
    position: relative;
    padding: 10px 12px;
    border-bottom: 1px solid #dde3e8;
}

.demo-phone-country-search-icon {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    color: #a8b3bf;
    pointer-events: none;
    transition: color 0.15s ease;
}

.demo-phone-country-search-wrap:focus-within .demo-phone-country-search-icon {
    color: #0a7e8b;
}

.demo-phone-country-search {
    width: 100%;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #0a3954;
    background: #ffffff;
    border: 1.5px solid #dde3e8;
    border-radius: 10px;
    padding: 9px 10px 9px 32px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.demo-phone-country-search:hover {
    border-color: #b9c6cf;
}

.demo-phone-country-search:focus {
    border-color: #0a7e8b;
    box-shadow: 0 0 0 3px rgba(10, 126, 139, 0.14);
}

.demo-phone-country-search::placeholder {
    color: #a8b3bf;
}

.demo-phone-country-list {
    list-style: none;
    padding: 4px 0;
    margin: 0;
    max-height: 224px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #dde3e8 transparent;
}

.demo-phone-country-list::-webkit-scrollbar {
    width: 5px;
}

.demo-phone-country-list::-webkit-scrollbar-track {
    background: transparent;
}

.demo-phone-country-list::-webkit-scrollbar-thumb {
    background: #dde3e8;
    border-radius: 4px;
}

.demo-phone-country-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 14px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s ease;
    box-sizing: border-box;
}

.demo-phone-country-option:hover,
.demo-phone-country-option:focus-visible {
    background: #f0f9fa;
    outline: none;
}

.demo-phone-country-option.is-selected {
    background: #e8f4f6;
}

.demo-phone-country-option-flag {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.demo-phone-flag-img {
    display: block;
    width: 20px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.demo-phone-country-option-name {
    flex: 1;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #131517;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.demo-phone-country-option.is-selected .demo-phone-country-option-name {
    color: #0a7e8b;
    font-weight: 500;
}

.demo-phone-country-option-code {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #6b7c8a;
    font-weight: 500;
    flex-shrink: 0;
}

.demo-phone-country-option.is-selected .demo-phone-country-option-code {
    color: #0a7e8b;
}

@media (prefers-reduced-motion: no-preference) {
    .demo-phone-country-chevron {
        transition: transform 0.18s ease;
    }
    .demo-phone-country-btn {
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .demo-phone-country-option {
        transition: background 0.12s ease;
    }
}

@media (prefers-reduced-motion: reduce) {
    .demo-phone-country-chevron,
    .demo-phone-country-btn,
    .demo-phone-country-option {
        transition: none !important;
    }
}

/* ── End phone country dropdown ─────────────────────────────────────────── */

.demo-field-error {
    font-size: 12px;
    color: #d03a3a;
    min-height: 0;
    line-height: 1.3;
    display: none;
}

.demo-field.has-error .demo-field-error {
    display: block;
}

/* ---------- Radio pills (seat preference) ---------- */

.demo-radio-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 4px;
}

.demo-radio-pill {
    position: relative;
    cursor: pointer;
}

.demo-radio-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.demo-radio-pill-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 10px;
    border-radius: 12px;
    border: 1.5px solid #dde3e8;
    background: #ffffff;
    color: #0a3954;
    font-weight: 600;
    font-size: 13.5px;
    transition: all 0.2s ease;
}

.demo-radio-pill:hover .demo-radio-pill-inner {
    border-color: #b9c6cf;
    background: #f9fbfc;
}

.demo-radio-pill input:focus-visible + .demo-radio-pill-inner {
    box-shadow: 0 0 0 4px rgba(10, 126, 139, 0.18);
}

.demo-radio-pill input:checked + .demo-radio-pill-inner {
    background: #0a7e8b;
    border-color: #0a7e8b;
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(10, 126, 139, 0.3);
}

.demo-fieldset.has-error .demo-radio-pill-inner {
    border-color: #d03a3a;
}

/* ---------- Contact-channel checkbox pills (SMS / WhatsApp) ---------- */

/* Intentionally sized a shade smaller than the main form inputs: this is
   an optional, afterthought field and shouldn't compete with the hero
   controls above it. */

.demo-contact-prefs {
    gap: 4px;
}

.demo-contact-prefs > .demo-field-label {
    font-size: 12px;
    color: #5a6a75;
}

.demo-contact-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 2px;
}

.demo-contact-pill {
    position: relative;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.demo-contact-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.demo-contact-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid #dde3e8;
    background: #ffffff;
    color: #2f4a58;
    font-weight: 600;
    font-size: 12.5px;
    line-height: 1;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.demo-contact-icon-wrap {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eef4f5;
    color: #0a7e8b;
    transition: background 0.18s ease, color 0.18s ease;
}

.demo-contact-icon-wrap.demo-contact-icon-whatsapp {
    background: rgba(37, 211, 102, 0.14);
}

.demo-contact-icon {
    flex: 0 0 auto;
    display: block;
}

.demo-contact-title {
    font-size: 12.5px;
    letter-spacing: 0.01em;
}

.demo-contact-pill:hover .demo-contact-inner {
    border-color: #b9c6cf;
    background: #f9fbfc;
}

.demo-contact-pill input:focus-visible + .demo-contact-inner {
    box-shadow: 0 0 0 3px rgba(10, 126, 139, 0.18);
}

.demo-contact-pill input:checked + .demo-contact-inner {
    border-color: #0a7e8b;
    background: #0a7e8b;
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(10, 126, 139, 0.22);
}

.demo-contact-pill input:checked + .demo-contact-inner .demo-contact-icon-wrap {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

.demo-contact-pill[data-channel="whatsapp"] input:checked + .demo-contact-inner {
    border-color: #128c45;
    background: #1ea851;
    box-shadow: 0 3px 10px rgba(37, 211, 102, 0.25);
}

.demo-contact-pill.is-disabled {
    cursor: not-allowed;
}

.demo-contact-pill.is-disabled .demo-contact-inner {
    opacity: 0.6;
    background: #f3f5f7;
    border-color: #e2e6ea;
    color: #8d9aa4;
    box-shadow: none;
}

.demo-contact-pill.is-disabled .demo-contact-icon-wrap {
    background: #e6eaee;
    color: #8d9aa4;
}

.demo-contact-pill.is-disabled:hover .demo-contact-inner {
    border-color: #e2e6ea;
    background: #f3f5f7;
}

.demo-contact-hint {
    font-size: 11px;
    color: #6b7b86;
    line-height: 1.3;
    margin-top: 2px;
}

.demo-contact-hint[hidden] {
    display: none;
}

/* ---------- Cabin class pills (tier-escalation with on-top pendant) ---------- */

.demo-fieldset-legend-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.demo-seat-pref-label {
    display: block;
    margin-top: 6px;
}

.demo-class-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 2px;
    margin-bottom: 6px;
}

.demo-class-pill {
    position: relative;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

.demo-class-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.demo-class-pill-inner {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 11px 10px;
    border-radius: 12px;
    border: 1.5px solid #dde3e8;
    background: #ffffff;
    color: #0a3954;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.01em;
    transition: transform 0.25s ease, border-color 0.2s ease, background 0.25s ease, box-shadow 0.3s ease, color 0.25s ease;
}

.demo-class-pill-label {
    line-height: 1.1;
}

/* --- Pendant on top: tier glyph over a colored accent line --- */

.demo-class-pendant {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    pointer-events: none;
}

.demo-class-pendant-icon {
    width: 14px;
    height: 14px;
    color: #b0bac4;
    transition: color 0.25s ease, transform 0.25s ease, filter 0.3s ease, width 0.25s ease, height 0.25s ease;
}

.demo-class-pendant-line {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: #dde3e8;
    transition: width 0.3s ease, height 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.demo-class-pendant-halo {
    position: absolute;
    left: 50%;
    top: -6px;
    width: 32px;
    height: 32px;
    transform: translate(-50%, 0);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(224, 185, 102, 0.35) 0%, rgba(224, 185, 102, 0) 70%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Per-tier unselected pendant hints so even the idle state shows the
   tier escalation (teal → navy → gold), without any wifi-bar look. */
.demo-class-pill[data-tier="economy"] .demo-class-pendant-line {
    width: 24px;
    background: rgba(10, 126, 139, 0.30);
}
.demo-class-pill[data-tier="economy"] .demo-class-pendant-icon {
    color: #6b8a96;
}

.demo-class-pill[data-tier="business"] .demo-class-pendant-line {
    width: 34px;
    height: 2.5px;
    background: rgba(10, 57, 84, 0.45);
}
.demo-class-pill[data-tier="business"] .demo-class-pendant-icon {
    color: #4a6a80;
    width: 15px;
    height: 15px;
}

.demo-class-pill[data-tier="first"] .demo-class-pendant-line {
    width: 46px;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, #d4a04a 50%, transparent 100%);
    box-shadow: 0 0 6px rgba(212, 160, 74, 0.4);
}
.demo-class-pill[data-tier="first"] .demo-class-pendant-icon {
    color: #c1903f;
    width: 17px;
    height: 17px;
    filter: drop-shadow(0 1px 3px rgba(212, 160, 74, 0.45));
}

/* Hover: gentle lift on the box and pendant so the pill feels alive. */
.demo-class-pill:hover .demo-class-pill-inner {
    transform: translateY(-1px);
    border-color: #b9c6cf;
    background: #f9fbfc;
}

.demo-class-pill:hover .demo-class-pendant-icon {
    transform: translateY(-1px);
}

.demo-class-pill input:focus-visible ~ .demo-class-pill-inner {
    box-shadow: 0 0 0 4px rgba(10, 126, 139, 0.18);
}

.demo-fieldset.has-error .demo-class-pill-inner {
    border-color: #d03a3a;
}

/* --- Per-tier checked states: the "wow, that's my class" moment --- */

.demo-class-pill[data-tier="economy"] input:checked ~ .demo-class-pill-inner {
    background: linear-gradient(135deg, #0a7e8b 0%, #0b8fa0 100%);
    border-color: #0a7e8b;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(10, 126, 139, 0.35);
}

.demo-class-pill[data-tier="business"] input:checked ~ .demo-class-pill-inner {
    background: linear-gradient(135deg, #0a3954 0%, #13506e 100%);
    border-color: #0a3954;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(10, 57, 84, 0.42);
}

.demo-class-pill[data-tier="first"] input:checked ~ .demo-class-pill-inner {
    background: linear-gradient(135deg, #b78a3e 0%, #e0b966 55%, #c1903f 100%);
    border-color: #c1903f;
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(183, 138, 62, 0.5), 0 0 20px rgba(224, 185, 102, 0.45);
}

/* Selected pendant: brighter line + colorized, scaled-up icon. The
   sibling selector reaches the pendant because input, inner and
   pendant are direct children of the label. */
.demo-class-pill[data-tier="economy"] input:checked ~ .demo-class-pendant .demo-class-pendant-line {
    width: 34px;
    background: linear-gradient(90deg, transparent 0%, #0a7e8b 50%, transparent 100%);
    box-shadow: 0 0 8px rgba(10, 126, 139, 0.4);
}
.demo-class-pill[data-tier="economy"] input:checked ~ .demo-class-pendant .demo-class-pendant-icon {
    color: #0a7e8b;
    transform: translateY(1px) scale(1.12);
    filter: drop-shadow(0 2px 4px rgba(10, 126, 139, 0.35));
}

.demo-class-pill[data-tier="business"] input:checked ~ .demo-class-pendant .demo-class-pendant-line {
    width: 44px;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, #0a3954 50%, transparent 100%);
    box-shadow: 0 0 10px rgba(10, 57, 84, 0.48);
}
.demo-class-pill[data-tier="business"] input:checked ~ .demo-class-pendant .demo-class-pendant-icon {
    color: #0a3954;
    transform: translateY(1px) scale(1.16) rotate(0deg);
    filter: drop-shadow(0 2px 5px rgba(10, 57, 84, 0.42));
}

.demo-class-pill[data-tier="first"] input:checked ~ .demo-class-pendant .demo-class-pendant-line {
    width: 54px;
    height: 3.5px;
    background: linear-gradient(90deg, transparent 0%, #e0b966 25%, #b78a3e 50%, #e0b966 75%, transparent 100%);
    box-shadow: 0 0 14px rgba(224, 185, 102, 0.7);
}
.demo-class-pill[data-tier="first"] input:checked ~ .demo-class-pendant .demo-class-pendant-icon {
    color: #b78a3e;
    width: 20px;
    height: 20px;
    transform: translateY(1px) scale(1.15);
    filter: drop-shadow(0 3px 8px rgba(183, 138, 62, 0.55));
    animation: demoClassCrownPulse 2.4s ease-in-out infinite;
}

.demo-class-pill[data-tier="first"] input:checked ~ .demo-class-pendant .demo-class-pendant-halo {
    opacity: 1;
    animation: demoClassHaloPulse 2.4s ease-in-out infinite;
}

/* --- First-class sparkle sweep inside the pill body --- */

.demo-class-sparkle {
    position: absolute;
    top: 0;
    left: -40%;
    width: 40%;
    height: 100%;
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(255, 255, 255, 0) 35%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(255, 255, 255, 0) 65%,
        transparent 100%
    );
    pointer-events: none;
    opacity: 0;
    transform: translateX(0);
}

.demo-class-pill[data-tier="first"] input:checked ~ .demo-class-pill-inner .demo-class-sparkle {
    opacity: 1;
    animation: demoClassSparkleSlide 3.4s ease-in-out 0.2s infinite;
}

@keyframes demoClassSparkleSlide {
    0%   { transform: translateX(0); }
    55%  { transform: translateX(360%); }
    100% { transform: translateX(360%); }
}

@keyframes demoClassCrownPulse {
    0%, 100% {
        filter: drop-shadow(0 3px 8px rgba(183, 138, 62, 0.55));
        transform: translateY(1px) scale(1.15);
    }
    50% {
        filter: drop-shadow(0 5px 14px rgba(224, 185, 102, 0.9));
        transform: translateY(0) scale(1.22);
    }
}

@keyframes demoClassHaloPulse {
    0%, 100% { opacity: 0.55; transform: translate(-50%, 0) scale(0.9); }
    50%      { opacity: 1;    transform: translate(-50%, 0) scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
    .demo-class-pill-inner,
    .demo-class-pendant-line,
    .demo-class-pendant-icon,
    .demo-class-pendant-halo {
        transition: none;
    }
    .demo-class-pill[data-tier="first"] input:checked ~ .demo-class-pill-inner .demo-class-sparkle,
    .demo-class-pill[data-tier="first"] input:checked ~ .demo-class-pendant .demo-class-pendant-icon,
    .demo-class-pill[data-tier="first"] input:checked ~ .demo-class-pendant .demo-class-pendant-halo {
        animation: none;
    }
    .demo-class-pill[data-tier="first"] input:checked ~ .demo-class-pill-inner .demo-class-sparkle {
        opacity: 0;
    }
    .demo-class-pill[data-tier="first"] input:checked ~ .demo-class-pendant .demo-class-pendant-halo {
        opacity: 0.7;
    }
}

/* ---------- Loyalty row ---------- */

.demo-loyalty-row {
    display: grid;
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr);
    gap: 14px;
}

/* ---------- Checkbox (shared: oneWay + optIn) ---------- */

.demo-checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    font-size: 14px;
    color: #0a3954;
    padding: 4px 0;
}

.demo-checkbox input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.demo-checkbox-box {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 1.5px solid #c5cfd6;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    transition: all 0.2s ease;
}

.demo-checkbox-box svg {
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.demo-checkbox:hover .demo-checkbox-box {
    border-color: #0a7e8b;
}

.demo-checkbox input:focus-visible + .demo-checkbox-box {
    box-shadow: 0 0 0 4px rgba(10, 126, 139, 0.18);
}

.demo-checkbox input:checked + .demo-checkbox-box {
    background: #0a7e8b;
    border-color: #0a7e8b;
}

.demo-checkbox input:checked + .demo-checkbox-box svg {
    opacity: 1;
    transform: scale(1);
}

.demo-checkbox-label {
    line-height: 1.4;
}

/* Persistent opt-in row */
.demo-optin {
    margin-top: 18px;
    padding: 14px 16px;
    background: #f9fbfc;
    border: 1px dashed #cfe4e8;
    border-radius: 12px;
    font-weight: 500;
}

.demo-optin .demo-checkbox-label {
    color: #0a3954;
}

/* ---------- Step nav + buttons ---------- */

.demo-step-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding-top: 16px;
    border-top: 1px solid #eef1f3;
}

.demo-step-indicator {
    font-size: 12px;
    font-weight: 600;
    color: #94a3b3;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.demo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: 999px;
    padding: 13px 22px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
    white-space: nowrap;
}

.demo-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(10, 126, 139, 0.25);
}

.demo-btn-primary {
    background: #0a7e8b;
    color: #ffffff;
    box-shadow: 0 8px 22px rgba(10, 126, 139, 0.25);
}

.demo-btn-primary:hover {
    background: #096b76;
    box-shadow: 0 10px 26px rgba(10, 126, 139, 0.32);
}

.demo-btn-primary:active {
    transform: translateY(1px);
}

.demo-btn-ghost {
    background: transparent;
    color: #0a3954;
    border: 1.5px solid #dde3e8;
    padding: 11.5px 20px;
}

.demo-btn-ghost:hover {
    background: #f4f7f9;
    border-color: #0a7e8b;
    color: #0a7e8b;
}

/* ---------- Confirmation step ---------- */

.demo-confirmation {
    align-items: center;
    text-align: center;
    padding: 12px 0 4px;
    gap: 14px;
}

.demo-confirmation-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0a7e8b, #096b76);
    color: #ffffff;
    box-shadow: 0 14px 30px rgba(10, 126, 139, 0.35);
    margin-bottom: 4px;
    animation: demoCheckPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes demoCheckPop {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.demo-confirmation-title {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    color: #0a3954;
    letter-spacing: -0.01em;
}

.demo-confirmation-lede {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: #5a7285;
    max-width: 440px;
}

.demo-confirmation-phone {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 26px;
    margin-top: 6px;
    background: #f9fbfc;
    border: 2px solid #cfe4e8;
    border-radius: 16px;
    color: #0a7e8b;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.demo-confirmation-phone:hover {
    background: #ffffff;
    border-color: #0a7e8b;
    transform: translateY(-1px);
}

.demo-confirmation-hours {
    margin: 0;
    font-size: 12px;
    color: #94a3b3;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.demo-confirmation-meta {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 10px;
    padding: 18px 24px;
    background: #f4f7f9;
    border-radius: 12px;
    width: 100%;
    align-self: stretch;
    box-sizing: border-box;
}

.demo-confirmation-meta-row {
    display: flex;
    justify-content: center;
    gap: 36px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e3eaef;
}

.demo-confirmation-meta-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

/* "First time? Try asking about:" hints block inside the meta card --- */
.demo-confirmation-hints {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.demo-confirmation-hints-label {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #0a7e8b;
    text-align: left;
}

.demo-confirmation-hints-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 24px;
}

.demo-confirmation-hints-list li {
    position: relative;
    padding-left: 18px;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    color: #0a3954;
    line-height: 1.45;
    text-align: left;
}

.demo-confirmation-hints-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #0a7e8b;
}

.demo-confirmation-meta-label {
    font-size: 11px;
    color: #94a3b3;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
}

.demo-confirmation-meta-value {
    font-size: 13px;
    color: #0a3954;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.demo-btn-restart {
    margin-top: 0;
}

.demo-confirmation-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

.demo-btn-view-trip {
    text-decoration: none;
}

.demo-confirmation-all-trips {
    display: inline-block;
    margin-top: 12px;
    color: #0a7e8b;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(10, 126, 139, 0.35);
    padding-bottom: 1px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.demo-confirmation-all-trips:hover,
.demo-confirmation-all-trips:focus-visible {
    color: #08616b;
    border-bottom-color: #08616b;
    outline: none;
}

/* ---------- Highlights strip below hero ---------- */

.demo-highlights {
    max-width: 1320px;
    margin: 0 auto;
    padding: 72px 80px 96px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    text-align: left;
}

.demo-highlight-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 28px;
    border: 1px solid #eaeef1;
    box-shadow: 0 4px 18px rgba(10, 57, 84, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.demo-highlight-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgba(10, 57, 84, 0.1);
}

.demo-highlight-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    margin-bottom: 16px;
}

.demo-highlight-icon-teal {
    background: rgba(10, 126, 139, 0.12);
    color: #0a7e8b;
}

.demo-highlight-icon-navy {
    background: rgba(10, 57, 84, 0.1);
    color: #0a3954;
}

.demo-highlight-icon-cream {
    background: #cfe4e8;
    color: #0a3954;
}

.demo-highlight-card h3 {
    margin: 0 0 6px 0;
    font-size: 18px;
    font-weight: 700;
    color: #0a3954;
}

.demo-highlight-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: #5a7285;
}

/* ---------- Hide the persistent opt-in on the confirmation step ---------- */

.demo-form:has(.demo-step-panel[data-step="4"].is-active) #optInRow {
    display: none;
}

/* ---------- Responsive ---------- */

/* Large tablet / small laptop */
@media (max-width: 1100px) {
    .demo-hero {
        padding: 60px 48px 72px;
    }

    .demo-hero-inner {
        gap: 48px;
    }

    .demo-highlights {
        padding: 56px 48px 72px;
    }
}

/* Tablet portrait / stack columns */
@media (max-width: 960px) {
    .demo-hero {
        padding: 56px 32px 60px;
    }

    .demo-hero-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }

    .demo-hero-copy {
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
    }

    .demo-form-card {
        padding: 30px 26px 24px;
    }

    .demo-hero-glow-cream {
        display: none;
    }

    .demo-highlights {
        padding: 48px 32px 64px;
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
}

/* Mobile */
@media (max-width: 640px) {
    .demo-hero {
        padding: 40px 20px 48px;
    }

    .demo-hero-inner {
        gap: 28px;
    }

    .demo-hero-glow-teal {
        width: 280px;
        height: 280px;
        top: -80px;
        left: -60px;
        opacity: 0.35;
    }

    .demo-hero-copy {
        text-align: center;
    }

    .demo-eyebrow {
        font-size: 11px;
        padding: 5px 12px;
        letter-spacing: 0.14em;
        margin-bottom: 16px;
    }

    .demo-hero-title {
        font-size: 34px;
        line-height: 1.08;
        letter-spacing: -0.025em;
        margin-bottom: 16px;
    }

    .demo-hero-accent::after {
        height: 6px;
        bottom: 3px;
        border-radius: 6px;
    }

    .demo-hero-lede {
        font-size: 15px;
        line-height: 1.55;
        margin: 0 auto 22px;
        max-width: 420px;
    }

    .demo-hero-bullets {
        max-width: 380px;
        margin: 0 auto 20px;
        gap: 10px;
        text-align: left;
    }

    .demo-hero-bullets li {
        font-size: 14px;
        gap: 12px;
    }

    .demo-hero-check {
        width: 22px;
        height: 22px;
    }

    .demo-hero-check svg {
        width: 13px;
        height: 13px;
    }

    .demo-hero-micro {
        font-size: 13px;
    }

    .demo-form-card {
        padding: 24px 20px 20px;
        border-radius: 20px;
    }

    .demo-form-card-header {
        margin-bottom: 18px;
    }

    .demo-form-title {
        font-size: 20px;
    }

    .demo-form-subtitle {
        font-size: 13px;
    }

    .demo-breadcrumb {
        margin-bottom: 22px;
    }

    .demo-breadcrumb-bubble {
        width: 30px;
        height: 30px;
        font-size: 13px;
    }

    .demo-breadcrumb-label {
        font-size: 10px;
    }

    .demo-breadcrumb-connector {
        min-width: 16px;
    }

    .demo-step-title {
        font-size: 17px;
    }

    .demo-step-subtitle {
        font-size: 12.5px;
    }

    .demo-field-row,
    .demo-loyalty-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .demo-phone-group {
        grid-template-columns: 88px minmax(0, 1fr);
    }

    .demo-radio-group {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .demo-radio-pill-inner {
        padding: 10px 10px;
    }

    .demo-class-group {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        margin-bottom: 12px;
    }

    .demo-class-pill-inner {
        padding: 10px 10px;
    }

    .demo-class-pendant {
        margin-top: 5px;
    }

    .demo-class-pill[data-tier="first"] .demo-class-pendant-line {
        width: 42px;
    }

    .demo-optin {
        padding: 12px 14px;
        font-size: 13.5px;
        margin-top: 14px;
    }

    .demo-step-nav {
        flex-wrap: wrap;
        gap: 10px;
    }

    .demo-step-indicator {
        order: -1;
        flex-basis: 100%;
        text-align: center;
    }

    .demo-btn {
        flex: 1 1 auto;
        justify-content: center;
        padding: 12px 18px;
        font-size: 14.5px;
    }

    .demo-btn-ghost {
        padding: 10.5px 16px;
    }

    /* Confirmation step */
    .demo-confirmation {
        gap: 12px;
    }

    .demo-confirmation-icon {
        width: 68px;
        height: 68px;
    }

    .demo-confirmation-icon svg {
        width: 36px;
        height: 36px;
    }

    .demo-confirmation-title {
        font-size: 24px;
    }

    .demo-confirmation-lede {
        font-size: 14px;
        line-height: 1.5;
    }

    .demo-confirmation-phone {
        font-size: 18px;
        padding: 14px 20px;
        gap: 10px;
    }

    .demo-confirmation-meta {
        gap: 14px;
        padding: 16px 18px;
        align-items: stretch;
    }

    .demo-confirmation-meta-row {
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }

    .demo-confirmation-hints-label {
        text-align: center;
    }

    .demo-confirmation-hints-list {
        grid-template-columns: 1fr;
    }

    .demo-confirmation-actions {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .demo-confirmation-actions .demo-btn {
        flex: 1 1 auto;
        width: 100%;
    }

    .demo-highlights {
        padding: 40px 20px 56px;
        gap: 14px;
    }

    .demo-highlight-card {
        padding: 22px 20px;
        border-radius: 16px;
    }

    .demo-highlight-icon {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        margin-bottom: 12px;
    }

    .demo-highlight-card h3 {
        font-size: 16px;
    }

    .demo-highlight-card p {
        font-size: 13.5px;
    }
}

/* Narrow mobile */
@media (max-width: 400px) {
    .demo-hero {
        padding: 32px 16px 40px;
    }

    .demo-hero-title {
        font-size: 30px;
    }

    /* Long accent words (e.g. "adventure") would otherwise force
       horizontal scroll on a 320px phone because the desktop rule
       sets nowrap. At this width the title is already 30px so a
       wrap reads fine. */
    .demo-hero-accent {
        white-space: normal;
    }

    .demo-hero-lede {
        font-size: 14px;
    }

    .demo-hero-bullets li {
        font-size: 13px;
    }

    .demo-form-card {
        padding: 20px 16px 16px;
        border-radius: 18px;
    }

    .demo-form-title {
        font-size: 19px;
    }

    .demo-breadcrumb {
        margin-bottom: 18px;
    }

    .demo-breadcrumb-label {
        display: none;
    }

    .demo-breadcrumb-bubble {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .demo-breadcrumb-connector {
        top: 0;
        min-width: 14px;
    }

    .demo-step-nav .demo-btn {
        flex: 1 1 100%;
    }

    .demo-phone-group {
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 6px;
    }

    .demo-confirmation-phone {
        font-size: 17px;
        padding: 12px 18px;
    }

    .demo-highlights {
        padding: 32px 16px 48px;
    }

    .demo-highlight-card {
        padding: 20px 18px;
    }
}

/* ====================================================================
   myTrip.html  (.mt-*)  -- unified trip + profile page
   Builds on the existing .ct-* (current trip) and .profile-* palettes.
   ==================================================================== */

.mt-page {
    padding: 28px 40px 56px;
}

.mt-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 32px;
    align-items: start;
}

.mt-bookings-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.mt-sidebar-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Booking cards (extend .ct-card) */
.mt-booking-card .ct-card-header {
    position: relative;
}

.mt-booking-card .ct-card-header h3 {
    flex: 1;
}

.mt-card-tag {
    margin-left: auto;
}

.mt-card-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid transparent;
    color: #94a3b3;
    cursor: pointer;
    transition: all .2s;
}

.mt-card-remove:hover {
    color: #c0392b;
    border-color: #f3c8c2;
    background: #fdf1ee;
}

/* Empty state inside a booking card */
.mt-empty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 4px 4px;
}

.mt-empty-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mt-empty-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: #0a3954;
}

.mt-empty-sub {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #6a7a87;
    max-width: 52ch;
}

.mt-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #0a3954, #0a7e8b);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(10,126,139,.25);
    transition: transform .15s ease, box-shadow .2s ease;
    white-space: nowrap;
}

.mt-add-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(10,126,139,.35);
}

.mt-add-btn svg {
    stroke: currentColor;
}

/* Generic booking detail rows inside filled-state bodies */
.mt-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px 20px;
    margin-top: 12px;
}

.mt-detail-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mt-detail-label {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #94a3b3;
}

.mt-detail-value {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #0a3954;
}

.mt-booking-title {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #0a3954;
    margin: 0 0 4px;
}

.mt-booking-sub {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #6a7a87;
    margin: 0;
}

.mt-booking-price {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    margin-top: 14px;
    padding: 8px 14px;
    border-radius: 10px;
    background: #f0fafb;
    color: #0a7e8b;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 14px;
}

.mt-booking-price small {
    font-size: 11px;
    font-weight: 600;
    color: #6a7a87;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* Return flight divider */
.mt-flight-leg-divider {
    height: 1px;
    background: #e8ecf0;
    margin: 18px 0;
}

.mt-flight-leg-label {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #0a7e8b;
    margin: 0 0 12px;
}

/* Leg header: leg label + flight number on the left, cabin badge on the right. */
.mt-flight-leg-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px;
    flex-wrap: wrap;
}

.mt-flight-leg-header .mt-flight-leg-label {
    margin: 0;
}

.mt-flight-leg-num {
    font-family: 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    color: #0a3954;
    margin-left: 4px;
    text-transform: none;
}

/* Cabin class pill -- sleek, tier-aware. Inspired by .car-class-chip and
   .fl-class-label but leaner and glossy so it earns its place next to
   the Outbound / Return label without stealing focus from the card. */
.mt-cabin-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    border: 1px solid transparent;
    line-height: 1;
    white-space: nowrap;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mt-cabin-badge:hover {
    transform: translateY(-1px);
}

.mt-cabin-badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mt-cabin-badge[data-tier="economy"] {
    background: linear-gradient(135deg, #e6f2f3, #cfe7ea);
    color: #0a3954;
    border-color: rgba(10, 126, 139, 0.25);
}

.mt-cabin-badge[data-tier="premium"] {
    background: linear-gradient(135deg, #b9d9dd, #7bb3bb);
    color: #0a3954;
    border-color: rgba(10, 57, 84, 0.25);
    box-shadow: 0 2px 6px rgba(10, 126, 139, 0.18);
}

.mt-cabin-badge[data-tier="business"] {
    background: linear-gradient(135deg, #26627c 0%, #377790 100%);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 3px 8px rgba(38, 98, 124, 0.3);
}

.mt-cabin-badge[data-tier="first"] {
    background: linear-gradient(135deg, #2db0bc 0%, #e8cc85 20%, #f4d78a 100%);
    color: #0a3954;
    border-color: #d4b668;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.45),
        0 3px 10px rgba(212, 182, 104, 0.3);
}

/* Sidebar profile-like cards (inherit .profile-card / .ct-*; hooks reserved for future tweaks) */

.mt-countdown-card {
    padding: 22px 24px;
}

/* Header tweaks for the empty (no-trip) state */
@media (max-width: 1024px) {
    .mt-grid {
        grid-template-columns: 1fr;
    }

    .mt-page {
        padding: 24px 24px 48px;
    }
}

@media (max-width: 640px) {
    .mt-page {
        padding: 20px 16px 40px;
    }

    .mt-empty {
        flex-direction: column;
        align-items: flex-start;
    }

    .mt-add-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ====================================================================
   myTrip page visual refresh
   - Warm gradient hero
   - Color-coded booking-card accent bars + tinted headers
   - Colored sidebar card borders
   - Gold/teal rewards card with Apply-points UI
   - Paid banner
   - Trip Summary CTA + hint
   ==================================================================== */

/* Hero header -- teal / blue / white palette -------------------------- */
.mt-page-header {
    position: relative;
    background: linear-gradient(135deg, #0a3954 0%, #0a7e8b 48%, #d7eef1 100%);
    padding: 28px 40px 26px;
    overflow: hidden;
    border-bottom: none;
}

.mt-page-header::before,
.mt-page-header::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
    opacity: .55;
}

.mt-page-header::before {
    width: 360px;
    height: 360px;
    top: -160px;
    right: -80px;
    background: rgba(255, 255, 255, .45);
}

.mt-page-header::after {
    width: 320px;
    height: 320px;
    bottom: -180px;
    left: -60px;
    background: rgba(127, 200, 207, .7);
}

.mt-page-header .ct-header-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.mt-page-header .ct-header-text {
    display: flex;
    align-items: center;
}

.mt-header-eyebrow {
    display: inline-flex;
    align-items: center;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #0a3954;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .95);
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: 0 2px 10px rgba(10, 38, 60, .15);
}

.mt-page-header .ct-header-meta span {
    background: rgba(255, 255, 255, .95);
    color: #0a3954;
    border: 1px solid rgba(255, 255, 255, .9);
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(10, 38, 60, .12);
}

.mt-page-header .ct-header-meta svg {
    stroke: #0a7e8b !important;
}

/* Frontdoor trip page: split "Your trip to / {destination}" heading */
.fd-trip-heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}
/* Specificity note: the upstream `.ct-header-text h1` rule (near the
   top of this file) hard-codes color:#0a3954, and its specificity
   (0,1,1) would otherwise win over a single-class selector. We match
   on both classes + element so our white color sticks on the frontdoor
   trip page. */
.ct-header-text h1.fd-trip-destination {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: clamp(28px, 3.2vw, 40px);
    letter-spacing: -0.01em;
    color: #ffffff;
    line-height: 1.1;
    text-shadow: 0 2px 14px rgba(10, 38, 60, .25);
}

/* Frontdoor trip page: persistent "Call Journeaze" sidebar card */
.fd-call-card {
    background: linear-gradient(135deg, #ffffff 0%, #f3fafb 100%);
    border: 1px solid #e2ecef;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 2px 12px rgba(10, 57, 84, .06);
}
.fd-call-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #0a7e8b;
}
.fd-call-copy {
    margin: 0;
    color: #42546a;
    font-size: 14px;
    line-height: 1.5;
}
.fd-call-phone {
    align-self: center;
    font-size: 18px;
    padding: 12px 20px;
    /* Keep the 1-800 text on a single line even in cramped sidebars
       so the pill doesn't break awkwardly mid-number. */
    white-space: nowrap;
}
.fd-call-hours {
    margin-top: -2px;
}

/* Split Call / WhatsApp contact ------------------------------------- */
/* Phone number shown as a clear call-out; user-selectable so it can be
   copied straight into a dialpad or into WhatsApp. */
.fd-contact-number {
    align-self: center;
    margin-top: 2px;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: .02em;
    color: #0a3954;
    user-select: all;
    white-space: nowrap;
}

.fd-contact-split {
    position: relative;
    align-self: center;
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 280px;
    margin-top: 2px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(10, 57, 84, .12);
}

.fd-contact-side {
    flex: 1 1 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    text-decoration: none;
    transition: background-color .2s ease, transform .15s ease;
}

.fd-contact-side svg {
    flex-shrink: 0;
}

/* Left half: brand teal (Call) */
.fd-contact-side--call {
    background-color: #0a7e8b;
}
.fd-contact-side--call:hover {
    background-color: #096b76;
}

/* Right half: WhatsApp green, deepened so white text/icon clears 4.5:1 */
.fd-contact-side--whatsapp {
    background-color: #0d8049;
}
.fd-contact-side--whatsapp:hover {
    background-color: #0b6b3d;
}

.fd-contact-side:active {
    transform: translateY(1px);
}

.fd-contact-side:focus-visible {
    outline: 3px solid #0a3954;
    outline-offset: -3px;
}

/* "/" divider sitting on the seam between the two halves */
.fd-contact-divider {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, .9);
    font-size: 22px;
    font-weight: 300;
    line-height: 1;
    pointer-events: none;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .fd-contact-side {
        transition: none;
    }
}

/* "Just added" toast (shown once after a per-mode checkout) ---------- */
.mt-added-banner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 1280px;
    margin: 0 auto 20px;
    padding: 14px 18px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--mt-added-from, #0a7e8b) 0%, var(--mt-added-to, #2e9aa4) 100%);
    color: #fff;
    box-shadow: 0 6px 18px rgba(10, 126, 139, .22);
    animation: mtAddedPop .32s cubic-bezier(.2,.9,.25,1.15);
}

/* The `hidden` HTML attribute would normally apply `display: none` via the
   UA stylesheet, but our explicit `display: flex` above overrides it. These
   selectors restore the hidden behavior with matching specificity. */
.mt-added-banner[hidden] {
    display: none !important;
}

@keyframes mtAddedPop {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.mt-added-banner[data-kind="flight"]  { --mt-added-from: #0a7e8b; --mt-added-to: #2e9aa4; }
.mt-added-banner[data-kind="hotel"]   { --mt-added-from: #1e3a6d; --mt-added-to: #3a5a8e; }
.mt-added-banner[data-kind="car"]     { --mt-added-from: #4a92b8; --mt-added-to: #78b5d4; }
.mt-added-banner[data-kind="train"]   { --mt-added-from: #37526e; --mt-added-to: #556c86; }
.mt-added-banner[data-kind="cruise"]  { --mt-added-from: #0a3954; --mt-added-to: #1f5f7a; }

.mt-added-banner-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mt-added-banner-icon svg {
    stroke: #fff;
}

.mt-added-banner-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
}

.mt-added-banner-text strong {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.mt-added-banner-text code {
    font-family: 'Inter', sans-serif;
    background: rgba(255, 255, 255, .18);
    padding: 1px 8px;
    border-radius: 6px;
    font-size: 13px;
}

/* Booking cards: top accent bar + colored header tint ----------------- */
.mt-booking-card {
    position: relative;
}

.mt-booking-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--mt-accent, #0a7e8b);
    z-index: 1;
}

.mt-booking-card[data-kind="flight"]  { --mt-accent: #0a7e8b; --mt-tint: #e6f5f7; }
.mt-booking-card[data-kind="hotel"]   { --mt-accent: #1e3a6d; --mt-tint: #e4e9f2; }
.mt-booking-card[data-kind="car"]     { --mt-accent: #5ba3c7; --mt-tint: #e6f0f7; }
.mt-booking-card[data-kind="train"]   { --mt-accent: #4a6278; --mt-tint: #e7edf3; }
.mt-booking-card[data-kind="cruise"]  { --mt-accent: #0a3954; --mt-tint: #e1e9f0; }

.mt-booking-card .ct-card-header {
    background: var(--mt-tint, #f9f8f5);
    border-bottom: 1px solid #edf1f4;
}

.mt-booking-card .ct-card-header svg {
    stroke: var(--mt-accent, #0a7e8b);
}

.mt-booking-card .mt-card-tag {
    background: var(--mt-accent, #0a7e8b);
    color: #fff;
}

/* Card footer stamp -- every filled booking gets a subtle confirmation
   strip at the bottom so the left column feels as substantial as the
   right sidebar. */
.mt-card-stamp {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px -24px -16px;
    padding: 12px 24px;
    background: linear-gradient(90deg, var(--mt-tint, #f7fafc) 0%, rgba(255, 255, 255, 0) 100%);
    border-top: 1px dashed rgba(10, 57, 84, .14);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #56707f;
}

.mt-card-stamp-seal {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--mt-accent, #0a7e8b);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mt-card-stamp-text {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

.mt-card-stamp-ref {
    color: #0a3954;
    font-weight: 700;
    letter-spacing: .02em;
}

.mt-card-stamp-date {
    color: #6a7a87;
}

.mt-card-stamp-status {
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--mt-accent, #0a7e8b);
    background: rgba(255, 255, 255, .7);
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid rgba(10, 57, 84, .1);
}


/* Sidebar card colored borders --------------------------------------- */
.mt-sidebar-col .profile-card {
    position: relative;
    border-left: 3px solid transparent;
    background: #fff;
    overflow: hidden;
}

.mt-sidebar-col .profile-card:nth-of-type(1) { border-left-color: #0a7e8b; } /* personal info */
.mt-sidebar-col .profile-card:nth-of-type(2) { border-left-color: #5c6bc0; } /* address */
.mt-sidebar-col .profile-card:nth-of-type(3) { border-left-color: #1f5f7a; } /* preferences */
/* Rewards card gets its own gradient, not a border */
.mt-sidebar-col .profile-rewards-card { border-left-color: transparent; }

.mt-sidebar-col .profile-card-header {
    background: linear-gradient(180deg, rgba(10, 126, 139, .04), transparent);
}

.mt-sidebar-col .profile-card:nth-of-type(2) .profile-card-header {
    background: linear-gradient(180deg, rgba(92, 107, 192, .06), transparent);
}

.mt-sidebar-col .profile-card:nth-of-type(3) .profile-card-header {
    background: linear-gradient(180deg, rgba(31, 95, 122, .05), transparent);
}

/* Rewards card ------------------------------------------------------- */
.mt-sidebar-col .profile-rewards-card {
    background: linear-gradient(145deg, #fff8e1 0%, #fff 35%, #e6f5f7 100%);
    border: 1px solid #f0e6cb;
    box-shadow: 0 6px 20px rgba(184, 136, 58, .08);
    position: relative;
}

.mt-sidebar-col .profile-rewards-card::after {
    content: '';
    position: absolute;
    right: -20px;
    top: -20px;
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, rgba(245, 166, 35, .18), transparent 70%);
    pointer-events: none;
}

.mt-sidebar-col .profile-rewards-card .profile-card-header {
    background: transparent;
}

.mt-sidebar-col .profile-rewards-card .profile-tier-badge {
    background: linear-gradient(135deg, #b8883a, #e7c26a);
    color: #fff;
    box-shadow: 0 2px 8px rgba(184, 136, 58, .3);
}

/* Apply-points UI inside the rewards card ---------------------------- */
.mt-rewards-apply {
    margin-top: 14px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, .7);
    border: 1px solid rgba(184, 136, 58, .25);
    border-radius: 12px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.mt-rewards-apply-label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #6a7a87;
    margin-bottom: 6px;
}

.mt-rewards-apply-row {
    display: flex;
    gap: 6px;
    align-items: stretch;
}

.mt-rewards-apply-input {
    flex: 1;
    min-width: 0;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #0a3954;
    background: #fff;
    border: 1.5px solid #e8ecf0;
    border-radius: 8px;
    padding: 8px 12px;
    transition: border-color .2s;
    -moz-appearance: textfield;
    appearance: textfield;
}

.mt-rewards-apply-input:focus {
    outline: none;
    border-color: #b8883a;
    box-shadow: 0 0 0 3px rgba(184, 136, 58, .15);
}

.mt-rewards-apply-input::-webkit-outer-spin-button,
.mt-rewards-apply-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.mt-rewards-apply-btn {
    background: linear-gradient(135deg, #b8883a, #e7c26a);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: transform .15s, box-shadow .2s;
}

.mt-rewards-apply-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(184, 136, 58, .35);
}

.mt-rewards-apply-clear {
    background: transparent;
    color: #94735c;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 8px 12px;
    border: 1.5px solid #e6d7a8;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.mt-rewards-apply-clear:hover {
    background: #fff4d6;
    color: #6d563f;
}

.mt-rewards-apply-hint {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #8b6f4a;
    margin: 8px 0 0;
}

/* Trip Summary + Checkout CTA ---------------------------------------- */
.mt-summary-card {
    background: linear-gradient(180deg, #fff 60%, #f7fafc 100%);
    border: 1px solid #e8ecf0;
    border-top: 3px solid #0a3954;
}

.mt-summary-rewards-row span:last-child {
    color: #0f7a4a;
    font-weight: 700;
}

.mt-checkout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 16px;
    padding: 14px 20px;
    background: linear-gradient(135deg, #0a3954, #0a7e8b);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .02em;
    cursor: pointer;
    transition: transform .15s, box-shadow .2s;
    box-shadow: 0 4px 14px rgba(10, 126, 139, .25);
}

.mt-checkout-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(10, 126, 139, .35);
}

.mt-checkout-btn:disabled {
    background: #94a3b3;
    cursor: not-allowed;
    box-shadow: none;
}

.mt-checkout-btn.is-paid {
    background: linear-gradient(135deg, #0f7a4a, #128a54);
    opacity: .92;
}

.mt-checkout-hint {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #6a7a87;
    margin: 8px 0 0;
    text-align: center;
}

/* Countdown card glow ------------------------------------------------ */
.ct-countdown-card {
    position: relative;
    overflow: hidden;
}

.ct-countdown-card::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(245, 166, 35, .22), transparent 65%);
    pointer-events: none;
}

/* ====================================================================
   Master trip checkout page (tripCheckout.html)
   ==================================================================== */

.tc-summary-card {
    position: sticky;
    top: 24px;
}

.tc-summary-dest {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 800;
    color: #0a3954;
    margin-top: 4px;
}

.tc-summary-range {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #6a7a87;
    margin-bottom: 14px;
}

.tc-summary-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid #edf1f4;
    border-bottom: 1px solid #edf1f4;
    margin-bottom: 16px;
}

.tc-item {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: 12px;
    align-items: center;
}

.tc-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}

.tc-item-icon-flight  { background: linear-gradient(135deg, #0a7e8b, #2e9aa4); }
.tc-item-icon-hotel   { background: linear-gradient(135deg, #1e3a6d, #3a5a8e); }
.tc-item-icon-car     { background: linear-gradient(135deg, #4a92b8, #78b5d4); }
.tc-item-icon-train   { background: linear-gradient(135deg, #37526e, #556c86); }
.tc-item-icon-cruise  { background: linear-gradient(135deg, #0a3954, #1f5f7a); }

.tc-item-text {
    min-width: 0;
}

.tc-item-title {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #0a3954;
    line-height: 1.2;
}

.tc-item-sub {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #6a7a87;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tc-item-price {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 800;
    color: #0a3954;
}

.tc-pay-btn {
    background: linear-gradient(135deg, #0a3954, #0a7e8b);
    font-size: 16px;
    padding: 16px 20px;
    box-shadow: 0 6px 18px rgba(10, 126, 139, .25);
}

.tc-pay-btn span {
    font-weight: 800;
    margin-left: 6px;
}

.tc-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    padding: 14px 0;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #6a7a87;
}

.tc-trust-row span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tc-trust-row svg {
    color: #0a7e8b;
    stroke: currentColor;
}

.co-field input.tc-invalid,
.co-field select.tc-invalid {
    border-color: #d9534f;
    box-shadow: 0 0 0 3px rgba(217, 83, 79, .12);
}

/* Success overlay after successful checkout --------------------------- */
.tc-success {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: radial-gradient(circle at 50% 40%, rgba(10, 126, 139, .55), rgba(10, 57, 84, .85) 70%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: tcSuccessFade .3s ease-out;
}

/* Same hidden-attribute restoration pattern as .mt-added-banner. Without
   this override the `display: flex` above would keep the overlay visible
   on page load, before the user presses Pay. */
.tc-success[hidden] {
    display: none !important;
}

@keyframes tcSuccessFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.tc-success-card {
    background: #fff;
    border-radius: 24px;
    padding: 40px 40px 32px;
    max-width: 440px;
    width: 100%;
    text-align: center;
    box-shadow: 0 24px 60px rgba(10, 38, 60, .35);
    animation: tcSuccessPop .45s cubic-bezier(.2, .9, .25, 1.15);
}

@keyframes tcSuccessPop {
    from { transform: translateY(14px) scale(.96); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}

.tc-success-burst {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    margin: 0 auto 18px;
    background: linear-gradient(135deg, #0f7a4a, #128a54);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(15, 122, 74, .35);
}

.tc-success-title {
    font-family: 'Inter', sans-serif;
    font-size: 26px;
    font-weight: 800;
    color: #0a3954;
    margin: 0 0 6px;
    letter-spacing: -0.01em;
}

.tc-success-sub {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #56707f;
    margin: 0 0 20px;
}

.tc-success-ref {
    background: linear-gradient(135deg, #0a3954, #0a7e8b);
    color: #fff;
    padding: 14px 20px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 16px;
}

.tc-success-ref span {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .78);
}

.tc-success-ref strong {
    font-family: 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .08em;
}

.tc-success-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

.tc-success-detail > div {
    background: #f5f8fa;
    border: 1px solid #e8ecf0;
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}

.tc-success-detail span {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #94a3b3;
}

.tc-success-detail strong {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #0a3954;
}

.tc-success-btn {
    width: 100%;
    background: linear-gradient(135deg, #0a3954, #0a7e8b);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 14px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .02em;
    cursor: pointer;
    transition: transform .15s, box-shadow .2s;
    box-shadow: 0 6px 16px rgba(10, 126, 139, .28);
}

.tc-success-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(10, 126, 139, .35);
}

body.tc-locked {
    overflow: hidden;
}

/* Responsive tweaks for new pieces ----------------------------------- */
@media (max-width: 640px) {
    .mt-page-header {
        padding: 32px 20px 28px;
    }

    .mt-paid-banner {
        margin-left: 16px;
        margin-right: 16px;
    }
}

/* ====================================================================
   Booking wizard listing pages (hotel / car / train / cruise).
   Slim shared primitives (.bk-*) plus category-unique layouts keyed off
   [data-kind] on <body>.
   ==================================================================== */

.bk-page {
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px 40px 56px;
}

.bk-page-header {
    padding: 28px 40px 14px;
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.bk-page-header-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bk-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #0a7e8b;
}

.bk-page-header h1 {
    font-family: 'Inter', sans-serif;
    font-size: 30px;
    font-weight: 800;
    color: #0a3954;
    margin: 0;
    letter-spacing: -0.01em;
}

.bk-page-header p {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #6a7a87;
    margin: 0;
    max-width: 52ch;
}

.bk-header-stats {
    display: flex;
    gap: 18px;
    padding: 10px 14px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e8ecf0;
    box-shadow: 0 2px 8px rgba(10,57,84,.04);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #6a7a87;
}

.bk-header-stat strong {
    display: block;
    color: #0a3954;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.1;
}

/* --- Slim search bar ------------------------------------------------ */

.bk-search-wrapper {
    max-width: 1280px;
    margin: 0 auto 24px;
    padding: 0 40px;
}

.bk-search-bar {
    background: #fff;
    border: 1px solid #e8ecf0;
    border-radius: 14px;
    padding: 6px;
    display: flex;
    align-items: stretch;
    gap: 0;
    box-shadow: 0 2px 14px rgba(10,57,84,.05);
    overflow: visible;
}

.bk-field {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8px 14px;
    min-width: 0;
    position: relative;
    border-right: 1px solid #eef2f5;
}

.bk-field:last-of-type {
    border-right: none;
}

.bk-field label {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #94a3b3;
    margin-bottom: 2px;
}

.bk-field input,
.bk-field select {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #0a3954;
    background: transparent;
    border: none;
    padding: 2px 0;
    width: 100%;
    min-width: 0;
}

.bk-field input:focus,
.bk-field select:focus {
    outline: none;
}

.bk-field input::placeholder {
    color: #c0ccd6;
    font-weight: 500;
}

.bk-field.has-focus,
.bk-field:focus-within {
    background: #f7fafc;
    border-radius: 10px;
}

/* Autocomplete dropdown anchoring inside a slim field */
.bk-field .autocomplete-dropdown {
    top: calc(100% + 4px);
    border-radius: 10px;
    font-size: 14px;
    max-height: 280px;
}

/* Frontdoor read-only search bar: compact, teal-accented date pills
   used on frontdoorRentalCars.html where the user cannot edit the
   dates -- they always mirror the booked flight. */
.bk-search-bar.fd-readonly-bar {
    max-width: 560px;
    margin: 0 auto;
    padding: 8px;
    gap: 8px;
    align-items: stretch;
}
.fd-readonly-bar .bk-field {
    flex: 1 1 0;
    padding: 10px 16px;
    background: #eef7f8;
    border: 1px solid #cfe4e8;
    border-right: 1px solid #cfe4e8;
    border-radius: 12px;
}
.fd-readonly-bar .bk-field label {
    color: #0a7e8b;
}
.fd-readonly-bar .bk-field input[disabled] {
    color: #0a3954;
    font-weight: 700;
    cursor: default;
    -webkit-text-fill-color: #0a3954;
    opacity: 1;
}

.bk-search-btn {
    background: linear-gradient(135deg, #0a3954, #0a7e8b);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 13px;
    padding: 0 22px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: transform .15s, box-shadow .2s;
    white-space: nowrap;
    margin-left: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    letter-spacing: .02em;
}

.bk-search-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(10,126,139,.3);
}

.bk-search-btn svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
}

/* --- Results header / empty state ---------------------------------- */

.bk-results-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin: 4px 0 18px;
    flex-wrap: wrap;
}

.bk-results-header h2 {
    font-family: 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: #0a3954;
    margin: 0;
    letter-spacing: -0.01em;
}

.bk-results-count {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #6a7a87;
}

.bk-filter-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.bk-chip {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #0a3954;
    background: #fff;
    border: 1px solid #e8ecf0;
    border-radius: 999px;
    padding: 6px 12px;
    cursor: pointer;
    transition: all .2s;
}

.bk-chip.is-active {
    background: #0a3954;
    color: #fff;
    border-color: #0a3954;
}

.bk-chip:hover:not(.is-active) {
    border-color: #0a7e8b;
    color: #0a7e8b;
}

.bk-empty-state {
    padding: 48px 20px;
    text-align: center;
    background: #fff;
    border: 1px dashed #dde3e8;
    border-radius: 16px;
    color: #6a7a87;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
}

/* ====================================================================
   HOTEL listings -- wide photo-style cards
   ==================================================================== */

body[data-kind="hotel"] .bk-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 24px;
}

.htl-card {
    background: #fff;
    border-radius: 18px;
    border: 1px solid #e8ecf0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform .22s ease, box-shadow .25s ease, border-color .2s;
}

.htl-card:hover {
    transform: translateY(-3px);
    border-color: #0a7e8b;
    box-shadow: 0 12px 30px rgba(10,57,84,.1);
}

.htl-photo {
    position: relative;
    height: 200px;
    background: linear-gradient(135deg, #0a3954, #0a7e8b);
    overflow: hidden;
}

.htl-photo::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.22), transparent 45%),
        radial-gradient(circle at 80% 70%, rgba(10,20,40,.35), transparent 55%);
}

.htl-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
    background-size: 40px 50px, 50px 40px;
    background-position: 50% 80%;
    mask-image: linear-gradient(to bottom, transparent 40%, #000 80%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 40%, #000 80%);
}

.htl-photo-mono {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 88px;
    color: rgba(255,255,255,.16);
    letter-spacing: .04em;
    text-transform: uppercase;
    z-index: 1;
}

.htl-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(255,255,255,.95);
    color: #0a7e8b;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 11px;
    padding: 5px 11px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .06em;
    z-index: 2;
}

.htl-photo-stars {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    gap: 2px;
    z-index: 2;
    background: rgba(10,57,84,.55);
    padding: 4px 8px;
    border-radius: 999px;
}

.htl-photo-stars svg {
    width: 12px;
    height: 12px;
    fill: #ffd166;
    stroke: #ffd166;
}

.htl-body {
    padding: 18px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.htl-name {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #0a3954;
    margin: 0;
    letter-spacing: -0.01em;
}

.htl-addr {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #6a7a87;
    margin: 0;
}

.htl-review {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #0a3954;
    margin-top: 2px;
}

.htl-review-score {
    background: #0a7e8b;
    color: #fff;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 12px;
}

.htl-amenities {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.htl-amenity {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #0a7e8b;
    background: #e6f5f7;
    padding: 3px 10px;
    border-radius: 999px;
}

.htl-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px dashed #eef2f5;
}

.htl-price {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.htl-price-value {
    font-family: 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: #0a3954;
}

.htl-price-unit {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: #6a7a87;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: 4px;
}

.htl-cta {
    background: linear-gradient(135deg, #0a3954, #0a7e8b);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 10px 18px;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: transform .15s, box-shadow .2s;
}

.htl-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(10,126,139,.3);
}

/* ====================================================================
   CAR listings -- compact 3-col vehicle tiles with class accent colors
   ==================================================================== */

body[data-kind="car"] .bk-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.car-tile {
    --accent: #0a7e8b;
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e8ecf0;
    padding: 20px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform .2s, box-shadow .25s, border-color .2s;
}

.car-tile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--accent);
}

.car-tile:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: 0 10px 24px rgba(10,57,84,.08);
}

.car-tile[data-class="Economy"]      { --accent: #5ba3c7; } /* Light blue */
.car-tile[data-class="Midsize"]      { --accent: #4a92b8; } /* Mid blue */
.car-tile[data-class="Midsize SUV"]  { --accent: #78b5d4; } /* Soft sky blue */
.car-tile[data-class="Luxury"]       { --accent: #1e3a6d; } /* Deep blue */
.car-tile[data-class="Minivan"]      { --accent: #3a6b96; } /* Slate blue */
.car-tile[data-class="Convertible"]  { --accent: #0a7e8b; } /* Journeaze teal */

.car-tile-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}

.car-class-chip {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, #fff);
    padding: 4px 10px;
    border-radius: 999px;
}

.car-vendor {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #94a3b3;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.car-model {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 800;
    color: #0a3954;
    margin: 4px 0 2px;
    letter-spacing: -0.01em;
}

.car-tile-silhouette {
    height: 60px;
    margin: 6px 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    opacity: .85;
}

.car-tile-silhouette svg {
    width: 120px;
    height: 50px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.car-specs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 10px 0;
    border-top: 1px solid #eef2f5;
    border-bottom: 1px solid #eef2f5;
    margin-bottom: 14px;
}

.car-spec {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: #6a7a87;
}

.car-spec strong {
    font-size: 14px;
    font-weight: 800;
    color: #0a3954;
    line-height: 1;
}

.car-spec svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.car-tile-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 10px;
}

.car-price-value {
    font-family: 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: #0a3954;
    line-height: 1;
}

.car-price-unit {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: #6a7a87;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: 2px;
    display: block;
}

.car-cta {
    background: var(--accent);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 9px 16px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: transform .15s, filter .15s;
}

.car-cta:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
}

/* ====================================================================
   TRAIN listings -- schedule/timeline full-width rows
   ==================================================================== */

body[data-kind="train"] .bk-results-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.trn-row {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e8ecf0;
    padding: 18px 24px;
    display: grid;
    grid-template-columns: 110px 1fr auto auto;
    gap: 24px;
    align-items: center;
    cursor: pointer;
    transition: transform .18s, box-shadow .22s, border-color .2s;
    position: relative;
}

.trn-row:hover {
    transform: translateY(-1px);
    border-color: #0a7e8b;
    box-shadow: 0 8px 22px rgba(10,57,84,.07);
}

.trn-operator {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.trn-operator-name {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 800;
    color: #0a3954;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.trn-operator-num {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: #6a7a87;
    font-weight: 600;
}

.trn-visual {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 16px;
    align-items: center;
    min-width: 0;
}

.trn-endpoint {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.trn-endpoint-time {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: #0a3954;
    letter-spacing: -0.01em;
    line-height: 1;
}

.trn-endpoint-city {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #6a7a87;
    font-weight: 600;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trn-track {
    position: relative;
    height: 28px;
    display: flex;
    align-items: center;
    min-width: 120px;
}

.trn-track-line {
    height: 2px;
    background: #cfd8de;
    background-image: repeating-linear-gradient(to right, #cfd8de 0 8px, transparent 8px 14px);
    flex: 1;
}

.trn-track-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #0a7e8b;
    flex-shrink: 0;
}

.trn-track-icon {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
    background: #fff;
    padding: 2px 8px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #0a7e8b;
    border: 1px solid #d7e4e8;
}

.trn-track-icon svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

.trn-class {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.trn-class-tag {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #0a7e8b;
    background: #e6f5f7;
    padding: 4px 10px;
    border-radius: 999px;
}

.trn-badge {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: #c08a2a;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.trn-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.trn-price-value {
    font-family: 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: #0a3954;
    line-height: 1;
}

.trn-price-unit {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    color: #6a7a87;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.trn-cta {
    background: linear-gradient(135deg, #0a3954, #0a7e8b);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 9px 18px;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    margin-top: 2px;
    transition: transform .15s, box-shadow .2s;
}

.trn-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(10,126,139,.3);
}

/* ====================================================================
   CRUISE listings -- wide feature cards with side itinerary strip
   ==================================================================== */

body[data-kind="cruise"] .bk-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(520px, 1fr));
    gap: 22px;
}

.crs-card {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #e8ecf0;
    overflow: hidden;
    display: grid;
    grid-template-columns: 190px 1fr;
    cursor: pointer;
    transition: transform .22s, box-shadow .25s, border-color .2s;
}

.crs-card:hover {
    transform: translateY(-3px);
    border-color: #0a7e8b;
    box-shadow: 0 14px 34px rgba(10,57,84,.1);
}

.crs-side {
    position: relative;
    background: linear-gradient(160deg, #0a3954 0%, #0a7e8b 60%, #7fc8cf 100%);
    padding: 22px 18px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

.crs-side::after {
    content: '';
    position: absolute;
    left: -12px;
    right: -12px;
    bottom: -18px;
    height: 36px;
    background: radial-gradient(ellipse at 50% 0%, transparent 0 12px, rgba(255,255,255,.25) 12px 16px, transparent 16px),
                radial-gradient(ellipse at 50% 8px, transparent 0 18px, rgba(255,255,255,.15) 18px 22px, transparent 22px);
    opacity: .6;
}

.crs-region-tag {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: rgba(255,255,255,.18);
    padding: 4px 10px;
    border-radius: 999px;
    align-self: flex-start;
}

.crs-nights-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 10px 0;
}

.crs-nights-num {
    font-family: 'Inter', sans-serif;
    font-size: 56px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
}

.crs-nights-label {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 700;
    opacity: .8;
    margin-top: 4px;
}

.crs-port-label {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .7;
}

.crs-port {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    margin-top: 2px;
    line-height: 1.2;
}

.crs-body {
    padding: 20px 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.crs-line {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #94a3b3;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.crs-title {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 800;
    color: #0a3954;
    margin: 0;
    letter-spacing: -0.01em;
}

.crs-ship {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #6a7a87;
    margin: 0;
}

.crs-badge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #c08a2a;
    background: #fff6e0;
    padding: 4px 10px;
    border-radius: 999px;
}

.crs-cabins {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

.crs-cabin {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #0a3954;
    background: #f2f6f9;
    padding: 4px 10px;
    border-radius: 6px;
}

.crs-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px dashed #e8ecf0;
    gap: 12px;
}

.crs-price-wrap {
    display: flex;
    flex-direction: column;
}

.crs-price-from {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: #94a3b3;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.crs-price-value {
    font-family: 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: #0a3954;
    line-height: 1;
}

.crs-price-unit {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: #6a7a87;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: 3px;
}

.crs-cta {
    background: linear-gradient(135deg, #0a3954, #0a7e8b);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 10px 18px;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: transform .15s, box-shadow .2s;
}

.crs-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(10,126,139,.3);
}

/* --- Responsive ----------------------------------------------------- */

@media (max-width: 960px) {
    .bk-search-bar {
        flex-wrap: wrap;
    }

    .bk-field {
        flex: 1 1 44%;
        border-right: none;
        border-bottom: 1px solid #eef2f5;
    }

    .bk-search-btn {
        flex: 1 1 100%;
        padding: 12px;
        margin-left: 0;
        margin-top: 6px;
        justify-content: center;
    }

    .bk-page-header,
    .bk-page,
    .bk-search-wrapper {
        padding-left: 24px;
        padding-right: 24px;
    }

    .trn-row {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .trn-price {
        align-items: flex-start;
    }

    .crs-card {
        grid-template-columns: 1fr;
    }

    .crs-side {
        flex-direction: row;
        align-items: center;
        padding: 16px 20px;
    }

    .crs-side::after { display: none; }

    .crs-nights-wrap { flex-direction: row; gap: 8px; margin: 0; }

    .crs-nights-num { font-size: 36px; }
}

@media (max-width: 560px) {
    .bk-field { flex: 1 1 100%; }

    body[data-kind="hotel"] .bk-results-grid,
    body[data-kind="cruise"] .bk-results-grid,
    body[data-kind="car"] .bk-results-grid {
        grid-template-columns: 1fr;
    }

    .bk-page-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Narrow-phone polish for hotels / cars pages. The base `.bk-*` ladder
   jumps 960 -> 560 with no stop in between; this tightens horizontal
   padding + overlarge type at <=480px so everything stays inside a
   320px viewport without feeling pinched. */
@media (max-width: 480px) {
    .bk-page-header,
    .bk-page,
    .bk-search-wrapper {
        padding-left: 16px;
        padding-right: 16px;
    }
    .bk-page-header h1 {
        font-size: 24px;
    }
    .bk-header-stats {
        padding: 10px 14px;
    }
    .htl-photo-mono {
        font-size: 64px;
    }
}

/* Empty profile value style (myTrip page) */
.profile-field-value.is-empty {
    min-height: 20px;
    display: inline-block;
}

/* =========================================================================
   Frontdoor API wiring: "Already Registered?" link, sign-in lookup modal,
   step 1 "account exists" callout, step 3 submit error banner, and the
   new trips-list page. Appended as a discrete block so it's easy to lift
   out later if the demo graduates to its own stylesheet.
   ========================================================================= */

/* ---------- Hero "Already Registered? Click here." button ---------- */

.demo-hero-link {
    background: transparent;
    border: none;
    color: #cfe4e8;
    font-weight: 600;
    font-size: inherit;
    font-family: inherit;
    padding: 0 0 1px;
    margin: 0;
    cursor: pointer;
    border-bottom: 1px solid rgba(207, 228, 232, 0.4);
    transition: color 0.2s ease, border-color 0.2s ease;
}

.demo-hero-link:hover,
.demo-hero-link:focus-visible {
    color: #f9f8f5;
    border-bottom-color: #f9f8f5;
    outline: none;
}

/* ---------- Step 1 "account exists" informational callout ---------- */

.demo-field-callout {
    position: relative;
    margin-top: 10px;
    padding: 12px 14px 12px 18px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(10, 126, 139, 0.08) 0%, rgba(62, 183, 195, 0.06) 100%);
    border: 1px solid rgba(10, 126, 139, 0.22);
    box-shadow: 0 6px 18px rgba(10, 126, 139, 0.08);
    color: #0f5a64;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    overflow: hidden;
}

/* Left accent bar */
.demo-field-callout::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #0a7e8b 0%, #3fb7c3 100%);
}

.demo-field-callout-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(10, 126, 139, 0.15);
    color: #0a7e8b;
    flex-shrink: 0;
}

.demo-field-callout-text {
    flex: 1 1 auto;
    line-height: 1.35;
    font-weight: 500;
}

.demo-field-callout-action {
    background: linear-gradient(135deg, #0a7e8b 0%, #0f9aa8 100%);
    color: #ffffff;
    border: none;
    padding: 7px 16px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 12px rgba(10, 126, 139, 0.25);
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.demo-field-callout-action:hover,
.demo-field-callout-action:focus-visible {
    background: linear-gradient(135deg, #08616b 0%, #0d8a96 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(10, 126, 139, 0.35);
    outline: none;
}

/* ---------- Step 3 submit-error banner ---------- */

.demo-submit-error {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(215, 69, 69, 0.08);
    border: 1px solid rgba(215, 69, 69, 0.3);
    color: #8a2727;
    font-size: 13px;
    font-weight: 600;
}

/* ---------- Busy button ---------- */

.demo-btn.is-busy {
    opacity: 0.75;
    cursor: progress;
}

/* ---------- Sign-in lookup modal ---------- */

.fd-lookup-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 33, 41, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 24px;
}

.fd-lookup-modal.is-open,
.fd-lookup-modal:not([hidden]) {
    display: flex;
}

.fd-lookup-card {
    position: relative;
    width: min(440px, 100%);
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(10, 30, 40, 0.35);
    padding: 32px 32px 28px;
    animation: fdLookupIn 0.22s ease-out both;
}

@keyframes fdLookupIn {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.fd-lookup-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: transparent;
    border: none;
    color: #6c7a7d;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    transition: background 0.15s ease, color 0.15s ease;
}

.fd-lookup-close:hover,
.fd-lookup-close:focus-visible {
    background: #f1f4f5;
    color: #0a7e8b;
    outline: none;
}

.fd-lookup-header {
    margin-bottom: 18px;
}

.fd-lookup-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #0a7e8b;
    margin-bottom: 6px;
}

.fd-lookup-title {
    font-size: 24px;
    font-weight: 700;
    color: #0f2129;
    margin: 0 0 6px;
    line-height: 1.2;
}

.fd-lookup-sub {
    color: #4f6067;
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
}

.fd-lookup-form .demo-field {
    margin-bottom: 12px;
}

.fd-lookup-message {
    margin: 0 0 14px;
    min-height: 18px;
    font-size: 13px;
    color: #4f6067;
}

.fd-lookup-message.is-error {
    color: #8a2727;
    font-weight: 600;
}

.fd-lookup-message.is-info {
    color: #0f5a64;
    font-weight: 500;
}

.fd-lookup-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.fd-lookup-actions .demo-btn {
    flex: 0 0 auto;
}

@media (max-width: 520px) {
    .fd-lookup-modal {
        padding: 16px;
    }
    .fd-lookup-card {
        padding: 26px 20px 20px;
    }
    .fd-lookup-title {
        font-size: 20px;
    }
    .fd-lookup-actions .demo-btn {
        flex: 1 1 auto;
    }
}

/* =========================================================================
   frontDoorTrips.html -- sleek list of a customer's trips
   ========================================================================= */

.fd-trips-page {
    background: linear-gradient(180deg, #f7f5ef 0%, #eef3f4 100%);
    min-height: calc(100vh - 84px);
    padding-bottom: 72px;
}

.fd-trips-hero {
    position: relative;
    background: radial-gradient(1000px 480px at 20% -10%, rgba(10, 126, 139, 0.22), transparent 60%),
                radial-gradient(1000px 480px at 110% 10%, rgba(245, 236, 214, 0.55), transparent 55%),
                linear-gradient(135deg, #0f2129 0%, #123644 60%, #0a7e8b 140%);
    color: #f9f8f5;
    overflow: hidden;
    padding: 72px 32px 88px;
}

.fd-trips-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.fd-trips-hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.55;
}

.fd-trips-hero-glow-teal {
    width: 380px;
    height: 380px;
    background: #3fb7c3;
    top: -80px;
    right: -60px;
}

.fd-trips-hero-glow-cream {
    width: 320px;
    height: 320px;
    background: #f3e7c7;
    bottom: -100px;
    left: -40px;
    opacity: 0.32;
}

.fd-trips-hero-inner {
    position: relative;
    max-width: 1120px;
    margin: 0 auto;
    text-align: center;
}

.fd-trips-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #cfe4e8;
    margin-bottom: 12px;
}

.fd-trips-title {
    font-size: clamp(30px, 4vw, 44px);
    line-height: 1.1;
    font-weight: 700;
    margin: 0 0 10px;
}

.fd-trips-title-accent {
    background: linear-gradient(90deg, #f5ecd6 0%, #9ee4ed 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 800;
}

.fd-trips-subtitle {
    font-size: 16px;
    color: rgba(249, 248, 245, 0.78);
    max-width: 600px;
    margin: 0 auto;
}

.fd-trips-hero-actions {
    margin-top: 26px;
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* ---------- Exciting "Create a new trip" CTA ----------
   Gradient pill with a shine sweep, plane-like icon that tilts on
   hover, and a lift effect so the button feels like an invitation to
   adventure, not a dry form submit. */
.fd-trips-new-btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #0f2129;
    background: linear-gradient(135deg, #f5ecd6 0%, #9ee4ed 52%, #3fb7c3 100%);
    border: none;
    border-radius: 999px;
    cursor: pointer;
    box-shadow:
        0 10px 24px rgba(10, 126, 139, 0.35),
        0 2px 6px rgba(10, 30, 40, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.25s ease;
    isolation: isolate;
}

.fd-trips-new-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -40%;
    width: 40%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
    transform: skewX(-18deg);
    transition: left 0.6s ease;
    pointer-events: none;
    z-index: 1;
}

.fd-trips-new-btn:hover,
.fd-trips-new-btn:focus-visible {
    transform: translateY(-2px) scale(1.02);
    /* Lively sunset-to-sea gradient on hover: warm gold, rose, cyan,
       teal -- reads like "trip excitement" next to the cooler resting
       state. A matching warm ambient glow below the button makes the
       lift feel sun-lit. */
    background: linear-gradient(
        135deg,
        #ffe3a3 0%,
        #ffb3d1 38%,
        #8df0fa 72%,
        #17b6c5 100%
    );
    box-shadow:
        0 18px 40px rgba(255, 140, 170, 0.35),
        0 6px 16px rgba(10, 126, 139, 0.4),
        0 2px 6px rgba(10, 30, 40, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
    filter: saturate(1.15);
    outline: none;
}

.fd-trips-new-btn:hover::before,
.fd-trips-new-btn:focus-visible::before {
    left: 120%;
}

.fd-trips-new-btn:active {
    transform: translateY(-1px) scale(1);
    filter: saturate(1.02);
}

.fd-trips-new-btn svg {
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease, rotate 0.3s ease;
}

.fd-trips-new-btn:hover svg,
.fd-trips-new-btn:focus-visible svg {
    transform: rotate(90deg) scale(1.1);
}

/* Sparkle dot on the top-right of the button label */
.fd-trips-new-btn::after {
    content: '';
    position: absolute;
    top: 6px;
    right: 14px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
    opacity: 0;
    animation: fdSparkle 2.6s ease-in-out infinite;
    z-index: 3;
    pointer-events: none;
}

@keyframes fdSparkle {
    0%, 40%, 100% { opacity: 0; transform: scale(0.6); }
    50%           { opacity: 1; transform: scale(1); }
    60%           { opacity: 0; transform: scale(0.6); }
}

/* ---------- "All trips" back link on the single-trip page ---------- */

/* When the back-link is present, bump the header's top padding so the
   pill doesn't sit on top of the destination heading. Using :has()
   keeps the effect scoped to frontDoorTrip.html without touching the
   main-site myTrip page header. */
.mt-page-header:has(.fd-back-to-trips) {
    padding-top: 58px;
}

.fd-back-to-trips {
    position: absolute;
    top: 16px;
    left: 40px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #f9f8f5;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
    z-index: 2;
}

.fd-back-to-trips:hover,
.fd-back-to-trips:focus-visible {
    background: #f9f8f5;
    color: #0a3954;
    border-color: #f9f8f5;
    transform: translateX(-2px);
    outline: none;
}

.fd-back-to-trips svg {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.fd-back-to-trips:hover svg {
    transform: translateX(-2px);
}

@media (max-width: 720px) {
    .fd-back-to-trips {
        left: 16px;
        top: 12px;
    }
}

/* Two-column shell: sticky filter sidebar on the left, cards column on
   the right. The outer container owns the overall page width and the
   side padding; both columns fill their share of the gap. */
.fd-trips-layout {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 32px;
    max-width: 1200px;
    margin: -48px auto 0;
    padding: 0 32px;
    position: relative;
    z-index: 1;
}

.fd-trips-results {
    min-width: 0;
    position: relative;
}

/* Cards column fills the right grid track naturally -- no fixed
   percentages anymore, the sidebar + layout gap handle centering. */
.fd-trips-grid {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
    min-width: 0;
}

.fd-trip-card {
    position: relative;
    background: #ffffff;
    border-radius: 20px;
    /* Slimmer vertical padding than horizontal so the right-column
       inclusions / confirmation / cta have room to breathe within the
       fixed card height instead of crowding the middle. */
    padding: 14px 26px;
    box-shadow: 0 10px 30px rgba(15, 33, 41, 0.08), 0 2px 6px rgba(15, 33, 41, 0.04);
    border: 1px solid rgba(15, 33, 41, 0.06);
    cursor: pointer;
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) 1fr auto;
    grid-template-rows: 1fr;
    align-items: center;
    gap: 24px;
    overflow: hidden;
    /* Taller card gives the right-column inclusions chips real vertical
       headroom so they don't collide with the Depart / Return strip in
       the middle column. */
    min-height: 148px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.fd-trip-card:hover,
.fd-trip-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px rgba(15, 33, 41, 0.14), 0 4px 12px rgba(10, 126, 139, 0.12);
    border-color: rgba(10, 126, 139, 0.28);
    outline: none;
}

.fd-trip-card-glow {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(10, 126, 139, 0.18), transparent 70%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.fd-trip-card:hover .fd-trip-card-glow,
.fd-trip-card:focus-visible .fd-trip-card-glow {
    opacity: 1;
}

.fd-trip-card-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.fd-trip-card-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #0a7e8b;
}

.fd-trip-card-dest {
    font-size: 22px;
    font-weight: 700;
    color: #0f2129;
    margin: 0;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fd-trip-card-route {
    font-size: 13px;
    color: #6c7a7d;
    margin: 2px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Date strip: a soft grey band that holds two uniform "ticket stub"
   chips (Depart / Return) separated by a centered arrow. Each chip
   has its own white background, consistent padding, and a fixed min
   width so the two sides always look balanced regardless of how long
   either formatted date happens to be. */
.fd-trip-card-dates {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: 10px;
    background: #f5f8f8;
    border-radius: 14px;
    padding: 8px;
    justify-self: stretch;
}

.fd-trip-date-chip {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    min-width: 120px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(15, 33, 41, 0.05);
    text-align: center;
}

.fd-trip-date-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #0a7e8b;
    line-height: 1;
}

.fd-trip-date-value {
    font-size: 14px;
    font-weight: 700;
    color: #0f2129;
    line-height: 1.2;
    white-space: nowrap;
}

.fd-trip-date-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0a7e8b;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 33, 41, 0.08);
    align-self: center;
    flex-shrink: 0;
}

.fd-trip-card-inclusions {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.fd-trip-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #6c7a7d;
    background: #f1f4f5;
    border: 1px solid transparent;
}

.fd-trip-chip.is-on {
    color: #0a7e8b;
    background: rgba(10, 126, 139, 0.10);
    border-color: rgba(10, 126, 139, 0.28);
}

.fd-trip-chip svg {
    flex-shrink: 0;
}

/* Stretch the right column to the card's full inner height and push
   inclusions to the top / meta (confirmation + CTA) to the bottom.
   `align-self: stretch` overrides the grid's `align-items: center` so
   the column actually spans top-to-bottom padding rather than hugging
   its own content height in the middle. */
.fd-trip-card-foot {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    align-self: stretch;
    gap: 8px;
    min-width: 0;
    padding: 2px 0;
}

.fd-trip-card-foot-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Trash icon on each trip card. Kept muted by default so it doesn't
   compete with the "View trip" CTA; only warms to red on hover so the
   destructive intent is unmistakable at the moment of interaction. */
.fd-trip-card-delete {
    border: none;
    background: transparent;
    color: #6c7a7d;
    padding: 4px 6px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.fd-trip-card-delete svg {
    flex-shrink: 0;
}

.fd-trip-card-delete:hover,
.fd-trip-card-delete:focus-visible {
    background: rgba(138, 39, 39, 0.1);
    color: #8a2727;
    transform: translateY(-1px);
    outline: none;
}

.fd-trip-card-conf {
    font-family: "SF Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: #6c7a7d;
    white-space: nowrap;
}

.fd-trip-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #0a7e8b;
    font-weight: 700;
    font-size: 13px;
    transition: gap 0.2s ease;
    white-space: nowrap;
}

.fd-trip-card:hover .fd-trip-card-cta,
.fd-trip-card:focus-visible .fd-trip-card-cta {
    gap: 10px;
}

/* Loading skeletons: match the production card's width + height */
.fd-trips-loading {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
    min-width: 0;
}

/* Restore the [hidden] default (display: none). Our explicit
   display: flex rules above would otherwise paint every state on top
   of each other -- the loading skeletons used to keep showing above
   the rendered trip cards because the UA's [hidden] rule was losing
   the specificity race. */
.fd-trips-grid[hidden],
.fd-trips-loading[hidden],
.fd-trips-empty[hidden],
.fd-trips-error[hidden],
.fd-trips-more[hidden],
.fd-trips-filter-group[hidden],
.fd-trip-card-inclusions[hidden],
.fd-trip-chip[hidden] {
    display: none !important;
}

#mtHeaderMetaNights {
    display: none !important;
}

.fd-trips-more {
    width: 100%;
    min-width: 0;
    margin: 16px 0 0;
    text-align: center;
    color: #6c7a7d;
    font-size: 12px;
    letter-spacing: 0.02em;
}

@media (max-width: 820px) {
    .fd-trips-more {
        width: 100%;
        min-width: 0;
    }
}

.fd-trip-skeleton {
    height: 148px;
    border-radius: 20px;
    background: linear-gradient(90deg, #eef2f3 0%, #f8fafb 50%, #eef2f3 100%);
    background-size: 200% 100%;
    animation: fdSkel 1.4s ease-in-out infinite;
}

@keyframes fdSkel {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* Empty + error states */
.fd-trips-empty,
.fd-trips-error {
    background: #ffffff;
    border-radius: 22px;
    padding: 48px 32px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(15, 33, 41, 0.06);
    border: 1px solid rgba(15, 33, 41, 0.06);
    max-width: 560px;
    margin: 0 auto;
}

.fd-trips-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(10, 126, 139, 0.10);
    color: #0a7e8b;
    margin-bottom: 16px;
}

.fd-trips-empty h2 {
    font-size: 22px;
    font-weight: 700;
    color: #0f2129;
    margin: 0 0 8px;
}

.fd-trips-empty p {
    color: #4f6067;
    margin: 0 0 20px;
}

.fd-trips-error-text {
    color: #8a2727;
    font-weight: 600;
    margin: 0 0 14px;
}

@media (max-width: 820px) {
    .fd-trips-hero {
        padding: 56px 20px 72px;
    }
    /* Single-column layout: sidebar becomes a slim top strip above the
       cards so filters stay reachable without eating vertical room. */
    .fd-trips-layout {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 0 20px;
    }
    .fd-trips-filters-sticky {
        position: static;
    }
    .fd-trip-card {
        grid-template-columns: 1fr;
        align-items: flex-start;
        min-height: 0;
        gap: 16px;
        padding: 20px 22px;
    }
    .fd-trip-card-dates {
        justify-self: stretch;
    }
    .fd-trip-card-inclusions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .fd-trip-card-foot {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }
    .fd-trip-card-foot-meta {
        width: 100%;
        justify-content: space-between;
    }
    .fd-trip-skeleton {
        height: 148px;
    }
}

/* Tighten the Depart / Return strip below ~520px so both chips stay
   legible even on a 320px phone. Without this, the desktop
   `.fd-trip-date-chip { min-width: 120px }` plus arrow would force the
   pair to 288px wide and clip inside the card interior. */
@media (max-width: 520px) {
    .fd-trip-card-dates {
        gap: 6px;
        padding: 6px;
    }
    .fd-trip-date-chip {
        min-width: 0;
        padding: 6px 8px;
    }
    .fd-trip-date-value {
        font-size: 13px;
    }
    .fd-trip-date-arrow {
        width: 22px;
        height: 22px;
    }
}

/* =========================================================================
   Trips list: filter sidebar + card hover polish
   ========================================================================= */

.fd-trips-filters {
    min-width: 0;
}

/* Sticky so filters stay reachable as the user scrolls through a long
   list of trips. Falls back to static positioning inside the 820px
   media query so the top-strip variant doesn't stick to the viewport. */
.fd-trips-filters-sticky {
    position: sticky;
    top: 20px;
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid rgba(15, 33, 41, 0.06);
    box-shadow: 0 10px 30px rgba(15, 33, 41, 0.06), 0 2px 6px rgba(15, 33, 41, 0.03);
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.fd-trips-filters-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #0a7e8b;
}

.fd-trips-filters-title svg {
    flex-shrink: 0;
}

.fd-trips-filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px dashed rgba(15, 33, 41, 0.08);
}

.fd-trips-filter-group:first-of-type {
    padding-top: 0;
    border-top: none;
}

.fd-trips-filter-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #6c7a7d;
}

.fd-trips-filter-chips {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fd-trips-chip {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(10, 126, 139, 0.28);
    background: #ffffff;
    color: #0a7e8b;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.15s ease,
        box-shadow 0.2s ease;
}

.fd-trips-chip svg {
    flex-shrink: 0;
}

.fd-trips-chip:hover,
.fd-trips-chip:focus-visible {
    border-color: #0a7e8b;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(10, 126, 139, 0.12);
    outline: none;
}

.fd-trips-chip.is-active {
    background: linear-gradient(135deg, #0a7e8b 0%, #3fb7c3 100%);
    color: #ffffff;
    border-color: transparent;
    box-shadow:
        0 6px 14px rgba(10, 126, 139, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.fd-trips-chip.is-active:hover,
.fd-trips-chip.is-active:focus-visible {
    transform: translateY(-1px);
    box-shadow:
        0 10px 20px rgba(10, 126, 139, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.fd-trips-filter-reset {
    align-self: flex-start;
    padding: 6px 10px;
    border: none;
    background: transparent;
    color: #6c7a7d;
    font-size: 12px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color 0.2s ease;
}

.fd-trips-filter-reset:hover,
.fd-trips-filter-reset:focus-visible {
    color: #0a7e8b;
    outline: none;
}

/* ---------- Sub-820 vertical card variant ----------
   The old horizontal-strip variant cramped on phones because two chip
   groups + title + reset button had to share one row. Instead, keep
   the sidebar vertically stacked even when it drops above the cards:
   the title sits on top, each group presents its label-over-chips
   row, and the reset button docks below. Chip rows go horizontal-wrap
   here (desktop is a full-width column of chips in the narrow 232px
   sidebar). */
@media (max-width: 820px) {
    .fd-trips-filters-sticky {
        padding: 16px 18px;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }
    .fd-trips-filters-title {
        align-self: flex-start;
    }
    .fd-trips-filter-group {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding-top: 12px;
    }
    .fd-trips-filter-group:first-of-type {
        padding-top: 0;
    }
    .fd-trips-filter-chips {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }
    .fd-trips-chip {
        flex: 0 0 auto;
    }
    .fd-trips-filter-reset {
        align-self: flex-start;
        margin-left: 0;
    }
}

/* ---------- Sub-480 tighten ----------
   Narrower phones get a tad less padding and slightly smaller chips so
   the filter card reads compact rather than towering over the first
   trip card. */
@media (max-width: 480px) {
    .fd-trips-filters-sticky {
        padding: 14px 14px;
        gap: 12px;
    }
    .fd-trips-chip {
        padding: 7px 10px;
        font-size: 12px;
    }
    .fd-trips-filter-chips {
        gap: 6px;
    }
}

/* ---------- Card hover glow-up ----------
   Layer a teal accent bar + gradient headline + chip saturation on top
   of the existing lift. All effects stay a notch below the "Create a
   new trip" sparkle button so the visual hierarchy is preserved. */
.fd-trip-card::after {
    content: '';
    position: absolute;
    left: 0;
    top: 10%;
    bottom: 10%;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, #0a7e8b 0%, #3fb7c3 100%);
    transform: scaleY(0);
    transform-origin: center;
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.25s ease;
    pointer-events: none;
    z-index: 1;
}

.fd-trip-card:hover::after,
.fd-trip-card:focus-visible::after {
    transform: scaleY(1);
    opacity: 1;
}

.fd-trip-card .fd-trip-card-dest {
    background-image: linear-gradient(90deg, #0f2129 0%, #0f2129 100%);
    -webkit-background-clip: text;
    background-clip: text;
    transition: background-image 0.25s ease;
}

.fd-trip-card:hover .fd-trip-card-dest,
.fd-trip-card:focus-visible .fd-trip-card-dest {
    background-image: linear-gradient(90deg, #0a7e8b 0%, #3fb7c3 100%);
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.fd-trip-card:hover .fd-trip-chip.is-on,
.fd-trip-card:focus-visible .fd-trip-chip.is-on {
    filter: saturate(1.12);
}

.fd-trip-card:hover .fd-trip-card-cta svg,
.fd-trip-card:focus-visible .fd-trip-card-cta svg {
    transform: translateX(2px);
    transition: transform 0.2s ease;
}

/* ---------- Hero polish: gentle drifting glows + name shimmer ---------- */

.fd-trips-hero-glow-teal {
    animation: fdHeroDriftTeal 42s ease-in-out infinite alternate;
}

.fd-trips-hero-glow-cream {
    animation: fdHeroDriftCream 54s ease-in-out infinite alternate;
}

@keyframes fdHeroDriftTeal {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(-30px, 18px) scale(1.08); }
}

@keyframes fdHeroDriftCream {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(22px, -16px) scale(1.05); }
}

.fd-trips-title-accent {
    background-size: 200% 100%;
    animation: fdAccentShift 9s ease-in-out infinite alternate;
}

@keyframes fdAccentShift {
    from { background-position: 0% 50%; }
    to   { background-position: 100% 50%; }
}

/* =========================================================================
   Profile modal: alerts panel + upgraded "current trip" hero
   ========================================================================= */

/* ---------- Menu cosmetics (data-menu attributes) ---------- */

.menu-item[data-menu] {
    transition: background 0.15s ease;
}
.menu-item[data-menu]:hover {
    background: #f5f8f8;
}

/* ---------- Alerts panel ---------- */

.modal-alerts {
    margin: 4px 0 8px;
    padding: 6px;
    background: linear-gradient(135deg, rgba(10, 126, 139, 0.06) 0%, rgba(62, 183, 195, 0.04) 100%);
    border: 1px solid rgba(10, 126, 139, 0.14);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    animation: fdAlertsIn 0.2s ease-out;
}

/* Explicit [hidden] override -- without this, the display: flex rule
   above would beat the UA's [hidden]{display:none} on specificity and
   leave an empty panel visible when collapsed. */
.modal-alerts[hidden] {
    display: none !important;
}

@keyframes fdAlertsIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.modal-alert {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding: 7px 9px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(15, 33, 41, 0.04);
}

.modal-alert-dot {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0a7e8b 0%, #3fb7c3 100%);
    margin-top: 5px;
    box-shadow: 0 0 0 2px rgba(10, 126, 139, 0.12);
}

.modal-alert-body-wrap {
    flex: 1;
    min-width: 0;
}

.modal-alert-title {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0a7e8b;
    margin-bottom: 2px;
}

.modal-alert-body {
    font-size: 11px;
    line-height: 1.4;
    color: #3c5157;
    margin: 0;
}

/* ---------- Upgraded current-trip hero (frontdoor modal only) ---------- */

/* Scope to the upgraded markup via :has(.current-trip-media). The legacy
   .current-trip layout used elsewhere on the site is untouched.
   Light cream-to-cyan pastel palette reads as "postcard excitement"
   instead of the previous dark-navy technical look. */
.current-trip:has(.current-trip-media) {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    /* Site-aligned teal/cyan water gradient: brand teal at the leading
       corner, fading to a breezy aqua on the right. Stays in the
       Journeaze palette while still reading as its own distinct hero. */
    background: linear-gradient(135deg, #eaf6f7 0%, #cfe9ec 38%, #a7e6ec 78%, #7fdae2 100%);
    border: 1px solid rgba(10, 126, 139, 0.2);
    border-radius: 14px;
    box-shadow:
        0 10px 28px rgba(10, 126, 139, 0.22),
        0 4px 10px rgba(10, 126, 139, 0.15);
    padding: 10px 14px 10px 10px;
    height: 96px;
    overflow: hidden;
    color: #0f2129;
    cursor: pointer;
    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.35s ease;
    isolation: isolate;
}

/* Subtle diagonal shine band that sweeps across the card on hover.
   Kept fully inside the `:has(...)` scope so the legacy card is
   unaffected. */
.current-trip:has(.current-trip-media)::before {
    content: '';
    position: absolute;
    top: 0;
    left: -45%;
    width: 45%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100%);
    transform: skewX(-18deg);
    transition: left 0.7s ease;
    pointer-events: none;
    z-index: 2;
}

.current-trip:has(.current-trip-media):hover,
.current-trip:has(.current-trip-media):focus-within {
    transform: translateY(-2px);
    /* Hover deepens the teal family -- brighter cyan through mid-teal
       for a "diving into clear water" feel while staying on-brand. */
    background: linear-gradient(135deg, #d9f4f7 0%, #a7e6ec 38%, #4bd0dc 78%, #17b6c5 100%);
    box-shadow:
        0 16px 36px rgba(10, 126, 139, 0.3),
        0 6px 14px rgba(10, 126, 139, 0.22);
}

.current-trip:has(.current-trip-media):hover::before,
.current-trip:has(.current-trip-media):focus-within::before {
    left: 120%;
}

.current-trip-media {
    position: relative;
    flex-shrink: 0;
    width: 80px;
    height: 76px;
    border-radius: 10px;
    overflow: hidden;
}

.current-trip-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.current-trip:has(.current-trip-media):hover .current-trip-media img {
    transform: scale(1.05);
}

.current-trip-scrim {
    position: absolute;
    inset: 0;
    /* Gentle warm-white scrim so the photo reads bright and inviting
       instead of darkened. */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 65%);
    pointer-events: none;
}

.current-trip-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 7px;
    background: #ffffff;
    color: #0a7e8b;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(10, 30, 40, 0.18);
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.current-trip-badge svg {
    flex-shrink: 0;
}

.current-trip:has(.current-trip-media) .trip-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
}

.current-trip:has(.current-trip-media) .trip-info-eyebrow {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #0a7e8b;
    line-height: 1.1;
}

.current-trip:has(.current-trip-media) .trip-info h4 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: #0f2129;
    margin: 0;
    line-height: 1.2;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.current-trip:has(.current-trip-media) .trip-info p {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 11px;
    color: #3c5157;
    margin: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.current-trip:has(.current-trip-media) .trip-info-countdown {
    display: inline-flex;
    align-self: center;
    margin-top: 2px;
    padding: 2px 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #ffffff;
    /* Brand-teal gradient pill to sit confidently on the light aqua
       background without re-introducing the warm peach palette. */
    background: linear-gradient(135deg, #0a7e8b 0%, #3fb7c3 100%);
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(10, 126, 139, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.current-trip:has(.current-trip-media):hover .trip-info-countdown,
.current-trip:has(.current-trip-media):focus-within .trip-info-countdown {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(10, 126, 139, 0.45);
}

.current-trip:has(.current-trip-media) .trip-arrow {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0a7e8b 0%, #3fb7c3 100%);
    border: none;
    color: #ffffff;
    font-size: 15px;
    box-shadow: 0 2px 8px rgba(10, 126, 139, 0.35);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.current-trip:has(.current-trip-media):hover .trip-arrow,
.current-trip:has(.current-trip-media):focus-within .trip-arrow {
    background: linear-gradient(135deg, #3fb7c3 0%, #8fe2ec 100%);
    transform: translateX(3px);
    box-shadow: 0 6px 14px rgba(10, 126, 139, 0.42);
}

/* Narrow-phone shrink: the profile modal collapses to ~280px wide on
   480px viewports, which leaves only ~82px for the text column in the
   hero. These overrides tighten every interior dimension so the image,
   headline, subtitle, countdown chip, and arrow all coexist without
   clipping. `:has()` has higher specificity than legacy `.current-trip`
   rules, so we must repeat the same selector here. */
@media (max-width: 480px) {
    .current-trip:has(.current-trip-media) {
        height: 86px;
        padding: 8px 10px 8px 8px;
        gap: 10px;
    }
    .current-trip:has(.current-trip-media) .current-trip-media {
        width: 64px;
        height: 62px;
    }
    .current-trip:has(.current-trip-media) .trip-info h4 {
        font-size: 14px;
    }
    .current-trip:has(.current-trip-media) .trip-info p {
        font-size: 10px;
    }
    .current-trip:has(.current-trip-media) .trip-info-countdown {
        font-size: 9px;
        padding: 2px 6px;
    }
    .current-trip:has(.current-trip-media) .trip-arrow {
        width: 28px;
        height: 28px;
        font-size: 13px;
    }
}