@media only screen and (max-width: 1024px) {
    .hm_addbanner {
    width: 100%;
    height: auto;
    background-size: cover;
}
.search_are_outer {
    top: 20%;
    min-width: auto;
    width: 100%;
}
ul.hmsearchTabs {
    padding: 5px;
    flex-wrap: wrap;
}
ul.hmsearchTabs li {
        padding-right: 0;
        padding-bottom: 0;
        width: auto !important;
    }
ul.hmsearchTabs li a {
    font-size: 15px;
}
.hmcreatePackSearchFlds {
    flex-wrap: wrap;
}
.hmFld01 {
    width: 40%;
}
button.hmPackSearchBtn {
    width: 15%;
}
.appbg {
    display: none;
}
.appDownloadDtls {
    width: 50%;
    padding-left: 20px;
}
.hm_newsLetter {
    padding-left: 20px;
    width: 48%;
    padding-top: 25px;
}
}


@media only screen and (min-width: 768px) and (max-width: 991px)  {
    .searchpanel_box .field_clm_search{ width:100%; }
    .searchpanel_box .hmcreatePackSearchFlds .hmFld02{ width:100%; }
    .hmViewBookBtn{padding: 8px 8px;}
    .hmEnquiryBtn{padding: 8px 8px;}
    .hm-deals-viewmore a{font-size: 14px;}
}


@media only screen and (max-width: 767px) {
    .b2b_tab.tabs .hmFld01 {
    width: 100%;
}
.b2b_tab.tabs button.hmPackSearchBtn {
    width: 100%;
}
      .banner_main .carousel-inner img {
    height: auto;
    min-height: 650px;
}
.nav_mobHide{ display: none;}
.banner_tittle h1 {
    font-size: 40px;
    line-height: 40px;
}
.banner_tittle h1 span {
    font-size: 40px;
    line-height: 40px;
}
.search_are_outer {
        position: inherit;
        top: auto;
        min-width: auto;
        width: 100%;
        transform: inherit;
        padding-top: 30px;
        padding-bottom: 30px;
    }
.search_area {
    margin-top: 0;
}
.hmFld01 {
    width: 100%;
}
button.hmPackSearchBtn {
    width: 100%;
}
.hmcreatePackSearchFlds {
    flex-wrap: wrap;
    gap: 20px;
}

ul.hmsearchTabs {
    padding: 15px;
    flex-wrap: wrap;
    gap: 10px;
}

a.tab-links.active {
    padding-bottom: 2px;
}
ul.hmsearchTabs li a {
    font-size: 14px;
}
section.hm_umrahpack {
    padding: 20px 0;
}
section.hm_umrahpack h1 {
    font-size: 25px;
}
.hm_addbanner {
    width: 100%;
    height: auto;
    background-size: cover;
    padding: 15px;
}
.hmAppbrdr {
    height: auto;
    flex-wrap: wrap;
}
.appbg {
   display: none;
}
.appDownloadDtls {
    width: 100%;
    border-right: none;
    padding: 0 15px;
}
.downloadStore {
    width: 55%;
}
.hm_newsLetter {
    padding-left: 15px;
    width: 100%;
    padding-top: 10px;
}
.hm_appdownload_bg {
    width: 100%;
    margin-top: 0;
}
footer {
    padding: 20px 0 0px;
    margin-top: 20px;
}
.foot_mob_hide {
    display: none;
}
footer .footer-packge-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px 10px;
}
footer .footer-packge-container .footer-pckg-col h6 {
    font-size: 14px;
    margin-bottom: 6px;
}
footer .footer-packge-container .footer-pckg-col ul li {
    margin-bottom: 5px;
}
footer .footer-packge-container .footer-pckg-col ul li a {
    font-size: 13px;
}
.footBottmDtls {
    flex-wrap: wrap;
    text-align: center;
    justify-content: center;
    padding: 12px 0;
    gap: 8px;
}
.footBottmDtls p {
    margin: 0;
}
ul.footTerms {
    padding: 0;
    justify-content: center;
}
.social ul {
    justify-content: center;
}
.social li a {
    max-height: 38px;
    max-width: 38px;
    padding: 8px;
}


.top_search_menu ul {
    flex-wrap: wrap;
}
ul.headerMenu li {
    padding: 0;
}
.headlogo {
    width: 110px;
    height: 38px;
    background-size: contain;
    background-repeat: no-repeat;
}
.sticky .headlogo {
    width: 110px;
    height: 38px;
    background-size: contain;
    background-repeat: no-repeat;
}
.hmcreatePackSearchFlds.hmfixedDepartFlds .hmFld01 {
    width: 100%;
}
.field_clm_3.field_clm_3_psngr.HmTravel {
    width: 100%;
}

.hmflnewfld {
    border-bottom: none;
}
p.hmcalday {
    margin-bottom: 0;
}
.search_hm_main .field_clm_3.field_clm_3_psngr.HmTravel {
    width: 100%;
}
.search_hm_main .field_clm_1 {
    width: 100%;
    position: relative;
}
.search_hm_main .field_row.hm_multycity .field_clm_3 {
    width: 100%;
}
.hmnewNonStops {
        width: auto;
        display: flex;
        justify-content: start;
        flex-wrap: wrap;
}

.search_hm_main .hm_clndr_main {
    display: flex;
    position: relative;
    width: 100%;
    gap: 15px;
    flex-wrap: wrap;
}
.hmnewChangeArow{display: none;}

.hm_clndr_main .field_clm_2 {
    width: 50% !important;
}
.hotel_search .hm_clndr_main .field_clm_2{
    width: 100% !important;
}
.activity_search .hm_clndr_main{
 flex-wrap: wrap;
}
.activity_search  .hm_clndr_main .field_clm_2{
    width: 100%  !important;
}
    .transfers_panel .FilghtClass .search_field_main .form-group {
        width: 100%;
        margin-bottom: 0;
    }
    .transfers_panel .field_clm_3_psngr {
        width: 100% !important;
    }
