/* Hafenurlaub Wismar – Verfügbarkeitskalender (Frontend) */

.fewo-vk-calendar {
	--fewo-orange: #ee570f;
	--fewo-petrol: #1f5f6d;
	--fewo-cream: #f8f7f3;
	--fewo-belegt: #c0392b;
	--fewo-frei: #f8f7f3;
	--fewo-border: #e2e2e2;

	max-width: 420px;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: #333;
	border: 1px solid var(--fewo-border);
	border-radius: 12px;
	padding: 20px;
	background: #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
	box-sizing: border-box;
}

.fewo-vk-calendar[data-fewo-months="2"] {
	max-width: 680px;
}

.fewo-vk-calendar[data-fewo-months="3"] {
	max-width: 960px;
}

.fewo-vk-calendar[data-fewo-months="4"],
.fewo-vk-calendar[data-fewo-months="5"],
.fewo-vk-calendar[data-fewo-months="6"] {
	max-width: 1180px;
}

.fewo-vk-calendar * {
	box-sizing: border-box;
}

/* Manche Themes legen eine eigene (pinke, #cc3366) Hover-/Fokus-Kontur auf
   Buttons/Links. Innerhalb des Kalenders immer petrol statt Theme-Pink. */
.fewo-vk-calendar *:hover,
.fewo-vk-calendar *:focus,
.fewo-vk-calendar *:focus-visible,
.fewo-vk-calendar *:active {
	outline-color: #1f5f6d !important;
}

.fewo-vk-calendar.is-loading {
	opacity: 0.5;
	pointer-events: none;
}

.fewo-vk-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}

.fewo-vk-month-label {
	font-weight: 600;
	color: var(--fewo-petrol);
	font-size: 1.05rem;
	text-align: center;
	flex: 1;
}

.fewo-vk-nav {
	background: var(--fewo-petrol);
	color: #fff;
	border: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 1.1rem;
	line-height: 1;
	flex: 0 0 auto;
	transition: background-color 0.15s ease;
}

.fewo-vk-nav,
.fewo-vk-nav:hover,
.fewo-vk-nav:focus {
	background-color: #1f5f6d !important;
	color: #fff !important;
}

.fewo-vk-nav i {
	color: #fff !important;
}

.fewo-vk-months {
	display: grid;
	grid-template-columns: repeat(var(--fewo-months, 1), 1fr);
	gap: 24px;
}

.fewo-vk-month-name {
	text-align: center;
	font-weight: 600;
	color: var(--fewo-petrol);
	font-size: 0.9rem;
	margin-bottom: 8px;
}

.fewo-vk-weekdays,
.fewo-vk-days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}

.fewo-vk-weekday {
	text-align: center;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--fewo-petrol);
	opacity: 0.7;
	padding-bottom: 4px;
}

.fewo-vk-day {
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	font-size: 0.85rem;
}

.fewo-vk-day.fewo-vk-empty {
	background: transparent;
}

.fewo-vk-day.is-frei {
	background: var(--fewo-frei);
	border: 1px solid var(--fewo-border);
	color: #333;
}

.fewo-vk-day.is-frei:not(.is-past) {
	cursor: pointer;
}

.fewo-vk-day.is-frei:not(.is-past):hover,
.fewo-vk-day.is-frei:not(.is-past):focus-visible {
	border-color: var(--fewo-orange);
	outline: none;
}

.fewo-vk-day.is-belegt {
	background: var(--fewo-belegt);
	color: #fff;
}

.fewo-vk-day.is-today {
	box-shadow: 0 0 0 2px var(--fewo-orange) inset;
	font-weight: 700;
}

.fewo-vk-day.is-past {
	opacity: 0.35;
}

.fewo-vk-day.is-select-start,
.fewo-vk-day.is-select-end {
	background: var(--fewo-orange);
	border-color: var(--fewo-orange);
	color: #fff;
	font-weight: 700;
}

.fewo-vk-day.is-in-range {
	background: rgba(238, 87, 15, 0.16);
	border-color: rgba(238, 87, 15, 0.35);
}

.fewo-vk-legend {
	display: flex;
	gap: 16px;
	margin-top: 14px;
	font-size: 0.8rem;
	color: #555;
}

.fewo-vk-legend-item {
	display: flex;
	align-items: center;
	gap: 6px;
}

.fewo-vk-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: inline-block;
}

.fewo-vk-dot.is-belegt {
	background: var(--fewo-belegt);
}

.fewo-vk-dot.is-frei {
	background: var(--fewo-frei);
	border: 1px solid var(--fewo-border);
}

.fewo-vk-error {
	color: #c0392b;
	font-weight: 600;
}

.fewo-vk-request {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--fewo-border);
}

.fewo-vk-request-hint {
	font-size: 0.78rem;
	color: #777;
	margin: 0 0 8px;
}

.fewo-vk-request-error {
	font-size: 0.85rem;
	color: #c0392b;
	font-weight: 600;
	margin: 0 0 8px;
}

.fewo-vk-request-summary {
	font-size: 0.9rem;
	color: var(--fewo-petrol);
	font-weight: 600;
	margin: 0 0 10px;
}

.fewo-vk-request-button {
	display: inline-block;
	background: var(--fewo-orange);
	color: #fff;
	padding: 10px 20px;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9rem;
	transition: opacity 0.15s ease;
}

.fewo-vk-request-button:hover,
.fewo-vk-request-button:focus {
	opacity: 0.9;
}

.fewo-vk-request-reset {
	display: inline-block;
	background: none;
	border: none;
	font-size: 0.8rem;
	cursor: pointer;
	padding: 0 0 10px;
	margin: 0;
}

.fewo-vk-request-reset,
.fewo-vk-request-reset:hover,
.fewo-vk-request-reset:focus {
	text-decoration: none !important;
	color: #1f5f6d !important;
}

.fewo-vk-request-reset i {
	color: #1f5f6d !important;
}

@media (max-width: 700px) {
	.fewo-vk-calendar {
		max-width: 420px !important;
	}

	.fewo-vk-months {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 380px) {
	.fewo-vk-calendar {
		padding: 14px;
	}

	.fewo-vk-day {
		font-size: 0.75rem;
	}
}