/**
 * MWM YITH Booking Customizer - Public Styles
 *
 * Calendar states, legend, and time period labels for the frontend.
 * IMPORTANT: Uses #ui-datepicker-div ID selector to beat YITH's specificity.
 *
 * @package MWM_YBC
 */

/* ==========================================================================
   Calendar States - Frontend
   ========================================================================== */

/*
 * Using #ui-datepicker-div ID to guarantee highest specificity over YITH CSS.
 * YITH adds .yith-wcbk-datepicker class to this div dynamically on open.
 * Class-only selectors lose to YITH's internal rules even with !important.
 */

/* Available - Green */
#ui-datepicker-div td.mwm-ybc-available,
#ui-datepicker-div td.mwm-ybc-available a,
#ui-datepicker-div td.mwm-ybc-available span {
	background-color: #28a745 !important;
	color: #fff !important;
}

#ui-datepicker-div td.mwm-ybc-available a,
#ui-datepicker-div td.mwm-ybc-available span {
	background-color: #28a745 !important;
}

/* Partially Occupied - Yellow/Orange */
#ui-datepicker-div td.mwm-ybc-partial,
#ui-datepicker-div td.mwm-ybc-partial a,
#ui-datepicker-div td.mwm-ybc-partial span {
	background-color: #f0ad4e !important;
	color: #333 !important;
}

#ui-datepicker-div td.mwm-ybc-partial a,
#ui-datepicker-div td.mwm-ybc-partial span {
	background-color: #f0ad4e !important;
	color: #333 !important;
}

/* Fully Booked - Red
 * Also applies to cells marked by YITH as ui-state-disabled (bk-non-available-date).
 * Override YITH's opacity: 0.35 rule on those disabled cells, keep strikethrough.
 */
#ui-datepicker-div td.mwm-ybc-booked,
#ui-datepicker-div td.mwm-ybc-booked a,
#ui-datepicker-div td.mwm-ybc-booked span {
	background-color: #dc3545 !important;
	color: #fff !important;
	opacity: 1 !important;
}

#ui-datepicker-div td.mwm-ybc-booked a,
#ui-datepicker-div td.mwm-ybc-booked span {
	background-color: #dc3545 !important;
	color: #fff !important;
}

/* Keep YITH's strikethrough on booked unselectable cells */
#ui-datepicker-div td.mwm-ybc-booked.ui-state-disabled {
	text-decoration: line-through !important;
	text-decoration-color: rgba(255, 255, 255, 0.7) !important;
	opacity: 1 !important;
}

#ui-datepicker-div td.mwm-ybc-booked.ui-state-disabled span {
	text-decoration: line-through !important;
	text-decoration-color: rgba(255, 255, 255, 0.7) !important;
	color: #fff !important;
}

/* Hover states */
#ui-datepicker-div td.mwm-ybc-available:hover,
#ui-datepicker-div td.mwm-ybc-available:hover a,
#ui-datepicker-div td.mwm-ybc-available:hover span {
	background-color: #218838 !important;
	color: #fff !important;
}

#ui-datepicker-div td.mwm-ybc-partial:hover,
#ui-datepicker-div td.mwm-ybc-partial:hover a,
#ui-datepicker-div td.mwm-ybc-partial:hover span {
	background-color: #e09a3a !important;
	color: #333 !important;
}

#ui-datepicker-div td.mwm-ybc-booked:hover,
#ui-datepicker-div td.mwm-ybc-booked:hover a,
#ui-datepicker-div td.mwm-ybc-booked:hover span {
	background-color: #bd2130 !important;
	color: #fff !important;
}

/* ==========================================================================
   Calendar Legend - Frontend
   ========================================================================== */

.mwm-ybc-calendar-legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	padding: 12px 16px;
	margin: 16px 0;
	background-color: #f8f9fa;
	border: 1px solid #e9ecef;
	border-radius: 6px;
	font-size: 14px;
	line-height: 1.5;
}

.mwm-ybc-legend-title {
	font-weight: 600;
	color: #2e4057;
}

.mwm-ybc-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #495057;
}

.mwm-ybc-legend-color {
	display: inline-block;
	width: 16px;
	height: 16px;
	border-radius: 4px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	flex-shrink: 0;
}

.mwm-ybc-legend-available .mwm-ybc-legend-color {
	background-color: #28a745;
}

.mwm-ybc-legend-partial .mwm-ybc-legend-color {
	background-color: #f0ad4e;
}

.mwm-ybc-legend-booked .mwm-ybc-legend-color {
	background-color: #dc3545;
}

/* ==========================================================================
   Time Period Labels - Frontend
   ========================================================================== */

.mwm-ybc-period-label {
	display: block;
	padding: 8px 14px;
	margin: 12px 0 6px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	border-radius: 4px;
	clear: both;
	/* Span all columns when inside YITH's grid layout */
	grid-column: 1 / -1;
	width: 100%;
	box-sizing: border-box;
}

/* First period label needs no top margin */
.mwm-ybc-period-label:first-child {
	margin-top: 0;
}

.mwm-ybc-period-morning {
	background-color: #e8eeff;
	color: #10195c;
	border-left: 4px solid #3c5fd7;
}

.mwm-ybc-period-afternoon {
	background-color: #e8eeff;
	color: #10195c;
	border-left: 4px solid #3c5fd7;
}

.mwm-ybc-period-label span {
	display: inline-block;
}

/* ==========================================================================
   Select/Optgroup styling for time slots
   ========================================================================== */

.yith-wcbk-booking-form select optgroup {
	font-weight: 700;
	font-style: normal;
	color: #2e4057;
	padding: 4px 0;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media screen and (max-width: 600px) {
	.mwm-ybc-calendar-legend {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		padding: 10px 12px;
		font-size: 13px;
	}

	.mwm-ybc-period-label {
		font-size: 12px;
		padding: 6px 10px;
	}
}

/* ==========================================================================
   Accessibility - Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.mwm-ybc-available,
	.mwm-ybc-partial,
	.mwm-ybc-booked {
		transition: none !important;
	}
}