.FilghtClass .hm_multycity .field_clm_3 {
    width: 100%;
}
.FilghtClass .hm_multycity .field_clm_2.multi_clnder {
    width: 100%;
}
.field_clm_3.field_clm_6.b2b_hld_flx {
    border: none;
}
.field_clm_3.field_clm_3_psngr.pt-4 {
    border: none;
    padding: 0px !important;
}
.field_row.hm_multycity {
    margin-bottom: 10px;
}
.FilghtClass .hm_multycity .field_clm_3.field_passenger_sec {
    width: 100%;
}
.hm_nonstop.hm_padding.multicityNonStops {
    padding-top: 0;
    padding-left: 0;
}
.down_arrow:after {
    right: 5px;
}
.hotel_search .field_clm_3 {
        width: 100%;
    }
    .hmFld02 {
    width: 100%;
}
    .transfers_panel .FilghtClass .field_clm_2 {
        width: 100% !important;
    }
    .field_clm_3_activity {
    width: 100%;
}
.transfers_panel .field_clm_3_psngr {
    width: 100% !important;
}
.field_clm_3.field_clm_3_psngr.HmHotelTravel{
    width: 100%;
}
.search_hm_main .form-group {
    margin-bottom: 10px;
    width: 100%;
}
.hmDynmicFldPlus {
    width: 100%;
    margin-top: 5px;
    margin-bottom: 10px;
}
.field_clm_3.field_clm_3_psngr.HmTravel.TranfersPassbox {
    margin-bottom: 15px;
}
.hmcreatePackSearchFlds.hmnewDynamicPackSearch .form-group {
    margin-bottom: 0;
}
.hmdynmicFld01 {
    position: relative;
    width: 100%;
}
.field_clm_3.hmhtlnationality {
    margin-bottom: 0;
}
.activity_search {
    padding-top: 0;
}
    .hmcreatePackSearchFlds .field_clm_3 {
        width: 100%;
        border: 1px solid #ccc;
        padding: 8px 15px;
        border-radius: 5px;
    }
    .hmcreatePackSearchFlds .hmFld01 {
        width: 100%;
    }
.transfers_panel .hm_clndr_main {
    width: 100%;
}
.hmdynamicpackSrchRght {
    width: 100%;
}
.hm_clndr_main {
    width: 100%;
}
.searchpanel_box .flight_tabs_wrpr .flight_tabs li a {
    padding: 5px 10px;
    font-size: 13px;
    padding-left: 25px;
}
.field_clm_search {
    width: 100%;
}
ul.hmsearchTabs {
    margin-left: 0;
    padding:5px;
   
    gap: 20px;
}
.search_field_main.activity_search .field_clm_3_activity {
    margin-bottom: 0;
}
.search_field_main.activity_search .hm_clndr_main {
    margin-bottom: 0;
}
.search_field_main.activity_search .field_clm_3.HmHotelTravel.activityTrvelrsList {
    margin-bottom: 10px;
}
.b2b_section .hmdynmicFld01 {
    position: relative;
    width: 100%;
}
.hmcreatePackSearchFlds.hmnewDynamicPackSearch .field_row{
   margin-bottom: 10px;
    gap: 10px;
}
.hotel_search .form-group{
    margin-bottom: 0;
}
.hotel_search .hm_clndr_main{
    gap: 10px;
}
.dyrsltmetrixComon {
    gap: 15px;
    flex-wrap: wrap;
}

/* ==========================================
   FLIGHT CARD — compact rows (mobile). Each leg is one tight row:
   logo | flight no + route | date + times. Reduced height, no timeline.
   ========================================== */
.DynamicContentArea .dyrsltmetrixComon {
    flex-direction: column !important;
    gap: 0 !important;
}
.DynamicContentArea .dyrsltmetrixTripBox {
    width: 100% !important;
}
.DynamicContentArea .dyTripBox_From,
.DynamicContentArea .dyTripBox_To {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    padding:5px 10px !important;
    position: static !important;
}
.DynamicContentArea .dyTripBox_From::before,
.DynamicContentArea .dyTripBox_To::before {
    display: none !important;
}
.DynamicContentArea .Dy_Metrix_airLogo {
    position: static !important;
    width: 26px !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
}
.DynamicContentArea .Dy_Metrix_FlightDtls {
    width: auto !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    order: 0 !important;
}
.DynamicContentArea .Dy_Metrix_Date {
    width: auto !important;
    flex: 0 0 auto !important;
    order: 0 !important;
    text-align: right !important;
}
/* Return leg (dyTripBox_To) DOM is mirrored for the desktop symmetric layout
   (Date | FlightDtls | logo). On mobile force the same order as the onward
   leg — logo | flight details | date — so both rows read identically. */
.DynamicContentArea .dyTripBox_To .Dy_Metrix_airLogo {
    order: 1 !important;
}
.DynamicContentArea .dyTripBox_To .Dy_Metrix_FlightDtls {
    order: 2 !important;
}
.DynamicContentArea .dyTripBox_To .Dy_Metrix_Date {
    order: 3 !important;
}
.DynamicContentArea .Dy_Metrix_FlightDtls h4,
.DynamicContentArea .Dy_Metrix_FlightDtls h3 {
    margin: 0 !important;
    line-height: 1.35 !important;
    font-size: 12px !important;
    justify-content: flex-start !important;
    gap: 3px !important;
}
.DynamicContentArea .Dy_Metrix_Date h4,
.DynamicContentArea .Dy_Metrix_Date h3 {
    margin: 0 !important;
    line-height: 1.35 !important;
    font-size: 12px !important;
    justify-content: flex-end !important;
    gap: 3px !important;
}
/* Selected badge + View Details compact top row */
.DynamicContentArea .dyrsltmetrixTripBox.MtrixBox2 .dyTripBox_Details {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
    padding: 5px 10px 0 !important;
}
/* Selected tag: in-flow, aligned in the row (not absolute / -12px offset) */
.DynamicContentArea .dyrsltmetrixTripBox.MtrixBox2 .dypackselected {
        position: absolute !important;
        left: 10px !important;
        right: auto !important;
        top: -13px !important;
        bottom: auto !important;
        transform: none !important;
        border-radius: 40px !important;
        padding: 3px 10px !important;
        font-size: 12px !important;
}
/* View Details — different pattern: compact light-blue underlined text link.
   Hide the base decorative ::before / ::after (gradient line). */
.DynamicContentArea .dyTrip__Button.flightdetailsbt {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 !important;
    min-width: 0 !important;
    height: auto !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #41b4e6 !important;
    font-size: 13px !important;
    font-family: 'AvenirHeavy', 'BukraBold' !important;
    text-decoration: underline !important;
}
.DynamicContentArea .dyTrip__Button.flightdetailsbt::before,
.DynamicContentArea .dyTrip__Button.flightdetailsbt::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

