/**
 * Carte cadeau Protéalpes — styles du front.
 *
 * Les couleurs reprennent la charte du site : noir, blanc, bleu #80bee5,
 * gris clair #e9eaee.
 */

:root {
	--pgc-noir: #000000;
	--pgc-bleu: #80bee5;
	--pgc-gris: #e9eaee;
	--pgc-gris-texte: #636363;
}

/* ------------------------------------------------ Mise en page du formulaire d'achat
 *
 * Le thème met le formulaire d'achat (form.cart) en display:flex (une seule
 * ligne, quantité + bouton côte à côte), sans prévoir qu'un autre élément
 * puisse s'y trouver. Notre formulaire de carte cadeau (.pgc-form) s'y ajoute
 * pourtant. Comme align-items vaut « stretch » par défaut, le bouton
 * « Ajouter au panier » s'étirait alors sur toute la hauteur de notre
 * formulaire — d'où le pavé noir géant.
 *
 * On donne donc à notre formulaire sa propre ligne pleine largeur, on masque
 * les éléments réellement vides injectés par des extensions tierces, et on ne
 * laisse côte à côte que la quantité et le bouton. Même correctif que le
 * plugin d'abonnement Protéalpes.
 */
.wp-block-woocommerce-add-to-cart-form form.cart:has(.pgc-form),
form.cart:has(.pgc-form) {
	display: flex !important;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 12px;
}

/* Notre formulaire : sa propre ligne, en premier, pleine largeur. */
form.cart:has(.pgc-form) > .pgc-form {
	order: 1;
	flex: 1 1 100%;
	width: 100%;
	margin: 0;
}

/* Conteneur d'options produit YITH WAPO (accessoires type cuillère doseuse),
 * seulement s'il contient de vraies options : sa propre ligne, entre notre
 * formulaire et quantité/bouton. */
form.cart:has(.pgc-form) > #yith-wapo-container:has(.yith-wapo-block),
form.cart:has(.pgc-form) > .yith-wapo-container:has(.yith-wapo-block) {
	order: 2;
	flex: 1 1 100%;
	width: 100%;
	margin: 0;
}

/* Tout autre élément (span vide injecté par une extension tierce, conteneur
 * YITH WAPO sans option à afficher) : masqué pour qu'il ne casse pas la ligne
 * quantité + bouton. Les <input type="hidden"> restent soumis avec le
 * formulaire malgré display:none. La quantité, le bouton, les add-ons produit
 * et le conteneur YITH non vide (traités au-dessus) sont préservés. */
form.cart:has(.pgc-form) > *:not(.pgc-form):not(.quantity):not(.single_add_to_cart_button):not(.wc-pao-addons-container):not(.yith-wapo-container:has(.yith-wapo-block)) {
	display: none;
}

/* Champs d'options personnalisés (add-ons) : pleine largeur avant le bouton. */
form.cart:has(.pgc-form) > .wc-pao-addons-container {
	order: 2;
	flex: 1 1 100%;
	width: 100%;
	margin: 0;
}

/* Quantité et bouton côte à côte, même hauteur. */
form.cart:has(.pgc-form) > .quantity,
form.cart:has(.pgc-form) > .single_add_to_cart_button {
	order: 3;
	margin: 0;
	align-self: stretch;
}

form.cart:has(.pgc-form) > .quantity {
	flex: 0 0 auto;
	width: auto !important;
	height: auto;
}

form.cart:has(.pgc-form) > .quantity .qty {
	height: 100%;
	box-sizing: border-box;
}

form.cart:has(.pgc-form) > .single_add_to_cart_button {
	flex: 1 1 auto;
	width: auto !important;
	height: auto;
}

/* ------------------------------------------------ Fiche produit */

.pgc-form {
	margin: 0 0 24px;
}

.pgc-form .pgc-label {
	display: block;
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pgc-noir);
}

.pgc-field {
	margin: 0 0 22px;
	padding: 0;
	border: 0;
}

.pgc-amounts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.pgc-amount {
	position: relative;
	display: inline-flex;
	margin: 0;
	cursor: pointer;
}

.pgc-amount input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	opacity: 0;
}

.pgc-amount__value {
	display: inline-block;
	min-width: 84px;
	padding: 12px 16px;
	border: 1px solid var(--pgc-noir);
	font-size: 16px;
	font-weight: 800;
	text-align: center;
	line-height: 1.2;
	color: var(--pgc-noir);
	background: #ffffff;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.pgc-form .pgc-amount .pgc-amount__value .woocommerce-Price-amount {
	font-size: 22px !important;
}

