/* =========================================================================
   BW Booking Form — Le Manoir Hôtel
   Formulaire de réservation câblé au moteur Best Western.
   -------------------------------------------------------------------------
   Design : bandeau bleu ardoise (charte Manoir), champs clairs, bouton orange.
   Horizontal sur desktop, se replie proprement sur mobile.

   RÈGLE ANTI-CONFLIT : ce module vit dans WordPress/Elementor, dont les thèmes
   imposent des styles agressifs sur form/input/select/button/label. Toutes les
   propriétés qui décident du RENDU (fond, couleur, bordure, display) sont donc
   forcées (!important) et TOUT est préfixé .bwbf. C'est volontaire et nécessaire.

   POUR RACCORDER À UN AUTRE HÔTEL : ajuster les variables ci-dessous.
   ========================================================================= */

.bwbf {
	--bwbf-slate:        #274349;   /* Bleu ardoise — fond du bandeau (marque) */
	--bwbf-slate-2:      #1e343a;   /* Bleu plus profond — séparateurs/ombres */
	--bwbf-accent:       #E08E42;   /* Orange doré — bouton + fine ligne accent */
	--bwbf-accent-hover: #cf7c30;
	--bwbf-on-slate:     #ffffff;   /* Texte sur le bleu */
	--bwbf-muted:        rgba(255,255,255,.66); /* Libellés sur le bleu */
	--bwbf-field-bg:     #ffffff;   /* Fond des champs (cellules claires) */
	--bwbf-field-text:   #274349;   /* Texte dans les champs */
	--bwbf-field-border: rgba(255,255,255,.18);

	--bwbf-font:         "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--bwbf-font-display: "Roboto Slab", Georgia, serif;
	--bwbf-radius:       6px;

	box-sizing: border-box;
	font-family: var(--bwbf-font) !important;
	color: var(--bwbf-on-slate);
	width: 100%;
	max-width: 1040px;
	margin: 0 auto;
}
.bwbf *, .bwbf *::before, .bwbf *::after { box-sizing: border-box; }

/* --- Le bandeau : fond bleu ardoise, fine ligne orange en haut (signature) --- */
.bwbf .bwbf__form {
	display: flex !important;
	flex-flow: row nowrap;
	align-items: stretch;
	gap: 0;
	/* Fond bleu ardoise légèrement translucide : laisse deviner la photo.
	   Repli opaque si le flou n'est pas géré (voir @supports plus bas). */
	background: rgba(39, 67, 73, .88) !important;
	background-image: none !important;
	-webkit-backdrop-filter: blur(6px) saturate(1.05);
	backdrop-filter: blur(6px) saturate(1.05);
	border-top: 3px solid var(--bwbf-accent) !important;
	border-radius: var(--bwbf-radius);
	overflow: hidden;
	box-shadow: 0 18px 50px -20px rgba(20,36,40,.75);
	padding: 0 !important;
	margin: 0 !important;
}
/* Si le navigateur ne gère pas le flou, on rend le fond quasi opaque pour rester lisible. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.bwbf .bwbf__form { background: rgba(39, 67, 73, .97) !important; }
}

/* Colonne contenu : occupe l'espace, peut passer sur plusieurs lignes. */
.bwbf .bwbf__content {
	display: flex !important;
	flex-flow: row wrap;
	align-items: stretch;
	flex: 1 1 auto;
	min-width: 0;
	background: transparent !important;
}

/* --- Rangée principale (dates + occupants) --- */
.bwbf .bwbf__main {
	display: flex !important;
	flex-flow: row wrap;
	align-items: stretch;
	flex: 1 1 100%;
	min-width: 0;
	background: transparent !important;
}

/* --- Cellule de champ : une "touche" claire séparée par une ligne fine --- */
.bwbf .bwbf__field {
	display: flex !important;
	flex-direction: column !important;
	justify-content: center;
	gap: 5px;
	flex: 1 1 150px;
	min-width: 0;
	padding: 16px 20px !important;
	background: transparent !important;
	border-right: 1px solid var(--bwbf-field-border) !important;
}
.bwbf__field:last-of-type { border-right: none !important; }

.bwbf .bwbf__label {
	display: block !important;
	font-family: var(--bwbf-font-display) !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: .08em !important;
	text-transform: uppercase !important;
	color: var(--bwbf-muted) !important;
	margin: 0 !important;
	line-height: 1.2 !important;
}

