/* ==========================================
   MOBILE REGION PAGE - BOTTOM SHEET
   ========================================== */

/* Map pin markers (desktop map view + mobile sheet map) */
.custom-marker {
  background: none !important;
  border: none !important;
}

.pp-map-pin {
  display: flex;
  align-items: center;
  background: white;
  border-radius: 20px;
  padding: 6px 12px 6px 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

.pp-map-pin-icon {
  width: 24px;
  height: 24px;
  margin-right: 6px;
  background: url("/static/img/pourplan_icon.6e3f6ad7a496.png") center / contain no-repeat;
  flex-shrink: 0;
}

.pp-map-pin-rating {
  font-size: 14px;
  font-weight: 700;
  color: #1E1E1E;
  font-family: 'Inter', sans-serif;
  line-height: 1;
}

/* Map loading overlay (desktop map view + mobile sheet map) */
.pp-desktop-map-wrap {
  position: relative;
  height: 600px;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pp-desktop-map-wrap #winery-map-container {
  height: 100%;
  width: 100%;
}

.pp-map-loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #EAE7DF;
  transition: opacity 0.3s ease;
}

.pp-map-loading.is-done {
  opacity: 0;
  pointer-events: none;
}

.pp-map-loading-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #5F5F64;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
}

.pp-map-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(123, 30, 58, 0.18);
  border-top-color: #7B1E3A;
  border-radius: 50%;
  animation: pp-map-spin 0.7s linear infinite;
}

@keyframes pp-map-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .pp-map-spinner {
    animation: none;
  }
  .pp-map-loading {
    transition: none;
  }
}

