/**
 * Clean and Simple Contact Form - Modern Style
 *
 * A modern, card-style form inspired by shadcn/ui and DaisyUI
 * Uses CSS variables for easy customization
 *
 * Override these variables in your theme to customize:
 *
 * :root {
 *   --cscf-primary: #0066cc;
 *   --cscf-radius: 0.5rem;
 * }
 */

/* ==========================================================================
   CSS Variables - Override these in your theme
   ========================================================================== */

:root {
	/* Colors */
	--cscf-primary: #18181b;
	--cscf-primary-hover: #27272a;
	--cscf-background: #ffffff;
	--cscf-foreground: #09090b;
	--cscf-muted: #f4f4f5;
	--cscf-muted-foreground: #71717a;
	--cscf-border: #e4e4e7;
	--cscf-input-bg: #ffffff;
	--cscf-ring: #18181b;
	--cscf-error: #dc2626;
	--cscf-error-bg: #fef2f2;
	--cscf-success: #22c55e;

	/* Spacing */
	--cscf-spacing-xs: 0.25rem;
	--cscf-spacing-sm: 0.5rem;
	--cscf-spacing-md: 1rem;
	--cscf-spacing-lg: 1.5rem;
	--cscf-spacing-xl: 2rem;

	/* Border radius */
	--cscf-radius-sm: 0.375rem;
	--cscf-radius: 0.5rem;
	--cscf-radius-lg: 0.75rem;

	/* Typography */
	--cscf-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--cscf-font-size-sm: 0.875rem;
	--cscf-font-size-base: 1rem;
	--cscf-font-size-lg: 1.125rem;
	--cscf-line-height: 1.5;
	--cscf-font-weight-medium: 500;
	--cscf-font-weight-semibold: 600;

	/* Shadows */
	--cscf-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--cscf-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
	--cscf-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

	/* Transitions */
	--cscf-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark mode support - add class 'dark' to html or body, or use prefers-color-scheme */
@media (prefers-color-scheme: dark) {
	:root:not(.light) {
		--cscf-primary: #fafafa;
		--cscf-primary-hover: #e4e4e7;
		--cscf-background: #09090b;
		--cscf-foreground: #fafafa;
		--cscf-muted: #27272a;
		--cscf-muted-foreground: #a1a1aa;
		--cscf-border: #27272a;
		--cscf-input-bg: #09090b;
		--cscf-ring: #d4d4d8;
		--cscf-error: #f87171;
		--cscf-error-bg: #450a0a;
	}
}

.dark {
	--cscf-primary: #fafafa;
	--cscf-primary-hover: #e4e4e7;
	--cscf-background: #09090b;
	--cscf-foreground: #fafafa;
	--cscf-muted: #27272a;
	--cscf-muted-foreground: #a1a1aa;
	--cscf-border: #27272a;
	--cscf-input-bg: #09090b;
	--cscf-ring: #d4d4d8;
	--cscf-error: #f87171;
	--cscf-error-bg: #450a0a;
}

/* ==========================================================================
   Form Container - Card Style
   ========================================================================== */

#cscf.cscfBlock {
	font-family: var(--cscf-font-family);
	font-size: var(--cscf-font-size-base);
	line-height: var(--cscf-line-height);
	color: var(--cscf-foreground);
	background: var(--cscf-background);
	border: 1px solid var(--cscf-border);
	border-radius: var(--cscf-radius-lg);
	padding: var(--cscf-spacing-xl);
	box-shadow: var(--cscf-shadow);
	max-width: 32rem;
	margin: 0 auto;
}

#cscf.cscfBlock * {
	box-sizing: border-box;
}

/* ==========================================================================
   Form Layout
   ========================================================================== */

#cscf .cscfForm > p {
	color: var(--cscf-muted-foreground);
	font-size: var(--cscf-font-size-sm);
	margin-bottom: var(--cscf-spacing-lg);
}

#cscf form {
	display: flex;
	flex-direction: column;
	gap: var(--cscf-spacing-lg);
}

/* ==========================================================================
   Field Groups
   ========================================================================== */

#cscf .cscf-field {
	display: flex;
	flex-direction: column;
	gap: var(--cscf-spacing-sm);
}

/* ==========================================================================
   Labels
   ========================================================================== */

#cscf label {
	font-size: var(--cscf-font-size-sm);
	font-weight: var(--cscf-font-weight-medium);
	color: var(--cscf-foreground);
	display: block;
}

/* ==========================================================================
   Inputs & Textarea - Large, comfortable sizing
   ========================================================================== */

#cscf .cscf-input,
#cscf .cscf-textarea {
	width: 100%;
	padding: var(--cscf-spacing-md) var(--cscf-spacing-md);
	font-size: var(--cscf-font-size-base);
	font-family: inherit;
	line-height: var(--cscf-line-height);
	color: var(--cscf-foreground);
	background-color: var(--cscf-input-bg);
	border: 1px solid var(--cscf-border);
	border-radius: var(--cscf-radius);
	transition: border-color var(--cscf-transition), box-shadow var(--cscf-transition);
	outline: none;
}