.dyrsltmetrixRoundTrips {
    width: 100%;
    gap: 10px;
    justify-content: space-around;
    flex-wrap: wrap;
     border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
}
    .dyrsltmetrixRoundTrips:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    /* ==========================================
       MOBILE BOTTOM SHEET - Passenger/Class Selection
       Higher specificity (body prefix) needed to override inner_style.css
       which loads after this file
       ========================================== */
    body .Htl_New_RoomPicker,
    body .searchpanel_box .Htl_New_RoomPicker {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-height: 75vh !important;
        border-radius: 20px 20px 0 0 !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15) !important;
        z-index: 9999 !important;
        animation: mobileBottomSheetSlideUp 0.3s ease-out !important;
        padding: 20px 20px 30px !important;
        overflow-y: auto !important;
        border: none !important;
    }

    body .Htl_New_RoomPicker .close {
        position: absolute !important;
        right: 15px !important;
        top: 15px !important;
        width: 28px !important;
        height: 28px !important;
        z-index: 10 !important;
    }

    body .Htl_New_RoomPicker .trvelrsList h4 {
        font-size: 18px;
        font-family: 'AvenirHeavy', 'BukraBold' !important;
        color: #001326;
        margin-bottom: 20px;
        padding-top: 5px;
    }

    body .Htl_New_RoomPicker .Htl_New_Room_out {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        padding: 10px 0;
    }

    body .Htl_New_RoomPicker .htl_new_dvd {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding: 12px 0;
        border-bottom: 1px solid #f0f0f0;
    }

    body .Htl_New_RoomPicker .htl_new_dvd:last-child {
        border-bottom: none;
    }

    body .Htl_New_RoomPicker .Htl_New_Room_label {
        font-size: 16px;
        color: #001326;
        font-family: 'AvenirHeavy', 'BukraBold' !important;
        flex: 1;
        display: flex !important;
        flex-direction: column;
    }

    body .Htl_New_RoomPicker .Htl_New_Room_label .trvel_span {
        display: block;
        font-size: 13px;
        color: #888;
        font-family: 'AvenirRegular', 'BukraRegular' !important;
        margin-top: 2px;
        padding-left: 0;
    }

    body .Htl_New_RoomPicker .Htl_New_Room_Field {
        display: flex;
        align-items: center;
        gap: 0;
        border: 1px solid #ddd;
        border-radius: 8px;
        overflow: hidden;
        width: auto;
        min-width: 120px;
        flex-shrink: 0;
        height: 40px;
        margin-bottom: 0;
    }

    body .Htl_New_RoomPicker .Htl_New_Room_Field_Btn {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f5f8fc;
        cursor: pointer;
    }

    body .Htl_New_RoomPicker .Htl_New_Room_Field_Btn:active {
        background: #e0e8f0;
    }

    body .Htl_New_RoomPicker .htl_new_count {
        min-width: 40px;
        text-align: center;
        font-size: 16px;
        font-family: 'AvenirHeavy', 'BukraBold' !important;
        color: #001326;
    }

    body .Htl_New_RoomPicker .selectCabn {
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px solid #f0f0f0;
    }

    body .Htl_New_RoomPicker .selectCabn label {
        font-size: 16px;
        color: #001326;
        font-family: 'AvenirHeavy', 'BukraBold' !important;
        margin-bottom: 10px;
        display: block;
    }

    body .Htl_New_RoomPicker .selectCabn select {
        width: 100%;
        height: 44px;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 0 15px;
        font-size: 15px;
        color: #001326;
        background: #fff;
        appearance: auto;
    }

    body .Htl_New_RoomPicker .psngr_applyBox {
        margin-top: 20px;
    }

    body .Htl_New_RoomPicker .psngr_applyBox button.btn.btn-block {
        width: 100%;
        height: 50px;
        border-radius: 25px;
        font-size: 16px;
    }

    body .Htl_New_RoomPicker .Htl_New_Room_addRoom {
        margin: 15px 0;
        padding: 12px;
        text-align: center;
        border: 1px dashed #004a97;
        border-radius: 10px;
        color: #004a97;
        font-family: 'AvenirHeavy', 'BukraBold' !important;
        font-size: 14px;
        cursor: pointer;
    }

    /* Bottom sheet overlay backdrop */
    .mob-bottom-sheet-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9998;
    }

    /* Bottom sheet drag handle indicator */
    .Htl_New_RoomPicker::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background: #ddd;
        border-radius: 2px;
        margin: 0 auto 15px;
    }

    @keyframes mobileBottomSheetSlideUp {
        from {
            transform: translateY(100%);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    /* ==========================================
       MOBILE POPUP CALENDAR - Modal card style (SouqSafar reference)
       #ui-datepicker-div is styled as modal via inline JS.
       These rules style inner elements when modal is active (position:fixed).
       ========================================== */
    /* Dark backdrop behind the calendar modal */
    .mob-cal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9998;
    }

    /* Home-page transfers date picker (Litepicker). Lifted onto <body> and given
       this class by TransferSearch.js so it presents as the same centered modal
       card as the jQuery-UI calendars above (#ui-datepicker-div.mob-cal-modal). */
    .litepicker.mob-litepicker-modal {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        max-width: 92vw !important;
        max-height: 85vh !important;
        margin: 0 !important;
        background: #fff !important;
        z-index: 9999 !important;
        padding: 16px !important;
        overflow-y: auto !important;
        border: none !important;
        border-radius: 16px !important;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2) !important;
        display: block !important;
    }

    .litepicker.mob-litepicker-modal .container__months {
        box-shadow: none !important;
        width: auto !important;
    }

    /* The calendar box itself. Driven by a stable class (NOT the inline
       position:fixed attribute) so jQuery UI re-renders on month nav / date
       select can no longer wipe the styling and leave the backdrop overlapping. */
    #ui-datepicker-div.mob-cal-modal {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 92% !important;
        max-width: 380px !important;
        max-height: 85vh !important;
        margin: 0 !important;
        background: #fff !important;
        z-index: 9999 !important;
        padding: 20px !important;
        overflow-y: auto !important;
        border: none !important;
        border-radius: 16px !important;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2) !important;
        display: block !important;
    }

    /* Done / Clear action bar injected into the modal */
    #ui-datepicker-div.mob-cal-modal .mob-calendar-done-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 0 0;
        margin-top: 10px;
        border-top: 1px solid #eee;
    }

    #ui-datepicker-div.mob-cal-modal .mob-cal-clear {
        background: none;
        border: none;
        color: #004a97;
        font-size: 14px;
        font-family: 'AvenirRegular', 'BukraRegular';
        cursor: pointer;
        padding: 8px 0;
    }

    #ui-datepicker-div.mob-cal-modal .mob-cal-done {
        background: #004a97;
        color: #fff;
        border: none;
        border-radius: 20px;
        padding: 10px 30px;
        font-size: 15px;
        font-family: 'AvenirHeavy', 'BukraBold';
        cursor: pointer;
    }

    #ui-datepicker-div.mob-cal-modal .ui-datepicker-header {
        background: #fff !important;
        border: none !important;
        border-bottom: 1px solid #f0f0f0 !important;
        padding: 12px 0 !important;
    }

    #ui-datepicker-div.mob-cal-modal .ui-datepicker-prev,
    #ui-datepicker-div.mob-cal-modal .ui-datepicker-next {
        cursor: pointer !important;
        top: 12px !important;
    }

    #ui-datepicker-div.mob-cal-modal .ui-datepicker-title {
        font-size: 17px !important;
        font-family: 'AvenirHeavy', 'BukraBold' !important;
        color: #001326 !important;
    }

    #ui-datepicker-div.mob-cal-modal .ui-datepicker-calendar {
        width: 100% !important;
        border-collapse: collapse !important;
    }

    #ui-datepicker-div.mob-cal-modal .ui-datepicker-calendar th {
        padding: 10px 0 !important;
        font-size: 13px !important;
        color: #888 !important;
        font-family: 'AvenirRegular', 'BukraRegular' !important;
        font-weight: normal !important;
    }

    #ui-datepicker-div.mob-cal-modal .ui-datepicker-calendar td {
        padding: 3px !important;
        text-align: center !important;
    }

    #ui-datepicker-div.mob-cal-modal .ui-datepicker-calendar td a,
    #ui-datepicker-div.mob-cal-modal .ui-datepicker-calendar td span {
        width: 38px !important;
        height: 38px !important;
        line-height: 38px !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 14px !important;
        margin: 0 auto !important;
        color: #001326;
    }

    #ui-datepicker-div.mob-cal-modal .ui-state-active {
         background: #0085cc !important;
        color: #ffffff !important;
    }

    #ui-datepicker-div.mob-cal-modal .ui-state-highlight {
        background: #0085cc !important;
        color: #ffffff !important;
        border-radius: 5px;
    }

    #ui-datepicker-div.mob-cal-modal .ui-state-disabled span {
        color: #ccc !important;
    }