.pgc-amount input:checked + .pgc-amount__value {
	color: #ffffff;
	background: var(--pgc-noir);
}

.pgc-amount input:focus-visible + .pgc-amount__value {
	outline: 2px solid var(--pgc-bleu);
	outline-offset: 2px;
}

.pgc-amount:hover .pgc-amount__value {
	border-color: var(--pgc-bleu);
}

.pgc-custom-amount {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 12px 0 0;
}

.pgc-custom-amount[hidden] {
	display: none;
}

.pgc-input {
	padding: 11px 12px;
	border: 1px solid #c9c9c9;
	font-size: 16px;
	line-height: 1.2;
	background: #ffffff;
}

.pgc-input:focus {
	border-color: var(--pgc-noir);
	outline: 2px solid var(--pgc-bleu);
	outline-offset: 1px;
}

.pgc-row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.pgc-col {
	flex: 1 1 200px;
	margin: 0;
}

.pgc-col label {
	display: block;
	margin: 0 0 6px;
	font-size: 14px;
}

.pgc-col .pgc-input {
	width: 100%;
}

.pgc-hint {
	font-size: 13px;
	line-height: 1.5;
	color: var(--pgc-gris-texte);
}

.pgc-hint--block {
	display: block;
	margin: 0 !important;
	padding-top: 10px;
}

/* ------------------------------------------------ Panier */

.pgc-coupon-balance {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: var(--pgc-gris-texte);
}

/* ------------------------------------------------ Espace client */

.pgc-account .pgc-card {
	position: relative;
	margin: 0 0 24px;
	padding: 24px;
	border: 1px solid var(--pgc-gris);
	background: #ffffff;
}

/* Bouton de retrait d'une carte épuisée, dans le coin haut droit. */
.pgc-card__remove {
	position: absolute;
	top: 10px;
	right: 10px;
	margin: 0;
	z-index: 2;
}

.pgc-card__remove button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	font-size: 20px;
	line-height: 1;
	color: var(--pgc-gris-texte);
	background: #ffffff;
	border: 1px solid var(--pgc-gris);
	border-radius: 50%;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.pgc-card__remove button:hover,
.pgc-card__remove button:focus {
	color: var(--pgc-noir);
	border-color: var(--pgc-noir);
}

.pgc-account .pgc-card.is-inactive {
	opacity: 0.65;
}

.pgc-card__head {
	position: static; /* le thème force position:absolute sur les <header> */
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-start;
	justify-content: space-between;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--pgc-gris);
}

/* Le badge de statut laisse la place au bouton de retrait, en haut à droite. */
.pgc-card:has(.pgc-card__remove) .pgc-card__head {
	padding-right: 44px;
}

.pgc-card__label {
	margin: 0 0 4px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pgc-gris-texte);
}

.pgc-card__code {
	margin: 0;
	font-size: 22px;
	font-weight: 800;
	letter-spacing: 0.08em;
	color: var(--pgc-noir);
}

.pgc-card__status {
	padding: 5px 12px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: var(--pgc-gris);
	color: var(--pgc-noir);
}

.pgc-card.is-active .pgc-card__status {
	background: var(--pgc-bleu);
}

/* Partie droite de l'en-tête : badge de statut puis date de validité. */
.pgc-card__head-right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	text-align: right;
}

.pgc-card__expiry {
	margin: 0;
	font-size: 12px;
	color: var(--pgc-gris-texte);
}

/* ------------------------------------------------ Jauge de solde */

.pgc-card__balance {
	padding: 22px 0 0;
}

.pgc-card__balance .pgc-card__label {
	margin: 0 0 30px;
}

.pgc-gauge-wrap {
	position: relative;
}

/* Les deux montants flottent au-dessus du trait. */
.pgc-gauge__labels {
	position: relative;
	height: 34px;
	margin-bottom: 8px;
}

/* Solde restant : repère placé au bout du trait bleu (là où il s'arrête). */
.pgc-gauge__remaining {
	position: absolute;
	bottom: 0;
	transform: translateX(-50%);
	white-space: nowrap;
	font-size: 1.9rem;
	font-weight: 800;
	line-height: 1;
	color: var(--pgc-noir);
}

.pgc-gauge__remaining .woocommerce-Price-amount {
	font-size: 1.9rem;
	font-weight: 800;
	color: var(--pgc-noir);
}

/* Montant d'origine : discret, au bout de la ligne. */
.pgc-gauge__total,
.pgc-gauge__total .woocommerce-Price-amount {
	position: absolute;
	right: 0;
	bottom: 0;
	white-space: nowrap;
	font-size: 12px;
	font-weight: 400;
	line-height: 1;
	color: var(--pgc-gris-texte);
}

