/*
 * NextEp Mobile — Comprehensive Mobile Stylesheet
 * Applies only on max-width: 768px (phones)
 * Desktop (> 768px) is completely unaffected.
 *
 * Sections:
 *  1. Global Resets & Base
 *  2. Header / Top Nav (mobile-specific)
 *  3. Bottom Navigation Bar (WhatsApp/Apple style)
 *  4. Listings Slide-Up Sheet
 *  5. Front Page — Homepage
 *  6. Hero Sections (all pages)
 *  7. Cards & Grids (shared)
 *  8. Business Listings Page (.blp-*)
 *  9. Single Business Listing (.sl-*)
 * 10. Startup Listings Page (.slp-*)
 * 11. Franchise Page (.fr-*)
 * 12. Investors Page (.inv-*)
 * 13. Contact Page
 * 14. Auth Page
 * 15. Footer
 * 16. Forms (shared)
 * 17. Utilities & Misc
 */

/* ═══════════════════════════════════════════════════════════════════
   1. GLOBAL RESETS & BASE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Extra bottom padding so content never hides behind bottom nav */
  body {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    overscroll-behavior-y: none;
  }

  /* Tighter container padding on mobile */
  .nx-container {
    padding: 0 16px;
  }

  /* Sections get less vertical space on mobile */
  .nx-section {
    padding: 44px 0;
  }

  /* Reduce all section headings */
  .nx-title {
    font-size: clamp(22px, 6vw, 28px);
  }

  .nx-subtitle {
    font-size: 14px;
  }

  /* Prevent overflow issues on small screens */
  * {
    max-width: 100%;
  }

  img, video, iframe, table {
    max-width: 100%;
  }

  /* Tables scroll horizontally */
  .nx-admin-table-wrap,
  table {
    overflow-x: auto;
    display: block;
    -webkit-overflow-scrolling: touch;
  }

}

/* ═══════════════════════════════════════════════════════════════════
   2. HEADER / TOP NAV (mobile)
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Slimmer header on mobile */
  .nx-nav-inner {
    padding: 10px 0 !important;
    gap: 0;
    justify-content: space-between;
  }

  /* Hide desktop nav links, right-side buttons, and old mobile select */
  .nx-nav-links,
  .nx-nav-right,
  .nx-mobile-toggle,
  .nx-mobile-nav-select,
  .nx-mobile-menu {
    display: none !important;
  }

  /* Brand logo on mobile */
  .nx-brand {
    gap: 5px;
    font-size: 13px;
  }

  .nx-brand-logo {
    height: 44px !important;
    width: auto !important;
  }

  .nx-brand small,
  .nx-brand div {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -0.01em;
  }

  /* Compact nav on mobile */
  .nx-nav.nx-scrolled .nx-nav-inner {
    padding: 8px 0 !important;
  }

}

/* ═══════════════════════════════════════════════════════════════════
   3. BOTTOM NAVIGATION BAR
   Styled here; HTML is in header.php
   ═══════════════════════════════════════════════════════════════════ */

/* Hide on desktop */
.nx-bottom-nav {
  display: none;
}

@media (max-width: 768px) {

  .nx-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9998;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(40, 181, 135, 0.15);
    box-shadow: 0 -4px 28px rgba(10, 40, 24, 0.1);
    /* iOS safe area */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    align-items: stretch;
  }

  /* Each tab item */
  .nx-bn-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 4px 8px;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    color: #94a3b8;
    font-family: 'Manrope', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: color 0.2s ease;
    min-width: 0;
    -webkit-tap-highlight-color: transparent;
  }

  .nx-bn-item:hover,
  .nx-bn-item:active {
    color: #28B587;
  }

  .nx-bn-item svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
  }

  .nx-bn-item:active svg {
    transform: scale(0.9);
  }

  /* Active state — set via data-active on nav element */
  .nx-bottom-nav[data-active="home"] [data-tab="home"],
  .nx-bottom-nav[data-active="listings"] [data-tab="listings"],
  .nx-bottom-nav[data-active="services"] [data-tab="services"],
  .nx-bottom-nav[data-active="account"] [data-tab="account"] {
    color: #28B587;
  }

  .nx-bottom-nav[data-active="home"] [data-tab="home"] svg,
  .nx-bottom-nav[data-active="listings"] [data-tab="listings"] svg,
  .nx-bottom-nav[data-active="services"] [data-tab="services"] svg,
  .nx-bottom-nav[data-active="account"] [data-tab="account"] svg {
    filter: drop-shadow(0 0 4px rgba(40, 181, 135, 0.4));
  }

  /* Center CTA button — elevated "+" pill */
  .nx-bn-cta {
    color: #0a2818;
    position: relative;
    top: -10px;
    flex-shrink: 0;
    width: 56px;
    padding: 0;
  }

  .nx-bn-plus-wrap {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #0a2818 0%, #1a4a2e 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(10, 40, 24, 0.4);
    color: #42D4A4;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .nx-bn-cta svg {
    color: #42D4A4;
  }

  .nx-bn-cta:hover .nx-bn-plus-wrap,
  .nx-bn-cta:active .nx-bn-plus-wrap {
    transform: scale(0.93);
    box-shadow: 0 4px 14px rgba(10, 40, 24, 0.35);
  }

  .nx-bn-cta span:last-child {
    font-size: 10px;
    color: #0a2818;
    font-weight: 700;
    margin-top: 2px;
  }

}

