.map-root{
  background-color:#23223B;
}

.map-page-body{
  margin:0;
  background:#0a0e14;
}

.map-page{
  padding:14px clamp(12px, 3vw, 30px) 20px;
}

/* Map page uses a minimal header: logo only */
.ikash-header .menu,
.ikash-header .menu-links,
.ikash-header .header-buttons,
.ikash-header .hamburger{
  display:none !important;
}

/* Ruimte boven header = headerkleur (statusbalk / fullscreen / notch) */
.map-page-header.ikash-header::before{
  content:"";
  display:block;
  width:100%;
  height:env(safe-area-inset-top, 0px);
  background:#23223B;
}

html:fullscreen .map-page-header.ikash-header::before,
html:-webkit-full-screen .map-page-header.ikash-header::before{
  min-height:max(env(safe-area-inset-top, 0px), 32px);
}

.map-header-inner{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  align-items:center;
  gap:10px;
  width:100%;
}

.map-back-home{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:10px;
  color:#fff;
  background:rgba(255,255,255,0.12);
  text-decoration:none;
  font-size:16px;
  transition:background .15s ease;
}

.map-back-home:hover{
  background:rgba(255,255,255,0.2);
  color:#fff;
}

.map-header-inner .logo{
  flex:0 0 auto;
}

