/*** Topbar Responsive ***/
@media (max-width: 768px) {
    .topbar {
        display: none;
    }
}
@media (max-width: 992px) {
    .mega-menu-dropdown {
        width: 90vw;
    }
}

.navbar-nav .nav-link {
    font-weight: 500;
}

.dropdown-item:hover {
    background-color: #e9f7fe;
    color: #0d6efd;
}



/*** Back to Top Responsive ***/
@media (max-width: 768px) {
    .back-to-top {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
        font-size: 18px;
    }
}

/*** Destination Responsive ***/
/* Mobile responsive fix for search icon */
@media (max-width: 768px) {
    .destination .tab-class .tab-content .tab-pane .destination-img .search-icon {
        padding: 15px 15px 0 0;
    }

        .destination .tab-class .tab-content .tab-pane .destination-img .search-icon a i {
            width: 35px;
            height: 35px;
            font-size: 14px !important;
        }
}


/*** Services Section Responsive ***/
@media (min-width: 992px) {
    .services-container {
        flex-direction: row;
        align-items: center;
    }

    .services-content {
        flex: 1;
    }

    .cards-carousel {
        flex: 1;
    }
}

@media (max-width: 1199px) {
    .service-card {
        width: 280px;
        height: 400px;
    }

        .service-card.next {
            left: calc(50% + 150px);
        }

        .service-card.prev {
            left: calc(50% - 150px);
        }

        .service-card.hidden {
            left: calc(50% + 300px);
        }

        .service-card.hidden-left {
            left: calc(50% - 300px);
        }
}

@media (max-width: 991px) {
    .services-container {
        flex-direction: column;
    }

    .services-content {
        width: 100%;
    }

    .cards-carousel {
        width: 100%;
        height: 500px;
    }

    .service-card {
        width: 260px;
        height: 380px;
    }

    .services-section h1 {
        font-size: 2.4rem;
    }

    .service-card.next {
        left: calc(50% + 120px);
    }

    .service-card.prev {
        left: calc(50% - 120px);
    }

    .service-card.hidden {
        left: calc(50% + 240px);
    }

    .service-card.hidden-left {
        left: calc(50% - 240px);
    }
}

@media (max-width: 768px) {
    .services-section {
        padding: 80px 0;
    }

        .services-section h1 {
            font-size: 2rem;
        }

    .content-wrapper .name {
        font-size: 2rem;
    }

    .content-wrapper .des {
        font-size: 1rem;
    }

    .service-card {
        width: 240px;
        height: 340px;
    }

        .service-card.next {
            left: calc(50% + 100px);
        }

        .service-card.prev {
            left: calc(50% - 100px);
        }

        .service-card.hidden {
            left: calc(50% + 200px);
        }

        .service-card.hidden-left {
            left: calc(50% - 200px);
        }

    .cards-navigation {
        bottom: -60px;
        gap: 15px;
    }

    .prev-btn, .next-btn {
        width: 50px;
        height: 50px;
    }

    .card-indicators {
        margin-top: 80px;
    }
}

@media (max-width: 576px) {
    .services-section h1 {
        font-size: 1.8rem;
    }

    .services-content {
        padding: 30px 20px;
    }

    .content-wrapper .name {
        font-size: 1.8rem;
    }

    .service-card {
        width: 220px;
        height: 300px;
    }

        .service-card.next {
            left: calc(50% + 80px);
        }

        .service-card.prev {
            left: calc(50% - 80px);
        }

        .service-card.hidden {
            left: calc(50% + 160px);
        }

        .service-card.hidden-left {
            left: calc(50% - 160px);
        }

    .cards-navigation {
        bottom: -50px;
    }

    .card-indicators {
        margin-top: 70px;
    }
}

/*** Calendar Responsive ***/
@media (min-width: 769px) {
    /* ڈیسک ٹاپ پر کلینڈر فارم کے نیچے رہے اور چھپے نہ */
    .calendar-container {
        left: 0;
        right: auto;
        transform: none;
    }
}

@media (max-width: 768px) {
    .calendar-container {
        width: 100%;
        left: 0;
        right: 0;
    }

    .calendar-day {
        height: 36px;
        font-size: 0.85rem;
    }
}

