/**
 * Diorarteestudios Addons — Frontend Calendar Styles (Minimalist B&W).
 *
 * Design language: clean monochrome with subtle gray scale.
 * Color is reserved exclusively for event type indicators.
 *
 * @package Diorarteestudios_Addons
 */

/* ===========================================================================
 * 1. Calendar root
 * ========================================================================= */
.dior-calendar {
	display: block;
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	background: #ffffff;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
	overflow: hidden;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: #0a0a0a;
	box-sizing: border-box;
}

.dior-calendar *,
.dior-calendar *::before,
.dior-calendar *::after {
	box-sizing: border-box;
}

/* ===========================================================================
 * 2. Header (minimalist, monochrome)
 * ========================================================================= */
.dior-calendar__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	background: #ffffff;
	color: #0a0a0a;
	gap: 6px;
	border-bottom: 1px solid #e5e5e5;
}

.dior-calendar__title {
	margin: 0;
	flex: 1;
	text-align: center;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #0a0a0a;
}

.dior-calendar__nav,
.dior-calendar__today {
	background-color: #ffffff!important;
	border: 1px solid #0a0a0a!important;
	color: #0a0a0a;
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: 50%;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
	font-family: inherit;
	flex-shrink: 0;
	-webkit-appearance: none;
	appearance: none;
	color-scheme: light;
}

.single-product .dior-calendar__nav,
.single-product .dior-calendar__today {
	display: flex;
	align-items: center;
	height: 30px;
	padding: 5px;
}

.single-product .dior-calendar__today-label {
	margin-bottom: -1px;
}

/* "Today" button is wider because it also shows a text label next to the icon. */
.dior-calendar__today {
	width: auto;
	min-width: 36px;
	padding: 0 12px;
	border-radius: 999px;
	letter-spacing: 0.04em;
}

.dior-calendar__today-label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	white-space: nowrap;
	line-height: 1;
}

/* SVG icons inherit color from the button via stroke="currentColor" / fill="currentColor". */
.dior-calendar__nav svg,
.dior-calendar__today svg {
	display: block;
	width: 16px;
	height: 16px;
	color: #0a0a0a!important;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex-shrink: 0;
	transition: color 120ms ease, fill 120ms ease;
}

.dior-calendar__today svg {
	width: 14px;
	height: 14px;
}

.dior-calendar__nav:not(:disabled):hover,
.dior-calendar__today:not(:disabled):hover,
.dior-calendar__nav:not(:disabled):focus,
.dior-calendar__today:not(:disabled):focus {
	background: #0a0a0a!important;
	border-color: #0a0a0a!important;
	color: #ffffff!important;
	outline: none;
}

.dior-calendar__nav:not(:disabled):hover svg,
.dior-calendar__nav:not(:disabled):focus svg,
.dior-calendar__today:not(:disabled):hover svg,
.dior-calendar__today:not(:disabled):focus svg {
	color: #ffffff!important;
}

.dior-calendar__nav:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

/* Legacy dot span kept for backwards compatibility with custom HTML, no longer rendered by default. */
.dior-calendar__today-dot {
	display: none;
}

/* ===========================================================================
 * 3. Weekday row
 * ========================================================================= */
.dior-calendar__weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	background: #ffffff;
	border-bottom: 1px solid #e5e5e5;
}

.dior-calendar__weekday {
	padding: 10px 4px;
	text-align: center;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	color: #737373;
	letter-spacing: 0.1em;
}

/* ===========================================================================
 * 4. Day grid
 * ========================================================================= */
.dior-calendar__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	/* `1fr` requires a fixed container height to distribute space evenly.
	   The grid is locked at 600px (≈6 rows × 100px) so the loading and
	   loaded states are exactly the same height — no layout shift when
	   events arrive. The day cells are overflow-hidden so cells with many
	   events clip gracefully instead of pushing the grid taller. */
	grid-auto-rows: 1fr;
	background: #ffffff;
	position: relative;
	height: 600px;
}

