/* ================================================================
   KYMA LIVING — mobile.css
   All mobile/responsive rules live here.
   Desktop CSS (styles.css) is never touched.
   Breakpoints: 768px (tablet), 480px (phone)
================================================================ */

/* ── Hamburger toggle (hidden on desktop) ─────────────────── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 6px;
  border-radius: 6px;
  transition: background .2s;
  -webkit-tap-highlight-color: transparent;
}
.nav-hamburger:hover { background: rgba(0,0,0,.05); }
.nav-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: #333;
  border-radius: 2px;
  transition: transform .25s, opacity .25s;
}
/* X state */
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav drawer */
.nav-mobile-menu {
  display: none;
  position: fixed;
  top: 68px;
  left: 0; right: 0;
  background: white;
  border-bottom: 1px solid #E0DAD0;
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
  padding: 1.25rem 1.5rem 1.5rem;
  z-index: 199;
  flex-direction: column;
  gap: 0;
}
.nav-mobile-menu.open { display: flex; }
.nav-mobile-menu a,
.nav-mobile-menu button.nav-mobile-btn {
  display: block;
  padding: 13px 0;
  font-size: 15px;
  font-weight: 500;
  color: #333;
  text-decoration: none;
  border-bottom: 1px solid #f0ece6;
  cursor: pointer;
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  text-align: left;
  font-family: 'Inter', sans-serif;
  width: 100%;
  transition: color .2s;
}
.nav-mobile-menu a:hover,
.nav-mobile-menu button.nav-mobile-btn:hover { color: #1D3461; }
.nav-mobile-menu .nav-mobile-cta {
  display: block;
  margin-top: 1rem;
  background: #1D3461;
  color: white;
  border: none;
  border-radius: 10px;
  padding: 14px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  text-align: center;
  width: 100%;
}

/* ── Tablet (≤ 768px) ─────────────────────────────────────── */
@media (max-width: 768px) {

  /* Navigation */
  nav {
    height: 68px;
    padding: 0 1.25rem;
  }
  .nav-logo img { height: 52px; }
  .nav-links    { display: none; }           /* hidden — mobile menu takes over */
  .nav-hamburger { display: flex; }
  .nav-right > .btn-cta { display: none; }  /* in mobile menu instead */

  /* Hero */
  .hero { height: auto; min-height: 88vh; padding: 0; }
  .hero-content { padding: 2rem 1.5rem; }
  .hero-tagline { font-size: 1.2rem; }
  .hero-tagline-gr { display: none; }
  .hero-actions { gap: 10px; }
  .btn-hp, .btn-hg { padding: 13px 24px; font-size: 15px; width: 100%; }
  .hero-stats {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    gap: 0;
    max-width: 100%;
    scrollbar-width: none;
  }
  .hero-stats::-webkit-scrollbar { display: none; }
  .stat { padding: .85rem 1.5rem; flex-shrink: 0; }
  .stat-num  { font-size: 1.4rem; }
  .stat-label { font-size: 10px; }

  /* Search bar */
  .search-bar { padding: .85rem 1rem; gap: 8px; }
  .search-bar select, .search-bar input { min-width: 0; font-size: 14px; }
  .search-go { padding: 10px 20px; }

  /* Promo bar */
  .promo-bar { padding: .5rem 1rem; }
  .promo-slots { gap: .5rem; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .slot-pill { flex-shrink: 0; }

  /* Section padding */
  section { padding: 3.5rem 1.25rem; }
  .container { padding: 0 1.25rem; }

  /* How it works */
  .hiw-grid { gap: 1.25rem; }
  .hiw-card { width: 100%; max-width: 100%; min-width: 0; }

  /* Properties grid: 2 columns */
  .props-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .props-header { flex-direction: column; align-items: flex-start; gap: .5rem; }

  /* Seller CTA section */
  .seller-cta { padding: 3.5rem 1.25rem; }
  .cta-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .cta-grid h2 { font-size: 2rem; }

  /* Region cards: 2 columns */
  .regions-grid { grid-template-columns: repeat(2, 1fr); gap: .85rem; }
  .region-card  { height: 160px; }
  .region-name  { font-size: 15px; }

  /* Footer */
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  .footer-bottom { flex-direction: column; text-align: center; gap: .5rem; }

  /* Modals */
  .modal-box {
    max-height: 92vh;
    border-radius: 16px;
    margin: 0 .75rem;
  }
  .modal-body   { padding: 1.25rem 1.5rem 1.75rem; }
  .modal-header { padding: 1.4rem 1.5rem .85rem; }

  /* Seller dashboard */
  #dashboardPage .container,
  #dashboardPage > div { padding: 1.5rem 1rem; }
  #dash_stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Admin dashboard */
  .adm-content { padding: 12px; }
  .adm-krow    { grid-template-columns: repeat(2, 1fr); }
  .adm-grid2, .adm-grid3, .adm-grid31 { grid-template-columns: 1fr; }
  .adm-topbar  { padding: 0 12px; gap: 6px; overflow-x: auto; }
  .adm-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.adm-table { min-width: 680px; }

  /* Page overlays */
  #dashboardPage,
  #propertyDetailPage { overflow-y: auto; }
}

/* ── Phone (≤ 480px) ──────────────────────────────────────── */
@media (max-width: 480px) {

  /* Nav */
  nav { height: 60px; padding: 0 1rem; }
  .nav-logo img { height: 44px; }
  .nav-mobile-menu { top: 60px; }

  /* Hero */
  .hero { min-height: 85vh; }
  .hero-content { padding: 1.75rem 1rem; }
  .hero-badge  { font-size: 10px; padding: 6px 14px; }
  .hero-stats  { margin: 0 -1rem; border-radius: 0; }

  /* Section */
  section { padding: 2.75rem 1rem; }
  .container { padding: 0 1rem; }
  .stitle { font-size: 1.65rem; }
  .ssub   { font-size: 14px; }

  /* Properties: 1 column on small phones */
  .props-grid { grid-template-columns: 1fr; }
  .prop-img   { height: 200px; }

  /* Region cards: 1 column */
  .regions-grid { grid-template-columns: 1fr; }
  .region-card  { height: 140px; }

  /* Footer: single column */
  .footer-top { grid-template-columns: 1fr; gap: 1.75rem; }
  .footer-desc { max-width: 100%; }
  footer { padding: 3rem 1rem 1.5rem; }

  /* Forms — stack all 2-col rows */
  .form-row { grid-template-columns: 1fr !important; }
  .form-group input,
  .form-group select,
  .form-group textarea {
    font-size: 16px !important; /* prevents iOS zoom on focus */
    padding: 13px 14px;
  }

  /* Modals — near full screen */
  .modal-box {
    margin: 0 .5rem;
    max-height: 94vh;
    border-radius: 14px 14px 10px 10px;
  }
  .modal-header h2 { font-size: 1.2rem; }

  /* Seller dashboard header */
  #dashboardPage [style*="justify-content:space-between"] {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  #dash_stats {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Admin KPI cards */
  .adm-krow { grid-template-columns: repeat(2, 1fr); }
  .adm-kval { font-size: 18px; }
  .adm-topbar .adm-pill { display: none; }  /* hide status pill to save space */

  /* Listing card buttons */
  .prop-wa { width: 100%; justify-content: center; }

  /* Promo banner */
  .promo-banner { font-size: 12px; padding: .6rem 1rem; }

  /* Countdown (listing flow) */
  .countdown { gap: 5px; }
  .cd-box { min-width: 40px; padding: 5px 8px; }
  .cd-num { font-size: 1.1rem; }

  /* Payment boxes */
  .pay-methods { gap: 6px; }
  .pay-method  { padding: 8px 12px; font-size: 12px; }
}

/* ── Touch-friendly tap targets ───────────────────────────── */
@media (max-width: 768px) {
  button, a, [onclick], select, input[type="checkbox"], input[type="radio"] {
    min-height: 44px;
  }
  .prop-fav { width: 40px; height: 40px; font-size: 18px; }
  .slot-pill { padding: 8px 16px 8px 12px; font-size: 13px; }
}

/* ── Utility: hide on mobile ──────────────────────────────── */
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
}

/* ── Additional inline-grid overrides ────────────────────────── */
/* These grids use inline styles — override with !important */

@media (max-width: 768px) {
  /* All-listings page grids: 3 col → 2 col */
  #al_featured_grid,
  #al_all_grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Property detail: 2-col layout → stacked */
  #pd_layout_grid {
    grid-template-columns: 1fr !important;
  }

  /* Generic catch-all: multi-col inline grids in modals → 1 col */
  .form-row-3col {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  /* All-listings: 1 col on phone */
  #al_featured_grid,
  #al_all_grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Promo slot pills — scroll on tiny screens */
  .promo-slots {
    justify-content: flex-start !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Hero badge — smaller on very small screens */
  .hero-badge {
    font-size: 9px;
    padding: 5px 12px;
  }

  /* Seller dashboard page spacing */
  #dashboardPage > div[style] {
    padding: 1.25rem .85rem !important;
  }
}

/* ── Partner section (Fix 4) ─────────────────────────────────── */
@media (max-width: 768px) {
  .partners-section,
  #partnersSection,
  .partner-logos,
  [class*="partner"] {
    display: block !important;
    visibility: visible !important;
  }
  .partner-logos {
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
  }
  .partner-logo {
    max-width: 100px;
  }
}

/* ── Edit modal select dropdowns on mobile ─────────────────────── */
.edit-modal select,
#editModal select,
select.edit-select {
  -webkit-appearance: none;
  appearance: none;
  border: 1.5px solid #d0d0d0 !important;
  border-radius: 8px !important;
  padding: 10px 32px 10px 12px !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  font-size: 14px !important;
  color: #333 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ── Modal on mobile — full-screen scrollable ───────────────────── */
@media (max-width: 600px) {
  .modal-backdrop {
    align-items: flex-start !important;
    padding: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .modal-box {
    max-width: 100% !important;
    width: 100% !important;
    min-height: 100dvh;
    max-height: none !important;
    border-radius: 0 !important;
    overflow-y: visible !important;
    margin: 0 !important;
  }
  .modal-body {
    padding: 1.25rem 1.25rem 5rem !important;
  }
  .modal-header {
    padding: 1.25rem 1.25rem 1rem !important;
    position: sticky;
    top: 0;
    background: white;
    z-index: 10;
    border-bottom: 1px solid #eee;
  }
}

/* ── Edit modal on mobile ───────────────────────────────────────── */
@media (max-width: 600px) {
  #editListingModal {
    padding: 0 !important;
    align-items: flex-start;
  }
  #editListingModal > div {
    border-radius: 0 !important;
    min-height: 100dvh;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-shadow: none !important;
  }
  #editListingModal .edit-form-body {
    padding-bottom: 6rem !important;
    background: white;
  }
}