/**
 * Formulaire de réservation ATCO — mobile d'abord.
 *
 * DEUX PRINCIPES :
 *
 * 1. La TYPOGRAPHIE est héritée du site (donc pilotable depuis Elementor > Réglages du
 *    site > Typographie). Les COULEURS de disponibilité, en revanche, sont autonomes :
 *    hériter de la couleur d'accent du thème donnait un calendrier illisible quand cette
 *    couleur est sombre. Tout reste surchargeable par les variables ci-dessous, depuis
 *    Elementor > Réglages du site > CSS personnalisé.
 *
 * 2. Les thèmes stylent agressivement les <button> (pilules, ombres, majuscules forcées).
 *    Les trois composants cliquables du calendrier sont donc remis à zéro avec une
 *    spécificité suffisante pour gagner, puis restylés.
 */

.atco-booking {
	--atco-font: inherit;
	--atco-text: inherit;
	--atco-muted: #7c7c85;
	--atco-line: #dcdce1;
	--atco-surface: #fff;
	--atco-shade: #f6f6f8;

	--atco-free: #2f9e78;
	--atco-free-ink: #fff;
	--atco-free-hover: #268264;
	--atco-full: #f3d9e0;
	--atco-full-ink: #8a5a68;
	--atco-select: #1d1d20;

	--atco-radius: 4px;
	--atco-tap: 42px;

	font-family: var(--atco-font);
	color: var(--atco-text);
	margin: 0 0 1.5em;
	max-width: 32rem;
}

.atco-booking *,
.atco-booking *::before,
.atco-booking *::after { box-sizing: border-box; }

/* Champ quantité natif de WooCommerce : masqué, jamais enveloppé.
   C'est MON champ « Personnes » qui porte le nom « quantity ».

   NE JAMAIS masquer « .e-atc-qty-button-holder » : ce conteneur d'Elementor Pro
   enveloppe le champ quantité ET le bouton « Réserver ». Le masquer fait disparaître
   le bouton. On ne cible donc que le champ quantité lui-même. */
body.atco-course-product form.cart .quantity {
	display: none !important;
}

/* ---------- Remise à zéro des boutons du calendrier ---------- */
.atco-booking button.atco-nav,
.atco-booking button.atco-day,
.atco-booking button.atco-slot {
	appearance: none !important;
	-webkit-appearance: none !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background-image: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	font: inherit !important;
	font-weight: 400;
	line-height: 1.2 !important;
	text-align: center;
	text-decoration: none !important;
	width: auto;
	min-width: 0 !important;
	max-width: none !important;
	height: auto;
	padding: 0 !important;
	cursor: pointer;
	transition: background-color .12s ease, color .12s ease;
}

.atco-booking button:focus-visible {
	outline: 2px solid var(--atco-select) !important;
	outline-offset: -2px;
}

/* ---------- Champ Personnes ---------- */
.atco-field { margin-bottom: 1em; }
.atco-field label {
	display: block;
	margin-bottom: .35em;
	font-weight: 600;
}
.atco-field input[type="number"] {
	width: 6.5em;
	min-height: var(--atco-tap);
	padding: .45em .7em;
	font: inherit;
	color: inherit;
	border: 1px solid var(--atco-line);
	border-radius: var(--atco-radius);
	background: var(--atco-surface);
}

/* ---------- Calendrier ---------- */
.atco-calendar {
	border: 1px solid var(--atco-line);
	border-radius: var(--atco-radius);
	overflow: hidden;
	background: var(--atco-surface);
}

.atco-calendar__head {
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--atco-line);
}
.atco-calendar__title {
	flex: 1 1 auto;
	text-align: center;
	padding: .55em .25em;
	font-weight: 700;
	font-size: .95em;
	letter-spacing: .02em;
	text-transform: uppercase;
}

/* Flèches discrètes : 40 px, sans fond ni pilule. */
.atco-booking button.atco-nav {
	flex: 0 0 40px !important;
	width: 40px !important;
	height: 40px !important;
	background-color: transparent !important;
	color: inherit !important;
	font-size: 1.5em !important;
	opacity: .55;
}
.atco-booking button.atco-nav:hover:not(:disabled) { opacity: 1; background-color: var(--atco-shade) !important; }
.atco-booking button.atco-nav:disabled { opacity: .18; cursor: default; }

