/**
 * Trip Tabs CSS
 * Direct CSS for tab styling - bypasses SCSS compilation
 * Following design system rules from PosturePress3
 */

 /* Trip content container */
.container{
    max-width: 1800px;
}

/* Trip Content */
.trip-content {
    width: 1360px;
    max-width: 2500px;
    max-width: none !important;
    max-height: 100%;
    margin-top: 57px !important;
    margin-left: 55px !important;
    margin: 0 auto;
    padding: 20px;
    font-family: var(--body-font-family, 'Montserrat'), sans-serif;
}

@media screen and (min-width: 2500px) and (max-width: 2599px) {
    .trip-content {
        width: 73.66%;
        margin-left: 255px !important;
    }
}

@media screen and (min-width: 2400px) and (max-width: 2499px) {
    .trip-content {
        width: 73.66%;
        margin-left: 255px !important;
    }
}

@media screen and (min-width: 2300px) and (max-width: 2399px) {
    .trip-content {
        width: 73.66%;
        margin-left: 255px !important;
    }
}

@media screen and (min-width: 2200px) and (max-width: 2299px) {
    .trip-content {
        width: 73.66%;
        margin-left: 255px !important;
    }
}

@media screen and (min-width: 2100px) and (max-width: 2199px) {
    .trip-content {
        width: 65.66%;
        margin-left: 365px !important;
    }
}


@media screen and (min-width: 2000px) and (max-width: 2099px) {
    .trip-content {
        width: 73.66%;
        margin-left: 255px !important;
    }
}

@media screen and (min-width: 1900px) and (max-width: 1999px) {
    .trip-content {
        width: 73.66%;
        margin-left: 255px !important;
    }
}

@media screen and (min-width: 1831px) and (max-width: 1899px) {
    .trip-content {
        width: 75%;
        margin-left: 245px !important;
    }
}

@media screen and (min-width: 1800px) and (max-width: 1830px) {
    .trip-content {
        width: 78.55%;
        margin-left: 193px !important;
    }
}

@media screen and (min-width: 1732px) and (max-width: 1799px) {
    .trip-content {
        width: 81.99%;
        margin-left: 157px !important;
    }
}

@media screen and (min-width: 1700px) and (max-width: 1731px) {
    .trip-content {
        width: 83.66%;
        margin-left: 142px !important;
    }
}

@media screen and (min-width: 1600px) and (max-width: 1699px) {
    .trip-content {
        width: 88%;
        margin-left: 100px !important;
    }
}

@media screen and (min-width: 1500px) and (max-width: 1599px) {
    .trip-content {
        width: 93.66% !important;
        margin-left: 45px !important;
    }
}

@media screen and (min-width: 1450px) and (max-width: 1499px) {
    .trip-content {
        width: 94.5% !important;
        margin-left: 42px !important;
    }
}

@media screen and (min-width: 1400px) and (max-width: 1449px) {
    .trip-content {
        width: 94%;
        margin-left: 44px !important;
    }
}

@media screen and (min-width: 1350px) and (max-width: 1399px) {
    .trip-content {
        width: 94.5% !important;
        margin-left: 42px !important;
    }
}

@media screen and (min-width: 1300px) and (max-width: 1349px) {
    .trip-content {
        width: 95.5% !important;
        margin-left: 35px !important;
    }
}

@media screen and (min-width: 1281px) and (max-width: 1299px) {
    .trip-content {
        width: 93.7%;
        margin-left: 43px !important;
    }
}

@media screen and (min-width: 1261px) and (max-width: 1280px) {
    .trip-content {
        width: 84.3%;
        margin-left: 172px !important;
    }
}

@media screen and (min-width: 1250px) and (max-width: 1260px) {
    .trip-content {
        width: 84.3%;
        margin-left: 172px !important;
    }
}

@media screen and (min-width: 1200px) and (max-width: 1249px) {
    .trip-content {
        width: 85%;
        margin-left: 164px !important;
    }
}

