/*
 * ═══════════════════════════════════════════════════════════
 *  RESPONSIVE.CSS  |  Digi Branding Rank
 *  CLEAN REWRITE — Removed aggressive grid overrides
 * ═══════════════════════════════════════════════════════════
 */

/* ─── Base: prevent horizontal scroll everywhere ─── */
html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
}
*, *::before, *::after { box-sizing: border-box; }

/* Page load fade-in (app feel) */
body { animation: pageIn 0.3s ease; }
@keyframes pageIn {
    from { opacity:0; transform:translateY(4px); }
    to   { opacity:1; transform:translateY(0); }
}

/* ═══════════════════════════════════════════════════════════
   TABLET  768px – 1023px
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Typography scale */
    h1 { font-size: 2.4rem !important; line-height: 1.2 !important; }
    h2 { font-size: 1.9rem !important; }
    h3 { font-size: 1.5rem !important; }

    /* Orbit widget — shrink */
    .orbit-widget-container { max-width: 300px !important; }

    /* Services grid */
    .services-grid { grid-template-columns: repeat(3, 1fr) !important; }

    /* Footer 2-col on tablet */
    footer .grid { grid-template-columns: repeat(2, 1fr) !important; }
    footer .md\:col-span-4 { grid-column: span 2 !important; }
    footer .md\:col-span-3 { grid-column: span 1 !important; }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE  <768px  — App-Like
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* ── Body: space for bottom nav ── */
    body { padding-bottom: 72px !important; }

    /* ── Global container padding ── */
    .max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl, .max-w-3xl {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* ── Section vertical padding ── */
    section {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    /* ── Aggressive Overflow Prevention ── */
    html, body { overflow-x: hidden !important; width: 100% !important; position: relative !important; }
    .grid, .flex, .service-card, .special-card { min-width: 0 !important; }
    .grid > *, .flex > * { min-width: 0 !important; }
    * { word-wrap: break-word !important; }
    .overflow-x-auto { max-width: 100vw !important; }

    /* ══════════════════════════════
       TYPOGRAPHY
       ══════════════════════════════ */
    h1 { font-size: clamp(1.6rem, 7vw, 2.2rem) !important; line-height: 1.2 !important; text-align: center !important; }
    h2 { font-size: clamp(1.35rem, 5.5vw, 1.8rem) !important; line-height: 1.25 !important; text-align: center !important; }
    h3 { font-size: clamp(1.1rem, 4.5vw, 1.4rem) !important; }
    p  { font-size: 0.9375rem !important; line-height: 1.7 !important; }

    .text-6xl, .text-7xl, .text-8xl { font-size: 2rem !important; }
    .text-5xl { font-size: 1.875rem !important; }
    .text-4xl { font-size: 1.625rem !important; }
    .text-3xl { font-size: 1.375rem !important; }
    .text-2xl { font-size: 1.2rem !important; }

    /* ══════════════════════════════
       SPECIFIC GRID FIXES
       ══════════════════════════════ */

    /* 4-column stats row -> 2 columns on mobile */
    .grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }

    /* Hero layout: image first or text first */
    .order-2.lg\:order-1 { order: 1 !important; }
    .order-1.lg\:order-2 { order: 2 !important; }
    
    /* Center text in hero */
    .text-center.lg\:text-left { text-align: center !important; }
    .items-start.lg\:items-start { align-items: center !important; }
    .justify-start.lg\:justify-start { justify-content: center !important; }

    /* ══════════════════════════════
       HIDE OVERFLOW ELEMENTS
       ══════════════════════════════ */
    .orbit-widget-container { display: flex !important; transform: scale(0.65) !important; margin-top: -40px !important; margin-bottom: -40px !important; }
    section { overflow: hidden; position: relative; }

    /* ══════════════════════════════
       IMAGES
       ══════════════════════════════ */
    img { max-width: 100% !important; height: auto !important; }
    .w-80  { width: 100% !important; max-width: 280px !important; margin: 0 auto !important; }
    .w-96  { width: 100% !important; max-width: 320px !important; margin: 0 auto !important; }

    /* ══════════════════════════════
       BUTTONS
       ══════════════════════════════ */
    .px-10 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
    .py-5  { padding-top: 0.875rem !important; padding-bottom: 0.875rem !important; }

    /* ══════════════════════════════
       SERVICES GRID
       ══════════════════════════════ */
    .services-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 10px !important;
    }
    .special-card   { padding: 14px 8px !important; min-height: 95px !important; }
    .icon-wrapper   { font-size: 1.6rem !important; }
    .special-card p { font-size: 0.7rem !important; margin-top: 8px !important; }

    /* ══════════════════════════════
       FOOTER CLEANUP
       ══════════════════════════════ */
    footer { text-align: center !important; }
    footer .flex.items-center.gap-3 { justify-content: center !important; }
    footer nav ul { justify-content: center !important; flex-wrap: wrap !important; }
    .iso-social { gap: 12px !important; flex-wrap: wrap !important; justify-content: center !important; transform: scale(0.85) !important; margin-left: 0 !important; }
    .iso-social li { width: 36px !important; height: 36px !important; box-shadow: -10px 10px 6px rgba(0,0,0,0.25) !important; }
    .iso-social li::before { top: 5px !important; left: -10px !important; width: 10px !important; }
    .iso-social li::after  { bottom: -10px !important; left: -5px !important; height: 10px !important; }
    .iso-social li a { font-size: 18px !important; }

    /* Bottom bar in footer */
    footer .flex.flex-col.md\:flex-row { flex-direction: column !important; align-items: center !important; gap: 1rem !important; }
    
    /* Footer Grid -> 1 col */
    footer .grid.grid-cols-1.md\:grid-cols-12 { grid-template-columns: 1fr !important; }
    footer .md\:col-span-4, footer .md\:col-span-3, footer .md\:col-span-2 { grid-column: span 1 !important; }

    /* ══════════════════════════════
       ABOUT PAGE
       ══════════════════════════════ */
    .grid.md\:grid-cols-2.gap-12 { grid-template-columns: 1fr !important; }
    .grid.lg\:grid-cols-2.gap-16 { gap: 1.5rem !important; }
    .grid.lg\:grid-cols-2.gap-16 > div:last-child { margin-top: 1rem !important; }

    /* ══════════════════════════════
       FORMS & PILLS
       ══════════════════════════════ */
    input, select, textarea { font-size: 16px !important; }
    .flex.flex-wrap { gap: 6px !important; }
    .px-5.py-2\.5 { padding: 0.4rem 0.75rem !important; font-size: 0.75rem !important; }
}

