/**
 * Visual polish for the gift card form: a proper on/off toggle switch for
 * "Send as gift?" (replacing the bare checkbox), a smooth reveal for the
 * form it expands, and consistent eyebrow-style labels across every field
 * in it (recipient, message, delivery date, delivery channel, amount).
 *
 * Ecomus has no native pill-style toggle switch to match, so this one is
 * built from the theme's own tokens (color, font) but deliberately uses a
 * fully rounded track/thumb regardless of the theme's sharp-cornered
 * default - a toggle switch has to read as a switch, which needs the
 * rounded shape; that's a considered exception, not an inconsistency.
 */

/* ---- Toggle switch ---- */

.sgc-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.65em;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
}

.sgc-toggle__input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.sgc-toggle__track {
	position: relative;
	flex: none;
	width: 40px;
	height: 24px;
	border-radius: 999px;
	background: var(--em-input-bg-color, #ffffff);
	border: var(--em-input-border-width, 1px) solid var(--em-input-border-color, #cccccc);
	transition: background-color 0.18s ease, border-color 0.18s ease;
}

.sgc-toggle__thumb {
	position: absolute;
	top: 1px;
	left: 1px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--em-input-border-color, #cccccc);
	transition: transform 0.18s ease, background-color 0.18s ease;
}

.sgc-toggle__input:checked ~ .sgc-toggle__track {
	background: var(--em-button-bg-color, #1a1a1a);
	border-color: var(--em-button-bg-color, #1a1a1a);
}

.sgc-toggle__input:checked ~ .sgc-toggle__track .sgc-toggle__thumb {
	background: var(--em-button-color, #ffffff);
	transform: translateX(16px);
}

.sgc-toggle:hover .sgc-toggle__track {
	border-color: var(--em-input-border-color-hover, #888888);
}

.sgc-toggle__input:focus-visible ~ .sgc-toggle__track {
	outline: 2px solid var(--em-button-bg-color, #1a1a1a);
	outline-offset: 2px;
}

.sgc-toggle__text {
	font-family: var(--em-font__main, inherit);
	font-size: var(--em-input-font-size, inherit);
	color: var(--em-input-color, #1a1a1a);
}

/* ---- Smooth reveal for the form the toggle expands ---- */

.sgc_giftcard_product .shop_gc_giftcard_form_wrapper {
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.sgc_giftcard_product .shop_gc_giftcard_form_wrapper.sgc-is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.sgc_giftcard_product .shop_gc_giftcard_form_wrapper {
		transition: none;
		transform: none;
	}
}

/* ---- Consistent field labels ---- */

.sgc_giftcard_product .shop_gc_giftcard_form .sgc_field > label,
.sgc_giftcard_product .shop_gc_giftcard_form .sgc_field > .sgc-denomination-label {
	display: block;
	font-family: var(--em-font__main, inherit);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--em-input-color, #666666);
	margin-bottom: 0.5em;
}

.sgc_giftcard_product .shop_gc_giftcard_form .sgc_field > label .required,
.sgc_giftcard_product .shop_gc_giftcard_form .sgc_field > label .optional {
	text-transform: none;
	letter-spacing: normal;
	opacity: 0.6;
}

/* ---- Small-screen refinements ---- */

@media (max-width: 480px) {

	.sgc-denomination-pills {
		gap: 0.5em 1em;
	}

	.sgc-denomination-pill {
		padding: 0.45em 0.7em;
		font-size: 0.92rem;
	}

	.sgc-toggle__text {
		font-size: 0.92rem;
	}

	/* The "To/From/Message/etc." block can otherwise end up narrower than
	   its own placeholder text on small phones once padding is accounted
	   for - keep it at the full available width explicitly. */
	.sgc_giftcard_product .shop_gc_giftcard_form .sgc_field,
	.sgc_giftcard_product .shop_gc_giftcard_form .sgc_field input,
	.sgc_giftcard_product .shop_gc_giftcard_form .sgc_field textarea,
	.sgc_giftcard_product .shop_gc_giftcard_form .sgc_field select {
		width: 100%;
	}
}