#ui-datepicker-div.mob-cal-modal td.ui-datepicker-current-day {
    background: #0085cc !important;
    color: #fff;
    border-radius:5px;
}
    @keyframes mobileCalendarFadeIn {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* ==========================================
       MOBILE SEARCH SECTION DESIGN
       ========================================== */

    /* Search area container */
    .search_are_outer {
        padding: 15px 10px !important;
    }

    .searchpanel_box {
        border-radius: 16px;
        padding: 15px !important;
    }

    /* Module tabs - horizontal scrollable */
    ul.hmsearchTabs {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        gap: 5px !important;
        padding: 3px !important;
        margin-bottom: 15px !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    ul.hmsearchTabs::-webkit-scrollbar {
        display: none;
    }

    ul.hmsearchTabs li {
        flex-shrink: 0;
    }

    ul.hmsearchTabs li a {
        font-size: 13px !important;
        padding: 8px 14px !important;
        height: 36px !important;
        white-space: nowrap;
    }

    ul.hmsearchTabs li a span {
        white-space: nowrap;
    }

    ul.hmsearchTabs li a i {
        width: 16px !important;
        height: 16px !important;
    }

    /* Search form fields - stacked layout */
    .search_hm_main .field_row {
        gap: 12px;
    }

    .search_hm_main .form-group {
        height: 60px !important;
        border-radius: 10px !important;
        padding: 10px 12px 10px 50px !important;
        border-color: #ccd6e0 !important;
    }

    .hmflnewfld label {
        font-size: 12px !important;
        line-height: 14px !important;
        color: #777 !important;
    }

    .hmflnewfld input {
        font-size: 14px !important;
        height: 24px !important;
    }

    .hmflnewfld select {
        font-size: 14px !important;
        height: 24px !important;
    }

    /* From/To field icons */
    .fldFrom:after,
    .fldTo:after,
    .fldDepart:after,
    .fldReturn:after,
    .fldpassnger:after,
    .hmnewLocIcon:after,
    .hmnewflagIcon:after,
    .hmnewCabinIcon:after {
        top: 10px !important;
        left: 10px !important;
        padding: 16px !important;
    }

    /* Calendar fields side by side */
    .hm_clndr_main .field_clm_2 {
        width: calc(50% - 6px) !important;
    }

    /* Search button */
    .search_hm_main .searchBtn,
    .searchBtn {
        height: 50px !important;
        font-size: 15px !important;
        border-radius: 25px !important;
    }

    /* Flight tabs (One Way / Round Trip / Multi City) */
    .searchpanel_box .flight_tabs_wrpr {
        margin-bottom: 10px;
    }

    .searchpanel_box .flight_tabs_wrpr .flight_tabs li a {
        font-size: 12px !important;
        padding: 5px 8px 5px 22px !important;
    }

    /* Non-stop / Direct flight checkbox */
    .hmnewNonStops {
        margin-bottom: 10px;
    }

    .hmnewNonStops .hmcol_4.hmStops {
        gap: 10px;
    }

    .hmnewNonStops .hmcol_4.hmStops label {
        font-size: 13px;
    }

    /* Transfer panel fields */
    .transfers_panel .form-group {
        height: 60px !important;
        padding: 10px 12px 10px 50px !important;
        border-radius: 10px !important;
    }

    .transfers_panel .FilghtClass .search_field_main {
        flex-wrap: wrap;
    }

    .TransfersSrch .search_field_main {
        flex-wrap: wrap !important;
    }

    .hmnewtransfersDates {
        flex-wrap: nowrap;
    }

    .hmnewtransfersDates .transtime {
        font-size: 13px !important;
        width: 65% !important;
    }

    /* Activity panel fields */
    .activity_panel .form-group {
        height: 60px !important;
        padding: 10px 12px 10px 50px !important;
        border-radius: 10px !important;
    }

    /* Dynamic package fields */
    .hmdynmicFld01 {
        height: 60px !important;
        padding: 10px 12px 10px 50px !important;
        border-radius: 10px !important;
    }

    /* Dynamic package Departure/Return dates: align with the other fields.
       Without this they keep the desktop 72px height + 45% width and stack
       unevenly, breaking the field spacing/alignment on mobile. Render them as a
       clean 2-up row that matches the full-width fields' height and padding. */
    .hmnewDynamicPackSearch .hm_clndr_main.hmnewDynamicPackCalendar {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
        width: 100% !important;
        margin-bottom: 0 !important;
    }

    .hmnewDynamicPackSearch .hm_clndr_main.hmnewDynamicPackCalendar .field_clm_2 {
        width: calc(50% - 5px) !important;
        height: 60px !important;
        padding: 10px 12px 10px 50px !important;
        margin-bottom: 0 !important;
    }

    /* Hotel search fields */
    .hotel_search .hm_clndr_main .field_clm_2 {
        width: calc(50% - 5px) !important;
    }

    .hotel_search .field_clm_3 {
        margin-bottom: 0 !important;
    }

    /* Autocomplete dropdown mobile.
       IMPORTANT: .flight_autocomplete / .Dy_autoComplete is the always-present
       wrapper around the From/To text input, NOT just the dropdown. Making the
       wrapper position:fixed inset:0 turned every field's input wrapper into a
       full-screen overlay that covered all fields (blocking clicks) and showed the
       "From"/"To" placeholder as stray text. Keep the wrapper inline; apply the
       full-screen picker treatment only to the OPEN dropdown menu. */
    /* Scope to the dynamic-package field only. .flight_autocomplete is shared by the
       home + hotel-modify autocompletes (jQuery UI / react-autocomplete), which have
       their own absolute-positioned dropdowns — overriding them here broke those. */
    .Dy_autoComplete {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        max-height: none !important;
        z-index: auto !important;
        padding-top: 0 !important;
        overflow: visible !important;
    }

    /* Match the hotel module: a clean full-width dropdown pinned directly under the
       field (override Popper's transform so it spans the whole field, not a narrow
       floating box). */
    .Dy_autoComplete .dropdown-menu.show {
        position: absolute !important;
        inset: auto !important;
        top: 100% !important;
        left: -50px !important;
        right: -12px !important;
        transform: none !important;
        width: auto !important;
        max-height: 320px !important;
        overflow-y: auto !important;
        z-index: 9999 !important;
        margin-top: 4px !important;
        background: #fff !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 10px !important;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15) !important;
        padding: 4px 0 !important;
    }
    /* Comfortable rows with separators, like the hotel list. */
    .Dy_autoComplete .dropdown-menu.show .dropdown-item {
        padding: 12px 15px !important;
        white-space: normal !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }

    /* ==========================================
       HOTEL RESULT — mobile Filter + Sort buttons and Sort modal
       (Sort/Price/Rating move into a left slide-in modal like the flight filter.)
       ========================================== */

    /* Sort/Price/Rating bar is hidden inline on mobile; it becomes a left modal. */
    .Hotel_new_sec_main .HtlSortModalWrap {
        display: none;
    }

    .Hotel_new_sec_main .HtlSortModalWrap.open {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 85%;
        max-width: 330px;
        height: 100vh;
        background: #fff;
        z-index: 100000;
        overflow-y: auto;
        padding: 45px 15px 20px;
        box-shadow: rgba(0, 0, 0, 0.1) 2px 0 8px;
        animation: htlSortSlideIn 0.25s ease-out;
    }

    @keyframes htlSortSlideIn {
        from { transform: translateX(-100%); }
        to { transform: translateX(0); }
    }

    /* Inside the modal every option is a full-width row, left-aligned, even gaps.
       (Overrides the desktop space-between/centering that caused the big gap and
       the <ul> default indent that misaligned Price/Rating vs Sort By.) */
    .Hotel_new_sec_main .HtlSortModalWrap.open .Fl_ChepestCoul.HtlSortSec {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: stretch;
        gap: 14px;
        width: 100%;
    }
    .Hotel_new_sec_main .HtlSortModalWrap.open .flFilterArea,
    .Hotel_new_sec_main .HtlSortModalWrap.open .flNewSortArea {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        width: 100%;
        margin: 0;
    }
    .Hotel_new_sec_main .HtlSortModalWrap.open ul.fltopnewFilter {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 14px;
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .Hotel_new_sec_main .HtlSortModalWrap.open ul.fltopnewFilter li,
    .Hotel_new_sec_main .HtlSortModalWrap.open .flNewSortArea .sort-dropdown-container {
        width: 100%;
        margin: 0;
        text-align: left;
    }

    /* Dark backdrop behind the sort modal */
    .Hotel_new_sec_main .HtlSort_overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 99999;
    }

    /* Close (X) button for the sort modal */
    .Hotel_new_sec_main .HtlSort_close {
        display: block;
        position: absolute;
        top: 12px;
        right: 12px;
        width: 26px;
        height: 26px;
        cursor: pointer;
        z-index: 2;
    }
    .Hotel_new_sec_main .HtlSort_close::before,
    .Hotel_new_sec_main .HtlSort_close::after {
        content: '';
        position: absolute;
        top: 12px;
        left: 3px;
        width: 20px;
        height: 2px;
        background: #001326;
    }
    .Hotel_new_sec_main .HtlSort_close::before { transform: rotate(45deg); }
    .Hotel_new_sec_main .HtlSort_close::after { transform: rotate(-45deg); }

    /* Circular icon+label buttons, stacked bottom-right (SouqSafar reference):
       Sort on top, Filter below. */
    .Hotel_new_sec_main .Filterbtn,
    .Hotel_new_sec_main .Sortbtn {
        position: fixed;
        left: auto;
        right: 15px;
        transform: none;
        width: 60px;
        height: 60px;
        padding: 0;
        border-radius: 50%;
        background: #41b4e6;
        color: #fff !important;
        box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.25);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        font-size: 10px;
        line-height: 1.1;
        text-align: center;
        z-index: 99;
        margin: 0;
    }

    .Hotel_new_sec_main .Filterbtn { bottom: 15px; }
    .Hotel_new_sec_main .Sortbtn { bottom: 85px; }

    .Hotel_new_sec_main .Filterbtn .mob_filterIcon {
        margin: 0;
    }

    .Hotel_new_sec_main .mob_sortIcon {
        display: inline-block;
        margin: 0;
        font-style: normal;
        line-height: 1;
    }
    .Hotel_new_sec_main .mob_sortIcon::before {
        content: '\21C5';
        font-size: 20px;
        font-weight: bold;
    }

    .Hotel_new_sec_main .Filterbtn span,
    .Hotel_new_sec_main .Sortbtn span {
        white-space: nowrap;
    }
    a.theme_btnStyle.htl_map_btn.map-view-trigger.Filterbtn {
    border-radius: 10px !important;
}

    /* Filter modal header bar (title + close X), sticky at the top of the panel. */
    .Hotel_new_sec_main .Filter_new_sec .HtlFilterHead {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        background: #41b4e6;
        padding: 12px 15px;
        margin: -10px -10px 12px;
        z-index: 5;
    }
    .Hotel_new_sec_main .Filter_new_sec .HtlFilterHead h3 {
        margin: 0;
        font-size: 16px;
        color: #fff;
        font-family: 'AvenirHeavy', 'BukraBold';
    }
    .Hotel_new_sec_main .Filter_new_sec .HtlFilterHead_close {
        position: relative;
        width: 24px;
        height: 24px;
        cursor: pointer;
        flex-shrink: 0;
    }
    .Hotel_new_sec_main .Filter_new_sec .HtlFilterHead_close::before,
    .Hotel_new_sec_main .Filter_new_sec .HtlFilterHead_close::after {
        content: '';
        position: absolute;
        top: 11px;
        left: 2px;
        width: 20px;
        height: 2px;
        background: #fff;
    }
    .Hotel_new_sec_main .Filter_new_sec .HtlFilterHead_close::before { transform: rotate(45deg); }
    .Hotel_new_sec_main .Filter_new_sec .HtlFilterHead_close::after { transform: rotate(-45deg); }

    /* Old absolute close icon sits behind the map; hide it now the header has one. */
    .Hotel_new_sec_main .Filter_new_sec .package_filter.hotlNewFilter > span.filterClose {
        display: none;
    }

    /* Modify bar: truncate the location (col 1) and dates/guests (col 2) with ellipsis.
       .modifyfldtls is a flex row so text-overflow can't work on it directly — make it
       block; and the location text lives in an h2>span, so ellipsis must be on those. */
    .Hotel_new_sec_main .flmodifyDtls .modifyHead {
        min-width: 0;
        overflow: hidden;
    }
    .Hotel_new_sec_main .flmodifyDtls .modifyHead h2,
    .Hotel_new_sec_main .flmodifyDtls .modifyHead h2 span {
        display: block;
        max-width: 100%;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .Hotel_new_sec_main .flmodifyDtls .modifyfldtls {
        display: block;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Hotel details gallery: show only the single main image + a "See all photos"
       button; hide the thumbnail grid (second column / second row). */
    .htlDtlsPics {
        padding-bottom: 0 !important;
    }
    .htl_dtls_FilterSec {
        margin: 0 !important;
        flex-wrap: wrap;
    }
    /* Advanced / Breakfast / Free Cancellation / Room Type / Clear Filter:
       compact, evenly spaced, left-aligned pills instead of cramped inline-block. */
    .htl_dtls_FilterSec .htl_dtls_FilterSec_lft,
    .htl_dtls_FilterSec .htl_dtls_FilterSec_rht {
        width: 100%;
    }
    .htl_dtls_FilterSec .htl_dtls_FilterSec_list ul {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        margin: 0;
        padding: 0;
    }
    .htl_dtls_FilterSec .htl_dtls_FilterSec_list ul li {
        margin: 0 !important;
    }
    .htl_dtls_FilterSec .htl_dtls_FilterSec_list ul li a {
        padding: 5px 12px;
        font-size: 13px;
    }
    /* Drop the desktop 33px offset above Clear Filter + tighten the search box */
    .htl_dtls_FilterSec .htl_dtls_FilterSec_rht {
        margin-top: 6px;
    }
    .htl_dtls_FilterSec .htl_dtls_FilterSec_rht .htl_dtls_FilterSec_list ul li {
        margin-top: 0 !important;
    }
    .htl_dtls_FilterSec .filer_srch input {
        height: 34px;
        top: 0;
        font-size: 14px;
    }
    .jz-room-selection-page {
        padding-bottom: 0px;
        padding-top: 0px;
    }
    .package_details_ancr_list {
        margin-bottom: 0;
    }
    .DyhtlDtlsnewGalery .htlDtlsnewGaleryCol02,
    .DyhtlDtlsnewGalery .htlDtlsgalerySecondrow {
        display: none !important;
    }
    .DyhtlDtlsnewGalery .htlDtlsnewGaleryCol01 {
        position: relative;
        width: 100% !important;
    }
    .DyhtlDtlsnewGalery .htlDtlsnewGaleryCol01 img {
        width: 100%;
        height: 220px !important;
        object-fit: cover;
        border-radius: 8px;
        display: block;
    }
    .DyhtlDtlsnewGalery .htlDtlsnewGaleryCol01 .seeallphoto_mob {
        display: block;
        position: absolute;
        bottom: 12px;
        right: 12px;
        background: rgba(0, 0, 0, 0.55);
        color: #fff;
        border: 1px solid #fff;
        border-radius: 6px;
        padding: 8px 16px;
        font-size: 13px;
        cursor: pointer;
        z-index: 2;
    }

    /* Dynamic package modify bar: one compact line (pax | dates | pencil), like the
       hotel modify bar — instead of full-width stacked boxes. */
    .DY_modify_new_sec .RsltFtrPriceForm_dy {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
    }
    /* first + second column: truncate with ellipsis */
    .DY_modify_new_sec .RsltFtrPriceForm_dy .RsltFltr_field_ourt_dy {
        width: auto !important;
        min-width: 0 !important;
        height: auto !important;
        border: none !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    /* pax keeps its natural width; dates take the remaining space and truncate */
    .DY_modify_new_sec .RsltFtrPriceForm_dy .dyrsltModifyGuestfld {
        flex: 0 0 auto !important;
    }
    .DY_modify_new_sec .RsltFtrPriceForm_dy .RsltFltr_field_ourt_dy:not(.dyrsltModifyGuestfld) {
        flex: 1 1 auto !important;
    }
    /* block (not flex) so text-overflow:ellipsis actually renders the "…" */
    .DY_modify_new_sec .RsltFtrPriceForm_dy .RsltFltr_field_dvd2_dy {
        display: block !important;
        line-height: normal !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .DY_modify_new_sec .RsltFtrPriceForm_dy .RsltFltrfld_adulticon_dy,
    .DY_modify_new_sec .RsltFtrPriceForm_dy .RsltFltrfld_clndericon_dy {
        display: inline-block !important;
        vertical-align: middle !important;
        margin-right: 4px !important;
    }
    .DY_modify_new_sec .RsltFtrPriceForm_dy .RsltFltr_field_dvd2_dy span {
        display: inline !important;
        white-space: nowrap !important;
    }
    /* Change trip = the existing pencil icon only; hide the text (no duplicate icon). */
    .DY_modify_new_sec .RsltFtrPriceForm_dy .RsltFltr_fieldChange_dy {
        width: auto !important;
        flex: 0 0 auto !important;
        height: auto !important;
        padding: 10px 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .DY_modify_new_sec .RsltFtrPriceForm_dy .RsltFltr_fieldChange_dy span {
        display: none !important;
    }
    .DY_modify_new_sec .RsltFtrPriceForm_dy .RsltFltr_fieldChange_dy .dymodifyEditicon {
        margin: 0 !important;
    }
    .DY_modify_new_sec .RsltFtrPriceForm_dy {
    padding: 10px !important;
}

    /* ==========================================
       DYNAMIC PACKAGE RESULT — mobile Filter button + left slide-in filter modal
       (same pattern as the hotel result page).
       ========================================== */
    .DynamicContentArea .DyFilterModalWrap {
        display: none;
    }
    .DynamicContentArea .DyFilterModalWrap.open {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 88%;
        max-width: 340px;
        height: 100vh;
        background: #fff;
        z-index: 100000;
        overflow-y: auto;
        padding: 15px 15px 20px;
        box-shadow: rgba(0, 0, 0, 0.1) 2px 0 8px;
        animation: dyFilterSlideIn 0.25s ease-out;
    }
    @keyframes dyFilterSlideIn {
        from { transform: translateX(-100%); }
        to { transform: translateX(0); }
    }
    .DynamicContentArea .DyFilter_overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 99999;
    }
    .DynamicContentArea .DyFilter_close {
        display: block;
        position: absolute;
        top: 12px;
        right: 12px;
        width: 26px;
        height: 26px;
        cursor: pointer;
        z-index: 2;
    }
    .DynamicContentArea .DyFilter_close::before,
    .DynamicContentArea .DyFilter_close::after {
        content: '';
        position: absolute;
        top: 12px;
        left: 3px;
        width: 20px;
        height: 2px;
        background: #001326;
    }
    .DynamicContentArea .DyFilter_close::before { transform: rotate(45deg); }
    .DynamicContentArea .DyFilter_close::after { transform: rotate(-45deg); }

    /* Round Filter button, bottom-right (Jazeera light blue). */
    .DynamicContentArea .DyFilterbtn {
        position: fixed;
        right: 15px;
        bottom: 15px;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: #41b4e6;
        color: #fff !important;
        box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.25);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        font-size: 10px;
        line-height: 1.1;
        text-align: center;
        z-index: 99;
        cursor: pointer;
    }
    .DynamicContentArea .DyFilterbtn .mob_filterIcon {
        margin: 0;
    }
    .DynamicContentArea .DyFilterbtn span {
        white-space: nowrap;
    }

    /* Session timer: full-width bar at the header bottom (in-flow, never beside the
       logo). Force the header to stack so the timer drops to its own line. */
    header.header.inner_header {
        display: block !important;
    }
    header.header.inner_header .timer_DY,
    .timer_DY {
        position: static !important;
        float: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        width: 100% !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        height: auto !important;
        margin: 6px 0 0 !important;
        padding: 6px 10px !important;
        border-radius: 0 !important;
        font-size: 11px !important;
    }
    .timer_DY:before {
        display: none !important;
    }
    .timer_DY h4 {
        font-size: 11px !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.1 !important;
    }
    .timer_DY #timer {
        font-size: 16px !important;
        line-height: 1 !important;
    }
    .DynamicContentArea {
    padding-top: 5px !important;
}
.dypackDestHeads{display: none;}
.newdypackRsltBox {
    margin-bottom: 15px !important;
    padding: 10px !important;
}
.newdypackResultArea {
    margin-top: 10px;
    margin-bottom: 10px;
}
.flDtlsModal.brandedfare_new .modal-body{
    padding-top: 0px !important;
}
.hotlDescriptionBox {
    margin-top: 0px;
}
.HtlDtlsDesc {
    padding: 5px 0 15px;
}
.DyActvityBtn .dyAccomResultDtls p {
    min-height: auto;
}
.activity_gap {
    gap: 0px;
}
.DyActvityBtn .dyAccomResultDtls {
    padding: 10px;
}
}
/* ===========================================================
   Dynamic package guest/room bottom sheet — match the Hotel module design.
   .psngerBox already opens as a bottom sheet (FooterScript); this styles its
   inner rows like .Htl_New_RoomPicker: label+subtitle left, control right,
   dividers, drag handle, dashed Add Room, full-width Apply. Design only.
   =========================================================== */
@media (max-width: 767px) {
    .psngerBox::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background: #ddd;
        border-radius: 2px;
        margin: 0 auto 15px;
    }
    .psngerBox .room-repeat.packageRoom h3 {
        font-size: 16px;
        font-family: 'AvenirHeavy', 'BukraBold' !important;
        color: #001326;
        margin-bottom: 4px;
    }
    .psngerBox .package_Cloned_Input {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        padding: 0 !important;
    }
    .psngerBox .package_Cloned_Input > li {
        width: 100% !important;
        padding: 12px 0;
        border-bottom: 1px solid #f0f0f0;
    }
    .psngerBox .package_Cloned_Input > li:last-child {
        border-bottom: none;
    }
    .psngerBox .package_Cloned_Input > li .form-group {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin: 0 !important;
    }
    .psngerBox .package_Cloned_Input > li label {
        font-size: 16px;
        color: #001326;
        font-family: 'AvenirHeavy', 'BukraBold' !important;
        flex: 1;
        display: flex;
        flex-direction: column;
        margin: 0;
        line-height: 1.3;
    }
    .psngerBox .package_Cloned_Input > li label span {
        font-size: 13px;
        color: #888;
        font-family: 'AvenirRegular', 'BukraRegular' !important;
        margin-top: 2px;
    }
    .psngerBox .package_Cloned_Input > li select.form-control {
        width: auto !important;
        min-width: 96px;
        height: 44px !important;
        border: 1px solid #ddd !important;
        border-radius: 8px !important;
        padding: 0 14px !important;
        font-size: 15px;
        color: #001326;
        background: #fff;
        flex-shrink: 0;
        appearance: auto;
        -webkit-appearance: auto;
    }
    .psngerBox .package_Cloned_Input > li .down_arrow:after {
        display: none;
    }
    .psngerBox .addRoom {
        display: block;
        width: 100%;
        margin: 15px 0 0;
        padding: 12px;
        text-align: center;
        border: 1px dashed #004a97;
        border-radius: 10px;
        color: #004a97;
        font-family: 'AvenirHeavy', 'BukraBold' !important;
        font-size: 14px;
        cursor: pointer;
    }
    .psngerBox .psngr_applyBox {
        margin-top: 18px;
    }
    .psngerBox .psngr_applyBox button.btn.btn-block {
        width: 100%;
        height: 50px;
        border-radius: 25px;
        font-size: 16px;
    }
}

/* ===========================================================
   Dynamic package (home) guest/room picker → mobile bottom sheet.
   This picker (#HtlNew_psgr_show) toggles via inline style.display, so
   FooterScript's class-based bottom-sheet observer never converts it, and the
   desktop .searchpanel_box .Htl_New_RoomPicker rule out-specificities the
   generic mobile rule. An id-based rule wins and pins it to the bottom.
   =========================================================== */
@media (max-width: 767px) {
    #HtlNew_psgr_show.Htl_New_RoomPicker {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 82vh !important;
        margin: 0 !important;
        border: none !important;
        border-radius: 20px 20px 0 0 !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15) !important;
        z-index: 99999 !important;
        padding: 22px 20px 30px !important;
        overflow-y: auto !important;
        background: #fff !important;
        animation: mobileBottomSheetSlideUp 0.3s ease-out !important;
    }
    /* overlay removed — keep it invisible if ever present */
    .Htl_New_psgr_overlay {
        display: none !important;
    }
    /* Apply button (matches the hotel sheet) */
    #HtlNew_psgr_show .psngr_applyBox {
        margin-top: 18px;
    }
    #HtlNew_psgr_show .psngr_applyBox button.btn.btn-block {
        width: 100%;
        height: 50px;
        border-radius: 25px;
        font-size: 16px;
        background: #ffce00;
        color: #001326;
        font-family: 'AvenirHeavy', 'BukraBold' !important;
    }
    /* Close button → top-right X of the sheet */
    #HtlNew_psgr_show .Htl_New_psgr_close {
        position: absolute;
        top: 14px;
        right: 16px;
        font-size: 0;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: #eef2f7 url(../images/close.svg) center/12px no-repeat;
        z-index: 5;
    }
    /* drag handle */
    #HtlNew_psgr_show.Htl_New_RoomPicker::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background: #ddd;
        border-radius: 2px;
        margin: 0 auto 16px;
    }
}

