/**
 * Product Page Form Styles
 *
 * Shared styles for all product page forms (lantern, fan, stall).
 *
 * @since 3.2.0
 */

/* === Field wrapper === */
.wam-field {
	margin-bottom: var(--wam-space-md, 16px);
}

/* === Input / Select / Textarea === */
.wam-field input[type="text"],
.wam-field input[type="tel"],
.wam-field input[type="email"],
.wam-field input[type="number"],
.wam-field textarea,
.wam-field select {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--wam-border, #d4cec8);
	border-radius: var(--wam-radius-sm, 6px);
	background: var(--wam-bg-card, #fff);
	font-family: var(--wam-font-body, 'Noto Sans JP', sans-serif);
	font-size: var(--wam-font-size-base, 15px);
	color: var(--wam-text-primary, #2D2017);
	line-height: 1.6;
	transition: border-color 0.2s, box-shadow 0.2s;
	box-sizing: border-box;
}

.wam-field input[type="text"]:focus,
.wam-field input[type="tel"]:focus,
.wam-field input[type="email"]:focus,
.wam-field input[type="number"]:focus,
.wam-field textarea:focus,
.wam-field select:focus {
	border-color: var(--wam-primary, #2E4D8E);
	box-shadow: 0 0 0 3px rgba(46, 77, 142, 0.12);
	outline: none;
}

.wam-field textarea {
	min-height: 100px;
	resize: vertical;
}

.wam-field input[readonly] {
	background: var(--wam-bg-secondary, #f8f6f4);
	color: var(--wam-text-muted, #8b8078);
	cursor: default;
}

/* === Labels === */
.wam-field > label:first-child {
	display: block;
	margin-bottom: 6px;
	font-family: var(--wam-font-body, 'Noto Sans JP', sans-serif);
	font-size: var(--wam-font-size-base, 15px);
	font-weight: 600;
	color: var(--wam-text-primary, #2D2017);
	line-height: 1.6;
}

/* === Required badge === */
.wam-field .required {
	font-size: 0;
	display: inline-block;
	vertical-align: middle;
	margin-left: 6px;
}

.wam-field .required::after {
	content: '\5FC5\9808';
	font-size: var(--wam-font-size-xs, 12px);
	font-weight: 600;
	color: #c53d2d;
	background: rgba(197, 61, 45, 0.1);
	padding: 2px 8px;
	border-radius: 4px;
}

/* === Descriptions / help text === */
.wam-field .description {
	display: block;
	margin-top: 5px;
	font-size: 0.9em;
	color: var(--wam-text-muted, #8b8078);
	line-height: 1.5;
}

/* === Section headings === */
.wam-product-section {
	background: linear-gradient(135deg, var(--wam-secondary, #2E4D8E) 0%, var(--wam-secondary-dark, #1a3266) 100%);
	color: #fff;
	padding: 12px 16px;
	border-radius: var(--wam-radius-sm, 6px);
	border-left: 4px solid var(--wam-accent-gold, #C69C3F);
	font-family: var(--wam-font-heading, 'Noto Serif JP', serif);
	font-size: var(--wam-font-size-lg, 18px);
	font-weight: 600;
	margin: var(--wam-space-lg, 24px) 0 var(--wam-space-md, 16px);
	line-height: 1.4;
}

h4.wam-product-section {
	font-size: var(--wam-font-size-base, 15px);
	padding: 10px 14px;
}

/* === Radio card group === */
.wam-radio-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.wam-radio-card {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border: 1px solid var(--wam-border, #d4cec8);
	border-radius: var(--wam-radius-sm, 6px);
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s;
	min-height: 48px;
	background: var(--wam-bg-card, #fff);
}

.wam-radio-card:hover {
	border-color: var(--wam-border-strong, #a09890);
	background: var(--wam-bg-secondary, #f8f6f4);
}

.wam-radio-card:has(input:checked) {
	border-color: var(--wam-primary, #2E4D8E);
	background: rgba(46, 77, 142, 0.06);
}

.wam-radio-card input[type="radio"] {
	width: 20px;
	height: 20px;
	accent-color: var(--wam-primary, #2E4D8E);
	flex-shrink: 0;
}

.wam-radio-card__label {
	font-size: var(--wam-font-size-base, 15px);
	color: var(--wam-text-primary, #2D2017);
}

/* === Step indicator (stall form) === */
.wam-stall-custom-fields {
	counter-reset: stall-section;
}

.wam-stall-custom-fields h4.wam-product-section::before {
	counter-increment: stall-section;
	content: counter(stall-section) ". ";
}

/* === Error display === */
.wam-field.has-error input,
.wam-field.has-error textarea,
.wam-field.has-error select {
	border-color: var(--wam-error, #d63638);
	background: rgba(214, 54, 56, 0.03);
}

.wam-field-error {
	font-size: 14px;
	color: var(--wam-error, #d63638);
	margin-top: 6px;
	line-height: 1.4;
}

/* === Help text box === */
.wam-help-text {
	background: var(--wam-bg-secondary, #f8f6f4);
	border-left: 3px solid var(--wam-accent-gold, #C69C3F);
	padding: 10px 14px;
	border-radius: 0 var(--wam-radius-sm, 6px) var(--wam-radius-sm, 6px) 0;
	margin-bottom: var(--wam-space-md, 16px);
}

.wam-help-text .description {
	margin: 0;
	font-size: 0.9em;
	color: var(--wam-text-muted, #8b8078);
	line-height: 1.5;
}

/* === Quantity spinner === */
.quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--wam-border, #d4cec8);
	border-radius: var(--wam-radius-sm, 6px);
	overflow: hidden;
}

.quantity input[type="number"].qty {
	width: 60px;
	height: 48px;
	text-align: center;
	font-size: 18px;
	font-weight: 600;
	border: none;
	border-left: 1px solid var(--wam-border, #d4cec8);
	border-right: 1px solid var(--wam-border, #d4cec8);
	-moz-appearance: textfield;
	appearance: textfield;
	margin: 0;
	padding: 0;
	color: var(--wam-text-primary, #2D2017);
	background: var(--wam-bg-card, #fff);
}

.quantity input[type="number"].qty::-webkit-inner-spin-button,
.quantity input[type="number"].qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.quantity input[type="number"].qty:focus {
	outline: none;
	box-shadow: inset 0 0 0 2px rgba(46, 77, 142, 0.2);
}

/* +/- buttons */
.quantity .qty-btn,
.quantity .minus,
.quantity .plus {
	width: 44px;
	height: 48px;
	font-size: 20px;
	font-weight: 600;
	border: none;
	background: var(--wam-bg-secondary, #f8f6f4);
	color: var(--wam-text-primary, #2D2017);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s;
	user-select: none;
	line-height: 1;
}

.quantity .qty-btn:hover,
.quantity .minus:hover,
.quantity .plus:hover {
	background: var(--wam-border, #d4cec8);
}

.quantity .qty-btn:active,
.quantity .minus:active,
.quantity .plus:active {
	background: var(--wam-border-strong, #a09890);
	color: #fff;
}

/* === Mobile === */
@media (max-width: 768px) {
	.wam-field input[type="text"],
	.wam-field input[type="tel"],
	.wam-field input[type="email"],
	.wam-field input[type="number"],
	.wam-field textarea,
	.wam-field select {
		font-size: max(var(--wam-font-size-base, 15px), 16px);
		padding: 14px 16px;
	}

	.wam-field {
		margin-bottom: var(--wam-space-lg, 24px);
	}

	.wam-radio-card {
		padding: 14px 16px;
	}

	/* Sticky submit button for long forms */
	.wam-stall-custom-fields ~ .single_add_to_cart_button {
		position: sticky;
		bottom: 0;
		z-index: 10;
		width: 100%;
		border-radius: 0;
	}
}