/* ==========================
   Museum Map Styles
========================== */

/* Leaflet */
.leaflet-control-layers-toggle{display:none}

/* Floating map button */


#museum-map-modal{
position:fixed;
inset:0;
z-index:10000;
}


/* Focus styles */
button:focus,a:focus,#floating-map-button:focus,.museum-map-modal__close:focus,.hotel-sticky__btn:focus{outline:2px solid #06c;outline-offset:2px;box-shadow:0 0 0 3px #0066cc4d}

/* ==========================
   Map Modal
========================== */

#museum-map-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.85);z-index:2147483647;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s,visibility .3s}
#museum-map-modal.show{opacity:1;visibility:visible;pointer-events:auto}

body.modal-open{overflow:hidden}

.museum-map-modal__content{position:relative;display:flex;flex-direction:column;width:100%;max-width:100vw;height:100vh;background:#f5f0e6 url(/wp-content/themes/museum-lite/assets/images/paper-texture.webp) repeat;overflow-x:hidden}

.museum-map-modal__title{margin:0;padding:10px 0;font-family:"Work Sans",serif;font-size:1.6rem;font-weight:700;text-align:center;color:#fff;line-height:1.3;text-shadow:0 2px 4px #00000026}

.museum-map-modal__close{position:absolute;top:12px;right:12px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:#f5f0e6;border:1px solid #d8c9b6;border-radius:50%;color:#555;font-size:20px;font-weight:700;cursor:pointer;box-shadow:0 2px 6px #0003;transition:.2s;z-index:2147483648}
.museum-map-modal__close:hover{background:#fff3f3;border-color:#c66;color:#a00;transform:scale(1.1)}

#museum-map-modal-container{flex:1;width:100%;position:relative;z-index:9999}

/* ==========================
   Map Bottom Bar
========================== */

.map-bottom-bar{display:flex;gap:8px;background:#fff;padding:8px;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,.25)}

.map-show-btn{padding:10px 14px;background:#06c;color:#fff;border:none;border-radius:6px;font:600 14px "Work Sans",sans-serif;cursor:pointer;box-shadow:0 3px 6px #0003;transition:.15s}
.map-show-btn:hover{background:#004999;transform:translateY(-1px)}

/* Category menu */
.map-categories-menu{position:fixed;display:none;flex-direction:column;gap:6px;background:#fff;border:1px solid #ccc;border-radius:6px;padding:8px 10px;min-width:180px;box-shadow:0 4px 10px #0006;z-index:2147483647}
.map-categories-menu.open{display:flex}

.map-categories-menu button{background:#f9f9f9;color:#333;border:none;padding:6px 10px;border-radius:4px;text-align:left;font-size:14px;cursor:pointer}
.map-categories-menu button:hover{background:#eee}
.map-categories-menu button.active{background:#06c;color:#fff}

/* ==========================
   Map Search
========================== */

.map-search-wrap{position:relative}

.map-search-inner{display:flex;align-items:center;position:relative}

.map-search-input{height:34px;padding:0 30px 0 10px;font-size:14px;border:1px solid #bbb;border-radius:6px;outline:none;box-shadow:inset 0 1px 2px #0001}
.map-search-input:focus{border-color:#06c;box-shadow:0 0 0 3px #0066cc26}

.map-search-clear{position:absolute;right:8px;background:none;border:none;font-size:14px;color:#666;cursor:pointer}
.map-search-clear:hover{color:#000}

.map-search-results{position:absolute;bottom:45px;left:0;background:#fff;width:260px;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,.25);display:none;max-height:300px;overflow:auto}
.map-search-results.show{display:block}

.map-result{display:flex;gap:8px;padding:8px;text-decoration:none;color:#222}
.map-result:hover{background:#f3f3f3}

.map-result img{width:40px;height:40px;object-fit:cover;border-radius:4px}

/* ==========================
   Popup Cards
========================== */

.leaflet-container .leaflet-popup-close-button{display:none}

.leaflet-container .leaflet-popup-content-wrapper{
max-width:340px!important;
border-radius:10px;
background:#fafafa;
box-shadow:
0 10px 30px rgba(0,0,0,.25),
0 4px 10px rgba(0,0,0,.15);
padding:10px 12px;
}

.mappopup .hotel-button{
transition:background .15s ease, transform .1s ease;
}

.mappopup .hotel-button:hover{
background:#006fa8;
transform:translateY(-1px);
}

.leaflet-container .leaflet-popup-tip{
background:#fafafa;
box-shadow:0 3px 8px rgba(0,0,0,.18);
}

.leaflet-popup{
margin-bottom:8px;
}

.leaflet-fade-anim .leaflet-popup{
transition:opacity .15s ease;
}

.leaflet-container .leaflet-popup-content-wrapper{
border-radius:12px;
overflow:hidden;
}

.leaflet-container .leaflet-popup-content{width:auto;margin:8px}




.mappopup-header{display:flex;align-items:flex-start;gap:8px;margin-bottom:6px;padding-right:34px;position:relative}
.mappopup-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(to right,transparent,#00000026,transparent)}

.mappopup-header h3{margin:0;font-size:18px;font-weight:600;line-height:1.25;flex:1}

.mappopup p{font-size:14px;line-height:1.4;margin:6px 0 8px;color:#444}

.mappopup-img img{float:right;width:120px;height:80px;object-fit:cover;margin:4px 0 8px 12px;border-radius:6px;border:1px solid rgba(0,0,0,.12);box-shadow:0 2px 6px rgba(0,0,0,.18)}

.mappopup .hotel-button{display:inline-block;margin-top:6px;padding:6px 12px;background:#0089CE;color:#fff;text-decoration:none;border-radius:4px;font-size:.9em}
.mappopup .hotel-button:hover{background:#006fa8}

/* Popup close button */
.mappopup-close{position:absolute;top:0px;right:4px;width:26px;height:26px;background:#333;color:#fff;font-size:16px;border-radius:4px;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer}
.mappopup-close:hover{background:#000}

/* ==========================
   Sticky Hotel Button
========================== */

.hotel-sticky{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:2147483646;display:flex;justify-content:center;width:100%;pointer-events:none}
.hotel-sticky__btn{display:none;background:#e63946;color:#fff;font-size:16px;font-weight:600;padding:12px 28px;border-radius:8px;box-shadow:0 4px 12px #00000040;text-decoration:none;pointer-events:auto}
.hotel-sticky__btn:hover{background:#c9182d}

/* ==========================
   Responsive
========================== */

@media(max-width:767px){

.leaflet-container .leaflet-popup-content-wrapper{
max-width:90vw!important;
padding:8px 10px!important;
border-radius:10px!important;
box-sizing:border-box;
}

.leaflet-container .leaflet-popup-content{
margin:8px!important;
width:240px!important;
max-width:100%!important;
box-sizing:border-box;
}

.leaflet-container .leaflet-popup-tip{
display:none!important;
}


.leaflet-popup{
animation: popupFade .22s ease;
transform-origin: bottom center;
}

@keyframes popupFade{
0%{
opacity:0;
transform:translateY(8px) scale(.97);
}

100%{
opacity:1;
transform:translateY(0) scale(1);
}
}


.mappopup{
max-width:100%;
overflow:hidden;
box-sizing:border-box;
}

.mappopup-img img{
float:none;
width:100%;
height:auto;
display:block;
margin:6px 0 8px;
max-width:100%;
}

.mappopup p{
clear:both;
word-break:break-word;
}

.mappopup-header h3{
font-size:16px;
line-height:1.25;
}

}

.mappopup.hotel-popup .mappopup-img img{
float:none;
width:100%;
height:auto;
margin:6px 0 10px;
display:block;
}

.mappopup.hotel-popup{
text-align:center;
}

.mappopup.hotel-popup .hotel-button{
display:inline-block;
margin-top:4px;
}



.map-cat-btn,
.map-cat-menu{
display:none!important;
}




#floating-map-button{
position:fixed;
left:50%;
bottom:26px;
transform:translateX(-50%);

z-index:2147483648;

display:flex;
align-items:center;
justify-content:center;

min-width:220px;
height:46px;
padding:0 20px;

font-size:15px;
font-weight:600;
font-family:"Work Sans",sans-serif;

color:#fff;

/* slight transparency */
background:rgba(0,102,204,0.92);

border:none;

/* less rounded */
border-radius:12px;

cursor:pointer;

box-shadow:
0 8px 22px rgba(0,0,0,.35),
0 2px 6px rgba(0,0,0,.25);

backdrop-filter:blur(6px);

transition:
transform .15s ease,
box-shadow .15s ease,
background .2s ease;
}

/* label */

#floating-map-button::before{
content:"🗺️ Map of all museums";
color:#fff;
}

/* single attraction */

#floating-map-button.map-single::before{
content:"🗺️ Map of this attraction";
}

/* open state */

#floating-map-button.map-open{
background:rgba(60,60,60,.9);
}

#floating-map-button.map-open::before{
content:"✕ Close map";
}

/* hover */

#floating-map-button:hover{
transform:translateX(-50%) translateY(-2px);
box-shadow:
0 12px 30px rgba(0,0,0,.35),
0 4px 10px rgba(0,0,0,.25);
}

/* mobile */

@media(max-width:640px){

#floating-map-button.map-collapsed{
left:12px;
right:12px;
transform:none;
width:46px;
min-width:46px;
}

}


#floating-map-button.map-collapsed{
min-width:46px;
width:46px;
padding:0;
border-radius:12px;
}

/* icon only */

#floating-map-button.map-collapsed::before{
content:"🗺️";
}

#floating-map-button{
transition:
transform .15s ease,
box-shadow .15s ease,
background .2s ease,
width .2s ease,
min-width .2s ease,
padding .2s ease;
}

#floating-map-button.map-open{
bottom:90px;
}

#floating-map-button{
transition:
transform .15s ease,
box-shadow .15s ease,
background .2s ease,
bottom .2s ease,
width .2s ease,
min-width .2s ease,
padding .2s ease;
}

.map-bottom-bar input,
.map-bottom-bar button{
height:36px;
box-sizing:border-box;
font-size:14px;
}

.map-bottom-bar button{
padding:0 12px;
display:flex;
align-items:center;
justify-content:center;
}

.map-search-input{
height:36px;
line-height:36px;
}

.map-bottom-bar{
display:flex;
align-items:center;
gap:8px;
}

@media (max-width:640px){

.map-search-input{
min-width:180px;
}

}

.mappopup-header h3{
margin:0;
font-size:18px;
line-height:1.25;
flex:1;
font-weight:400;
}

.mappopup-header .popup-label{
font-weight:600;
}

.mappopup-header .popup-title{
font-weight:400;
}

.mappopup-header h3{
margin:0;
font-size:18px;
line-height:1.25;
flex:1;
font-weight:400;
}

.popup-main{
font-weight:600;
}

.popup-sub{
font-weight:400;
color:#444;
}

.popup-sub{
font-weight:400;
color:#555;
}

.popup-sub{
margin-left:2px;
}

.mappopup-header h3{
line-height:1.2;
}

.mappopup-close{
background:#444;
border-radius:6px;
}



.hotel-meta{
font-size:13px;
color:#555;
margin:4px 0 8px;
display:flex;
gap:8px;
align-items:center;
}

.hotel-stars{
color:#d8a800;
letter-spacing:1px;
font-size:14px;
}

.hotel-rating{
font-weight:600;
color:#333;
}

.hotel-reviews{
color:#777;
}

.hotel-location{
font-size:13px;
color:#666;
margin-top:6px;
}

.hotel-meta{
display:flex;
align-items:center;
gap:8px;
margin-bottom:6px;
flex-wrap:wrap;
}

.hotel-stars{
color:#f5a623;
font-size:14px;
}

.hotel-meta{
display:flex;
align-items:center;
gap:8px;
margin-bottom:6px;
flex-wrap:wrap;
}

.hotel-stars{
color:#f5a623;
font-size:14px;
margin-right:2px;
}

.hotel-rating-badge{
color:#fff;
font-weight:700;
font-size:13px;
padding:2px 6px;
border-radius:4px;
line-height:1;
}

.rating-superb{
background:#1a9f29;
}

.rating-good{
background:#1a73e8;
}

.rating-ok{
background:#f29900;
}

.rating-low{
background:#777;
}

.hotel-reviews{
font-size:12px;
color:#666;
}


.mappopup-img{
position:relative;
}

.rating-chip{
position:absolute;
top:8px;
right:8px;
color:white;
font-weight:700;
font-size:13px;
padding:4px 8px;
border-radius:6px;
box-shadow:0 2px 6px rgba(0,0,0,.25);
z-index:5;
}

.rating-superb{
background:#1a9f29;
}

.rating-good{
background:#1a73e8;
}

.rating-ok{
background:#f29900;
}

.rating-low{
background:#777;
}


.hotel-marker-wrap{
position:relative;
display:flex;
flex-direction:column;
align-items:center;
}

.hotel-marker-rating{
color:white;
font-weight:700;
font-size:11px;
padding:2px 6px;
border-radius:6px;
box-shadow:0 2px 4px rgba(0,0,0,.3);
margin-bottom:2px;
}

.hotel-marker-pin{
width:10px;
height:10px;
background:#333;
border-radius:50%;
}

.hotel-marker-rating{
color:white;
font-weight:700;
font-size:11px;
padding:2px 6px;
border-radius:6px;
box-shadow:0 2px 4px rgba(0,0,0,.3);
margin-bottom:2px;
border:2px solid white;
}

.hotel-marker:hover .hotel-marker-rating{
transform:scale(1.15);
}

.hotel-marker-rating{
transition:transform .15s ease;
}

.hotel-marker-wrap{
display:flex;
flex-direction:column;
align-items:center;
position:relative;
}

.hotel-marker-rating{
color:white;
font-weight:700;
font-size:11px;
padding:3px 6px;
border-radius:6px;
border:2px solid white;
box-shadow:0 2px 4px rgba(0,0,0,.35);
}

.hotel-marker-pin{
width:8px;
height:8px;
background:#333;
border-radius:50%;
margin-top:2px;
}

.hotel-marker-rating{
transition:transform .15s ease;
}

.hotel-marker:hover .hotel-marker-rating{
transform:scale(1.15);
}

.hotel-marker-rating{
box-shadow:
0 2px 4px rgba(0,0,0,.35),
0 0 0 2px rgba(255,255,255,.9);
}

.hotel-marker-rating{
transition:transform .15s ease, box-shadow .15s ease;
}

.hotel-marker.lifted .hotel-marker-rating{
transform:scale(1.2);
box-shadow:
0 6px 12px rgba(0,0,0,.35),
0 0 0 2px rgba(255,255,255,.9);
}

/* category badge */

.poi-badge{
display:inline-block;
background:#e8eef5;
color:#3c5872;
font-size:11px;
font-weight:600;
padding:2px 6px;
border-radius:4px;
margin-bottom:4px;
}

/* POI image style */

.poi-img img{
border-radius:6px;
box-shadow:0 2px 6px rgba(0,0,0,.15);
}

/* POI location */

.poi-location{
font-size:12px;
color:#666;
margin-top:6px;
}

/* title wrapper */

.popup-title h3{
margin:0;
font-size:16px;
line-height:1.3;
}

.poi-badge{
display:inline-flex;
align-items:center;
gap:4px;
background:#eef3f8;
color:#4b657e;
font-size:11px;
font-weight:600;
padding:3px 7px;
border-radius:4px;
margin-bottom:4px;
}

.poi-img img{
border-radius:6px;
box-shadow:0 2px 6px rgba(0,0,0,.15);
}


.poi-marker-wrap{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.poi-marker-icon{
  width:30px;
  height:30px;
  border-radius:50%;
  background:white;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}

.poi-marker-pin{
  width:6px;
  height:10px;
  background:#333;
  margin-top:-2px;
  border-radius:2px;
}


.poi-marker-wrap{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.poi-marker-icon{
  width:30px;
  height:30px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  color:white;
  box-shadow:0 3px 8px rgba(0,0,0,.25);
}

.poi-marker-pin{
  width:6px;
  height:10px;
  margin-top:-2px;
  border-radius:2px;
}

.hotel-marker.lifted,
.poi-marker.lifted .poi-marker-icon{
  transform:scale(1.15);
  transition:.15s;
}

.custom-cluster{
  background:transparent;
}

.map-cluster{
  background:white;
  border-radius:50%;
  width:48px;
  height:48px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  font-size:13px;
  font-weight:600;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}

.map-cluster span{
  line-height:1.1;
}
.map-cluster{
  transition:transform .15s ease;
}

.map-cluster:hover{
  transform:scale(1.1);
}

.custom-cluster{
  background:transparent;
}

.map-cluster{
  background:white;
  border-radius:50%;
  width:48px;
  height:48px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  font-size:13px;
  font-weight:600;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}

.map-cluster span{
  line-height:1.1;
}

.map-cluster span{
  display:block;
}

.map-cluster{
  background:white;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  font-size:13px;
  font-weight:600;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
  transition:transform .15s ease;
}

.map-cluster:hover{
  transform:scale(1.1);
}

.map-cluster span{
  display:block;
  line-height:1.1;
}

.map-viewport-box{
  position:absolute;
  top:15px;
  left:50%;
  transform:translateX(-50%);
  background:white;
  padding:8px 12px;
  border-radius:20px;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
  display:flex;
  gap:8px;
  align-items:center;
  font-size:13px;
  opacity:0;
  pointer-events:none;
  transition:.2s;
}

.map-viewport-box.show{
  opacity:1;
  pointer-events:auto;
}

.map-viewport-btn{
  border:none;
  background:#1a73e8;
  color:white;
  padding:4px 10px;
  border-radius:12px;
  cursor:pointer;
}

.popup-nearby{
  margin-top:10px;
  padding-top:8px;
  border-top:1px solid #eee;
}

.popup-nearby-title{
  font-weight:600;
  font-size:13px;
  margin-bottom:6px;
}

.popup-nearby-item{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  margin:2px 0;
}

.nearby-distance{
  margin-left:auto;
  opacity:.6;
}


.popup-nearby{
  margin-top:10px;
  border-top:1px solid #eee;
  padding-top:8px;
}

.popup-nearby-title{
  font-size:13px;
  font-weight:600;
  margin-bottom:6px;
  color:#666;
}

.popup-nearby-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 4px;
  cursor:pointer;
  border-radius:6px;
  transition:background .15s;
}

.popup-nearby-item:hover{
  background:#f6f6f6;
}

.nearby-thumb{
  width:34px;
  height:24px;
  object-fit:cover;
  border-radius:4px;
}

.nearby-icon{
  font-size:14px;
  width:18px;
}

.nearby-name{
  font-size:13px;
}

.nearby-name{
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.leaflet-marker-icon{
  transition: transform .15s ease;
}

.leaflet-marker-icon.lifted{
  transform: translateY(-6px);
}
.custom-cluster{
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
  font-weight:600;
}
.map-cluster{
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:#fff;
  font-weight:600;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.map-cluster span{
  margin:0 2px;
}

.map-cluster{
  border-radius:50%;
  color:white;
  font-weight:600;
  backdrop-filter: blur(3px);
  border:2px solid rgba(255,255,255,0.7);
  box-shadow:0 3px 10px rgba(0,0,0,0.25);
}

.map-cluster{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:white;
  font-weight:600;
  font-size:12px;

  border:2px solid rgba(255,255,255,.8);
  box-shadow:0 3px 10px rgba(0,0,0,.25);
  backdrop-filter:blur(3px);
}

.cluster-row{
  display:flex;
  align-items:center;
  gap:4px;
  line-height:1;
}

.cluster-icon{
  font-size:14px;
}

.cluster-count{
  font-weight:700;
}

.custom-cluster:hover .map-cluster{
  transform:scale(1.1);
}

.map-cluster{
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;

  border:2px solid white;
  box-shadow:0 3px 10px rgba(0,0,0,.3);

  color:white;
  font-weight:700;
  font-size:14px;
}

.cluster-total{
  background:rgba(0,0,0,.55);
  border-radius:20px;
  padding:2px 6px;
}

.map-cluster{
  border:3px solid white;
}

.custom-cluster .map-cluster{
  transition:transform .15s ease;
}

.custom-cluster:hover .map-cluster{
  transform:scale(1.12);
}

.map-cluster{
  box-shadow:
    0 3px 10px rgba(0,0,0,.25),
    0 0 0 6px rgba(255,255,255,.15);
}

.map-cluster{
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;

  border:3px solid white;
  box-shadow:0 3px 10px rgba(0,0,0,.25);

  color:white;
  font-weight:700;
}

.cluster-total{
  background:rgba(0,0,0,.55);
  border-radius:20px;
  padding:2px 6px;
  font-size:13px;
}

.map-cluster{
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;

  border:3px solid white;
  box-shadow:0 3px 10px rgba(0,0,0,.25);

  color:white;
  font-weight:700;
}

.cluster-total{
  background:rgba(0,0,0,.55);
  padding:2px 6px;
  border-radius:20px;
  font-size:13px;
}

.map-cluster{
  backdrop-filter: blur(2px);
}

.map-cluster{
  border-radius:50%;
  border:3px solid white;
  box-shadow:0 3px 10px rgba(0,0,0,.25);

  display:flex;
  align-items:center;
  justify-content:center;

  font-weight:700;
  color:white;
}

.cluster-total{
  background:rgba(0,0,0,.55);
  padding:2px 6px;
  border-radius:12px;
  font-size:13px;
}

.map-cluster{
  border-radius:50%;
  border:3px solid white;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.leaflet-marker-icon,
.leaflet-marker-shadow{
  transition: transform .25s ease, opacity .25s ease;
}
.map-cluster{
  transition: transform .2s ease;
}

.map-cluster:hover{
  transform: scale(1.08);
}
.map-cluster{
  background-blend-mode:overlay;
}
.map-cluster::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.25), transparent 60%);
}