// Pass Journée : paywall (standard et « 2e pass du mois »), bandeau d'accueil, badge d'en-tête,
// tunnel d'achat, confirmation, pied d'article et espace client. Mobile d'abord.
// Gabarits : partials/pass-journee/, tpl-pass-journee.php.

$pass-gradient: linear-gradient(315deg, #7d6bc2 0%, #007baf 100%);
$pass-green: #2e9e5b;

// Paywall --------------------------------------------------------------
.pass-paywall {
	&__card {
		max-width: 520px;
		margin: 0 auto;
		box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
	}

	&__eyebrow {
		color: #7d6bc2;
		font-size: 1.3rem;
		font-weight: 800;
		letter-spacing: 0.04em;
		margin-bottom: 8px;
		text-transform: uppercase;
	}

	&__title {
		color: var(--color-base);
		font-size: 2.2rem;
		font-weight: 800;
		line-height: 1.25;
		margin-bottom: 12px;
	}

	&__price {
		color: var(--color-base);
		font-size: 1.6rem;
		margin-bottom: 16px;

		strong {
			font-size: 2.8rem;
			font-weight: 800;
		}
	}

	&__text {
		color: var(--color-base);
		font-size: 1.5rem;
		line-height: 1.5;
		margin-bottom: 20px;
	}

	&__benefits {
		display: inline-flex;
		flex-direction: column;
		gap: 8px;
		list-style: none;
		margin: 0 0 20px;
		padding: 0;
		text-align: left;

		li {
			align-items: flex-start;
			color: var(--color-base);
			display: flex;
			font-size: 1.5rem;
			gap: 8px;
			line-height: 1.4;
		}

		.icon {
			color: $pass-green;
			flex-shrink: 0;
			width: 18px;

			svg {
				height: 18px;
				width: 18px;
			}
		}
	}

	&__cta {
		display: block;
		white-space: normal;
		width: 100%;

		& + & {
			margin-top: 10px;
		}
	}

	&__mention {
		color: var(--color-base);
		font-size: 1.25rem;
		margin-top: 10px;
		opacity: 0.7;
	}

	&__sub {
		border-top: 1px solid rgba(127, 127, 127, 0.25);
		margin-top: 20px;
		padding-top: 16px;
	}

	&__sub-title {
		color: var(--color-base);
		font-size: 1.4rem;
		font-weight: 700;
	}

	&__sub-link {
		color: #007baf;
		font-size: 1.5rem;
		font-weight: 800;
		text-decoration: underline;
	}

	&__login {
		color: var(--color-base);
		font-size: 1.3rem;
		margin-top: 14px;

		a {
			font-weight: 700;
			text-decoration: underline;
		}
	}
}

// Bandeau d'accueil ------------------------------------------------------
.pass-banner {
	align-items: center;
	background: $pass-gradient;
	border-radius: 6px;
	color: #fff !important;
	display: flex;
	font-size: 1.4rem;
	gap: 12px;
	justify-content: space-between;
	line-height: 1.3;
	margin: 12px 0 16px;
	padding: 12px 16px;
	text-decoration: none;

	&__link {
		font-weight: 800;
		white-space: nowrap;
	}

	&:hover &__link {
		text-decoration: underline;
	}
}

// Badge d'en-tête ----------------------------------------------------------
.pass-badge {
	align-items: center;
	background: rgba(46, 158, 91, 0.12);
	color: $pass-green !important;
	display: inline-flex;
	font-weight: 800;
	gap: 6px;
	white-space: nowrap;

	&__dot {
		background: $pass-green;
		border-radius: 50%;
		display: inline-block;
		flex-shrink: 0;
		height: 8px;
		width: 8px;
	}
}

// Tunnel et confirmation ---------------------------------------------------
.pass-tunnel {
	padding: 20px 16px 40px;

	&__inner {
		margin: 0 auto;
		max-width: 480px;
	}

	&__back {
		color: var(--color-base);
		display: inline-block;
		font-size: 1.4rem;
		margin-bottom: 16px;
		opacity: 0.8;
	}

	&__title {
		color: var(--color-base);
		font-size: 2.4rem;
		font-weight: 800;
		margin-bottom: 16px;
	}

	&__recap {
		align-items: center;
		background-color: var(--color-bg-card-search);
		border-radius: 8px;
		color: var(--color-base);
		display: flex;
		gap: 12px;
		justify-content: space-between;
		margin-bottom: 20px;
		padding: 16px;

		span {
			display: block;
			font-size: 1.3rem;
			margin-top: 4px;
			opacity: 0.75;
		}
	}

	&__price {
		font-size: 2rem;
		white-space: nowrap;

		del {
			font-size: 1.4rem;
			font-weight: 400;
			opacity: 0.6;
		}
	}

	&__secure {
		color: var(--color-base);
		font-size: 1.2rem;
		margin-top: 16px;
		opacity: 0.7;
		text-align: center;
	}

	// Checkout WooCommerce réduit : ni titres, ni tableau de commande.
	.woocommerce-billing-fields > h3,
	#order_review_heading,
	.woocommerce-checkout-review-order-table,
	.woocommerce-additional-fields {
		display: none;
	}

	.woocommerce-checkout .form-row {
		margin-bottom: 12px;
	}

	#payment .place-order .button,
	#place_order {
		background: $pass-gradient;
		border: 0;
		border-radius: 4px;
		color: #fff;
		font-size: 1.7rem;
		font-weight: 800;
		padding: 16px;
		width: 100%;
	}
}

