/* OM CF7 Booking - Custom Calendar (Hallesche Brand) */

/* Container Styling */
.om-cf7-booking {
	max-width: 600px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	color: #474747;
	margin: 0 auto;
	position: relative;
}

/* Selected Values Display */
.om-booking-selected-display {
	display: flex;
	gap: 16px;
	margin-bottom: 20px;
	padding: 16px;
	background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
	border: 2px solid #e6e6e6;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.om-selected-date,
.om-selected-time {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.om-selected-label {
	font-size: 0.8rem;
	font-weight: 600;
	color: #6c757d;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.om-selected-value {
	font-size: 1.05rem;
	font-weight: 600;
	color: #474747;
	padding: 10px 12px;
	background: #ffffff;
	border: 2px solid #e6e6e6;
	border-radius: 8px;
	transition: all 0.2s ease;
}

.om-selected-value.has-value {
	color: #BE0D3E;
	border-color: #BE0D3E;
	background: rgba(190, 13, 62, 0.03);
}

/* Change Button */
.om-booking-change-button {
	font-size: 14px;
	padding: 0.8em 1.6em;
	color: var(--the7-btn-color);
	background: var(--the7-btn-bg, transparent linear-gradient(135deg, #1ebbf0 30%, #39dfaa 100%));
	border: none;
	border-radius: 2em;
	transition: all 0.3s ease;
	box-shadow: 0 4px 12px rgba(190, 13, 62, 0.3);
	margin: 0 auto;
}

.om-booking-change-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(190, 13, 62, 0.4);
	background: linear-gradient(135deg, #9a0a32 0%, #BE0D3E 100%);
}

.om-booking-change-button:active {
	transform: translateY(0);
	box-shadow: 0 2px 8px rgba(190, 13, 62, 0.3);
}

/* Calendar Container */
.om-booking-calendar {
	border-radius: 12px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
	border: 1px solid #e6e6e6;
	background: #ffffff;
	padding: 8px;
	width: 100%;
	position: relative;
}

/* Calendar Header */
.om-calendar-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 8px;
	background: linear-gradient(135deg, #BE0D3E 0%, #9a0a32 100%);
	border-radius: 8px 8px 0 0;
	margin: -8px -8px 12px -8px;
	height: 60px;
}

.om-calendar-title {
	display: flex;
	gap: 8px;
	color: #ffffff;
	font-size: 1.1rem;
	font-weight: 600;
	text-align: center;
	flex: 1;
	justify-content: center;
}

.om-calendar-month,
.om-calendar-year {
	color: #ffffff;
}

/* Navigation Buttons */
.om-calendar-nav {
	background: transparent;
	border: none;
	color: #ffffff;
	cursor: pointer;
	padding: 8px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	transition: all 0.2s ease;
}

.om-calendar-nav:hover {
	background: rgba(255, 255, 255, 0.15);
}

.om-calendar-nav:active {
	background: rgba(255, 255, 255, 0.25);
}

.om-calendar-nav svg {
	width: 20px;
	height: 20px;
}

.om-calendar-nav:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

.om-calendar-nav:disabled:hover {
	background: transparent;
}

/* Weekday Headers */
.om-calendar-weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: clamp(2px, 0.3vw, 4px);
	margin-bottom: 8px;
	padding: 0 4px;
}

.om-calendar-weekday {
	color: #BE0D3E;
	font-weight: 700;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	text-align: center;
	padding: 8px 0;
}

/* Days Grid */
.om-calendar-days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: clamp(2px, 0.3vw, 4px);
	padding: 4px;
}

/* Day Cells */
.om-calendar-day {
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	border: 2px solid transparent;
	background: transparent;
	color: #474747;
	font-weight: 500;
	font-size: clamp(0.875rem, 1.5vw, 1rem);
	cursor: pointer;
	transition: all 0.2s ease;
	position: relative;
}

.om-calendar-day:hover:not(.disabled):not(.other-month) {
	background: rgba(190, 13, 62, 0.08);
	border-color: rgba(190, 13, 62, 0.2);
	color: #BE0D3E;
}

/* Today */
.om-calendar-day.today {
	/*
	border-color: #004767;
	background: rgba(0, 71, 103, 0.05);
	color: #004767;
	font-weight: 700;
	*/
}

.om-calendar-day.today::after {
	content: '';
	position: absolute;
	bottom: 6px;
	left: 50%;
	transform: translateX(-50%);
	width: 6px;
	height: 6px;
	background: #004767;
	border-radius: 50%;
}

.om-calendar-day.today:hover:not(.disabled) {
	border-color: #004767;
	background: rgba(0, 71, 103, 0.12);
	color: #004767;
}

/* Selected Date */
.om-calendar-day.selected {
	background: #BE0D3E;
	border-color: #BE0D3E;
	color: #ffffff;
	font-weight: 700;
	box-shadow: 0 4px 12px rgba(190, 13, 62, 0.3);
}

.om-calendar-day.selected:hover {
	background: #9a0a32;
	border-color: #9a0a32;
	color: #ffffff;
}

/* Disabled Days */
.om-calendar-day.disabled {
	color: #d0d0d0;
	cursor: not-allowed;
	opacity: 0.4;
}

.om-calendar-day.disabled:hover {
	background: transparent;
	border-color: transparent;
	color: #d0d0d0;
}

/* Other Month Days */
.om-calendar-day.other-month {
	color: #b0b0b0;
	opacity: 0.3;
}

.om-calendar-day.other-month:hover {
	background: transparent;
	border-color: transparent;
}

/* Time Slots Section */
.om-booking-time-slots {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.98);
	backdrop-filter: blur(4px);
	z-index: 100;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	border-radius: 6px;
	display: flex;
	flex-direction: column;
	padding: 16px;
}

.om-booking-time-slots.active {
	opacity: 1;
	visibility: visible;
}

.om-time-slots-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 20px;
}

