.savesta-verkooppunten, .savesta-verkooppunten * { box-sizing: border-box; margin: 0; padding: 0; }
.savesta-verkooppunten {
font-family: var(--savesta-font-family, 'Montserrat'), sans-serif;
font-size: var(--savesta-font-size, 14px);
background: var(--savesta-outer-bg, #1e2530);
color: var(--savesta-control-text, #fff);
padding: 0;
} .savesta-verkooppunten .controls {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 14px;
}
.savesta-verkooppunten .control-group {
display: flex;
align-items: center;
gap: 8px;
flex: 1 1 200px;
min-width: 0;
}
.savesta-verkooppunten label {
font-size: 13px;
font-weight: 600;
color: var(--savesta-control-label, #aabbcc);
white-space: nowrap;
flex-shrink: 0;
}
.savesta-verkooppunten select, .savesta-verkooppunten input[type="text"]  {
font-family: var(--savesta-font-family, 'Montserrat'), sans-serif;
font-size: var(--savesta-font-size, 14px);
padding: 10px 12px;
min-height: 44px;
background: var(--savesta-control-bg, #28282b);
color: var(--savesta-control-text, #fff);
border: 1px solid var(--savesta-control-border, #3a4a5a);
border-radius: 8px;
outline: none;
flex: 1 1 0;
min-width: 0;
width: 100%;
-webkit-appearance: none;
appearance: none;
transition: border-color 0.2s, box-shadow 0.2s;
}
.savesta-verkooppunten select:hover, .savesta-verkooppunten input[type="text"]:hover { border-color: var(--savesta-button-primary, #FF4500); color: var(--savesta-control-text, #fff); }
.savesta-verkooppunten select:focus, .savesta-verkooppunten input[type="text"]:focus {
border-color: var(--savesta-button-primary, #FF4500);
box-shadow: 0 0 0 2px rgba(255,69,0,0.2);
}
.savesta-verkooppunten select option { background: var(--savesta-control-bg, #28282b); color: var(--savesta-control-text, #fff); }
.savesta-verkooppunten .btn-group {
display: flex;
gap: 8px;
flex: 0 0 auto;
}
.savesta-verkooppunten button {
font-family: var(--savesta-font-family, 'Montserrat'), sans-serif;
font-size: var(--savesta-font-size, 14px);
font-weight: 600;
padding: 10px 18px;
min-height: 44px;
border: none;
border-radius: 8px;
cursor: pointer;
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
transition: background 0.2s, transform 0.1s;
}
.savesta-verkooppunten button:active { transform: scale(0.97); }
.savesta-verkooppunten .btn-search { background: var(--savesta-button-primary, #FF4500); color: #fff; }
.savesta-verkooppunten .btn-search:hover { background: var(--savesta-button-primary-hover, #e03d00); }
.savesta-verkooppunten .btn-reset { background: var(--savesta-button-secondary, #28282b); color: var(--savesta-button-secondary-text, #aaa); border: 1px solid var(--savesta-control-border, #3a4a5a); }
.savesta-verkooppunten .btn-reset:hover { background: var(--savesta-button-secondary-hover, #2f3d50); color: var(--savesta-control-text, #fff); } .savesta-verkooppunten .map-wrapper {
position: relative;
width: 100%;
max-width: var(--savesta-map-max-width, 640px);
margin: 0 auto;
border-radius: var(--savesta-map-radius, 10px);
background: var(--savesta-map-bg, #28282b);
overflow: hidden;
z-index: 300;
--pin-size: 22px;
} .savesta-verkooppunten #nl-map {
position: relative;
z-index: 1;
width: 100%;
height: auto;
display: block;
touch-action: manipulation;
}
.savesta-verkooppunten #nl-map path {
fill: var(--savesta-province-fill, #28282b);
stroke: var(--savesta-province-border, #FF4500);
stroke-width: 1.5;
cursor: pointer;
transition: fill 0.22s ease;
} @media (hover: hover) and (pointer: fine) {
.savesta-verkooppunten #nl-map path:hover { fill: var(--savesta-province-hover, #4a2800); }
}
.savesta-verkooppunten #nl-map path.active {
fill: var(--savesta-province-active, #5a3000);
stroke-width: 2.2;
} .savesta-verkooppunten .markers-overlay {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
overflow: visible;
}
.savesta-verkooppunten .fire-pin {
position: absolute;
z-index: 10;
transform: translate(-50%, -100%);
font-size: var(--savesta-icon-size, var(--pin-size, 22px));
color: var(--savesta-icon-color, #FF4500);
filter: var(--savesta-icon-shadow, drop-shadow(0 2px 5px rgba(255,69,0,0.65)));
cursor: pointer;
pointer-events: all; padding: 8px;
margin: -8px;
z-index: 10;
-webkit-tap-highlight-color: transparent;
}
@media (hover: hover) and (pointer: fine) {
.savesta-verkooppunten .fire-pin:hover {
color: var(--savesta-icon-hover, #ff6400);
font-size: var(--savesta-icon-hover-size, 26px);
filter: var(--savesta-icon-shadow, drop-shadow(0 3px 10px rgba(255,100,0,0.9)));
}
}
.savesta-verkooppunten .fire-pin.icon-animation-pop:hover { transform: translate(-50%, -100%) scale(1.08); }
.savesta-verkooppunten .fire-pin.icon-animation-pulse { animation: savestaPinPulse 1.8s ease-in-out infinite; }
@keyframes savestaPinPulse { 0%,100% { transform: translate(-50%, -100%) scale(1); } 50% { transform: translate(-50%, -100%) scale(1.08); } }
.savesta-verkooppunten .fire-pin.active-pin {
color: var(--savesta-icon-active, #ff7800);
filter: var(--savesta-icon-shadow, drop-shadow(0 3px 14px rgba(255,120,0,1)));
animation: pinPop 0.28s ease-out;
}
@keyframes pinPop {
0%   { transform: translate(-50%, -100%) scale(1.45); }
100% { transform: translate(-50%, -100%) scale(1); }
} .savesta-verkooppunten .tooltip {
position: absolute;
z-index: 20;
background: var(--savesta-tooltip-bg, #1a2230);
color: var(--savesta-tooltip-text, #fff);
border: 1px solid var(--savesta-tooltip-border, #FF4500);
border-radius: 10px;
padding: 12px 16px;
font-size: 13px;
font-family: var(--savesta-font-family, 'Montserrat'), sans-serif;
line-height: 1.6;
pointer-events: none;
width: 210px;
z-index: 200;
box-shadow: 0 6px 24px rgba(0,0,0,0.65);
display: none;
}
.savesta-verkooppunten .tooltip.locked {
pointer-events: all;
box-shadow: 0 6px 28px rgba(255,69,0,0.25);
}
.savesta-verkooppunten .tooltip b { color: var(--savesta-tooltip-title, #FF6B2B); display: block; font-size: 13px; margin-bottom: 4px; }
.savesta-verkooppunten .tooltip a { color: var(--savesta-tooltip-link, #FF8C55); text-decoration: none; font-weight: 600; }
.savesta-verkooppunten .tooltip a:hover { color: var(--savesta-tooltip-link-hover, #FF4500); text-decoration: underline; } @media (max-width: 600px) {
.savesta-verkooppunten .tooltip,
.savesta-verkooppunten .tooltip.locked {
position: fixed;
left: 12px !important;
right: 12px !important;
bottom: env(safe-area-inset-bottom, 16px) !important;
bottom: calc(env(safe-area-inset-bottom, 0px) + 16px) !important;
top: auto !important;
width: auto !important;
border-radius: 14px;
padding: 18px 20px;
font-size: 14px;
pointer-events: all;
z-index: 1000;
box-shadow: 0 -4px 32px rgba(0,0,0,0.75);
}
.savesta-verkooppunten .tooltip b { font-size: 15px; margin-bottom: 6px; }
} .savesta-verkooppunten .province-tooltip {
position: fixed;
background: rgba(20,28,40,0.95);
color: #ccc;
border: 1px solid var(--savesta-control-border, #3a4a5a);
border-radius: 6px;
padding: 5px 11px;
font-size: 12px;
font-family: var(--savesta-font-family, 'Montserrat'), sans-serif;
pointer-events: none;
z-index: 500;
display: none;
white-space: nowrap;
}
@media (hover: none) {
.savesta-verkooppunten .province-tooltip { display: none !important; }
}  @media (max-width: 680px) {
.savesta-verkooppunten .control-group { flex: 1 1 100%; }
.savesta-verkooppunten .btn-group { flex: 1 1 100%; }
.savesta-verkooppunten .btn-group button { flex: 1; }
} @media (max-width: 480px) {
.savesta-verkooppunten { padding: 0; } .savesta-verkooppunten select, .savesta-verkooppunten input[type="text"] { font-size: 16px; }
} .savesta-verkooppunten .savesta-overview-layout { display: block; }
.savesta-verkooppunten .savesta-map-column { min-width: 0; }
.savesta-verkooppunten .map-wrapper { max-width: var(--savesta-map-max-width, 640px); }
.savesta-verkooppunten .savesta-overview-layout.has-points-list {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(270px, .95fr);
gap: 22px;
align-items: start;
}
.savesta-verkooppunten .has-points-list .map-wrapper { max-width: 100%; }
.savesta-verkooppunten .savesta-list-column { min-width: 0; }
.savesta-points-list, .savesta-points-list * { box-sizing: border-box; }
.savesta-points-list {
color: #252b32;
font-family: var(--savesta-font-family, Montserrat), sans-serif;
font-size: var(--savesta-font-size, 14px);
line-height: 1.5;
background: #f7f8fa;
border: 1px solid #e3e6e9;
border-radius: 12px;
padding: 18px;
width: 100%;
}
.savesta-points-list.is-embedded { max-height: 680px; overflow: auto; }
.savesta-points-list .savesta-points-list-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.savesta-verkooppunten .savesta-points-list h2, .savesta-verkooppunten-lijst .savesta-points-list h2 { margin:0 0 3px; padding:0; font-family:var(--savesta-font-family, Montserrat), sans-serif; font-size:var(--savesta-heading-size, 20px); line-height:1.25; color:var(--savesta-heading-color, #242a31); font-weight:var(--savesta-heading-weight, 700); }
.savesta-points-list .savesta-points-subtitle { margin:0 0 3px; color:#505a64; font-family:var(--savesta-font-family, Montserrat), sans-serif; font-size:var(--savesta-font-size, 14px); line-height:1.45; }
.savesta-points-list .savesta-points-count { margin:0; color:#69727c; font-family:var(--savesta-font-family, Montserrat), sans-serif; font-size:12px; }
.savesta-points-list-filters { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; width:100%; }
.savesta-points-list .savesta-list-search, .savesta-points-list .savesta-list-province {
width:100%; min-width:0; min-height:42px; border:1px solid #d6dbe0; border-radius:7px; padding:9px 11px;
background:#fff; color:#252b32; font:inherit; font-size:14px; box-shadow:none;
}
.savesta-points-list .savesta-list-search:focus, .savesta-points-list .savesta-list-province:focus { outline:2px solid rgba(255,69,0,.22); border-color:#ff4500; }
.savesta-points-list .savesta-points-cards { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
.savesta-points-list .savesta-point-card { background:#fff; border:1px solid #e0e4e8; border-radius:9px; overflow:hidden; transition:border-color .18s, box-shadow .18s; }
.savesta-points-list .savesta-point-card.is-selected { border-color:#ff4500; box-shadow:0 0 0 2px rgba(255,69,0,.12); }
.savesta-points-list .savesta-point-select { display:flex; align-items:flex-start; gap:11px; width:100%; min-height:0; padding:13px; border:0; border-radius:0; background:transparent; color:inherit; text-align:left; white-space:normal; }
.savesta-points-list .savesta-point-select:hover { background:#fff8f5; }
.savesta-points-list .savesta-point-card-icon { flex:0 0 34px; width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#fff0e9; color:var(--savesta-icon-color,#ff4500); font-size:18px; }
.savesta-points-list .savesta-point-card-main { flex:1 1 auto; min-width:0; display:block; }
.savesta-points-list .savesta-point-name { display:block; margin:0 0 4px; color:#242a31; font-size:14px; line-height:1.35; font-weight:700; }
.savesta-points-list .savesta-point-address { display:block; color:#505a64; font-size:13px; line-height:1.5; font-weight:400; }
.savesta-points-list .savesta-point-province { display:inline-block; margin-top:7px; padding:2px 7px; border-radius:20px; background:#f0f2f4; color:#59636d; font-size:11px; line-height:1.5; }
.savesta-points-list .savesta-point-arrow { flex:0 0 auto; color:#ff4500; font-size:23px; line-height:1; }
.savesta-points-list .savesta-point-actions { display:flex; flex-wrap:wrap; gap:8px; padding:0 13px 13px 58px; }
.savesta-points-list .savesta-point-actions a { display:inline-flex; align-items:center; gap:5px; color:#d63c00; text-decoration:none; font-size:12px; line-height:1.4; font-weight:700; }
.savesta-points-list .savesta-point-actions a:hover { color:#9e2c00; text-decoration:underline; }
.savesta-points-list .savesta-points-empty { margin:0; padding:16px 8px; text-align:center; color:#69727c; font-size:13px; }
.savesta-verkooppunten-lijst { width:100%; max-width:100%; }
.savesta-verkooppunten-lijst .savesta-points-list { max-width:100%; }
@media (min-width: 900px) {
.savesta-verkooppunten-lijst .savesta-points-list-filters { grid-template-columns:minmax(0,1fr) minmax(150px,.65fr); }
.savesta-points-list:not(.is-embedded) .savesta-points-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 900px) {
.savesta-verkooppunten .savesta-overview-layout.has-points-list { grid-template-columns:minmax(0,1fr); }
.savesta-verkooppunten .has-points-list .map-wrapper { max-width: min(100%, var(--savesta-map-max-width, 640px)); }
.savesta-points-list.is-embedded { max-height:none; overflow:visible; }
}
@media (max-width: 480px) {
.savesta-points-list { padding:13px; border-radius:9px; }
.savesta-points-list .savesta-point-actions { padding-left:58px; }
} .savesta-verkooppunten .savesta-overview-layout.has-points-list {
grid-template-areas: "map list";
}
.savesta-verkooppunten .savesta-overview-layout.has-points-list .savesta-map-column { grid-area: map; }
.savesta-verkooppunten .savesta-overview-layout.has-points-list .savesta-list-column { grid-area: list; }
.savesta-verkooppunten .savesta-overview-layout.has-points-list.list-left {
grid-template-areas: "list map";
}
.savesta-verkooppunten .savesta-overview-layout.has-points-list.list-left {
grid-template-columns: minmax(270px, .95fr) minmax(0, 1.05fr);
}
.savesta-verkooppunten .savesta-overview-layout.has-points-list.list-left .savesta-map-column .map-wrapper { max-width: 100%; }
@media (max-width: 900px) {
.savesta-verkooppunten .savesta-overview-layout.has-points-list,
.savesta-verkooppunten .savesta-overview-layout.has-points-list.list-left {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "map" "list";
}
}