/* ============================================================
   ZIMAD CONNECT — UNIVERSAL MOBILE FIX
   Fixes every page on mobile. Nothing cut off, nothing broken.
   Already linked in index.php — just add to other pages.
   ============================================================ */

/* ---------- 1. CORE: Prevent horizontal overflow ---------- */
*, *::before, *::after {
    box-sizing: border-box;
}
html, body {
    overflow-x: hidden;
    max-width: 100vw;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* ---------- 2. All media scales to screen ---------- */
img, video, iframe, embed, object, canvas, svg, picture {
    max-width: 100%;
    height: auto;
}

/* ---------- 3. Tables scroll instead of breaking ---------- */
table {
    max-width: 100%;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ---------- 4. Long text wraps (titles, URLs, descriptions) ---------- */
h1, h2, h3, h4, h5, h6, p, a, span, div, li, td, th, label, button,
input, select, textarea, .title, .description, .product-title,
.fcard-title, .listing-title, .related-title, .job-title {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    min-width: 0;
}
pre, code, .url, .contact-number {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-x: auto;
    max-width: 100%;
}

/* ---------- 5. Forms scale properly (16px stops iOS zoom) ---------- */
input, select, textarea {
    max-width: 100%;
    font-size: 16px;
}
button, .btn, [type="submit"], [type="button"] {
    max-width: 100%;
    white-space: normal;
}

/* ---------- 6. Flex/grid children can shrink ---------- */
.row, .d-flex, [class*="col-"], .container, .container-fluid,
.grid, .feat-grid, .cat-grid, .why-grid, .stats-grid,
.actions-grid, .listings-grid, .related-grid {
    min-width: 0;
}

/* ---------- 7. Mobile-specific fixes ---------- */
@media (max-width: 768px) {

    /* Body breathing room for sticky bars */
    body {
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    /* Navbar never overflows */
    .navbar, .navbar-modern, .navbar-simple {
        flex-wrap: wrap;
    }
    .navbar-brand {
        font-size: 1.15rem !important;
        max-width: 70%;
    }
    .navbar-brand img {
        width: 36px !important;
        height: 36px !important;
    }

    /* Profile menu → bottom sheet (never cut off) */
    .profile-dropdown {
        position: static !important;
    }
    .profile-menu {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-height: 78vh !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        border-radius: 22px 22px 0 0 !important;
        z-index: 9990 !important;
        box-shadow: 0 -16px 48px rgba(15,23,42,.32) !important;
        transform: translateY(100%) !important;
        padding-bottom: env(safe-area-inset-bottom, 0) !important;
    }
    .profile-menu::before {
        content: '' !important;
        display: block !important;
        width: 46px !important;
        height: 5px !important;
        border-radius: 999px !important;
        background: #cbd5e1 !important;
        margin: 10px auto 2px !important;
    }
    .profile-dropdown.active .profile-menu {
        transform: translateY(0) !important;
    }
    .profile-menu-item {
        padding: 15px 18px !important;
        font-size: 1rem !important;
    }

    /* Hero section */
    .hero-compact, .hero, .page-header, .store-header {
        padding: 32px 0 60px !important;
    }
    .hero-title, .page-title, .store-name {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
    }
    .hero-subtitle {
        font-size: 0.95rem !important;
    }

    /* Hero stats stack */
    .hero-mini-stats, .store-stats {
        gap: 10px !important;
    }
    .hero-mini-stat {
        padding: 10px 14px !important;
        font-size: 0.85rem !important;
    }
    .hero-mini-stat-number {
        font-size: 1.2rem !important;
    }

    /* Search box */
    .search-box, .searchbox {
        max-width: 100% !important;
        padding: 12px !important;
    }
    .search-box .row, .searchbox {
        flex-direction: column !important;
    }
    .search-box .col-md-5,
    .search-box .col-md-4,
    .search-box .col-md-3 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Section padding */
    .section-modern, section {
        padding: 40px 0 !important;
    }
    .section-title, .feat-title {
        font-size: 1.5rem !important;
    }

    /* Cards */
    .product-card, .seller-card, .description-card,
    .form-card, .card, .fcard, .stat-card, .why-card,
    .cat-card, .service-card, .job-card-home, .newsletter-card {
        padding: 18px !important;
        border-radius: 14px !important;
    }

    /* Product page */
    .product-title {
        font-size: 1.35rem !important;
    }
    .product-price {
        font-size: 1.9rem !important;
    }
    .main-image, .no-image {
        height: 280px !important;
    }

    /* Contact buttons stack */
    .contact-buttons, .action-buttons, .seller-cta-buttons,
    .hero-buttons, .service-buttons {
        grid-template-columns: 1fr !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    .btn-whatsapp-pro, .btn-call-pro, .btn-share-pro,
    .btn-copy-pro, .btn-cta-primary, .btn-cta-secondary,
    .btn-hero-primary, .btn-hero-secondary, .btn-service {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Grids collapse */
    .feat-grid, .cat-grid, .why-grid, .listings-grid,
    .related-grid, .actions-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }
    .stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    .content-grid, .row.g-4 {
        gap: 14px !important;
    }

    /* Listing cards */
    .fcard-img-wrap {
        height: 160px !important;
    }
    .fcard-title {
        font-size: 0.9rem !important;
    }
    .fcard-amount {
        font-size: 1.2rem !important;
    }
    .fcard-body {
        padding: 14px !important;
    }

    /* Thumbnails scroll */
    .thumbnails, .preview-grid, .current-imgs, .photo-grid {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Filter tabs wrap */
    .filter-tabs, .tabs {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 6px !important;
    }
    .filter-tab, .tab {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* Testimonials */
    .testimonial-inner {
        padding: 20px !important;
    }
    .testimonial-text {
        font-size: 0.88rem !important;
    }

    /* Footer */
    .footer-main {
        padding: 40px 0 20px !important;
    }
    .footer-title {
        font-size: 0.95rem !important;
        margin-top: 16px !important;
    }
    .footer-links a {
        font-size: 0.82rem !important;
    }

    /* Floating elements smaller */
    .whatsapp-float {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.4rem !important;
        bottom: 90px !important;
        right: 16px !important;
    }
    .back-to-top {
        width: 42px !important;
        height: 42px !important;
        left: 16px !important;
    }
    .fab-main {
        width: 52px !important;
        height: 52px !important;
    }
    .fab-option span {
        display: none !important;
    }
    .fab-option {
        padding: 12px !important;
    }

    /* Sticky bottom bar doesn't cover content */
    .mobile-bar {
        padding: 8px 12px !important;
        gap: 8px !important;
    }
    .mobile-bar a, .mobile-bar button {
        padding: 11px !important;
        font-size: 0.85rem !important;
    }
    main, .main-content, .container, .wrap {
        padding-bottom: 90px !important;
    }

    /* Modals & popups fit screen */
    #safeFeaturedPopup, [role="dialog"] {
        padding: 12px !important;
    }
    #safeFeaturedPopup > div:last-child {
        max-width: 100% !important;
        max-height: 92vh !important;
        border-radius: 16px !important;
    }

    /* Announcement banner */
    .announcement-banner {
        font-size: 0.85rem !important;
    }
    .announcement-close {
        width: 28px !important;
        height: 28px !important;
        right: 8px !important;
    }

    /* System banner */
    .system-upgrade-banner {
        font-size: 0.82rem !important;
        padding: 12px 14px !important;
    }

    /* Newsletter */
    .newsletter-form {
        flex-direction: column !important;
    }
    .newsletter-title {
        font-size: 1.4rem !important;
    }

    /* Forms */
    .row-2 {
        grid-template-columns: 1fr !important;
    }
    .form-control, .form-select, .in, .f-input, .f-select, .f-text {
        font-size: 16px !important;
        padding: 12px !important;
    }

    /* Toast */
    .toast-msg {
        min-width: 0 !important;
        max-width: calc(100vw - 40px) !important;
        font-size: 0.88rem !important;
    }

    /* Store page */
    .store-avatar {
        width: 90px !important;
        height: 90px !important;
        font-size: 2rem !important;
    }

    /* Edit page photo grid */
    .photo-grid, .current-imgs {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .photo .acts {
        opacity: 1 !important;
    }

    /* Dashboard stats */
    .stat-number {
        font-size: 1.5rem !important;
    }
    .stat-icon {
        width: 42px !important;
        height: 42px !important;
        font-size: 1.1rem !important;
    }
}

/* ---------- 8. Very small phones (under 400px) ---------- */
@media (max-width: 400px) {
    .feat-grid, .cat-grid, .why-grid, .listings-grid,
    .related-grid, .stats-grid {
        grid-template-columns: 1fr !important;
    }
    .photo-grid, .current-imgs {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .hero-title, .page-title {
        font-size: 1.5rem !important;
    }
    .btn-whatsapp-pro, .btn-call-pro,
    .btn-hero-primary, .btn-hero-secondary {
        padding: 13px 14px !important;
        font-size: 0.88rem !important;
    }
}

/* ---------- 9. Landscape phones ---------- */
@media (max-height: 500px) and (orientation: landscape) {
    .hero-compact {
        padding: 20px 0 40px !important;
    }
    .main-image {
        height: 240px !important;
    }
}

/* ---------- 10. Accessibility: respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- 11. Print: hide floats ---------- */
@media print {
    .whatsapp-float, .back-to-top, .fab-menu,
    .mobile-bar, #safeFeaturedPopup, .announcement-banner,
    .system-upgrade-banner {
        display: none !important;
    }
}
/* =============================================
   MOBILE NOTIFICATION DROPDOWN FIX
   ============================================= */
@media (max-width: 768px) {
    .notification-bell-wrapper {
        position: static !important;
    }
    .notification-dropdown {
        position: fixed !important;
        top: 70px !important;
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100vh - 90px) !important;
        border-radius: 12px !important;
        z-index: 10000 !important;
    }
    .notification-list {
        max-height: calc(100vh - 220px) !important;
        overflow-y: auto !important;
    }
    .notification-item {
        padding: 12px !important;
    }
}