.single-product .dior-calendar__grid{
	height: auto!important;
}

/* ===========================================================================
 * Loading state — overlay, CSS-only spinner, skeleton day cells, and
 * screen-reader-only status text. Kept entirely self-contained so the
 * calendar works without WordPress admin CSS.
 * ========================================================================= */
.dior-calendar__loading {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	background: rgba(255, 255, 255, 0.85);
	z-index: 5;
	padding: 16px;
	text-align: center;
}

/* JS adds `.is-loading` to the root while fetching; once data arrives it
   removes the class so the overlay (and the disabled buttons / pulsing
   skeleton) vanish. Without `.is-loading` the overlay is hidden. */
.dior-calendar:not(.is-loading) .dior-calendar__loading {
	display: none;
}

.dior-calendar__spinner {
	display: inline-block;
	width: 32px;
	height: 32px;
	border: 3px solid rgba(0, 0, 0, 0.1);
	border-top-color: currentColor;
	border-radius: 50%;
	color: #2563eb; /* matches the typical primary brand color */
	animation: dior-calendar-spin 0.9s linear infinite;
}

.dior-calendar__loading-text {
	font-size: 14px;
	font-weight: 500;
	color: #374151;
	letter-spacing: 0.01em;
}

@keyframes dior-calendar-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.dior-calendar__spinner {
		animation-duration: 2s;
	}
}

/* Pulsing skeleton day cells — drawn behind the overlay so the grid feels
   structured while we wait for the API. Visible only while the root
   calendar container carries `.is-loading`. */
.dior-calendar.is-loading .dior-calendar__day:not(.dior-calendar__day--has-events) {
	background: linear-gradient(
		90deg,
		rgba(0, 0, 0, 0.04) 0%,
		rgba(0, 0, 0, 0.08) 50%,
		rgba(0, 0, 0, 0.04) 100%
	);
	background-size: 200% 100%;
	animation: dior-calendar-skeleton 1.4s ease-in-out infinite;
	color: transparent;
}

.dior-calendar.is-loading .dior-calendar__day-number {
	color: transparent;
}

