/**
 * booking-forfait.css
 * Styles du layout two-column pour les pages de forfaits (WooCommerce Bookings)
 * Préfixe : fbp- (forfait booking panel) / forfait- (layout global) / fe- (forfait equipes content)
 */

/* ═════════════════════════════════════════════════════════════════
   LAYOUT PRINCIPAL
   ═════════════════════════════════════════════════════════════════ */

.forfait-layout {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 40px;
	align-items: start;
	margin-top: 32px;
}

.forfait-content {
	min-width: 0;
}

.forfait-booking-panel {
	position: sticky;
	top: 120px;
	background: #efefef;
	border: 1px solid #e5e7eb;
	border-radius: 16px;
	padding: 24px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
	margin-right: 30px;
}

/* ═════════════════════════════════════════════════════════════════
   EN-TÊTE DU PANNEAU
   ═════════════════════════════════════════════════════════════════ */

.fbp-header {
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid #f0f0f0;
}

.fbp-title {
	display: block;
	font-size: 17px;
	font-weight: 600;
	color: #111827;
	margin-bottom: 4px;
}

.fbp-subtitle {
	font-size: 13px;
	color: #6b7280;
	line-height: 1.5;
}

/* ═════════════════════════════════════════════════════════════════
   CHAMPS WOOCOMMERCE BOOKINGS
   ═════════════════════════════════════════════════════════════════ */

.forfait-booking-panel .wc-bookings-booking-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.forfait-booking-panel .wc-bookings-booking-form .form-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.forfait-booking-panel .wc-bookings-booking-form label {
	font-size: 12px;
	font-weight: 500;
	color: #6b7280;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.forfait-booking-panel .wc-bookings-booking-form input[type="number"],
.forfait-booking-panel .wc-bookings-booking-form input[type="text"],
.forfait-booking-panel .wc-bookings-booking-form select {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	font-size: 14px;
	color: #111827;
	background: #f9fafb;
	transition: border-color 0.15s, background 0.15s;
}

.forfait-booking-panel .wc-bookings-booking-form input:focus,
.forfait-booking-panel .wc-bookings-booking-form select:focus {
	outline: none;
	border-color: #0F6E56;
	background: #ffffff;
}

.forfait-booking-panel .wc-bookings-booking-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

/* Calendrier */
.forfait-booking-panel .wc-bookings-date-picker {
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	overflow: hidden;
	margin-top: 4px;
}

.forfait-booking-panel .ui-datepicker {
	width: 100% !important;
	font-size: 13px;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
}

.forfait-booking-panel .ui-datepicker-header {
	background: #f9fafb !important;
	border: none !important;
	border-bottom: 1px solid #e5e7eb !important;
	border-radius: 0 !important;
	padding: 10px 14px !important;
	font-weight: 500;
}

.forfait-booking-panel .ui-datepicker td.bookable a,
.forfait-booking-panel .ui-datepicker td.bookable span {
	background: #E1F5EE !important;
	color: #0F6E56 !important;
	border-radius: 6px;
	font-weight: 500;
}

.forfait-booking-panel .ui-datepicker td.ui-datepicker-current-day a {
	background: #0F6E56 !important;
	color: #ffffff !important;
	border-radius: 6px;
}

/* ═════════════════════════════════════════════════════════════════
   RÉSUMÉ DU DÉPÔT
   ═════════════════════════════════════════════════════════════════ */

.fbp-deposit-summary {
	margin-top: 16px;
	padding: 14px 16px;
	background: #f9fafb;
	border-radius: 10px;
	border: 1px solid #e5e7eb;
}

.fbp-deposit-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 13px;
	color: #6b7280;
	padding: 4px 0;
}

.fbp-deposit-total {
	margin-top: 8px;
	padding-top: 10px;
	border-top: 1px solid #e5e7eb;
	font-size: 15px;
	font-weight: 600;
	color: #111827;
}

/* ═════════════════════════════════════════════════════════════════
   BOUTON CTA
   ═════════════════════════════════════════════════════════════════ */

.fbp-actions {
	margin-top: 20px;
}

.fbp-cta.button {
	display: block;
	width: 100%;
	padding: 14px 24px;
	background: #0F6E56;
	color: #ffffff !important;
	border: none;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	cursor: pointer;
	transition: background 0.2s, transform 0.1s;
	letter-spacing: 0.01em;
}

.fbp-cta.button:hover {
	background: #085041;
}

.fbp-cta.button:active {
	transform: scale(0.98);
}

.fbp-note {
	margin-top: 10px;
	font-size: 11px;
	color: #9ca3af;
	text-align: center;
	line-height: 1.5;
}

/* ═════════════════════════════════════════════════════════════════
   NOTE ALLÉE
   ═════════════════════════════════════════════════════════════════ */

.fbp-allee-note {
	font-size: 12px;
	color: #6b7280;
	margin-top: -8px;
	margin-bottom: 12px;
	padding: 6px 10px;
	background: #f9fafb;
	border-radius: 6px;
	border-left: 3px solid #0F6E56;
}

.fbp-persons-field small {
	display: block;
	font-size: 11px;
	color: #9ca3af;
	margin-top: 4px;
}

/* ═════════════════════════════════════════════════════════════════
   ÉLÉMENTS WOOCOMMERCE REDONDANTS
   ═════════════════════════════════════════════════════════════════ */

.forfait-booking-panel .price {
	display: none;
}

/* ═════════════════════════════════════════════════════════════════
   CONTENU FORFAIT — composants fe-*
   ═════════════════════════════════════════════════════════════════ */

.forfait-equipes .fe-lead {
	font-size: 15px;
	color: #6b7280;
	line-height: 1.7;
	margin-bottom: 1.25rem;
}

.forfait-equipes .fe-sports {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 1.75rem;
}

