.twf {
--twf-primary: var(--wp--preset--color--primary, #2563eb);
--twf-border: var(--wp--preset--color--border, #d1d5db);
--twf-muted: var(--wp--preset--color--text-muted, #6b7280);
--twf-text: var(--wp--preset--color--contrast, #1f2937);
--twf-error: #b42318;
--twf-radius: var(--wp--custom--radius--md, 8px);
--twf-gap: 1rem;
}
.twf { color: var(--twf-text); }
.twf-form { margin: 0; }
.twf-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: var(--twf-gap);
}
.twf-field { grid-column: span 6; min-width: 0; margin: 0; padding: 0; border: 0; }
.twf-w-half { grid-column: span 3; }
.twf-w-third { grid-column: span 2; }
@media (max-width: 600px) {
.twf-w-half,
.twf-w-third { grid-column: span 6; }
}
.twf-label { display: block; margin: 0 0 0.375rem; padding: 0; font-weight: 600; }
.twf-required { margin-left: 0.125rem; color: var(--twf-error); }
.twf :where(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea) {
box-sizing: border-box;
width: 100%;
padding: 0.7rem 0.85rem;
border: 1px solid var(--twf-border);
border-radius: var(--twf-radius);
background: #fff;
color: var(--twf-text);
font: inherit;
line-height: 1.4;
}
.twf :where(input, select, textarea):focus-visible {
outline: 2px solid var(--twf-primary);
outline-offset: 1px;
border-color: var(--twf-primary);
}
.twf-choices { display: grid; gap: 0.5rem; }
.twf-choice { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; }
.twf-description { margin: 0.375rem 0 0; color: var(--twf-muted); font-size: 0.875em; }
.twf-error { margin: 0.375rem 0 0; color: var(--twf-error); font-size: 0.875em; }
.twf-has-error :where(input, select, textarea) { border-color: var(--twf-error); }
.twf-form-error {
margin: 0 0 1rem;
padding: 0.75rem 1rem;
border-radius: var(--twf-radius);
background: #fef3f2;
color: var(--twf-error);
}
.twf-actions { margin-top: 1.25rem; }
:where(.twf-submit) {
padding: 0.8rem 1.4rem;
border: 0;
border-radius: var(--twf-radius);
background: var(--twf-primary);
color: #fff;
font: inherit;
font-weight: 600;
}
.twf-submit { cursor: pointer; }
.twf-submit[disabled] { cursor: progress; opacity: 0.6; }
.twf-hp {
position: absolute !important;
left: -9999px !important;
width: 1px;
height: 1px;
overflow: hidden;
}
.twf-confirmation {
padding: 1rem 1.25rem;
border-radius: var(--twf-radius);
background: color-mix(in srgb, var(--twf-primary) 8%, #fff);
color: var(--twf-text);
}
.twf-confirmation:focus { outline: none; }
.twf-notice { padding: 0.75rem 1rem; border: 1px dashed var(--twf-border); }