/* Mobile first : 90% des clients réservent depuis leur téléphone.
   Charte graphique douce et bienveillante, tons pastels du logo. */

.pbr-service-widget {
	font-family: var( --pbr-font, sans-serif );
	color: var( --pbr-ink, #4a3f33 );
	border: 1px solid var( --pbr-border, #eee );
	border-radius: var( --pbr-radius-l, 22px );
	padding: 18px;
	width: 100%;
	box-sizing: border-box;
	font-size: 16px;
	background: var( --pbr-white, #fff );
}

.pbr-service-name {
	margin-top: 0;
	color: var( --pbr-brown-dark, #5c4a38 );
}

.pbr-service-coming-soon {
	color: var( --pbr-muted, #888 );
	font-style: italic;
}

/* Widget flottant */
#pbr-floating-bubble {
	position: fixed;
	right: 16px;
	bottom: calc( 16px + env( safe-area-inset-bottom, 0px ) );
	width: 60px;
	height: 60px;
	/* !important nécessaire : le thème (Salient) impose un border-radius à tous
	   les <button>, qui l'emporterait sinon malgré le sélecteur #id. */
	border-radius: 50% !important;
	background: #fefaf6;
	color: #fff;
	border: none;
	box-shadow: 0 6px 20px rgba( 60, 45, 30, 0.16 );
	font-size: 26px;
	cursor: pointer;
	z-index: 99998;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.pbr-floating-bubble-icon {
	width: 32px;
	height: 32px;
	object-fit: contain;
}

.pbr-floating-modal {
	position: fixed;
	inset: 0;
	background: var( --pbr-cream, #fff );
	z-index: 99999;
	font-family: var( --pbr-font, sans-serif );
	color: var( --pbr-ink, #4a3f33 );
}

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

.pbr-floating-modal-panel {
	background: var( --pbr-cream, #fff );
	width: 100%;
	height: 100%;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 56px 16px 24px;
	position: relative;
	box-sizing: border-box;
}

.pbr-floating-modal-close {
	position: fixed;
	top: max( 10px, env( safe-area-inset-top, 10px ) );
	right: 12px;
	width: 44px;
	height: 44px;
	border: none;
	background: var( --pbr-pink-light, #f5efe8 );
	color: var( --pbr-brown-dark, #5c4a38 );
	border-radius: 50%;
	font-size: 20px;
	cursor: pointer;
	z-index: 1;
}

.pbr-floating-service-choice {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: left;
	padding: 16px 18px;
	margin: 8px 0;
	border: 1px solid var( --pbr-border, #e5ddd2 );
	border-radius: var( --pbr-radius, 16px );
	background: var( --pbr-white, #fffdfa );
	cursor: pointer;
	font-size: 16px;
	font-weight: 600;
	color: var( --pbr-brown-dark, #333 );
	min-height: 52px;
}

.pbr-floating-service-choice:hover {
	background: var( --pbr-mint-light, #f5efe8 );
	border-color: var( --pbr-mint, #8fc9b8 );
}

/* Choix du service (widget flottant) : cartes horizontales avec icône,
   nom/description/prix — remplace la liste de boutons texte d'origine. */
.pbr-service-choice-intro {
	margin-top: 0;
}

.pbr-service-cards {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pbr-service-card {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	box-sizing: border-box;
	text-align: left;
	padding: 12px;
	border: 1px solid var( --pbr-border, #e5ddd2 );
	border-radius: var( --pbr-radius-l, 20px );
	background: var( --pbr-white, #fffdfa );
	cursor: pointer;
	font-family: inherit;
}

.pbr-service-card:hover {
	background: var( --pbr-mint-light, #f5efe8 );
	border-color: var( --pbr-mint, #8fc9b8 );
}

.pbr-service-card-icon {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	border-radius: var( --pbr-radius, 16px );
	overflow: hidden;
	background: var( --pbr-mint-light, #f5efe8 );
}

.pbr-service-card-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pbr-service-card-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.pbr-service-card-name {
	font-size: 16px;
	font-weight: 700;
	color: var( --pbr-brown-dark, #5c4a38 );
}

.pbr-service-card-desc {
	font-size: 13px;
	color: var( --pbr-muted, #888 );
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.pbr-service-card-price {
	font-size: 14px;
	font-weight: 700;
	color: var( --pbr-mint-dark, #5fa48d );
	margin-top: 2px;
}

/* Vrai calendrier mensuel (façon Calendly, nos couleurs) : grille de cases
   rondes, navigation mois par mois, jour sélectionné en évidence, jours sans
   créneau visiblement grisés. Les créneaux du jour choisi apparaissent en
   fondu à côté (desktop, voir plus bas) ou en dessous (mobile, par défaut). */
.pbr-datepicker {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.pbr-calendar {
	width: 100%;
}

.pbr-cal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
	font-weight: 700;
	color: var( --pbr-brown-dark, #5c4a38 );
	text-transform: capitalize;
}

.pbr-cal-nav-btn {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var( --pbr-border, #e5ddd2 );
	background: var( --pbr-white, #fff );
	color: var( --pbr-ink, #4a3f33 );
	font-size: 16px;
	cursor: pointer;
	font-family: inherit;
}

.pbr-cal-nav-btn:disabled {
	opacity: 0.3;
	cursor: default;
}

.pbr-cal-weekdays {
	display: grid;
	grid-template-columns: repeat( 7, 1fr );
	text-align: center;
	margin-bottom: 6px;
}

.pbr-cal-weekday-mini {
	font-size: 11px;
	font-weight: 700;
	color: var( --pbr-muted, #97897a );
}

.pbr-cal-days {
	display: grid;
	grid-template-columns: repeat( 7, 1fr );
	gap: 4px;
}

.pbr-cal-empty {
	aspect-ratio: 1;
}

.pbr-cal-day {
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: var( --pbr-mint-light, #e6f4ef );
	color: var( --pbr-ink, #4a3f33 );
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	font-family: inherit;
	transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.pbr-cal-day:hover:not( :disabled ) {
	transform: scale( 1.08 );
}

.pbr-cal-day-selected {
	background: var( --pbr-mint, #8fc9b8 );
	color: #fff;
}

.pbr-cal-day-disabled {
	background: transparent;
	color: var( --pbr-muted, #97897a );
	opacity: 0.45;
	cursor: default;
}

.pbr-slot-panel-date {
	font-weight: 700;
	text-transform: capitalize;
	color: var( --pbr-brown-dark, #5c4a38 );
	margin: 0 0 10px;
}

/* Fondu doux à chaque changement de jour (nouveau nœud DOM à chaque rendu,
   donc l'animation se relance automatiquement, pas besoin de JS dédié). */
.pbr-fade-in {
	animation: pbrFadeIn 0.28s ease;
}

@keyframes pbrFadeIn {
	from {
		opacity: 0;
		transform: translateY( 6px );
	}
	to {
		opacity: 1;
		transform: translateY( 0 );
	}
}

/* Loader "roller" (voir aussi backoffice.css, dupliqué ici car les deux
   feuilles de style sont chargées séparément) : remplace le texte
   "Chargement…" du widget par un loader animé dans nos couleurs. Local au
   widget (pas un overlay plein écran) puisque ce composant peut être
   embarqué au milieu d'une page quelconque du site. */
.pbr-widget-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 160px;
}

.pbr-widget-loading .lds-roller {
	color: var( --pbr-mint-dark, #5fa48d );
}

.lds-roller,
.lds-roller div,
.lds-roller div:after {
	box-sizing: border-box;
}
.lds-roller {
	display: inline-block;
	position: relative;
	width: 70px;
	height: 70px;
}
.lds-roller div {
	animation: pbr-lds-roller 1.2s cubic-bezier( 0.5, 0, 0.5, 1 ) infinite;
	transform-origin: 35px 35px;
}
.lds-roller div:after {
	content: ' ';
	display: block;
	position: absolute;
	width: 6.3px;
	height: 6.3px;
	border-radius: 50%;
	background: currentColor;
	margin: -3.15px 0 0 -3.15px;
}
.lds-roller div:nth-child( 1 ) {
	animation-delay: -0.036s;
}
.lds-roller div:nth-child( 1 ):after {
	top: 54.8px;
	left: 54.8px;
}
.lds-roller div:nth-child( 2 ) {
	animation-delay: -0.072s;
}
.lds-roller div:nth-child( 2 ):after {
	top: 59.25px;
	left: 49px;
}
.lds-roller div:nth-child( 3 ) {
	animation-delay: -0.108s;
}
.lds-roller div:nth-child( 3 ):after {
	top: 62.05px;
	left: 42.25px;
}
.lds-roller div:nth-child( 4 ) {
	animation-delay: -0.144s;
}
.lds-roller div:nth-child( 4 ):after {
	top: 63px;
	left: 35px;
}
.lds-roller div:nth-child( 5 ) {
	animation-delay: -0.18s;
}
.lds-roller div:nth-child( 5 ):after {
	top: 62.05px;
	left: 27.75px;
}
.lds-roller div:nth-child( 6 ) {
	animation-delay: -0.216s;
}
.lds-roller div:nth-child( 6 ):after {
	top: 59.25px;
	left: 21px;
}
.lds-roller div:nth-child( 7 ) {
	animation-delay: -0.252s;
}
.lds-roller div:nth-child( 7 ):after {
	top: 54.8px;
	left: 15.2px;
}
.lds-roller div:nth-child( 8 ) {
	animation-delay: -0.288s;
}
.lds-roller div:nth-child( 8 ):after {
	top: 49px;
	left: 10.75px;
}
@keyframes pbr-lds-roller {
	0% {
		transform: rotate( 0deg );
	}
	100% {
		transform: rotate( 360deg );
	}
}

.pbr-slot-list {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 8px;
}

.pbr-slot-choice {
	border: 1px solid var( --pbr-border, #e5ddd2 );
	background: var( --pbr-white, #fffdfa );
	color: var( --pbr-ink, #333 );
	border-radius: var( --pbr-radius, 12px );
	padding: 12px 4px;
	font-size: 15px;
	font-weight: 600;
	min-height: 44px;
	cursor: pointer;
}

.pbr-slot-choice:hover {
	background: var( --pbr-pink-light, #f5efe8 );
	border-color: var( --pbr-pink, #f2a99a );
}

.pbr-human-choice {
	font-weight: 600;
}

.pbr-back-link {
	border: none;
	background: transparent;
	color: var( --pbr-pink-dark, #dd7f6d );
	font-size: 15px;
	font-weight: 600;
	padding: 8px 0;
	margin-bottom: 8px;
	cursor: pointer;
	min-height: 36px;
}

.pbr-booking-summary {
	background: var( --pbr-mint-light, #f5efe8 );
	border-radius: var( --pbr-radius, 14px );
	padding: 14px 16px;
	font-size: 14px;
	line-height: 1.6;
	color: var( --pbr-brown-dark, #333 );
}

.pbr-client-form label {
	display: block;
	font-size: 13px;
	color: var( --pbr-muted, #555 );
	margin-bottom: 4px;
}

.pbr-client-form .pbr-input {
	width: 100%;
	box-sizing: border-box;
	padding: 12px;
	margin: 0 0 14px;
	border: 1px solid var( --pbr-border, #ccc );
	border-radius: var( --pbr-radius-s, 10px );
	font-size: 16px;
	min-height: 46px;
	font-family: inherit;
	background: var( --pbr-cream, #fff );
}

.pbr-client-form .pbr-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13px;
	margin-bottom: 16px;
}

.pbr-client-form .pbr-checkbox input {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	margin-top: 2px;
	accent-color: var( --pbr-mint-dark, #5fa48d );
}

.pbr-full-width {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	border: none;
	border-radius: var( --pbr-radius-pill, 999px );
	background: var( --pbr-mint, #8fc9b8 );
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	padding: 14px;
	min-height: 48px;
	cursor: pointer;
	font-family: inherit;
}

.pbr-booking-error {
	color: var( --pbr-danger, #a33 );
	font-size: 14px;
	margin-top: 10px;
}

.pbr-booking-success {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 24px 16px 40px;
	color: var( --pbr-brown-dark, #333 );
}

.pbr-booking-success-logo {
	width: 84px;
	height: 84px;
	border-radius: 50%;
	object-fit: cover;
	margin-bottom: 14px;
	box-shadow: var( --pbr-shadow, 0 4px 18px rgba( 138, 113, 86, 0.12 ) );
}

.pbr-booking-success-title {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 4px;
}

.pbr-booking-success-note {
	margin-top: 22px;
	padding: 16px;
	border: 1px dashed var( --pbr-border, #e5ddd2 );
	border-radius: var( --pbr-radius, 16px );
	background: var( --pbr-mint-light, #f5efe8 );
	max-width: 260px;
}

.pbr-booking-success-note img {
	width: 48px;
	height: 48px;
	border-radius: var( --pbr-radius-s, 10px );
	object-fit: cover;
	margin-bottom: 8px;
}

.pbr-booking-success-note p {
	margin: 0;
	font-size: 13px;
	color: var( --pbr-muted, #888 );
}

.pbr-booking-success-merci {
	margin-top: 20px;
	font-family: var( --pbr-font, sans-serif );
	font-size: 26px;
	font-weight: 700;
	color: var( --pbr-pink-dark, #dd7f6d );
}

#pbr-payment-element {
	margin: 16px 0;
}

@media ( min-width: 480px ) {
	.pbr-slot-list {
		grid-template-columns: repeat( 4, 1fr );
	}
}

/* À partir d'un écran tablette/desktop, la modale redevient une fenêtre centrée
   plutôt que plein écran, et le calendrier passe en 2 colonnes façon Calendly
   (le mois à gauche, les créneaux du jour choisi à droite). */
@media ( min-width: 700px ) {
	.pbr-service-widget {
		max-width: 480px;
	}

	.pbr-floating-modal {
		background: rgba( 74, 63, 51, 0.4 );
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.pbr-floating-modal-panel {
		width: min( 560px, 92vw );
		height: auto;
		max-height: 90vh;
		border-radius: var( --pbr-radius-l, 22px );
		padding: 24px;
	}

	.pbr-floating-modal-close {
		position: absolute;
		top: 10px;
		right: 14px;
	}

	#pbr-floating-bubble {
		right: 24px;
		bottom: 24px;
	}
}

/* Desktop réel : on profite de la place pour un formulaire plus confortable,
   et le calendrier passe en 2 colonnes façon Calendly (le mois à gauche, les
   créneaux du jour choisi à droite) — pas assez de place pour ça avant cette
   largeur sans que ce soit sur les cases de la vue tablette juste au-dessus. */
@media ( min-width: 1024px ) {
	.pbr-service-widget {
		max-width: 680px;
		padding: 26px;
	}

	.pbr-datepicker {
		flex-direction: row;
		align-items: flex-start;
		gap: 22px;
	}

	.pbr-calendar {
		width: 280px;
		flex-shrink: 0;
	}

	.pbr-slot-panel {
		flex: 1;
		min-width: 0;
		border-left: 1px solid var( --pbr-border, #e5ddd2 );
		padding-left: 22px;
	}

	.pbr-slot-list {
		grid-template-columns: repeat( 2, 1fr );
		gap: 10px;
	}

	.pbr-slot-choice,
	.pbr-service-card {
		cursor: pointer;
		transition: transform 0.08s ease;
	}

	.pbr-slot-choice:hover,
	.pbr-service-card:hover {
		transform: translateY( -1px );
	}

	.pbr-service-card-icon {
		width: 76px;
		height: 76px;
	}

	.pbr-booking-success-logo {
		width: 104px;
		height: 104px;
	}
}