/* ═══════════════════════════════════════════════════════════
   APP BOTTOM NAVIGATION  (Mobile only)
   ═══════════════════════════════════════════════════════════ */

#app-bottom-nav { display: none; }
#wa-fab         { display: none; }

@media (max-width: 767px) {
    #app-bottom-nav {
        display: flex !important;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        height: 62px;
        background: rgba(255,255,255,0.97);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-top: 1px solid #e2e8f0;
        z-index: 99999;
        align-items: center;
        justify-content: space-around;
        padding: 0 4px;
        box-shadow: 0 -2px 20px rgba(0,0,0,0.08);
    }
    .app-nav-item {
        display: flex !important;
        flex: 1;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 4px 1px;
        border-radius: 8px;
        text-decoration: none;
        color: #94a3b8;
        font-size: 8px;
        font-weight: 700;
        transition: all 0.2s;
    }
    .app-nav-item i { font-size: 16px; display: block; transition: transform 0.2s; }
    .app-nav-item.active, .app-nav-item:active { color: #2563eb; background: #eff6ff; }
    .app-nav-item.active i { transform: translateY(-2px); }

    /* WhatsApp FAB */
    #wa-fab {
        display: flex !important;
        position: fixed !important;
        bottom: 74px !important;
        right: 14px !important;
        width: 50px !important; height: 50px !important;
        background: #25d366 !important;
        border-radius: 50% !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 4px 18px rgba(37,211,102,0.45) !important;
        z-index: 9998 !important;
        text-decoration: none !important;
        font-size: 23px !important;
        color: white !important;
        animation: waPulse 2.5s ease-in-out infinite;
    }
    @keyframes waPulse {
        0%,100% { box-shadow: 0 4px 18px rgba(37,211,102,0.4); transform: scale(1); }
        50%      { box-shadow: 0 6px 28px rgba(37,211,102,0.7); transform: scale(1.06); }
    }
}

/* iPhone safe area */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    @media (max-width: 767px) {
        #app-bottom-nav { height: calc(62px + env(safe-area-inset-bottom)) !important; padding-bottom: env(safe-area-inset-bottom) !important; }
        body { padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important; }
    }
}

@media (min-width: 768px) {
    #app-bottom-nav { display: none !important; }
    #wa-fab         { display: none !important; }
}

@media (max-width: 380px) {
    h1 { font-size: 1.5rem !important; }
    h2 { font-size: 1.25rem !important; }
    .app-nav-item { font-size: 8px !important; }
}

    .hide-scrollbar::-webkit-scrollbar { display: none; }
    .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }