/**
 * Maiyo Forms — Frontend styles
 */

.sf-form-wrapper {
	--sf-primary: #4f46e5;
	--sf-primary-hover: #4338ca;
	--sf-border: #e2e8f0;
	--sf-text: #0f172a;
	--sf-muted: #64748b;
	--sf-error: #dc2626;
	--sf-success: #059669;
	--sf-radius: 10px;
	--sf-form-max-width: 640px;
	max-width: var(--sf-form-max-width);
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.sf-form-wrapper--full {
	--sf-form-max-width: 100%;
}

.sf-form {
	background: #fff;
	border: 1px solid var(--sf-border);
	border-radius: var(--sf-radius);
	padding: 28px 32px;
	box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
}

.sf-form-body {
	display: block;
}

.sf-form-section {
	margin-bottom: var(--sf-section-gap, 28px);
}

.sf-form-section:last-child {
	margin-bottom: 0;
}

.sf-section-title {
	margin: 0 0 16px;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--sf-text);
	padding-bottom: 8px;
	border-bottom: 1px solid var(--sf-border);
}

.sf-section-grid {
	display: grid;
	grid-template-columns: var(--sf-grid-template, 1fr);
	gap: var(--sf-field-gap, 16px);
	align-items: start;
}

.sf-layout--single .sf-section-grid {
	grid-template-columns: 1fr;
}

.sf-layout--two-equal .sf-section-grid {
	grid-template-columns: repeat(2, 1fr);
}

.sf-layout--three-equal .sf-section-grid {
	grid-template-columns: repeat(3, 1fr);
}

.sf-layout--four-equal .sf-section-grid {
	grid-template-columns: repeat(4, 1fr);
}

.sf-layout--sidebar-left .sf-section-grid {
	grid-template-columns: 1fr 2fr;
}

.sf-layout--sidebar-right .sf-section-grid {
	grid-template-columns: 2fr 1fr;
}

.sf-layout--split-40-60 .sf-section-grid {
	grid-template-columns: 2fr 3fr;
}

.sf-layout--split-60-40 .sf-section-grid {
	grid-template-columns: 3fr 2fr;
}

.sf-field {
	min-width: 0;
	grid-column: span var(--sf-col-span, 1);
}

.sf-field--span-1 { --sf-col-span: 1; }
.sf-field--span-2 { --sf-col-span: 2; }
.sf-field--span-3 { --sf-col-span: 3; }
.sf-field--span-4 { --sf-col-span: 4; }

.sf-label {
	display: block;
	font-weight: 600;
	font-size: 14px;
	color: var(--sf-text);
	margin-bottom: 6px;
	line-height: var(--sf-input-line-height, 1.5);
}

.sf-required {
	color: var(--sf-error);
}

.sf-input {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--sf-border);
	border-radius: 8px;
	font-size: 15px;
	line-height: var(--sf-input-line-height, 1.5);
	transition: border-color 0.15s, box-shadow 0.15s;
	background: #fff;
	color: var(--sf-text);
}