.forfait-equipes .fe-sport {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: 20px;
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	font-size: 13px;
	color: #6b7280;
}

.forfait-equipes .fe-stat-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 1.75rem;
}

.forfait-equipes .fe-stat {
	background: #f9fafb;
	border-radius: 8px;
	padding: 14px 16px;
}

.forfait-equipes .fe-stat-label {
	font-size: 11px;
	color: #9ca3af;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 4px;
}

.forfait-equipes .fe-stat-value {
	font-size: 20px;
	font-weight: 600;
	color: #111827;
}

.forfait-equipes .fe-section {
	margin-bottom: 1.75rem;
}

.forfait-equipes .fe-section-title {
	font-size: 11px;
	font-weight: 600;
	color: #9ca3af;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 12px;
}

.forfait-equipes .fe-check-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.forfait-equipes .fe-check-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 9px 0;
	border-bottom: 1px solid #f0f0f0;
	font-size: 14px;
	color: #374151;
	line-height: 1.5;
}

.forfait-equipes .fe-check-list li:last-child {
	border-bottom: none;
}

.forfait-equipes .fe-dot {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #0F6E56;
	flex-shrink: 0;
	margin-top: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.forfait-equipes .fe-dot::after {
	content: '';
	display: block;
	width: 6px;
	height: 4px;
	border-left: 1.5px solid #fff;
	border-bottom: 1.5px solid #fff;
	transform: rotate(-45deg) translateY(-1px);
}

.forfait-equipes .fe-step-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.forfait-equipes .fe-step-list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 9px 0;
	border-bottom: 1px solid #f0f0f0;
	font-size: 14px;
	color: #374151;
	line-height: 1.5;
}

.forfait-equipes .fe-step-list li:last-child {
	border-bottom: none;
}

.forfait-equipes .fe-step-num {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1.5px solid #d1d5db;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 600;
	color: #9ca3af;
}

.forfait-equipes .fe-depot {
	font-size: 13px;
	color: #085041;
	background: #E1F5EE;
	border-radius: 8px;
	padding: 12px 16px;
	margin-bottom: 1.25rem;
	line-height: 1.6;
}

.forfait-equipes .fe-info-box {
	background: #f9fafb;
	border-radius: 8px;
	padding: 14px 16px;
}

.forfait-equipes .fe-info-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.forfait-equipes .fe-info-list li {
	font-size: 13px;
	color: #6b7280;
	padding: 4px 0 4px 14px;
	position: relative;
	line-height: 1.5;
}

.forfait-equipes .fe-info-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 11px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #9ca3af;
}

.forfait-equipes .fe-btn {
	display: inline-block;
	margin-top: 0.5rem;
	padding: 10px 20px;
	background: #0F6E56;
	color: #ffffff !important;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: background 0.2s;
}

.forfait-equipes .fe-btn:hover {
	background: #085041;
}

.forfait-equipes .fe-btn-group {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 0.5rem;
}

.forfait-equipes .fe-btn-secondary {
	background: transparent;
	color: #0F6E56 !important;
	border: 1.5px solid #0F6E56;
}

.forfait-equipes .fe-btn-secondary:hover {
	background: #E1F5EE;
}

/* ═════════════════════════════════════════════════════════════════
   RESPONSIVE — TABLETTE
   ═════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
	.forfait-layout {
		grid-template-columns: 1fr !important;
		gap: 0;
		margin-top: 0;
	}

	.forfait-booking-panel {
		position: static;
		 /* order: -1;  */
		border-radius: 12px;
		margin: 16px;
		margin-right: 16px;
		padding: 16px;
		box-shadow: 0 1px 6px rgba(0,0,0,0.06);
	}

    .product_meta{
        display:none !important;
    }

	.forfait-content {
		/* order: 1; */
		padding: 0 16px 16px;
	}
}

/* ═════════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE
   ═════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

	/* WooCommerce layout override */
	.woocommerce div.product {
		display: block !important;
	}

	.woocommerce div.product .woocommerce-product-gallery,
	.woocommerce div.product .summary {
		width: 100% !important;
		float: none !important;
		clear: both !important;
	}

    .product_meta{
        display:none !important;
    }

	/* Panneau */
	.forfait-booking-panel {
		margin: 12px;
		margin-right: 12px;
		padding: 14px;
		padding-bottom: 80px; /* espace barre mobile fixe */
        margin-top: 210px;
	}

	.fbp-title {
		font-size: 16px;
	}

	/* Calendrier */
	.forfait-booking-panel .ui-datepicker {
		font-size: 12px;
	}

	/* Bouton */
	.fbp-cta.button {
		padding: 13px;
		font-size: 14px;
	}

	/* Contenu */
	.forfait-content {
		padding: 0 12px 12px;
	}

	/* Stats */
	.forfait-equipes .fe-stat-value {
		font-size: 17px;
	}
}

/* ═════════════════════════════════════════════════════════════════
   RESPONSIVE — PETIT MOBILE
   ═════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {

	.forfait-booking-panel {
		margin: 8px;
		margin-right: 8px;
		padding: 12px;
		padding-bottom: 80px;
	}

    .product_meta{
        display:none !important;
    }

	.forfait-content {
		padding: 0 8px 8px;
	}

	/* Calendrier compact */
	.forfait-booking-panel .ui-datepicker td {
		padding: 1px;
	}

	.forfait-booking-panel .ui-datepicker td a,
	.forfait-booking-panel .ui-datepicker td span {
		padding: 4px 2px;
		font-size: 11px;
	}

	/* Boutons fe-* empilés */
	.forfait-equipes .fe-btn-group {
		flex-direction: column;
	}

	.forfait-equipes .fe-btn,
	.forfait-equipes .fe-btn-secondary {
		text-align: center;
	}
}