@keyframes dior-calendar-skeleton {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* Buttons are non-interactive while data is being fetched to prevent
   concurrent fetches and accidental double-clicks. */
.dior-calendar.is-loading .dior-calendar__nav,
.dior-calendar.is-loading .dior-calendar__today {
	opacity: 0.5;
	cursor: progress;
	pointer-events: none;
}

/* Screen-reader-only status text — visually hidden but still announced.
   Used for the polite `role="status"` live region. */
.dior-calendar__status-screen-reader {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Fallback: keep the legacy `.spinner` rule backwards-compatible with
   any cached HTML or third-party overrides that still ship one. */
.dior-calendar__loading .spinner {
	float: none;
	margin: 0;
}

.dior-calendar__day {
	position: relative;
	background: #ffffff;
	padding: 6px 8px;
	min-height: 96px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	cursor: default;
	transition: background 120ms ease;
	/* Clip events that don't fit so the grid height stays locked at
	   600px. The "+N more" indicator is already rendered below the chip
	   list, so users never lose data — they just open the modal to see
	   the rest. */
	overflow: hidden;
	border-top: 1px solid #f5f5f5;
	border-left: 1px solid #f5f5f5;
}

.single-product .dior-calendar__day{
	min-height: 0;
}

.dior-calendar__day:hover {
	background: #fafafa;
}

.dior-calendar__day--out-of-month {
	background: #fafafa;
	color: #d4d4d4;
}

.dior-calendar__day--out-of-month .dior-calendar__day-number {
	color: #d4d4d4;
}

.dior-calendar__day--today .dior-calendar__day-number {
	color: #ffffff;
	background: #0a0a0a;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
}

/* Hide today highlight for out-of-month days */
.dior-calendar__day--out-of-month.dior-calendar__day--today .dior-calendar__day-number {
	background: transparent;
	color: #d4d4d4;
}

.dior-calendar__day--has-events {
	cursor: pointer;
}

.dior-calendar__day-number {
	font-size: 12px;
	font-weight: 500;
	color: #0a0a0a;
	line-height: 1.4;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	z-index: 1;
}

.single-product .dior-calendar__day--has-events .dior-calendar__day-number {
	color: #d4d4d4;
}

.single-product .dior-calendar__day--has-events.is-selected .dior-calendar__day-number {
	color: #0a0a0a;
}

.dior-calendar__day-events {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin-top: 2px;
	overflow: hidden;
}

/* Event chip: minimalist pill with left color stripe */
.dior-calendar__event-chip {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 3px 6px 3px 4px;
	border-radius: 3px;
	font-size: 11px;
	line-height: 1.3;
	color: #0a0a0a;
	background: #ffffff;
	border: 1px solid #e5e5e5;
	border-left: 3px solid #0a0a0a;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	cursor: pointer;
	transition: background 120ms ease, border-color 120ms ease;
	font-family: inherit;
	width: 100%;
	text-align: left;
}

.dior-calendar__event-chip:hover,
.dior-calendar__event-chip:focus {
	background: #f5f5f5;
	border-color: #0a0a0a;
	outline: none;
}

/* Progressive reveal: day cells with events start hidden and slide in
   one cell at a time once JS toggles `.is-visible` on them. The
   transition gives a smooth fade without paying the cost of rendering
   them all at once. */
.dior-calendar__day--has-events .dior-calendar__day-events {
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity 280ms ease-out, transform 280ms ease-out;
}

.dior-calendar__day--has-events.is-visible .dior-calendar__day-events {
	opacity: 1;
	transform: translateY(0);
}

.single-product .dior-calendar__day--has-events.is-visible .dior-calendar__day-events {
	position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
	z-index: 0;
}

@media (prefers-reduced-motion: reduce) {
	.dior-calendar__day--has-events .dior-calendar__day-events {
		transition: none;
		transform: none;
		opacity: 1;
	}
	.dior-calendar__day--has-events.is-visible .dior-calendar__day-events {
		transform: none;
	}
}

.dior-calendar__event-chip-thumb {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	background: #f5f5f5;
}

.dior-calendar__event-chip-title {
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
	min-width: 0;
}

.single-product .dior-calendar__event-chip-title{
	font-size: 0;
}

.dior-calendar__event-more {
	font-size: 10px;
	color: #737373;
	font-weight: 500;
	padding: 1px 4px;
	letter-spacing: 0.04em;
}

.dior-calendar__day-icon-overlay {
	display: none;
}

/* Holiday styling: very subtle */
.dior-calendar__day--holiday {
	background: #fafafa;
}

.dior-calendar__day--holiday .dior-calendar__day-number {
	color: #a3a3a3;
}

/* ===========================================================================
 * 5. Legend (minimalist)
 * ========================================================================= */
.dior-calendar__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	padding: 12px 16px;
	background: #ffffff;
	border-top: 1px solid #e5e5e5;
}

.dior-calendar__legend-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	color: #525252;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.dior-calendar__legend-swatch {
	width: 10px;
	height: 10px;
	border-radius: 2px;
	display: inline-block;
	flex-shrink: 0;
	border: 1px solid rgba(0, 0, 0, 0.08);
}

/* ===========================================================================
 * 6. Empty state
 * ========================================================================= */
.dior-calendar__empty {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 40px 16px;
	background: #ffffff;
	color: #a3a3a3;
	text-align: center;
	min-height: 140px;
	grid-row: 3;
}

.single-product .dior-calendar__empty{
	display: none;
}

.dior-calendar__empty-icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #f5f5f5;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #a3a3a3;
	font-size: 18px;
	font-weight: 600;
}

.dior-calendar__empty-text {
	margin: 0;
	font-size: 13px;
	color: #737373;
	font-weight: 500;
	letter-spacing: 0.02em;
}

