/**
 * Form Styles
 * Global Contact Form 7 and form element styling
 *
 * @package GospelHope
 */

/* ==========================================================================
   Base Form Elements
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="password"],
textarea,
select {
	width: 100%;
	padding: var(--space-sm) var(--space-md);
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-normal);
	color: var(--color-navy);
	background-color: var(--color-white);
	border: 2px solid var(--color-silver-light);
	border-radius: var(--radius-md);
	transition: border-color var(--transition-base), box-shadow var(--transition-base);
	-webkit-appearance: none;
	appearance: none;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--color-lime);
	box-shadow: 0 0 0 3px rgba(141, 198, 63, 0.2);
}

input::placeholder,
textarea::placeholder {
	color: var(--color-silver);
	opacity: 1;
}

textarea {
	min-height: 150px;
	resize: vertical;
	line-height: var(--line-height-relaxed);
}

select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%231a2b47' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--space-md) center;
	padding-right: calc(var(--space-md) * 2 + 12px);
	cursor: pointer;
}

/* Labels */
label {
	display: block;
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-medium);
	color: var(--color-navy);
	margin-bottom: var(--space-xs);
}

/* Checkboxes and Radio Buttons */
input[type="checkbox"],
input[type="radio"] {
	width: 20px;
	height: 20px;
	margin-right: var(--space-xs);
	accent-color: var(--color-lime);
	cursor: pointer;
}

/* ==========================================================================
   Contact Form 7 Specific Styles
   ========================================================================== */

.wpcf7 {
	max-width: 100%;
}

.wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

/* Form Labels */
.wpcf7-form label {
	display: block;
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-medium);
	color: var(--color-navy);
	margin-bottom: var(--space-xs);
}

/* Light text variant (for dark backgrounds) */
.formsBlock--lightText .wpcf7-form label {
	color: var(--color-white);
}

/* Form Row/Group */
.wpcf7-form p {
	margin: 0;
}

/* Input Fields */
.wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-checkbox):not(.wpcf7-radio):not(.wpcf7-acceptance) {
	width: 100%;
	padding: var(--space-sm) var(--space-md);
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-normal);
	color: var(--color-navy);
	background-color: var(--color-white);
	border: 2px solid var(--color-silver-light);
	border-radius: var(--radius-md);
	transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-checkbox):not(.wpcf7-radio):not(.wpcf7-acceptance):focus {
	outline: none;
	border-color: var(--color-lime);
	box-shadow: 0 0 0 3px rgba(141, 198, 63, 0.2);
}

/* Textarea */
.wpcf7-form textarea.wpcf7-form-control {
	min-height: 150px;
	resize: vertical;
	line-height: var(--line-height-relaxed);
}

/* Select Dropdown */
.wpcf7-form select.wpcf7-form-control {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%231a2b47' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--space-md) center;
	padding-right: calc(var(--space-md) * 2 + 12px);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* Submit Button */
.wpcf7-form input[type="submit"],
.wpcf7-submit {
	display: inline-block;
	width: auto;
	min-width: 180px;
	padding: var(--space-sm) var(--space-xl);
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-bold);
	text-align: center;
	color: var(--color-navy);
	background-color: var(--color-lime);
	border: 2px solid var(--color-lime);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: all var(--transition-base);
}

.wpcf7-form input[type="submit"]:hover,
.wpcf7-form input[type="submit"]:focus,
.wpcf7-submit:hover,
.wpcf7-submit:focus {
	background-color: var(--color-lime-dark);
	border-color: var(--color-lime-dark);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.wpcf7-form input[type="submit"]:active,
.wpcf7-submit:active {
	transform: translateY(0);
}

/* Disabled/Submitting state */
.wpcf7-form.submitting input[type="submit"],
.wpcf7-submit:disabled {
	opacity: 0.7;
	cursor: not-allowed;
	transform: none;
}

/* Checkbox and Radio Groups */
.wpcf7-checkbox,
.wpcf7-radio {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.wpcf7-checkbox .wpcf7-list-item,
.wpcf7-radio .wpcf7-list-item {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	margin: 0;
}

.wpcf7-checkbox .wpcf7-list-item label,
.wpcf7-radio .wpcf7-list-item label {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	font-weight: var(--font-weight-normal);
	margin-bottom: 0;
	cursor: pointer;
}

.wpcf7-checkbox input[type="checkbox"],
.wpcf7-radio input[type="radio"] {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	accent-color: var(--color-lime);
}

/* Acceptance (single checkbox) */
.wpcf7-acceptance {
	display: flex;
	align-items: flex-start;
	gap: var(--space-xs);
}

.wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}

.wpcf7-acceptance .wpcf7-list-item label {
	display: flex;
	align-items: flex-start;
	gap: var(--space-xs);
	font-weight: var(--font-weight-normal);
	font-size: var(--font-size-sm);
	line-height: var(--line-height-relaxed);
	margin-bottom: 0;
	cursor: pointer;
}

.wpcf7-acceptance input[type="checkbox"] {
	margin-top: 3px;
	flex-shrink: 0;
}

/* ==========================================================================
   Validation States
   ========================================================================== */

/* Invalid field */
.wpcf7-not-valid {
	border-color: #d63638 !important;
}

.wpcf7-not-valid:focus {
	box-shadow: 0 0 0 3px rgba(214, 54, 56, 0.2) !important;
}

/* Validation error message */
.wpcf7-not-valid-tip {
	display: block;
	font-size: var(--font-size-sm);
	color: #d63638;
	margin-top: var(--space-xs);
	font-weight: var(--font-weight-medium);
}

/* ==========================================================================
   Response Messages
   ========================================================================== */

.wpcf7-response-output {
	margin: var(--space-md) 0 0 0 !important;
	padding: var(--space-md) !important;
	border-radius: var(--radius-md) !important;
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-medium);
	text-align: center;
}

