/* ============================================================================
 * VT Nearby Now — UX pass (desktop/tablet/mobile)
 * - No HTML changes required
 * - Better spacing, focus, sticky controls, split layout on desktop
 * ========================================================================== */

/* Design tokens */
:root{
  --vt-bg:#fff;
  --vt-fg:#222;
  --vt-muted:#656b73;
  --vt-border:#d7dde3;
  --vt-accent:#1e88e5;
  --vt-accent-2:#2196f3;
  --vt-surface:#f7f9fb;
  --vt-pill:#eef6ff;
  --vt-danger:#e53935;
  --vt-radius:10px;
  --vt-radius-sm:8px;
  --vt-shadow:0 2px 8px rgba(0,0,0,.06);
  --vt-focus:0 0 0 3px rgba(30,136,229,.25);
}

/* Dark mode */
@media (prefers-color-scheme: dark){
  :root{
    --vt-bg:#0e1116;
    --vt-fg:#e6e7e9;
    --vt-muted:#aab2bd;
    --vt-border:#2b3240;
    --vt-accent:#64b5f6;
    --vt-accent-2:#42a5f5;
    --vt-surface:#151a22;
    --vt-pill:#0e2a4a;
    --vt-shadow:0 2px 10px rgba(0,0,0,.45);
  }
}

/* Base */
.vt-nearby{font-family:system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size:14px; line-height:1.45; color:var(--vt-fg);}
.vt-nearby *{box-sizing:border-box}

/* --- LAYOUT --------------------------------------------------------------- */
/* Desktop: grid split — controls full width; map|list side-by-side; itinerary under map */
/* Masaüstü layout */
@media (min-width:1024px){
  .vt-nearby{
    display:grid; gap:1rem;
    grid-template-areas:
      "controls controls"
      "map      list"
      "itin     list";
    grid-template-columns: 1.2fr 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto; /* orta satır esnek */
    height: 100vh;
  }

  .vt-nearby__controls{grid-area:controls}

  .vt-nearby__map{
    grid-area:map;
    min-height:520px;
    max-height:calc(100vh - 220px);
  }

  .vt-nearby__list{
    grid-area:list;
    overflow:auto;
    min-height:0;    /* scroll için kritik */
  }

  .vt-nearby__itin{grid-area:itin}
}

/* Kartların sabit yüksekliği + kapak görseli */
.vt-card{
  min-height:160px;
  align-items:stretch;     /* içerik esnesin */
}

.vt-card__cover{
  flex:0 0 150px;          /* sabit kapak genişliği */
}

/* base (all screens) */
.vt-card__cover img{
  width:100%;
  height:auto;              /* avoid forcing card height */
  aspect-ratio:4/3;
  object-fit:cover;
  background:#fff;          /* nice empty-state box */
  border-radius:6px;
  display:block;            /* not flex (img itself) */
  padding:.4rem;
}

/* optional wider desktops */
@media (min-width:1360px){
  .vt-card__cover{flex-basis:180px}
}

/* Kartların uzamasını engelle */
.vt-card{align-items:flex-start}



/* Tablet: stacked but roomy */
@media (min-width:640px) and (max-width:1023.98px){
  .vt-nearby{display:grid; gap:0.9rem;
    grid-template-areas:
      "controls"
      "map"
      "list"
      "itin";}
  .vt-nearby__map{min-height:420px}
}

/* Mobile */
@media (max-width:639.98px){
  .vt-nearby__map{min-height:340px}
}

/* --- CONTROLS ------------------------------------------------------------- */
.vt-nearby__controls{
  position:sticky; top:0; z-index:5;
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem .8rem;
  padding:.6rem .75rem; margin-bottom:.6rem;
  background:var(--vt-bg);
  border:1px solid var(--vt-border);
  border-radius:var(--vt-radius);
  box-shadow:var(--vt-shadow);
  backdrop-filter:saturate(1.2) blur(2px);
}