/* ===========================================================================
 * 7. Modal (minimalist)
 * ========================================================================= */
.dior-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.dior-modal[hidden] {
	display: none;
}

.dior-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 10, 10, 0.55);
}

.dior-modal__dialog {
	position: relative;
	z-index: 1;
	background: #ffffff;
	border-radius: 4px;
	max-width: 540px;
	width: 100%;
	max-height: calc(100vh - 48px);
	overflow: auto;
	border: 1px solid #e5e5e5;
	animation: dior-modal-in 160ms ease-out;
}

@keyframes dior-modal-in {
	from { transform: translateY(8px); opacity: 0; }
	to   { transform: translateY(0);   opacity: 1; }
}

.dior-modal__close {
	position: absolute;
	top: 12px;
	right: 12px;
	color: #000000 !important;
    font-family: "Fira Sans", Sans-serif;
    font-weight: 400;
	background: transparent !important;
    border: 1px solid #000000;
    font-size: 25px;
    line-height: 20px;
    width: 25px;
    height: 25px;
    border-radius: 3px !important;
    cursor: pointer;
    padding: 0 0 !important;
    box-shadow: .9px -1px 0 0 #000, 1.5px -2px 0 0 #000, 2.5px -3px 0 0 #000, 3.5px -4px 0 0 #000;
    transition: all .3s;
}

.dior-modal__close:hover {
	background: #000000 !important;
    color: #ffffff !important;
	box-shadow: none;
}

.dior-modal__content {
	padding: 28px;
}

.dior-modal__header {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin-bottom: 16px;
}

.dior-modal__icon {
	width: 48px;
	height: 48px;
	border-radius: 4px;
	flex-shrink: 0;
	background: #f5f5f5;
	background-size: cover;
	background-position: center;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	border: 1px solid #e5e5e5;
}

.dior-modal__heading {
	flex: 1;
	min-width: 0;
}

.dior-modal__title {
	margin: 0 0 -5px;
	font-size: 18px;
	font-weight: 700;
	color: #0a0a0a;
	line-height: 1.3;
}

.dior-modal__type {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 2px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #ffffff;
}

.dior-modal__datetime {
	font-size: 13px;
	color: #525252;
	margin: 0 0 16px;
	line-height: 1.5;
}

.dior-modal__datetime strong {
	color: #0a0a0a;
}

.dior-modal__time {
	display: inline-block;
}

/* v1.x — Subtle "Ver más detalles" / "More details" text link rendered
   directly under the event title in the modal header. Smaller than the
   primary/secondary buttons so it does not steal visual weight from the
   main heading. Trailing arrow makes the action obvious without adding
   a heavy button border. */
.dior-modal__view-detail-link {
	display: inline-block;
	font-size: 12px;
	font-weight: 500;
	color: #4F46E5;
	text-decoration: none;
	letter-spacing: 0.01em;
}

.dior-modal__view-detail-link:hover,
.dior-modal__view-detail-link:focus-visible {
	text-decoration: underline;
	outline: none;
	color: #3730A3;
}

/* v1.x — Live time display in the modal header.
   -dior-modal__time--live       : event is in progress (current time is past the start).
   -dior-modal__time--culminated : event has already finished today. */
.dior-modal__time--live {
	color: #b45309;
	font-weight: 600;
}

.dior-modal__time--culminated {
	color: #dc2626;
	font-weight: 600;
}

.dior-modal__description {
	font-size: 13px;
	color: #525252;
	line-height: 1.55;
	margin-bottom: 16px;
}

.dior-modal__capacity {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	background: #fafafa;
	border: 1px solid #e5e5e5;
	border-radius: 3px;
	margin-bottom: 16px;
	font-size: 12px;
	color: #0a0a0a;
}

.dior-modal__capacity-bar {
	flex: 1;
	height: 4px;
	background: #e5e5e5;
	border-radius: 999px;
	overflow: hidden;
}