/* ═══════════════════════════════════════════════════════════════════
   4. LISTINGS SLIDE-UP SHEET
   ═══════════════════════════════════════════════════════════════════ */

/* Sheet hidden on desktop */
.nx-ls-sheet {
  display: none;
}

@media (max-width: 768px) {

  .nx-ls-sheet {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 99997;
    pointer-events: none;
  }

  .nx-ls-sheet.open {
    pointer-events: all;
  }

  /* Dark backdrop */
  .nx-ls-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 15, 7, 0.6);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.35s ease;
  }

  .nx-ls-sheet.open .nx-ls-backdrop {
    opacity: 1;
  }

  /* Sliding panel */
  .nx-ls-panel {
    position: absolute;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    left: 0;
    right: 0;
    background: #ffffff;
    border-radius: 24px 24px 0 0;
    padding: 8px 20px 28px;
    box-shadow: 0 -8px 40px rgba(10, 40, 24, 0.2);
    transform: translateY(110%);
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
    max-height: 80vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .nx-ls-sheet.open .nx-ls-panel {
    transform: translateY(0);
  }

  /* Handle bar */
  .nx-ls-handle {
    width: 40px;
    height: 4px;
    background: #e2e8f0;
    border-radius: 999px;
    margin: 8px auto 16px;
  }

  /* Sheet header */
  .nx-ls-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
  }

  .nx-ls-head h3 {
    font-family: 'DM Serif Display', serif;
    font-size: 20px;
    font-weight: 400;
    color: #0a2818;
    margin: 0;
  }

  .nx-ls-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f1f5f9;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    transition: background 0.2s;
    -webkit-tap-highlight-color: transparent;
  }

  .nx-ls-close:active {
    background: #e2e8f0;
  }

  /* Tile grid — 3 columns */
  .nx-ls-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
  }

  .nx-ls-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    background: #f8fafc;
    border: 1px solid #e8f0eb;
    border-radius: 16px;
    text-decoration: none;
    text-align: center;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
    -webkit-tap-highlight-color: transparent;
  }

  .nx-ls-tile:active {
    transform: scale(0.96);
    background: #f0fdf4;
    border-color: rgba(40, 181, 135, 0.3);
  }

  .nx-ls-tile-ico {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
  }

  .nx-ls-tile strong {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
  }

  .nx-ls-tile small {
    display: block;
    font-size: 10px;
    color: #64748b;
    line-height: 1.3;
  }

  /* CTA tile */
  .nx-ls-tile-cta {
    background: #f0fdf4;
    border-color: rgba(40, 181, 135, 0.25);
  }

  .nx-ls-tile-cta strong {
    color: #0a2818;
  }

  /* Contact link at bottom of sheet */
  .nx-ls-contact {
    display: block;
    text-align: center;
    padding: 12px;
    background: #f8fafc;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #28B587;
    text-decoration: none;
    border: 1px solid rgba(40, 181, 135, 0.2);
    -webkit-tap-highlight-color: transparent;
  }

}

