.khl-hours-configurator{margin:18px 0;}

.khl-hours-layout{display:grid;grid-template-columns:minmax(220px,520px) 1fr;gap:18px;align-items:start;}
@media (max-width: 860px){.khl-hours-layout{grid-template-columns:1fr;}}

.khl-hours-preview-wrap{border:1px solid rgba(0,0,0,.08);border-radius:10px;padding:10px;background:#fff;}
.khl-hours-preview{
	width:100%;
	background-color:#e0e0e0;
	/* Light checkerboard by default */
	background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMCAxMEgxMFYyMEgwVjEwWk0xMCAwSDIwVjEwSDEwVjBaIiBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIwLjA1Ii8+PC9zdmc+");
	border-radius:8px;
	/* Keep UI rounded, but DON'T clip the SVG itself.
	   Clipping caused square frame corners to look rounded in preview, while exports stayed sharp. */
	overflow:visible;
}
.khl-hours-preview.khl-checker-dark{
	background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMCAxMEgxMFYyMEgwVjEwWk0xMCAwSDIwVjEwSDEwVjBaIiBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIwLjE1Ii8+PC9zdmc+");
}
.khl-hours-preview svg{display:block;width:100%;height:auto;}

.khl-hours-fields{border:1px solid rgba(0,0,0,.08);border-radius:10px;padding:14px;background:#fff;}
.khl-hours-row{margin:10px 0;}
.khl-hours-row label{display:block;font-weight:600;margin-bottom:6px;}
.khl-hours-input,.khl-select{width:100%;max-width:420px;padding:8px 10px;border:1px solid rgba(0,0,0,.18);border-radius:8px;}
.khl-inline-label{display:flex;align-items:center;gap:8px;font-weight:700;margin-bottom:8px;}

.khl-hours-dimensions{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:520px;}
@media (max-width: 480px){.khl-hours-dimensions{grid-template-columns:1fr;}}

.khl-color-swatches{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-height:36px;}
.khl-color-placeholder{font-size:13px;color:#999;font-style:italic;}
.khl-color-swatch{width:44px;height:28px;border-radius:0;border:solid 1px rgba(0,0,0,0.2);box-shadow:1px 1px 8px #888;background-size:cover;background-position:center;background-repeat:no-repeat;cursor:pointer;display:inline-block;transition:border-color .15s,transform .15s;position:relative;}
.khl-color-swatch:hover{border-color:#999;transform:scale(1.05);}
.khl-color-swatch.selected{border-color:#e63329;box-shadow:0 0 0 2px #e63329;transform:scale(1.05);}

.khl-hours-price{margin-top:14px;font-weight:900;font-size:20px;color:#e63329;}

/* Tooltip icoon (zelfde UX als KHL Image Configurator) */
.khl-tooltip-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:#999;color:#fff;font-size:10px;font-weight:700;cursor:pointer;margin-left:5px;vertical-align:middle;line-height:1;flex-shrink:0;}
.khl-tooltip-icon:hover{background:#e63329;}