.atco-calendar__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 1px;
	background: var(--atco-line);
	padding: 1px;
}

.atco-dow {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: .45em 0;
	background: var(--atco-surface);
	font-size: .75em;
	color: var(--atco-muted);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.atco-booking .atco-day,
.atco-booking span.atco-day {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--atco-tap) !important;
	background-color: var(--atco-surface);
	font-size: .95em;
}
.atco-day--blank { background-color: var(--atco-surface); }
.atco-day--off {
	background-color: var(--atco-surface);
	color: var(--atco-muted);
	opacity: .4;
	cursor: default;
}
.atco-booking button.atco-day--free {
	background-color: var(--atco-free) !important;
	color: var(--atco-free-ink) !important;
	font-weight: 600;
}
.atco-booking button.atco-day--free:hover { background-color: var(--atco-free-hover) !important; }
.atco-booking button.atco-day--full {
	background-color: var(--atco-full) !important;
	color: var(--atco-full-ink) !important;
	cursor: not-allowed;
	text-decoration: line-through !important;
}
.atco-booking button.atco-day.is-selected {
	box-shadow: inset 0 0 0 3px var(--atco-select) !important;
}

/* ---------- Légende ---------- */
.atco-legend {
	display: flex;
	flex-wrap: wrap;
	gap: .1em 1.2em;
	margin: .7em 0 0;
	padding: 0;
	list-style: none;
	font-size: .85em;
	color: var(--atco-muted);
}
.atco-legend li { display: flex; align-items: center; gap: .45em; }
.atco-swatch {
	width: .85em;
	height: .85em;
	border-radius: 2px;
	flex: 0 0 auto;
}
.atco-swatch--free { background: var(--atco-free); }
.atco-swatch--full { background: var(--atco-full); border: 1px solid #e3bfca; }

/* ---------- Créneaux ---------- */
.atco-slots { margin-top: 1.3em; }
.atco-slots__hint {
	margin: 0 0 .55em;
	font-size: .9em;
	color: var(--atco-muted);
}
.atco-slots__list { display: flex; flex-direction: column; gap: .45em; }

.atco-booking button.atco-slot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .6em;
	width: 100% !important;
	min-height: var(--atco-tap) !important;
	padding: .55em .9em !important;
	border: 1px solid var(--atco-line) !important;
	border-radius: var(--atco-radius) !important;
	background-color: var(--atco-surface) !important;
	color: inherit !important;
	text-align: left !important;
}
.atco-booking button.atco-slot:hover:not(:disabled) {
	border-color: var(--atco-free) !important;
	background-color: var(--atco-shade) !important;
}
.atco-booking button.atco-slot.is-selected {
	background-color: var(--atco-free) !important;
	border-color: var(--atco-free) !important;
	color: var(--atco-free-ink) !important;
	font-weight: 600;
}
.atco-booking button.atco-slot--full {
	background-color: var(--atco-full) !important;
	border-color: var(--atco-full) !important;
	color: var(--atco-full-ink) !important;
	cursor: not-allowed;
}
.atco-slot__flag {
	font-size: .78em;
	text-transform: uppercase;
	letter-spacing: .05em;
	opacity: .85;
}

/* ---------- Total ---------- */
.atco-total {
	margin: 1.1em 0 0;
	padding: .7em .9em;
	background: var(--atco-shade);
	border-radius: var(--atco-radius);
	font-size: .98em;
}

.atco-error {
	margin: .55em 0 0;
	color: #b3261e;
	font-size: .9em;
}

.atco-booking__empty {
	margin: 0;
	padding: .85em 1em;
	background: var(--atco-shade);
	border-left: 3px solid var(--atco-muted);
	border-radius: 0 var(--atco-radius) var(--atco-radius) 0;
}

/* Bouton « Réserver » tant qu'aucun créneau n'est choisi. */
form.cart .single_add_to_cart_button:disabled {
	opacity: .4;
	cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
	.atco-booking * { transition: none !important; }
}