/* ═══════════════════════════════════════════════════════════════════
   5. FRONT PAGE — HOMEPAGE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Hero: full-width, reduced padding */
  .home .nx-hero,
  .front-page .nx-hero,
  .page-template-front-page .nx-hero {
    padding-top: 70px !important;
    padding-bottom: 32px;
  }

  .nx-hero-title {
    font-size: clamp(28px, 8vw, 36px) !important;
    line-height: 1.1;
    margin-bottom: 14px;
  }

  .nx-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }

  .nx-hero-actions {
    flex-direction: column;
    gap: 10px;
  }

  .nx-hero-actions .nx-btn-primary,
  .nx-hero-actions .nx-btn-secondary,
  .nx-hero-actions .nx-btn-outline {
    width: 100%;
    justify-content: center;
    padding: 14px 20px;
    font-size: 14px;
  }

  /* Search panel */
  .nx-search-panel {
    padding: 16px;
  }

  .nx-search-grid {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }

  /* Stats row — horizontal scroll */
  .nx-kpi-row,
  .nx-stats-row {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .nx-kpi-row::-webkit-scrollbar,
  .nx-stats-row::-webkit-scrollbar {
    display: none;
  }

  /* Feature grid — 1 or 2 columns */
  .nx-feature-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px;
  }

  /* Tiles */
  .nx-tiles {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Dashboard grid */
  .nx-dashboard-grid {
    grid-template-columns: 1fr !important;
  }

  /* Section header */
  .nx-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 28px !important;
    padding-bottom: 14px !important;
  }

  /* Buyer mandates section — tighter on mobile */
  .nx-buyer-section {
    padding: 48px 0 !important;
  }

  /* KPI cards on homepage */
  .nx-kpi-card {
    min-width: 140px;
    padding: 16px;
  }

  .nx-kpi-value {
    font-size: 26px;
  }

  /* Testimonials / trust strip */
  .nx-trust-strip,
  .nx-partners-strip {
    flex-wrap: wrap;
    gap: 12px;
  }

  /* Category grid */
  .nx-cat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
  }

  /* Featured listings horizontal scroll */
  .nx-listings-track {
    overflow-x: auto;
    display: flex;
    gap: 14px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 8px;
  }

  .nx-listings-track::-webkit-scrollbar {
    display: none;
  }

  .nx-listings-track .nx-card,
  .nx-listings-track .nx-ultimate-card {
    min-width: 260px;
    max-width: 280px;
    flex-shrink: 0;
  }

  /* Valuation calculator */
  .val-wrap {
    flex-direction: column !important;
    gap: 20px !important;
  }

  .val-tabs {
    overflow-x: auto;
    display: flex;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px !important;
    padding-bottom: 4px;
  }

  .val-tabs::-webkit-scrollbar {
    display: none;
  }

  .val-gauge-wrap {
    width: 160px !important;
    height: 80px !important;
  }

}

/* ═══════════════════════════════════════════════════════════════════
   6. HERO SECTIONS — ALL PAGES
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Generic page hero overrides */
  [class*="-hero"],
  .nx-hero {
    padding: 32px 0 28px !important;
    min-height: unset !important;
  }

  /* Hero heading size reduction */
  [class*="-hero"] h1,
  [class*="-hero"] .hero-title,
  [class*="-hero-title"] {
    font-size: clamp(24px, 7vw, 32px) !important;
    line-height: 1.15 !important;
  }

  [class*="-hero"] p,
  [class*="-hero"] .hero-desc {
    font-size: 14px !important;
    line-height: 1.6;
  }

  /* Hero KPI strips — 2x2 grid on mobile */
  [class*="-hero-kpis"],
  [class*="-kpi-row"],
  [class*="-stats-row"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  [class*="-kpi-box"],
  [class*="-kpi-item"] {
    padding: 14px 12px !important;
  }

  [class*="-kpi-box"] [class*="-kpi-val"],
  [class*="-kpi-item"] strong {
    font-size: 20px !important;
  }

  /* Hero CTA buttons */
  [class*="-hero-cta"],
  [class*="-hero-actions"] {
    flex-direction: column !important;
    gap: 10px !important;
  }

  [class*="-hero-cta"] a,
  [class*="-hero-cta"] button,
  [class*="-hero-actions"] a,
  [class*="-hero-actions"] button {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }

}

