/*
 * Shortcode [calendrier_reservations] — calendrier front (N prochains mois), lecture seule.
 *
 * Le rouge « réservé » = point de réglage unique `--tris-brand-red` (cf. OVERRIDES.md),
 * repli littéral `#c0392b`. Le reste consomme les tokens `--component-*` du thème enfant.
 */

.tris-resa-cal {
	--tris-resa-cal-red: var(--tris-brand-red, #c0392b);
	max-width: var(--component-max-width, 1200px);
	margin: 0 auto;
	font-family: var(--component-font-family, inherit);
	color: var(--component-color-text, #333);
}

.tris-resa-cal__title {
	margin: 0 0 12px;
	text-transform: none;
	color: var(--component-color-dark, #1a1a1a);
}

.tris-resa-cal__legend {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 22px;
	font-size: 15px;
	color: var(--component-color-text, #555);
}

.tris-resa-cal__legend-swatch {
	flex: none;
	width: 16px;
	height: 16px;
	border-radius: 3px;
	background: var(--tris-resa-cal-red);
}

.tris-resa-cal__months {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
	gap: 24px;
}

.tris-resa-cal__month {
	border: 1px solid var(--component-color-border, #e0e0e0);
	border-radius: var(--component-radius, 6px);
	overflow: hidden;
	background: #fff;
}

.tris-resa-cal__caption {
	padding: 11px 8px;
	background: var(--component-color-dark, #1a1a1a);
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.09em;
	text-align: center;
}

.tris-resa-cal__table {
	width: 100%;
	/* Enfold ajoute 20px sous chaque tableau : zone blanche en bas de la carte */
	margin: 0;
	border-collapse: collapse;
	table-layout: fixed;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}

.tris-resa-cal__dow {
	padding: 8px 0;
	background: #fafafa;
	font-size: 12px;
	font-weight: 600;
	color: var(--component-color-meta, #8a8a8a);
	text-align: center;
}

/* Hauteur fixe (padding Enfold neutralisé) : cases pleines et vides de même hauteur */
#top .tris-resa-cal__cell {
	height: 34px;
	padding: 0;
	line-height: 34px;
	text-align: center;
	vertical-align: middle;
}

/* Pas de bordure de case sur le pourtour : seule la bordure arrondie de la carte
   (sinon double trait, et liseré blanc en bas / coins non arrondis) */
#top .tris-resa-cal__table tr > :first-child {
	border-left: 0;
}

#top .tris-resa-cal__table tr > :last-child {
	border-right: 0;
}

#top .tris-resa-cal__table tbody tr:last-child > td {
	border-bottom: 0;
}

.tris-resa-cal__cell--empty {
	background: #ededed;
}

.tris-resa-cal__day {
	background: #fff;
	color: var(--component-color-dark, #222);
}

.tris-resa-cal__day.is-past {
	color: #c2c2c2;
}

.tris-resa-cal__day.is-today {
	outline: 2px solid var(--component-color-primary, #1e73be);
	outline-offset: -2px;
	font-weight: 700;
}

.tris-resa-cal__day.is-reserved {
	background: var(--tris-resa-cal-red);
	color: #fff;
	font-weight: 700;
	text-decoration: line-through;
}

/* Mobile : un mois par ligne (à deux par ligne, les cases débordaient) */
@media (max-width: 520px) {
	.tris-resa-cal__months {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}

	.tris-resa-cal__table {
		font-size: 13px;
	}
}

/* ============================================================
   Formulaire de demande (Ninja Forms) — champ date en période
   Classes posées par assets/js/shortcodes/reservations-formulaire.js :
   .tris-resa-form__date (champ ; son formulaire est ciblé via :has()),
   .tris-resa-picker (calendrier flatpickr, ajouté à la fin du <body>).
============================================================ */

.tris-resa-form__notice {
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.4;
	color: var(--component-color-text, #555);
}

.tris-resa-form__notice.is-error {
	color: var(--tris-brand-red, #c0392b);
	font-weight: 600;
}

/* iOS zoome sur tout champ en dessous de 16px : on l'évite sur mobile
   (#wrap_all : doit battre la règle « #nf-field-XX-wrap » des réglages de style Ninja Forms) */
@media (max-width: 767px) {
	#top #wrap_all .nf-form-cont:has(.tris-resa-form__date) .nf-field-element .nf-element {
		font-size: 16px;
	}
}

/* En-tête du calendrier : neutralise les styles génériques Enfold des select/input */
#top .tris-resa-picker .flatpickr-current-month {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding-top: 6px;
	font-size: 17px;
}

#top .tris-resa-picker .flatpickr-monthDropdown-months,
#top .tris-resa-picker .numInputWrapper input.cur-year {
	display: inline-block;
	width: auto;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 2px 4px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	box-shadow: none;
	color: var(--component-color-dark, #1a1a1a);
	font-size: inherit;
	font-weight: 600;
	line-height: 1.3;
}

#top .tris-resa-picker .numInputWrapper {
	width: 6ch;
}

/* Période sélectionnée : rouge de marque */
.tris-resa-picker {
	--tris-resa-picker-red: var(--tris-brand-red, #c0392b);
	--tris-resa-picker-soft: color-mix(in srgb, var(--tris-resa-picker-red) 12%, #ffffff);
}

#top .tris-resa-picker .flatpickr-day.selected,
#top .tris-resa-picker .flatpickr-day.startRange,
#top .tris-resa-picker .flatpickr-day.endRange,
#top .tris-resa-picker .flatpickr-day.selected:hover,
#top .tris-resa-picker .flatpickr-day.startRange:hover,
#top .tris-resa-picker .flatpickr-day.endRange:hover {
	background: var(--tris-resa-picker-red);
	border-color: var(--tris-resa-picker-red);
	color: #fff;
}

.tris-resa-picker .flatpickr-day.inRange {
	background: var(--tris-resa-picker-soft);
	border-color: var(--tris-resa-picker-soft);
	box-shadow: -5px 0 0 var(--tris-resa-picker-soft), 5px 0 0 var(--tris-resa-picker-soft);
}

.tris-resa-picker .flatpickr-day.startRange + .endRange:not(:nth-child(7n + 1)) {
	box-shadow: -10px 0 0 var(--tris-resa-picker-red);
}

/* Jours déjà réservés : barrés, comme sur le calendrier des disponibilités */
.tris-resa-picker .flatpickr-day.is-reserved,
.tris-resa-picker .flatpickr-day.is-reserved:hover {
	background: var(--tris-resa-picker-soft);
	border-color: transparent;
	color: var(--tris-resa-picker-red);
	text-decoration: line-through;
}