/* ==========================================================================
   Pages Planning & Bon Cadeau — Mise en page autour des shortcodes InstaResa
   ========================================================================== */

/* Conteneur principal de la page */
.page-template-default .entry-content,
.page .entry-content {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: clamp(1.5rem, 5vw, 4rem) 1.25rem;
}

@media (max-width: 767px) {
	.page-template-default .entry-content,
	.page .entry-content {
		padding: 1rem 0.75rem;
	}
}

/* Titre de page — fond clair, typographie pure */
.page .entry-header {
	background: var(--color-light);
	padding: clamp(2rem, 5vw, 3.5rem) 1.25rem 1.5rem;
	text-align: left;
}

/* Label "Simulateur · Volomax" au-dessus du titre */
.page .entry-header::before {
	content: 'Simulateur · Volomax';
	display: block;
	font-family: var(--font-title);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-orange);
	margin-bottom: 0.5rem;
}

.page .entry-header .entry-title {
	font-family: var(--font-title);
	font-size: clamp(1.75rem, 5vw, 3rem);
	font-weight: 900;
	text-transform: uppercase;
	color: var(--color-night);
	letter-spacing: 0.02em;
	line-height: 1.15;
	margin: 0 0 0.75rem;
}

/* Barre orange sous le titre */
.page .entry-header .entry-title::after {
	content: '';
	display: block;
	width: 48px;
	height: 3px;
	background: var(--color-orange);
	border-radius: 2px;
	margin-top: 0.75rem;
}

/* Masquer le header par défaut de GP sur ces pages */
.page .page-header {
	display: none;
}

/* Shortcode wrapper — centré */
.simsv-shortcode-wrap {
	max-width: 900px;
	margin: 0 auto;
	padding: clamp(2rem, 5vw, 4rem) 0;
}

/* ==========================================================================
   Isolation GP Customizer → InstaResa
   ─────────────────────────────────────────────────────────────────────────
   GP Customizer génère sans !important :
     input[type="number"] { color: var(--contrast); background-color: var(--base-2); }
     a { color: var(--accent); }
     button { color: #fff; background-color: rgb(85,85,94); }
   On neutralise les règles à base de variables CSS en les redéfinissant
   au niveau de chaque conteneur InstaResa — aucun combat de spécificité,
   aucun !important nécessaire pour les inputs/liens/texte.
   Les boutons (valeurs hardcodées) sont gérés séparément ci-dessous.
   ========================================================================== */

#planning,
#paypal_forms,
#cart,
.modal_block,
.sc-cart,
.auth_form,
.form_confirm,
.formContainer,
.option_produit,
.picker {
	/* --- Variables GP Customizer redéfinies --- */
	--contrast:   #333333; /* GP : color sur inputs, texte général    */
	--contrast-2: #555555;
	--contrast-3: #888888;
	--base:       #e0e0e0; /* GP : border-color sur inputs             */
	--base-2:     #ffffff; /* GP : background-color sur inputs + body  */
	--base-3:     #ffffff;
	--accent:     #17a2b8; /* GP : color sur les liens                 */
}

/* ==========================================================================
   Boutons InstaResa (smart_cart) — Restauration Bootstrap
   Deux sources d'écrasement :
   1. GP Customizer : button { background: #55555e } via main.min.css
   2. smart_cart.css : .sc-cart-toolbar button { background: white }
   On cible les deux avec des sélecteurs plus spécifiques + !important.
   ========================================================================== */

/* -- btn-info (Payer, Ajouter un pack) -- */
.sc-cart-toolbar button.btn-info,
.sc-cart-toolbar button.btn.btn-info,
#cart .btn.btn-info,
#cart button.btn-info {
	background-color: #17a2b8 !important;
	border-color: #17a2b8 !important;
	color: #fff !important;
}

.sc-cart-toolbar button.btn-info:hover,
#cart .btn.btn-info:hover {
	background-color: #138496 !important;
	border-color: #117a8b !important;
	color: #fff !important;
}

.sc-cart-toolbar button.btn-info.disabled,
.sc-cart-toolbar button.btn-info:disabled,
#cart .btn.btn-info.disabled,
#cart .btn.btn-info:disabled {
	background-color: #17a2b8 !important;
	border-color: #17a2b8 !important;
	color: #fff !important;
	opacity: 0.65;
}

/* -- btn-danger (Vider le panier) -- */
.sc-cart-toolbar button.btn-danger,
.sc-cart-toolbar button.btn.btn-danger,
#cart .btn.btn-danger,
#cart button.btn-danger {
	background-color: #dc3545 !important;
	border-color: #dc3545 !important;
	color: #fff !important;
}