.pass-checkout__waiver {
	background-color: var(--color-bg-card-search);
	border: 2px solid transparent;
	border-radius: 8px;
	color: var(--color-base);
	font-size: 1.35rem;
	line-height: 1.4;
	margin-bottom: 16px !important;
	padding: 12px 14px;

	label {
		align-items: flex-start;
		cursor: pointer;
		display: flex;
		gap: 10px;
	}

	input {
		flex-shrink: 0;
		margin-top: 2px;
	}

	&.is-invalid {
		border-color: #fd5555;
	}
}

.pass-checkout__terms {
	display: block;
	font-size: 1.2rem;
	margin-top: 8px;
	opacity: 0.75;
}

// Apple Pay / Google Pay inactifs tant que la case n'est pas cochée.
.is-pass-tunnel form.woocommerce-checkout:not(.is-waiver-ok) {
	[id^="wc-stripe-express-checkout-element"],
	[id^="wc-stripe-payment-request-button"] {
		opacity: 0.4;
		pointer-events: none;
	}
}

.pass-confirmation {
	color: var(--color-base);
	text-align: center;

	&__check {
		align-items: center;
		background: $pass-green;
		border-radius: 50%;
		color: #fff;
		display: inline-flex;
		font-size: 3rem;
		height: 64px;
		justify-content: center;
		margin: 10px 0 16px;
		width: 64px;
	}

	&__title {
		font-size: 2.6rem;
		font-weight: 800;
		margin-bottom: 6px;
	}

	&__subtitle {
		font-size: 1.7rem;
		font-weight: 700;
		margin-bottom: 14px;
	}

	&__cta {
		display: block;
		margin: 22px 0;
		width: 100%;
	}

	&__bridge,
	&__mail {
		font-size: 1.35rem;
		line-height: 1.5;
		margin-top: 12px;
	}

	&__mail {
		opacity: 0.75;
	}
}

.is-pass-order-received .article-title {
	display: none;
}

// Pied d'article pendant un pass ---------------------------------------------
.pass-article-footer {
	background-color: var(--color-bg-card-search);
	border-radius: 8px;
	color: var(--color-base);
	margin: 24px 0;
	padding: 18px 16px;
	text-align: center;

	&__text {
		font-size: 1.4rem;
		margin-bottom: 12px;
	}

	&__cta {
		white-space: normal;
	}
}

// Espace client ----------------------------------------------------------------
.pass-account {
	color: var(--color-base);
	margin-bottom: 24px;

	&__active {
		background: rgba(46, 158, 91, 0.08);
		border: 1px solid rgba(46, 158, 91, 0.35);
		border-radius: 8px;
		margin-bottom: 12px;
		padding: 16px;

		p {
			margin-bottom: 10px;
		}
	}

	&__title {
		align-items: center;
		display: flex;
		font-size: 1.6rem;
		font-weight: 800;
		gap: 8px;
	}

	&__subtitle {
		font-size: 1.6rem;
		font-weight: 800;
		margin: 16px 0 8px;
	}

	&__history {
		font-size: 1.4rem;
		width: 100%;

		td {
			border-bottom: 1px solid rgba(127, 127, 127, 0.2);
			padding: 8px 4px;
		}
	}
}