.map-header-title{
  flex:1 1 auto;
  min-width:0;
  color:#ffffff;
  font-weight:800;
  font-size:clamp(14px, 1.5vw, 20px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:center;
  opacity:0.95;
}

@media (min-width:901px){
  .map-back-home{
    display:none !important;
  }
}

.map-shell{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:14px;
  height:calc(100vh - 110px);
  min-height:560px;
}

.map-list{
  background:#fff;
  border:1px solid rgba(35,34,59,0.12);
  border-radius:14px;
  overflow:auto;
  padding:10px;
}

.map-list-item{
  border:1px solid rgba(35,34,59,0.1);
  border-radius:12px;
  padding:10px 12px;
  margin-bottom:8px;
  cursor:pointer;
  background:#fff;
}

.map-list-item:last-child{
  margin-bottom:0;
}

.map-list-item:hover{
  box-shadow:0 8px 18px rgba(0,0,0,0.08);
}

.map-list-title{
  margin:0 0 4px;
  color:#23223B;
  font-size:14px;
  font-weight:800;
}

.map-list-meta{
  margin:0;
  color:#666;
  font-size:12px;
}

.map-canvas-wrap{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(35,34,59,0.12);
  background:#f8f8fb;
}

.map-canvas{
  width:100%;
  height:100%;
}

.map-status{
  position:absolute;
  top:12px;
  left:12px;
  z-index:3;
  background:rgba(35,34,59,0.92);
  color:#fff;
  padding:10px 12px;
  border-radius:10px;
  font-size:12px;
  max-width:min(92%, 520px);
}

/* Geen balk/achtergrond als er geen melding is (o.a. na succesvol laden) */
.map-status:empty{
  display:none;
  padding:0;
  background:transparent;
}

/* Google Maps InfoWindow in iKash style */
.gm-style .gm-style-iw-c{
  border-radius:14px !important;
  padding:0 !important;
  box-shadow:0 10px 28px rgba(0,0,0,0.2) !important;
}

.gm-style .gm-style-iw-d{
  overflow:hidden !important;
  padding:0 !important;
}

.gm-style .gm-style-iw-ch{
  display:none !important;
}

.gm-style .gm-ui-hover-effect{
  display:none !important;
}

.gm-style .gm-ui-hover-effect > span{
  display:none !important;
}

.ikash-map-info{
  min-width:220px;
  max-width:258px;
  min-height:320px;
  font-family:Arial,sans-serif;
  padding:0 10px 10px;
  margin:0;
  background:linear-gradient(to bottom, #ffffff, #f8f8fc);
}

.ikash-map-info-banner{
  margin:0 -10px 10px;
  padding:4px 9px;
  background:#23223B;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  border-radius:12px 12px 0 0;
}

.ikash-map-info-logo{
  height:15px;
  width:auto;
  display:block;
  flex-shrink:0;
}

.ikash-map-info-banner-actions{
  display:flex;
  align-items:center;
  gap:6px;
  flex-shrink:0;
  margin-left:auto;
}

/* Zelfde icoon als op deal-tiles (fa-share-nodes) */
.ikash-map-info-share-icon{
  width:22px;
  height:22px;
  padding:0;
  border-radius:7px;
  border:1px solid rgba(147,197,253,0.45);
  background:rgba(255,255,255,0.1);
  color:#93c5fd;
  font-size:11px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}

.ikash-map-info-share-icon:hover{
  background:rgba(255,255,255,0.18);
  color:#bfdbfe;
  border-color:rgba(191,219,254,0.55);
}

.ikash-map-info-close{
  width:22px;
  height:22px;
  border-radius:7px;
  border:1px solid rgba(255,255,255,0.25);
  background:rgba(255,255,255,0.12);
  color:#fff;
  font-size:14px;
  line-height:1;
  cursor:pointer;
}

.ikash-map-info-image{
  width:100%;
  height:136px;
  object-fit:cover;
  border-radius:10px;
  margin:0 0 8px;
  display:block;
}

.ikash-map-info-title{
  display:block;
  margin-bottom:5px;
  color:#23223B;
  font-size:16px;
  font-weight:800;
}

.ikash-map-info-merchant{
  font-size:13px;
  color:#3b3b3b;
  margin-bottom:4px;
}

.ikash-map-info-address{
  font-size:12px;
  color:#5a5a5a;
}

.ikash-map-info-price{
  margin-top:8px;
  color:#16a34a;
  font-size:16px;
  font-weight:800;
}

.ikash-map-info-prices{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:flex-start;
  gap:10px 14px;
}

.ikash-map-info-prices-single .ikash-map-info-price-new{
  margin:0;
}

.ikash-map-info-price-old{
  font-size:14px;
  font-weight:600;
  color:#888;
  text-decoration:line-through;
}

.ikash-map-info-price-new{
  font-size:17px;
  font-weight:800;
  color:#16a34a;
}

.ikash-map-info-btn{
  display:block;
  width:100%;
  margin-top:10px;
  padding:9px 12px;
  border-radius:10px;
  border:none;
  background:var(--ik-primary-grad, linear-gradient(180deg, #93a0ff 0%, #6366f1 42%, #4f46e5 78%, #3730a3 100%));
  box-shadow:var(--ik-primary-shadow, 0 6px 20px rgba(67,56,202,0.32), 0 1px 0 rgba(255,255,255,0.15) inset);
  color:#fff;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  text-align:center;
  text-decoration:none;
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
}

.ikash-map-info-btn:hover{
  filter:brightness(1.02);
  box-shadow:var(--ik-primary-shadow-hover, 0 10px 26px rgba(67,56,202,0.38), 0 1px 0 rgba(255,255,255,0.2) inset);
}

.ikash-map-info-btn:active{
  transform:translateY(1px);
  box-shadow:var(--ik-primary-shadow-active, 0 4px 14px rgba(67,56,202,0.28), 0 1px 0 rgba(255,255,255,0.12) inset);
}

.ikash-map-info-btn-secondary{
  background:linear-gradient(180deg, #86efac 0%, #22c55e 52%, #15803d 100%);
  color:#ffffff;
  border:1px solid rgba(22,163,74,0.8);
  box-shadow:0 10px 24px rgba(22,163,74,0.28), 0 1px 0 rgba(255,255,255,0.2) inset;
}

.ikash-map-info-btn-secondary:hover{
  filter:brightness(1.02);
  box-shadow:0 14px 28px rgba(22,163,74,0.34), 0 1px 0 rgba(255,255,255,0.24) inset;
}

.ikash-map-info-btn-secondary:active{
  transform:translateY(1px);
  box-shadow:0 8px 18px rgba(22,163,74,0.24), 0 1px 0 rgba(255,255,255,0.16) inset;
}