.dior-modal__capacity-fill {
	height: 100%;
	background: #0a0a0a;
	transition: width 240ms ease;
}

.dior-modal__capacity-fill--low {
	background: #737373;
}

.dior-modal__capacity-fill--full {
	background: #a3a3a3;
}

.dior-modal__contact {
	background: #fafafa;
	border: 1px solid #e5e5e5;
	border-radius: 3px;
	padding: 12px 14px;
	margin-bottom: 16px;
	font-size: 13px;
	color: #0a0a0a;
}

.dior-modal__contact strong {
	display: block;
	margin-bottom: 6px;
	color: #0a0a0a;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.dior-modal__contact p {
	margin: 4px 0;
}

.dior-modal__contact a {
	color: #0a0a0a;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.dior-modal__contact a:hover {
	color: #525252;
}

.dior-modal__contact-message {
	margin-bottom: 8px !important;
	color: #525252 !important;
}

.dior-modal__contact-label {
	display: inline-block;
	min-width: 48px;
	font-weight: 600;
	color: #0a0a0a;
	text-transform: uppercase;
	font-size: 10px;
	letter-spacing: 0.06em;
	margin-right: 4px;
}

/* ---------------------------------------------------------------------------
 * v1.2.0+ — Package selector
 *
 * Rendered inside the modal when an event exposes more than one linked
 * WooCommerce product. The customer picks one package via a radio group
 * and the modal's "Book Now" button picks up the chosen ID via JS.
 * ------------------------------------------------------------------------- */
.dior-modal__packages {
	margin: 0 0 16px;
	padding: 12px 14px;
	background: #fafafa;
	border: 1px solid #e5e5e5;
	border-radius: 3px;
}

.dior-modal__packages-title {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 600;
	color: #0a0a0a;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.dior-modal__packages-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.dior-modal__package-option {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	background: #ffffff;
	border: 1px solid #e5e5e5;
	border-radius: 3px;
	cursor: pointer;
	font-size: 13px;
	color: #0a0a0a;
	transition: border-color 120ms ease, background 120ms ease;
}

.dior-modal__package-option:hover {
	border-color: #a3a3a3;
}

.dior-modal__package-option:has(input[type="radio"]:checked),
.dior-modal__package-option.is-selected {
	border-color: #0a0a0a;
	background: #f5f5f5;
}

.dior-modal__package-option input[type="radio"] {
	margin: 0;
	flex-shrink: 0;
	/* Visually hide but keep accessible. */
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

.dior-modal__package-radio {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	border: 1px solid #a3a3a3;
	border-radius: 50%;
	background: #ffffff;
	position: relative;
}

.dior-modal__package-option:has(input[type="radio"]:checked) .dior-modal__package-radio,
.dior-modal__package-option.is-selected .dior-modal__package-radio {
	border-color: #0a0a0a;
}

.dior-modal__package-option:has(input[type="radio"]:checked) .dior-modal__package-radio::after,
.dior-modal__package-option.is-selected .dior-modal__package-radio::after {
	content: "";
	position: absolute;
	inset: 3px;
	background: #0a0a0a;
	border-radius: 50%;
}

.dior-modal__package-id {
	flex: 1;
	min-width: 0;
	font-variant-numeric: tabular-nums;
	color: #525252;
}

/* v1.3.0+ — Product title (full label) + per-package coverage badge.
 *
 * Each option now carries three children:
 *   - the radio control + custom radio circle (already styled above)
 *   - .dior-modal__package-title: the human-readable product title
 *   - .dior-modal__package-coverage: a small badge showing how many days
 *     of access this package grants (per-product override or default).
 *
 * The coverage badge is hidden on very narrow screens so the title keeps
 * its room to breathe.
 */
.dior-modal__package-title {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #0a0a0a;
	font-weight: 500;
}

.dior-modal__package-coverage {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 8px;
	background: #0a0a0a;
	color: #ffffff;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	border-radius: 999px;
	white-space: nowrap;
	line-height: 1.2;
}

.dior-modal__package-coverage--default {
	background: #f5f5f5;
	color: #525252;
	border: 1px solid #d4d4d4;
}

/* v1.3.0+ — Coverage preview block (top of the modal).
 *
 * Mirrors the original CSS structure but is kept in a dedicated block so
 * the per-product refresh logic in `frontend-calendar.js` can target it
 * with `.dior-modal__coverage` (line + meta children).
 */
.dior-modal__coverage {
	margin: 12px 0 16px;
	padding: 10px 14px;
	background: #fafafa;
	border: 1px solid #e5e5e5;
	border-radius: 3px;
}

.dior-modal__coverage-line {
	margin: 0 0 4px;
	font-size: 12px;
	color: #525252;
	line-height: 1.5;
}

.dior-modal__coverage-line:last-child {
	margin-bottom: 0;
}

.dior-modal__coverage-line strong {
	color: #0a0a0a;
	font-weight: 600;
}

.dior-modal__coverage-meta {
	color: #737373;
	font-size: 11px;
	margin-left: 4px;
}

.dior-modal__actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 4px;
}

