/* ==========================================================================
   AANDAAL OIL SHOP — Global Mobile-First Responsive Stylesheet
   Primary target: Mobile (≤768px), Secondary: Tablet (≤1024px)
   ========================================================================== */

/* ─── 1. UNIVERSAL RESETS ─── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
}

img,
video,
iframe,
embed {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Prevent long strings from breaking layout */
p,
h1,
h2,
h3,
h4,
h5,
h6,
li,
a,
span,
label {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* ─── 2. CONTAINER UTILITY ─── */
.container-luxury {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* ─── 3. TABLET BREAKPOINT (≤1024px) ─── */
@media (max-width: 1024px) {
    .container-luxury {
        max-width: 100% !important;
        padding: 0 24px !important;
    }

    /* Collapse 3+ column grids to 2 columns */
    div[style*="grid-template-columns: repeat(3"],
    div[style*="grid-template-columns: 1fr 1fr 1fr"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Footer 4-col → 2-col */
    .footer-container {
        grid-template-columns: 1fr 1fr !important;
        gap: 30px !important;
    }
}

/* ─── 4. MOBILE BREAKPOINT (≤768px) — Primary Focus ─── */
@media (max-width: 768px) {

    /* === 4.1 NAVBAR === */
    .custom-navbar {
        height: 64px !important;
        padding: 0 16px !important;
    }

    .container-nav {
        padding: 0 16px !important;
    }

    .brand-logo img {
        height: 50px !important;
    }

    /* Utility icons row in desktop nav — hide on mobile */
    .header-utilities {
        display: none !important;
    }

    /* === 4.2 SECTION CONTAINERS === */
    .container-luxury,
    div[style*="max-width: 1400px"],
    div[style*="max-width: 1280px"],
    div[style*="max-width: 1200px"],
    div[style*="max-width: 900px"] {
        padding-left: 16px !important;
        padding-right: 16px !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* === HERO SECTION MOBILE FIX === */
    /* Reduce hero height — prevents big blank beige area on short phones */
    .hero-luxury {
        min-height: 85svh !important;
        min-height: 85vh !important;
        /* fallback */
    }

    /* Force hero content visible in case luxe-reveal JS hasn't fired */
    .hero-luxe-left .luxe-reveal,
    .hero-luxe-left .luxe-reveal-active,
    .container-luxury-hero .luxe-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    /* === REVEAL CLASS — force visible on mobile (fallback if scroll trigger misses) === */
    /* Elements with .reveal class that haven't yet gotten .active via scroll */
    .reveal {
        opacity: 1 !important;
        transform: translateY(0) !important;
        transition: opacity 0.6s ease, transform 0.6s ease !important;
    }

    /* Reduce huge section paddings */
    div[style*="padding: 120px"],
    div[style*="padding: 100px 0"],
    div[style*="padding: 80px 0"],
    section[style*="padding: 150px"],
    section[style*="padding: 100px"],
    section[style*="padding: 80px"] {
        padding: 50px 16px !important;
    }

    .section-luxury {
        padding: 60px 0 !important;
    }

    /* === 4.3 TYPOGRAPHY === */
    h1 {
        font-size: clamp(1.6rem, 7vw, 2.4rem) !important;
        line-height: 1.3 !important;
    }

    h2 {
        font-size: clamp(1.4rem, 6vw, 2rem) !important;
        line-height: 1.35 !important;
    }

    h3 {
        font-size: clamp(1.1rem, 5vw, 1.5rem) !important;
        line-height: 1.4 !important;
    }

    .heading-xl {
        font-size: clamp(2rem, 9vw, 2.8rem) !important;
    }

    .heading-lg {
        font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
    }

    .heading-md {
        font-size: clamp(1.2rem, 5vw, 1.6rem) !important;
    }

    /* "white-space: nowrap" h3 tags inside cards break on mobile */
    h3[style*="white-space: nowrap"],
    h2[style*="white-space: nowrap"] {
        white-space: normal !important;
    }

    /* === 4.4 ALL GRIDS → 1 COLUMN === */
    div[style*="display: grid"] {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }


    /* === 4.5 FLEX ROW → COLUMN === */
    /* Specifically target two-column flex layouts with large gaps */
    div[style*="display: flex; justify-content: space-between"] {
        flex-wrap: wrap !important;
    }

    /* Price row inside product cards — keep row layout */
    div[style*="display: flex; justify-content: space-between; align-items: center; padding-top: 16px"] {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }

    /* Hero buttons already handled in main.css; reinforce */
    .hero-buttons-luxe {
        flex-direction: column !important;
        width: 100% !important;
        gap: 14px !important;
        align-items: center !important;
    }

    .btn-luxe-primary,
    .btn-luxe-secondary {
        width: 100% !important;
        justify-content: center !important;
    }

    /* === 4.6 FORMS & INPUTS === */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    textarea,
    select {
        width: 100% !important;
        font-size: 16px !important;
        /* Prevents iOS auto-zoom */
        padding: 12px 14px !important;
        box-sizing: border-box !important;
    }

    /* Collapse side-by-side form grids */
    form div[style*="display: grid; grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    /* Make submit/action buttons full-width on mobile */
    button[type="submit"],
    input[type="submit"],
    form .btn-luxury,
    form button {
        width: 100% !important;
        justify-content: center !important;
        padding: 14px 20px !important;
        margin-top: 6px !important;
    }

    /* === 4.7 TABLES → HORIZONTAL SCROLL === */
    table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    thead,
    tbody,
    tr {
        min-width: 600px;
    }

    /* === 4.8 FOOTER === */
    .footer-container {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
        padding: 0 16px !important;
    }

    .footer-col {
        width: 100% !important;
    }

    .footer-col h4 {
        text-align: left !important;
    }

    .footer-bottom {
        flex-direction: column !important;
        text-align: center !important;
        gap: 12px !important;
        padding: 16px !important;
    }

    .footer-bottom-links {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 12px !important;
    }

    /* === 4.9 PRODUCT CARDS === */
    /* Card grid on product page */
    .products-grid,
    div[style*="grid-template-columns: repeat(auto-fit, minmax(300px"] {
        grid-template-columns: 1fr !important;
    }

    /* Each product card full width */
    div[style*="max-width: 420px; margin: 0 auto"] {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* === 4.10 CONTACT PAGE === */
    div[style*="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px"] {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    /* === 4.11 ABOUT PAGE HERO & ABOUT US SECTION === */
    div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .about-us-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 32px !important;
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    .about-us-grid .reveal {
        margin-top: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* === 4.12 SERVICES PAGE === */
    /* Comparison table on services.php */
    .compare-table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
    }

    /* Services method cards */
    div[style*="compare-cell"] {
        font-size: 0.85rem !important;
        padding: 10px 12px !important;
    }

    /* === 4.13 SHOP / CART === */
    /* Cart items in shop page */
    .cart-item-row,
    div[style*="display: flex; gap: 15px; align-items"] {
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* Quantity buttons stay horizontal */
    .qty-controls,
    div[style*="display: flex; align-items: center; gap: 8px"] {
        flex-direction: row !important;
        justify-content: flex-start !important;
    }

    /* === 4.14 TERMS / PRIVACY / REFUND PAGES === */
    div[style*="max-width: 900px; margin: 120px auto"] {
        margin: 80px auto 40px !important;
        padding: 20px 16px !important;
    }

    /* === 4.15 FLOATING DECORATIVE ELEMENTS — hide on mobile === */
    .floating-elements-container,
    .gold-oil-droplet,
    .cursor-dot,
    .cursor-ring,
    .luxe-scroll-indicator {
        display: none !important;
    }

    /* Scroll-to-top button — prevent overlap */
    .scroll-top {
        bottom: 20px !important;
        right: 16px !important;
        width: 44px !important;
        height: 44px !important;
    }

    /* === 4.16 MISC FIXES === */
    /* Prevent absolute-positioned decorative blobs from causing overflow */
    div[style*="position: absolute"][style*="width: 400px"],
    div[style*="position: absolute"][style*="width: 500px"] {
        display: none !important;
    }

    /* Large inline padding from container-luxury style attrs */
    div[style*="padding: 0 40px"] {
        padding: 0 16px !important;
    }

    /* Make swiper take full width and cover the slider height */
    .swiper-slide img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }

    /* Story slider height on mobile */
    .story-slider {
        height: 280px !important;
    }

    /* === 4.17 INDEX.PHP SPECIFIC === */
    /* Stats bar: keep 2-per-row not 1 */
    div[style*="grid-template-columns: repeat(auto-fit, minmax(160px"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    /* Green stats section spacing */
    div[style*="background: linear-gradient(135deg, var(--primary-green)"] {
        padding: 30px 16px !important;
        border-radius: 16px !important;
    }

    /* Pillar card number badges */
    div[style*="position: absolute; top: -18px; left: 30px"] {
        top: -14px !important;
        left: 16px !important;
        width: 48px !important;
        height: 48px !important;
        font-size: 18px !important;
    }

    /* Testimonials */
    div[style*="padding: clamp(60px, 12vw, 150px)"] {
        padding: 50px 0 !important;
    }
}

/* ─── 5. SMALL PHONE (≤480px) ─── */
@media (max-width: 480px) {
    h1 {
        font-size: 1.6rem !important;
    }

    h2 {
        font-size: 1.35rem !important;
    }

    h3 {
        font-size: 1.1rem !important;
    }

    .container-luxury,
    div[style*="max-width: 1400px"],
    div[style*="padding: 0 40px"] {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Stats row on very small screens — keep 2-col */
    .hero-stats-row {
        gap: 12px !important;
    }

    .stat-card .stat-number {
        font-size: 1.1rem !important;
    }

    .stat-card .stat-label {
        font-size: 0.58rem !important;
    }

    /* Buttons full-width */
    .btn-luxury,
    .btn-luxe-primary,
    .btn-luxe-secondary {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        padding: 14px 20px !important;
    }

    /* CTA buttons inside cards */
    a[style*="padding: 14px 28px; border-radius: 10px"] {
        display: block !important;
        text-align: center !important;
        width: 100% !important;
    }

    /* FAQ section */
    .faq-question {
        padding: 16px 18px !important;
        font-size: 0.9rem !important;
    }

    .faq-item.active .faq-answer {
        padding: 0 18px 18px !important;
    }
}

/* ─── 6. MOBILE MENU IMPROVEMENTS ─── */
@media (max-width: 768px) {

    /* Language switcher in mobile sidebar */
    .mobile-lang-switcher {
        margin-top: 16px !important;
        padding-top: 16px !important;
        border-top: 1px solid #f3f4f6 !important;
    }

    /* WhatsApp floating button — nudge left so it doesn't overlap scroll-top */
    a[href*="wa.me"][style*="position: fixed"],
    a[href*="api.whatsapp.com"][style*="position: fixed"] {
        bottom: 72px !important;
        right: 16px !important;
    }
}

/* ─── 7. SHOP / PRODUCT PAGE — MOBILE SPECIFIC ─── */
@media (max-width: 768px) {

    /* Hero banner on product page */
    .hero-premium {
        min-height: 220px !important;
        padding: 5rem 1rem 2rem !important;
        border-radius: 0 0 24px 24px !important;
        margin-bottom: 2rem !important;
    }

    .hero-title {
        font-size: 1.8rem !important;
        margin-bottom: 1rem !important;
    }

    .hero-tagline {
        font-size: 0.65rem !important;
        padding: 0.5rem 1.2rem !important;
        margin-bottom: 1rem !important;
    }

    /* Product grid — 2 columns on mobile */
    #productGrid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }

    /* Floating cart button placement */
    .cart-floating-trigger {
        bottom: 1.5rem !important;
        left: 1.5rem !important;
        width: 56px !important;
        height: 56px !important;
        font-size: 1.2rem !important;
    }

    /* Cart toast left-side, compact */
    .cart-toast {
        left: 1rem !important;
        right: 1rem !important;
        bottom: 1rem !important;
        padding: 0.8rem 1rem !important;
        font-size: 0.85rem !important;
    }

    /* Mobile filter trigger — move up to avoid overlap with floating cart */
    .mobile-filter-trigger {
        bottom: 5.5rem !important;
    }

    /* Quick view modal — full screen feel */
    .premium-modal-backdrop {
        padding: 0.5rem !important;
        align-items: flex-end !important;
    }

    .premium-modal-content {
        max-height: 92vh !important;
        border-radius: 20px 20px 0 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* Cart sidebar if present */
    .cart-sidebar,
    .cart-drawer {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 16px 16px 0 0 !important;
    }
}

/* ─── 8. SERVICES PAGE — COMPARISON TABLE ─── */
@media (max-width: 768px) {

    /* Wrap comparison table in a scroll container */
    .comparison-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 12px !important;
        width: 100% !important;
    }

    .compare-row {
        flex-direction: column !important;
    }

    .compare-cell {
        font-size: 0.82rem !important;
        padding: 10px 12px !important;
    }
}

/* ─── 9. ABOUT PAGE ─── */
@media (max-width: 768px) {

    /* Timeline / process steps — stack vertically */
    div[style*="display: flex; gap: 40px"],
    div[style*="display: flex; gap: 60px"] {
        flex-direction: column !important;
        gap: 20px !important;
    }
}

/* ─── 10. ADMIN — RESPONSIVE IMPROVEMENTS ─── */
@media (max-width: 768px) {

    /* Admin main content padding */
    main.p-6 {
        padding: 1rem !important;
    }

    /* Admin tables scroll */
    .overflow-x-auto table {
        min-width: 700px;
    }

    /* Order action buttons — stack */
    .flex.gap-2.flex-wrap {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
}

/* ─── 11. PRINT RESET ─── */
@media print {

    .custom-navbar,
    .mobile-menu-sidebar,
    .mobile-menu-overlay,
    .scroll-top,
    .cursor-dot,
    .cursor-ring {
        display: none !important;
    }
}