/* Only apply to mobile devices */
@media (max-width: 767px) {

  /* CSS Variables for configuration */
  :root {
    /* Fallback only. region_mobile.js measures the real header and overwrites
       this, because base.html's header is 88px here, not 72 -- and a stage 16px
       too tall is enough to start the scroll trap described below. */
    --pp-navbar-height: 72px;
    --pp-title-block-height: 80px;
    --pp-stage-height: calc(100vh - var(--pp-navbar-height) - var(--pp-title-block-height));

    /* Colors (using existing PourPlan palette) */
    --pp-primary: #7B1E3A;
    --pp-primary-deep: #691831;
    --pp-ink: #1C1C1E;
    --pp-ink-secondary: #2B2B2E;
    --pp-muted: #5F5F64;
    --pp-muted-2: #8C8C92;
    --pp-line: #E8E4E2;
    --pp-line-2: #F0EDEA;

    /* Map colors (placeholder) */
    --map-land: #EAE7DF;
    --map-water: #C3D4D2;
    --map-park: #D9E4CC;
    --map-road: #D5CFC5;
    --map-road-2: #E0DBD1;

    /* Wine bar colors */
    --wine-red: #7B1E3A;
    --wine-white: #E7D9B6;
    --wine-rose: #EBB7C6;

    /* Sheet snap positions (as fraction of stage height) */
    --peek-position: 0.50; /* 50% down from top = 50% of stage visible as map */
    --full-position: 12px;  /* Almost to top, small sliver of map */
    --map-position-offset: 92px; /* grab + header height */

    /* Shadows */
    --shadow-sheet: 0 -8px 28px rgba(28, 16, 20, 0.16);
    --shadow-card: 0 1px 2px rgba(28, 16, 20, 0.06), 0 4px 14px rgba(28, 16, 20, 0.06);
    --shadow-pill: 0 1px 2px rgba(28, 16, 20, 0.10), 0 6px 16px rgba(28, 16, 20, 0.10);
  }

  /* The stage is an app-like view -- map behind, sheet over it -- and it has to
     fit the screen exactly. If the page is even slightly taller than the
     viewport it can scroll, and .pp-sheet-body's `overscroll-behavior: contain`
     then makes that a one-way trip: once the header and title have gone off the
     top, no swipe on the card list will chain back out to the document to bring
     them down again, so the only way back is a refresh.
     100dvh, not 100vh: on a phone 100vh is the *large* viewport, measured with
     the URL bar collapsed, so a 100vh stage overflows by exactly the height of
     the bar for as long as the bar is showing. */
  @supports (height: 100dvh) {
    :root {
      --pp-stage-height: calc(100dvh - var(--pp-navbar-height) - var(--pp-title-block-height));
    }
  }

  /* base.html gives <main> min-height:100vh. Below the stage that is dead space
     the document can scroll into, which is the other half of the trap. The class
     is set by region_mobile.js, so only the stage layout is affected. */
  main.pp-stage-host {
    min-height: 0;
  }

  /* Title Block - minimal, above the stage */
  .pp-title-block {
    height: var(--pp-title-block-height);
    padding: 12px 16px;
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .pp-title-block .pp-crumbs {
    font-size: 13px;
    color: var(--pp-muted);
    margin-bottom: 4px;
  }

  .pp-title-block .pp-crumbs a {
    color: var(--pp-muted);
    text-decoration: none;
  }

  .pp-title-block .pp-crumbs .sep {
    margin: 0 6px;
  }

  .pp-title-block h1 {
    font-size: 21px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.015em;
    margin: 0;
    color: var(--pp-ink);
    font-family: 'Inter', sans-serif;
  }

  /* Rating Legend */
  .pp-legend {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--pp-muted);
    flex-shrink: 0;
    margin-left: 12px;
  }

  .pp-legend-label {
    white-space: nowrap;
    font-weight: 500;
  }

  /* Stage - fixed height container for map + sheet */
  .pp-stage {
    position: relative;
    height: var(--pp-stage-height);
    overflow: hidden;
    background: var(--map-land);
  }

  /* Map Backdrop - fills the entire stage */
  .pp-map {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }

  /* Peek sheet covers the bottom half; sit the spinner in the visible band */
  .pp-map .pp-map-loading {
    align-items: flex-start;
    padding-top: 20%;
  }

  .pp-map svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .pp-map-grad {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(to top, rgba(0,0,0,0.08), transparent);
    pointer-events: none;
  }

  /* Hide Leaflet attribution control on mobile map */
  #mobile-sheet-map-container .leaflet-control-attribution {
    display: none;
  }

  /* Hide Leaflet zoom control (we have custom) */
  #mobile-sheet-map-container .leaflet-control-zoom {
    display: none;
  }

  /* Ensure marker labels work in mobile map */
  #mobile-sheet-map-container .marker-label {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 4px;
    background: rgba(255, 255, 255, 0.95);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    display: none; /* Hidden by default, shown at zoom 14+ */
  }

  /* Bottom Sheet - draggable overlay */
  .pp-sheet {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    z-index: 10;
    background: white;
    border-radius: 20px 20px 0 0;
    box-shadow: var(--shadow-sheet);
    display: flex;
    flex-direction: column;
    /* Start at peek position (50%) to avoid flash of full content */
    transform: translateY(50%);
    will-change: transform;
  }

  .pp-sheet.animate {
    transition: transform 0.34s cubic-bezier(0.32, 0.72, 0, 1);
  }

  /* Grab Handle */
  .pp-grab {
    padding: 12px 0;
    cursor: grab;
    touch-action: none;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .pp-grab:active {
    cursor: grabbing;
  }

  .pp-grab .bar {
    width: 38px;
    height: 5px;
    background: #D8D2CE;
    border-radius: 999px;
  }

  /* Sheet Header - count + sort */
  /* The site footer is moved in here by region_mobile.js. Negate the sheet's
     side padding so it reads as a footer rather than a dark card floating in
     the list; the bottom padding stays as clearance for the floating controls. */
  .pp-sheet-body > footer {
    margin: 24px -16px 0;
  }

  .pp-sheet-head {
    flex-shrink: 0;
    padding: 0 16px 12px;
    cursor: grab;
    touch-action: none;
  }

  .pp-sheet-head:active {
    cursor: grabbing;
  }

  .pp-sheet-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .pp-sheet-count {
    font-size: 14.5px;
    color: var(--pp-ink);
  }

  .pp-sheet-count strong,
  .pp-sheet-count b {
    font-weight: 700;
  }

  .pp-sheet-count span {
    color: var(--pp-muted);
    font-weight: 400;
  }

  /* Sort dropdown — sits in the draggable header, so it must receive its own taps */
  .pp-sort {
    background-color: white;
    border: 1px solid var(--pp-line);
    border-radius: 999px;
    padding: 6px 28px 6px 12px;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    line-height: 1.2;
    color: var(--pp-ink);
    appearance: none;
    -webkit-appearance: none;
    touch-action: manipulation;
    pointer-events: auto;
    position: relative;
    z-index: 2;
    cursor: pointer;
    max-width: 52%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231C1C1E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px;
  }

  /* Sheet Body - scrollable content */
  .pp-sheet-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px 120px; /* bottom padding for floating controls */
  }

  .pp-sheet-body::-webkit-scrollbar {
    display: none;
  }

  /* Floating Map Controls */
  .pp-mapctl {
    position: absolute;
    top: 16px;
    left: 16px;
    right: 16px;
    z-index: 5;
    display: flex;
    gap: 8px;
    pointer-events: none;
  }

  .pp-mapctl > * {
    pointer-events: auto;
  }

  .pp-pill {
    background: white;
    border: 1px solid var(--pp-line);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--pp-ink);
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: var(--shadow-pill);
  }

  .pp-pill.solid {
    border: none;
    color: white;
  }

  /* Zoom Controls - Hidden on mobile (pinch to zoom is intuitive) */
  .pp-mapzoom {
    display: none;
  }

  /* Show Map Button (floating) */
  .pp-tomap {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 15;
    background: var(--pp-ink);
    color: white;
    border: none;
    border-radius: 999px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: var(--shadow-pill);
    transition: opacity 0.2s;
  }

  /* Hide desktop-only elements on mobile */
  .pp-stage ~ .container,
  .pp-stage ~ .row {
    display: none;
  }

  /* Adjust winery card grid for sheet body */
  .pp-sheet-body .row {
    margin: 0 -8px;
  }

  .pp-sheet-body .col {
    padding: 0 8px;
    margin-bottom: 16px;
  }

  /* Region Content (moved to bottom of list) */
  .pp-region {
    margin-top: 32px;
    padding-top: 24px;
  }

  .pp-region-hr {
    height: 1px;
    background: var(--pp-line);
    margin: 0 0 24px 0;
  }

  .pp-sec-eyebrow {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--pp-muted);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .pp-sec-title {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--pp-ink);
    margin-bottom: 12px;
    font-family: 'Inter', sans-serif;
  }

  .pp-desc {
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--pp-ink-secondary);
    margin-bottom: 16px;
  }

  .pp-readmore {
    color: var(--pp-primary);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
  }

  /* Toast Notification */
  .pp-toast {
    position: fixed;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--pp-ink);
    color: white;
    padding: 12px 20px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    z-index: 100;
    transition: bottom 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .pp-toast.show {
    bottom: 24px;
  }

  .pp-toast .ck {
    width: 20px;
    height: 20px;
    background: white;
    color: var(--pp-ink);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ==========================================
     MODALS (Filters & Best Of)
     ========================================== */

  /* Scrim Overlay */
  .pp-scrim {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.26s ease;
  }

  .pp-scrim.show {
    opacity: 1;
    pointer-events: auto;
  }

  /* Modal Container */
  .pp-modal {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 88%;
    background: white;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 28px rgba(28, 16, 20, 0.24);
    z-index: 60;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .pp-modal.show {
    transform: translateY(0);
  }

  /* Modal Header */
  .pp-modal-head {
    flex-shrink: 0;
    padding: 20px;
    border-bottom: 1px solid var(--pp-line);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .pp-modal-head h3 {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.015em;
    margin: 0;
    color: var(--pp-ink);
    font-family: 'Inter', sans-serif;
  }

  .pp-modal-x {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--pp-line-2);
    border-radius: 50%;
    font-size: 18px;
    color: var(--pp-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  /* Modal Body */
  .pp-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    -webkit-overflow-scrolling: touch;
  }

  /* Filter Groups */
  .pp-fgroup {
    margin-bottom: 24px;
  }

  .pp-fgroup:last-child {
    margin-bottom: 0;
  }

  .pp-fgroup h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--pp-ink);
    margin: 0 0 12px 0;
  }

  .pp-fchips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .pp-fchip {
    background: white;
    border: 1.5px solid var(--pp-line);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--pp-ink);
    cursor: pointer;
    transition: all 0.2s;
  }

  .pp-fchip.on {
    background: var(--pp-primary);
    border-color: var(--pp-primary);
    color: white;
  }

  /* The chip sets its own min-height rather than relying on padding, so a
     one-line and a wrapped chip stay the same size and every chip clears the
     44px touch target. */
  .pp-fchip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    text-align: left;
  }

  .pp-fchips--tight,
  .pp-fchips--more {
    margin-top: 8px;
  }

  /* How many wineries here match this chip, from mobile_filter_context(). */
  .pp-fcount {
    font-size: 12px;
    opacity: 0.55;
  }

  .pp-fchip.on .pp-fcount {
    opacity: 0.85;
  }

  .pp-fmore {
    margin-top: 10px;
    padding: 6px 0;
    background: none;
    border: none;
    color: var(--pp-primary);
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
  }

  /* Visit window: date and both times on one line, which fits to 360px. Below
     that the date takes its own row rather than crushing the dropdowns. */
  .pp-fvisit {
    display: grid;
    grid-template-columns: 1.25fr 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
  }

  @media (max-width: 359px) {
    .pp-fvisit {
      grid-template-columns: 1fr 1fr;
    }
    .pp-fvisit > :first-child {
      grid-column: 1 / -1;
    }
  }

  .pp-fvisit-field {
    min-width: 0;
  }

  .pp-fvisit input,
  .pp-fvisit select {
    width: 100%;
    min-height: 44px;
    padding: 8px 10px;
    border: 1.5px solid var(--pp-line);
    border-radius: 10px;
    background: white;
    font-size: 14px;
    color: var(--pp-ink);
  }

  .pp-fvisit input:disabled,
  .pp-fvisit select:disabled {
    background: #f5f5f5;
    color: #9a9a9a;
  }

  .pp-flabel {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6c757d;
    margin-bottom: 4px;
  }

  .pp-flabel--standalone {
    margin-top: 14px;
  }

  .pp-fhint {
    margin: 10px 0 0;
    font-size: 12px;
    color: #6c757d;
  }

  /* Modal Footer */
  .pp-modal-foot {
    flex-shrink: 0;
    padding: 16px 20px;
    border-top: 1px solid var(--pp-line);
    display: flex;
    gap: 12px;
    background: white;
  }

  .pp-btn-ghost {
    flex: 0 0 auto;
    background: white;
    border: 1.5px solid var(--pp-line);
    border-radius: 999px;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 600;
    color: var(--pp-ink);
    cursor: pointer;
  }

  .pp-btn-primary {
    flex: 1;
    background: var(--pp-primary);
    border: none;
    border-radius: 999px;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    color: white;
    cursor: pointer;
  }

  /* Best Of List */
  .pp-bestlist {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--pp-line);
    border-radius: 14px;
    overflow: hidden;
  }

  .pp-bestrow {
    background: white;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--pp-ink);
    transition: background 0.2s;
  }

  .pp-bestrow:active {
    background: var(--pp-line-2);
  }

  .pp-bestrow .ic {
    width: 40px;
    height: 40px;
    background: #FBF1F4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .pp-bestrow .tx {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .pp-bestrow .tx b {
    font-size: 15px;
    font-weight: 600;
    color: var(--pp-ink);
  }

  .pp-bestrow .tx span {
    font-size: 13px;
    color: var(--pp-muted);
  }

  .pp-bestrow .arr {
    flex-shrink: 0;
    color: var(--pp-muted-2);
  }

} /* end @media (max-width: 767px) */