/* ============================================================
   NB ERP — Responsive Overrides
   Mobile targets ≤ 768px  ·  Desktop card enhancements
   ============================================================ */

/* -----------------------------------------------------------
   DESKTOP · FEATURE CARD ENHANCEMENTS
   ----------------------------------------------------------- */

/* Widen the feature grid container for 4-col comfort */
section.bg-slate-50.py-32 > .max-w-7xl,
section.bg-\[\#f8fafc\].py-32 > .max-w-7xl {
    max-width: 1440px;
}

/* Stronger resting shadow on all feature cards */
.group.bg-white.border.border-slate-200.rounded-\[32px\] {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* -----------------------------------------------------------
   0 · GLOBAL MOBILE RESETS
   ----------------------------------------------------------- */
@media (max-width: 768px) {

    html {
        -webkit-text-size-adjust: 100%;
    }

    body {
        overflow-x: hidden !important;
    }

    img {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* -----------------------------------------------------------
   1 · HEADER / NAVBAR
   ----------------------------------------------------------- */
@media (max-width: 768px) {

    /* Shrink header height */
    header .h-20 {
        height: 64px;
    }

    /* Header spacer below fixed header */
    body > .h-20 {
        height: 64px;
    }

    /* Logo icon smaller */
    header .w-11.h-11 {
        width: 36px;
        height: 36px;
        font-size: 16px;
        border-radius: 10px;
    }

    /* Logo text */
    header .text-xl.font-bold.leading-none {
        font-size: 16px;
    }

    header .text-xs.mt-1 {
        font-size: 10px;
    }

    /* Mobile hamburger button */
    #mobileMenuBtn {
        font-size: 22px;
        padding: 8px;
    }

    /* Mobile menu panel */
    #mobileMenu .px-6.py-6 {
        padding: 20px 24px 28px;
    }

    #mobileMenu a {
        font-size: 16px;
        padding: 10px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    #mobileMenu a:last-child {
        border-bottom: none;
    }

    /* WhatsApp button in mobile menu */
    #mobileMenu .bg-green-600 {
        margin-top: 12px;
        padding: 14px 20px;
        border-radius: 14px;
        font-size: 15px;
    }
}

/* -----------------------------------------------------------
   2 · HERO SECTION (index.php)
   ----------------------------------------------------------- */