/* Inputs/Buttons unified */
.vt-nearby__controls button,
.vt-nearby__controls select,
.vt-nearby__controls input{
  font-size:14px; line-height:1.2;
  padding:.55rem .7rem;
  border:1px solid var(--vt-border);
  border-radius:8px; background:#fff; color:var(--vt-fg);
}
@media (prefers-color-scheme: dark){
  .vt-nearby__controls button,
  .vt-nearby__controls select,
  .vt-nearby__controls input{background:var(--vt-surface)}
}
.vt-nearby__controls label{display:flex; align-items:center; gap:.35rem; font-weight:600; color:var(--vt-muted)}
.vt-nearby__controls input[type="number"]{width:5.5rem; text-align:center}

/* Primary/ghost actions */
.vt-nearby__locate{background:var(--vt-pill)}
.vt-nearby__speak,.vt-nearby__itin-toggle{
  background:var(--vt-surface)
}

/* Focus states */
.vt-nearby__controls button:focus-visible,
.vt-nearby__controls select:focus-visible,
.vt-nearby__controls input:focus-visible{outline:var(--vt-focus);}

/* --- LEGEND (type filters) ----------------------------------------------- */
.vt-nearby__legend{display:flex; flex-wrap:wrap; gap:.45rem}
.vt-nearby__legend label{
  cursor:pointer; user-select:none;
  padding:.35rem .6rem; border:1px solid var(--vt-border);
  border-radius:999px; background:var(--vt-surface);
  font-weight:600; color:var(--vt-fg);
  transition:transform .12s ease, border-color .2s, background .2s;
}
.vt-nearby__legend label.on{background:var(--vt-pill); border-color:var(--vt-accent)}
.vt-nearby__legend label:active{transform:scale(.98)}
.dot{width:10px; height:10px; border-radius:50%; margin-right:6px; display:inline-block}