/* Champs : fond blanc, texte ardoise, lisibles. Calendriers natifs préservés. */
.bwbf .bwbf__input,
.bwbf .bwbf__select {
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	background: var(--bwbf-field-bg) !important;
	color: var(--bwbf-field-text) !important;
	border: 1px solid rgba(39,67,73,.15) !important;
	border-radius: 4px !important;
	padding: 9px 10px !important;
	font-family: var(--bwbf-font) !important;
	font-size: 15px !important;
	line-height: 1.2 !important;
	height: auto !important;
	margin: 0 !important;
	appearance: auto !important;
	-webkit-appearance: auto !important;
	box-shadow: none !important;
	min-height: 0 !important;
}
.bwbf .bwbf__input:focus,
.bwbf .bwbf__select:focus {
	outline: 2px solid var(--bwbf-accent) !important;
	outline-offset: 1px !important;
	border-color: var(--bwbf-accent) !important;
}
/* Les options du select restent sur fond clair (menu natif). */
.bwbf__select option { color: #274349 !important; background: #fff !important; }

/* Les deux champs occupants (adultes/enfants) côte à côte dans une cellule. */
.bwbf .bwbf__occ {
	display: flex !important;
	gap: 10px !important;
}
.bwbf__occ .bwbf__occ-item { flex: 1 1 0; min-width: 60px; }

/* --- Bouton principal : orange, pleine hauteur à droite --- */
.bwbf .bwbf__submit {
	flex: 0 0 auto !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 14px !important;
	align-self: stretch !important;
	background: var(--bwbf-accent) !important;
	background-image: none !important;
	color: #fff !important;
	font-family: var(--bwbf-font-display) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	letter-spacing: .06em !important;
	text-transform: uppercase !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 40px !important;
	margin: 0 !important;
	cursor: pointer !important;
	transition: background .15s ease !important;
}
.bwbf .bwbf__submit-text { display: block; }
/* Pastille ronde fléchée (rappel du bouton "Réserver maintenant" de l'ancien moteur). */
.bwbf .bwbf__submit-icon {
	display: block;
	width: 42px;
	height: 42px;
	border-radius: 50% !important;
	background: rgba(255,255,255,.16)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E")
		center / 18px no-repeat;
	border: 1.5px solid rgba(255,255,255,.55);
	transition: transform .15s ease, background-color .15s ease;
}
.bwbf .bwbf__submit:hover { background: var(--bwbf-accent-hover) !important; }
.bwbf .bwbf__submit:hover .bwbf__submit-icon { transform: translateX(3px); background-color: rgba(255,255,255,.26); }
.bwbf .bwbf__submit:focus-visible { outline: 2px solid #fff !important; outline-offset: -5px !important; }

/* --- Ligne secondaire : "+ chambre" et code société, discrète --- */
.bwbf .bwbf__extra {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	flex: 1 1 100%;
	padding: 12px 20px !important;
	background: rgba(0,0,0,.15) !important;
	border-top: 1px solid rgba(255,255,255,.08) !important;
}
.bwbf .bwbf__add-room,
.bwbf .bwbf__corporate-toggle {
	background: none !important;
	border: none !important;
	color: var(--bwbf-on-slate) !important;
	font-family: var(--bwbf-font) !important;
	font-size: 13px !important;
	cursor: pointer !important;
	padding: 0 !important;
	text-decoration: none;
	opacity: .9;
}
.bwbf__add-room:hover, .bwbf__corporate-toggle:hover { color: var(--bwbf-accent) !important; opacity: 1; }
.bwbf__corporate-field { flex: 1 1 100%; margin-top: 8px; max-width: 280px; }
.bwbf__corporate-field .bwbf__input { color: #274349 !important; }

/* --- Chambres additionnelles : cartes claires empilées sous le bandeau --- */
.bwbf__rooms { display: contents; } /* la 1re chambre s'intègre à la rangée */
.bwbf__room { display: contents; }  /* par défaut ; surchargé dès la 2e chambre */

/* Chambre = cellule occupants dans la rangée principale (1re chambre). */
.bwbf__room-body { display: contents; }
.bwbf__room-head { display: none !important; }

/* Dès qu'il y a plusieurs chambres, on bascule en cartes empilées. */
.bwbf--multi .bwbf__rooms {
	display: flex !important;
	flex-flow: row wrap;
	gap: 12px;
	flex: 1 1 100%;
	padding: 14px 20px !important;
	background: rgba(0,0,0,.12) !important;
}
.bwbf--multi .bwbf__room {
	display: flex !important;
	flex-direction: column;
	gap: 10px;
	flex: 1 1 200px;
	max-width: 300px;
	padding: 14px !important;
	background: rgba(255,255,255,.06) !important;
	border: 1px solid rgba(255,255,255,.12) !important;
	border-radius: var(--bwbf-radius);
}
.bwbf--multi .bwbf__room-head {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	margin: 0 !important;
}
.bwbf--multi .bwbf__room-title {
	font-family: var(--bwbf-font-display) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--bwbf-on-slate) !important;
}
.bwbf--multi .bwbf__room-remove {
	background: none !important; border: none !important;
	color: var(--bwbf-muted) !important; font-size: 12px !important;
	cursor: pointer !important; text-decoration: underline; padding: 0 !important;
}
.bwbf--multi .bwbf__room-remove:hover { color: var(--bwbf-accent) !important; }
.bwbf--multi .bwbf__room-body { display: flex !important; flex-wrap: wrap; gap: 10px; }
.bwbf--multi .bwbf__room .bwbf__field {
	padding: 0 !important; border: none !important; flex: 1 1 80px;
}
.bwbf--multi .bwbf__room .bwbf__label { color: var(--bwbf-muted) !important; }
.bwbf__child-ages { display: flex !important; flex-wrap: wrap; gap: 10px; flex-basis: 100%; }

/* ------------------------------------------------------------------------- 
   MOBILE : tout s'empile, le bandeau devient une colonne, bouton pleine largeur.
   ------------------------------------------------------------------------- */
@media (max-width: 760px) {
	.bwbf .bwbf__form { flex-direction: column; }
	.bwbf .bwbf__main { flex-direction: column; flex: 1 1 100%; }
	.bwbf .bwbf__field {
		border-right: none !important;
		border-bottom: 1px solid var(--bwbf-field-border) !important;
	}
	.bwbf .bwbf__submit {
		flex-direction: row !important;
		flex: 1 1 100% !important;
		padding: 16px !important;
		gap: 14px !important;
	}
	.bwbf .bwbf__submit-icon { width: 34px; height: 34px; }
	.bwbf--multi .bwbf__room { max-width: none; flex: 1 1 100%; }
}

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