/* ═══════════════════════════════════════════════════════════════════
   7. CARDS & GRIDS (shared components)
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Generic card grids — single column */
  .nx-card-grid,
  [class*="-card-grid"],
  [class*="-grid"]:not(.nx-ls-grid):not(.nx-footer-links-grid):not(.nx-search-grid) {
    grid-template-columns: 1fr !important;
  }

  /* Cards — full width */
  .nx-card,
  .nx-ultimate-card {
    padding: 16px !important;
  }

  /* Disable hover lift on touch devices (prevents sticky hover state) */
  @media (hover: none) {
    .nx-card:hover,
    .nx-ultimate-card:hover,
    [class*="-card"]:hover {
      transform: none !important;
      box-shadow: inherit !important;
    }
  }

  /* ── Carousel scrollbar hide + compact ── */
  .nx-carousel-track {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  .nx-carousel-track::-webkit-scrollbar {
    display: none !important;
  }

  /* Carousel arrow buttons — smaller on mobile */
  .nx-carousel-btn {
    width: 32px !important;
    height: 32px !important;
    font-size: 18px !important;
    min-width: 32px !important;
  }

  /* ── Buyer Mandate cards — compact on mobile ── */
  .nx-carousel .nx-ultimate-card {
    padding: 20px !important;
    min-width: 250px !important;
    max-width: 280px !important;
  }

  .nx-carousel .nx-ultimate-card h3 {
    font-size: 19px !important;
    margin-bottom: 8px !important;
    line-height: 1.25 !important;
  }

  .nx-carousel .nx-ultimate-card p {
    font-size: 12px !important;
    margin-bottom: 14px !important;
  }

  /* Tighter meta grid inside buyer cards */
  .nx-carousel .nx-ultimate-card [style*="display:grid"] {
    gap: 10px !important;
    margin-bottom: 16px !important;
    padding-top: 14px !important;
  }

  /* Bottom price bar inside cards */
  .nx-carousel .nx-ultimate-card > div:last-child {
    padding: 12px !important;
  }

  /* Detail grid (main + sidebar) — stack on mobile */
  .nx-detail-grid {
    grid-template-columns: 1fr !important;
  }

  .nx-detail-sidebar {
    position: static !important;
    top: auto !important;
  }

  /* Filter layout — stack sidebar above */
  .nx-filter-layout {
    grid-template-columns: 1fr !important;
  }

  .nx-filter-panel {
    position: static !important;
    top: auto !important;
  }

}

