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

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

  /* CSS Variables for configuration */
  :root {
    --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);
  }

  /* 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;
  }

  .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 */
  .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 Button */
  .pp-sort {
    background: white;
    border: 1px solid var(--pp-line);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--pp-ink);
    display: flex;
    align-items: center;
    gap: 4px;
  }

  /* 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;
  }

  /* 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) */