/* Destinations page styles: left sidebar & large map */
:root{
  --accent:#0088ff;
  --muted:#6b7280;
  --bg:#f6f8fb;
}
*{box-sizing:border-box}
html,body{height:100%;overflow-x:hidden}
body{font-family:Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.4;margin:0;color:#111;background:var(--bg)}
.container{max-width:100%;margin:0;padding:0}

/* allow flex children to shrink and avoid accidental horizontal overflow */
.container, .grid, .cards-grid, .results{min-width:0}
.site-header{background:#fff;border-bottom:1px solid #e6e9ef}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 20px}
.logo{font-weight:700;color:var(--accent);text-decoration:none;font-size:1.125rem}
.hero{padding:6px 20px;background:#fff;border-bottom:1px solid #eef2f6}
.hero h1{margin:0;font-size:1.05rem}
.lead{color:var(--muted);margin:6px 0 0;font-size:0.95rem}

/* small top spacer used on this page to create breathing room */
.page-spacer{height:100px}

.grid{display:flex;overflow:hidden;width:100%}

.sidebar{width:560px;flex:0 0 560px;background:#fff;border-right:1px solid #eef2f6;display:flex;flex-direction:column;min-width:0}
.sidebar-top{padding:12px}
.filters-row{display:flex;gap:8px;align-items:center}
.mini-input{padding:8px;border:1px solid #e6edf6;border-radius:6px}
.search-input{flex:1;padding:8px;border:1px solid #e6edf6;border-radius:6px}

.quick-origins{display:flex;gap:8px;padding:8px 12px 12px}
.mini-origin{background:#fff;border:1px solid #e6edf6;padding:6px 10px;border-radius:999px;cursor:pointer;color:var(--muted)}
.mini-origin:hover{background:#fbfdff}

.map-search{position:absolute;left:14px;top:14px;z-index:20}
.map-search{display:none}

.results{overflow-y:auto;overflow-x:hidden;padding:12px 12px 24px}
.map-panel{flex:1 1 auto;position:relative;overflow:hidden;min-width:0}
.cards-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:100%}
.card{padding:0;border-radius:12px;margin-bottom:12px;position:relative;background:transparent}
.card.tile-card{background:#fff;padding:10px;border-radius:14px}
.card.tile-card:hover{box-shadow:0 8px 22px rgba(10,20,40,0.08)}
.thumb-wrap{position:relative;border-radius:6px;overflow:hidden}
.thumb-img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;min-height:150px}
.card .card-body{padding:12px}
/* Force readable text colors for card titles and subtitles (override header/nav styles) */
.cards-grid .card.tile-card .city{font-weight:700;margin:6px 0 0;color:#0b67c2 !important;opacity:1 !important}
.cards-grid .card.tile-card .country{color:#374151 !important;font-size:0.95rem;margin-top:6px;font-weight:600;opacity:1 !important}
.temp-badge.small{position:absolute;right:10px;top:10px;background:#fff;padding:8px 10px;border-radius:999px;font-weight:800;color:#0b67c2;box-shadow:0 4px 10px rgba(0,0,0,0.08);font-size:0.95rem}
.city{font-weight:700;margin:0}
.country{color:var(--muted);font-size:0.95rem;margin-top:6px}
.temp-badge{position:absolute;right:14px;top:14px;background:rgba(255,255,255,0.98);padding:8px 10px;border-radius:999px;font-weight:800;color:#0b67c2}

.map-panel{flex:1 1 auto;position:relative;overflow:hidden}
.map-container{width:100%;height:100%}

/* origin marker (filled) */
.origin-marker{width:14px;height:14px;border-radius:50%;background:#0077ff;border:3px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,0.08);will-change:transform}

/* Markers: hollow ring style */
.marker{width:18px;height:18px;border-radius:50%;background:transparent;border:3px solid rgba(11,103,194,0.18);box-shadow:none;cursor:pointer;will-change:transform}
.marker{position:relative;z-index:0}
.marker.big{width:28px;height:28px;border-width:4px;border-color:#0088ff !important; background: rgba(0,136,255,0.04); box-shadow:0 0 0 4px rgba(0,136,255,0.04);z-index:2000}

/* responsive */
@media (max-width:900px){
  .grid{flex-direction:column}
  .sidebar{width:100%;flex-basis:auto}
  .map-panel{height:60vh}
}

/* page-scoped overflow rules: allow vertical scrolling, prevent horizontal overflow */
.destinations-page{overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch}
.destinations-page .content{overflow:visible}

/* On small screens ensure the map doesn't take full viewport height and allow natural page flow */
@media (max-width:900px){
  .grid{overflow:visible}
  .map-panel{height:auto; min-height:50vh}
  /* limit results panel height so it can scroll independently on mobile */
  .results{max-height:calc(100vh - 160px); overflow-y:auto; -webkit-overflow-scrolling:touch}
}

/* Mobile-specific card layout: horizontal scroll row like the provided screenshot */
@media (max-width:520px){
  .results{padding:10px 12px}
  /* turn the grid of cards into a horizontal scroller */
  .cards-grid{display:flex;flex-direction:row;gap:12px;overflow-x:auto;padding-bottom:8px;-webkit-overflow-scrolling:touch}
  .cards-grid .card{min-width:160px;max-width:180px;flex:0 0 auto;margin-bottom:0}
  .cards-grid .card.tile-card{padding:8px}
  .thumb-img{min-height:88px;aspect-ratio:16/9;object-fit:cover}
  .card .card-body{padding:8px}
  .temp-badge.small{right:8px;top:8px;padding:6px 8px;font-size:0.85rem}
  .cards-grid .card.tile-card .city{font-size:0.95rem}
  .cards-grid .card.tile-card .country{font-size:0.82rem}
  /* reduce visual weight of the months grid on tiny screens */
  .months-grid{grid-template-columns:repeat(2,1fr)}
  /* make map filters sit neatly above the map on small screens */
  .map-filters{left:12px;top:8px}
  /* Make the destination detail panel behave like a full-screen modal on small devices */
  .dest-detail-panel.open{
    position:fixed;
    inset:0; /* top:0; right:0; bottom:0; left:0 */
    width:100%;
    height:100vh;
    margin:0;
    border-radius:0;
    z-index:1200;
    display:block;
    background:#fff;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }

  .dest-detail-cover{height:300px}
  .dest-detail-cover img{object-position:center top}

  /* Move the close button to the left like the screenshot and increase tappable area */
  .dest-detail-close{right:auto;left:12px;top:12px;width:40px;height:40px;border-radius:999px}

  /* ensure any small temp badge inside the detail cover sits at top-right */
  .dest-detail-panel .temp-badge.small{position:absolute;right:12px;top:12px}

  /* Make month cards a bit smaller and wrap nicely inside modal */
  .months-grid{grid-template-columns:repeat(3,1fr);gap:8px}
  .month-card{padding:8px;border-radius:8px}
}

/* ensure map popups close X is clickable and doesn't create extra scroll */
.mapboxgl-popup-close-button{z-index:30}

/* Popup content text color and style */
.mapboxgl-popup-content{
  color: #003f7f !important;
  font-weight: 700 !important;
  font-size: 1.02rem !important;
}

/* map-top filters (pills) */
.map-filters{position:absolute;left:18px;top:18px;display:flex;gap:10px;z-index:30}
.map-filters .filter-btn{
  background:#fff;
  border:2px solid #dfe7f3; /* neutral border for inactive */
  padding:6px 12px;
  border-radius:999px;
  color:#374151 !important; /* explicit visible gray for inactive */
  font-weight:600;
  cursor:pointer;
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
.map-filters .filter-btn:hover,
.map-filters .filter-btn:focus{
  color:var(--accent) !important;
  border-color:var(--accent) !important;
}
.map-filters .filter-btn.active{
  border-color:var(--accent) !important;
  color: #005fb8 !important; /* slightly darker blue for active text */
  background: rgba(0,136,255,0.06);
  box-shadow: 0 6px 18px rgba(0,136,255,0.08);
}

/* Destination detail panel inside the left sidebar/results */
.dest-detail-panel{width:100%;background:#fff;border-radius:10px;box-shadow:0 8px 20px rgba(10,20,40,0.06);overflow:hidden;margin-bottom:12px;display:none}
.dest-detail-panel.open{display:block}
.dest-detail-cover{position:relative;width:100%;height:220px;overflow:hidden}
.dest-detail-cover img{width:100%;height:100%;object-fit:cover;display:block}
.dest-detail-close{position:absolute;right:10px;top:10px;background:rgba(255,255,255,0.95);width:32px;height:32px;border-radius:999px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,0.06);border:1px solid #eef6ff}
.dest-detail-body{padding:12px}
.dest-detail-title{font-weight:700;font-size:1.02rem;color:#003f7f}
.dest-detail-sub{color:#10243a;margin-top:6px;font-size:0.92rem}
.dest-detail-meta{display:flex;gap:12px;margin-top:10px;align-items:center}
.dest-detail-meta .meta-item{display:flex;flex-direction:column}
.dest-detail-meta .meta-item .label{font-size:0.82rem;color:#374151}
.dest-detail-meta .meta-item .value{font-weight:700;color:#0b67c2}
.dest-detail-meta .meta-item .value.dest-airport{color:#0b67c2}
.months-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.month-card{background:#f6fbff;border:1px solid #eaf2ff;padding:8px;border-radius:8px;display:flex;flex-direction:column;align-items:flex-start}
.month-card .m-month{font-size:0.82rem;color:var(--muted)}
.month-card .m-temp{font-weight:800;margin-top:6px;color:#0b67c2}
.month-card .m-price{margin-top:6px;font-size:0.78rem;color:#0a3a63}

@media (max-width:900px){
  .dest-detail-panel{width:100%}
}