@media (max-width: 768px) {

    /* Hero section: reduce min-height, adjust padding */
    section.min-h-screen {
        min-height: auto !important;
        padding-top: 48px;
        padding-bottom: 48px;
    }

    /* Hero container */
    section.min-h-screen .max-w-\[1550px\] {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Hero grid — stack columns */
    section.min-h-screen .grid.lg\:grid-cols-\[0\.95fr_1\.05fr\] {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;
    }

    /* Hero tag badge */
    section.min-h-screen .inline-flex.items-center.gap-2 {
        font-size: 12px;
        padding: 6px 14px;
    }

    /* Hero heading — scale down dramatically */
    section.min-h-screen h1 {
        font-size: 40px !important;
        line-height: 1.05 !important;
        letter-spacing: -1.5px !important;
        margin-top: 24px !important;
    }

    /* Hero description */
    section.min-h-screen p.text-xl {
        font-size: 16px !important;
        line-height: 1.7 !important;
        margin-top: 20px !important;
    }

    /* Hero buttons — stack vertically */
    section.min-h-screen .flex.flex-wrap.gap-5.mt-12 {
        flex-direction: column;
        gap: 12px;
        margin-top: 28px;
    }

    section.min-h-screen .flex.flex-wrap.gap-5.mt-12 a {
        text-align: center;
        padding: 16px 24px;
        font-size: 15px;
        border-radius: 14px;
    }

    /* Hero stats */
    section.min-h-screen .flex.flex-wrap.gap-16.mt-20 {
        gap: 32px;
        margin-top: 32px;
    }

    section.min-h-screen .flex.flex-wrap.gap-16.mt-20 h3 {
        font-size: 32px !important;
    }

    section.min-h-screen .flex.flex-wrap.gap-16.mt-20 p {
        font-size: 14px !important;
        margin-top: 4px !important;
    }

    /* Hero dashboard image — FIX overflow */
    section.min-h-screen img[alt="NB ERP Dashboard"] {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 20px !important;
    }

    /* Hero image glow — scale down */
    section.min-h-screen .blur-\[120px\] {
        opacity: 0.1;
    }
}

/* -----------------------------------------------------------
   3 · FEATURE CARDS (index.php & features.php)
   ----------------------------------------------------------- */
@media (max-width: 768px) {

    /* Features section padding */
    section.bg-slate-50.py-32,
    section.bg-\[\#f8fafc\].py-32 {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    /* Feature grid — 2 columns on mobile */
    .grid.md\:grid-cols-2.lg\:grid-cols-4,
    .grid.md\:grid-cols-2.lg\:grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    /* Feature cards — compact for 2-col layout */
    .group.bg-white.border.border-slate-200.rounded-\[32px\] {
        padding: 18px !important;
        border-radius: 18px !important;
        min-height: auto !important;
        box-shadow: 0 3px 16px rgba(0, 0, 0, 0.10) !important;
        transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    }

    /* Active / press-down state for great tap UX */
    .group.bg-white.border.border-slate-200.rounded-\[32px\]:active {
        transform: scale(0.97) !important;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15) !important;
    }

    /* Feature icon — smaller */
    .group .w-20.h-20 {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        font-size: 18px;
    }

    /* Feature title — bumped +2px */
    .group h3.text-3xl {
        font-size: 18px !important;
        margin-top: 12px !important;
        line-height: 1.25 !important;
    }

    /* Feature description — bumped +1px */
    .group p.text-lg {
        font-size: 14px !important;
        line-height: 1.55 !important;
        margin-top: 8px !important;
    }

    /* Feature "Learn More" link */
    .group .mt-10:last-child {
        margin-top: 12px !important;
    }

    .group .inline-flex.items-center.gap-2,
    .group .inline-flex.items-center.gap-3 {
        font-size: 14px;
    }
}

/* -----------------------------------------------------------
   4 · WHY CHOOSE SECTION (index.php)
   ----------------------------------------------------------- */
@media (max-width: 768px) {

    section.py-24.bg-white {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    /* Why choose grid — stack */
    section.py-24.bg-white .grid.lg\:grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    /* Image */
    section.py-24.bg-white img {
        border-radius: 20px !important;
    }

    /* "Why Choose" subtitle */
    section.py-24.bg-white .text-blue-600.font-semibold {
        font-size: 13px;
    }

    /* Section heading */
    section.py-24.bg-white h2.text-5xl {
        font-size: 30px !important;
        margin-top: 12px !important;
        line-height: 1.2 !important;
    }

    /* Description text */
    section.py-24.bg-white p.text-lg {
        font-size: 15px !important;
        line-height: 1.65 !important;
        margin-top: 16px !important;
    }

    /* Info boxes grid */
    section.py-24.bg-white .grid.sm\:grid-cols-2 {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        margin-top: 24px !important;
    }

    section.py-24.bg-white .grid.sm\:grid-cols-2 h3 {
        font-size: 15px !important;
    }

    section.py-24.bg-white .grid.sm\:grid-cols-2 > div {
        padding: 14px !important;
        border-radius: 14px !important;
    }
}

/* -----------------------------------------------------------
   5 · CTA SECTION (all pages)
   ----------------------------------------------------------- */
@media (max-width: 768px) {

    /* CTA blue section */
    section.py-24.bg-blue-600,
    section.bg-blue-600.py-24,
    section.bg-blue-600.py-28,
    section.relative.bg-blue-600.overflow-hidden.py-28 {
        padding-top: 56px !important;
        padding-bottom: 56px !important;
    }

    section.py-24.bg-blue-600 h2,
    section.bg-blue-600 h2.text-5xl,
    section.bg-blue-600 h2.text-5xl.lg\:text-6xl {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }

    section.bg-blue-600 p.text-xl,
    section.bg-blue-600 p.text-blue-100.text-xl,
    section.bg-blue-600 p.text-lg {
        font-size: 15px !important;
        line-height: 1.65 !important;
        margin-top: 16px !important;
    }

    section.bg-blue-600 a.inline-block,
    section.bg-blue-600 .inline-block {
        padding: 14px 28px !important;
        font-size: 15px !important;
        border-radius: 14px !important;
        margin-top: 24px !important;
    }
}

/* -----------------------------------------------------------
   6 · FOOTER
   ----------------------------------------------------------- */
@media (max-width: 768px) {

    /* Footer top padding */
    footer .py-20 {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    /* Footer grid — single column */
    footer .grid.lg\:grid-cols-4.md\:grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    /* Footer logo icon */
    footer .w-12.h-12.bg-blue-600 {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }

    /* Footer company name */
    footer h2.text-2xl {
        font-size: 20px;
    }

    /* Footer descriptions */
    footer p.text-slate-400.mt-8 {
        font-size: 14px;
        line-height: 1.7;
    }

    /* Footer section titles */
    footer h3.text-xl {
        font-size: 18px;
    }

    /* Footer links */
    footer ul.space-y-4 li,
    footer ul.space-y-4 a {
        font-size: 15px;
    }

    /* Social icons */
    footer .flex.gap-4.mt-8 a {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

    /* Contact info icons */
    footer .w-12.h-12.rounded-xl {
        width: 40px;
        height: 40px;
        font-size: 14px;
        flex-shrink: 0;
    }

    footer .flex.gap-4 p,
    footer .flex.gap-4 a {
        font-size: 14px;
    }

    /* Footer bottom */
    footer .border-t .py-6 {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    footer .flex.flex-col.md\:flex-row {
        text-align: center;
    }

    footer .flex.items-center.gap-6.text-sm {
        justify-content: center;
    }
}

/* -----------------------------------------------------------
   7 · FEATURES PAGE HERO (features.php)
   ----------------------------------------------------------- */
@media (max-width: 768px) {

    /* Feature page hero */
    section.relative.bg-\[\#020617\].overflow-hidden.text-white.py-32 {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    /* Feature hero title */
    section.relative.bg-\[\#020617\] h1.text-5xl.lg\:text-7xl,
    section.relative.bg-\[\#020617\] h1.mt-10.text-5xl {
        font-size: 32px !important;
        line-height: 1.15 !important;
        margin-top: 20px !important;
    }

    section.relative.bg-\[\#020617\] h1 br {
        display: none;
    }

    /* Feature hero description */
    section.relative.bg-\[\#020617\] p.text-xl,
    section.relative.bg-\[\#020617\] p.mt-8.text-slate-300 {
        font-size: 15px !important;
        line-height: 1.7 !important;
        margin-top: 16px !important;
    }

    /* Tag badge */
    section.relative.bg-\[\#020617\] .inline-flex {
        font-size: 11px;
        padding: 6px 14px;
    }
}

/* -----------------------------------------------------------
   8 · WHY MODULES SECTION (features.php)
   ----------------------------------------------------------- */
@media (max-width: 768px) {

    section.bg-white.py-32 {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    section.bg-white.py-32 .grid.lg\:grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    /* Section title */
    section.bg-white.py-32 span.text-blue-600.font-bold {
        font-size: 12px;
    }

    section.bg-white.py-32 h2.text-5xl {
        font-size: 28px !important;
        line-height: 1.2 !important;
        margin-top: 12px !important;
    }

    section.bg-white.py-32 h2 br {
        display: none;
    }

    section.bg-white.py-32 p.text-xl {
        font-size: 15px !important;
        line-height: 1.65 !important;
        margin-top: 16px !important;
    }

    /* Image */
    section.bg-white.py-32 img {
        border-radius: 20px !important;
    }

    /* Check list items */
    section.bg-white.py-32 .space-y-6 {
        gap: 16px;
    }

    section.bg-white.py-32 .space-y-6 > div {
        margin-top: 16px !important;
    }

    section.bg-white.py-32 .space-y-6 h3.text-2xl {
        font-size: 18px !important;
    }

    section.bg-white.py-32 .space-y-6 p.text-slate-500 {
        font-size: 14px !important;
    }

    section.bg-white.py-32 .w-12.h-12 {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        border-radius: 12px;
    }
}

/* -----------------------------------------------------------
   9 · PRICING PAGE (erp-pricing.php)
   ----------------------------------------------------------- */
@media (max-width: 768px) {

    /* Pricing hero */
    section.bg-\[\#020617\].text-white.py-28 {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    section.bg-\[\#020617\].text-white.py-28 h1 {
        font-size: 32px !important;
        line-height: 1.15 !important;
        margin-top: 20px !important;
    }

    section.bg-\[\#020617\].text-white.py-28 h1 br {
        display: none;
    }

    section.bg-\[\#020617\].text-white.py-28 span.text-blue-400 {
        font-size: 12px;
        letter-spacing: 2px;
    }

    section.bg-\[\#020617\].text-white.py-28 p.text-xl {
        font-size: 15px !important;
        line-height: 1.7 !important;
    }

    /* Trust badges row */
    section.bg-\[\#020617\].text-white.py-28 .flex.flex-wrap.justify-center {
        gap: 12px !important;
        margin-top: 20px !important;
        font-size: 13px;
    }

    /* Pricing cards grid */
    .grid.lg\:grid-cols-3 {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    /* Pricing card body */
    .rounded-\[32px\] .p-10 {
        padding: 24px !important;
    }

    /* Plan name */
    .rounded-\[32px\] h2.text-4xl {
        font-size: 26px !important;
    }

    /* Price */
    .rounded-\[32px\] .text-6xl {
        font-size: 40px !important;
    }

    /* Enterprise custom pricing */
    .rounded-\[32px\] .text-5xl.font-black {
        font-size: 28px !important;
    }

    /* Plan buttons */
    .rounded-\[32px\] a.block.text-center,
    .rounded-\[32px\] a.block.mt-8 {
        padding: 14px !important;
        font-size: 15px !important;
        border-radius: 14px !important;
    }

    /* Feature list */
    .rounded-\[32px\] .space-y-4 div,
    .rounded-\[32px\] ul.space-y-4 li {
        font-size: 14px;
    }

    /* Compare table section */
    section.bg-white.py-24 {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    section.bg-white.py-24 h2.text-5xl {
        font-size: 28px !important;
        margin-bottom: 32px !important;
    }

    /* Table responsiveness */
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
    }

    .overflow-x-auto table {
        font-size: 13px;
        min-width: 500px;
    }

    .overflow-x-auto table th,
    .overflow-x-auto table td {
        padding: 10px 8px !important;
    }

    /* Pricing section padding */
    section.bg-slate-50.py-24 {
        padding-top: 48px;
        padding-bottom: 48px;
    }
}

/* -----------------------------------------------------------
   10 · BOOK DEMO PAGE (book-demo.php)
   ----------------------------------------------------------- */
@media (max-width: 768px) {

    /* Book demo hero */
    section.bg-\[\#020617\].text-white.overflow-hidden.relative.py-24 {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    section.bg-\[\#020617\].text-white.overflow-hidden.relative.py-24 .grid.lg\:grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    section.bg-\[\#020617\].text-white.overflow-hidden.relative.py-24 h1 {
        font-size: 34px !important;
        line-height: 1.15 !important;
        margin-top: 20px !important;
    }

    section.bg-\[\#020617\].text-white.overflow-hidden.relative.py-24 p.text-xl {
        font-size: 15px !important;
        line-height: 1.7 !important;
    }

    /* Trust checks */
    section.bg-\[\#020617\].text-white.overflow-hidden.relative.py-24 .flex.flex-wrap.gap-8 {
        gap: 10px !important;
        flex-direction: column;
        margin-top: 20px !important;
    }

    section.bg-\[\#020617\].text-white.overflow-hidden.relative.py-24 .flex.flex-wrap.gap-8 span {
        font-size: 14px;
    }

    /* Demo tag badge */
    section.bg-\[\#020617\].text-white.overflow-hidden.relative.py-24 .inline-flex {
        font-size: 12px;
        padding: 6px 14px;
    }

    /* Form card */
    section.bg-slate-50.py-24 .bg-white.rounded-\[36px\] {
        padding: 24px !important;
        border-radius: 24px !important;
    }

    /* Form title */
    section.bg-slate-50.py-24 h2.text-5xl {
        font-size: 28px !important;
    }

    section.bg-slate-50.py-24 p.text-slate-500 {
        font-size: 14px !important;
        margin-top: 8px !important;
    }

    /* Form grid */
    section.bg-slate-50.py-24 .grid.md\:grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Form inputs */
    section.bg-slate-50.py-24 input,
    section.bg-slate-50.py-24 select,
    section.bg-slate-50.py-24 textarea {
        padding: 12px 16px !important;
        font-size: 15px !important;
        border-radius: 12px !important;
    }

    section.bg-slate-50.py-24 label {
        font-size: 14px;
    }

    /* Modules checkboxes */
    section.bg-slate-50.py-24 .grid.md\:grid-cols-3 {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    section.bg-slate-50.py-24 .grid.md\:grid-cols-3 label {
        font-size: 14px;
    }

    /* Form buttons */
    section.bg-slate-50.py-24 .grid.md\:grid-cols-2.gap-4.mt-10 {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    section.bg-slate-50.py-24 .grid.md\:grid-cols-2.gap-4.mt-10 button,
    section.bg-slate-50.py-24 .grid.md\:grid-cols-2.gap-4.mt-10 a {
        padding: 16px !important;
        font-size: 15px !important;
        border-radius: 14px !important;
    }
}

/* -----------------------------------------------------------
   11 · CRM PAGE (crm.php)
   ----------------------------------------------------------- */
@media (max-width: 768px) {

    /* CRM section title area */
    section.bg-\[\#f8fafc\].py-32 .text-center.max-w-3xl {
        margin-bottom: 8px;
    }

    section.bg-\[\#f8fafc\].py-32 span.text-blue-600.font-bold {
        font-size: 12px;
        letter-spacing: 2px;
    }

    section.bg-\[\#f8fafc\].py-32 h2.text-5xl {
        font-size: 28px !important;
        line-height: 1.2 !important;
        margin-top: 12px !important;
    }

    section.bg-\[\#f8fafc\].py-32 h2 br {
        display: none;
    }

    section.bg-\[\#f8fafc\].py-32 p.text-xl {
        font-size: 15px !important;
        line-height: 1.65 !important;
    }

    /* CRM feature grid — 1 column */
    section.bg-\[\#f8fafc\].py-32 .grid.md\:grid-cols-2.lg\:grid-cols-4 {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        margin-top: 32px !important;
    }

    /* CRM cards */
    section.bg-\[\#f8fafc\].py-32 .group {
        min-height: auto !important;
    }
}

/* -----------------------------------------------------------
   12 · SMOOTH TRANSITIONS & MICRO-INTERACTIONS
   ----------------------------------------------------------- */
@media (max-width: 768px) {

    /* Disable hover translate on mobile (prevents jank) */
    .group:hover {
        transform: none !important;
    }

    /* Smooth section transitions */
    section {
        transition: padding 0.3s ease;
    }
}

/* -----------------------------------------------------------
   13 · EXTRA SMALL SCREENS (≤ 375px)
   ----------------------------------------------------------- */
@media (max-width: 375px) {

    /* Even smaller hero text */
    section.min-h-screen h1 {
        font-size: 32px !important;
        letter-spacing: -1px !important;
    }

    /* Tighter container padding */
    .max-w-7xl,
    .max-w-\[1550px\],
    .max-w-5xl,
    .max-w-4xl,
    .max-w-3xl {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Feature cards tighter on tiny screens */
    .group.bg-white.border.border-slate-200.rounded-\[32px\] {
        padding: 14px !important;
    }

    /* Stats — stack */
    section.min-h-screen .flex.flex-wrap.gap-16.mt-20 {
        flex-direction: row;
        gap: 24px;
    }

    /* Pricing price text */
    .rounded-\[32px\] .text-6xl {
        font-size: 34px !important;
    }

    /* CTA heading */
    section.bg-blue-600 h2 {
        font-size: 24px !important;
    }

    /* Footer grid */
    footer .grid {
        gap: 32px !important;
    }
}

/* -----------------------------------------------------------
   14 · LANDSCAPE MOBILE (short + wide)
   ----------------------------------------------------------- */
@media (max-height: 500px) and (max-width: 900px) {

    section.min-h-screen {
        min-height: auto !important;
        padding-top: 32px;
        padding-bottom: 32px;
    }

    section.min-h-screen h1 {
        font-size: 30px !important;
    }
}

/* -----------------------------------------------------------
   15 · TABLET TWEAKS (769px — 1024px)
   ----------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1024px) {

    /* Hero heading — moderate scale */
    section.min-h-screen h1 {
        font-size: 54px !important;
        letter-spacing: -2px !important;
    }

    /* Hero image — fit within viewport */
    section.min-h-screen img[alt="NB ERP Dashboard"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Section headings */
    h2.text-5xl {
        font-size: 36px !important;
    }

    /* CTA headings */
    section.bg-blue-600 h2 {
        font-size: 34px !important;
    }

    /* Pricing cards */
    .grid.lg\:grid-cols-3 {
        grid-template-columns: 1fr !important;
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* -----------------------------------------------------------
   16 · TOUCH-FRIENDLY ENHANCEMENTS
   ----------------------------------------------------------- */
@media (max-width: 768px) {

    /* Ensure tap targets are at least 44px */
    a, button {
        min-height: 44px;
    }

    /* Better touch feedback */
    a:active, button:active {
        opacity: 0.85;
        transition: opacity 0.1s ease;
    }

    /* Remove hover shadow effects on mobile */
    .hover\:shadow-\[0_20px_60px_rgba\(37\,99\,235\,0\.25\)\]:hover,
    .hover\:shadow-\[0_25px_80px_rgba\(37\,99\,235\,0\.25\)\]:hover {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    }
}