.sc-cart-toolbar button.btn-danger:hover,
#cart .btn.btn-danger:hover {
	background-color: #c82333 !important;
	border-color: #bd2130 !important;
	color: #fff !important;
}

.sc-cart-toolbar button.btn-danger.disabled,
.sc-cart-toolbar button.btn-danger:disabled,
#cart .btn.btn-danger.disabled,
#cart .btn.btn-danger:disabled {
	background-color: #dc3545 !important;
	border-color: #dc3545 !important;
	color: #fff !important;
	opacity: 0.65;
}

/* -- btn-success -- */
.sc-cart-toolbar button.btn-success,
#cart .btn.btn-success {
	background-color: #28a745 !important;
	border-color: #28a745 !important;
	color: #fff !important;
}

/* -- btn-primary -- */
.sc-cart-toolbar button.btn-primary,
#cart .btn.btn-primary {
	background-color: #007bff !important;
	border-color: #007bff !important;
	color: #fff !important;
}

/* -- btn-secondary -- */
.sc-cart-toolbar button.btn-secondary,
#cart .btn.btn-secondary {
	background-color: #6c757d !important;
	border-color: #6c757d !important;
	color: #fff !important;
}

/* -- btn-warning -- */
.sc-cart-toolbar button.btn-warning,
#cart .btn.btn-warning {
	background-color: #ffc107 !important;
	border-color: #ffc107 !important;
	color: #212529 !important;
}

/* Bouton "Ajouter au panier" hors toolbar (add_caddie) */
button.add_caddie.btn-info,
button.add_caddie.btn,
button.add_caddie {
	background-color: #17a2b8 !important;
	border-color: #17a2b8 !important;
	color: #fff !important;
	border-radius: 6px;
	padding: 0.625rem 1rem;
	font-size: 0.875rem;
	font-weight: 700;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

button.add_caddie:hover {
	opacity: 0.85;
}

/* ==========================================================================
   Bouton corbeille — supprimer une ligne du panier
   smart_cart.css met color: white sur .sc-cart-remove → icône invisible.
   ========================================================================== */

.sc-cart-remove,
button.sc-cart-remove {
	background-color: transparent !important;
	color: #333 !important;
	border: 1px solid #ccc !important;
	border-radius: 4px;
	padding: 0.375rem 0.5rem;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	line-height: 1;
}

.sc-cart-remove:hover,
button.sc-cart-remove:hover {
	background-color: #dc3545 !important;
	border-color: #dc3545 !important;
	color: #fff !important;
}

.sc-cart-remove .icon_trash,
.sc-cart-remove i {
	color: inherit;
	font-size: 1rem;
}

/* ==========================================================================
   Bouton submit "Envoyer" (auth_form) + "Valider" (form_confirm)
   ========================================================================== */

.auth_form input[type="submit"],
.form_confirm input.submit,
.form_confirm input[type="submit"] {
	background-color: #fe6c61 !important;
	color: #fff !important;
	border: none !important;
	padding: 0.6875rem 2.5rem;
	font-weight: 900;
	font-size: 0.9375rem;
	text-transform: uppercase;
	border-radius: 4px;
	cursor: pointer;
	transition: opacity 0.2s ease;
	line-height: 1.4;
}

.auth_form input[type="submit"]:hover,
.form_confirm input.submit:hover {
	opacity: 0.85;
}

/* ==========================================================================
   Date picker — boutons "Effacer" et "Annuler" invisibles
   GP/smart_cart met button { color: white } → texte invisible.
   ========================================================================== */

.picker__button--clear,
.picker__button--close {
	color: #333 !important;
	background-color: #f5f5f5 !important;
	border: 1px solid #ddd !important;
}

.picker__button--clear:hover,
.picker__button--close:hover {
	background-color: #e8e8e8 !important;
	color: #000 !important;
}

.picker__button--today {
	color: #333 !important;
	background-color: #f5f5f5 !important;
	border: 1px solid #ddd !important;
}

.picker__button--today:hover {
	background-color: #117a8b !important;
	color: #fff !important;
	border-color: #117a8b !important;
}

/* Date picker — pleine largeur mobile */
@media (max-width: 767px) {
	.picker,
	.picker__holder {
		width: 100% !important;
		max-width: 100vw !important;
		left: 0 !important;
		right: 0 !important;
		margin: 0 !important;
		box-sizing: border-box;
	}

	.picker__frame {
		max-width: 100%;
		margin: 0 auto;
	}

	.picker__table td {
		min-width: 2.5rem;
		padding: 0.375rem;
	}
}

/* ==========================================================================
   Isolation typographique — Instaréza utilise Open Sans / system fonts
   Le thème impose Barlow Condensed (h1-h6) et Inter (body).
   ========================================================================== */

#planning,
#paypal_forms,
#cart,
.sc-cart,
.auth_form,
.form_confirm,
.formContainer,
.option_produit,
.modal_block,
.picker {
	font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
	color: #333;
	line-height: 1.5;
}

/* Titres dans Instaréza — ne PAS hériter Barlow Condensed */
#paypal_forms h2,
#paypal_forms h3,
#paypal_forms h4,
#paypal_forms h5,
#planning h2,
#planning h3,
#planning h4,
#cart h3,
#cart h4,
.sc-cart h3,
.sc-cart h4,
.modal_block h2,
.modal_block h3,
.modal_block h4 {
	font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
	color: #333;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: normal !important;
	text-transform: none !important;
}

/* Tailles titres — alignées sur airvertical.fr */
#paypal_forms h3,
.sc-cart h3 {
	font-size: 1.3125rem; /* 21px */
	margin-bottom: 1rem;
}

#paypal_forms h4,
.sc-cart h4,
#cart h4 {
	font-size: 1.25rem; /* 20px */
	margin-bottom: 0.75rem;
}

