/* ============================================================
   RAPORDIE.COM — MOBILE UX IMPROVEMENTS
   All improvements for users on phones/tablets
   ============================================================ */

/* ============================================================
   1. BOTTOM NAVIGATION BAR (Mobile only)
   ============================================================ */
#mobile-bottom-nav {
  display: none; /* hidden on desktop */
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  background: var(--black);
  border-top: 2px solid var(--mid-gray);
  z-index: 2000;
  /* Sit above radio bar — we'll shift radio bar up in JS */
}

.mobile-nav-inner {
  display: flex;
  align-items: stretch;
  height: 100%;
}

.mobile-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
  color: var(--gray);
  font-family: var(--font-headline);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.18s ease, background 0.18s ease;
  position: relative;
  /* 60px height = well above 44px minimum touch target */
}

.mobile-nav-item i {
  font-size: 1.15rem;
  transition: color 0.18s ease, transform 0.18s ease;
}

.mobile-nav-item:active {
  background: var(--accent-dim);
}

.mobile-nav-item.active,
.mobile-nav-item:hover {
  color: var(--accent);
}

.mobile-nav-item.active i {
  transform: translateY(-2px);
}

/* Active indicator dot */
.mobile-nav-item.active::after {
  content: '';
  position: absolute;
  bottom: 6px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
}

/* Special highlight for "Get On Map" CTA */
.mobile-nav-item.mobile-nav-cta {
  color: #cc2200;
}
.mobile-nav-item.mobile-nav-cta.active,
.mobile-nav-item.mobile-nav-cta:hover {
  color: #ff3300;
}
.mobile-nav-item.mobile-nav-cta i {
  color: #cc2200;
}

/* ============================================================
   2. HERO HEIGHT — reduce on mobile so category tabs are visible
   ============================================================ */
@media (max-width: 860px) {
  /* Hero stacks: left video 40vh, right tabs full height */
  .hero-left {
    min-height: 40vh !important;
    max-height: 50vh;
  }

  /* Label smaller on mobile */
  .hero-label {
    padding: 10px 14px;
    margin-top: 12px;
  }
  .hero-label .label-brand { font-size: 1.1rem; }
  .hero-label .label-sub { font-size: 0.6rem; }
  .hero-label .label-icon { width: 36px; height: 36px; font-size: 1.1rem; }
}

/* ============================================================
   3. TOUCH TARGETS — minimum 48px for all interactive elements
   ============================================================ */
@media (max-width: 768px) {

  /* Nav hamburger — bigger tap area */
  .nav-hamburger {
    padding: 12px;
    min-width: 48px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Nav links in hamburger menu — full height rows */
  .nav-links a {
    padding: 14px 20px;
    font-size: 1.05rem;
    display: block;
    border-bottom: 1px solid var(--mid-gray);
    min-height: 48px;
    display: flex;
    align-items: center;
  }
  .nav-links a:last-child {
    border-bottom: none;
  }

  /* Category tabs — full comfortable touch rows */
  .category-tab {
    min-height: 64px !important;
    padding: 0 16px;
    gap: 12px;
  }

  /* Store category tabs */
  .store-cat-tab {
    min-height: 64px;
    padding: 0 16px;
  }

  /* Buttons across the site */
  .panel-cta,
  .map-action-btn,
  .btn,
  .plan-btn,
  button[type="submit"],
  input[type="submit"] {
    min-height: 48px;
    padding: 14px 20px;
    font-size: 0.9rem;
  }

  /* Form inputs — easy to tap */
  .form-input,
  .form-select,
  .form-textarea,
  select,
  input[type="text"],
  input[type="email"],
  input[type="url"],
  input[type="tel"] {
    min-height: 48px;
    font-size: 1rem; /* prevent iOS zoom-in on focus */
    padding: 12px 14px;
  }

  .form-textarea { min-height: 100px; }

  /* Filter pills on map — bigger */
  .pill {
    padding: 10px 18px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;
  }

  /* Social buttons in footer */
  .social-btn {
    width: 44px;
    height: 44px;
  }
}

/* ============================================================
   4. LAZY VIDEO — styles for the mobile video placeholder
   ============================================================ */
#hero-video-placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #0a0a0a 0%, #141414 50%, #0a0a0a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  overflow: hidden;
}

#hero-video-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(160,160,160,0.06) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(100,100,100,0.04) 0%, transparent 60%);
}

#hero-video-placeholder .placeholder-thumb {
  position: absolute;
  inset: 0;
  background-image: url('https://img.youtube.com/vi/e7s-aQxgFIk/hqdefault.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.55;
  filter: brightness(0.7) saturate(0.4);
}

.placeholder-play-btn {
  position: relative;
  z-index: 2;
  width: 72px; height: 72px;
  border-radius: 50%;
  border: 3px solid var(--accent);
  background: rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
}
.placeholder-play-btn:hover,
.placeholder-play-btn:active {
  background: var(--accent);
  transform: scale(1.08);
}
.placeholder-play-btn svg {
  fill: var(--white);
  margin-left: 5px;
}

.placeholder-label {
  position: absolute;
  bottom: 16px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-headline);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--light-gray);
  white-space: nowrap;
  z-index: 2;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}

/* ============================================================
   5. FONT SIZES — more readable on mobile
   ============================================================ */