.dior-modal__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 18px;
	border-radius: 3px;
	border: 1px solid transparent;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
	text-decoration: none;
	font-family: inherit;
	line-height: 1.2;
	letter-spacing: 0.02em;
}

.dior-modal__button--primary {
	background: #0a0a0a;
	color: #ffffff;
	border-color: #0a0a0a;
}

.dior-modal__button--primary:hover {
	background: #262626;
	border-color: #262626;
	color: #ffffff;
}

.dior-modal__button--secondary {
	background: #ffffff;
	color: #0a0a0a;
	border-color: #d4d4d4;
}

.dior-modal__button--secondary:hover {
	background: #fafafa;
	border-color: #0a0a0a;
}

.dior-modal__button:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* v1.x — Row of per-package buttons rendered below the modal actions. One
   anchor per linked WooCommerce product, all opening the same event-wide
   URL set in the dashboard. `flex-wrap` lets each button size to its label
   (no fixed column width fighting long product titles). */
.dior-modal__packages-detail {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 0;
}

.dior-modal__package-detail-btn {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	background: #ffffff;
	color: #000000;
	border: 1px solid #000000;
	border-radius: 3px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.dior-modal__package-detail-btn:hover,
.dior-modal__package-detail-btn:focus-visible {
	background: #000000;
    border-color: #000000;
    color: #FFFFFF;
	outline: none;
}

.dior-modal__thumbnail {
	width: 100%;
	height: auto;
	max-height: 220px;
	object-fit: cover;
	border-radius: 3px;
	margin-bottom: 14px;
	border: 1px solid #e5e5e5;
}

/* ===========================================================================
 * 8. Modal: Day list (multi-event)
 * ========================================================================= */
.dior-modal__event-list {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.dior-modal__event-item {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 10px 14px;
	background: #ffffff;
	border: 1px solid #e5e5e5;
	border-left-width: 3px;
	border-radius: 3px;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
	font-size: 13px;
	color: #0a0a0a;
	transition: background 120ms ease, border-color 120ms ease;
}

.dior-modal__event-item:hover,
.dior-modal__event-item:focus {
	background: #fafafa;
	border-color: #0a0a0a;
	outline: none;
}

.dior-modal__event-item-icon {
	width: 32px;
	height: 32px;
	border-radius: 3px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background: #f5f5f5;
	color: #525252;
	overflow: hidden;
	border: 1px solid #e5e5e5;
}

.dior-modal__event-item-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dior-modal__event-item-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.dior-modal__event-item-title {
	font-weight: 600;
	color: #0a0a0a;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dior-modal__event-item-time {
	font-size: 11px;
	color: #737373;
	letter-spacing: 0.02em;
}

.dior-modal__event-item-badge {
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 3px 7px;
	border-radius: 2px;
	background: #f5f5f5;
	color: #525252;
	flex-shrink: 0;
	border: 1px solid #e5e5e5;
}

.dior-modal__event-item-badge--full {
	background: #0a0a0a;
	color: #ffffff;
	border-color: #0a0a0a;
}

/* ===========================================================================
 * 9. Modal: Spinner / Feedback / Notices
 * ========================================================================= */

/* v1.7.0+ — Modal loading overlay. Mirrors the calendar grid's loading
   state (`.dior-calendar__loading`) so the user gets the same monochrome
   spinner + caption pattern in both places. Reuses the global
   `.dior-calendar__spinner` rule above, no need to duplicate the
   keyframes / border styles. */
.dior-modal__loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 48px 24px;
	min-height: 160px;
	text-align: center;
	color: #0a0a0a;
}

.dior-modal__loading .dior-calendar__spinner {
	width: 36px;
	height: 36px;
	border-width: 3px;
	color: #2563eb;
}

.dior-modal__loading-text {
	font-size: 14px;
	font-weight: 500;
	color: #374151;
	letter-spacing: 0.01em;
}

/* Legacy WordPress-admin spinner kept as a fallback so any cached HTML or
   third-party override that still ships `<span class="spinner is-active">`
   continues to render inside the modal. */
.dior-modal__spinner {
	text-align: center;
	padding: 32px;
}

.dior-modal__spinner .spinner {
	float: none;
	margin: 0 auto;
}

.dior-modal__feedback {
	margin: 0 0 12px;
}

.dior-modal__notice {
	padding: 10px 14px;
	border-radius: 3px;
	font-size: 12px;
	font-weight: 500;
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	gap: 8px;
	border: 1px solid transparent;
}

.dior-modal__notice::before {
	content: '';
	display: inline-block;
	width: 14px;
	height: 14px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	flex-shrink: 0;
}

.dior-modal__notice--success {
	background: #ffffff;
	color: #0a0a0a;
	border-color: #0a0a0a;
}

.dior-modal__notice--success::before {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='3'><polyline points='20 6 9 17 4 12'/></svg>");
}

.dior-modal__notice--error {
	background: #ffffff;
	color: #0a0a0a;
	border-color: #0a0a0a;
}

.dior-modal__notice--error::before {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='3'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>");
}

/* ===========================================================================
 * 10. Book Now button states
 * ========================================================================= */
.dior-modal__button.is-loading {
	position: relative;
	color: transparent !important;
	pointer-events: none;
}

.dior-modal__button.is-loading::after {
	content: '';
	position: absolute;
	width: 14px;
	height: 14px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: dior-button-spin 600ms linear infinite;
	top: 50%;
	left: 50%;
	margin-top: -7px;
	margin-left: -7px;
}

.dior-modal__button.is-success {
	background: #525252 !important;
	border-color: #525252 !important;
	color: #ffffff !important;
}

@keyframes dior-button-spin {
	to { transform: rotate(360deg); }
}

/* ===========================================================================
 * 11. Private Event Inquiry Form (minimalist)
 * ========================================================================= */
.dior-inquiry-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 4px 0 0;
}