@media (max-width: 576px) {
    .calendar-container {
        position: fixed !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 90%;
        max-width: 320px;
        margin-top: 0 !important;
        z-index: 2000 !important;
        box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    }

    .calendar-day {
        height: 34px;
    }
}

/** NEW PAGE START **/

/*** Responsive Adjustments ***/
@media (max-width: 992px) {
    .visa-right-panel {
        position: static;
        margin-top: 40px;
    }

    .country-selector .form-select {
        font-size: 1.2rem;
        padding: 15px 20px;
    }
}

@media (max-width: 768px) {
    .visa-info-section {
        padding: 60px 0;
    }

    #visaAccordion .accordion-button {
        font-size: 1.05rem;
        padding: 15px 20px;
    }

    .visa-right-panel .card-body {
        padding: 20px;
    }

    .visa-right-panel h3.text-success {
        font-size: 2.4rem;
    }
}
/* Responsive */
@media (max-width: 992px) {
    #visaTypesCollapse .card-body {
        padding: 25px 20px !important;
    }

    #visaTypesCollapse h4 {
        font-size: 1.6rem !important;
    }

    #visaTypesCollapse h3 {
        font-size: 2rem !important;
    }

    .quantity-selector {
        height: 45px;
    }

    .btn {
        padding: 10px 20px !important;
        font-size: 0.95rem !important;
    }
}
/* Responsive */
@media (max-width: 992px) {
    .visa-info-section {
        padding: 50px 0;
    }

    .visa-right-panel {
        position: static;
        margin-top: 30px;
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .holiday-packages-desc .display-5 {
        font-size: 2rem !important;
    }

    .desc-text-container p {
        font-size: 1rem !important;
    }

    #toggleDesc {
        font-size: 0.95rem !important;
    }
}

@media (max-width: 768px) {
    .btn-action-group {
        justify-content: center;
    }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .logo-track img {
        height: 60px;
        width: 150px;
        margin: 0 20px;
    }

    .logo-track {
        width: calc(150px * 24);
    }

    @keyframes scroll {
        100% {
            transform: translateX(calc(-150px * 12));
        }
    }
}

