/**
* Interactieve Plattegrond Frontend Styles
*/

/* Container */
.imp-container {
position: relative;
width: 100%;
margin: 2em 0;
}

.imp-svg-wrapper {
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
}

.imp-svg-wrapper svg {
width: 100%;
height: auto;
display: block;
}

/* Stijlen voor de SVG-elementen (kavels/ruimtes) */
/* Pas de selector aan als je andere elementen gebruikt dan 'path' en 'rect' */
.imp-svg-wrapper svg path,
.imp-svg-wrapper svg rect,
.imp-svg-wrapper svg polygon {
transition: all 0.2s ease-in-out;
cursor: pointer;
}

/* Hover-effect */
.imp-svg-wrapper svg .hovered {
transform: scale(1.02);
transform-origin: center;
opacity: 0.8;
}

/* Statuskleuren - Pas deze kleuren naar wens aan */
.imp-svg-wrapper svg .status-beschikbaar {
fill: #4CAF50; /* Groen */
}
.imp-svg-wrapper svg .status-onder-optie {
fill: #FFC107; /* Oranje */
}
.imp-svg-wrapper svg .status-verkocht {
fill: #F44336; /* Rood */
}

/* Modal/Pop-up */
.imp-modal {
display: none; /* Standaard verborgen */
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.6);
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
-webkit-animation-duration: 0.4s;
animation-duration: 0.4s
}

.imp-modal-content {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 25px 30px;
border-radius: 8px;
width: 90%;
max-width: 500px;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
-webkit-animation-name: slideIn;
animation-name: slideIn;
-webkit-animation-duration: 0.4s;
animation-duration: 0.4s
}

.imp-modal-close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
line-height: 1;
cursor: pointer;
}

.imp-modal-close:hover,
.imp-modal-close:focus {
color: #000;
text-decoration: none;
}

.imp-modal-content h3 {
margin-top: 0;
font-size: 1.5em;
color: #333;
}

.imp-modal-content p {
margin: 0.5em 0;
line-height: 1.6;
}

.status-label {
padding: 3px 8px;
border-radius: 4px;
color: white;
font-weight: bold;
display: inline-block;
font-size: 0.9em;
}

.status-label.status-beschikbaar { background-color: #4CAF50; }
.status-label.status-onder-optie { background-color: #FFC107; }
.status-label.status-verkocht { background-color: #F44336; }

.imp-button {
display: inline-block;
background-color: #0073aa; /* WordPress blauw */
color: #fff;
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
margin-top: 15px;
transition: background-color 0.2s;
}

.imp-button:hover {
background-color: #005a87;
color: #fff;
}

/* Animaties */
@keyframes fadeIn {
from { opacity: 0 }
to { opacity: 1 }
}

@keyframes slideIn {
from { top: -100px; opacity: 0 }
to { top: 50%; opacity: 1 }
}