/**
 * Skill Carte Cadeau - gift card form on the product page.
 *
 * Deliberately almost styleless. This form lives inside someone else's theme,
 * and a gift card add-on that paints its own colours, fonts and radii over a
 * well designed shop is the most visible defect of WooCommerce extensions.
 *
 * What is set here is structure only: rhythm, grouping, and a border drawn
 * from currentColor so it follows the theme instead of fighting it. Every
 * class is stable and documented, so a shop can style it properly.
 */

.skcc-gift-form {
	margin: 0 0 1.5em;
	display: flex;
	flex-direction: column;
	gap: 1.1em;
}

.skcc-gift-form__group {
	margin: 0;
	padding: 0;
	border: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6em;
	/* Without this, a flex column stretches each pill to the full width of the
	   column and they read as big empty boxes instead of choices. */
	align-items: flex-start;
}

.skcc-gift-form__group > .skcc-gift-form__field,
.skcc-gift-form__group > legend {
	align-self: stretch;
}

/* A pill nested inside a field (the "another amount" choice) must size to its
   own text too, not to the width of the field that holds it. */
.skcc-gift-form__field > .skcc-gift-form__preset {
	align-self: flex-start;
}

.skcc-gift-form__group legend {
	padding: 0;
	font-weight: 600;
}

.skcc-gift-form__field {
	display: flex;
	flex-direction: column;
	gap: 0.35em;
}

.skcc-gift-form__field label {
	font-weight: 600;
}

.skcc-gift-form__field small {
	opacity: 0.7;
	line-height: 1.5;
}

.skcc-gift-form__presets {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

.skcc-gift-form__preset {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding: 0.5em 0.85em;
	/* currentColor keeps the outline in the theme's own ink. */
	border: 1px solid currentColor;
	border-radius: 6px;
	cursor: pointer;
	font-weight: 500;
	/* The border is dimmed rather than recoloured, so it works on any ground. */
	opacity: 0.72;
	transition: opacity 0.12s ease;
}

.skcc-gift-form__preset:hover,
.skcc-gift-form__preset:focus-within {
	opacity: 1;
}

.skcc-gift-form__preset input {
	margin: 0;
}

/* Touch targets stay at least 44px tall on a phone. */
@media (max-width: 600px) {
	.skcc-gift-form__preset {
		min-height: 44px;
	}
}

.skcc-gift-form textarea,
.skcc-gift-form input[type="text"],
.skcc-gift-form input[type="email"],
.skcc-gift-form input[type="number"] {
	width: 100%;
	max-width: 32em;
}

@media (prefers-reduced-motion: reduce) {
	.skcc-gift-form__preset {
		transition: none;
	}
}

/* The shortcode form carries its own submit button. */

.skcc-gift-standalone {
	display: flex;
	flex-direction: column;
	gap: 1em;
	align-items: flex-start;
}

.skcc-gift-standalone__submit {
	min-height: 44px;
	cursor: pointer;
}

.skcc-gift-form__notice {
	padding: 0.75em 1em;
	border: 1px dashed currentColor;
	border-radius: 6px;
	opacity: 0.75;
	font-size: 0.95em;
}

/* Option choices sit on their own line: the labels are sentences, not words. */

.skcc-gift-form__options .skcc-gift-form__preset {
	align-self: flex-start;
	text-align: left;
}

/* Choix de la remise, hors de la page de vente (shortcode, fiche produit). */
.skcc-gift-form__modes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 0.6em;
}

.skcc-gift-form__modes > legend { grid-column: 1 / -1; float: left; width: 100%; margin-bottom: 0.4em; font-weight: 700; }

.skcc-gift-form__mode {
	display: flex;
	align-items: center;
	gap: 0.6em;
	min-height: 52px;
	padding: 0.75em 1em;
	/* currentColor keeps the outline in the theme's own ink. */
	border: 1px solid currentColor;
	border-radius: 8px;
	cursor: pointer;
	opacity: 0.72;
}

.skcc-gift-form__mode:has(input:checked) { opacity: 1; box-shadow: 0 0 0 1px currentColor; }
.skcc-gift-form__mode input { margin: 0; }

.skcc-gift-form [hidden] { display: none !important; }
.skcc-gift-form__retrait,
.skcc-gift-form__remise { display: grid; gap: 10px; }
.skcc-gift-form__note,
.skcc-gift-form__lieu { margin: 0; }

/* La carte cadeau sur la page de remerciement. */
.skcc-merci { margin: 0 0 32px; padding: 20px 22px; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 10px; }
.skcc-merci__titre { margin: 0 0 8px; font-size: 1.25em; }
.skcc-merci__texte { margin: 0 0 10px; }
.skcc-merci__cartes { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.skcc-merci__cartes li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.skcc-merci__cartes span { font-family: Consolas, Menlo, monospace; letter-spacing: 0.04em; }

/* Prenom et nom du destinataire, cote a cote. */
.skcc-gift-form__duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.skcc-gift-form__duo[hidden] { display: none; }
@media (max-width: 480px) { .skcc-gift-form__duo { grid-template-columns: minmax(0, 1fr); } }