/* ═══════════════════════════════════════════════════════════════════
   8. BUSINESS LISTINGS PAGE (.blp-*)
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Hero */
  .blp-hero {
    padding: 28px 0 24px !important;
  }

  .blp-hero h1 {
    font-size: 26px !important;
  }

  /* Main layout — sidebar goes below on mobile */
  .blp-wrap {
    display: flex;
    flex-direction: column !important;
    gap: 16px;
  }

  /* Sidebar becomes a collapsible filter drawer on mobile */
  .blp-side {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    position: static !important;
    order: 2;
    border-radius: 16px;
    overflow: hidden;
  }

  /* Filter sidebar toggle button */
  .blp-side-hd {
    cursor: pointer;
    padding: 14px 16px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .blp-side-body {
    display: none;
  }

  .blp-side.open .blp-side-body {
    display: block;
  }

  /* Filter sections */
  .blp-filt-body {
    padding: 0 14px 14px !important;
  }

  /* Chips row — scrollable */
  .blp-chips {
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Results area — first on mobile */
  .blp-main {
    order: 1;
  }

  /* Card grid — single column */
  .blp-cards {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .blp-card {
    padding: 14px !important;
  }

  /* Card header */
  .blp-card-hd {
    flex-direction: column;
    gap: 10px;
  }

  /* Price display */
  .blp-card-price {
    font-size: 18px !important;
  }

  /* Card meta row — 2 columns */
  .blp-card-meta {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* Type pills */
  .blp-type-pills {
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Price range slider */
  .blp-range-wrap {
    padding: 4px 0;
  }

  /* Pagination */
  .blp-pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }

}

/* ═══════════════════════════════════════════════════════════════════
   9. SINGLE BUSINESS LISTING PAGE (.sl-*)
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Hero */
  .sl-hero {
    padding: 28px 0 24px !important;
    min-height: unset !important;
  }

  .sl-hero-pattern {
    display: none;
  }

  /* Floating price card — becomes inline on mobile */
  .sl-hero-price {
    position: static !important;
    width: 100% !important;
    margin-top: 16px;
    border-radius: 16px !important;
  }

  /* Hero content layout */
  .sl-hero-inner {
    flex-direction: column !important;
    gap: 16px !important;
  }

  /* Hero title */
  .sl-hero h1,
  .sl-hero-title {
    font-size: clamp(22px, 6vw, 28px) !important;
    line-height: 1.2 !important;
  }

  /* Stat bar — wrap on mobile */
  .sl-stat-bar {
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 14px !important;
  }

  .sl-stat-item {
    min-width: calc(50% - 5px);
  }

  /* Gallery — 2 columns on mobile */
  .sl-gallery {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    height: auto !important;
  }

  /* Detail grid — stack sidebar below content */
  .sl-detail-grid,
  .sl-layout-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Sticky sidebar becomes static */
  .sl-sidebar,
  .sl-detail-sidebar {
    position: static !important;
    top: auto !important;
  }

  /* Inquiry form — full width */
  .sl-inq {
    padding: 20px !important;
  }

  .sl-inq input,
  .sl-inq select,
  .sl-inq textarea {
    font-size: 16px !important; /* prevent iOS zoom */
  }

  /* Quick facts card */
  .sl-qcard {
    padding: 16px !important;
  }

  /* Highlights grid — 1 column */
  .sl-hl-grid {
    grid-template-columns: 1fr !important;
  }

  /* Trust signals */
  .sl-trust {
    padding: 14px !important;
  }

  .sl-trust-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* Similar listings */
  .sl-sim-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Card section headers */
  .sl-card-h {
    padding: 14px 16px !important;
  }

  /* Share buttons */
  .sl-share-row {
    flex-wrap: wrap;
    gap: 8px;
  }

  .sl-share-btn {
    flex: 1;
    min-width: calc(50% - 4px);
    justify-content: center !important;
  }

}

/* ═══════════════════════════════════════════════════════════════════
   10. STARTUP LISTINGS PAGE (.slp-*)
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Hero */
  .slp-hero {
    padding: 28px 0 20px !important;
    min-height: unset !important;
  }

  .slp-hero h1 {
    font-size: 26px !important;
  }

  /* Filter bar — stacked */
  .slp-fbar {
    flex-direction: column !important;
    gap: 10px !important;
    padding: 14px !important;
    border-radius: 16px;
  }

  .slp-fbar select,
  .slp-fbar input {
    width: 100% !important;
    font-size: 16px !important;
  }

  /* Card grid — single column */
  .slp-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Card */
  .slp-card {
    border-radius: 16px !important;
    overflow: hidden;
  }

  .slp-card-top {
    padding: 16px !important;
  }

  .slp-card-body {
    padding: 14px !important;
  }

  /* Stage badge */
  .slp-stage-badge {
    font-size: 10px !important;
    padding: 4px 8px !important;
  }

  /* Meta cells — 2x2 grid */
  .slp-card-meta {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* CTA banner */
  .slp-cta-banner {
    padding: 24px 16px !important;
    text-align: center;
  }

  .slp-cta-banner h2 {
    font-size: 22px !important;
  }

  .slp-cta-banner .btn-row,
  .slp-cta-actions {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .slp-cta-banner a {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

}

/* ═══════════════════════════════════════════════════════════════════
   11. FRANCHISE PAGE (.fr-*)
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Hero */
  .fr-hero {
    padding: 28px 0 24px !important;
    min-height: unset !important;
  }

  .fr-hero h1 {
    font-size: clamp(24px, 7vw, 30px) !important;
  }

  /* KPI strip */
  .fr-kpi-strip {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* Why section grid — 2 columns */
  .fr-why-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    padding: 20px 0 !important;
  }

  .fr-why-card {
    padding: 14px !important;
  }

  /* Franchise cards grid — single column */
  .fr-listings {
    padding: 28px 0 !important;
  }

  .fr-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .fr-card {
    border-radius: 16px !important;
    overflow: hidden;
  }

  .fr-card-top {
    padding: 18px !important;
  }

  .fr-card-body {
    padding: 14px !important;
  }

  .fr-card-meta {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .fr-card-btn {
    width: 100% !important;
    text-align: center !important;
    display: block !important;
  }

  /* Apply form — stacked */
  .fr-form-wrap {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 24px 0 !important;
  }

  .fr-form-inner {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .fr-form-card {
    padding: 20px !important;
  }

  .fr-form-card input,
  .fr-form-card select,
  .fr-form-card textarea {
    font-size: 16px !important;
  }

}

/* ═══════════════════════════════════════════════════════════════════
   12. INVESTORS PAGE (.inv-*)
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Hero */
  .inv-hero {
    padding: 28px 0 24px !important;
    min-height: unset !important;
  }

  .inv-hero h1 {
    font-size: clamp(24px, 7vw, 30px) !important;
  }

  .inv-hero-kpis {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .inv-hero-btns {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .inv-hero-btns a {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* Investor cards grid — single column */
  .inv-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .inv-card {
    border-radius: 16px !important;
    overflow: hidden;
  }

  .inv-card-top {
    padding: 18px !important;
  }

  .inv-card-body {
    padding: 14px !important;
  }

  .inv-card-meta {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* Startup ideas section */
  .inv-ideas {
    padding: 28px 0 !important;
  }

  .inv-ideas-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .inv-idea-card {
    padding: 16px !important;
  }

  /* CTA card */
  .inv-cta-card {
    padding: 28px 16px !important;
    text-align: center;
  }

  .inv-cta-card h2 {
    font-size: 22px !important;
  }

  .inv-cta-card .cta-btns {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .inv-cta-card .cta-btns a {
    width: 100% !important;
    justify-content: center !important;
  }

}

/* ═══════════════════════════════════════════════════════════════════
   13. CONTACT PAGE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Hero section */
  .nx-contact-hero,
  [class*="contact-hero"] {
    padding: 28px 0 20px !important;
    min-height: unset !important;
  }

  /* 2-column layout — stack */
  .nx-contact-grid,
  [class*="contact-grid"],
  [class*="contact-wrap"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Info panel */
  [class*="contact-info"] {
    padding: 20px !important;
    border-radius: 16px !important;
  }

  /* Form card */
  [class*="contact-form"] {
    padding: 20px !important;
    border-radius: 16px !important;
  }

  [class*="contact-form"] input,
  [class*="contact-form"] select,
  [class*="contact-form"] textarea {
    font-size: 16px !important;
  }

  [class*="contact-form"] .form-row,
  [class*="contact-form"] .two-col {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Contact detail items */
  [class*="contact-detail"],
  [class*="contact-item"] {
    padding: 12px !important;
  }

  /* Map */
  [class*="contact-map"],
  [class*="map-wrap"] {
    height: 200px !important;
    border-radius: 14px !important;
  }

}

/* ═══════════════════════════════════════════════════════════════════
   14. AUTH PAGE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Full page auth — hide lamp panel, show only form */
  .nx-auth-page {
    flex-direction: column !important;
    min-height: 100svh !important;
  }

  /* Hide the lamp/branding left panel on mobile */
  .nx-auth-left {
    display: none !important;
  }

  /* Form panel — full width */
  .nx-auth-right {
    width: 100% !important;
    min-height: 100svh !important;
    padding: 60px 20px 100px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #ffffff;
  }

  /* Unlock overlay on mobile */
  .nx-form-lock-overlay {
    display: none !important; /* On mobile, skip lamp interaction */
  }

  /* Form wrapper — full width */
  .nx-auth-form-wrapper {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Form heading */
  .nx-auth-form-wrapper h2 {
    font-size: 26px !important;
    margin-bottom: 4px !important;
  }

  .nx-auth-form-wrapper .nx-subtitle {
    font-size: 13px !important;
    margin-bottom: 20px !important;
  }

  /* Tab switcher */
  .nx-auth-switcher {
    width: 100% !important;
  }

  /* Input fields — 16px to prevent iOS zoom */
  .nx-auth-input {
    font-size: 16px !important;
    padding: 14px !important;
  }

  /* Role pills — 2 columns */
  .nx-role-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .nx-role-pill label {
    padding: 10px 8px !important;
    font-size: 12px !important;
  }

  .nx-role-icon {
    width: 28px !important;
    height: 28px !important;
    font-size: 14px !important;
  }

  /* Submit button */
  .nx-auth-submit {
    padding: 16px !important;
    font-size: 15px !important;
  }

  /* Auth messages */
  .nx-auth-msg {
    font-size: 13px !important;
    padding: 12px !important;
  }

  /* Show a small brand logo at top of form on mobile */
  .nx-auth-right::before {
    content: '';
    display: block;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 44px;
    background: url('https://nextepsolution.com/wp-content/uploads/2026/02/finallogo-removebg-preview.png') center/contain no-repeat;
  }

}

/* ═══════════════════════════════════════════════════════════════════
   15. FOOTER
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Extra bottom padding for bottom nav */
  .nx-footer {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }

  .nx-footer-body {
    padding: 36px 0 0 !important;
  }

  /* Footer links grid — 2 columns */
  .nx-footer-links-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px 16px !important;
  }

  /* Brand block — full width */
  .nx-footer-brand {
    grid-column: 1 / -1 !important;
  }

  .nx-footer-brand h3 {
    font-size: 22px !important;
  }

  .nx-footer-brand p {
    max-width: 100% !important;
    font-size: 13px !important;
  }

  /* Connect column — full width */
  .nx-footer-col:last-child {
    grid-column: 1 / -1 !important;
  }

  /* Column titles */
  .nx-footer-col-title {
    margin-bottom: 10px !important;
  }

  /* Link list */
  .nx-footer-col ul {
    gap: 8px !important;
  }

  .nx-footer-col ul li a {
    font-size: 13px !important;
  }

  /* Popular searches — scrollable */
  .nx-footer-search-tags {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .nx-footer-search-tags::-webkit-scrollbar {
    display: none;
  }

  .nx-footer-search-tag {
    flex-shrink: 0;
    font-size: 11.5px !important;
  }

  /* Bottom bar */
  .nx-footer-bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: 10px !important;
    padding: 16px 0 !important;
  }

  .nx-footer-bottom-links {
    gap: 14px !important;
    justify-content: center;
  }

}

/* ═══════════════════════════════════════════════════════════════════
   16. FORMS (shared)
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* All form inputs — prevent iOS zoom (need 16px minimum) */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px !important;
    border-radius: 12px !important;
  }

  /* Form groups — stacked */
  .nx-form-row,
  .form-row,
  .two-col-form {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  /* Form cards */
  .nx-form-card {
    padding: 18px !important;
    border-radius: 16px !important;
  }

  /* Submit buttons */
  .nx-form-card button[type="submit"],
  .form-submit,
  .nx-btn-primary[type="submit"] {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Checkboxes and radios — bigger tap targets */
  input[type="checkbox"],
  input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
  }

}

/* ═══════════════════════════════════════════════════════════════════
   17. UTILITIES & MISC
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Breadcrumbs — smaller */
  .nx-breadcrumbs {
    font-size: 12px !important;
    flex-wrap: wrap;
    gap: 4px;
    padding: 10px 16px !important;
  }

  /* Badges — smaller */
  .nx-badge {
    font-size: 11px !important;
    padding: 4px 10px !important;
  }

  /* Pagination — centered */
  .nx-pagination {
    justify-content: center;
    flex-wrap: wrap;
  }

  /* Admin panel table */
  .nx-admin-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
  }

  /* No-scroll lock on sheet open */
  body.nx-sheet-open {
    overflow: hidden !important;
  }

  /* Sticky CTA bar on listing pages */
  .nx-sticky-cta {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 0 16px;
  }

  /* Buyer listings specific */
  .blp-hero,
  .buyer-hero {
    padding: 28px 0 20px !important;
  }

  /* Toast / notification messages */
  .nx-msg-error,
  .nx-msg-success,
  .nx-msg-info {
    font-size: 13px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
  }

  /* Responsive embeds */
  .nx-embed-wrap {
    position: relative;
    padding-top: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 14px;
  }

  .nx-embed-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  /* Scroll-snap for card rows */
  .nx-snap-row {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding: 4px 0 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .nx-snap-row::-webkit-scrollbar {
    display: none;
  }

  .nx-snap-row > * {
    scroll-snap-align: start;
    flex-shrink: 0;
    width: 80vw;
    max-width: 300px;
  }

  /* Hide decorative elements on mobile */
  [class*="-pattern"],
  [class*="-decoration"],
  [class*="-bg-anim"] {
    display: none !important;
  }

  /* Smaller section headings */
  .nx-section h2,
  .nx-section .section-title {
    font-size: clamp(20px, 6vw, 26px) !important;
  }

}

/* Extra small phones (iPhone SE, Galaxy S8) */
@media (max-width: 375px) {

  .nx-container {
    padding: 0 12px;
  }

  .nx-bn-item span {
    font-size: 9px;
  }

  .nx-bn-item svg {
    width: 20px;
    height: 20px;
  }

  .nx-ls-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .nx-feature-grid {
    grid-template-columns: 1fr !important;
  }

  [class*="-hero"] h1,
  [class*="-hero-title"],
  .nx-hero-title {
    font-size: clamp(22px, 7vw, 26px) !important;
  }

}

/* ═══════════════════════════════════════════════════════════════════
   18. MOBILE FULL-MENU DRAWER (hamburger → right-side panel)
   ═══════════════════════════════════════════════════════════════════ */

/* Hidden on desktop by default */
.nx-mob-menu-btn { display: none; }
.nx-mob-drawer   { display: none; }

@media (max-width: 768px) {

  /* ── Hamburger button ───────────────────────────────────────────── */
  .nx-mob-menu-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    border-radius: 10px;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
    transition: background 0.2s;
  }

  .nx-mob-menu-btn span {
    display: block;
    width: 22px;
    height: 2.5px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                opacity   0.2s ease,
                width     0.2s ease;
  }

  .nx-mob-menu-btn:active { background: rgba(40, 181, 135, 0.08); }

  /* X state when open */
  .nx-mob-menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .nx-mob-menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .nx-mob-menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  /* ── Drawer overlay ─────────────────────────────────────────────── */
  .nx-mob-drawer {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 99998;
    pointer-events: none;
  }

  .nx-mob-drawer.open { pointer-events: all; }

  .nx-mob-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 15, 7, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.32s ease;
  }

  .nx-mob-drawer.open .nx-mob-backdrop { opacity: 1; }

  /* ── Sliding panel ──────────────────────────────────────────────── */
  .nx-mob-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 88vw;
    max-width: 320px;
    background: #ffffff;
    box-shadow: -10px 0 50px rgba(10, 40, 24, 0.22);
    transform: translateX(100%);
    transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .nx-mob-drawer.open .nx-mob-panel { transform: translateX(0); }

  /* Panel top bar: dark green */
  .nx-mob-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    background: linear-gradient(135deg, #081208 0%, #0a2818 60%, #143d22 100%);
    flex-shrink: 0;
  }

  .nx-mob-panel-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    color: #ffffff;
    font-family: 'DM Serif Display', serif;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.01em;
  }

  .nx-mob-panel-brand img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    border-radius: 8px;
  }

  .nx-mob-panel-close {
    width: 34px;
    height: 34px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s;
  }

  .nx-mob-panel-close:active { background: rgba(255, 255, 255, 0.25); }

  /* Scrollable body */
  .nx-mob-panel-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: 8px;
  }

  /* Sections */
  .nx-mob-section {
    padding: 6px 0;
    border-bottom: 1px solid #f1f5f9;
  }

  .nx-mob-section:last-child { border-bottom: none; }

  /* Section label */
  .nx-mob-label {
    font-family: 'Manrope', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #94a3b8;
    padding: 12px 18px 4px;
  }

  /* Link row */
  .nx-mob-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 18px;
    text-decoration: none;
    color: #0f172a;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 600;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
  }

  .nx-mob-link:active { background: #f8fafc; }

  /* Icon pill */
  .nx-mob-ico {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
  }

  .nx-mob-ico--green  { background: #f0fdf4; }
  .nx-mob-ico--amber  { background: #fefce8; }
  .nx-mob-ico--sky    { background: #f0f9ff; }
  .nx-mob-ico--purple { background: #faf5ff; }
  .nx-mob-ico--rose   { background: #fff1f2; }
  .nx-mob-ico--teal   { background: #f0fdfa; }

  /* Link text + sub-label */
  .nx-mob-link-text {
    flex: 1;
    line-height: 1.3;
  }

  .nx-mob-link-text small {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: #64748b;
    margin-top: 1px;
  }

  /* Chevron arrow */
  .nx-mob-chevron {
    color: #cbd5e1;
    flex-shrink: 0;
    margin-left: auto;
  }

  /* Footer CTAs */
  .nx-mob-panel-foot {
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #e8f0eb;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
    background: #f8fdfb;
  }

  .nx-mob-foot-btn {
    display: block;
    text-align: center;
    padding: 13px 20px;
    border-radius: 12px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s, box-shadow 0.15s;
  }

  .nx-mob-foot-btn--primary {
    background: linear-gradient(135deg, #081208 0%, #0a2818 60%, #143d22 100%);
    color: #42D4A4;
    box-shadow: 0 4px 18px rgba(10, 40, 24, 0.28);
  }

  .nx-mob-foot-btn--secondary {
    background: #f0fdf4;
    color: #0a2818;
    border: 1.5px solid #bbf7d0;
  }

  .nx-mob-foot-btn:active { transform: scale(0.97); }

}