#cscf .cscf-input::placeholder,
#cscf .cscf-textarea::placeholder {
	color: var(--cscf-muted-foreground);
	opacity: 1;
}

/* Focus state */
#cscf .cscf-input:focus,
#cscf .cscf-textarea:focus {
	border-color: var(--cscf-ring);
	box-shadow: 0 0 0 2px var(--cscf-background), 0 0 0 4px var(--cscf-ring);
}

/* Hover state */
#cscf .cscf-input:hover:not(:focus),
#cscf .cscf-textarea:hover:not(:focus) {
	border-color: var(--cscf-muted-foreground);
}

/* Textarea specific */
#cscf .cscf-textarea {
	min-height: 8rem;
	resize: vertical;
}

/* ==========================================================================
   Checkbox
   ========================================================================== */

#cscf .cscf-checkbox {
	width: 1.25rem;
	height: 1.25rem;
	accent-color: var(--cscf-primary);
	cursor: pointer;
	margin: 0;
}

#cscf .cscf-field:has(.cscf-checkbox) {
	flex-direction: row;
	align-items: flex-start;
	gap: var(--cscf-spacing-sm);
}

#cscf .cscf-field:has(.cscf-checkbox) label {
	order: -1;
	flex: 1;
}

/* ==========================================================================
   Error States
   ========================================================================== */

#cscf .cscf-field--error .cscf-input,
#cscf .cscf-field--error .cscf-textarea {
	border-color: var(--cscf-error);
	background-color: var(--cscf-error-bg);
}

#cscf .cscf-field--error .cscf-input:focus,
#cscf .cscf-field--error .cscf-textarea:focus {
	border-color: var(--cscf-error);
	box-shadow: 0 0 0 2px var(--cscf-background), 0 0 0 4px var(--cscf-error);
}

#cscf .cscf-error-message {
	font-size: var(--cscf-font-size-sm);
	color: var(--cscf-error);
	display: block;
	margin-top: var(--cscf-spacing-xs);
}

/* ==========================================================================
   Submit Button - Large and prominent
   ========================================================================== */

#cscf .cscf-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: var(--cscf-spacing-md) var(--cscf-spacing-xl);
	font-family: inherit;
	font-size: var(--cscf-font-size-base);
	font-weight: var(--cscf-font-weight-semibold);
	line-height: var(--cscf-line-height);
	color: var(--cscf-background);
	background-color: var(--cscf-primary);
	border: none;
	border-radius: var(--cscf-radius);
	cursor: pointer;
	transition: opacity var(--cscf-transition), transform var(--cscf-transition), box-shadow var(--cscf-transition);
	outline: none;
	margin-top: var(--cscf-spacing-sm);
}

#cscf .cscf-button:hover {
	background-color: var(--cscf-primary);
	opacity: 0.8;
	transform: translateY(-2px);
	box-shadow: var(--cscf-shadow-lg);
}

/* Focus state - visible ring for keyboard navigation */
#cscf .cscf-button:focus {
	outline: 2px solid var(--cscf-ring);
	outline-offset: 2px;
}

#cscf .cscf-button:focus-visible {
	box-shadow: 0 0 0 2px var(--cscf-background), 0 0 0 4px var(--cscf-ring);
}

#cscf .cscf-button:active {
	transform: scale(0.98);
}

#cscf .cscf-button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ==========================================================================
   Messages - Success and Error
   ========================================================================== */

#cscf .cscfMessageSent,
#cscf .cscfMessageNotSent {
	text-align: center;
	padding: var(--cscf-spacing-xl);
}

#cscf .cscfMessageSent h3,
#cscf .cscfMessageNotSent h3 {
	font-size: var(--cscf-font-size-lg);
	font-weight: var(--cscf-font-weight-semibold);
	margin: 0 0 var(--cscf-spacing-md) 0;
}

#cscf .cscfMessageSent p,
#cscf .cscfMessageNotSent p {
	color: var(--cscf-muted-foreground);
	margin: 0;
}

#cscf .cscfMessageSent h3 {
	color: var(--cscf-success);
}

#cscf .cscfMessageNotSent h3 {
	color: var(--cscf-error);
}

/* ==========================================================================
   reCAPTCHA
   ========================================================================== */

#cscf #recaptcha_div {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--cscf-spacing-sm);
}

#cscf .g-recaptcha {
	transform-origin: center;
}

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

@media (max-width: 480px) {
	#cscf.cscfBlock {
		padding: var(--cscf-spacing-lg);
		border-radius: var(--cscf-radius);
		margin: 0 var(--cscf-spacing-sm);
	}

	#cscf .cscf-input,
	#cscf .cscf-textarea,
	#cscf .cscf-button {
		padding: var(--cscf-spacing-sm) var(--cscf-spacing-md);
	}
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
	#cscf.cscfBlock {
		box-shadow: none;
		border: 1px solid #000;
	}
}