/**
 * Hayder Voice — Form Styles
 */

@layer components {

	/* ============================================================
	 * FORM GROUPS
	 * ============================================================ */

	.form-group {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		margin-bottom: 1.5rem;
	}

	.form-label {
		font-family: var(--font-sans);
		font-size: var(--text-xs);
		font-weight: 600;
		letter-spacing: var(--ls-wider);
		color: var(--c-muted);
		text-transform: uppercase;
	}

	/* ============================================================
	 * INPUTS
	 * ============================================================ */

	.form-input {
		width: 100%;
		padding: 0.75rem 1rem;
		background: var(--c-surface);
		border: 1px solid var(--c-border);
		border-radius: var(--radius-md);
		color: var(--c-heading);
		font-family: var(--font-sans);
		font-size: var(--text-sm);
		line-height: 1.5;
		outline: none;
		transition: var(--transition-base);
		appearance: none;
		-webkit-appearance: none;
	}

	.form-input:hover {
		border-color: var(--c-border-mid);
	}

	.form-input:focus {
		border-color: var(--c-amber-border);
		background: var(--c-amber-surface);
		box-shadow: 0 0 0 3px var(--c-amber-glow);
	}

	.form-input::placeholder {
		color: var(--c-dust);
	}

	.form-input:invalid:not(:placeholder-shown) {
		border-color: var(--c-ember);
	}

	.form-input:valid:not(:placeholder-shown) {
		border-color: var(--c-sage);
	}

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

	/* ============================================================
	 * SELECT
	 * ============================================================ */

	select.form-input {
		background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237A7870' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right 1rem center;
		padding-right: 2.5rem;
	}

	/* ============================================================
	 * CHECKBOX / RADIO
	 * ============================================================ */

	.form-check {
		display: flex;
		align-items: flex-start;
		gap: 0.75rem;
		cursor: pointer;
	}

	.form-check-input {
		width: 18px;
		height: 18px;
		flex-shrink: 0;
		border: 1px solid var(--c-border);
		border-radius: var(--radius-sm);
		background: var(--c-surface);
		cursor: pointer;
		transition: var(--transition-base);
		appearance: none;
		-webkit-appearance: none;
		position: relative;
	}

	.form-check-input:checked {
		background: var(--c-amber);
		border-color: var(--c-amber);
	}

	.form-check-input:checked::after {
		content: '';
		position: absolute;
		top: 3px;
		left: 6px;
		width: 5px;
		height: 9px;
		border: 2px solid var(--c-void);
		border-top: none;
		border-left: none;
		transform: rotate(45deg);
	}

	.form-check-label {
		font-family: var(--font-sans);
		font-size: var(--text-sm);
		color: var(--c-muted);
		cursor: pointer;
		user-select: none;
	}

	/* ============================================================
	 * COMMENT FORM OVERRIDES
	 * ============================================================ */

	.comment-form-author,
	.comment-form-email,
	.comment-form-url,
	.comment-form-comment {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		margin-bottom: 1.25rem;
	}

	.comment-form-comment textarea {
		width: 100%;
	}

	/* Required asterisk */
	.required {
		color: var(--c-ember);
		margin-left: 0.2em;
	}

	/* Consent checkbox */
	.comment-form-cookies-consent {
		display: flex;
		align-items: flex-start;
		gap: 0.75rem;
		margin-bottom: 1.5rem;
	}

	.comment-form-cookies-consent label {
		font-family: var(--font-sans);
		font-size: var(--text-xs);
		color: var(--c-muted);
	}

	/* ============================================================
	 * CONTACT FORM 7 INTEGRATION
	 * ============================================================ */

	.wpcf7-form .form-group { margin-bottom: 1.5rem; }
	.wpcf7-text,
	.wpcf7-email,
	.wpcf7-textarea {
		all: unset;
		display: block;
		width: 100%;
		padding: 0.75rem 1rem;
		background: var(--c-surface);
		border: 1px solid var(--c-border);
		border-radius: var(--radius-md);
		color: var(--c-heading);
		font-family: var(--font-sans);
		font-size: var(--text-sm);
		line-height: 1.5;
		outline: none;
		transition: var(--transition-base);
		box-sizing: border-box;
	}

	.wpcf7-text:focus,
	.wpcf7-email:focus,
	.wpcf7-textarea:focus {
		border-color: var(--c-amber-border);
		background: var(--c-amber-surface);
	}

	.wpcf7-submit {
		all: unset;
		display: inline-flex;
		align-items: center;
		gap: 0.5em;
		padding: 0.7em 1.6em;
		font-family: var(--font-sans);
		font-size: var(--text-sm);
		font-weight: 600;
		border-radius: var(--radius-full);
		background: var(--c-amber);
		color: var(--c-void);
		cursor: pointer;
		transition: var(--transition-base);
	}

	.wpcf7-submit:hover {
		background: var(--c-amber-bright);
	}

	.wpcf7-not-valid-tip {
		font-family: var(--font-sans);
		font-size: var(--text-xs);
		color: var(--c-ember);
		margin-top: 0.25rem;
		display: block;
	}

	.wpcf7-response-output {
		margin-top: 1.5rem;
		padding: 1rem;
		border-radius: var(--radius-md);
		font-family: var(--font-sans);
		font-size: var(--text-sm);
	}

	.wpcf7-mail-sent-ok {
		background: color-mix(in oklch, var(--c-sage) 10%, transparent);
		border: 1px solid var(--c-sage);
		color: var(--c-sage);
	}

	.wpcf7-mail-sent-ng,
	.wpcf7-aborted {
		background: color-mix(in oklch, var(--c-ember) 10%, transparent);
		border: 1px solid var(--c-ember);
		color: var(--c-ember);
	}

} /* @layer components */