@media screen and (min-width: 1150px) and (max-width: 1199px) {
    .trip-content {
        width: 85%;
        margin-left: 155px !important;
    }
}

@media screen and (min-width: 1100px) and (max-width: 1149px) {
    .trip-content {
        width: 85%;
        margin-left: 155px !important;
    }
}

@media screen and (min-width: 1050px) and (max-width: 1099px) {
    .trip-content {
        width: 85%;
        margin-left: 156px !important;
    }
}

@media screen and (min-width: 1000px) and (max-width: 1049px) {
    .trip-content {
        width: 86%;
        margin-left: 142px !important;
    }
}

@media (max-width: 999px) {
    .trip-content {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 20px;
    }
}

@media (max-width: 950px) {
    .trip-content {
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 20px;
    }
}

@media (max-width: 899px) {
    .trip-content {
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 20px;
    }
}

@media (max-width: 768px) {
    .trip-content {
        width: 100%;
        margin-top: 30px !important;
        margin-left: 0 !important;
        padding: 15px;
    }
}

@media (max-width: 480px) {
    .trip-content {
        margin-top: 20px !important;
        padding: 10px;
    }
}

/* Tab navigation */
.trip-tabs-nav {
    margin-bottom: 0;
    position: relative;
    z-index: 2;
}

@media (max-width: 768px) {
    .trip-tabs-nav {
        margin-bottom: 15px;
    }
}

/* Tabs list */
.tabs-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (max-width: 768px) {
    .tabs-list {
        flex-wrap: wrap;
        gap: 5px;
    }
}

/* Tab item */
.tab-item {
    margin: 0;
    margin-right: 4px;
}

@media (max-width: 768px) {
    .tab-item {
        margin-right: 0;
        flex: 1;
        min-width: calc(50% - 2.5px);
    }
}

