/*
 * ============================================================
 *  MADANAPALLE PROPERTIES — Android Native App Style (Mobile)
 *  File: assets/css/mobile-android.css
 *  Enqueue AFTER style.css via functions.php
 * ============================================================
 */

:root {
  --bottom-nav-height: 64px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --ripple: rgba(220, 38, 38, 0.12);
}

/* ============================================================
   1. TOP APP BAR — hide hamburger, center logo
   ============================================================ */
@media (max-width: 959px) {

  /* Fixed app bar */
  #site-header {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    background: #fff;
    border-bottom: 1px solid #E5E7EB;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    z-index: 1000;
    overflow: hidden;
  }

  #site-header.scrolled {
    box-shadow: 0 3px 10px rgba(0,0,0,0.13);
  }

  /* Hide hamburger + drawer completely — bottom nav handles navigation */
  .mobile-menu-toggle,
  .mp-mobile-drawer {
    display: none !important;
  }

  /* Also hide desktop nav + cta */
  .site-nav,
  .header-cta {
    display: none !important;
  }

  /* Center the logo in the app bar */
  .header-inner {
    justify-content: center !important;
    gap: 0 !important;
  }

  .site-logo {
    justify-content: center;
  }

  /* Hide tagline — too cramped on mobile */
  .logo-tagline {
    display: none !important;
  }

  /* Slightly smaller emblem */
  .logo-emblem {
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
  }

  /* Push content below the fixed header */
  body.mp-theme {
    padding-top: 68px !important;
  }

}

/* ============================================================
   2. BOTTOM NAVIGATION BAR
   ============================================================ */
@media (max-width: 959px) {

  .mp-bottom-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: calc(var(--bottom-nav-height) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    background: #fff;
    border-top: 1px solid #E5E7EB;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.07);
    display: flex;
    align-items: stretch;
    z-index: 999;
    -webkit-tap-highlight-color: transparent;
  }

  .mp-bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 2px;
    text-decoration: none;
    color: #9CA3AF;
    font-size: 10px;
    font-weight: 500;
    border: none;
    background: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: color 150ms;
  }

  /* Tap ripple */
  .mp-bottom-nav-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--ripple);
    opacity: 0;
    transition: opacity 200ms;
    pointer-events: none;
  }
  .mp-bottom-nav-item:active::after { opacity: 1; }

  .mp-bottom-nav-item .bnav-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 26px;
    border-radius: 13px;
    transition: background 150ms;
  }

  .mp-bottom-nav-item .bnav-label {
    font-size: 10px;
    line-height: 1;
    white-space: nowrap;
  }

  /* Active state */
  .mp-bottom-nav-item.active {
    color: #B91C1C;
  }
  .mp-bottom-nav-item.active .bnav-icon-wrap {
    background: #FFF0F0;
  }

  /* WhatsApp item */
  .mp-bottom-nav-item.bnav-wa { color: #25D366; }
  .mp-bottom-nav-item.bnav-wa .bnav-icon-wrap { background: #E7F9EE; }

  /* Hide old floating WhatsApp button */
  .whatsapp-float { display: none !important; }

  /* Body padding so content not hidden under bottom nav */
  body {
    padding-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + 8px) !important;
  }

}

/* ============================================================
   3. MATERIAL CARDS
   ============================================================ */
@media (max-width: 959px) {

  .property-card {
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    border: none !important;
    transition: transform 150ms ease, box-shadow 150ms ease;
  }
  .property-card:active {
    transform: scale(0.99);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
  }

  /* Prevent zoom on input focus */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  select, textarea {
    font-size: 16px !important;
    border-radius: 8px !important;
    -webkit-appearance: none;
    appearance: none;
  }
  input:focus, select:focus, textarea:focus {
    border-color: #DC2626 !important;
    box-shadow: 0 0 0 3px rgba(220,38,38,0.12) !important;
    outline: none;
  }

  /* Staggered card entrance */
  @keyframes mpFadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .property-card:nth-child(1) { animation: mpFadeUp .3s ease both 0ms; }
  .property-card:nth-child(2) { animation: mpFadeUp .3s ease both 60ms; }
  .property-card:nth-child(3) { animation: mpFadeUp .3s ease both 120ms; }
  .property-card:nth-child(n+4) { animation: mpFadeUp .3s ease both 180ms; }

}

/* ============================================================
   4. PROPERTY GRID — single column on mobile
   ============================================================ */
@media (max-width: 959px) {

  /* Force single column — 2-col at 520px is too cramped */
  .property-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Card — full width, better proportions */
  .property-card {
    border-radius: 14px !important;
  }

  /* Taller visual header on single column — more app-like */
  .property-card-visual {
    height: 120px !important;
  }

  /* Card body padding — slightly more breathing room */
  .property-card-body {
    padding: 16px !important;
  }

  /* Title — allow wrapping, bigger font */
  .property-card-area {
    white-space: normal !important;
    font-size: 1.05rem !important;
    margin-bottom: 10px !important;
  }

  /* Buttons row — full width, no truncation */
  .prop-actions,
  .prop-actions-3 {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .prop-actions .btn,
  .prop-actions-3 .btn {
    font-size: 13px !important;
    padding: 10px 8px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Details button full width */
  .prop-actions .btn-details,
  .prop-actions-3 .btn-details,
  a[href*="/property/"].btn {
    grid-column: 1 / -1;
  }

  /* Price section */
  .prop-price-row {
    font-size: 13px !important;
  }

  /* Details row labels */
  .prop-detail-label {
    font-size: 9px !important;
    letter-spacing: 0.06em;
  }

  .prop-detail-value {
    font-size: 13px !important;
  }

}