/* 
  Hompex Mobile App & PWA Dedicated Stylesheet
  Strictly Scoped to Mobile Breakpoint (@media max-width: 767.98px)
  Ensures 100% Zero Impact on Desktop Screens (>= 768px)
*/

@media (max-width: 767.98px) {
    /* Touch UI optimizations */
    body.mobile-app-active {
        padding-bottom: 75px !important; /* Space for sticky bottom nav */
        padding-top: 60px !important;    /* Space for sticky mobile app header */
        background-color: #f8f9fa;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
    }

    /* Fixed Mobile Header */
    .mobile-app-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 60px;
        background: #ffffff;
        z-index: 1040;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        border-bottom: 1px solid #f0f0f0;
    }

    .mobile-app-header .header-brand {
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 700;
        font-size: 1.1rem;
        color: #6bb632;
        text-decoration: none;
    }

    .mobile-app-header .header-brand img {
        height: 32px;
        width: auto;
    }

    .mobile-app-header .header-actions {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .mobile-app-header .header-action-btn {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        background: #6bb632;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        font-size: 1.2rem;
        transition: all 0.2s ease;
        position: relative;
        box-shadow: 0 2px 8px rgba(107, 182, 50, 0.3);
    }

    .mobile-app-header .header-action-btn i {
        color: #ffffff;
    }

    .mobile-app-header .header-action-btn:active {
        transform: scale(0.92);
        background: #549425;
    }

    .mobile-app-header .notification-badge {
        position: absolute;
        top: 3px;
        right: 3px;
        width: 9px;
        height: 9px;
        background-color: #ef4444;
        border: 1.5px solid #ffffff;
        border-radius: 50%;
    }

    /* Mobile Bottom Navigation Bar (Floating App Navigation Pill) */
    .mobile-bottom-nav {
        position: fixed;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        left: 14px;
        right: 14px;
        height: 64px;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        display: flex;
        align-items: center;
        justify-content: space-around;
        z-index: 1040;
        border-radius: 22px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04);
        border: 1px solid rgba(226, 232, 240, 0.8);
        padding: 0 6px;
    }

    .mobile-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        height: 100%;
        text-decoration: none;
        color: #64748b;
        font-size: 0.72rem;
        font-weight: 500;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        padding: 4px 0;
    }

    .mobile-nav-item i {
        font-size: 1.35rem;
        margin-bottom: 2px;
        transition: transform 0.2s ease;
    }

    .mobile-nav-item.active {
        color: #6bb632;
        font-weight: 700;
    }

    .mobile-nav-item.active i {
        transform: translateY(-2px) scale(1.1);
    }

    .mobile-nav-item.active::after {
        content: '';
        position: absolute;
        top: 0;
        width: 24px;
        height: 3px;
        background: #6bb632;
        border-radius: 0 0 4px 4px;
    }

    .mobile-nav-item.nav-cta::after,
    .mobile-nav-item.nav-cta.active::after {
        display: none !important;
        content: none !important;
    }

    /* Special Center CTA Button for Add Listing / Action */
    .mobile-nav-item.nav-cta {
        position: relative;
    }

    .mobile-nav-item.nav-cta .cta-icon-wrapper {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        background: linear-gradient(135deg, #6bb632 0%, #549425 100%);
        color: #ffffff;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 4px 12px rgba(107, 182, 50, 0.35);
        margin-top: -16px;
        border: 3px solid #ffffff;
        transition: transform 0.2s ease;
        padding: 0 !important;
    }

    .mobile-nav-item.nav-cta .cta-icon-wrapper i {
        font-size: 1.35rem !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .mobile-nav-item.nav-cta:active .cta-icon-wrapper {
        transform: scale(0.92);
    }

    /* PWA Install Banner */
    .pwa-install-banner {
        position: fixed;
        bottom: 76px;
        left: 12px;
        right: 12px;
        background: #0f172a;
        color: #ffffff;
        border-radius: 16px;
        padding: 12px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        z-index: 1050;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
        animation: slideUpPwa 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

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

    .pwa-install-banner .banner-info {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .pwa-install-banner .app-icon-img {
        width: 42px;
        height: 42px;
        border-radius: 10px;
        object-fit: cover;
        background: #ffffff;
        padding: 2px;
    }

    .pwa-install-banner .banner-text h6 {
        margin: 0;
        font-size: 0.9rem;
        font-weight: 700;
        color: #ffffff;
    }

    .pwa-install-banner .banner-text p {
        margin: 0;
        font-size: 0.75rem;
        color: #94a3b8;
    }

    .pwa-install-banner .banner-actions {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .pwa-install-banner .btn-install {
        background: #6bb632;
        color: #ffffff;
        border: none;
        border-radius: 8px;
        padding: 6px 14px;
        font-size: 0.8rem;
        font-weight: 600;
    }

    .pwa-install-banner .btn-close-pwa {
        background: transparent;
        border: none;
        color: #94a3b8;
        font-size: 1.1rem;
        padding: 4px;
    }

    /* Mobile App Offcanvas Menu Styling */
    .mobile-app-drawer .offcanvas-header {
        background: #0f172a;
        color: #ffffff;
        padding: 20px 16px;
    }

    .mobile-app-drawer .user-profile-summary {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .mobile-app-drawer .user-avatar-circle {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: #6bb632;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.3rem;
        font-weight: bold;
    }

    .mobile-app-drawer .drawer-nav-list {
        list-style: none;
        padding: 8px 0;
        margin: 0;
    }

    .mobile-app-drawer .drawer-nav-link {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 12px 20px;
        color: #334155;
        text-decoration: none;
        font-size: 0.95rem;
        font-weight: 500;
        transition: background 0.15s ease;
        border-radius: 8px;
        margin: 2px 10px;
    }

    .mobile-app-drawer .drawer-nav-link i {
        font-size: 1.25rem;
        color: #64748b;
        width: 24px;
        text-align: center;
    }

    .mobile-app-drawer .drawer-nav-link:active,
    .mobile-app-drawer .drawer-nav-link.active {
        background: #f0fdf4;
        color: #6bb632;
    }

    .mobile-app-drawer .drawer-nav-link:active i,
    .mobile-app-drawer .drawer-nav-link.active i {
        color: #6bb632;
    }

    /* Hide Live CMS edit bar, live section panels, live drawers & floating call button on Mobile App view */
    .live-admin-bar,
    .live-edit-bar,
    .live-sections-floating-panel,
    .live-panel-toggle,
    .live-panel-menu,
    .live-drawer-overlay,
    .live-drawer,
    [class*="live-panel"],
    [class*="live-drawer"],
    [class*="live-section"],
    .bakala-float-call-btn-icon,
    .bakala-float-call-btn,
    .bakala-float-call,
    [class*="bakala-float-call"],
    [class*="float-call"] {
        display: none !important;
    }

    /* Hide Desktop Header on Mobile App View */
    header:not(.mobile-app-header),
    .site-header,
    .sticky-header,
    .desktop-header,
    .main-header {
        display: none !important;
    }

    /* Hide Desktop Footer on Mobile App View */
    footer:not(.mobile-app-footer),
    .site-footer,
    .desktop-footer,
    .main-footer,
    .footer,
    .footer-section,
    .c-new-footer,
    .footerinfobar {
        display: none !important;
    }

    /* Hide Desktop Carousels & Specific Desktop-Style Carousels in Mobile App */
    .elementor-hidden-mobile,
    .elementor-hidden-phone,
    .elementor-element-6e22bc2,
    .elementor-element-5e56849,
    .elementor-element-03ce896,
    .elementor-element-e27fbe0,
    .elementor-element-493df3b,
    .pro_carousel.wrapper-c1459d0,
    .pro_carousel-4199796,
    .pro_carousel-03bfc7e,
    .pro_carousel-41a9a9a,
    .pro_carousel-611812e,
    #products-carousel-4199796,
    #products-carousel-03bfc7e,
    #products-carousel-41a9a9a,
    #products-carousel-611812e {
        display: none !important;
    }

    /* Dedicated Mobile Articles / Magazine Section */
    .mobile-articles-container {
        margin: 10px 0 16px 0 !important;
        padding: 0 12px !important;
    }

    .mobile-articles-wrapper {
        background: #ffffff;
        border-radius: 18px;
        padding: 14px 12px;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
        border: 1px solid #f1f5f9;
    }

    .mobile-articles-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
        padding-bottom: 6px;
        border-bottom: 1px solid #f8fafc;
    }

    .mobile-articles-title {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mobile-articles-title .mobile-title-icon {
        width: 32px;
        height: 32px;
        border-radius: 10px;
        background: linear-gradient(135deg, #6bb632, #549425);
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        box-shadow: 0 3px 10px rgba(107, 182, 50, 0.3);
    }

    .mobile-articles-title h3 {
        font-size: 0.98rem;
        font-weight: 800;
        color: #0f172a;
        margin: 0;
    }

    .mobile-articles-more {
        display: flex;
        align-items: center;
        gap: 4px;
        color: #6bb632;
        font-size: 0.78rem;
        font-weight: 700;
        text-decoration: none !important;
    }

    .mobile-articles-more i {
        font-size: 0.75rem;
    }

    .mobile-articles-scroller {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 12px;
        padding: 4px 2px 8px 2px;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none;
    }

    .mobile-articles-scroller::-webkit-scrollbar {
        display: none !important;
    }

    .mobile-article-card {
        flex: 0 0 210px;
        width: 210px;
        background: #f8fafc;
        border-radius: 14px;
        overflow: hidden;
        border: 1px solid #e2e8f0;
        transition: transform 0.2s ease;
    }

    .mobile-article-card.featured {
        flex: 0 0 240px;
        width: 240px;
        border-color: #dcfce7;
        background: #f0fdf4;
    }

    .mobile-article-card:active {
        transform: scale(0.98);
    }

    .mobile-article-link {
        text-decoration: none !important;
        color: inherit;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .article-img-box {
        position: relative;
        width: 100%;
        height: 115px;
        overflow: hidden;
    }

    .article-img-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }

    .article-time-badge {
        position: absolute;
        bottom: 8px;
        right: 8px;
        background: rgba(15, 23, 42, 0.75);
        backdrop-filter: blur(4px);
        color: #ffffff;
        font-size: 0.68rem;
        font-weight: 600;
        padding: 3px 8px;
        border-radius: 20px;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .article-content {
        padding: 10px 10px 12px 10px;
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    .article-category {
        font-size: 0.68rem;
        font-weight: 700;
        color: #6bb632;
        margin-bottom: 4px;
    }

    .article-title {
        font-size: 0.82rem;
        font-weight: 700;
        color: #1e293b;
        line-height: 1.45;
        height: 38px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        margin: 0 0 8px 0;
    }

    .article-meta {
        font-size: 0.7rem;
        color: #64748b;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: auto;
        padding-top: 6px;
        border-top: 1px dashed #e2e8f0;
    }

    .article-meta span {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    /* Tighten Vertical Spacing Between Carousel Rows in Mobile App */
    .elementor-widget-products_carousel,
    .section-products-carousel,
    .bakala_pro_carousel,
    .pro_carousel {
        margin-top: 2px !important;
        margin-bottom: 4px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .elementor-element.bakala-main,
    .elementor-element.e-parent,
    .elementor-element.e-con {
        margin-top: 4px !important;
        margin-bottom: 6px !important;
        padding-top: 2px !important;
        padding-bottom: 2px !important;
    }

    .section-products-carousel header,
    .pro_carousel header,
    .bk_carousel_modern_head {
        margin-bottom: 4px !important;
        padding-bottom: 0 !important;
        margin-top: 2px !important;
    }

    .titel_carousel {
        font-size: 0.95rem !important;
        margin-bottom: 2px !important;
    }

    .elementor-widget-divider {
        margin-top: 4px !important;
        margin-bottom: 4px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .mobile-slider-view {
        margin: 2px 0 4px 0 !important;
    }

    .mobile-carousel-scroller {
        padding: 4px 12px 6px 12px !important;
    }

    /* Fix Product Categories Display on Mobile App */
    .bakala-main-category .bakala-col-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        gap: 10px !important;
        padding: 8px 4px 16px 4px !important;
        margin: 0 !important;
        scrollbar-width: none !important;
    }

    .bakala-main-category .bakala-col-row::-webkit-scrollbar {
        display: none !important;
    }

    .bakala-main-category .field-category {
        flex: 0 0 92px !important;
        width: 92px !important;
        min-width: 92px !important;
        height: 120px !important;
        margin: 0 !important;
        padding: 12px 6px !important;
        scroll-snap-align: start !important;
        border-radius: 18px !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .bakala-main-category .field-category .bakala-category-img {
        width: 52px !important;
        height: 52px !important;
        margin: 0 auto 6px auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .bakala-main-category .field-category .bakala-category-img img {
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
    }

    .bakala-main-category .field-category .bakala-category-title {
        width: 100% !important;
        text-align: center !important;
    }

    .bakala-main-category .field-category .bakala-category-title h5 {
        font-size: 0.73rem !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;
        color: #334155 !important;
        margin: 0 !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    /* Digikala-Style 2-Column Mobile Category Drawer */
    .mobile-megamenu-body {
        display: flex !important;
        height: calc(100vh - 54px) !important;
        overflow: hidden !important;
        background-color: #f8fafc !important;
    }

    .megamenu-right-sidebar {
        width: 100px !important;
        min-width: 100px !important;
        background: #f1f5f9 !important;
        overflow-y: auto !important;
        border-left: 1px solid #e2e8f0 !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    .megamenu-tab-item {
        padding: 14px 6px !important;
        text-align: center !important;
        font-size: 0.76rem !important;
        font-weight: 500 !important;
        color: #475569 !important;
        cursor: pointer !important;
        border-bottom: 1px solid #e2e8f0 !important;
        transition: all 0.15s ease !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 6px !important;
        line-height: 1.2 !important;
        border-right: 4px solid transparent !important;
    }

    .megamenu-tab-item i {
        font-size: 1.3rem !important;
        color: #64748b !important;
    }

    .megamenu-tab-item.active {
        background: #ffffff !important;
        color: #6bb632 !important;
        font-weight: 700 !important;
        border-right-color: #6bb632 !important;
    }

    .megamenu-tab-item.active i {
        color: #6bb632 !important;
    }

    .megamenu-left-content {
        flex: 1 !important;
        background: #ffffff !important;
        overflow-y: auto !important;
        padding: 16px 14px !important;
    }

    .megamenu-panel-content {
        display: none !important;
    }

    .megamenu-panel-content.active {
        display: block !important;
    }

    .megamenu-all-link {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        color: #6bb632 !important;
        font-size: 0.85rem !important;
        font-weight: 700 !important;
        text-decoration: none !important;
        padding-bottom: 12px !important;
        border-bottom: 1px solid #f1f5f9 !important;
        margin-bottom: 14px !important;
    }

    .megamenu-section-title {
        font-size: 0.9rem !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        margin-bottom: 12px !important;
    }

    .megamenu-accordion-item {
        border-bottom: 1px solid #f1f5f9 !important;
    }

    .megamenu-accordion-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 12px 2px !important;
        font-size: 0.86rem !important;
        font-weight: 600 !important;
        color: #334155 !important;
        cursor: pointer !important;
    }

    .megamenu-accordion-header i {
        transition: transform 0.2s ease !important;
    }

    .megamenu-accordion-header.expanded i {
        transform: rotate(180deg) !important;
    }

    .megamenu-accordion-body {
        display: none;
        padding: 4px 12px 12px 12px !important;
        background: #f8fafc !important;
        border-radius: 8px !important;
        margin-bottom: 8px !important;
    }

    .megamenu-sublink {
        display: block !important;
        padding: 8px 0 !important;
        color: #475569 !important;
        font-size: 0.82rem !important;
        text-decoration: none !important;
        border-bottom: 1px dashed #e2e8f0 !important;
    }

    .megamenu-sublink:last-child {
        border-bottom: none !important;
    }

    /* Mobile-Optimized Hero Slider & Homepage Banners */
    .elementor-element-deb222d,
    .elementor-widget-picture_slider_responsive {
        margin: 8px 12px 14px 12px !important;
        padding: 0 !important;
        height: 185px !important;
        min-height: 185px !important;
        max-height: 185px !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
        background: #ffffff !important;
        position: relative !important;
    }

    .elementor-widget-picture_slider_responsive .elementor-widget-container,
    .elementor-widget-picture_slider_responsive .bakala_picture_slider,
    .elementor-widget-picture_slider_responsive .swiper-container,
    .elementor-widget-picture_slider_responsive .swiper,
    .elementor-widget-picture_slider_responsive .swiper-wrapper,
    .elementor-widget-picture_slider_responsive .swiper-slide {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        height: 185px !important;
        min-height: 185px !important;
        max-height: 185px !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        overflow: hidden !important;
        position: relative !important;
    }

    .elementor-widget-picture_slider_responsive .swiper-slide a {
        display: block !important;
        width: 100% !important;
        height: 185px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .elementor-widget-picture_slider_responsive .swiper-slide img,
    .elementor-widget-picture_slider_responsive .bakala-slider-media {
        width: 100% !important;
        height: 185px !important;
        max-height: 185px !important;
        object-fit: cover !important;
        object-position: center !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin: 0 !important;
    }

    .elementor-widget-picture_slider_responsive .swiper-pagination {
        position: absolute !important;
        bottom: 8px !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 20 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .elementor-widget-picture_slider_responsive .swiper-pagination-bullet {
        background: rgba(255, 255, 255, 0.8) !important;
        opacity: 0.7 !important;
        width: 6px !important;
        height: 6px !important;
        margin: 0 3px !important;
        transition: all 0.25s ease !important;
    }

    .elementor-widget-picture_slider_responsive .swiper-pagination-bullet-active {
        background: #6bb632 !important;
        opacity: 1 !important;
        width: 18px !important;
        border-radius: 4px !important;
    }

    /* Secondary Banners & Promotional Images on Mobile Home Page */
    .elementor-widget-image img,
    .bakala_banner_image,
    .attachment-full.size-full {
        border-radius: 14px !important;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05) !important;
        width: 100% !important;
        height: auto !important;
        max-height: 160px !important;
        object-fit: cover !important;
        margin-bottom: 8px !important;
    }

    .elementor-widget-image a {
        display: block !important;
        border-radius: 14px !important;
        overflow: hidden !important;
    }
}

/* Global mobile-app-active overrides */
body.mobile-app-active .elementor-hidden-mobile,
body.mobile-app-active .elementor-hidden-phone,
body.mobile-app-active .elementor-element-6e22bc2,
body.mobile-app-active .elementor-element-5e56849,
body.mobile-app-active .elementor-element-03ce896,
body.mobile-app-active .elementor-element-e27fbe0,
body.mobile-app-active .pro_carousel-4199796,
body.mobile-app-active .pro_carousel-03bfc7e,
body.mobile-app-active .pro_carousel-41a9a9a,
body.mobile-app-active .pro_carousel-611812e,
body.mobile-app-active #products-carousel-4199796,
body.mobile-app-active #products-carousel-03bfc7e,
body.mobile-app-active #products-carousel-41a9a9a,
body.mobile-app-active #products-carousel-611812e {
    display: none !important;
}