/* Tab button */
.tab-button {
    background: var(--color-blue-300, #82a2b5);
    border: none;
    padding: 18px 30px;
    cursor: pointer;
    font-size: 28px;
    font-weight: 600;
    color: var(--color-text, #000000);
    border-radius: 12px 12px 0 0;
    margin-bottom: 0;
    position: relative;
    top: 2px;
    transition: all 0.3s ease;
}

@media (max-width: 768px) {
    .tab-button {
        padding: 12px 15px;
        font-size: 14px;
        border-radius: 8px;
        top: 0;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .tab-button {
        padding: 10px 12px;
        font-size: 12px;
    }
}

.tab-button:hover {
    background: var(--color-blue-200, #5d8ba6);
    color: white;
}

.tab-button.active {
    background: white;
    color: var(--color-blue-100, #1d475a);
    border: 2px solid var(--color-blue-100, #1d475a);
    border-bottom: 0px solid white;
    position: relative;
    z-index: 1;
    font-weight: 700;
}

@media (max-width: 768px) {
    .tab-button.active {
        border-bottom: 2px solid var(--color-blue-100, #1d475a);
    }
}

/* Tab container wrapper */
.trip-tabs-content {
    border: 2px solid var(--color-blue-100, #1d475a);
    border-radius: 0 12px 12px 12px;
    background: white;
    position: relative;
    z-index: 1;
}

@media (min-width: 1200px) and (max-width: 1280px) {
    .trip-tabs-content {
        margin-left: -141px;
    }
}

@media (min-width: 1100px) and (max-width: 1199px) {
    .trip-tabs-content {
        margin-left: -142px;
    }
}

@media (min-width: 1000px) and (max-width: 1099px) {
    .trip-tabs-content {
        margin-left: -142px;
    }
}

@media (max-width: 999px) {
    .trip-tabs-content {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .trip-tabs-content {
        border-radius: 8px;
    }
}

/* Tab content panels */
.tab-panel {
    background: white;
    padding: 30px;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    width: 100%;
}

@media (max-width: 768px) {
    .tab-panel {
        padding: 20px;
        min-height: 200px;
    }
}

@media (max-width: 480px) {
    .tab-panel {
        padding: 15px;
    }
}

.tab-panel:not(.active) {
    display: none !important;
}

.tab-panel.active {
    display: flex !important;
}

/* Trip details tab content */
.trip-details-tab-content {
    width: 100%;
    margin-top: 47px;
}

/* Trip details layout */
.trip-details-layout {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    gap: 30px;
    width: 100%;
}

@media (max-width: 769px) {
    .trip-details-layout {
        flex-direction: column !important;
        gap: 20px;
    }
}

/* Trip includes section */
.trip-includes-section {
    flex: 1 1 60% !important;
    min-width: 300px;
    align-self: flex-start;
}

@media (max-width: 769px) {
    .trip-includes-section {
        width: 100%;
        min-width: auto;
    }
}

/* Trip visual section */
.trip-visual-section {
    flex: 1 1 67% !important;
    min-width: 315px;
    display: flex !important;
    justify-content: flex-end !important;
    align-self: flex-start;

}

@media (max-width: 769px) {
    .trip-visual-section {
        width: 100%;
        min-width: auto;
        margin-top: 20px;
        justify-content: center !important;
    }
}

@media (max-width: 467px) {
    .trip-visual-section {
        margin-top: -124px;
    }
}

/* Trip inclusions list */
.trip-inclusions-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.trip-inclusions-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
    font-size: 16px;
    font-family: var(--body-font-family, 'Montserrat'), sans-serif;
}

@media (max-width: 768px) {
    .trip-inclusions-list li {
        font-size: 14px;
        padding-left: 25px;
        margin-bottom: 12px;
    }
}

.trip-inclusions-list li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-blue-100, #1d475a);
    font-weight: bold;
}

/* Trip details image container */
.trip-details-image-container {
    margin-top: 1px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    max-width: 100%;
}

@media (max-width: 768px) {
    .trip-details-image-container {
    }
}

@media (max-width: 480px) {
    .trip-details-image-container {
        margin-top: 15px;
        margin-left: -15px;
        margin-right: -15px;
        border-radius: 8px;
        overflow: visible;
    }
}

/* Trip details image */
.trip-details-img {
    width: 100%;
    height: auto;
    display: block;
}

/* Travel guide pill desktop */
.travel-guide-pill-desktop {
    position: absolute;
    top: 12%;
    right: 0px;
    transform: translateY(-50%);
    background: var(--color-blue-100, #1d475a);
    color: white;
    padding: 14px 78px;
    border-radius: 20px 0 0 20px;
    font-size: 20px;
    font-weight: 600;
}

@media (max-width: 999px) {
    .travel-guide-pill-desktop {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .travel-guide-pill-desktop {
        display: block;
    }
}

/* Travel guide pill mobile */
.travel-guide-pill-mobile {
    position: relative;
    top: -17px;
    right: -368px;
    margin: 0 0 20px 0;
    border-radius: 20px;
    text-align: center;
    max-width: 100%;
    padding: 12px 20px;
    background: var(--color-blue-100, #1d475a);
    color: white;   
    font-size: 16px;
    font-weight: 600;
}

@media (min-width: 1000px) {
    .travel-guide-pill-mobile {
        display: none !important;
    }
}

@media screen and (min-width: 900px) and (max-width: 999px) {
    .travel-guide-pill-mobile {
        display: block !important;
        width: 51% !important;
        right: -375px;
        margin-bottom: 37px;
    }
}

@media screen and (min-width: 800px) and (max-width: 899px) {
    .travel-guide-pill-mobile {
        width: 55% !important;
        right: -311px;
        margin-bottom: 37px;
        font-size: 15px;
    }
}

@media screen and (min-width: 769px) and (max-width: 799px)  {
    .travel-guide-pill-mobile {
        width: 55% !important;
        right: -311px;
        margin-bottom: 37px;
        font-size: 15px;
        text-align: left;
    }
}

@media screen and (min-width: 700px) and (max-width: 768px) {
    .travel-guide-pill-mobile {
        position: static !important;
        top: auto;
        right: auto;
        width: 55% !important;
        right: -311px;
        margin-bottom: 37px;
        font-size: 15px;
    }
}

@media screen and (min-width: 660px) and (max-width: 699px) {

    .travel-guide-pill-mobile {
        width: 55% !important;
        margin-top: -10px !important;
        margin-bottom: 37px;
        right: -272px;
        font-size: 15px;
    }
}

@media screen and (min-width: 681px) and (max-width: 699px) { 
    .travel-guide-pill-mobile {
        width: 55% !important;
        margin-top: -10px !important;
        margin-bottom: 37px;
        right: -297px;
        font-size: 15px;
    }
}

@media screen and (min-width: 661px) and (max-width: 680px) {
    .travel-guide-pill-mobile {
        width: 55% !important;
        margin-top: -10px !important;
        margin-bottom: 37px;
        right: -297px;
        font-size: 15px;
    }
}

@media screen and (min-width: 631px) and (max-width: 660px) {
    .travel-guide-pill-mobile {
        width: 55% !important;
        margin-top: -10px !important;
        margin-bottom: 37px;
        right: -272px;
        font-size: 15px;
    }
}

@media screen and (min-width: 616px) and (max-width: 630px) {
    .travel-guide-pill-mobile {
        width: 55% !important;
        margin-top: -10px !important;
        margin-bottom: 37px;
        right: -262px;
        font-size: 15px;
    }
}

@media screen and (min-width: 600px) and (max-width: 615px) {
    .travel-guide-pill-mobile {
        width: 100% !important;
        margin-top: -10px !important;
        margin-bottom: 37px;
        right: 0px;
        font-size: 15px;
    }
}


@media screen and (min-width: 559px) and (max-width: 599px) {
    .travel-guide-pill-mobile {
        width: 51% !important;
        margin-top: -18px !important;
        margin-bottom: 64px;
        right: -220px;
    }
}

@media screen and (min-width: 500px) and (max-width: 558px) {
    .travel-guide-pill-mobile {
        width: 100% !important;
        margin-top: -18px !important;
        margin-bottom: 64px;
        right: 3px;
    }
}

@media screen and (min-width: 400px) and (max-width: 499px) {
    .travel-guide-pill-mobile {
        width: 100% !important;
        right: 3px;
        margin-bottom: 37px;
    }
}

@media screen and (min-width: 300px) and (max-width: 399px) {
    .travel-guide-pill-mobile {
        width: 100% !important;
        right: 3px;
        margin-bottom: 37px;
    }
}

/* Upgrade Package Pill Mobile */
.upgrade-package-pill-mobile {
    display: none; /* Hidden by default */
    background: var(--color-blue-100, #1d475a);
    color: white;
    padding: 14px 20px;
    border-radius: 20px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    margin: 20px 0;
    font-family: var(--body-font-family, 'Montserrat'), sans-serif;
}

/* Show on mobile/tablet devices (below 1000px) */
@media (max-width: 999px) {
    .upgrade-package-pill-mobile {
        display: block !important;
        width: 334px;
        margin-top: -49px;
        margin-bottom: 66px;
        padding: 14px 4px;
    }
}

@media (max-width: 899px) {
    .upgrade-package-pill-mobile {
        display: block !important;
        width: 286px;
        margin-top: -49px;
        margin-left: -29px;
        margin-bottom: 50px;
        padding: 14px 4px;
    }
}

@media (max-width: 768px){
    .upgrade-package-pill-mobile {
        display: none !important;

    }
}


/* Hide on desktop (1000px and above) */
@media (min-width: 1000px) {
    .upgrade-package-pill-mobile {
        display: none !important;
    }
}

/* Responsive adjustments for different screen sizes */
@media (max-width: 768px) {
    .upgrade-package-pill-mobile {
        font-size: 15px;
        padding: 12px 18px;
        margin: 15px 0;
    }
}

@media (max-width: 480px) {
    .upgrade-package-pill-mobile {
        font-size: 14px;
        padding: 10px 16px;
        margin: 10px 0;
    }
}

/* Guide label */
.guide-label {
    margin-right: 5px;
    font-weight: normal;
}

/* Get quote button */
.get-quote-button {
    display: inline-block;
    background: var(--color-blue-100, #1d475a);
    color: white;
    padding: 12px 25px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    margin-top: 20px;
    transition: all 0.3s ease;
}

@media (max-width: 768px) {
    .get-quote-button {
        padding: 10px 20px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .get-quote-button {
        padding: 8px 16px;
        font-size: 13px;
        width: 100%;
        text-align: center;
    }
}

.get-quote-button:hover {
    background: var(--color-blue-200, #5d8ba6);
}

/* Itinerary tab content */
.trip-itinerary-tab-content {
    padding: 20px 0;
}

@media (max-width: 768px) {
    .trip-itinerary-tab-content {
        padding: 15px 0;
    }
}

/* Itinerary day */
.itinerary-day {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-blue-100, #1d475a);
}

@media (max-width: 768px) {
    .itinerary-day {
        margin-bottom: 20px;
        padding-bottom: 15px;
    }
}

/* Day header */
.day-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

@media (max-width: 768px) {
    .day-header {
        margin-bottom: 12px;
    }
}

/* Day number */
.day-number {
    background: var(--color-blue-100, #1d475a);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-right: 15px;
    font-family: var(--header-font-family, 'Lexend Deca'), sans-serif;
}

@media (max-width: 768px) {
    .day-number {
        width: 35px;
        height: 35px;
        margin-right: 12px;
        font-size: 14px;
    }
}

/* Day title */
.day-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    font-family: var(--header-font-family, 'Lexend Deca'), sans-serif;
    color: var(--color-blue-100, #1d475a);
}

@media (max-width: 768px) {
    .day-title {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .day-title {
        font-size: 16px;
    }
}

/* Pricing tab content */
.trip-pricing-tab-content {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

@media (max-width: 769px) {
    .trip-pricing-tab-content {
        flex-direction: column;
        gap: 20px;
    }
}

/* Pricing options */
.pricing-options {
    flex: 1 1 60%;
    min-width: 300px;
}

@media (max-width: 768px) {
    .pricing-options {
        flex: 1 1 100%;
        min-width: auto;
    }
}

/* Pricing table */
.pricing-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--body-font-family, 'Montserrat'), sans-serif;
}

@media (max-width: 768px) {
    .pricing-table {
        font-size: 14px;
    }
}

.pricing-table th, 
.pricing-table td {
    padding: 15px;
    border: 1px solid var(--color-blue-100, #1d475a);
    text-align: left;
}

@media (max-width: 768px) {
    .pricing-table th, 
    .pricing-table td {
        padding: 12px;
    }
}

@media (max-width: 480px) {
    .pricing-table th, 
    .pricing-table td {
        padding: 8px;
        font-size: 12px;
    }
}

.pricing-table th {
    background-color: var(--color-blue-100, #1d475a);
    color: white;
    font-weight: 600;
    font-family: var(--header-font-family, 'Lexend Deca'), sans-serif;
}

/* Pricing notes */
.pricing-notes {
    flex: 1 1 30%;
    min-width: 250px;
    font-family: var(--body-font-family, 'Montserrat'), sans-serif;
}

@media (max-width: 768px) {
    .pricing-notes {
        flex: 1 1 100%;
        margin-top: -40px;
        min-width: auto;
    }
}

/* Upgrade package section */
.trip-pricing-tab-content .upgrade-package-section {
    width: 100%;
    color: var(--color-white);
    padding: var(--spacing-xl);
    border-radius: 12px;
    margin-left: -17px;
    margin-top: -136px; 
}

@media screen and (max-width: 2599px) {
    .trip-pricing-tab-content .upgrade-package-section {
        margin-top: -22px !important;
        margin-left: 249px !important;
    }
}

@media screen and (max-width: 2499px) {
    .trip-pricing-tab-content .upgrade-package-section {
        margin-top: -22px !important;
        margin-left: 274px !important;
    }
}

@media screen and (max-width: 2399px) {
    .trip-pricing-tab-content .upgrade-package-section {
        margin-top: -22px !important;
        margin-left: 331px !important;
    }
}

@media screen and (max-width: 2299px) {
    .trip-pricing-tab-content .upgrade-package-section {
        margin-top: -22px !important;
        margin-left: 287px !important;
    }
}

@media screen and (max-width: 2199px) {
    .trip-pricing-tab-content .upgrade-package-section {
        margin-top: -22px !important;
        margin-left: 247px !important;
    }
}

@media (max-width: 1999px) {
    .trip-pricing-tab-content .upgrade-package-section {
        margin-top: -22px !important;
        margin-left: 118px !important;
    }
}

@media (max-width: 1899px) {
    .trip-pricing-tab-content .upgrade-package-section {
        margin-top: -22px !important;
        margin-left: 118px !important;
    }
}

@media (max-width: 1799px) {
    .trip-pricing-tab-content .upgrade-package-section {
        margin-top: -22px !important;
        margin-left: 140px !important;
    }
}

@media (max-width: 1721px) {
    .trip-pricing-tab-content .upgrade-package-section {
        margin-top: -22px !important;
        margin-left: 140px !important;
    }
}

@media (max-width: 1600px) {
    .trip-pricing-tab-content .upgrade-package-section {
        margin-top: 27px !important;
        margin-left: 124px !important;
    }
}

@media (max-width: 1400px) {
    .trip-pricing-tab-content .upgrade-package-section {
        margin-top: 27px !important;
        margin-left: 124px !important;
    }
}

@media (max-width: 1300px) {
    .trip-pricing-tab-content .upgrade-package-section {
        margin-top: 20px !important;
        margin-left: 97px !important;
    }
}

@media (max-width: 1299px) {
    .trip-pricing-tab-content .upgrade-package-section {
        margin-top: 20px !important;
        margin-left: 97px !important;
    }
}

@media (max-width: 1280px) {
    .trip-pricing-tab-content .upgrade-package-section {
        margin-top: 20px !important;
        margin-left: 55px !important;
    }
}

@media (max-width: 1270px) {
    .trip-pricing-tab-content .upgrade-package-section {
        margin-top: 20px !important;
        margin-left: 55px !important;
    }
}

@media (max-width: 1260px) {
    .trip-pricing-tab-content .upgrade-package-section {
        margin-top: 20px !important;
        margin-left: 55px !important;
    }
}

@media (max-width: 1249px) {
    .trip-pricing-tab-content .upgrade-package-section {
        margin-top: 20px !important;
        margin-left: 46px !important;
    }
}

@media (max-width: 1220px) {
    .trip-pricing-tab-content .upgrade-package-section {
        margin-top: 20px !important;
        margin-left: 46px !important;
    }
}

@media (max-width: 1100px) {
    .trip-pricing-tab-content .upgrade-package-section {
        margin-top: 20px !important;
        margin-left: 22px !important;
    }
}

@media (max-width: 1099px){
    .trip-pricing-tab-content .upgrade-package-section {
        margin-top: 20px !important;
        margin-left: -6px !important;
    }
}

@media (max-width: 1050px){
    .trip-pricing-tab-content .upgrade-package-section {
        margin-top: 20px !important;
        margin-left: 19px !important;
    }
}

@media (min-width: 900px) and (max-width: 999px) {
    .trip-pricing-tab-content .upgrade-package-section {
        margin-top: -43px !important;
        margin-left: 29px !important;
    }
}

@media (min-width: 700px) and (max-width: 899px) {
    .trip-pricing-tab-content .upgrade-package-section {
        margin-top: -11px !important;
        margin-left: 19px !important;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .trip-pricing-tab-content .upgrade-package-section {
        margin-left: -10px;
        margin-right: -10px;
        margin-top: -120px;
        padding: var(--spacing-lg);
    }
}

@media (max-width: 480px) {
    .trip-pricing-tab-content .upgrade-package-section {
        width: 131% !important;
        margin-left: -15px;
        margin-right: -15px;
        margin-top: -100px;
        padding: 0px;
        /*padding: var(--spacing-lg);*/
    }
}

@media (max-width: 400px) {
    .trip-pricing-tab-content .upgrade-package-section {
        width: 100% !important;
        margin-left: -15px;
        margin-right: -15px;
        margin-top: -100px;
        padding: 0px;
    }
}

@media (max-width: 350px) {
    .trip-pricing-tab-content .upgrade-package-section {
        width: 100% !important;
        margin-left: -15px;
        margin-right: -15px;
        margin-top: -100px;
        padding: 0px;
    }
}

/* Terms tab content */
.trip-terms-tab-content {
    max-width: 800px;
    margin-left: 26px !important;
    margin: 0 auto;
    font-family: var(--body-font-family, 'Montserrat'), sans-serif;
}

@media (max-width: 768px) {
    .trip-terms-tab-content {
        margin-left: 0 !important;
        max-width: 100%;
    }
}

/* Terms section */
.terms-section {
    margin-bottom: 30px;
}

@media (max-width: 768px) {
    .terms-section {
        margin-bottom: 20px;
    }
}

.terms-section h3 {
    color: var(--color-blue-100, #1d475a);
    margin-bottom: 15px;
    font-family: var(--header-font-family, 'Lexend Deca'), sans-serif;
}

@media (max-width: 768px) {
    .terms-section h3 {
        margin-bottom: 12px;
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .terms-section h3 {
        font-size: 16px;
    }
}

/* Mobile Accordion Styles */
.mobile-accordion {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    margin-top: -45px;
    margin-bottom: -54px;
    padding: 0 20px;
    box-sizing: border-box;
}

.mobile-accordion .accordion-container {
    width: 100%;
    max-width: 800px;
    min-width: 280px;
}

@media (max-width: 999px) {
    .mobile-accordion {
        display: flex;
    }
}

@media (min-width: 1000px) {
    .mobile-accordion {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .mobile-accordion {
        padding: 0 15px;
    }
}

@media (max-width: 480px) {
    .mobile-accordion {
        padding: 0 10px;
    }
}

/* Accordion item */
.accordion-item {
    margin-bottom: 15px;
    border: 2px solid var(--color-blue-100, #1d475a);
    border-radius: 12px;
    overflow: hidden;
    background: white;
}

@media (max-width: 768px) {
    .accordion-item {
        margin-bottom: 10px;
        border-radius: 8px;
    }
}

/* Accordion header */
.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: var(--color-blue-300, #c2dbe7);
    cursor: pointer;
    font-weight: 600;
    font-family: var(--header-font-family, 'Lexend Deca'), sans-serif;
    color: var(--color-blue-100, #1d475a);
    border: none;
}

@media (max-width: 768px) {
    .accordion-header {
        padding: 12px 15px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .accordion-header {
        padding: 10px 12px;
        font-size: 13px;
    }
}

.accordion-header[aria-expanded="true"] {
    background: white;
    color: var(--color-blue-100, #1d475a);
    border: 2px solid var(--color-blue-100, #1d475a);
    border-bottom: 2px solid var(--color-blue-100, #1d475a);
    font-weight: 700;
}

/* Accordion content */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.accordion-content.expanded {
    max-height: 2000px;
    padding: 30px;
}

@media (max-width: 768px) {
    .accordion-content.expanded {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .accordion-content.expanded {
        padding: 15px;
    }
}

/* Visibility control classes */
.desktop-only {
    display: block;
}

@media (max-width: 999px) {
    .desktop-only {
        display: none !important;
    }
}

.mobile-only {
    display: none;
}

@media (max-width: 999px) {
    .mobile-only {
        display: block !important;
    }
}

/* Hide desktop tabs on mobile */
.desktop-tabs {
    display: flex;
}

@media (max-width: 768px) {
    .desktop-tabs {
        display: none;
    }
}