/*
 * Tidy Contact Form – Stylesheet
 * ~5kb minified | CSS custom properties | Dark mode auto
 */

/* ── Variables ──────────────────────────────────────────────────────────────── */
:root {
	--tdcf-primary:        #2563eb;
	--tdcf-primary-hover:  #1d4ed8;
	--tdcf-border:         #e2e8f0;
	--tdcf-border-focus:   #2563eb;
	--tdcf-text:           #0f172a;
	--tdcf-label:          #334155;
	--tdcf-muted:          #64748b;
	--tdcf-placeholder:    #94a3b8;
	--tdcf-bg:             #ffffff;
	--tdcf-bg-input:       #ffffff;
	--tdcf-bg-form:        transparent;
	--tdcf-error:          #dc2626;
	--tdcf-success:        #16a34a;
	--tdcf-radius:         8px;
	--tdcf-radius-btn:     8px;
	--tdcf-gap:            1.5rem;
	--tdcf-font:           inherit;
	--tdcf-max-width:      640px;
	--tdcf-shadow-input:   0 1px 2px rgba(0, 0, 0, 0.05);
	--tdcf-shadow-btn:     0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
}

@media (prefers-color-scheme: dark) {
	:root {
		--tdcf-primary:      #60a5fa;
		--tdcf-primary-hover: #3b82f6;
		--tdcf-border:       #334155;
		--tdcf-border-focus: #60a5fa;
		--tdcf-text:         #f1f5f9;
		--tdcf-label:        #cbd5e1;
		--tdcf-muted:        #94a3b8;
		--tdcf-placeholder:  #64748b;
		--tdcf-bg:           #0f172a;
		--tdcf-bg-input:     #1e293b;
		--tdcf-error:        #f87171;
		--tdcf-success:      #4ade80;
	}
}

/* ── Wrapper ────────────────────────────────────────────────────────────────── */
.tdcf-wrapper {
	position: relative;
	max-width: var(--tdcf-max-width);
	font-family: var(--tdcf-font);
	color: var(--tdcf-text);
	line-height: 1.6;
	margin-top: 2.5rem;
	margin-bottom: 3.5rem;
	-webkit-font-smoothing: antialiased;
}

/* ── Form ───────────────────────────────────────────────────────────────────── */
.tdcf-form {
	display: flex;
	flex-direction: column;
	gap: var(--tdcf-gap);
}

/* ── Fields ─────────────────────────────────────────────────────────────────── */
.tdcf-field {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.tdcf-field label {
	font-size: inherit;
	font-weight: 600;
	color: var(--tdcf-label);
	letter-spacing: -0.01em;
}

.tdcf-required {
	color: var(--tdcf-error);
	margin-left: 2px;
}

.tdcf-field input[type="text"],
.tdcf-field input[type="email"],
.tdcf-field input[type="tel"],
.tdcf-field textarea,
.tdcf-field select {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid var(--tdcf-border);
	border-radius: var(--tdcf-radius);
	background-color: var(--tdcf-bg-input);
	color: var(--tdcf-text);
	font-size: inherit;
	font-family: var(--tdcf-font);
	line-height: 1.5;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	box-sizing: border-box;
	box-shadow: var(--tdcf-shadow-input);
	appearance: none;
}

.tdcf-field input::placeholder,
.tdcf-field textarea::placeholder {
	color: var(--tdcf-placeholder);
}

.tdcf-field input[type="text"]:focus,
.tdcf-field input[type="email"]:focus,
.tdcf-field input[type="tel"]:focus,
.tdcf-field textarea:focus {
	outline: none;
	border-color: var(--tdcf-border-focus);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--tdcf-primary) 15%, transparent);
}

.tdcf-field textarea {
	resize: vertical;
	min-height: 140px;
}

/* ── Checkbox field ──────────────────────────────────────────────────────────── */
.tdcf-field-checkbox {
	flex-direction: row;
	align-items: flex-start;
}

.tdcf-field-checkbox label {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-weight: normal;
	cursor: pointer;
	font-size: 0.875rem;
	color: var(--tdcf-muted);
	line-height: 1.5;
}

.tdcf-field-checkbox input[type="checkbox"] {
	margin-top: 3px;
	flex-shrink: 0;
	accent-color: var(--tdcf-primary);
	width: 1.1em;
	height: 1.1em;
}

.tdcf-field-checkbox a {
	color: var(--tdcf-primary);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

/* ── Submit button ───────────────────────────────────────────────────────────── */
.tdcf-submit {
	margin-top: 0.5rem;
}

.tdcf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.8125rem 2rem;
	background-color: var(--tdcf-primary);
	color: #fff;
	border: none;
	border-radius: var(--tdcf-radius-btn);
	font-size: inherit;
	font-family: var(--tdcf-font);
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
	line-height: 1.5;
	text-decoration: none;
	box-shadow: var(--tdcf-shadow-btn);
	letter-spacing: -0.01em;
}

