/**
 * S5O Gift Voucher - Public styles.
 *
 * @package S5o_Giftvoucher
 */

/* ==========================================================================
   PURCHASE FORM
   ========================================================================== */

/* Form container */
.s5o-gv-form {
}

/* Column backgrounds */
.s5o-gv-form__col-product {
	background: var(--s5o-surface-ice);
	padding: 1.5em;
	border-radius: 8px;
}

.s5o-gv-form__col-checkout {
	padding: 1.5em;
}

/* Amount preset buttons */
.s5o-gv-form__amounts {
	flex-wrap: wrap;
	gap: 0.4em;
	margin-bottom: 0.5em;
}

.s5o-gv-form__amounts .button {
	margin-bottom: 0.25em !important;
}

/* Fix: .ui.form .field .dropdown overrides labeled input sizing with 1rem.
   This selector needs higher specificity to restore em-based sizing. */
.ui.form .field .s5o-gv-form__amount-input .ui.dropdown,
.ui.form .field .s5o-gv-form__amount-input .ui.dropdown .menu > .item {
	font-size: 1em;
}

/* Amount input: right-align value */
.s5o-gv-form__amount-input.ui.massive.input input {
	text-align: right;
}

/* Hint text below fields — unified small text */
.s5o-gv-form__hint {
	display: block;
	margin-top: 0.4em;
	font-size: 0.85em;
	line-height: 1.4;
	color: var(--s5o-neutral-grey-700);
}

/* Hint with icon — flex so second line aligns with text, not icon */
.s5o-gv-form__hint--icon {
	display: flex;
	align-items: baseline;
}

.s5o-gv-form__hint--icon > .icon {
	flex-shrink: 0;
	margin-right: 0.3em;
}

/* Payment method buttons — vertical stack */
.s5o-gv-form__payment-methods.ui.buttons {
	flex-direction: column;
}

.s5o-gv-form__payment-methods .button {
	margin-bottom: 0.4em !important;
	text-align: left !important;
	justify-content: flex-start;
}

.s5o-gv-form__payment-methods .button.active {
	font-weight: bold;
}

.s5o-gv-form__payment-methods .button i.icon {
	margin-right: 0.6em;
}

/* Submit area spacing */
.s5o-gv-form__submit-area {
	margin-top: 1.5em;
}

/* Terms checkbox: links without underline, more line-height for readability */
.s5o-gv-form__terms label {
	line-height: 1.6;
}

.s5o-gv-form__terms a {
	text-decoration: none;
	font-weight: 600;
}

.s5o-gv-form__terms a:hover {
	text-decoration: underline;
}

/* Success / Error messages */
.s5o-gv-success,
.s5o-gv-error {
	margin-top: 1em;
}

.s5o-gv-success__text {
	font-size: 1.15em;
	color: var(--s5o-neutral-grey-700);
}

/* ==========================================================================
   SEPA DETAILS
   ========================================================================== */

.s5o-gv-sepa .definition.table td:first-child {
	width: 140px;
}

.s5o-gv-sepa__ref {
	font-weight: bold;
	font-size: 1.2em;
}

/* ==========================================================================
   VOUCHER CHECK
   ========================================================================== */

.s5o-gv-check__input {
	text-transform: uppercase;
	font-family: var(--s5o-f-text-mono);
	font-size: 1.2em;
	letter-spacing: 0.05em;
}

.s5o-gv-check__result {
	margin-top: 1.5em;
}

.s5o-gv-check__balance {
	font-size: 1.4em;
	font-weight: bold;
}

/* ==========================================================================
   DIMMER
   ========================================================================== */

.s5o-gv-dimmer-hint {
	margin-top: 1.5em;
	font-size: 0.85em;
	opacity: 0.8;
	color: #fff;
}

/* ==========================================================================
   MOBILE
   ========================================================================== */

@media only screen and (max-width: 767px) {
	.s5o-gv-form__amounts {
		flex-direction: column;
	}

	.s5o-gv-form__amounts .button {
		width: 100% !important;
	}
}