/* Type colors (unchanged semantics) */
.dot--attraction{background:#e91e63}
.dot--accommodation{background:#3f51b5}
.dot--cuisine{background:#4caf50}
.dot--tour{background:#ff9800}
.dot--event{background:#9c27b0}
.dot--destination{background:#009688}
.dot--unesco{background:#1e88e5}
.dot--unknown{background:#607d8b}

/* --- MAP ------------------------------------------------------------------ */
.vt-nearby__map{
  border:1px solid var(--vt-border); border-radius:var(--vt-radius);
  overflow:hidden; background:var(--vt-surface);
}

/* --- LIST & CARDS --------------------------------------------------------- */
.vt-nearby__list{display:grid; gap:.9rem}
.vt-card{
  display:flex; border:1px solid var(--vt-border);
  border-radius:var(--vt-radius); /* overflow:visible to avoid clipping buttons */
  overflow:visible;
  background:var(--vt-bg);
  box-shadow:var(--vt-shadow);
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
/* keep the action buttons visible; push them to the bottom of the body */
.vt-card__actions{ margin-top:auto; }
.vt-card__body{ padding-bottom: 1rem; } /* extra breathing room */

.vt-card:hover{transform:translateY(-2px)}
.vt-card--pulse{animation:pulse .6s ease}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(33,150,243,.45)}100%{box-shadow:0 0 0 14px rgba(33,150,243,0)}}

.vt-card__cover img{width:150px; height:100%; object-fit:cover; background:#eaeef3}
.vt-card__body{
  flex:1;
  padding:.4rem .95rem 1rem;  /* extra bottom padding */
  display:flex;
  flex-direction:column;
  gap:.25rem;
}

.vt-card__excerpt{
  flex:1; /* let excerpt grow and push actions down */
}

.vt-card__actions{
  margin-top:auto;       /* push actions to bottom */
  display:flex;
  justify-content:flex-start; /* or flex-end if you want right alignment */
  gap:.4rem;
}
.vt-card__top{display:flex; align-items:center; gap:.5rem; font-size:12px; color:var(--vt-muted)}
.vt-card__distance{margin-left:auto; color:var(--vt-muted); font-size:12px}
.vt-card__title{font-size:16px; margin:0}
.vt-card__title a{color:var(--vt-fg); text-decoration:none}
.vt-card__title a:hover{text-decoration:underline}
.vt-card__meta{font-size:13px; color:var(--vt-muted)}
.vt-card__excerpt{font-size:13px; color:var(--vt-fg); opacity:.9; flex:1}
.vt-card__actions{margin-top:.35rem; display:flex; gap:.4rem; flex-wrap:wrap}
.vt-card__actions button{
  background:var(--vt-surface); color:var(--vt-fg);
  border:1px solid var(--vt-border); border-radius:8px;
  padding:.35rem .6rem; font-size:12px; cursor:pointer;
}
.vt-card__actions button:hover{border-color:var(--vt-accent-2)}
.vt-card__actions .trip-toggle.added{
  background:#e6f7ec; color:#2e7d32; border-color:#81c784;
}

.vt-card--current{outline:2px solid var(--vt-accent-2); box-shadow:0 0 0 3px rgba(33,150,243,.15)}

/* Pins */
.vt-pin{position:relative; border:0}
.vt-pin__dot{width:36px; height:36px; border-radius:18px; background:#fff;
  box-shadow:0 4px 16px rgba(0,0,0,.18), inset 0 0 0 2px #e5e7eb; transform:translateY(4px)}
.vt-pin__emoji{position:absolute; inset:0; display:grid; place-items:center; font-size:18px; pointer-events:none}
.vt-pin:after{content:""; position:absolute; left:50%; bottom:2px; transform:translateX(-50%) rotate(45deg);
  width:8px; height:8px; background:#fff; border-left:2px solid #e5e7eb; border-bottom:2px solid #e5e7eb;
  box-shadow:0 2px 8px rgba(0,0,0,.10)}
.vt-pin--current .vt-pin__dot{box-shadow:0 0 0 2px var(--vt-accent-2), 0 6px 18px rgba(0,0,0,.22), inset 0 0 0 2px #e5e7eb}
.vt-pin--unesco .vt-pin__dot{box-shadow:0 0 0 2px #1e88e5, 0 6px 18px rgba(0,0,0,.22), inset 0 0 0 2px #e5e7eb}

/* Type badges */
.vt-card__type{display:inline-block; font-size:11px; font-weight:700; text-transform:capitalize;
  border-radius:999px; padding:3px 9px; line-height:1.2; margin-right:.45rem; color:#fff}
.vt-card__type--accommodation{background:#3f51b5}
.vt-card__type--cuisine{background:#4caf50}
.vt-card__type--attraction{background:#e91e63}
.vt-card__type--tour{background:#ff9800}
.vt-card__type--event{background:#9c27b0}
.vt-card__type--destination{background:#009688}
.vt-card__type--unesco{background:#1e88e5}
.vt-card__type--unknown{background:#607d8b}

/* Messages + Itinerary */
.vt-loading,.vt-empty,.vt-error{padding:1rem; text-align:center; color:var(--vt-muted)}
.vt-nearby__itin{border:1px solid var(--vt-border); border-radius:var(--vt-radius);
  background:var(--vt-surface); padding:.75rem; margin-top:.75rem}
.vt-nearby__itin.hidden{display:none}
.vt-nearby__itin-head{display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem}
.vt-nearby__itin-head .spacer{flex:1}
.vt-nearby__itin-head button{
  background:var(--vt-bg); border:1px solid var(--vt-border);
  padding:.4rem .6rem; border-radius:8px; cursor:pointer
}
.vt-nearby__itin-list{margin:0; padding-left:1.1rem}
.vt-nearby__itin-list li{margin:.3rem 0}
.vt-nearby__itin-list button.rm{margin-left:.45rem; font-size:12px;
  background:none; border:none; color:var(--vt-danger); cursor:pointer}

/* --- RESPONSIVE TWEAKS ---------------------------------------------------- */
/* Reduce density on small screens, bigger touch targets */
@media (max-width:639.98px){
  .vt-nearby__controls{gap:.5rem; padding:.55rem}
  .vt-nearby__controls button,
  .vt-nearby__controls select,
  .vt-nearby__controls input{padding:.65rem .75rem; font-size:15px}
  .vt-nearby__controls input[type="number"]{width:6rem}
  .vt-nearby__legend label{padding:.45rem .7rem}
  .vt-card{flex-direction:column}
  .vt-card__cover img:not([src]),
  .vt-card__cover img[src=""]{
    display: none !important;
  }
  .vt-card__cover:has(img:not([src])),
  .vt-card__cover:has(img[src=""]){
    display: none !important;
  }
}

/* Tablet: slightly larger typography & map */
@media (min-width:640px) and (max-width:1023.98px){
  .vt-nearby{font-size:15px}
  .vt-card__cover img{width:180px}
}

/* Large desktop: room for bigger thumbnails */
@media (min-width:1360px){
  .vt-card__cover img{width:180px}
}

/* sadece mobilde sticky kapalı */
@media (max-width: 768px){
  .vt-nearby__controls{
    position:static; /* sticky yerine normal flow */
    box-shadow:none; /* sade görünüm */
  }
}
/* VT Nearby — ultra-compact mobile (≤640px)
   Yalnızca: Use my location + yatay kaydırılabilir legend */
@media (max-width:640px){

  /* Panel sade: sticky kapalı, tek kolon */
  .vt-nearby__controls{
    position:static; display:block; padding:.6rem; border:0; box-shadow:none; background:transparent;
  }

  /* 1) Use my location = ana CTA (full width) */
  .vt-nearby__locate{
    display:block; width:100%;
    padding:.75rem .9rem; border-radius:12px;
    background:#0071c2; color:#fff; border:0; font-weight:700;
  }
  .vt-nearby__locate:focus-visible{outline:3px solid rgba(0,113,194,.35)}

  /* 2) Legend: tek satır, yatay kaydırılabilir; scrollbar/alt çizgi yok */
  .vt-nearby__legend{
    margin-top:.6rem; display:flex; gap:.5rem;
    overflow-x:auto; white-space:nowrap;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    padding-bottom:.2rem;
  }
  .vt-nearby__legend::-webkit-scrollbar{display:none}
  .vt-nearby__legend label{
    padding:.48rem .7rem; border-radius:999px;
    background:#fff; border:1px solid #d0e1ff; font-weight:600;
  }
  .vt-nearby__legend label.on{background:#eef6ff; border-color:#9fc7ff}
  .dot{width:10px;height:10px;margin-right:6px;border-radius:50%}

  /* 3) Diğer tüm kontrolleri gizle (radius, open now, currency, sort, speak, itinerary) */
  .vt-nearby__controls label:has(.vt-nearby__radius),
  .vt-nearby__controls label:has(.vt-nearby__open-now),
  .vt-nearby__controls label:has(.vt-nearby__currency),
  .vt-nearby__controls label:has(.vt-nearby__sort),
  .vt-nearby__speak,
  .vt-nearby__itin-toggle{display:none!important}

  /* :has() desteklemeyen tarayıcılar için güvenli yedek (DOM sırasına göre) */
  @supports not(selector(:has(*))){
    .vt-nearby__controls > :nth-child(2),  /* radius label */
    .vt-nearby__controls > :nth-child(3),  /* open now */
    .vt-nearby__controls > :nth-child(4),  /* currency */
    .vt-nearby__controls > :nth-child(5),  /* sort */
    .vt-nearby__controls > :nth-child(7),  /* speak */
    .vt-nearby__controls > :nth-child(8){  /* itinerary */
      display:none!important;
    }
  }
}
/* Force single-row, horizontally scrollable chips on mobile */
@media (max-width:640px){
  .vt-nearby__legend{
    display:flex !important;
    flex-wrap:nowrap !important;      /* KIRMA! */
    overflow-x:auto !important;
    overflow-y:hidden !important;
    white-space:nowrap !important;
    gap:.5rem;
    width:100%;
    -webkit-overflow-scrolling:touch;
    padding-bottom:.2rem;
  }
  /* Alt çizgi/şerit vs. varsa kapat */
  .vt-nearby__legend::after{content:none !important;}

  /* Her chip shrink olmasın ve genişlik 100% olmasın */
  .vt-nearby__legend label{
    display:inline-flex !important;
    align-items:center;
    flex:0 0 auto !important;         /* sabit genişlik, shrink yok */
    width:auto !important;
    max-width:none !important;
    white-space:nowrap;
  }

  /* Scrollbar gizle (destekleyen tarayıcılar) */
  .vt-nearby__legend::-webkit-scrollbar{display:none}
  .vt-nearby__legend{scrollbar-width:none}
}
/* Mobile spacing: map ile liste arasında boşluk */
@media (max-width:640px){
  .vt-nearby__map{
    margin-bottom:1rem;   /* haritanın altında nefes boşluğu */
    border-radius:12px;   /* köşeler yumuşak */
  }
}

/* list matches map height & scrolls (desktop only) */
.vt-nearby{ --vt-map-h: 480px; } /* fallback before JS runs */

@media (min-width:1024px){
  .vt-nearby__list{
    height: var(--vt-map-h);
    max-height: var(--vt-map-h);
    overflow: auto;
    min-height: 0; /* keep grid from fighting scroll */
  }
}
/* --- FIX: prevent action buttons from being clipped in the list --- */

/* give the list a bit of padding so the scrollbar doesn't overlay content */
@media (min-width:1024px){
  .vt-nearby__list{ padding-right:.4rem; }
}

/* let the card grow with its content and keep the cover from fixing the height */
.vt-card{ align-items:flex-start; } /* make sure tallest child defines height */

/* override earlier fixed height on the cover image */
.vt-card__cover img{
  height:auto !important;            /* stop forcing 140px */
  aspect-ratio: 4 / 3;               /* keeps a nice box without fixing height */
  object-fit: cover;
}

/* ---- tighten card spacing & keep button inside (strong overrides) ---- */
.vt-nearby .vt-card__body{
  padding: .6rem .9rem .85rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: .18rem !important;
}

.vt-nearby .vt-card__top{ margin-bottom: .25rem !important; }

.vt-nearby .vt-card__title{
  margin: .1rem 0 .08rem !important;
  line-height: 1.2 !important;
}

.vt-nearby .vt-card__meta,
.vt-nearby .vt-card__excerpt,
.vt-nearby .vt-card__body p{
  margin: 0 !important;               /* kill theme paragraph margins */
}

.vt-nearby .vt-card__excerpt{
  flex: 1 1 auto !important;          /* fill remaining space */
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;   /* 2 lines; change to 1 or 3 if you want */
  overflow: hidden !important;
}

.vt-nearby .vt-card__actions{
  margin-top: auto !important;        /* pin to bottom of text column */
  padding-top: .25rem !important;
  display: flex !important;
  gap: .4rem !important;
  justify-content: flex-start !important; /* change to flex-end to right-align */
}

/* make sure the card doesn’t clip the button */
.vt-nearby .vt-card{ overflow: visible !important; }

/* scale image nicely inside padded box */
.vt-card__cover img{
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 6px;        /* optional: soften image corners inside */
}

/* make sure the body still stacks content top-to-bottom inside */
.vt-card__body{
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* content still flows top → bottom */
}

/* === Keyboard focus for list cards === */
.vt-card[tabindex="0"]:focus-visible {
  outline: 2px solid var(--vt-accent-2);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(33,150,243,.18);
}

/* Optional: subtle hover parity so mouse & keyboard feel consistent */
@media (hover: hover) {
  .vt-card[tabindex="0"]:hover {
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
  }
}
/* WP admin bar guard for 100vh layouts */
html.admin-bar .vt-nearby {
  height:calc(100vh - 32px);
}
@media (max-width:782px){
  html.admin-bar .vt-nearby {
    height:calc(100vh - 46px);
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){
  .vt-card,
  .vt-nearby__legend label { transition:none !important; }
  .vt-card--pulse { animation:none !important; }
}