/* Liens — ne PAS forcer le bleu #1E90FF du thème */
#planning a,
#paypal_forms a,
#cart a,
.sc-cart a,
.auth_form a,
.form_confirm a,
.modal_block a {
	color: var(--ir-primary, #17a2b8);
}

#planning a:hover,
#paypal_forms a:hover,
#cart a:hover,
.sc-cart a:hover,
.modal_block a:hover {
	color: #138496;
}

/* ==========================================================================
   Inputs / selects — reset font du thème + style moderne
   ========================================================================== */

#planning input:not([type="submit"]):not([type="hidden"]),
#planning select,
#paypal_forms input:not([type="submit"]):not([type="hidden"]),
#paypal_forms select,
#paypal_forms textarea,
.auth_form input:not([type="submit"]),
.form_confirm input:not([type="submit"]),
.form_confirm select,
.modal_block input:not([type="submit"]),
.modal_block select,
.modal_block textarea {
	font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 0.9375rem;
	color: #333;
	background-color: #f7f8f9;
	border: 1px solid #f0f0f0;
	border-radius: 4px;
	padding: 0.625rem 0.9375rem;
	transition: border-color 0.2s ease;
	box-sizing: border-box;
}

/* Focus — anneau visible (WCAG 2.4.7) */
#paypal_forms input:focus-visible,
#paypal_forms select:focus-visible,
.auth_form input:focus-visible,
.form_confirm input:focus-visible,
.modal_block input:focus-visible,
.modal_block select:focus-visible {
	border-color: #117a8b;
	outline: 2px solid #117a8b;
	outline-offset: 2px;
	background-color: #fff;
}

/* Focus clavier sur boutons, liens, et éléments interactifs InstaResa */
.sc-cart-toolbar button:focus-visible,
.sc-cart-remove:focus-visible,
button.add_caddie:focus-visible,
.pagination a:focus-visible,
#planning td.bookable a:focus-visible,
.picker__button--today:focus-visible,
.picker__button--clear:focus-visible,
.picker__button--close:focus-visible,
.auth_form input[type="submit"]:focus-visible,
.form_confirm input[type="submit"]:focus-visible,
.modal_block button:focus-visible {
	outline: 2px solid #117a8b;
	outline-offset: 2px;
}

/* Auth form inputs (bon + nom) */
.auth_form input[name="bon"],
.auth_form input[name="nom"] {
	width: 100%;
	max-width: 300px;
	padding: 0.625rem 1rem;
	margin-bottom: 0.5rem;
}

/* Selects dans les packs — appearance: none pour iOS */
.option_produit select,
.formContainer select,
#paypal_forms select,
.form_confirm select,
.modal_block select,
#planning select {
	font-size: 0.9375rem;
	color: #676565;
	padding: 0.625rem 0.9375rem;
	background-color: #fff;
	border: 1px solid #f0f0f0;
	border-radius: 4px;
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23676565' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 12px;
	padding-right: 2rem;
}

