/* Openingstijden Plugin — basisstyling front-end, overschrijfbaar via thema-CSS */

.otp-openingstijden {
	--otp-accent: #2563eb;
	--otp-accent-contrast: #ffffff;

	max-width: 480px;
	font-size: 1rem;
	line-height: 1.5;
}

.otp-department {
	margin-bottom: 1.5em;
}

.otp-department__title {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.6em;
	margin: 0 0 0.6em;
	font-size: 1.1em;
}

.otp-status {
	display: inline-block;
	padding: 0.2em 0.7em;
	border-radius: 3px;
	font-size: 0.7em;
	font-weight: 600;
}

.otp-status--open {
	background: #e6f4ea;
	color: #1e7e34;
}

.otp-status--closed {
	background: #fbe7e7;
	color: #b32d2e;
}

.otp-status-note {
	margin-left: 0.4em;
	font-weight: 400;
	font-style: italic;
}

.otp-hours-table {
	width: 100%;
	border-collapse: collapse;
}

.otp-hours-table .otp-day__label,
.otp-hours-table .otp-day__hours {
	padding: 0.3em 0.5em;
	text-align: left;
	border-bottom: 1px solid #e0e0e0;
}

.otp-day--today {
	background: #f5f7fa;
	font-weight: 600;
}

.otp-day__date {
	display: inline-block;
	margin-left: 0.4em;
	font-weight: 400;
	font-size: 0.85em;
	color: #666;
}

.otp-day__note {
	margin-left: 0.4em;
	font-style: italic;
	font-weight: 400;
}

.otp-day--exception {
	background: #fff8e1;
}

.otp-day--exception.otp-day--today {
	background: #fdf0c4;
}

.otp-slider {
	position: relative;
}

.otp-slider__viewport {
	overflow: hidden;
}

.otp-slider__track {
	display: flex;
	width: 200%;
	transition: transform 0.35s ease;
}

.otp-slider__panel {
	width: 50%;
	flex: 0 0 50%;
	box-sizing: border-box;
	min-width: 0;
}

.otp-slider__panel--werkplaats {
	padding-left: 1.5em;
}

.otp-slider--werkplaats-active .otp-slider__track {
	transform: translateX(-50%);
}

/*
 * De schakelaar staat onderin, subtiel vormgegeven. De selectors zijn
 * bewust specifiek en resetten expliciet alle knop-eigenschappen die
 * WordPress-thema's vaak globaal op <button> zetten (achtergrond, rand,
 * schaduw, lettergrootte) — anders "wint" soms de thema-stijl van het
 * thema, waardoor de knoppen bijvoorbeeld in de merkkleur van het thema
 * (bv. rood) blijven staan in plaats van deze plugin-stijl.
 */
.otp-openingstijden .otp-slider__switch {
	position: relative;
	display: inline-flex;
	max-width: 260px;
	margin: 1em 0 0;
	padding: 2px;
	background-color: #f0f1f3 !important;
	background-image: none !important;
	border: none !important;
	border-radius: 6px;
}

.otp-openingstijden .otp-slider__tab {
	position: relative;
	z-index: 1;
	flex: 1 1 50%;
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	border: none !important;
	background: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
	border-radius: 4px;
	padding: 0.4em 0.75em;
	font-family: inherit;
	font-size: 0.75em;
	font-weight: 600;
	line-height: normal;
	color: #6b7280 !important;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: color 0.25s ease;
}

.otp-openingstijden .otp-slider__tab.is-active {
	color: var(--otp-accent) !important;
}

.otp-openingstijden .otp-slider__tab:hover {
	color: var(--otp-accent) !important;
}

.otp-openingstijden .otp-slider__tab:focus-visible {
	outline: 2px solid var(--otp-accent);
	outline-offset: 2px;
}

.otp-openingstijden .otp-slider__switch-indicator {
	position: absolute;
	z-index: 0;
	top: 2px;
	left: 2px;
	width: calc(50% - 2px);
	height: calc(100% - 4px);
	background-color: #ffffff !important;
	background-image: none !important;
	border-radius: 4px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) !important;
	transition: transform 0.3s ease;
}

.otp-slider--werkplaats-active .otp-slider__switch-indicator {
	transform: translateX(100%);
}