/* Variables */
:root{
  --bg1:#f6f7f9; --bg2:#eef1f5;
  --glass: rgba(255,255,255,0.25);
  --glass-strong: rgba(255,255,255,0.55);
  --text:#111827; --muted:#6b7280;
  --radius: 22px; --shadow: 0 10px 30px rgba(0,0,0,0.12);
  --topbar-h:70px;
}

*{box-sizing:border-box}
html,body{
  height:100%; margin:0;
  font-family:'Segoe UI', Roboto, system-ui, -apple-system, sans-serif;
  color:var(--text);
  background: linear-gradient(180deg, var(--bg1), var(--bg2));
  overflow:auto;
}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:2500;
  display:flex; align-items:center; justify-content:flex-start; gap:10px;
  padding:6px clamp(8px,3vw,12px);
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,0.55);
  border-bottom:1px solid rgba(0,0,0,0.05);
}
.intro-overlay:not(.hidden) ~ .topbar {display:none;}
.brand{display:flex; align-items:center; font-weight:700; letter-spacing:.2px}
.brand-logo{
  height:82px; max-height:82px; width:auto; display:block;
}
.filters{display:flex; align-items:center; gap:10px; width:100%; justify-content:flex-end; flex-wrap:wrap}
.filters{
  display:flex; align-items:center; gap:8px; width:100%;
  justify-content:flex-start; flex-wrap:wrap; padding-bottom:2px;
}
.regions{
  display:flex; gap:8px; flex-wrap:wrap; max-width:45vw; overflow-x:auto; padding:4px 0;
}
.regions button{
  border:none; padding:8px 12px; border-radius:16px;
  background: linear-gradient(135deg, rgba(74,144,226,0.14), rgba(74,226,187,0.16));
  backdrop-filter: blur(10px); box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  cursor:pointer; white-space:nowrap; font-weight:600; color:#0f172a;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.regions button:hover{transform: translateY(-1px); box-shadow: 0 12px 30px rgba(0,0,0,0.14);}
.regions button.active{
  background: linear-gradient(135deg, #4a90e2, #4ae2bb);
  color:white; box-shadow: 0 12px 30px rgba(74,144,226,0.4);
}
.region-select{
  padding:8px 12px; border-radius:14px; border:1px solid rgba(0,0,0,0.05);
  background: rgba(255,255,255,0.7); backdrop-filter: blur(10px); box-shadow: 0 8px 22px rgba(0,0,0,0.08);
  font-weight:700; cursor:pointer; color:#0f172a; min-width:160px;
}
.type-filter{
  position:relative; display:flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:14px; background: var(--glass);
  backdrop-filter: blur(8px); box-shadow: var(--shadow);
  flex:1 1 52%;
  min-width:160px;
}
.type-filter select{
  border:none; background:transparent; outline:none; padding:8px 8px; border-radius:12px;
  box-shadow: none; font-weight:600; color:#0f172a;
  width:100%;
}
.view-switch{
  display:flex; align-items:center; gap:8px; flex-wrap:nowrap;
  padding:4px 0; justify-content:flex-start; width:100%; overflow-x:auto;
}
.view-switch button{
  border:none; padding:8px 12px; border-radius:14px;
  background: rgba(255,255,255,0.9); backdrop-filter: blur(10px); cursor:pointer;
  box-shadow: 0 8px 22px rgba(0,0,0,0.08); font-weight:700; color:#0f172a;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  display:inline-flex; align-items:center; gap:6px; min-height:36px; min-width:110px;
  white-space:nowrap; opacity:1!important;
}
.view-switch button:hover{transform: translateY(-1px); box-shadow: 0 12px 28px rgba(0,0,0,0.12);}
.view-switch .active{
  background: linear-gradient(135deg, #111827, #243b55);
  color:white; box-shadow: 0 12px 32px rgba(17,24,39,0.35);
}
.view-switch #exploreMapBtn{
  color:#0a2f5f !important;
  background: #e7f0ff;
  box-shadow: 0 8px 22px rgba(10,47,95,0.15);
  opacity:1 !important;
}
.view-switch #exploreMapBtn.active{
  color:white !important;
  background: linear-gradient(135deg, #111827, #243b55);
}
.view-switch #viewExplore{order:1;}
.view-switch #viewBeen{order:2;}
.view-switch #exploreMapBtn{order:3;}
.view-switch #viewUserMaps{order:4;}
.view-switch #btnRoute{order:5;}
.view-switch #toggleRatings{order:6;}
.city-search{
  display:flex;
  align-items:center;
  gap:6px;
  background: var(--glass);
  backdrop-filter: blur(8px);
  border-radius:20px;
  padding:4px 8px;
  box-shadow: var(--shadow);
  order:7;
}
.city-search input{
  border:none;
  background:transparent;
  outline:none;
  padding:6px 4px;
  min-width:160px;
  font-size:14px;
}
.city-search button{
  border:none;
  border-radius:14px;
  padding:6px 10px;
  background: var(--glass-strong);
  cursor:pointer;
  font-weight:600;
}

@media (max-width: 680px){
  .filters{flex-direction:row; align-items:flex-start;}
  .filters{flex-wrap:wrap; gap:8px;}
  .regions{
    flex:1 1 48%;
    max-width:48%;
    min-width:0;
    justify-content:flex-start;
  }
  .region-select{width:100%; min-width:0;}
  .type-filter{
    flex:1 1 48%;
    max-width:48%;
    min-width:0;
    justify-content:flex-start;
  }
  .type-filter select{width:100%;}
  .view-switch{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    overflow-x:hidden;
  }
  .view-switch button{
    justify-content:flex-start;
    width:48%;
    min-width:0;
    padding:7px 10px;
    font-size:13px;
    min-height:34px;
  }
  .region-reminder{
    font-size:12px;
    padding:5px 10px;
    top: calc(var(--topbar-h, 70px) + 70px);
    left:50%;
    transform: translateX(-50%);
    right:auto;
    bottom:auto;
  }
}

/* Mostrar botón de ruta solo en modo mapa */
#btnRoute{display:none!important;}
.map-visible #btnRoute{display:inline-flex!important;}

/* Mostrar botón ver puntuaciones solo en modo mapa */
#toggleRatings{display:none!important;}
.map-visible #toggleRatings{display:inline-flex!important;}
.view-switch #viewExplore::before{content:"🔍";}
.view-switch #viewBeen::before{content:"✅";}
.view-switch #exploreMapBtn::before{content:"🗺️";}
.view-switch #viewUserMaps::before{content:"🗂️";}
.view-switch #btnRoute::before{content:"➡️";}
.view-switch #toggleRatings::before{content:"⭐";}

.current-region{font-size:14px; font-weight:600; color:#4a90e2; padding-left:10px; white-space:nowrap;}
.region-reminder{
  position:fixed;
  top: calc(var(--topbar-h, 70px) + 160px);
  left:50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(10px);
  color:#0a4b78;
  font-size:14px;
  padding:6px 12px;
  font-weight:600;
  border-radius:12px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.12);
  z-index:2501;
  pointer-events:none;
}

/* Cards */
.cards{height: calc(100vh - 64px); overflow-y:auto; scroll-snap-type:y mandatory}
.card{position:relative; height:100vh; padding: clamp(10px, 2vw, 16px); scroll-snap-align:start; display:flex; align-items:center; justify-content:center}
.card-inner{
  position:relative; width:100%; height:100%; border-radius: var(--radius); overflow:hidden;
  background: rgba(255,255,255,0.35); backdrop-filter: blur(10px); box-shadow: var(--shadow);
  display:flex; flex-direction:column; gap:12px; padding:12px; align-items:center;
}
.carousel{
  position:relative; width:100%; display:flex; gap:12px;
  padding:0; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; touch-action: pan-y pan-x;
  border-radius:16px; background:#f3f4f6; min-height:420px; height:70vh; max-height:80vh;
}
.carousel::-webkit-scrollbar{display:none}
.slide{
  position:relative; flex:0 0 100%; height:100%; scroll-snap-align:center;
  display:flex; align-items:center; justify-content:center; background:#e5e7eb;
}
.slide img{
  width:100%; height:100%; object-fit: contain;
  border:6px solid rgba(255,255,255,0.9); border-radius:16px; background:#f3f4f6;
  opacity:0; transition:opacity .4s ease;
}
.slide img.loaded{opacity:1; background:none;}
.attr{position:absolute; left:12px; bottom:12px; background: rgba(255,255,255,0.6); backdrop-filter: blur(8px); padding:6px 10px; border-radius:14px; font-size:12px; color:#111827; max-width:80%; box-shadow: var(--shadow)}
.caption{
  position:static; transform:none; background:transparent; backdrop-filter:none;
  padding:0; border-radius:0; text-align:left; max-width:100%; box-shadow:none;
}
.caption h3{margin:0 0 6px 0; font-size: clamp(16px, 2.6vw, 22px)}
.caption p{margin:0; color:#374151;}
.caption .short-desc{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient: vertical;
  overflow:hidden;
  color:#374151;
}

.side-actions{
  position:absolute; right:12px; top:50%; transform: translateY(-50%);
  display:flex; flex-direction:column; gap:10px; align-items:center;
  padding:0 10px;
}
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:4px 8px; min-width:70px; height:24px; border-radius:12px;
  background: rgba(255,255,255,0.4); color:#0f172a; border:none;
  font-weight:700; font-size:13px; cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,0.12);
  transition:transform .15s ease,opacity .15s ease, box-shadow .2s ease, background .2s ease;
  text-decoration:none;
}
.icon-btn:hover{transform:translateY(-1px);opacity:.97; box-shadow:0 12px 28px rgba(0,0,0,0.16);}
.icon-btn svg{width:16px; height:16px; stroke:#0f172a; stroke-width:2; fill:none}
.icon-btn .tooltip{
  display:none; position:absolute; top:-34px; left:50%; transform:translateX(-50%);
  background: rgba(0,0,0,0.75); color:#fff; font-size:12px; font-weight:600;
  padding:4px 8px; border-radius:12px; white-space:nowrap; pointer-events:none;
}
.icon-btn:hover .tooltip,
.icon-btn:focus .tooltip{display:block;}

/* Trip view */
.trip-card{width:100%; padding:12px 18px; display:flex; justify-content:center;}
.trip-inner{
  display:flex; align-items:flex-start; gap:16px;
  background: rgba(255,255,255,0.8); backdrop-filter: blur(10px);
  border-radius: 18px; box-shadow: var(--shadow);
  padding: 12px; width: min(800px, 95%); transition: transform 0.2s ease;
}
.trip-inner:hover{transform: scale(1.01);}
.trip-thumb{flex:0 0 120px; height:90px; border-radius:12px; overflow:hidden; background:#e5e7eb; display:flex; align-items:center; justify-content:center;}
.trip-thumb img{width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .4s ease;}
.trip-thumb img.loaded{opacity:1;}
.no-thumb{color:var(--muted); font-size:0.9rem;}
.trip-text{flex:1; display:flex; flex-direction:column; gap:6px;}
.trip-text h3{margin:0; font-size:1.1rem; font-weight:700;}
.trip-text p{margin:0; color:var(--text); font-size:0.95rem; line-height:1.4;}

/* Modal */
.modal{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background: rgba(0,0,0,0.55); z-index:9999;}
.modal.hidden{display:none}
.modal-content{width:min(920px,92vw); max-height: 90vh; overflow:auto; background: rgba(255,255,255,0.92); backdrop-filter: blur(12px); padding:16px; border-radius: var(--radius); box-shadow: var(--shadow); animation: pop .18s ease-out; position:relative; z-index:10000;}
@keyframes pop{from{transform: translateY(12px); opacity:0} to{transform: translateY(0); opacity:1}}
.modal-close{position:sticky; top:0; left:100%; transform: translateX(-100%); border:none; background: var(--glass); padding:8px 10px; border-radius:12px; cursor:pointer}
.modal-gallery{display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; border-radius: 16px; margin-bottom:10px; height:55vh; min-height:320px;}
.modal-gallery .slide{flex:0 0 100%; height:100%; background:#e5e7eb; scroll-snap-align:center; position:relative;}
.modal-gallery img{width:100%; height:100%; object-fit: contain; border:6px solid rgba(255,255,255,0.9); border-radius:16px; background:#f3f4f6}
.modal-gallery .attr{bottom:10px; left:10px}
.modal-text h2{margin: 8px 0 6px}
.modal-text .meta{margin:0; color:var(--muted)}
.modal-actions{display:flex; gap:12px; margin-top:10px; flex-wrap:wrap; align-items:center;}
.modal-actions .btn{
  position:relative;
  border:1px solid rgba(15,23,42,0.08);
  text-decoration:none;
  color:#0b132b;
  background: linear-gradient(135deg, #f6f7fb, #eef1f6);
  padding:10px 14px;
  border-radius:14px;
  cursor:pointer;
  font-weight:700;
  font-size:15px;
  box-shadow: 0 6px 14px rgba(15,23,42,0.12);
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  transition: transform .16s ease, box-shadow .18s ease, background .16s ease, filter .12s ease;
  overflow:hidden;
}
.modal-actions .btn::after{
  content:"\2605";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.45), transparent 45%);
  opacity:0;
  transition: opacity .2s ease;
  pointer-events:none;
}
.modal-actions .btn:hover{
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 12px 26px rgba(15,23,42,0.16);
}
.modal-actions .btn:hover::after{opacity:1;}
.modal-actions .btn:active{
  transform: translateY(0);
  filter:brightness(.96);
}
.modal-actions .btn:focus-visible{
  outline:2px solid #0ea5e9;
  outline-offset:2px;
}
.modal-actions .btn::before{
  display:inline-block;
  width:18px; text-align:center; font-weight:800;
}
#modalAddToMap::before{content:"🗺️";}
#modalAddToRoute::before{content:"➡️";}
#modalMaps::before{content:"📍";}
#modalSeen::before{content:"✅";}
#modalBlogContainer .btn::before{content:"📖";}
#modalVideo::before{content:"▶️";}

/* Mejora acciones de la ficha */
#modalAddToMap{
  background: linear-gradient(135deg, #f6f7fb, #eef1f6);
  color:#0b132b; border:1px solid rgba(15,23,42,0.08);
}
#modalAddToRoute{
  background: linear-gradient(135deg, #f6f7fb, #eef1f6);
  color:#0b132b; border:1px solid rgba(15,23,42,0.08);
}
#modalMaps{
  background: linear-gradient(135deg, #f6f7fb, #eef1f6);
  color:#0b132b; border:1px solid rgba(15,23,42,0.08);
}
#modalSeen{
  background: linear-gradient(135deg, #f6f7fb, #eef1f6);
  color:#0b132b; border:1px solid rgba(15,23,42,0.08);
}
#modalBlogContainer .btn{
  border:1px solid rgba(15,23,42,0.08);
  background: linear-gradient(135deg, #f6f7fb, #eef1f6);
  color:#0b132b;
}
#modalVideo{
  background: linear-gradient(135deg, #f6f7fb, #eef1f6);
  color:#0b132b; border:1px solid rgba(15,23,42,0.08);
}

/* Toast */
.toast{
  position:fixed; left:50%; transform: translateX(-50%); bottom: 20px;
  background: rgba(0,0,0,0.85); color:#fff;
  padding:10px 14px; border-radius:999px; font-weight:600; letter-spacing:.2px;
  opacity:0; pointer-events:none; transition: opacity .18s ease, transform .18s ease;
  z-index:12000;
}
.toast.show{opacity:1; transform: translateX(-50%) translateY(-6px);}

.empty{padding:24px; text-align:center; color:var(--muted)}

/* Intro */
.intro-overlay{
  position:fixed; inset:0; background: linear-gradient(180deg, #e3f2fd, #f8f9fa);
  display:flex; justify-content:center; align-items:center; z-index:100;
  overflow-y:auto; padding:2rem 1rem;
}
.intro-overlay.hidden{display:none!important;}
.intro-card{
  background:white; border-radius:24px; box-shadow:0 8px 25px rgba(0,0,0,0.1);
  padding:2.5rem 1.5rem; max-width:650px; width:90%; text-align:center;
  animation: fadeIn 0.8s ease-out;
}
.intro-card h1{font-size:1.8rem; font-weight:700; color:#1a1a1a; margin-bottom:1rem;}
.intro-note{font-size:1rem; color:#555; margin-bottom:1.8rem;}
.intro-grid{display:grid; grid-template-columns:1fr; gap:1.3rem;}
@media (min-width:600px){.intro-grid{grid-template-columns:1fr 1fr;}}
.intro-block{
  background:#ffffffd9; border-radius:20px; padding:1.2rem;
  box-shadow:0 4px 15px rgba(0,0,0,0.07);
  transition:all 0.3s ease; display:flex; flex-direction:column; align-items:center;
}
.intro-block:hover{transform: translateY(-4px); box-shadow:0 6px 20px rgba(0,0,0,0.15);}
.intro-block strong{font-size:1.1rem; color:#333; margin-bottom:0.7rem;}
.intro-block select{
  opacity:1; max-height:none; overflow:visible; margin-bottom:0.8rem; padding:0.6rem;
  border-radius:8px; border:1px solid #ccc; width:100%; font-size:1rem; transition:none;
}
.intro-block button{
  width:100%; padding:0.9rem 1rem; font-size:1rem; font-weight:600;
  color:white; background: linear-gradient(135deg, #00b894, #0984e3);
  border:none; border-radius:12px; cursor:pointer; transition:all 0.3s ease;
}
.intro-block button:hover{background: linear-gradient(135deg, #00cec9, #74b9ff); transform: scale(1.05);}

@keyframes fadeIn{from{opacity:0; transform: translateY(20px);} to{opacity:1; transform: translateY(0);}}

.back-home{
  position:fixed; left:12px; bottom:12px; z-index:2200;
  border:none; padding:10px 12px; border-radius:999px;
  background: var(--glass-strong); box-shadow: var(--shadow); display:none;
}
.back-home.show{display:block}

/* Map */
#mapContainer{
  position:fixed; top:var(--topbar-h, 70px); left:0;
  width:100%; height:calc(100vh - var(--topbar-h, 70px));
  z-index:1500; display:none; background:#fff;
}
#mapContainer.active{display:block!important;}
#mapContainer.hidden{display:none!important;}
#map{width:100%; height:100%; position:relative; z-index:1;}
#closeMap{display:none;}
.map-back-btn{
  position:absolute; top:15px; left:15px; z-index:4000;
  background:white; border:none; border-radius:8px; padding:8px 12px;
  font-weight:600; cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,0.2); display:none;
}
#mapContainer.active .map-back-btn{display:block;}

/* Markers */
.rounded-thumb-marker{
  width:72px!important; height:72px!important;
  border-radius:50%; overflow:hidden;
  border:3px solid #fff!important;
  box-shadow:0 0 6px rgba(0,0,0,0.35);
  background:white;
}
.marker-wrapper{position:relative; width:72px; height:72px; border-radius:50%; overflow:hidden;}
.marker-wrapper img{
  width:100%; height:100%; object-fit:cover; border-radius:50%;
  border:2px solid white; box-shadow:0 0 6px rgba(0,0,0,0.3);
  display:block;
}
.marker-rating-badge{
  position:absolute; bottom:-4px; left:50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.65); color:#ffd166; font-size:11px;
  padding:2px 6px; border-radius:10px; font-weight:600; pointer-events:none; z-index:20; display:none;
}
.rating-pin{width:56px!important; height:56px!important; padding:0!important; margin:0!important; background:transparent!important; border:none!important;}
.rating-pin .marker-wrapper{width:56px; height:56px;}
.rating-pin .marker-wrapper img{width:100%; height:100%; object-fit:cover; border-radius:50%; display:block;}
.leaflet-marker-icon.rating-pin{width:56px!important; height:56px!important; padding:0!important; margin:0!important; background:transparent!important; border:none!important;}
.leaflet-marker-icon.rounded-thumb-marker{
  position:relative;
  width:72px!important; height:72px!important;
  border-radius:50%;
  overflow:hidden;
  border:3px solid #fff;
  box-shadow:0 0 8px rgba(0,0,0,0.35);
  background:white;
}

.leaflet-div-icon.thumb-div-icon,
.leaflet-marker-icon.thumb-div-icon{
  background:transparent!important;
  border:none!important;
  width:72px!important;
  height:72px!important;
  display:block!important;
  padding:0!important;
  margin:0!important;
  box-shadow:none!important;
}
.leaflet-div-icon.rounded-thumb-marker{
  background:transparent!important;
  border:none!important;
  width:72px!important;
  height:72px!important;
  padding:0!important;
  margin:0!important;
  box-shadow:none!important;
}
.thumb-marker{
  position:relative;
  width:72px;
  height:72px;
  border-radius:50%;
  overflow:hidden;
  border:3px solid #fff;
  box-shadow:0 0 8px rgba(0,0,0,0.35);
  background:#fff;
  box-sizing:border-box;
  clip-path: circle(50% at 50% 50%);
}
.thumb-marker img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
  display:block;
  overflow:hidden;
  clip-path: circle(50% at 50% 50%);
}
.thumb-marker.imp-essential::after{
  content:"\2605";
  position:absolute;
  bottom:2px;
  left:50%;
  transform: translateX(-50%);
  color:#ffcc00;
  font-size:14px;
  font-weight:900;
  text-shadow:
    0 1px 4px rgba(0,0,0,0.45),
    0 0 2px #ffe066,
    0 0 6px rgba(255,204,0,0.7);
  pointer-events:none;
  z-index:30;
  line-height:1;
}
.thumb-marker.imp-essential::after{
  content:"\2605";
  position:absolute;
  bottom:2px;
  left:50%;
  transform: translateX(-50%);
  color:#ffcc00;
  font-size:14px;
  font-weight:900;
  text-shadow:
    0 1px 4px rgba(0,0,0,0.45),
    0 0 2px #ffe066,
    0 0 6px rgba(255,204,0,0.7);
  pointer-events:none;
  z-index:30;
  line-height:1;
}

.imp-pin-wrapper{
  background:transparent!important;
  border:none!important;
  padding:0!important;
  margin:0!important;
  box-shadow:none!important;
}
.imp-pin{
  position:relative;
  width:72px;
  height:86px;
  overflow:visible;
  background:transparent;
  display:flex;
  align-items:flex-start;
  justify-content:center;
}
.imp-pin-img{
  width:72px;
  height:72px;
  object-fit:cover;
  display:block;
  border-radius:50%;
  border:3px solid #fff;
  box-shadow:0 8px 16px rgba(0,0,0,0.18);
}
.imp-pin-star{
  position:absolute;
  left:50%;
  bottom:8px;
  transform: translateX(-50%);
  color:#f6b500;
  font-size:18px;
  font-weight:900;
  line-height:1;
  -webkit-text-stroke: 0.05px rgba(255,255,255,0.95);
  text-shadow:
    0 1px 2px rgba(0,0,0,0.25),
    0 0 3px rgba(255,215,80,0.9),
    0 0 8px rgba(255,215,80,0.55);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
  font-family: "Segoe UI Symbol","Apple Color Emoji",sans-serif;
  z-index: 5;
}

.rounded-thumb-inner{
  position:relative;
  width:72px; height:72px;
  border-radius:50%;
  overflow:hidden;
  border:3px solid #fff;
  box-shadow:0 0 8px rgba(0,0,0,0.35);
  background:#fff;
  box-sizing:border-box;
  clip-path: circle(50% at 50% 50%);
}
.rounded-thumb-inner img{
  width:100%; height:100%;
  object-fit:cover;
  border-radius:50%;
  display:block;
  overflow:hidden;
  clip-path: circle(50% at 50% 50%);
}
.rounded-thumb-inner.imp-essential::after{
  content:"\2605";
  position:absolute;
  bottom:2px;
  left:50%;
  transform: translateX(-50%);
  color:#ffcc00;
  font-size:14px;
  font-weight:900;
  text-shadow:
    0 1px 4px rgba(0,0,0,0.45),
    0 0 2px #ffe066,
    0 0 6px rgba(255,204,0,0.7);
  pointer-events:none;
  z-index:30;
  line-height:1;
}
.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div{
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  backdrop-filter: blur(3px);
}
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large{
  border-radius: 50% !important;
}
.marker-cluster span{
  color:#111;
  font-weight:700;
  text-shadow: 0 1px 3px rgba(255,255,255,0.8);
}
.leaflet-tooltip.rating-tooltip{
  background: rgba(0, 0, 0, 0.7); color: #ffd166; border-radius: 12px;
  padding: 2px 6px; font-size: 11px; font-weight: 600; border: none;
  box-shadow: 0 0 4px rgba(0,0,0,0.3);
}

/* User maps popup buttons */
.btn-delete-pin, .btn-open-modal{
  padding:6px 10px; font-size:14px; border-radius:6px; border:none; cursor:pointer;
}
.btn-delete-pin{background:#e63946; color:#fff;}
.btn-delete-pin:hover{background:#b91c1c;}
.btn-open-modal{background:#1f2937; color:#fff;}
.btn-open-modal:hover{background:#111827;}

.map-popup-actions{
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}
.map-popup-btn{
  border:1px solid rgba(15,23,42,0.08);
  padding:7px 10px;
  border-radius:12px;
  font-weight:700;
  font-size:13px;
  cursor:pointer;
  color:#0f172a;
  background: linear-gradient(135deg, #f6f7fb, #eef1f6);
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
  transition: transform .12s ease, box-shadow .16s ease, background .16s ease, filter .12s ease;
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:30px;
}
.map-popup-btn:hover{transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,0.14);}
.map-popup-btn:active{transform:translateY(0); filter:brightness(.95);}
.map-popup-btn::before{
  content:"";
  display:inline-block;
  width:16px;
  text-align:center;
  font-size:14px;
}
.map-popup-btn.danger::before{content:"🗑️";}
.map-popup-btn.success::before{content:"➡️";}
.map-popup-btn.ghost::before{content:"ℹ️";}

/* Route panel */
.route-container{
  position:fixed; top:70px; right:0;
  width:260px; max-width:80vw; height:calc(100vh - 70px);
  background:white; padding:16px; overflow-y:auto;
  border-left:1px solid #e5e5e5; box-shadow:-4px 0 12px rgba(0,0,0,0.18);
  z-index:9999;
}
.route-container.hidden{display:none!important;}

/* Dropdown blogs */
.dropdown-wrapper{position:relative; display:inline-block;}
.dropdown-wrapper .btn{width:100%;}
.dropdown-list{
  display:none; position:absolute; bottom:38px; left:50%; transform:translateX(-50%);
  background:white; border:1px solid #ddd; box-shadow:0 4px 10px rgba(0,0,0,0.2);
  padding:6px; border-radius:6px; z-index:99999; min-width:140px;
}
.dropdown-list a{display:block; padding:6px 10px; color:#333; text-decoration:none;}
.dropdown-list a:hover{background:#f0f0f0;}
.dropdown-wrapper.open .dropdown-list{display:block;}

/* Misc */
.hidden{display:none!important; visibility:hidden!important; opacity:0!important;}
#cardsContainer.hidden{display:none!important;}
#userMapsContainer{background:#fff; min-height:100vh; overflow-y:auto; display:none;}
#userMapsContainer.show{display:block;}
#regions button:first-child{display:none!important;}
#exploreMapBtn{
  border:none; padding:8px 12px; border-radius:16px;
  background: var(--glass); backdrop-filter: blur(8px);
  cursor:pointer; font-weight:500; transition: background 0.2s ease, transform 0.15s ease;
}
#exploreMapBtn:hover{background: var(--glass-strong); transform: scale(1.05);}
.intro-brand{
  display:flex; justify-content:center; align-items:center;
  margin-bottom:12px;
}
.intro-logo-img{
  width:160px; height:160px; max-width:190px;
  border-radius:50%; display:block; margin:0 auto 10px;
  object-fit:contain; background:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
}

@media (max-width: 600px){
  .brand-logo{
    height:100px; max-height:100px;
  }
  .intro-logo-img{
    width:120px; height:120px; max-width:140px;
    margin-top:16px;
  }
  .intro-overlay{
    align-items:flex-start;
    padding-top:24px;
  }
}

/* Responsive tweaks */
@media (max-width:768px){
  .icon-btn{
    min-width:70px;
    width:auto;
    height:24px;
    padding:4px 8px;
  }
  .icon-btn svg{width:16px; height:16px;}
  .caption{bottom:64px;}
  .trip-inner{flex-direction:column; align-items:center; text-align:center;}
  .trip-thumb{width:100%; height:180px;}
  .route-container{width:210px;}
}
@media (max-width:600px){
  .topbar{padding:4px 8px!important; gap:6px;}
  .brand-logo{height:70px!important;}
  .filters{gap:6px!important;}
  .regions{max-width:70vw; gap:6px;}
  .regions button,
  .type-filter select,
  .view-switch button{padding:6px 8px!important; font-size:13px!important; border-radius:14px!important;}
  .current-region,.region-reminder{font-size:13px!important;}
}