/**
 * SkunkForms — Styled Form Design System
 *
 * Self-contained form styles scoped to .skunkforms-styled
 * When "Disable Form Styles" is toggled ON, this class is removed
 * and the form inherits the theme's styles instead.
 */

/* ============================================
   Form Container
   ============================================ */

.skunkforms-styled {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	line-height: 1.6;
	color: #1f2937;
	box-sizing: border-box;
}

.skunkforms-styled *,
.skunkforms-styled *::before,
.skunkforms-styled *::after {
	box-sizing: border-box;
}

/* ============================================
   Form Fields
   ============================================ */

.skunkforms-styled .wp-block-skunkforms-form-field {
	margin-bottom: 20px !important;
	width: 100% !important;
}

.skunkforms-styled .wp-block-skunkforms-form-field label {
	display: block !important;
	margin-bottom: 8px !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: #374151 !important;
	font-family: inherit !important;
}

.skunkforms-styled .wp-block-skunkforms-form-field label span {
	color: #dc2626 !important;
}

.skunkforms-styled .wp-block-skunkforms-form-field input[type="text"],
.skunkforms-styled .wp-block-skunkforms-form-field input[type="email"],
.skunkforms-styled .wp-block-skunkforms-form-field input[type="tel"],
.skunkforms-styled .wp-block-skunkforms-form-field input[type="url"],
.skunkforms-styled .wp-block-skunkforms-form-field input[type="number"],
.skunkforms-styled .wp-block-skunkforms-form-field textarea {
	width: 100% !important;
	padding: 12px 16px !important;
	border: 1.5px solid #d1d5db !important;
	border-radius: 8px !important;
	font-size: 15px !important;
	font-family: inherit !important;
	color: #1f2937 !important;
	background: #ffffff !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
	outline: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.skunkforms-styled .wp-block-skunkforms-form-field input:focus,
.skunkforms-styled .wp-block-skunkforms-form-field textarea:focus {
	border-color: #4f46e5 !important;
	box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1) !important;
}

.skunkforms-styled .wp-block-skunkforms-form-field input::placeholder,
.skunkforms-styled .wp-block-skunkforms-form-field textarea::placeholder {
	color: #9ca3af !important;
}

.skunkforms-styled .wp-block-skunkforms-form-field textarea {
	min-height: 120px !important;
	resize: vertical !important;
}

/* ============================================
   Submit Button
   ============================================ */

.skunkforms-styled .wp-block-skunkforms-form-button,
.skunkforms-styled .skunkforms-submit-button {
	padding: 12px 28px !important;
	background: #4f46e5 !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 8px !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	font-family: inherit !important;
	cursor: pointer !important;
	transition: background 0.2s ease, transform 0.05s ease, box-shadow 0.2s ease !important;
	display: inline-block !important;
	text-align: center !important;
	line-height: 1.5 !important;
}

.skunkforms-styled .wp-block-skunkforms-form-button:hover,
.skunkforms-styled .skunkforms-submit-button:hover {
	background: #4338ca !important;
	box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3) !important;
}

.skunkforms-styled .wp-block-skunkforms-form-button:active,
.skunkforms-styled .skunkforms-submit-button:active {
	transform: translateY(1px) !important;
}

/* ============================================
   Success / Error Messages
   ============================================ */

.skunkforms-styled .skunkforms-message {
	padding: 14px 18px !important;
	border-radius: 8px !important;
	margin-bottom: 16px !important;
	font-size: 14px !important;
	font-weight: 500 !important;
}

.skunkforms-styled .skunkforms-message--success {
	background-color: #ecfdf5 !important;
	color: #065f46 !important;
	border: 1px solid #a7f3d0 !important;
}

.skunkforms-styled .skunkforms-message--error {
	background-color: #fef2f2 !important;
	color: #991b1b !important;
	border: 1px solid #fecaca !important;
}

/* ============================================
   Loading State
   ============================================ */

.skunkforms-styled.skunkforms-loading {
	opacity: 0.6;
	pointer-events: none;
}

/* ============================================
   Editor-specific overrides
   ============================================ */

.editor-styles-wrapper .skunkforms-styled .wp-block-skunkforms-form-field input,
.editor-styles-wrapper .skunkforms-styled .wp-block-skunkforms-form-field textarea {
	cursor: default;
}

.editor-styles-wrapper .skunkforms-styled .wp-block-skunkforms-form-button {
	pointer-events: auto; /* Allow RichText editing */
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 600px) {
	.skunkforms-styled .wp-block-skunkforms-form-field input,
	.skunkforms-styled .wp-block-skunkforms-form-field textarea {
		font-size: 16px !important; /* Prevent iOS zoom */
	}
}