/*
 * Cartes cadeaux — surfaces publiques.
 *
 * Trois formulaires, un tableau, et une contrainte commune : ils s'insèrent
 * dans des pages que le thème dessine déjà (fiche produit, panier, commande,
 * compte). Rien ici ne redéfinit une police ni une couleur de fond ; tout
 * emprunte les jetons du thème enfant, avec un repli quand ils manquent — ce
 * qui arrive si l'extension est active sur un thème différent.
 */

:root {
	--af-gc-ink: var(--af-text-default, #24231f);
	--af-gc-muted: var(--af-text-muted, #5f5b53);
	--af-gc-line: var(--af-border-default, #dcd6cc);
	--af-gc-paper: var(--af-surface-raised, #fff);
	--af-gc-soft: var(--af-surface-sunken, #f7f4ef);
}

.af-gift-card-fields,
.af-gift-card-redeem,
.af-gift-card-checker {
	font-family: var(--af-font-ui, inherit);
	color: var(--af-gc-ink);
}

.af-gift-card-fields * ,
.af-gift-card-redeem *,
.af-gift-card-checker * { box-sizing: border-box; }

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

.af-gift-card-fields {
	margin: 1.25rem 0;
	padding: 1.1rem 1.2rem;
	background: var(--af-gc-soft);
	border: 1px solid var(--af-gc-line);
	border-radius: 6px;
}

.af-gift-card-fields__intro {
	margin: 0 0 1rem;
	font-size: .9rem;
	color: var(--af-gc-muted);
}

.af-gift-card-field {
	margin: 0 0 .85rem;
}

.af-gift-card-field label {
	display: block;
	margin-bottom: .3rem;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .01em;
}

.af-gift-card-field input,
.af-gift-card-field textarea {
	width: 100%;
	padding: .6rem .7rem;
	background: var(--af-gc-paper);
	border: 1px solid var(--af-gc-line);
	border-radius: 4px;
	/* 16px minimum : en dessous, iOS zoome sur le champ au focus et la fiche
	   part de travers. */
	font: inherit;
	font-size: 1rem;
}

.af-gift-card-field textarea { resize: vertical; }

.af-gift-card-field__hint {
	display: block;
	margin-top: .28rem;
	font-size: .76rem;
	color: var(--af-gc-muted);
}

/* Sélecteur de montant ------------------------------------------------ */

.af-gc-amount-options {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: .6rem;
	margin-bottom: .25rem;
}

.af-gc-amount-option {
	--af-gc-choice: oklch(45% .035 105);
	display: grid;
	grid-template-columns: 1rem 1fr;
	align-items: center;
	gap: .5rem;
	min-height: 3rem;
	padding: .55rem .65rem;
	color: var(--af-gc-ink);
	background: oklch(98% .008 75);
	border: 1px solid var(--af-gc-line);
	border-radius: .55rem;
	font: inherit;
	font-size: .9rem;
	font-weight: 650;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	transition: border-color 180ms cubic-bezier(.22, 1, .36, 1), box-shadow 180ms cubic-bezier(.22, 1, .36, 1), transform 180ms cubic-bezier(.22, 1, .36, 1);
}

.af-gc-amount-option[data-amount-key="10"] { --af-gc-choice: oklch(69% .065 31); }
.af-gc-amount-option[data-amount-key="20"] { --af-gc-choice: oklch(38% .06 167); }
.af-gc-amount-option[data-amount-key="25"] { --af-gc-choice: oklch(31% .065 235); }
.af-gc-amount-option[data-amount-key="30"] { --af-gc-choice: oklch(31% .07 326); }
.af-gc-amount-option[data-amount-key="35"] { --af-gc-choice: oklch(57% .12 40); }
.af-gc-amount-option[data-amount-key="50"] { --af-gc-choice: oklch(59% .095 79); }
.af-gc-amount-option[data-amount-key="100"] { --af-gc-choice: oklch(27% .08 18); }

.af-gc-amount-option__swatch {
	display: block;
	width: 1rem;
	aspect-ratio: 1;
	background: var(--af-gc-choice);
	border: 1px solid oklch(25% .02 70 / 24%);
	border-radius: 50%;
	box-shadow: inset 0 0 0 2px oklch(96% .01 75 / 30%);
}

@media (hover: hover) {
	.af-gc-amount-option:hover {
		border-color: var(--af-gc-choice);
		transform: translateY(-1px);
	}
}

.af-gc-amount-option.is-selected {
	border-color: var(--af-gc-choice);
	box-shadow: 0 0 0 2px var(--af-gc-choice);
}

.af-gc-amount-option:focus-visible {
	outline: 3px solid var(--af-color-focus, #245fb8);
	outline-offset: 3px;
}

.af-gc-native-select {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

@media (max-width: 520px) {
	.af-gc-amount-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .woocommerce-product-gallery.wd-has-thumb .wd-gallery-images {
    width: 100% !important;
    max-width: 100% !important;
  }

  .woocommerce-product-gallery .wd-gallery-thumb {
    display: none !important;
  }
}

/* Les cartes sont horizontales. Le cadre 9:16 prévu pour les vêtements
   transformait leur fond papier en deux grandes bandes vides. Cette feuille
   n'est chargée sur une fiche produit que pour la carte cadeau : le recadrage
   peut donc suivre l'objet réel sans toucher aux photos des abayas. */
.af-product-hero__media .wd-gallery-images {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1.58 / 1 !important;
  background: oklch(92% .018 78);
}

.af-product-hero__media .woocommerce-product-gallery {
  display: block !important;
}

.af-product-hero__media .woocommerce-product-gallery .wd-gallery-images .woocommerce-product-gallery__image img {
  object-fit: cover !important;
  object-position: center !important;
  transform: scale(1.08);
}

.af-product-hero__media .woocommerce-product-gallery .wd-gallery-thumb,
.af-product-hero__media .woocommerce-product-gallery > .wd-nav-pagin-wrap {
  display: none !important;
}

@media (max-width: 768px) {
  .af-product-hero__media .woocommerce-product-gallery {
    display: block;
  }

}

/* Panier et commande -------------------------------------------------- */

.af-gift-card-redeem {
	margin: 0 0 1.5rem;
	padding: 1rem 1.1rem;
	background: var(--af-gc-soft);
	border: 1px solid var(--af-gc-line);
	border-radius: 6px;
}

.af-gift-card-redeem label,
.af-gift-card-checker label {
	display: block;
	margin-bottom: .4rem;
	font-size: .85rem;
	font-weight: 600;
}

.af-gift-card-redeem__row,
.af-gift-card-checker__row {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.af-gift-card-redeem__row input,
.af-gift-card-checker__row input {
	flex: 1 1 14rem;
	min-width: 0;
	padding: .6rem .7rem;
	background: var(--af-gc-paper);
	border: 1px solid var(--af-gc-line);
	border-radius: 4px;
	font: inherit;
	font-size: 1rem;
	/* Le code se lit par groupes de quatre : l'espacement aide à le relire. */
	letter-spacing: .06em;
	text-transform: uppercase;
}

.af-gift-card-redeem__applied {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	margin-top: .75rem;
	padding-top: .75rem;
	border-top: 1px solid var(--af-gc-line);
	font-size: .9rem;
}

.af-gift-card-redeem__remove {
	padding: 0;
	color: var(--af-gc-muted);
	background: none;
	border: 0;
	font: inherit;
	font-size: .82rem;
	text-decoration: underline;
	text-underline-offset: .18em;
	cursor: pointer;
}

.af-gift-card-order-line {
	margin-top: .75rem;
	font-size: .9rem;
	color: var(--af-gc-muted);
}

/* Vérificateur de solde ----------------------------------------------- */

.af-gift-card-checker {
	max-width: 34rem;
	margin: 1.5rem 0;
}

.af-gift-card-checker__result {
	margin-top: .9rem;
	padding: .8rem .9rem;
	background: var(--af-gc-soft);
	border: 1px solid var(--af-gc-line);
	border-radius: 4px;
	font-size: .95rem;
}

/* Compte client ------------------------------------------------------- */

.af-gift-card-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--af-font-ui, inherit);
	font-size: .9rem;
	font-variant-numeric: tabular-nums;
}

.af-gift-card-table :where(th, td) {
	padding: .65rem .5rem;
	border-bottom: 1px solid var(--af-gc-line);
	text-align: start;
}

.af-gift-card-table thead th {
	font-size: .78rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--af-gc-muted);
}