/* Success message */
.wpcf7-form.sent .wpcf7-response-output {
	background-color: rgba(141, 198, 63, 0.1);
	border: 2px solid var(--color-lime) !important;
	color: #155724;
}

/* Error message */
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output {
	background-color: rgba(214, 54, 56, 0.1);
	border: 2px solid #d63638 !important;
	color: #d63638;
}

/* Spam blocked */
.wpcf7-form.spam .wpcf7-response-output {
	background-color: rgba(255, 165, 0, 0.1);
	border: 2px solid #ffa500 !important;
	color: #b37400;
}

/* Mail sent but response failed */
.wpcf7-form.aborted .wpcf7-response-output {
	background-color: rgba(255, 165, 0, 0.1);
	border: 2px solid #ffa500 !important;
	color: #b37400;
}

/* ==========================================================================
   Loading Spinner
   ========================================================================== */

.wpcf7-spinner {
	display: inline-block;
	width: 24px;
	height: 24px;
	margin-left: var(--space-sm);
	vertical-align: middle;
	background-color: var(--color-lime);
	border-radius: 50%;
	opacity: 0;
	visibility: hidden;
}

.wpcf7-form.submitting .wpcf7-spinner {
	opacity: 1;
	visibility: visible;
	animation: cf7Pulse 1s ease-in-out infinite;
}

@keyframes cf7Pulse {
	0%, 100% {
		transform: scale(0.8);
		opacity: 0.5;
	}
	50% {
		transform: scale(1);
		opacity: 1;
	}
}

/* ==========================================================================
   Form Layouts
   ========================================================================== */

/* Two Column Layout */
.wpcf7-form .form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-md);
}

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

/* Full Width Field */
.wpcf7-form .form-full {
	grid-column: 1 / -1;
}

/* ==========================================================================
   File Upload
   ========================================================================== */

.wpcf7-form input[type="file"] {
	padding: var(--space-sm);
	background-color: #f9f9f9;
	border: 2px dashed var(--color-silver-light);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: border-color var(--transition-base), background-color var(--transition-base);
}

.wpcf7-form input[type="file"]:hover {
	border-color: var(--color-lime);
	background-color: rgba(141, 198, 63, 0.05);
}

.wpcf7-form input[type="file"]:focus {
	outline: none;
	border-color: var(--color-lime);
	box-shadow: 0 0 0 3px rgba(141, 198, 63, 0.2);
}

/* ==========================================================================
   Quiz Fields
   ========================================================================== */

.wpcf7-quiz-label {
	display: block;
	font-weight: var(--font-weight-medium);
	margin-bottom: var(--space-xs);
}

/* ==========================================================================
   Required Field Indicator
   ========================================================================== */

.wpcf7-form .required-indicator {
	color: #d63638;
	margin-left: 2px;
}

/* ==========================================================================
   Dark Background Variants
   ========================================================================== */

.formsBlock--lightText .wpcf7-response-output {
	color: var(--color-white);
}

.formsBlock--lightText .wpcf7-form.sent .wpcf7-response-output {
	background-color: rgba(141, 198, 63, 0.2);
	color: var(--color-lime);
}

.formsBlock--lightText .wpcf7-not-valid-tip {
	color: #ff6b6b;
}

/* ==========================================================================
   Mobile Optimizations
   ========================================================================== */

@media (max-width: 640px) {
	.wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-checkbox):not(.wpcf7-radio):not(.wpcf7-acceptance) {
		padding: var(--space-sm);
		font-size: 16px; /* Prevent zoom on iOS */
	}

	.wpcf7-form input[type="submit"],
	.wpcf7-submit {
		width: 100%;
		padding: var(--space-md);
	}

	textarea.wpcf7-form-control {
		min-height: 120px;
	}

	.wpcf7-checkbox,
	.wpcf7-radio {
		gap: var(--space-md);
	}
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.wpcf7-form input[type="submit"],
	.wpcf7-submit,
	.wpcf7-form-control,
	.wpcf7-spinner {
		transition: none;
		animation: none;
	}

	.wpcf7-form input[type="submit"]:hover,
	.wpcf7-submit:hover {
		transform: none;
	}
}