/* ═══════════════════════════════════
   POTTRI MOBILE FIXES
   Samsung S23 / 375-412px viewport
   ═══════════════════════════════════ */

/* ── HAMBURGER BUTTON ── */
.hamburger-btn {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #1C1C1A;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1;
  transition: background 0.15s;
}
.hamburger-btn:hover {
  background: #F4F3EF;
}

@media (max-width: 767px) {
  .hamburger-btn {
    display: block;
  }

  /* Hide entire nav on mobile by default */
  #main-nav {
    display: none !important;
  }

  /* When header has .responsive class → show nav as dropdown panel */
  header.responsive #main-nav {
    display: flex !important;
    flex-direction: column;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: #FAFAF8;
    border-bottom: 1px solid #E8E8E4;
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
    padding: 8px 24px 16px;
    z-index: 9998;
    gap: 0 !important;
  }
  header.responsive #main-nav > a {
    display: block !important;
    padding: 14px 0 !important;
    font-size: 1rem !important;
    border-bottom: 1px solid #EAE9E4;
    width: 100%;
  }
  header.responsive #main-nav > .nav-dropdown {
    display: block !important;
    width: 100%;
    border-bottom: 1px solid #EAE9E4;
  }
  header.responsive .nav-dropdown > button {
    padding: 14px 0 !important;
    font-size: 1rem !important;
    width: 100%;
    justify-content: space-between !important;
  }
  header.responsive .dropdown-menu {
    position: static !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin-top: 0 !important;
    padding: 0 0 8px 16px !important;
    background: transparent !important;
  }
  header.responsive .dropdown-menu a {
    padding: 10px 0 !important;
    font-size: 0.9rem !important;
  }
}

/* ── VENDOR CARDS STACK ── */
@media (max-width: 700px) {
  /* Grid vendor cards → single column */
  [style*="grid-template-columns:1fr auto"],
  [style*="grid-template-columns: 1fr auto"] {
    grid-template-columns: 1fr !important;
  }

  /* Vendor card right side (price + CTA) → full width, left align */
  .vendor-card > div:last-child,
  [class*="vendor-card"] > div:last-child {
    text-align: left !important;
    width: 100%;
  }
  .vendor-card [style*="text-align:right"],
  [class*="vendor-card"] [style*="text-align:right"] {
    text-align: left !important;
  }

  /* Stats row in vendor cards */
  [style*="gap:28px"] {
    gap: 16px !important;
    flex-wrap: wrap !important;
  }

  /* Action buttons full width */
  .vendor-card [style*="flex-shrink:0"]:last-child {
    width: 100%;
  }
  .vendor-card [style*="flex-shrink:0"]:last-child a,
  .vendor-card [style*="flex-shrink:0"]:last-child button {
    flex: 1;
    text-align: center;
    justify-content: center;
  }
}

/* ── HERO H1 + CTA ON MOBILE ── */
@media (max-width: 520px) {
  /* Smaller H1 on mobile */
  section[style*="position:relative"] h1,
  main h1 {
    font-size: 1.75rem !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
  }

  /* Hero lead text smaller */
  section[style*="position:relative"] > div > div > p {
    font-size: 0.92rem !important;
  }

  /* Stats row compact */
  section[style*="position:relative"] [style*="gap:32px"] {
    gap: 20px !important;
  }
  section[style*="position:relative"] [style*="font-size:2rem"] {
    font-size: 1.5rem !important;
  }

  /* ZIP search → stack */
  .zip-wrap,
  [class*="zip-wrap"],
  [style*="zip-wrap"] {
    flex-direction: column !important;
    padding: 12px !important;
    gap: 8px !important;
  }
  .zip-wrap input,
  [class*="zip-wrap"] input {
    width: 100% !important;
    padding: 12px !important;
  }
  .zip-wrap button,
  [class*="zip-wrap"] button {
    width: 100% !important;
    white-space: normal !important;
    justify-content: center !important;
  }

  /* Trust signals stack */
  [style*="gap:24px"][style*="margin-top:36px"],
  [style*="gap:16px"][style*="uppercase"] {
    flex-direction: column !important;
    gap: 8px !important;
  }
}