@media (max-width: 600px) {
  /* Body text up from 0.85rem → 0.95rem */
  body { font-size: 0.95rem; }

  /* Cat descriptions */
  .cat-desc { font-size: 0.75rem !important; }

  /* Panel body text */
  .cat-panel-desc { font-size: 0.95rem !important; line-height: 1.7; }

  /* Stat numbers */
  .stat-num { font-size: 1.6rem; }
  .stat-item { padding: 12px 18px; min-width: 90px; }

  /* Featured card text */
  .featured-card-name { font-size: 0.95rem; }
  .featured-card-city { font-size: 0.78rem; }

  /* Promo banner */
  #promo-banner { font-size: 0.72rem; padding: 8px 14px; }

  /* Hero label */
  .hero-label .label-brand { font-size: 1rem; }

  /* Section titles */
  .section-title { font-size: clamp(1.4rem, 6vw, 2rem) !important; }

  /* Membership plan cards */
  .plan-name { font-size: clamp(1.4rem, 6vw, 2rem); }
  .plan-price-amt { font-size: clamp(2rem, 10vw, 3.5rem) !important; }

  /* Store tab names */
  .store-tab-name { font-size: 0.7rem; }

  /* About section — stack the 2-col grid */
  #about-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}

/* ============================================================
   6. SWIPEABLE CATEGORY TABS (horizontal scroll on mobile)
   ============================================================ */
@media (max-width: 600px) {
  /* Hero right: flip from column to horizontal scroll strip */
  .hero-right {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    border-top: 2px solid var(--mid-gray);
    /* Remove old 2-column grid from base breakpoint */
    grid-template-columns: unset !important;
    max-height: 100px;
    min-height: 88px;
  }

  /* Scrollbar hidden but still functional */
  .hero-right::-webkit-scrollbar { display: none; }
  .hero-right { scrollbar-width: none; }

  .category-tab {
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 10px !important;
    min-width: 80px;
    flex-shrink: 0;
    border-bottom: none !important;
    border-right: 1px solid var(--mid-gray);
    border-left: none !important;
    border-bottom: 3px solid transparent !important;
    scroll-snap-align: start;
    min-height: 88px !important;
    text-align: center;
  }

  .category-tab.active {
    border-bottom-color: var(--accent) !important;
    border-left: none !important;
  }

  .category-tab[data-cat="dance"].active {
    border-bottom-color: var(--blue) !important;
  }

  .cat-icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 1rem !important;
    flex-shrink: 0;
  }

  .cat-name { font-size: 0.65rem !important; letter-spacing: 0.04em; }
  .cat-desc  { display: none !important; }  /* hide desc — no room */
  .cat-arrow { display: none !important; }

  /* Swipe hint scroll indicator */
  .hero-right::after {
    content: '';
    min-width: 16px;
    flex-shrink: 0;
  }

  /* Store tabs: same horizontal scroll treatment */
  .store-hero-right {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    max-height: 88px;
    min-height: 80px;
    border-top: 2px solid var(--mid-gray) !important;
    border-left: none !important;
  }
  .store-hero-right::-webkit-scrollbar { display: none; }
  .store-hero-right { scrollbar-width: none; }

  .store-cat-tab {
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 8px 14px !important;
    min-width: 72px;
    flex-shrink: 0;
    scroll-snap-align: start;
    min-height: 80px !important;
    border-right: 1px solid var(--mid-gray);
    border-bottom: 3px solid transparent !important;
  }
  .store-cat-tab.active {
    border-bottom-color: var(--accent) !important;
  }
  .store-tab-icon { width: 32px !important; height: 32px !important; font-size: 0.9rem !important; }
  .store-tab-name { font-size: 0.6rem !important; }
}

/* ============================================================
   BOTTOM NAV ACTIVE PAGE DETECTION
   ============================================================ */
@media (max-width: 768px) {
  /* Show bottom nav on mobile */
  #mobile-bottom-nav { display: block; }

  /* Push page content up so nothing hides behind bottom nav */
  body {
    padding-bottom: calc(var(--radio-height) + 60px);
  }

  /* Cart float button on store page: move above bottom nav + radio */
  #cart-float {
    bottom: calc(var(--radio-height) + 60px + 16px) !important;
  }

  /* Push radio bar up by 60px so it sits above bottom nav */
  #radio-bar {
    bottom: 60px !important;
  }

  /* Map layout tweak — more breathing room */
  #map-body {
    height: calc(100vh - var(--nav-height) - 60px - var(--radio-height));
  }

  /* Hide top nav text links on mobile (hamburger handles it) */
  /* Keep hamburger visible — already handled in base CSS */

  /* About section 2-col grid → single col */
  section > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 32px 20px !important;
  }

  /* Membership plan cards: stack on narrow screens */
  .plans-grid {
    grid-template-columns: 1fr !important;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Filter bar wraps gracefully */
  #product-filter-bar {
    padding: 12px 16px !important;
    gap: 10px;
  }

  /* Map sidebar easier to scan */
  #map-sidebar {
    max-height: 280px;
  }

  /* Slider nav buttons bigger */
  #slider-prev, #slider-next {
    width: 44px;
    height: 44px;
    font-size: 1.2rem;
  }
}

/* Extra-small screens (iPhone SE, etc.) */
@media (max-width: 390px) {
  .category-tab {
    min-width: 72px !important;
    padding: 6px 8px !important;
  }
  .cat-icon {
    width: 30px !important;
    height: 30px !important;
  }
  .cat-name { font-size: 0.58rem !important; }
}

/* ============================================================
   SMOOTH SCROLL INDICATOR — subtle swipe hint on cat tabs
   ============================================================ */
@keyframes swipeHint {
  0%   { transform: translateX(0); opacity: 0.6; }
  50%  { transform: translateX(8px); opacity: 1; }
  100% { transform: translateX(0); opacity: 0.6; }
}

.swipe-hint-icon {
  display: none;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  font-size: 1rem;
  animation: swipeHint 1.4s ease-in-out 1.2s 3;
  pointer-events: none;
  z-index: 5;
}

@media (max-width: 600px) {
  .hero-right { position: relative; }
  .swipe-hint-icon { display: block; }
}