/* Responsive for Mobile/Tablet */
@media (max-width: 992px) {
    .stats1 {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .stat1 .num {
        font-size: 4rem;
    }
}

@media (max-width: 576px) {
    .stats1 {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .stat1 .num {
        font-size: 3.5rem;
    }

    .stat1 {
        padding: 30px 20px;
    }
}
/* Responsive Adjustments */
@media (max-width: 768px) {
    .newsletter-form {
        flex-direction: column !important;
    }

        .newsletter-form input,
        .newsletter-form button {
            width: 100%;
        }

    .display-5 {
        font-size: 2.5rem;
    }
}



/* Responsive Design */
@media (max-width: 992px) {
    .visa-assistance .row {
        flex-direction: column;
    }

    .visa-image {
        margin-bottom: 30px;
    }

    .ps-lg-5 {
        padding-left: 0 !important;
    }

    .display-6 {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    .display-6 {
        font-size: 2rem;
    }

    .btn-lg {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
    }
}

/* Responsive Design */
@media (max-width: 992px) {
    .btn-2 {
        width: 240px;
        height: 60px;
        font-size: 16px;
        padding: 0 40px;
    }
}

@media (max-width: 768px) {
    .btn-2 {
        width: 200px;
        height: 56px;
        font-size: 15px;
        padding: 0 30px;
    }

    .destinations-buttons .row {
        margin-bottom: 10px !important;
    }
}

@media (max-width: 576px) {
    .btn-2 {
        width: 180px;
        height: 52px;
        font-size: 14px;
        padding: 0 25px;
        margin: 8px 0;
    }

    .destinations-buttons .col-md-4 {
        margin-bottom: 5px;
    }
}
/* Responsive Design */
@media (max-width: 768px) {
    .packages-img img {
        height: 180px !important;
    }

    .packages-item:hover {
        transform: translateY(-5px);
    }
}

@media (max-width: 991px) {
    .destination-card {
        min-height: 200px !important;
    }
}

@media (max-width: 767px) {
    .gap-4 {
        gap: 1rem !important;
    }
}

/* Responsive Design */
@media (max-width: 1200px) {
    .packages-slider-container {
        overflow: hidden;
        margin: 0 -10px;
        padding: 0 10px;
    }
    
    .slider-item {
        flex: 0 0 calc(33.333% - 10px); /* 3 cards on tablet */
        max-width: calc(33.333% - 10px);
        min-width: calc(33.333% - 10px);
        margin: 0 5px;
    }
    
    .packages-slider-track {
        margin: 0 -5px;
    }
}

@media (max-width: 992px) {
    .slider-item {
        flex: 0 0 calc(33.333% - 15px); /* 3 cards on medium tablet */
        max-width: calc(33.333% - 15px);
        min-width: calc(33.333% - 15px);
    }
}

@media (max-width: 768px) {
    .slider-item {
        flex: 0 0 calc(50% - 8px); /* 2 cards on mobile */
        max-width: calc(50% - 8px);
        min-width: calc(50% - 8px);
        margin: 0 4px;
    }
    
    .packages-slider-track {
        margin: 0 -4px;
    }
    
    .filter-btn {
        padding: 6px 15px;
        font-size: 0.8rem;
        margin: 2px;
    }
    
    .slider-nav {
        width: 40px;
        height: 40px;
    }
    
    .slider-nav.prev {
        left: -20px;
    }
    
    .slider-nav.next {
        right: -20px;
    }
}
/* Holiday Package Page*/

/* Responsive Adjustments - Mobile & Tablet Friendly */
@media (max-width: 991.98px) {
    .package-card img {
        height: 280px;
    }

    .card-overlay {
        padding: 25px 20px 20px;
    }

        .card-overlay h5 {
            font-size: 1.3rem;
        }

    .badge-offer {
        top: 15px;
        left: 15px;
        padding: 6px 14px;
        font-size: 0.8rem;
    }

    .tab-class .nav.nav-pills .nav-link {
        min-width: 120px;
        padding: 10px 20px;
    }
}

@media (max-width: 767.98px) {
    .package-card img {
        height: 260px;
    }

    .card-overlay h5 {
        font-size: 1.2rem;
    }

    .badge-offer {
        font-size: 0.75rem;
    }
}

@media (max-width: 575.98px) {
    .package-card img {
        height: 240px;
    }

    .tab-class .nav.nav-pills {
        flex-wrap: wrap;
        gap: 10px;
    }

        .tab-class .nav.nav-pills .nav-link {
            min-width: 100px;
            padding: 8px 16px;
        }
}


/*END*/

/* ==============================================
   Hide Left Filters Sidebar Completely on Mobile/Tablet
   (Screens smaller than 992px → Bootstrap 'lg' breakpoint se neeche)
   ============================================== */

@media (max-width: 991.98px) {
    /* Pura filters panel hide kar do - no space waste */
    .col-lg-4 .filters-panel,
    .col-lg-4 {
        display: none !important;
    }

    /* Important: Right side (packages list) ko full width bana do mobile pe */
    .col-lg-8 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Row ko adjust karo taake extra space na rahe */
    .row.g-4 {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Agar aapke packages container mein col-12 hai, woh already full width hoga */
}

/* Optional: Agar aap chahte ho ke sirf bohot chhote phones pe zyada strict ho (≤576px) */
@media (max-width: 575.98px) {
    .col-lg-8 {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* END */

@media (max-width: 576px) {
    .slider-item {
        flex: 0 0 calc(100% - 20px); /* 1 card on small mobile with margin */
        max-width: calc(100% - 20px);
        min-width: calc(100% - 20px);
        margin: 0 10px;
    }
    
    .packages-slider-container {
        overflow: hidden;
        margin: 0 -15px;
        padding: 0 15px;
    }
    
    .packages-slider-track {
        margin: 0 -10px;
    }
    
    .filter-section {
        text-align: center !important;
    }
    
    .filter-section .d-flex {
        justify-content: center !important;
    }
    
    /* Mobile pe full width card */
    .packages-item {
        width: 100%;
        margin: 0 auto;
    }
    
    .slider-nav {
        display: none; /* Mobile pe arrows hide krdo */
    }
}

/* Extra small devices (phones, less than 400px) */
@media (max-width: 400px) {
    .slider-item {
        flex: 0 0 95%; /* Thora margin dedo sides pe */
        max-width: 95%;
        min-width: 95%;
        margin: 0 2.5%;
    }
    
    .packages-slider-container {
        overflow: hidden;
        margin: 0 -2.5%;
        padding: 0 2.5%;
    }
    
    .packages-slider-track {
        margin: 0;
    }
    
    .packages-item {
        max-width: 100%;
    }
}


/* Holiday page */

/* Responsive adjustments */
@media (max-width: 768px) {
    .month-btn {
        padding: 8px 12px !important;
        font-size: 0.8rem;
        margin: 2px;
    }

    #monthTabs {
        gap: 4px;
    }
}

@media (max-width: 576px) {
    .month-btn {
        padding: 6px 8px !important;
        font-size: 0.75rem;
    }
}

/**/
@media (max-width: 991px) {
    /* Common filter classes hide */
    .filters-panel,
    .filter-panel,
    .sidebar,
    .filter-sidebar,
    .left-sidebar,
    .filter-container,
    .accordion.filters,
    .filter-options,
    .package-filters,
    .refine-search,
    .facets-wrapper,
    .filter-accordion {
        display: none !important;
    }

    /* Make main packages full width */
    .main-content,
    .packages-list,
    .package-grid,
    .row.g-5 > .col-lg-8 {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Optional: Hide any floating filter button if present */
    .mobile-filter-btn,
    .show-filters-mobile {
        display: none !important;
    }
}
/**/

/** Holiday Packages Circle Button**/
@media (max-width: 576px) {
    .circle-btn-outline {
        width: 42px;
        height: 42px;
        margin-left: -50%;
        font-size: 18px;
    }
}
/* END */

/* SINGAL PAGE BANNER */
@media (max-width: 576px) {
    .image-header .carousel-caption {
        padding: 0 10px;
    }

    .image-header h4 {
        font-size: 1.6rem;
        margin-bottom: 12px !important;
    }

    .image-header p {
        font-size: 0.9rem;
        margin-bottom: 16px !important;
    }

    .image-header .breadcrumb {
        font-size: 0.75rem;
    }
}
/* END */

/** filter check boxes **/
/* All form-check inside these collapses */
html[dir="rtl"] #destinationOptions .form-check,
html[dir="rtl"] #cancellationOptions .form-check,
html[dir="rtl"] #packageTypeOptions .form-check,
html[dir="rtl"] #ratingOptions .form-check {
    padding-right: 1.25rem; /* Bootstrap کا default padding-left → padding-right */
    padding-left: 0;
    text-align: Right;
}

html[dir="rtl"] #destinationOptions .form-check-input,
html[dir="rtl"] #cancellationOptions .form-check-input,
html[dir="rtl"] #packageTypeOptions .form-check-input,
html[dir="rtl"] #ratingOptions .form-check-input {
    float: right;
    margin-left: 1rem;
    margin-right: 0%;
}

/* Labels padding & alignment fix */
html[dir="rtl"] #destinationOptions .form-check-label,
html[dir="rtl"] #cancellationOptions .form-check-label,
html[dir="rtl"] #packageTypeOptions .form-check-label,
html[dir="rtl"] #ratingOptions .form-check-label {
    padding-right: 0;
    padding-left: 0.25rem; /* چیک باکس کے بعد تھوڑی جگہ */
}

    /* Special fix for Rating stars + text (me-2 & ms-2 swap) */
    html[dir="rtl"] #ratingOptions .form-check-label .me-2 {
        margin-right: 0 !important;
        margin-left: 0.5rem !important;
    }

    html[dir="rtl"] #ratingOptions .form-check-label .ms-2 {
        margin-left: 0 !important;
        margin-right: 0.5rem !important;
    }

    /* Stars order remains same (left to right), but container RTL میں reverse نہیں ہونا چاہیے */
    html[dir="rtl"] #ratingOptions .form-check-label d-flex {
        flex-direction: row-reverse;
    }

/* Optional: اگر bg-light والا div بھی ٹھیک کرنا ہو */
html[dir="rtl"] .collapse .bg-light.rounded.p-3 {
    direction: rtl;
    text-align: right;
}
/* END */