/* ===========================================================
   Dynamic package (home) room picker — inner content on mobile.
   This picker stays inside .searchpanel_box, so the desktop
   .searchpanel_box .Htl_New_RoomPicker rules out-specificity the mobile
   `body .Htl_New_RoomPicker` styling. Re-apply the bottom-sheet look with id
   specificity so the rows/steppers/count match the hotel sheet.
   =========================================================== */
@media (max-width: 767px) {
    #HtlNew_psgr_show .Htl_New_Room_repeat_tiitle,
    #HtlNew_psgr_show > .Htl_New_Room_repeat > h3 {
        font-size: 16px;
        font-family: 'AvenirHeavy', 'BukraBold' !important;
        color: #001326;
        margin-bottom: 6px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    #HtlNew_psgr_show .Htl_New_Room_out {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        padding: 6px 0;
    }
    #HtlNew_psgr_show .htl_new_dvd {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding: 12px 0;
        border-bottom: 1px solid #f0f0f0;
    }
    #HtlNew_psgr_show .htl_new_dvd:last-child {
        border-bottom: none;
    }
    #HtlNew_psgr_show .Htl_New_Room_label {
        font-size: 16px;
        color: #001326;
        font-family: 'AvenirHeavy', 'BukraBold' !important;
        flex: 1;
        display: flex !important;
        flex-direction: column;
    }
    #HtlNew_psgr_show .Htl_New_Room_label span {
        display: block;
        font-size: 13px;
        color: #888;
        font-family: 'AvenirRegular', 'BukraRegular' !important;
        margin-top: 2px;
        padding-left: 0;
    }
    #HtlNew_psgr_show .Htl_New_Room_Field {
        display: flex;
        align-items: center;
        border: 1px solid #ddd;
        border-radius: 8px;
        overflow: hidden;
        min-width: 130px;
        height: 40px;
        flex-shrink: 0;
        margin-bottom: 0;
    }
    #HtlNew_psgr_show .Htl_New_Room_Field_Btn {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f5f8fc;
        cursor: pointer;
        flex-shrink: 0;
    }
    #HtlNew_psgr_show .Htl_New_Room_Field_Btn img {
        width: 14px;
        height: 14px;
    }
    #HtlNew_psgr_show .htl_new_count {
        flex: 1;
        min-width: 56px;
        text-align: center;
        padding: 0 6px;
        font-size: 14px;
        font-family: 'AvenirHeavy', 'BukraBold' !important;
        color: #001326;
        background: transparent !important;
        white-space: nowrap;
    }
    #HtlNew_psgr_show .Htl_New_Room_addRoom {
        margin: 15px 0 0;
        padding: 12px;
        text-align: center;
        border: 1px dashed #004a97;
        border-radius: 10px;
        color: #004a97;
        font-family: 'AvenirHeavy', 'BukraBold' !important;
        font-size: 14px;
        cursor: pointer;
    }
    #HtlNew_psgr_show .Htl_New_Room_repeat_tiitle .remove-room-btn {
        background: none;
        border: none;
        padding: 0;
    }
    .sumry_bnr_img_dy:before {
    border-radius: 12px;
}
}