/* ── COMPARISON TABLE ── */
@media (max-width: 600px) {
  .compare-table-wrap,
  [class*="compare-table"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .compare-table,
  table[style*="border-collapse"] {
    min-width: 560px;
  }
  .compare-table th,
  .compare-table td,
  table[style*="border-collapse"] th,
  table[style*="border-collapse"] td {
    white-space: nowrap;
    padding: 10px 12px !important;
    font-size: 0.78rem !important;
  }
}

/* ── GENERAL MOBILE FIXES ── */
@media (max-width: 520px) {
  /* Reduce section padding on mobile */
  section[style*="padding:80px 24px"],
  section[style*="padding:72px 24px"],
  section[style*="padding:64px 24px"] {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  /* Grid cards → single column */
  [style*="grid-template-columns:repeat(auto-fill"],
  [style*="grid-template-columns: repeat(auto-fill"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr !important;
  }

  /* 2-column content grids → single column (only specific IDs) */
  #hero-grid,
  #seo-grid,
  #body-grid,
  #overview-grid,
  #city-grid > div {
    grid-template-columns: 1fr !important;
  }

  /* Footer grid */
  #footer-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Filter pills wrap better */
  [style*="flex-wrap:wrap"][style*="gap:8px"] {
    gap: 6px !important;
  }

  /* Breadcrumb smaller */
  [style*="padding:16px 24px 0"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Main content padding */
  main[style*="padding:32px 24px"],
  [style*="max-width:1200px"][style*="padding:0 24px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ── VENDOR PROFILE PAGE ── */
@media (max-width: 700px) {
  #content-grid {
    grid-template-columns: 1fr !important;
  }
  #hours-list > div {
    font-size: 0.78rem !important;
  }
  /* Vendor CTA: hide phone number, keep "Call now" */
  .vendor-phone-number {
    display: none !important;
  }
  .vendor-cta-row {
    flex-direction: row !important;
  }
  .vendor-cta-call {
    padding: 12px 16px !important;
    font-size: 0.88rem !important;
  }
}

/* ── RESULTS PAGE ── */
@media (max-width: 700px) {
  /* Filter grid → single column */
  [style*="grid-template-columns:repeat(auto-fit,minmax(200px"],
  [style*="grid-template-columns: repeat(auto-fit,minmax(200px"],
  [style*="grid-template-columns:repeat(auto-fit, minmax(200px"] {
    grid-template-columns: 1fr !important;
  }

  /* Features grid → single column */
  [style*="grid-column:span 2"] {
    grid-column: span 1 !important;
  }

  /* Vendor card stats row — wrap and don't overflow */
  .vendor-card [style*="gap:28px"],
  [style*="display:flex"][style*="gap:28px"] {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  /* Price text — prevent overflow */
  [style*="font-size:1.5rem"][style*="font-display"],
  .price-flash,
  [class*="price-flash"] {
    font-size: 1.25rem !important;
    white-space: nowrap;
  }

  /* Stats dividers — hide on mobile */
  [style*="padding:0 20px"][style*="border-left"] {
    padding: 0 12px !important;
    border-left-width: 0 !important;
    border-right-width: 0 !important;
  }

  /* Vendor card action buttons — stack full width */
  .vendor-card [style*="display:flex"][style*="gap:8px"][style*="flex-shrink:0"] {
    width: 100% !important;
    flex-direction: row !important;
  }
  .vendor-card [style*="display:flex"][style*="gap:8px"][style*="flex-shrink:0"] > * {
    flex: 1 !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* Bulk bar — full width, smaller */
  .sticky-bar,
  [class*="sticky-bar"],
  .bulk-bar {
    max-width: 100% !important;
    padding: 10px 16px !important;
    flex-direction: column !important;
    gap: 10px !important;
    border-radius: 12px !important;
    margin: 0 8px !important;
    bottom: 16px !important;
  }
}

/* ── MODALS ON MOBILE ── */
@media (max-width: 700px) {
  .modal-overlay {
    align-items: flex-start !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 16px !important;
  }
  .modal {
    max-height: none !important;
    margin: 0 auto !important;
  }
}

/* ── FOR VENDORS PAGE (no broad selectors) ── */