/* ==========================================================================
   Blue Zone Booking - Front office
   Couleurs : #0080FF (bleu) #1B1B1B (noir) #F2E51A (jaune) #FFFFFF #EEF0F4
   Police titres : "Dark Sport" italic (fallback condensé si absente).
   ========================================================================== */

/* Si "Dark Sport" n'est PAS chargée globalement par le thème, décommente et
   renseigne le chemin du fichier ci-dessous :

@font-face {
	font-family: "Dark Sport";
	src: url("../fonts/DarkSport.woff2") format("woff2");
	font-style: italic;
	font-weight: 400 700;
	font-display: swap;
}
*/

.bzb-front,
.bzb-front * { box-sizing: border-box; }

.bzb-front {
	--bzb-blue: #0080FF;
	--bzb-dark: #1B1B1B;
	--bzb-yellow: #F2E51A;
	--bzb-light: #EEF0F4;
	/* Le fond de la section est desormais bleu : l'accent (etats actifs et
	   survol) devient le jaune, avec un texte fonce pour la lisibilite.
	   Pour repasser a l'ancienne DA (fond clair + accent bleu), il suffit de
	   remettre : --bzb-accent: var(--bzb-blue); --bzb-accent-ink: #fff; */
	--bzb-accent: var(--bzb-yellow);
	--bzb-accent-ink: var(--bzb-dark);
	max-width: 620px;
	color: var(--bzb-dark);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.bzb-front .bzb-heading {
	font-family: "Dark Sport", "Oswald", "Anton", "Arial Narrow", sans-serif;
	font-style: italic;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 3px;
	color: var(--bzb-dark);
	margin: 0 0 6px 0;
	font-size: 34px;
	line-height: 1.08;
}

.bzb-sub {
	font-size: 14px;
	color: #2a2f36;
	margin: 0 0 18px 0;
}

/* Pastille tarif (accent jaune, texte fonce) */
.bzb-price {
	display: inline-block;
	background: var(--bzb-accent);
	color: var(--bzb-accent-ink);
	font-weight: 800;
	font-size: 15px;
	line-height: 1;
	padding: 7px 15px;
	border-radius: 999px;
	margin: 0 0 20px 0;
	letter-spacing: .5px;
}

.bzb-front .bzb-label {
	font-family: "Dark Sport", "Oswald", "Anton", "Arial Narrow", sans-serif;
	font-style: italic;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 22px;
	color: var(--bzb-dark);
	display: block;
	margin: 0 0 12px 0;
}

/* Confort mobile : on réduit un peu les titres sur petits écrans. */
@media (max-width: 480px) {
	.bzb-front .bzb-heading { font-size: 27px; letter-spacing: 2px; }
	.bzb-front .bzb-label { font-size: 18px; }
}

/* --- Étape 1 : sélecteur de jour ---------------------------------------- */

.bzb-days {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 8px;
	margin-bottom: 20px;
	scrollbar-width: thin;
}
.bzb-day {
	flex: 0 0 auto;
	min-width: 64px;
	padding: 10px 8px;
	border: 2px solid var(--bzb-dark);
	background: #fff;
	border-radius: 12px;
	text-align: center;
	cursor: pointer;
	transition: transform .12s ease, background .12s ease, color .12s ease;
	line-height: 1.1;
}
.bzb-day:hover { transform: translateY(-2px); }
.bzb-day .bzb-day-name {
	font-style: italic;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 12px;
}
.bzb-day .bzb-day-num { font-size: 20px; font-weight: 800; }
.bzb-day .bzb-day-mon { font-size: 11px; text-transform: uppercase; color: #5b6472; }
.bzb-day.is-active {
	background: var(--bzb-accent);
	border-color: var(--bzb-accent);
	color: var(--bzb-accent-ink);
}
.bzb-day.is-active .bzb-day-mon { color: rgba(27,27,27,.7); }

/* --- Étape 1 : créneaux ------------------------------------------------- */

.bzb-slots {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: 8px;
	margin-bottom: 6px;
}
.bzb-slot {
	padding: 11px 6px;
	border: 2px solid var(--bzb-dark);
	background: #fff;
	border-radius: 10px;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	text-align: center;
	transition: background .12s ease, color .12s ease, transform .12s ease;
}
.bzb-slot:hover { background: var(--bzb-accent); border-color: var(--bzb-accent); color: var(--bzb-accent-ink); transform: translateY(-2px); }
.bzb-slot:disabled,
.bzb-slot.is-taken {
	background: var(--bzb-light);
	border-color: #cfd4dc;
	color: #9aa1ab;
	cursor: not-allowed;
	text-decoration: line-through;
	transform: none;
}
.bzb-empty {
	font-size: 14px;
	color: #2a2f36;
	padding: 14px 0;
}

/* --- Étape 2 : formulaire ---------------------------------------------- */

.bzb-form-recap {
	background: var(--bzb-dark);
	color: #fff;
	border-radius: 12px;
	padding: 14px 18px;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}
.bzb-form-recap .bzb-recap-txt { font-size: 15px; }
.bzb-form-recap .bzb-recap-txt strong { color: var(--bzb-yellow); }
.bzb-back {
	background: none;
	border: none;
	color: #fff;
	font-size: 13px;
	text-decoration: underline;
	cursor: pointer;
	padding: 0;
}

.bzb-field { margin-bottom: 16px; }
.bzb-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 480px) { .bzb-grid2 { grid-template-columns: 1fr; } }

.bzb-input {
	width: 100%;
	border: none;
	border-bottom: 2px solid var(--bzb-dark);
	background: transparent;
	padding: 10px 2px;
	font-size: 15px;
	color: var(--bzb-dark);
	font-family: inherit;
}
.bzb-input::placeholder {
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 12px;
	color: #5b6472;
	font-style: italic;
}
.bzb-input:focus { outline: none; border-bottom-color: var(--bzb-accent); }
.bzb-input.bzb-error { border-bottom-color: #DC2626; }

.bzb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.bzb-consent {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 13px;
	line-height: 1.45;
	margin: 6px 0 20px 0;
}
.bzb-consent input { margin-top: 3px; }
.bzb-consent.bzb-error { color: #DC2626; }

.bzb-submit {
	width: 100%;
	background: var(--bzb-dark);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 15px 20px;
	font-family: "Dark Sport", "Oswald", "Anton", "Arial Narrow", sans-serif;
	font-style: italic;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 3px;
	font-size: 15px;
	cursor: pointer;
	transition: background .15s ease;
}
.bzb-submit:hover { background: var(--bzb-accent); color: var(--bzb-accent-ink); }
.bzb-submit:disabled { opacity: .6; cursor: default; }

.bzb-msg { font-size: 14px; margin-top: 12px; padding: 10px 14px; border-radius: 8px; }
.bzb-msg.is-error { background: #fdecec; color: #b91c1c; }

/* --- Succès ------------------------------------------------------------- */

.bzb-success {
	text-align: center;
	padding: 8px 0;
}
.bzb-success .bzb-check {
	width: 64px; height: 64px;
	border-radius: 50%;
	background: var(--bzb-accent);
	color: var(--bzb-accent-ink);
	font-size: 34px;
	line-height: 64px;
	margin: 0 auto 16px auto;
	font-weight: 700;
}
.bzb-success .bzb-success-recap {
	background: var(--bzb-dark);
	color: #fff;
	border-radius: 12px;
	padding: 14px 18px;
	margin: 16px auto;
	display: inline-block;
}
.bzb-success .bzb-success-recap strong { color: var(--bzb-yellow); }
.bzb-disclaimer {
	background: var(--bzb-yellow);
	color: var(--bzb-dark);
	border-radius: 12px;
	padding: 14px 18px;
	font-size: 13px;
	line-height: 1.5;
	text-align: left;
	margin: 16px 0;
}
.bzb-restart {
	background: none;
	border: 2px solid var(--bzb-dark);
	border-radius: 999px;
	padding: 11px 22px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 13px;
	cursor: pointer;
	font-style: italic;
}
.bzb-restart:hover { background: var(--bzb-dark); color: #fff; }

.bzb-hidden { display: none !important; }
.bzb-skeleton { color: #5b6472; font-size: 14px; padding: 10px 0; }

/* ==========================================================================
   Neutralisation du kit Elementor
   --------------------------------------------------------------------------
   Elementor applique la couleur d'accent globale du site (ici du rose) sur
   les <button> et <a>, a l'etat normal ET au survol, avec une specificite
   qui passe devant nos regles. On re-impose ici la charte Blue Padel sur
   tous les etats interactifs. Le !important est volontaire : il bat le kit
   global sans avoir a modifier les reglages Elementor.
   Si un jour le rose revient sur un element, l'ajouter dans ce bloc.
   ========================================================================== */

/* Pills de jour : etat normal + survol/focus (jamais de rose) */
.bzb-front .bzb-day,
.bzb-front .bzb-day:hover,
.bzb-front .bzb-day:focus,
.bzb-front .bzb-day:active {
	background-color: #fff !important;
	border-color: var(--bzb-dark) !important;
	color: var(--bzb-dark) !important;
}
.bzb-front .bzb-day .bzb-day-mon { color: #5b6472 !important; }

/* Pill de jour selectionnee : bleu de marque */
.bzb-front .bzb-day.is-active,
.bzb-front .bzb-day.is-active:hover,
.bzb-front .bzb-day.is-active:focus {
	background-color: var(--bzb-accent) !important;
	border-color: var(--bzb-accent) !important;
	color: var(--bzb-accent-ink) !important;
}
.bzb-front .bzb-day.is-active .bzb-day-mon { color: rgba(27,27,27,.7) !important; }

/* Creneaux disponibles : etat normal */
.bzb-front .bzb-slot {
	background-color: #fff !important;
	border-color: var(--bzb-dark) !important;
	color: var(--bzb-dark) !important;
}
/* Creneaux disponibles : survol/focus = bleu de marque */
.bzb-front .bzb-slot:hover,
.bzb-front .bzb-slot:focus {
	background-color: var(--bzb-accent) !important;
	border-color: var(--bzb-accent) !important;
	color: var(--bzb-accent-ink) !important;
}
/* Creneaux pris ou desactives : gris, meme au survol */
.bzb-front .bzb-slot:disabled,
.bzb-front .bzb-slot.is-taken,
.bzb-front .bzb-slot:disabled:hover,
.bzb-front .bzb-slot.is-taken:hover {
	background-color: var(--bzb-light) !important;
	border-color: #cfd4dc !important;
	color: #9aa1ab !important;
}

/* Bouton Reserver : noir, survol jaune, aucun contour ni ombre Elementor */
.bzb-front .bzb-submit,
.bzb-front .bzb-submit:hover,
.bzb-front .bzb-submit:focus {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}
.bzb-front .bzb-submit {
	background-color: var(--bzb-dark) !important;
	color: #fff !important;
}
.bzb-front .bzb-submit:hover,
.bzb-front .bzb-submit:focus {
	background-color: var(--bzb-accent) !important;
	color: var(--bzb-accent-ink) !important;
}

/* Bouton Nouvelle reservation (contour) */
.bzb-front .bzb-restart {
	background-color: transparent !important;
	border-color: var(--bzb-dark) !important;
	color: var(--bzb-dark) !important;
	outline: none !important;
	box-shadow: none !important;
}
.bzb-front .bzb-restart:hover,
.bzb-front .bzb-restart:focus {
	background-color: var(--bzb-dark) !important;
	color: #fff !important;
}

/* Lien "Modifier le creneau" dans l'encadre sombre : texte souligne, sans fond ni contour Elementor */
.bzb-front .bzb-back,
.bzb-front .bzb-back:hover,
.bzb-front .bzb-back:focus {
	background-color: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	color: #fff !important;
	text-decoration: underline !important;
}

/* Champs de saisie sur fond bleu : texte blanc, placeholder blanc translucide,
   soulignement blanc, focus jaune, erreur rouge clair. */
.bzb-front .bzb-input {
	color: #fff !important;
	background-color: transparent !important;
	border: none !important;
	border-bottom: 2px solid rgba(255,255,255,.55) !important;
}
.bzb-front .bzb-input::placeholder {
	color: rgba(255,255,255,.6) !important;
	opacity: 1 !important;
}
.bzb-front .bzb-input:focus {
	border-bottom-color: var(--bzb-accent) !important;
}
.bzb-front .bzb-input.bzb-error {
	border-bottom-color: #ff6b6b !important;
}

/* Mention "champs obligatoires" (accent jaune, visible sur fond bleu) */
.bzb-front .bzb-required-note {
	font-size: 12px;
	color: var(--bzb-accent);
	margin: 0 0 16px 0;
}