/* Input quantité panier — fix géométrique COMPLET
   smart_cart.css : .sc-cart-item-summary .sc-cart-item-qty (0,2,0)
   impose width:40px + padding-right:0. Les flèches spinner Chrome/Safari
   (~16px) se superposent au chiffre centré → invisible sur Retina/mobile.

   Triple fix :
   1. !important sur width/padding/font/text-align (battre 0,2,0 de smart_cart)
   2. appearance: textfield SUPPRIME les flèches spinner natives — pas de risque
      de superposition possible
   3. ::-webkit-(inner|outer)-spin-button : supprime le rendu WebKit des flèches */
.sc-cart-item-qty,
input.sc-cart-item-qty {
	width: 4.5rem !important;
	text-align: center !important;
	padding: 0.375rem 0.5rem !important;
	font-size: 0.875rem !important;
	-webkit-appearance: textfield !important;
	-moz-appearance: textfield !important;
	appearance: textfield !important;
	border: 1px solid #ddd;
	border-radius: 3px;
}

input.sc-cart-item-qty::-webkit-inner-spin-button,
input.sc-cart-item-qty::-webkit-outer-spin-button {
	-webkit-appearance: none !important;
	margin: 0 !important;
}

/* ==========================================================================
   Modale de réservation — z-index + dimensions responsive
   ========================================================================== */

.modal_block,
#booking_form.modal_block,
#voucher_form.modal_block {
	z-index: 10001;
}

.modal_overlay,
.modal-backdrop,
[class*="modal_overlay"] {
	z-index: 10000;
}

@media (min-width: 768px) {
	#booking_form.modal_block,
	#voucher_form.modal_block {
		width: 50%;
		max-width: 600px;
		min-width: 400px;
	}
}

@media (max-width: 767px) {
	.modal_block,
	#booking_form.modal_block,
	#voucher_form.modal_block {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		/* Annuler le centrage absolu d'easymodal.js */
		position: fixed !important;
		top: 60px !important;
		left: 0 !important;
		right: 0 !important;
		transform: none !important;
		-webkit-transform: none !important;
		margin: 0 !important;
		border-radius: 0 !important;
		padding: 1.25rem !important;
		padding-bottom: calc(1.25rem + env(safe-area-inset-bottom)) !important;
		box-sizing: border-box !important;
		max-height: calc(100vh - 60px);
		max-height: calc(100dvh - 60px);
		overflow-y: auto;
		font-size: 0.9375rem;
	}

	.modal_block .submit,
	.modal_block .close,
	.modal_block button {
		padding: 0.75rem 1.5rem;
		font-size: 1rem;
		min-height: 44px;
		min-width: 44px;
	}

	.modal_block input,
	.modal_block select,
	.modal_block textarea {
		font-size: 1rem;
		padding: 0.75rem;
		width: 100%;
		box-sizing: border-box;
	}
}

/* ==========================================================================
   Planning — tableau + cellules
   ========================================================================== */

#planning thead tr {
	background-color: var(--ir-table-head-bg, #1a7fb5);
}

#planning th.day,
#planning th.hour {
	color: #fff;
	font-weight: 700;
	font-size: 0.8125rem;
	text-transform: uppercase;
}

#planning td.nonbookable {
	background-color: #ebebeb;
	color: #999;
	font-size: 0.8125rem;
}

#planning td.bookable {
	background-color: var(--ir-bookable-bg, #75d69c);
}

#planning td.bookable a,
#planning td.bookable a.order {
	color: #1b1c1d;
	font-weight: 600;
	text-decoration: none;
}

#planning td.bookable a:hover {
	text-decoration: underline;
}

#planning td.hour {
	background-color: var(--ir-table-head-bg, #1a7fb5);
	color: #fff;
	font-weight: 700;
	font-size: 0.8125rem;
}

/* Pagination planning */
.pagination a,
#planning .pagination a {
	color: #000;
	font-weight: 900;
	font-size: 1.125rem;
	padding: 0 0.625rem;
	text-decoration: none;
}

.pagination a:hover,
#planning .pagination a:hover {
	color: #17a2b8;
	text-decoration: underline;
}

@media (max-width: 767px) {
	/* Conteneur scroll horizontal */
	#planning {
		overflow-x: auto;
		/* momentum scroll est natif depuis iOS 13 */
		margin-left: -1.25rem;
		margin-right: -1.25rem;
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}

	/* Réduire la taille du tableau pour qu'il tienne mieux */
	#planning table {
		font-size: 0.75rem;
		min-width: 600px;
	}

	#planning th.day,
	#planning th.hour {
		font-size: 0.6875rem;
		padding: 0.375rem 0.25rem;
	}

	#planning td {
		padding: 0.375rem 0.25rem;
		font-size: 0.75rem;
	}

	#planning td.bookable a {
		display: block;
		padding: 0.5rem 0.25rem;
		min-height: 44px;
		line-height: 1.3;
	}

	/* Pagination — touch targets 44px minimum */
	.pagination {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.25rem;
		margin-left: 1.25rem;
		margin-right: 1.25rem;
	}

	.pagination a,
	#planning .pagination a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding: 0.5rem 0.75rem;
		font-size: 0.9375rem;
	}
}