.pgc-gauge__total .woocommerce-Price-amount {
	position: static;
}

.pgc-gauge {
	position: relative;
	height: 8px;
	background: var(--pgc-gris);
	border-radius: 4px;
	overflow: hidden;
}

.pgc-gauge__fill {
	display: block;
	height: 100%;
	background: var(--pgc-bleu);
	border-radius: 4px 0 0 4px;
}

.pgc-account .pgc-card__history {
	margin: 18px 0 24px;
	font-size: 14px;
}

.pgc-card__history summary {
	cursor: pointer;
	font-weight: 800;
	padding: 4px 0;
}

.pgc-card__history table {
	width: 100%;
	margin: 12px 0 0;
	border-collapse: collapse;
}

.pgc-card__history th,
.pgc-card__history td {
	padding: 8px 10px;
	border-bottom: 1px solid var(--pgc-gris);
	font-size: 13px;
	text-align: left;
}

.pgc-account .pgc-card__cta {
	clear: both;
	margin: 24px 0 10px !important;
}

/* Boutons « Utiliser ma carte cadeau » et « Rattacher la carte » : contour noir
 * sur fond blanc, texte noir, au repos comme au survol. Le thème inverse les
 * boutons au survol (fond blanc, texte blanc, donc illisible) : on neutralise. */
.pgc-account .pgc-card__cta .button,
.pgc-attach__form .button {
	display: inline-block;
	background: #ffffff !important;
	color: var(--pgc-noir) !important;
	border: 1px solid var(--pgc-noir) !important;
	box-shadow: none !important;
	transition: background-color 0.15s ease;
}

.pgc-account .pgc-card__cta .button:hover,
.pgc-account .pgc-card__cta .button:focus,
.pgc-account .pgc-card__cta .button:active,
.pgc-attach__form .button:hover,
.pgc-attach__form .button:focus,
.pgc-attach__form .button:active {
	background: #faf9f5 !important;
	color: var(--pgc-noir) !important;
	border: 1px solid var(--pgc-noir) !important;
}

.pgc-empty {
	padding: 20px;
	background: #faf9f5;
	border: 1px solid var(--pgc-gris);
}

.pgc-attach {
	margin: 32px 0 0;
	padding: 24px;
	background: #faf9f5;
	border: 1px solid var(--pgc-gris);
}

.pgc-attach h3 {
	margin: 0 0 8px;
}

.pgc-attach__form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 14px 0 0;
}

.pgc-attach__form .pgc-input {
	flex: 1 1 240px;
	text-transform: uppercase;
}

.pgc-order-cards {
	margin: 32px 0 0;
}

@media (max-width: 600px) {
	.pgc-amount__value {
		min-width: 72px;
		padding: 10px 12px;
	}

	.pgc-account .pgc-card,
	.pgc-attach {
		padding: 18px;
	}
}

/* Message sous le formulaire de rattachement */
.pgc-attach__message {
	margin: 0 !important;
	padding-top: 10px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
}
.pgc-attach__message,
.pgc-attach__message.is-error,
.pgc-attach__message.is-info {
	color: #d0021b !important;
	background: none !important;
}

/* Paliers / montant libre */
.pgc-form [hidden] {
	display: none !important;
}

.pgc-form .pgc-switch {
	margin: 12px 0 0;
}

.pgc-form .pgc-link {
	padding: 0;
	border: 0;
	border-bottom: 1px solid var(--pgc-noir);
	border-radius: 0;
	background: none !important;
	box-shadow: none;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--pgc-noir) !important;
	cursor: pointer;
}

.pgc-form .pgc-link:hover,
.pgc-form .pgc-link:focus-visible {
	border-bottom-color: var(--pgc-bleu);
	color: var(--pgc-noir) !important;
	background: none !important;
}

.pgc-form .pgc-custom-amount {
	display: block;
	margin: 0;
}

.pgc-form .pgc-sublabel {
	display: block;
	margin: 0 0 6px;
	font-size: 14px;
}

.pgc-form .pgc-custom-amount__row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 6px;
}

.pgc-form .pgc-custom-amount__row .pgc-input {
	width: 140px;
}

.pgc-form .pgc-custom-amount__unit {
	font-size: 16px;
	font-weight: 800;
}

/* Message personnel */
.pgc-form .pgc-col--full {
	flex: none;
	width: 100%;
	margin: 0 0 16px;
}

.pgc-form .pgc-textarea {
	display: block;
	width: 100%;
	min-height: 96px;
	resize: vertical;
	font-family: inherit;
}

.pgc-form .pgc-counter {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	text-align: right;
	color: #636363;
}