/* ============================================================
   We Belong - shared mobile CRO layer
   Loaded AFTER each page's inline <style> so mobile rules win.
   Everything here is scoped to small screens or touch devices,
   so the desktop experience is left untouched.
   ============================================================ */

/* ---- 1. Stop iOS Safari auto-zooming on focus -------------------
   Any form control under 16px makes Mobile Safari zoom the page on
   focus, which jars the layout on login / signup / booking. Force a
   16px floor on phones. !important is deliberate: it has to beat the
   inline font-sizes used on a few inputs (e.g. the price input). */
@media (hover: none) and (pointer: coarse) {
  input, select, textarea, button {
    font-size: 16px !important;
  }
  /* Keep large display buttons looking intentional, not shrunk. */
  .btn-login, .book-btn, .mobile-book-btn, .btn-nav,
  .modal-primary-btn, .btn-book-option {
    font-size: 1rem !important;
  }
}

/* ---- 2. Thumb-friendly tap targets (>= 44px) ------------------- */
@media (hover: none) and (pointer: coarse) {
  .save-btn {
    width: 44px; height: 44px;
  }
  .hamburger {
    width: 44px; height: 44px;
  }
  .pill, .filter-select, .filter-date, .auth-tab, .clear-btn {
    min-height: 44px;
  }
  .nav-avatar {
    width: 44px; height: 44px;
  }
  /* Give inline text links a comfortable hit area without moving them. */
  .text-link, .back-link, .nav-dropdown a, .nav-dropdown button {
    min-height: 44px;
    display: flex; align-items: center;
  }
  .nav-dropdown a, .nav-dropdown button { display: flex; }
}

/* ---- 3. General touch ergonomics ------------------------------- */
@media (hover: none) and (pointer: coarse) {
  body { -webkit-text-size-adjust: 100%; }
  a, button { -webkit-tap-highlight-color: rgba(27,45,64,0.08); }
}

/* ---- 4. Swipeable photo galleries on touch --------------------
   Cards render their photos inside a .wb-track wrapper. On desktop
   the track is inert (display:block) so the page's existing absolute
   + opacity crossfade keeps working. On touch we turn the track into
   a horizontal scroll-snap carousel and reveal the dots permanently. */
.wb-track { /* inert on desktop, real carousel on touch (below) */ }

@media (hover: none) and (pointer: coarse) {
  .act-card-photo .wb-track {
    position: absolute; inset: 0;
    display: flex;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .act-card-photo .wb-track::-webkit-scrollbar { display: none; }
  /* Each photo becomes a full-width snap slide (overrides the
     absolute / opacity:0 stacking from the page styles). */
  .act-card-photo .wb-track img {
    position: relative; top: auto; left: auto;
    flex: 0 0 100%;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 1 !important;
    scroll-snap-align: start;
    transform: none !important;       /* no hover-zoom fighting the scroll */
  }
  /* Dots are hover-revealed on desktop; always show them on touch. */
  .act-card-dots { opacity: 1 !important; }
}

/* ---- 5. Honest scarcity pill on cards -------------------------- */
.act-card-scarcity {
  position: absolute; left: 12px; bottom: 12px; z-index: 3;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 100px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.01em;
  color: #fff; background: rgba(200,97,74,0.95);
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(27,45,64,0.22);
}
.act-card-scarcity.soft { background: rgba(27,45,64,0.82); }
.act-card-scarcity .dot {
  width: 6px; height: 6px; border-radius: 50%; background: #fff;
  animation: wb-pulse 2s ease-in-out infinite;
}
@keyframes wb-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ---- 6. Bottom-sheet utility (filters, booking modal) ---------- */
.wb-sheet-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(27,45,64,0.5);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.wb-sheet-backdrop.open { opacity: 1; pointer-events: auto; }

.wb-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 201;
  background: var(--white, #fff);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -8px 40px rgba(27,45,64,0.18);
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  max-height: 86vh; display: flex; flex-direction: column;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}
.wb-sheet.open { transform: translateY(0); }
.wb-sheet-grip {
  width: 40px; height: 4px; border-radius: 100px;
  background: var(--border, #EDE8DE);
  margin: 10px auto 4px;
}
.wb-sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 22px 12px; border-bottom: 1px solid var(--border, #EDE8DE);
}
.wb-sheet-title {
  font-family: 'DM Serif Display', serif;
  font-size: 1.25rem; color: var(--midnight, #1B2D40);
}
.wb-sheet-close {
  background: none; border: none; font-size: 1.6rem; line-height: 1;
  color: var(--stone, #8C9BAA); cursor: pointer;
  width: 44px; height: 44px;
}
.wb-sheet-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 18px 22px; }
.wb-sheet-foot {
  padding: 14px 22px; border-top: 1px solid var(--border, #EDE8DE);
  display: flex; gap: 12px;
}

/* Filters trigger button. Its display is controlled per-page (hidden on
   desktop, shown inside the page's small-screen media query) so this file's
   load order can't accidentally hide it. */
.filters-trigger {
  align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 100px;
  border: 1.5px solid var(--border, #EDE8DE); background: var(--white, #fff);
  font-family: 'DM Sans', sans-serif; font-size: 0.9rem; font-weight: 600;
  color: var(--midnight, #1B2D40); cursor: pointer; white-space: nowrap;
}
.filters-trigger .count {
  display: none;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 100px;
  background: var(--terra, #C8614A); color: #fff;
  font-size: 0.72rem; font-weight: 700;
  align-items: center; justify-content: center;
}
.filters-trigger .count.show { display: inline-flex; }

/* ---- 7. Auth card: tighten padding on small phones ------------
   Shared .login-card sits at 48px/40px which is cramped under ~360px.
   This class only exists on the login / reset pages, so the rule is
   inert elsewhere. */
@media (max-width: 480px) {
  .login-card { padding: 34px 22px; }
  body > .back-link { margin-top: 16px; }
}