.sf-input:focus {
	outline: none;
	border-color: var(--sf-primary);
	box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

.sf-input.sf-invalid {
	border-color: var(--sf-error);
}

.sf-field-error {
	display: block;
	font-size: 13px;
	color: var(--sf-error);
	margin-top: 4px;
	min-height: 18px;
}

.sf-choice {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	font-size: 14px;
	cursor: pointer;
}

.sf-radio-group {
	border: none;
	padding: 0;
	margin: 0;
}

.sf-radio-group--horizontal,
.sf-choice-group--horizontal {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 20px;
}

.sf-radio-group--horizontal .sf-choice,
.sf-choice-group--horizontal .sf-choice {
	margin-bottom: 0;
}

.sf-slider-wrap {
	display: flex;
	align-items: center;
	gap: 12px;
}

.sf-slider {
	flex: 1;
	min-width: 0;
	padding: 0;
	height: auto;
	accent-color: var(--sf-primary, #4f46e5);
}

.sf-slider-value {
	flex: 0 0 auto;
	min-width: 2.5em;
	font-weight: 600;
	font-size: 14px;
	color: var(--sf-text);
}

.sf-age-field,
.sf-input--readonly,
.sf-input[readonly] {
	background: #f1f5f9;
	cursor: default;
}

.sf-form-footer {
	margin-top: 24px;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.sf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 28px;
	border: none;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s, transform 0.1s;
}

.sf-btn--primary {
	background: var(--sf-primary);
	color: #fff;
}

.sf-btn--primary:hover:not(:disabled) {
	background: var(--sf-primary-hover);
}

.sf-btn--secondary {
	background: #f1f5f9;
	color: var(--sf-text);
}

.sf-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.sf-btn-loader {
	width: 18px;
	height: 18px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: #fff;
	border-radius: 50%;
	animation: sf-spin 0.7s linear infinite;
}

@keyframes sf-spin {
	to { transform: rotate(360deg); }
}

.sf-message {
	margin-top: 16px;
	padding: 14px 18px;
	border-radius: 8px;
	font-size: 14px;
}

.sf-message.sf-success {
	background: #d1fae5;
	color: var(--sf-success);
}

.sf-message.sf-error {
	background: #fee2e2;
	color: var(--sf-error);
}

.sf-phone-wrap {
	display: flex;
	align-items: stretch;
	gap: 8px;
}

.sf-country-code {
	flex: 0 0 auto;
	width: auto;
	min-width: 110px;
	max-width: 40%;
}

.sf-phone-input {
	flex: 1 1 auto;
	min-width: 0;
}

.sf-whatsapp-badge {
	flex-shrink: 0;
	align-self: center;
	font-size: 10px;
	font-weight: 700;
	color: #25d366;
	background: #e8faf0;
	padding: 4px 8px;
	border-radius: 4px;
	pointer-events: none;
}

.sf-hp {
	position: absolute;
	left: -9999px;
	opacity: 0;
	height: 0;
	overflow: hidden;
	pointer-events: none;
}

.sf-field.sf-hidden,
.sf-form-section.sf-hidden,
.sf-step-panel.sf-hidden,
.sf-step-indicator.sf-hidden {
	display: none !important;
}

/* Multi-step */
.sf-steps {
	display: flex;
	gap: 8px;
	margin-bottom: 24px;
	flex-wrap: wrap;
}

.sf-step-indicator {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border: 1px solid var(--sf-border);
	border-radius: 999px;
	background: #f8fafc;
	cursor: default;
	font-size: 13px;
}

.sf-step-indicator.is-active {
	border-color: var(--sf-primary);
	background: rgba(79, 70, 229, 0.08);
	color: var(--sf-primary);
}

.sf-step-num {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--sf-border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 12px;
}

.sf-step-indicator.is-active .sf-step-num {
	background: var(--sf-primary);
	color: #fff;
}

.sf-step-panel {
	display: none;
	width: 100%;
	flex-wrap: wrap;
	gap: var(--sf-field-gap, 16px);
}

.sf-step-panel.is-active {
	display: flex;
}

.sf-submit--hidden {
	display: none;
}

.sf-form--multistep .sf-step-panel.is-active ~ .sf-form-body,
.sf-form--multistep .sf-form-body > .sf-field {
	display: none;
}

@media (max-width: 768px) {
	.sf-layout--three-equal .sf-section-grid,
	.sf-layout--four-equal .sf-section-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.sf-field--span-3,
	.sf-field--span-4 {
		grid-column: span 2;
	}
}

@media (max-width: 560px) {
	.sf-form {
		padding: 20px;
	}

	.sf-section-grid,
	.sf-layout--two-equal .sf-section-grid,
	.sf-layout--three-equal .sf-section-grid,
	.sf-layout--four-equal .sf-section-grid,
	.sf-layout--sidebar-left .sf-section-grid,
	.sf-layout--sidebar-right .sf-section-grid,
	.sf-layout--split-40-60 .sf-section-grid,
	.sf-layout--split-60-40 .sf-section-grid {
		grid-template-columns: 1fr;
	}

	.sf-field,
	.sf-field--span-1,
	.sf-field--span-2,
	.sf-field--span-3,
	.sf-field--span-4 {
		grid-column: span 1;
	}
}

/* Field style presets (builder CSS class picker) */
.sf-field.sf-style-highlight {
	padding: 12px 14px;
	background: #eef2ff;
	border-radius: 8px;
}

.sf-field.sf-style-muted .sf-label {
	color: var(--sf-muted);
	font-weight: 500;
}

.sf-field.sf-style-muted .sf-input {
	background: #f8fafc;
}

.sf-field.sf-style-compact {
	margin-bottom: calc(var(--sf-field-gap, 16px) * 0.5);
}

.sf-field.sf-style-compact .sf-label {
	margin-bottom: 4px;
}

.sf-field.sf-style-compact .sf-input {
	padding: 8px 10px;
}

.sf-field.sf-style-spacious {
	padding: 16px 18px;
	background: #fafafa;
	border-radius: 8px;
}

.sf-field.sf-style-border-accent {
	padding-left: 14px;
	border-left: 4px solid var(--sf-primary, #4f46e5);
}

.sf-field.sf-style-card {
	padding: 16px;
	background: #fff;
	border: 1px solid var(--sf-border);
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.sf-field.sf-style-inline {
	display: grid;
	grid-template-columns: minmax(120px, 35%) 1fr;
	gap: 12px;
	align-items: center;
}

.sf-field.sf-style-inline .sf-label {
	margin-bottom: 0;
}

@media (max-width: 520px) {
	.sf-field.sf-style-inline {
		grid-template-columns: 1fr;
	}

	.sf-field.sf-style-inline .sf-label {
		margin-bottom: 6px;
	}
}

/* Color themes */
.sf-theme--ocean {
	--sf-primary: #0ea5e9;
	--sf-primary-hover: #0284c7;
}

.sf-theme--forest {
	--sf-primary: #16a34a;
	--sf-primary-hover: #15803d;
}

.sf-theme--sunset {
	--sf-primary: #ea580c;
	--sf-primary-hover: #c2410c;
}

.sf-theme--rose {
	--sf-primary: #e11d48;
	--sf-primary-hover: #be123c;
}

.sf-theme--slate {
	--sf-primary: #475569;
	--sf-primary-hover: #334155;
}

.sf-theme--midnight {
	--sf-primary: #6366f1;
	--sf-primary-hover: #4f46e5;
	--sf-text: #f8fafc;
	--sf-muted: #94a3b8;
	--sf-border: #334155;
}

.sf-theme--midnight .sf-form {
	background: #0f172a;
	border-color: #334155;
}

.sf-theme--midnight .sf-input {
	background: #1e293b;
	border-color: #475569;
	color: #f8fafc;
}

.sf-theme--midnight .sf-input:focus {
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.35);
}

.sf-theme--ocean .sf-input:focus,
.sf-theme--forest .sf-input:focus,
.sf-theme--sunset .sf-input:focus,
.sf-theme--rose .sf-input:focus,
.sf-theme--slate .sf-input:focus {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sf-primary) 25%, transparent);
}

.sf-theme--ocean .sf-step-indicator.is-active,
.sf-theme--forest .sf-step-indicator.is-active,
.sf-theme--sunset .sf-step-indicator.is-active,
.sf-theme--rose .sf-step-indicator.is-active,
.sf-theme--slate .sf-step-indicator.is-active,
.sf-theme--midnight .sf-step-indicator.is-active {
	background: color-mix(in srgb, var(--sf-primary) 12%, transparent);
}