@media (max-width: 767px) {

    /* PAGE HOME*/
    .t-datepicker-day table tr th{
        color: black!important;
        background: #fff!important;
    }
    .bookingStatus__main{
        width: 100% !important;
    }
    .alert__text{
        font-size: 14px!important;
    }
    .searchBox__action .dropdown{
        margin-right: 10px!important;
    }
    .bookingStatus__main{
        padding: 32px 9px!important;
    }
    .alert-sm{
        width: 100% !important;
    }
    .searchBox__body .searchBox__action .type_flight{
        width: 35%;
    }
    .searchBox__body .searchBox__action .passenger_fs{
        width: 65%;
    }
    .homeBook__col {
        padding-bottom: 30px!important;
        margin-bottom: 30px!important;
        border-bottom: 1px dashed rgba(0,0,0,.15) !important;
    }
    .homeCheap__list li {
        padding: 5px 15px;
        width: 100%;
    }
    .offers__bot{
        padding-bottom: 12px;
    }
    .offers__bot .mb15{
        margin-bottom: 0px!important;
    }
    .homeReason__cont{
        padding: 30px 0px;
    }
    .header__toggle span{
        display: none;
    }
    .footer__bottom .row{
        display: block;
    }
    .footer__bottom .col-4,.footer__bottom .col-8{
        max-width: 100%;
        text-align: left;
    }
    .footer__icon:first-child,.footer__icon ul:first-child li:first-child{
        padding-left: 0;
    }
    .homeBanner{
        height: 265px!important;
    }
    .offers{
        height: 205px!important;
    }
    .homeReason{
        min-height: 245px!important;
    }
    .passengerBox{
        width: 100% !important;
    }

    /* PAGE REVIEW*/
    .travelerTable{
        display: flex;
    }
    .travelerTable .travelerTable__body{
        margin: 0 0!important;
    }
    .cus_services{
        border-bottom: 1px dashed rgba(0,0,0,.15);
        padding-bottom: 15px;
        margin-bottom: 15px;
    }
    .travelerTable .travelerTable__body{
        margin: 0 80px;
    }
    .travelerTable__title{
        margin: 10px 0;
    }
    .travelerTable__title p{
        padding-bottom: 6px;
        border-bottom: 1px dashed #ccc;
        text-align: left;
    }
    .formBox__itinerary__trip .flightDuration{
        margin-top: 12px;
        align-items: center;
        display: block;
    }
    .formBox__traveler .travelerTable__cell {
        display: flex;
        justify-content: space-between;
        padding: 5px 0;
    }
    .formBox__traveler .travelerTable__header{
        display: none;
    }
    .travelerTable__body{\n        text-align: right;\n    }\n    .formBox__traveler .d-flex{\n        justify-content: space-between;\n    }
    .btn.btn-orange-1 {
        color: #fff;
        background-color: #CB0C0C;
        border-color: #CB0C0C;
    }
    /* PAGE PASSENGER*/
    .labelStar:after{
        content: ' *';
        color: #F93243;
    }

    /* PAGE SEARCH*/
    .flightTime__code .philippineairline, .flightTime__code span{
        font-size: 12px;
    }

    .flightItem{
        margin-top: 6vw;
    }
    .slick-arrow:before{
        color: #331969!important;
    }
    .slick-arrow{
        background-color: #fff!important;
        border: 1px solid #fff!important;

    }
    .flDate {
        margin-bottom: 1vw;
    }
    .flDate {
        background-color: #fff;
        position: relative;
        border: 1px solid rgba(0,0,0,.15);
        margin-bottom: 15px;
    }
    .flDate__slide {
        display: flex;
        padding: 0 30px;
    }
    .flDate__item.active {
        border-color: #F26430;
    }
    .flDate__item {
        width: calc(50%);
        padding: 15px;
    }
    .class_name{
        display: flex;
        align-items: center;
    }
    .yourSelection__col{
        margin-bottom: 12px;
    }
    .class_name svg{
        margin-right: 10px;
    }
    .flDate__item {
        text-align: center;
        border-top: 6px solid transparent;
        transition: all .2s;
        font-weight: 500;
    }
    .flTable__detail>.flexGroup1 {
        display: block;
    }
    #flightDetailPopup h2 {
        text-align: center;
        color: #4F4F4F;
        margin-bottom: 30px;
    }
    .priceBoxMobile__item.darkGreen1 .priceBoxMobile__name{
        color:#786FAB
    }
    .priceBoxMobile__item.darkGreen1 .priceBoxMobile__name svg path{
        fill:#786FAB
    }
    .priceBoxMobile__item.darkGreen1 .priceBoxMobile__right .btn{
        background-color:#9C7CD5
    }
    .priceBoxMobile__item.darkGreen2 .priceBoxMobile__name{
        color:#5F519A
    }
    .priceBoxMobile__item.darkGreen2 .priceBoxMobile__name svg path{
        fill:#5F519A
    }
    .priceBoxMobile__item.darkGreen2 .priceBoxMobile__right .btn{
        background-color:#875FCB
    }
    .priceBoxMobile__item.darkGreen3 .priceBoxMobile__name{
        color:#483389
    }
    .priceBoxMobile__item.darkGreen3 .priceBoxMobile__name svg path{
        fill:#483389
    }
    .priceBoxMobile__item.darkGreen3 .priceBoxMobile__right .btn{
        background-color:#7143C1
    }
    .priceBoxMobile__item.darkGreen4 .priceBoxMobile__name{
        color:#3c2d89
    }
    .priceBoxMobile__item.darkGreen4 .priceBoxMobile__name svg path{
        fill:#3c2d89
    }
    .priceBoxMobile__item.darkGreen4 .priceBoxMobile__right .btn{
        background-color:#683EBB
    }
    .priceBoxMobile__item.darkGreen5 .priceBoxMobile__name{
        color:#2f2489
    }
    .priceBoxMobile__item.darkGreen5 .priceBoxMobile__name svg path{
        fill:#2f2489
    }
    .priceBoxMobile__item.darkGreen5 .priceBoxMobile__right .btn{
        background-color:#2f2489
    }
    .priceBoxMobile__item.darkGreen6 .priceBoxMobile__name{
        color:#271689
    }
    .priceBoxMobile__item.darkGreen6 .priceBoxMobile__name svg path{
        fill:#271689
    }
    .priceBoxMobile__item.darkGreen6 .priceBoxMobile__right .btn{
        background-color:#271689
    }

    .bgDarkGreen2{
        background-color: #5B36B2!important;
    }
    .priceBoxMobile__right .selected{
        background-color: #81BE33!important;
    }
    .bgDarkGreen1{
        background-color: #483389!important;
    }
    .tripSummary__btn .btn-disable{
        pointer-events: none;
        background: #bfbfbf;
        border-color: #bfbfbf;
    }


    /* Filter Mobile Modal */
    .listBox__filter {
        display: none !important;
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        right: auto !important;
        bottom: auto !important;
        width: calc(100vw - 32px) !important;
        max-width: 420px !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        z-index: 10001 !important;
        border-radius: 12px !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35) !important;
        background: #ffffff !important;
        padding: 24px 16px 16px !important;
        box-sizing: border-box !important;
    }
    .listBox__filter.show {
        display: block !important;
    }
    .listBox__form.listBox__filter.show:before,
    .listBox__form.listBox__filter.show:after {
        display: none !important;
    }
    .sortFilter button.close,
    .listBox__filter button.close {
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        width: 32px !important;
        height: 32px !important;
        background-color: #ff684d !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        border: none !important;
        cursor: pointer !important;
        z-index: 105 !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
    }
    .sortFilter button.close svg,
    .listBox__filter button.close svg {
        width: 14px !important;
        height: 14px !important;
    }
    .sortFilter button.close svg path,
    .listBox__filter button.close svg path {
        fill: #ffffff !important;
        fill-opacity: 1 !important;
    }
    .boxFilter__group {
        display: block !important;
        padding: 0 !important;
        max-height: none !important;
        overflow-y: visible !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .boxFilter__left {
        width: 100% !important;
        flex: none !important;
        border-right: none !important;
        padding: 0 0 16px 0 !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
        box-sizing: border-box !important;
    }
    .boxFilter__right {
        width: 100% !important;
        flex: none !important;
        padding: 16px 0 0 0 !important;
        box-sizing: border-box !important;
    }
    .boxFilter__group .container {
        display: flex !important;
        align-items: center !important;
        padding: 6px 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .boxFilter__group input[type="radio"] {
        margin-right: 10px !important;
        width: 18px !important;
        height: 18px !important;
        accent-color: #f26430 !important;
        flex-shrink: 0 !important;
    }
    .boxFilter__group label {
        margin-bottom: 0 !important;
        font-size: 14px !important;
        color: #331969 !important;
        cursor: pointer !important;
    }
    .grid-container {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    .grid-item {
        border: 1px solid rgba(135, 95, 203, 0.2) !important;
        border-radius: 6px !important;
        cursor: pointer !important;
        background-color: rgba(135, 95, 203, 0.08) !important;
        padding: 8px 6px !important;
        margin: 0 !important;
        text-align: center !important;
    }
    .grid-item.active {
        background-color: #875FCB !important;
    }
    .grid-item.active p {
        color: #fff !important;
    }
    .grid-item.active .colorPurple {
        color: #fff !important;
    }
    .filter-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 10000;
        display: none;
    }
    .filter-backdrop.show {
        display: block;
    }


    

    /* ==========================================================================
       FLIGHT SEARCH MOBILE REDESIGN (max-width: 767.98px)
       ========================================================================== */
    
    /* 1. Page container & reset */
    .flightResult {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    .flightResult .container {
        padding-left: 14px !important;
        padding-right: 14px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .flightList__main {
        width: 100% !important;
        overflow-x: hidden !important;
    }
    .flightList__mobile {
        width: 100% !important;
    }

    /* 2. Sort by & Filter bar */
    .sortFilter {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        margin-bottom: 12px !important;
        width: 100% !important;
    }
    .sortFilter .sortBy {
        display: none !important; /* Hide desktop selection/lowest fare legend on mobile */
    }
    .sortFilter .parent_filter {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 10px !important;
        width: auto !important;
    }
    .sortFilter .parent_filter .dropdown {
        padding: 0 !important;
        margin: 0 !important;
        position: relative !important;
    }
    .sortFilter .parent_filter .btn {
        display: inline-flex !important;
        align-items: center !important;
        min-height: 40px !important;
        height: 40px !important;
        padding: 6px 12px !important;
        border: 1px solid rgba(242, 100, 48, 0.3) !important;
        border-radius: 6px !important;
        background: #ffffff !important;
        color: #f26430 !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        cursor: pointer !important;
        line-height: 1 !important;
        box-sizing: border-box !important;
    }
    .sortFilter .parent_filter .btn svg {
        flex-shrink: 0 !important;
        vertical-align: middle !important;
    }
    .sortFilter .parent_filter .btn span {
        margin: 0 6px !important;
        vertical-align: middle !important;
        line-height: 1 !important;
    }
    .sortFilter .parent_filter .btn .svgArrow {
        margin-left: 2px !important;
    }
    .sortFilter .dropdown.sort .dropdown-menu {
        right: 0 !important;
        left: auto !important;
        min-width: 150px !important;
        max-width: calc(100vw - 32px) !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        padding: 6px 0 !important;
    }
    .sortFilter .dropdown.sort .dropdown-item {
        padding: 10px 16px !important;
        font-size: 13px !important;
        color: #333 !important;
    }
    .sortFilter .dropdown.sort .dropdown-item.active {
        background-color: #f26430 !important;
        color: #fff !important;
    }

    /* 3. Date Slider (.flDate) */
    .flDate {
        display: flex !important;
        align-items: stretch !important;
        justify-content: space-between !important;
        width: 100% !important;
        background: #ffffff !important;
        border: 1px solid rgba(0, 0, 0, 0.12) !important;
        border-radius: 8px !important;
        margin-bottom: 16px !important;
        padding: 0 !important;
        position: relative !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        min-height: 52px !important;
    }
    .flDate > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 40px !important;
        width: 40px !important;
        text-decoration: none !important;
        background: #fdfdfd !important;
    }
    .flDate .slick-arrow {
        width: 40px !important;
        min-width: 40px !important;
        height: 100% !important;
        min-height: 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        padding: 0 !important;
        color: #331969 !important;
        font-size: 0 !important;
        position: static !important;
        transform: none !important;
    }
    .flDate .slick-arrow:before {
        font-family: "Font Awesome 5 Free", "FontAwesome" !important;
        font-weight: 900 !important;
        font-size: 15px !important;
        color: #331969 !important;
    }
    .flDate .slick-prev:before {
        content: "\f053" !important;
    }
    .flDate .slick-next:before {
        content: "\f054" !important;
    }
    .flDate__slide {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        flex: 1 1 auto !important;
        width: auto !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .flDate__item {
        width: 100% !important;
        min-width: 0 !important;
        padding: 12px 2px !important;
        text-align: center !important;
        border-top: 3px solid transparent !important;
        transition: all 0.2s ease !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .flDate__item.active {
        border-top: 3px solid #f26430 !important;
        background-color: rgba(242, 100, 48, 0.04) !important;
    }
    .flDate__item a {
        display: block !important;
        text-decoration: none !important;
        width: 100% !important;
    }
    .flDate__item p {
        margin: 0 !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        color: #374151 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        line-height: 1.3 !important;
    }
    .flDate__item.active p {
        font-weight: 700 !important;
        color: #111827 !important;
    }

    /* 4. Flight Information Title */
    .flTicketMobile__header {
        background: transparent !important;
        height: auto !important;
        text-align: left !important;
        margin-top: 16px !important;
        margin-bottom: 10px !important;
        padding: 0 !important;
        position: static !important;
    }
    .flTicketMobile__header p {
        color: #111827 !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        margin: 0 !important;
        line-height: 1.4 !important;
    }

    /* 5. Flight Card Container (.flTicketMobile__item) */
    .flTicketMobile__item {
        width: 100% !important;
        background: #ffffff !important;
        border-radius: 8px !important;
        border: 1px solid #e5e7eb !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
        margin-bottom: 16px !important;
        overflow: hidden !important;
        height: auto !important;
        box-sizing: border-box !important;
    }
    .flTicketMobile__box {
        padding: 14px 14px 0 14px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .flTicketMobile__item .flInfo {
        padding: 0 !important;
        width: 100% !important;
    }

    /* 6. Flight Trip Row (.flInfo__trip): CSS Grid 3 columns */
    .flTicketMobile__item .flInfo__trip {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 80px minmax(0, 1fr) !important;
        align-items: start !important;
        gap: 8px !important;
        margin: 0 !important;
        width: 100% !important;
        height: auto !important;
    }
    .flTicketMobile__item .flInfo__item {
        min-width: 0 !important;
        padding: 0 !important;
        height: auto !important;
        position: static !important;
    }
    .flTicketMobile__item .flInfo__item:nth-child(1) {
        text-align: left !important;
    }
    .flTicketMobile__item .flInfo__item:nth-child(2) {
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }
    .flTicketMobile__item .flInfo__item:nth-child(3) {
        text-align: right !important;
    }
    .flTicketMobile__item .flInfo__item .text18 {
        font-size: 17px !important;
        font-weight: 700 !important;
        color: #111827 !important;
        margin-bottom: 4px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }
    .flTicketMobile__item .flInfo__item .text12 {
        font-size: 12px !important;
        color: #4b5563 !important;
        line-height: 1.35 !important;
        margin: 0 !important;
        word-break: break-word !important;
    }
    .flTicketMobile__item .stopBox {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
    }
    .flTicketMobile__item .stopBox__icon {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin-bottom: 4px !important;
    }
    .flTicketMobile__item .stopBox__icon svg {
        display: block !important;
    }
    .flTicketMobile__item .stopBox__text {
        text-align: center !important;
    }
    .flTicketMobile__item .stopBox__text .ANN_duration {
        font-size: 12px !important;
        font-weight: 500 !important;
        color: #4b5563 !important;
        margin-bottom: 2px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }
    .flTicketMobile__item .stopBox__text .ANN_noneStop {
        margin: 0 !important;
    }
    .flTicketMobile__item .stopBox__text .ANN_noneStop span {
        display: inline-block !important;
        background: #e6f4ea !important;
        color: #137333 !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        padding: 2px 8px !important;
        border-radius: 10px !important;
        line-height: 1.2 !important;
    }
    .flTicketMobile__item .stopBox__text .ANN_multipleStop {
        display: inline-block !important;
        background: #fce8e6 !important;
        color: #c5221f !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        padding: 2px 8px !important;
        border-radius: 10px !important;
        line-height: 1.2 !important;
    }

    /* 7. Airline & aircraft info (.flInfo__flex) */
    .flTicketMobile__item .flInfo__flex {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin-top: 10px !important;
        padding-top: 8px !important;
        border-top: 1px dashed rgba(0, 0, 0, 0.08) !important;
        width: 100% !important;
    }
    .flTicketMobile__item .ANN_airline_info {
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        min-width: 0 !important;
    }
    .flTicketMobile__item .airlineInfo__logo {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        font-size: 12px !important;
        color: #374151 !important;
    }
    .flTicketMobile__item .airlineInfo__logo img {
        max-width: 26px !important;
        max-height: 26px !important;
        object-fit: contain !important;
        flex-shrink: 0 !important;
    }
    .flTicketMobile__item .airlineInfo__logo span {
        font-size: 12px !important;
        font-weight: 500 !important;
        color: #374151 !important;
    }
    .flTicketMobile__item .airlineInfo__logo i {
        font-size: 4px !important;
        vertical-align: middle !important;
        margin: 0 4px !important;
        color: #9ca3af !important;
    }
    .flTicketMobile__item .viewMore.viewDetail {
        background: transparent !important;
        border: none !important;
        color: #2563eb !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        padding: 4px 0 !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        margin-left: auto !important;
    }

    /* 8. From Price Banner (.flTicketMobile__total) */
    .flTicketMobile__item .flTicketMobile__total {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-height: 44px !important;
        height: 44px !important;
        padding: 0 14px !important;
        background: #f8fafc !important;
        border-top: 1px solid #f1f5f9 !important;
        border-bottom: 1px solid #f1f5f9 !important;
        margin-top: 10px !important;
        margin-left: -14px !important;
        margin-right: -14px !important;
        width: calc(100% + 28px) !important;
        cursor: pointer !important;
        user-select: none !important;
        box-sizing: border-box !important;
    }
    .flTicketMobile__item .flTicketMobile__total p.text14 {
        margin: 0 !important;
        font-size: 13px !important;
        color: #64748b !important;
        line-height: 1 !important;
    }
    .flTicketMobile__item .flTicketMobile__total strong {
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #0f172a !important;
    }
    .flTicketMobile__item .flTicketMobile__arrow {
        background: transparent !important;
        border: none !important;
        padding: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
    }
    .flTicketMobile__item .flTicketMobile__arrow svg {
        display: block !important;
        transition: transform 0.25s ease !important;
    }
    .flTicketMobile__item .flTicketMobile__arrow.rotate svg {
        transform: rotate(180deg) !important;
    }

    /* 9. Fare List & Buttons (.flTicketMobile__price & .priceMobile) */
    .flTicketMobile__item .flTicketMobile__price {
        display: none;
        width: calc(100% + 28px) !important;
        margin-left: -14px !important;
        margin-right: -14px !important;
        background: #ffffff !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    .flTicketMobile__item .priceMobile {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(110px, 128px) !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px 14px !important;
        border-bottom: 1px dashed #e2e8f0 !important;
        position: relative !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }
    .flTicketMobile__item .priceMobile:last-child {
        border-bottom: none !important;
    }
    .flTicketMobile__item .priceMobile__label {
        display: inline-flex !important;
        align-items: center !important;
        margin-right: 4px !important;
        vertical-align: middle !important;
        position: static !important;
    }
    .flTicketMobile__item .priceMobile__cont {
        min-width: 0 !important;
        text-align: left !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .flTicketMobile__item .priceMobile__cont p.text14 {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #1e293b !important;
        margin: 0 0 2px 0 !important;
        line-height: 1.3 !important;
        word-break: break-word !important;
    }
    .flTicketMobile__item .priceMobile__cont p.text12 {
        font-size: 12px !important;
        color: #64748b !important;
        margin: 0 !important;
        line-height: 1.2 !important;
    }
    .flTicketMobile__item .priceMobile__btn {
        width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        justify-content: flex-end !important;
    }
    .flTicketMobile__item .priceMobile__btn .btn {
        width: 100% !important;
        min-height: 42px !important;
        height: 42px !important;
        padding: 0 10px !important;
        border-radius: 6px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        color: #ffffff !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        border: none !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }
    .flTicketMobile__item .priceMobile__btn .btn.d-none {
        display: none !important;
    }
    .flTicketMobile__item .priceMobile__btn .btn strong {
        font-weight: 700 !important;
        white-space: nowrap !important;
    }
    .flTicketMobile__item .priceMobile__btn .btn svg {
        margin-left: 6px !important;
        flex-shrink: 0 !important;
    }
    .flTicketMobile__item .priceMobile__btn .btn.selected {
        background-color: #81be33 !important;
        justify-content: center !important;
        gap: 8px !important;
    }
    .flTicketMobile__item .priceMobile__btn .btn.soldOut {
        background-color: #f1f5f9 !important;
        color: #94a3b8 !important;
        cursor: not-allowed !important;
        justify-content: center !important;
        pointer-events: none !important;
    }

    /* Small screen optimizations (<= 340px) */
    @media (max-width: 340px) {
        .flTicketMobile__item .flInfo__trip {
            grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr) !important;
            gap: 4px !important;
        }
        .flTicketMobile__item .flInfo__item .text18 {
            font-size: 15px !important;
        }
        .flTicketMobile__item .priceMobile {
            grid-template-columns: minmax(0, 1fr) 105px !important;
            gap: 6px !important;
            padding: 10px 10px !important;
        }
        .flTicketMobile__item .priceMobile__btn .btn {
            font-size: 12px !important;
            padding: 0 6px !important;
        }
    }



    /* ==========================================================================
       MOBILE SELECTED / RE-CHANGE FLIGHT CARD & DETAILS POPUP
       ========================================================================== */

    /* 1. Selected Flight Box (.box_after_choosing_flight) */
    .box_after_choosing_flight {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 14px !important;
        box-sizing: border-box !important;
    }
    .box_after_choosing_flight .flightItem__table__row {
        background: #ffffff !important;
        border-radius: 10px !important;
        border: 1px solid #e5e7eb !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
        overflow: hidden !important;
        display: block !important;
        margin-bottom: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Header: "Departing" left, "Re-change" right, single row, vertically aligned */
    .box_after_choosing_flight .reChange__up {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 14px !important;
        background: #f8fafc !important;
        border-bottom: 1px solid #eef2f5 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .box_after_choosing_flight .reChange__icon {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        min-width: 0 !important;
    }
    .box_after_choosing_flight .reChange__icon svg {
        width: 18px !important;
        height: 18px !important;
        flex-shrink: 0 !important;
    }
    .box_after_choosing_flight .reChange__icon p {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #111827 !important;
        white-space: nowrap !important;
    }
    .box_after_choosing_flight .button_rechange {
        display: flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
    }
    .box_after_choosing_flight .btn_rechange {
        background: transparent !important;
        border: none !important;
        color: #2563eb !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        padding: 4px 0 !important;
        margin: 0 !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        line-height: 1 !important;
    }
    .box_after_choosing_flight .btn_rechange:hover {
        text-decoration: underline !important;
    }

    /* Stack ticket columns vertically on mobile, NOT side-by-side */
    .box_after_choosing_flight .reChange__down {
        display: flex !important;
        flex-direction: column !important;
        padding: 12px 14px !important;
        border-top: none !important;
        gap: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .box_after_choosing_flight .flTicket__left,
    .box_after_choosing_flight .flTicket__right {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    /* 3-Column Trip Grid for both selected flight and list flight */
    .box_after_choosing_flight .flInfo__trip,
    .flTicketMobile__box .flInfo__trip {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(58px, 72px) minmax(0, 1fr) !important;
        align-items: center !important;
        width: 100% !important;
        gap: 4px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    .box_after_choosing_flight .flInfo__item.trip1,
    .flTicketMobile__box .flInfo__item:nth-child(1) {
        text-align: left !important;
        min-width: 0 !important;
    }
    .box_after_choosing_flight .flInfo__item.trip2,
    .flTicketMobile__box .flInfo__item:nth-child(2) {
        text-align: center !important;
        min-width: 0 !important;
        padding: 0 2px !important;
    }
    .box_after_choosing_flight .flInfo__item.trip3,
    .flTicketMobile__box .flInfo__item:nth-child(3) {
        text-align: right !important;
        min-width: 0 !important;
    }

    /* Trip typography */
    .box_after_choosing_flight p.text18,
    .flTicketMobile__box p.text18 {
        font-size: 16px !important;
        font-weight: 700 !important;
        margin-bottom: 2px !important;
        line-height: 1.25 !important;
        color: #111827 !important;
    }
    .box_after_choosing_flight .ANN_timeOfDeparture,
    .box_after_choosing_flight .ANN_timeOfArrival,
    .flTicketMobile__box .ANN_timeOfDeparture,
    .flTicketMobile__box .ANN_timeOfArrival,
    .box_after_choosing_flight .ANN_from,
    .box_after_choosing_flight .ANN_to,
    .flTicketMobile__box .ANN_from,
    .flTicketMobile__box .ANN_to {
        white-space: nowrap !important;
    }
    .box_after_choosing_flight p.text12,
    .flTicketMobile__box p.text12 {
        font-size: 11px !important;
        line-height: 1.3 !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        color: #4b5563 !important;
        margin: 0 !important;
    }

    /* Stop Box in middle column */
    .box_after_choosing_flight .stopBox,
    .flTicketMobile__box .stopBox {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto !important;
    }
    .box_after_choosing_flight .stopBox svg,
    .flTicketMobile__box .stopBox svg {
        width: 22px !important;
        height: auto !important;
    }
    .box_after_choosing_flight .ANN_duration,
    .flTicketMobile__box .ANN_duration {
        font-size: 11px !important;
        font-weight: 600 !important;
        margin: 2px 0 0 0 !important;
        white-space: nowrap !important;
        color: #1f2937 !important;
    }
    .box_after_choosing_flight .ANN_multipleStop,
    .flTicketMobile__box .ANN_multipleStop {
        font-size: 10px !important;
        white-space: nowrap !important;
        color: #dc2626 !important;
        font-weight: 600 !important;
    }
    .box_after_choosing_flight .ANN_noneStop span,
    .flTicketMobile__box .ANN_noneStop span {
        font-size: 10px !important;
        white-space: nowrap !important;
        color: #16a34a !important;
        font-weight: 600 !important;
        background: transparent !important;
        padding: 0 !important;
    }

    /* Stacked Airline segments */
    .box_after_choosing_flight .ANN_airline_info,
    .flTicketMobile__box .ANN_airline_info {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        width: 100% !important;
        margin-top: 8px !important;
        padding-top: 8px !important;
        border-top: 1px dashed #e5e7eb !important;
    }
    .box_after_choosing_flight .airlineInfo__logo,
    .flTicketMobile__box .airlineInfo__logo {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        font-size: 12px !important;
        color: #4b5563 !important;
        line-height: 1.4 !important;
        flex-wrap: wrap !important;
    }
    .box_after_choosing_flight .airlineInfo__logo img,
    .flTicketMobile__box .airlineInfo__logo img {
        width: 22px !important;
        height: auto !important;
        max-height: 18px !important;
        object-fit: contain !important;
        flex-shrink: 0 !important;
    }
    .box_after_choosing_flight .flightNumberText,
    .flTicketMobile__box .flightNumberText {
        font-weight: 600 !important;
        color: #1f2937 !important;
        white-space: nowrap !important;
    }
    .box_after_choosing_flight .airlineInfo__logo i,
    .flTicketMobile__box .airlineInfo__logo i {
        font-size: 3px !important;
        color: #9ca3af !important;
        margin: 0 4px !important;
        vertical-align: middle !important;
    }
    .box_after_choosing_flight .equipmentText,
    .flTicketMobile__box .equipmentText {
        font-size: 11px !important;
        color: #6b7280 !important;
        white-space: nowrap !important;
    }

    /* "More details" link with 40px tap target */
    .box_after_choosing_flight .flInfo__flex {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        margin: 0 !important;
    }
    .box_after_choosing_flight .viewMore.viewDetail,
    .flTicketMobile__box .viewMore.viewDetail {
        display: inline-flex !important;
        align-items: center !important;
        min-height: 40px !important;
        padding: 4px 0 !important;
        background: transparent !important;
        border: none !important;
        color: #2563eb !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        cursor: pointer !important;
        text-decoration: none !important;
        margin: 0 !important;
    }
    .box_after_choosing_flight .viewMore.viewDetail:hover,
    .flTicketMobile__box .viewMore.viewDetail:hover {
        text-decoration: underline !important;
    }

    /* Selected Fare class on dedicated bottom row */
    .box_after_choosing_flight .class_name {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        padding-top: 6px !important;
        margin-top: 2px !important;
        border-top: 1px dashed #e5e7eb !important;
    }
    .box_after_choosing_flight .class_name p {
        margin: 0 !important;
        font-size: 13px !important;
        color: #374151 !important;
    }
    .box_after_choosing_flight .class_name .fare_label {
        color: #6b7280 !important;
        margin-right: 4px !important;
        font-weight: normal !important;
    }
    .box_after_choosing_flight .class_name strong {
        color: #111827 !important;
        font-weight: 600 !important;
    }

    /* ==========================================================================
       2. Flight Details Modal Popup (#flightDetailPopup)
       ========================================================================== */
    #flightDetailPopup.modal {
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow: hidden !important;
    }
    #flightDetailPopup .modal-dialog {
        width: calc(100% - 20px) !important;
        max-width: 420px !important;
        margin: 10px auto !important;
        height: auto !important;
        max-height: calc(100dvh - 20px) !important;
        display: flex !important;
        flex-direction: column !important;
    }
    #flightDetailPopup .modal-content {
        max-height: calc(100dvh - 20px) !important;
        display: flex !important;
        flex-direction: column !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        border: none !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
    }
    #flightDetailPopup .modal-body {
        max-height: calc(100dvh - 20px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 20px 14px 16px !important;
        position: relative !important;
    }

    /* Close button: 40x40 tap target, top-right */
    #flightDetailPopup button.close {
        position: absolute !important;
        top: 8px !important;
        right: 8px !important;
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: none !important;
        opacity: 0.6 !important;
        z-index: 10 !important;
        cursor: pointer !important;
    }
    #flightDetailPopup button.close:hover,
    #flightDetailPopup button.close:focus {
        opacity: 1 !important;
    }

    /* Modal title: centered, protected by side margins */
    #flightDetailPopup h2 {
        font-size: 18px !important;
        font-weight: 700 !important;
        text-align: center !important;
        color: #1f2937 !important;
        margin: 0 40px 14px 40px !important;
        padding: 0 !important;
        line-height: 1.3 !important;
    }

    /* Header summary: Route + Duration */
    #flightDetailPopup .flTable__detail > .flexGroup1 {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding-left: 10px !important;
        border-left: 3px solid #f26430 !important;
        margin-bottom: 14px !important;
    }
    #flightDetailPopup .flightDetail__title:before {
        display: none !important;
    }
    #flightDetailPopup .flightDetail__title p {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #111827 !important;
        line-height: 1.35 !important;
        margin: 0 !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }
    #flightDetailPopup .flTable__detail > .flexGroup1 > p {
        font-size: 12px !important;
        color: #6b7280 !important;
        margin: 0 !important;
    }
    #flightDetailPopup .ANN_duration {
        font-size: 13px !important;
        font-weight: 700 !important;
        color: #1f2937 !important;
    }

    /* Segment rows container */
    #flightDetailPopup .flightDetail__cont {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }

    /* Each segment row */
    #flightDetailPopup .flightDetail__row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(40px, 48px) minmax(0, 1fr) !important;
        gap: 8px !important;
        align-items: start !important;
        padding: 12px 10px !important;
        background: #f9fafb !important;
        border-radius: 8px !important;
        border: 1px solid #e5e7eb !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* OVERRIDE desktop width rules on all columns */
    #flightDetailPopup .flightDetail__item:nth-child(1) {
        width: 100% !important;
        max-width: 100% !important;
        text-align: left !important;
        min-width: 0 !important;
    }
    #flightDetailPopup .flTable__detail .flightDetail__item:nth-child(2),
    .flightDetailPopup .flTable__detail .flightDetail__item:nth-child(2),
    #flightDetailPopup .flightDetail__item:nth-child(2) {
        flex: 0 0 44px !important;
        width: 44px !important;
        min-width: 40px !important;
        max-width: 48px !important;
        padding: 0 !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }
    #flightDetailPopup .flightDetail__item:nth-child(3) {
        width: 100% !important;
        max-width: 100% !important;
        text-align: right !important;
        min-width: 0 !important;
    }

    /* Time & airport code */
    #flightDetailPopup .flightDetail__item p.text18 {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #111827 !important;
        margin-bottom: 2px !important;
        white-space: nowrap !important;
    }
    #flightDetailPopup .flightDetail__item p.medium {
        font-size: 12px !important;
        font-weight: 500 !important;
        color: #374151 !important;
        margin-bottom: 2px !important;
        line-height: 1.3 !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }
    #flightDetailPopup .flightDetail__item p.colorBlack55 {
        font-size: 11px !important;
        color: #6b7280 !important;
        margin-bottom: 2px !important;
        line-height: 1.3 !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }

    /* Center column items */
    #flightDetailPopup .flightDetail__arrow {
        margin: 4px 0 6px 0 !important;
        display: flex !important;
        justify-content: center !important;
    }
    #flightDetailPopup .flightDetail__arrow svg {
        width: 18px !important;
        height: auto !important;
    }
    #flightDetailPopup .flightDetail__time {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
    #flightDetailPopup .flightDetail__time img.ANN_logo {
        max-width: 32px !important;
        max-height: 22px !important;
        object-fit: contain !important;
        margin: 0 auto !important;
    }
    #flightDetailPopup .flightDetail__time .flightDetail__flightNo {
        font-size: 11px !important;
        font-weight: 600 !important;
        color: #4b5563 !important;
        margin: 3px 0 0 0 !important;
        text-align: center !important;
        white-space: nowrap !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    /* Layover divider row between segments */
    #flightDetailPopup .flightDetail__layover {
        grid-column: 1 / -1 !important;
        background: #f3f4f6 !important;
        border-radius: 6px !important;
        padding: 6px 10px !important;
        margin: 4px 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    #flightDetailPopup .flightDetail__layover .connectTime {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        font-size: 12px !important;
        color: #4b5563 !important;
        margin: 0 !important;
    }
    #flightDetailPopup .flightDetail__layover svg {
        width: 14px !important;
        height: 14px !important;
        flex-shrink: 0 !important;
    }

}