.tdcf-btn:hover:not(:disabled) {
	background-color: var(--tdcf-primary-hover);
	transform: translateY(-1px);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
}

.tdcf-btn:active:not(:disabled) {
	transform: translateY(0);
	box-shadow: var(--tdcf-shadow-input);
}

.tdcf-btn:disabled {
	opacity: 0.65;
	cursor: not-allowed;
}

/* Loading spinner */
.tdcf-btn-spinner {
	display: none;
	width: 1em;
	height: 1em;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	border-radius: 50%;
}

.tdcf-btn.is-loading .tdcf-btn-spinner {
	display: block;
	animation: tdcf-spin 0.65s linear infinite;
}

.tdcf-btn.is-loading .tdcf-btn-label {
	opacity: 0.7;
}

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

/* ── Feedback messages ───────────────────────────────────────────────────────── */
.tdcf-success,
.tdcf-error {
	padding: 1rem 1.25rem;
	border-radius: var(--tdcf-radius);
	font-size: 0.9375rem;
	line-height: 1.5;
	margin-top: 0.75rem;
}

.tdcf-success {
	background-color: color-mix(in srgb, var(--tdcf-success) 10%, transparent);
	border: 1px solid color-mix(in srgb, var(--tdcf-success) 30%, transparent);
	color: var(--tdcf-success);
}

.tdcf-error {
	background-color: color-mix(in srgb, var(--tdcf-error) 8%, transparent);
	border: 1px solid color-mix(in srgb, var(--tdcf-error) 25%, transparent);
	color: var(--tdcf-error);
}

[hidden] { display: none !important; }

/* ── Field-level validation ───────────────────────────────────────────────────── */
.tdcf-field.has-error input,
.tdcf-field.has-error textarea {
	border-color: var(--tdcf-error);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--tdcf-error) 12%, transparent);
}

.tdcf-field.is-valid input,
.tdcf-field.is-valid textarea {
	border-color: var(--tdcf-success);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--tdcf-success) 10%, transparent);
}

.tdcf-field-error-msg {
	font-size: 0.8125rem;
	color: var(--tdcf-error);
	margin-top: 2px;
}

/* ── Success transition ──────────────────────────────────────────────────────── */
.tdcf-success--animate {
	animation: tdcf-fade-in .5s ease;
}

@keyframes tdcf-fade-in {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.tdcf-send-again {
	display: inline-block;
	margin-top: 1rem;
	font-size: 0.875rem;
	color: var(--tdcf-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

/* ── Captcha ─────────────────────────────────────────────────────────────────── */
.tdcf-captcha { margin-top: 0.25rem; }

/* ─────────────────────────────────────────────────────────────────────────────
 * TEMPLATES
 * ──────────────────────────────────────────────────────────────────────────── */

/* Minimal – underline-only inputs */
.tdcf-template-minimal .tdcf-field input[type="text"],
.tdcf-template-minimal .tdcf-field input[type="email"],
.tdcf-template-minimal .tdcf-field input[type="tel"],
.tdcf-template-minimal .tdcf-field textarea {
	border: none;
	border-bottom: 2px solid var(--tdcf-border);
	border-radius: 0;
	padding-left: 0;
	padding-right: 0;
	background-color: transparent;
	box-shadow: none;
}

.tdcf-template-minimal .tdcf-field input:focus,
.tdcf-template-minimal .tdcf-field textarea:focus {
	border-bottom-color: var(--tdcf-primary);
	box-shadow: none;
}

/* Card – shadowed container */
.tdcf-template-card {
	background-color: var(--tdcf-bg);
	padding: 2.5rem;
	border-radius: 16px;
	box-shadow:
		0 4px 6px -1px  rgba(0, 0, 0, 0.08),
		0 2px 4px -2px  rgba(0, 0, 0, 0.05),
		0 0 0 1px        rgba(0, 0, 0, 0.03);
}

/* Inline – 2 columns on large screens */
@media (min-width: 600px) {
	.tdcf-template-inline .tdcf-form {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 1.25rem;
	}

	.tdcf-template-inline .tdcf-field:has(textarea),
	.tdcf-template-inline .tdcf-field-checkbox,
	.tdcf-template-inline .tdcf-captcha,
	.tdcf-template-inline .tdcf-submit {
		grid-column: 1 / -1;
	}
}

/* Dark – force dark theme regardless of system preference */
.tdcf-template-dark {
	--tdcf-primary:      #60a5fa;
	--tdcf-primary-hover: #3b82f6;
	--tdcf-border:       #334155;
	--tdcf-border-focus: #60a5fa;
	--tdcf-text:         #f1f5f9;
	--tdcf-label:        #cbd5e1;
	--tdcf-muted:        #94a3b8;
	--tdcf-placeholder:  #64748b;
	--tdcf-bg:           #0f172a;
	--tdcf-bg-input:     #1e293b;
	--tdcf-error:        #f87171;
	--tdcf-success:      #4ade80;
	background-color: var(--tdcf-bg);
	padding: 2.5rem;
	border-radius: 16px;
}