/* ==========================================================================
   Panier — lisibilité et espacement
   ========================================================================== */

.sc-cart {
	border-radius: 6px;
	padding: 0.75rem;
}

.sc-cart table {
	width: 100%;
}

.sc-cart td,
.sc-cart th {
	padding: 0.5rem;
	font-size: 0.875rem;
	vertical-align: middle;
}

/* Ligne "54,00 € × [qty] = 54,00 €" — flex pour éviter l'écrasement sur mobile */
.sc-cart-item-summary {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.25rem 0.375rem;
	justify-content: flex-end;
	font-size: 1rem;
}

.sc-cart-item-price,
.sc-cart-item-amount,
.option_price {
	font-size: 1rem;
	color: #333;
	white-space: nowrap;
}

.sc-cart-toolbar,
.sc-toolbar,
.panel-footer.sc-toolbar {
	display: flex !important;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0.75rem 0;
	align-items: center;
	text-align: left !important; /* annule text-align: right de smart_cart.css */
}

@media (max-width: 767px) {
	.sc-cart-toolbar,
	.sc-toolbar,
	.panel-footer.sc-toolbar {
		flex-direction: column !important;
		gap: 0.75rem !important;
		padding: 1rem 0 !important;
		align-items: stretch !important; /* boutons pleine largeur */
	}

	.sc-cart .btn,
	.sc-toolbar .btn,
	.sc-cart-toolbar button,
	.sc-cart-toolbar .btn {
		display: block !important;
		width: 100% !important;
		text-align: center !important;
		min-height: 48px;
		font-size: 1rem;
		padding: 0.875rem 1.5rem;
		border-radius: 6px;
		box-sizing: border-box;
		margin-left: 0 !important; /* annule margin-left: 5px de smart_cart.css */
	}
}

/* ==========================================================================
   Formulaire bon cadeau — espacement
   ========================================================================== */

#paypal_forms .form-group,
.formContainer .form-group {
	margin-bottom: 1rem;
}

#paypal_forms label,
.formContainer label {
	font-weight: 600;
	margin-bottom: 0.25rem;
	display: block;
	font-size: 0.875rem;
}

.auth_form .intro,
.auth_form p.intro,
.form_confirm .intro,
.form_confirm p.intro {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: #555;
	margin-bottom: 1rem;
}

/* Option produit — alignement */
.option_produit td {
	padding: 0.5rem 0.375rem;
	vertical-align: middle;
	font-size: 0.9375rem;
}

.formContainer .actions {
	margin-top: 0.75rem;
}

/* Images */
#paypal_forms img,
.formContainer img,
.sc-cart img {
	max-width: 100%;
	height: auto;
}

/* ==========================================================================
   Mobile global — inputs >= 16px pour éviter zoom iOS
   ========================================================================== */

@media (max-width: 767px) {
	#paypal_forms input:not([type="submit"]):not([type="hidden"]),
	#paypal_forms select,
	#paypal_forms textarea,
	.auth_form input:not([type="submit"]),
	.form_confirm input:not([type="submit"]),
	.form_confirm select,
	#planning input,
	#planning select,
	.sc-cart input,
	.sc-cart select,
	input.sc-cart-item-qty {
		font-size: 1rem; /* 16px — seuil iOS zoom */
	}

	.auth_form input[name="bon"],
	.auth_form input[name="nom"] {
		max-width: 100%;
		width: 100%;
	}

	.auth_form input[type="submit"],
	.form_confirm input.submit {
		width: 100%;
		padding: 0.875rem 1.5rem;
	}

	/* Checkbox CGV — zone de tap agrandie */
	.sc-cart input[type="checkbox"],
	#paypal_forms input[type="checkbox"],
	.form_confirm input[type="checkbox"] {
		width: 1.25rem;
		height: 1.25rem;
		margin-right: 0.5rem;
		vertical-align: middle;
	}
}

/* Desktop */
@media (min-width: 768px) {
	.page .entry-header {
		padding-left: 2rem;
		padding-right: 2rem;
	}

	.page-template-default .entry-content,
	.page .entry-content {
		padding: clamp(2rem, 5vw, 4rem) 2rem;
	}
}