.dior-inquiry-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.dior-inquiry-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.dior-inquiry-field label {
	font-size: 11px;
	font-weight: 600;
	color: #525252;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.dior-inquiry-field input[type="text"],
.dior-inquiry-field input[type="email"],
.dior-inquiry-field input[type="tel"],
.dior-inquiry-field input[type="number"],
.dior-inquiry-field textarea {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid #d4d4d4;
	border-radius: 3px;
	font-family: inherit;
	font-size: 13px;
	color: #0a0a0a;
	background: #ffffff;
	transition: border-color 120ms ease;
}

.dior-inquiry-field input:focus,
.dior-inquiry-field textarea:focus {
	outline: none;
	border-color: #0a0a0a;
}

.dior-inquiry-field textarea {
	resize: vertical;
	min-height: 70px;
	line-height: 1.45;
}

.dior-inquiry-field--consent {
	margin-top: 4px;
}

.dior-inquiry-checkbox {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	cursor: pointer;
	font-size: 12px !important;
	font-weight: 400 !important;
	color: #525252 !important;
	line-height: 1.4;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

.dior-inquiry-checkbox input[type="checkbox"] {
	margin-top: 2px;
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	cursor: pointer;
	accent-color: #0a0a0a;
}

.dior-inquiry-error {
	font-size: 11px;
	color: #525252;
	min-height: 14px;
	font-weight: 500;
}

.dior-inquiry-field.has-error input,
.dior-inquiry-field.has-error textarea {
	border-color: #0a0a0a;
	background: #fafafa;
}

.dior-inquiry-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 4px;
}

/* Honeypot: hidden from humans */
.dior-honeypot-field {
	position: absolute !important;
	left: -10000px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ===========================================================================
 * 12. Inquiry success state
 * ========================================================================= */
.dior-inquiry-success {
	text-align: center;
	padding: 16px 8px 8px;
}

.dior-inquiry-success__icon {
	margin: 0 auto 16px;
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fafafa;
	border-radius: 50%;
	border: 1px solid #e5e5e5;
}

.dior-inquiry-success__icon svg {
	display: block;
}

.dior-inquiry-success__title {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 700;
	color: #0a0a0a;
}

.dior-inquiry-success__subtitle {
	margin: 0 0 12px;
	font-size: 12px;
	color: #737373;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.dior-inquiry-success__body {
	margin: 0 auto 20px;
	max-width: 360px;
	font-size: 13px;
	color: #525252;
	line-height: 1.5;
}

.dior-inquiry-success__actions {
	display: flex;
	justify-content: center;
	gap: 10px;
}

/* ===========================================================================
 * 13. Cart event meta line
 * ========================================================================= */
.dior-cart-event-meta {
	margin-top: 4px;
	color: #737373;
	font-size: 12px;
}

.dior-cart-event-meta strong {
	color: #0a0a0a;
}

/* ===========================================================================
 * 14. Focus-visible accessibility
 * ========================================================================= */
.dior-calendar__event-chip:focus-visible,
.dior-modal__event-item:focus-visible,
.dior-modal__button:focus-visible,
.dior-calendar__nav:focus-visible,
.dior-calendar__today:focus-visible {
	outline: 2px solid #0a0a0a;
	outline-offset: 2px;
}

/* ===========================================================================
 * 15. Responsive
 * ========================================================================= */
@media ( max-width: 600px ) {
	.dior-calendar__grid {
		grid-auto-rows: 1fr;
		height: 500px;
	}

	.dior-calendar__day {
		padding: 4px;
		min-height: 64px;
	}

	.dior-calendar__day-number {
		font-size: 11px;
		width: 20px;
		height: 20px;
	}

	.dior-calendar__day--today .dior-calendar__day-number {
		width: 20px;
		height: 20px;
	}

	.dior-calendar__event-chip {
		font-size: 9px;
		padding: 2px 4px 2px 3px;
	}

	.dior-calendar__event-chip-thumb {
		display: none;
	}

	.dior-calendar__title {
		font-size: 13px;
	}

	.dior-calendar__today {
		padding: 0 10px;
	}

	.dior-calendar__today-label {
		font-size: 10px;
		letter-spacing: 0.06em;
	}

	.dior-calendar__legend {
		gap: 8px;
		padding: 10px 12px;
	}

	.dior-calendar__legend-item {
		font-size: 10px;
	}

	.dior-modal__content {
		padding: 20px;
	}

	.dior-modal__header {
		gap: 10px;
	}

	.dior-modal__icon {
		width: 40px;
		height: 40px;
	}

	.dior-inquiry-row {
		grid-template-columns: 1fr;
	}

	.dior-modal__package-option {
		flex-wrap: wrap;
	}

	.dior-modal__package-coverage {
		flex-basis: 100%;
		justify-content: flex-end;
	}
}