/* ===========================================================
   Dynamic package (React) guest/room bottom sheet.
   .searchpanel_box uses backdrop-filter, which makes it the containing block
   for position:fixed descendants - that is why this sheet was being clipped
   inside the search card instead of anchoring to the viewport like the Hotel
   one (that picker escapes because FooterScript moves it to <body>).
   Dropping the blur on mobile hands the containing block back to the viewport.
   =========================================================== */
@media (max-width: 767px) {
    .searchpanel_box {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .Htl_New_sheetOverlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9998;
    }
}
/* Desktop keeps the inline dropdown, so no dimming there */
@media (min-width: 768px) {
    .Htl_New_sheetOverlay {
        display: none;
    }
}

/* ===========================================================
   Passenger / guest bottom sheets (all modules + modify search):
   pin the Apply button flush to the bottom edge of the popup.
   The sheet is the scroll container, so a sticky footer keeps Apply reachable
   while rows scroll underneath it. The sheet's own bottom padding is dropped -
   the footer supplies that spacing instead, otherwise a white gap is left
   under the button.
   =========================================================== */
@media (max-width: 767px) {
    body .Htl_New_RoomPicker,
    body .searchpanel_box .Htl_New_RoomPicker,
    body #HtlNew_psgr_show.Htl_New_RoomPicker,
    body .psngerBox {
        padding-bottom: 0 !important;
    }

    body .Htl_New_RoomPicker .psngr_applyBox,
    body #HtlNew_psgr_show.Htl_New_RoomPicker .psngr_applyBox,
    body .psngerBox .psngr_applyBox {
        position: relative;
        bottom: 0;
        margin-top: 18px;
        padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px));
        background: #fff;
        z-index: 5;
    }

    body .Htl_New_RoomPicker .psngr_applyBox button.btn.btn-block,
    body #HtlNew_psgr_show.Htl_New_RoomPicker .psngr_applyBox button.btn.btn-block,
    body .psngerBox .psngr_applyBox button.btn.btn-block {
        width: 100%;
        height: 50px;
        border-radius: 25px;
        font-size: 16px;
        margin: 0;
    }
}