.om-time-slots-back {
	background: transparent;
	border: none;
	color: #474747;
	cursor: pointer;
	padding: 8px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	transition: all 0.2s ease;
	flex-shrink: 0;
}

.om-time-slots-back:hover {
	background: rgba(190, 13, 62, 0.1);
	color: #BE0D3E;
}

.om-time-slots-back svg {
	width: 24px;
	height: 24px;
}

.om-booking-label {
	display: block;
	color: #474747;
	font-weight: 700;
	font-size: 1.1rem;
	text-align: center;
	flex: 1;
	margin-bottom: 0 !important;
}

.om-time-slots-message {
	color: #474747;
	font-size: 0.95rem;
	padding: 12px;
	text-align: center;
	background: #f5f5f5;
	border-radius: 8px;
	opacity: 0.7;
	margin-top: auto;
	margin-bottom: auto;
}

/* Time Slots Table */
.om-time-slots-table {
	flex: 1;
	overflow-y: auto;
	margin-bottom: 12px;
}

.om-time-slots-grid {
	width: 100%;
	border-collapse: separate;
	border-spacing: 8px;
}

.om-time-slots-grid td {
	padding: 0;
}

.om-time-slot-button {
	width: 100%;
	padding: 14px 12px;
	border: 2px solid #e6e6e6;
	border-radius: 8px;
	background: #ffffff;
	color: #474747;
	font-size: 1rem;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: all 0.2s ease;
	text-align: center;
	display: block;
}

.om-time-slot-button:hover {
	border-color: #BE0D3E;
	background: rgba(190, 13, 62, 0.05);
	color: #BE0D3E;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(190, 13, 62, 0.15);
}

.om-time-slot-button:active {
	transform: translateY(0);
}

.om-time-slot-button.selected {
	background: #BE0D3E;
	border-color: #BE0D3E;
	color: #ffffff;
	box-shadow: 0 4px 12px rgba(190, 13, 62, 0.3);
}

.om-time-slot-button.selected:hover {
	background: #9a0a32;
	border-color: #9a0a32;
	transform: translateY(-2px);
}

.om-time-slot-button:focus-visible {
	outline: 2px solid #004767;
	outline-offset: 2px;
	z-index: 10;
}

/* Validation Error State */
.om-cf7-booking.wpcf7-not-valid .om-booking-selected-display {
	border-color: #BE0D3E;
	background: rgba(190, 13, 62, 0.05);
}

/* Validation Message */
.om-cf7-booking ~ .wpcf7-not-valid-tip,
.om-cf7-booking.wpcf7-not-valid ~ .wpcf7-not-valid-tip {
	display: block;
	color: #BE0D3E;
	font-size: 0.875rem;
	margin-top: 12px;
	padding: 12px 16px;
	background: rgba(190, 13, 62, 0.08);
	border-left: 4px solid #BE0D3E;
	border-radius: 4px;
}

/* Loading State */
.om-calendar-loading .om-calendar-days {
	opacity: 0.5;
	pointer-events: none;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
	.om-calendar-header {
		height: 50px;
	}

	.om-calendar-title {
		font-size: 1rem;
	}

	.om-calendar-nav {
		width: 36px;
		height: 36px;
	}

	.om-calendar-nav svg {
		width: 18px;
		height: 18px;
	}

	.om-calendar-weekday {
		font-size: 0.7rem;
		padding: 6px 0;
	}

	.om-time-slots-grid {
		border-spacing: 6px;
	}

	.om-time-slot-button {
		padding: 12px 10px;
		font-size: 0.95rem;
	}

	.om-booking-selected-display {
		gap: 12px;
		padding: 14px;
	}

	.om-selected-label {
		font-size: 0.75rem;
	}

	.om-selected-value {
		font-size: 1rem;
		padding: 9px 10px;
	}
}

@media (max-width: 480px) {
	.om-cf7-booking {
		padding: 0;
	}

	.om-booking-calendar {
		border-radius: 8px;
	}

	.om-calendar-header {
		border-radius: 6px 6px 0 0;
		height: 48px;
	}

	.om-calendar-title {
		font-size: 0.95rem;
		gap: 6px;
	}

	.om-time-slots-grid {
		border-spacing: 4px;
	}

	.om-time-slot-button {
		padding: 10px 8px;
		font-size: 0.9rem;
	}

	.om-booking-selected-display {
		flex-direction: column;
		gap: 12px;
		padding: 12px;
	}

	.om-selected-label {
		font-size: 0.7rem;
	}

	.om-selected-value {
		font-size: 0.95rem;
		padding: 8px 10px;
	}
}

/* Accessibility */
.om-calendar-day:focus-visible {
	outline: 2px solid #004767;
	outline-offset: 2px;
	z-index: 10;
}

.om-calendar-nav:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: -2px;
}

/* Animation */
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(-5px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.om-calendar-days {
	animation: fadeIn 0.3s ease-out;
}