/**
 * Form Styles - Accessible, Mobile-First
 *
 * @package BouwTemplate
 * @since 1.0.0
 */

/* Form Container */
.bouw-form {
	display: flex;
	flex-direction: column;
	gap: var(--bouw-spacing-lg);
}

/* Form Rows - Mobile First */
.bouw-form-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bouw-spacing-md);
}

@media (min-width: 640px) {
	.bouw-form-row {
		grid-template-columns: 1fr 1fr;
	}
}

/* Form Field Group */
.bouw-form-field-group {
	display: flex;
	flex-direction: column;
	gap: var(--bouw-spacing-xs);
}

/* Labels - WCAG Compliant */
.bouw-form-field-group label {
	font-family: var(--bouw-font-body);
	font-size: var(--bouw-font-size-small);
	font-weight: 600;
	color: var(--bouw-color-black);
	line-height: var(--bouw-line-height-normal);
}

.bouw-form-field-group label span[aria-label] {
	color: var(--bouw-color-orange);
}

/* Input Fields - Mobile-first with iOS zoom prevention */
.bouw-form-field-group input[type="text"],
.bouw-form-field-group input[type="email"],
.bouw-form-field-group input[type="tel"],
.bouw-form-field-group select,
.bouw-form-field-group textarea {
	width: 100%;
	height: var(--bouw-input-height);
	padding: 0 var(--bouw-input-padding);
	font-family: var(--bouw-font-body);
	font-size: 16px; /* Prevents zoom on iOS - mobile base */
	line-height: var(--bouw-line-height-normal);
	color: var(--bouw-input-text);
	background-color: var(--bouw-input-bg);
	border: var(--bouw-input-border);
	border-radius: var(--bouw-input-radius);
	transition: border-color var(--bouw-transition-base), box-shadow var(--bouw-transition-base);
}

/* Desktop: Use design system font size */
@media (min-width: 640px) {
	.bouw-form-field-group input[type="text"],
	.bouw-form-field-group input[type="email"],
	.bouw-form-field-group input[type="tel"],
	.bouw-form-field-group select,
	.bouw-form-field-group textarea {
		font-size: var(--bouw-font-size-body-mobile);
	}
}

.bouw-form-field-group textarea {
	height: auto;
	min-height: 120px;
	padding: var(--bouw-spacing-md);
	resize: vertical;
}

/* Focus States - Accessibility */
.bouw-form-field-group input:focus,
.bouw-form-field-group select:focus,
.bouw-form-field-group textarea:focus {
	outline: none;
	border: var(--bouw-input-border-focus);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 10%, transparent);
}

/* Error States */
.bouw-form-field-group input.bouw-input-error,
.bouw-form-field-group select.bouw-input-error,
.bouw-form-field-group textarea.bouw-input-error {
	border-color: var(--color-error, #dc2626);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error) 10%, transparent);
}

.bouw-form-error {
	display: block;
	font-size: var(--bouw-font-size-small);
	color: var(--color-error, #dc2626);
	margin-top: var(--bouw-spacing-xs);
	font-weight: 500;
}

/* Success Message */
.bouw-form-success {
	padding: var(--bouw-spacing-md);
	background-color: var(--color-success, #10b981);
	color: var(--ink-inverse, #ffffff);
	border-radius: var(--bouw-radius-md);
	font-weight: 600;
	text-align: center;
	margin-bottom: var(--bouw-spacing-lg);
}

/* Submit Button */
.bouw-form button[type="submit"] {
	width: 100%;
	height: var(--bouw-input-height);
	padding: 0 var(--bouw-spacing-lg);
	font-family: var(--bouw-font-body);
	font-size: var(--bouw-font-size-body-mobile);
	font-weight: 600;
	color: var(--bouw-color-white);
	background-color: var(--bouw-color-orange);
	border: none;
	border-radius: var(--bouw-input-radius);
	cursor: pointer;
	transition: background-color var(--bouw-transition-base), transform var(--bouw-transition-fast);
}

.bouw-form button[type="submit"]:hover:not(:disabled) {
	background-color: var(--color-accent-hover, #e6850a);
	transform: translateY(-1px);
}

.bouw-form button[type="submit"]:active:not(:disabled) {
	transform: translateY(0);
}

.bouw-form button[type="submit"]:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Form Disclaimer */
.bouw-form-disclaimer {
	font-size: var(--bouw-font-size-small);
	color: var(--bouw-color-gray-50);
	text-align: center;
	line-height: var(--bouw-line-height-relaxed);
}

.bouw-form-disclaimer a {
	color: var(--bouw-color-orange);
	text-decoration: underline;
}

.bouw-form-disclaimer a:hover {
	text-decoration: none;
}

/* Hero Form Specific - moved to css/blocks/hero.css */

/* Mobile Optimization - already handled by mobile-first approach above */
/* iOS zoom prevention moved to base styles */