/* ===========================================================
   Mobile side menu: language / currency dropdowns.
   The slide-in menu ships in two markup variants (#sidebar > .nav_mobShow on a
   mobile UA, .top_search_menu.nav_mobHide otherwise), so this is scoped to
   ul.headerMenu - the one wrapper common to both. Bootstrap/Popper's absolute
   placement made the currency list hang off the side of the 270px panel and run
   past the bottom of the screen; pin it into the menu flow at full panel width
   and give it its own scrollbar so every currency stays reachable.
   =========================================================== */
@media (max-width: 767px) {
    ul.headerMenu li.nav-item.dropdown,
    ul.headerMenu li.hmlang,
    #sidebar .navbar-nav li.dropdown {
        position: static !important;
    }

    ul.headerMenu .dropdown-menu,
    #sidebar .navbar-nav .dropdown-menu {
        position: static !important;
        float: none !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 50vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    ul.headerMenu .dropdown-menu .dropdown-item {
        display: flex !important;
        align-items: center;
        gap: 8px;
        white-space: normal !important;
        padding: 12px 20px !important;
        border-bottom: 1px solid #eee;
    }

    ul.headerMenu .dropdown-menu .dropdown-item .country_flag {
        flex: 0 0 auto;
        line-height: 0;
    }

    ul.headerMenu .dropdown-menu .dropdown-item .transformCaptialize {
        flex: 1;
    }
    li.nav-item.dropdown.show {
    display: block !important;
}
}