/* WebCreator Forms: the markup of docs/forms.md section 5. Colours and spacing come from the variables of the theme, with fallbacks. */
.wcf { position: relative; max-width: 40rem; margin: 1.5rem 0; }
.wcf *, .wcf *::before, .wcf *::after { box-sizing: border-box; }
.wcf-field { margin: 0 0 1.1rem; }
.wcf-field > label, .wcf-field > fieldset > legend { display: block; margin: 0 0 .35rem; font-weight: 600; color: var(--color-text, #1f2937); }
.wcf-group { margin: 0; padding: 0; border: 0; min-width: 0; }
.wcf-group > legend { padding: 0; }
.wcf input[type="text"], .wcf input[type="email"], .wcf input[type="tel"], .wcf input[type="number"], .wcf input[type="date"], .wcf select, .wcf textarea {
    display: block; width: 100%; padding: .65rem .8rem; font: inherit; color: var(--color-text, #1f2937); background: var(--color-bg-surface, #fff);
    border: 1px solid var(--color-border, #cbd5e1); border-radius: var(--radius-md, .5rem);
}
.wcf textarea { min-height: 8rem; resize: vertical; }
.wcf input:focus-visible, .wcf select:focus-visible, .wcf textarea:focus-visible, .wcf button:focus-visible { outline: 2px solid var(--wc-focus-ring, var(--color-primary, #3b82f6)); outline-offset: 2px; }
.wcf-options { display: flex; flex-direction: column; gap: .4rem; }
.wcf-options label, .wcf-check { display: flex; align-items: flex-start; gap: .55rem; font-weight: 400; cursor: pointer; }
.wcf-options input, .wcf-check input { margin-top: .3rem; flex: none; }
.wcf-req { color: var(--wc-danger-text, #b91c1c); }
.wcf-help { display: block; margin-top: .3rem; font-size: .875rem; color: var(--color-text-muted, #6b7280); }
.wcf-error { margin-top: .3rem; font-size: .875rem; color: var(--wc-danger-text, #b91c1c); }
.wcf-error:empty { display: none; }
.wcf-field.has-error input:not([type="checkbox"]):not([type="radio"]), .wcf-field.has-error select, .wcf-field.has-error textarea { border-color: var(--wc-danger-text, #b91c1c); }
.wcf-status { margin: 0 0 1rem; font-weight: 600; }
.wcf-status:empty { display: none; }
.wcf-heading, .wcf-step-title { margin: 1.4rem 0 .6rem; }
.wcf-text, .wcf-step-description { margin: 0 0 1rem; color: var(--color-text-secondary, #374151); }
.wcf-consent-text { margin: 0 0 1rem; font-size: .875rem; color: var(--color-text-muted, #6b7280); }
.wcf-step + .wcf-step { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border, #e5e7eb); }
.wcf-submit, .wcf-nav button {
    display: inline-block; padding: .7rem 1.4rem; font: inherit; font-weight: 600; cursor: pointer; color: var(--wc-on-primary, #fff); background: var(--color-primary, #3b82f6);
    border: 0; border-radius: var(--radius-md, .5rem);
}
.wcf-submit:hover, .wcf-nav button:hover { background: var(--color-primary-dark, #2563eb); color: var(--wc-on-primary-hover, #fff); }
.wcf-submit[disabled], .wcf-nav button[disabled] { opacity: .6; cursor: progress; }
.wcf-nav { display: flex; gap: .6rem; margin-top: 1rem; }
.wcf-nav .wcf-prev { color: var(--color-text, #1f2937); background: var(--color-bg-surface-hover, #e5e7eb); }
.wcf-progress { display: flex; gap: .4rem; margin: 0 0 1.2rem; padding: 0; list-style: none; font-size: .875rem; }
.wcf-progress li { list-style: none !important; margin: 0; flex: 1; padding-top: .35rem; border-top: 3px solid var(--color-border, #e5e7eb); color: var(--color-text-muted, #6b7280); }
.wcf-progress li.is-current { border-top-color: var(--color-primary, #3b82f6); color: var(--color-text, #1f2937); font-weight: 600; }
.wcf-progress li.is-done { border-top-color: #15803d; }
.wcf-success { margin: 1.5rem 0; padding: 1rem 1.2rem; max-width: 40rem; color: #14532d; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: var(--radius-md, .5rem); }
.wcf-success p { margin: 0; }
.wcf-preview-note { margin: .8rem 0 0; font-size: .8125rem; color: #92400e; }
/* The steps are shown one at a time only when the script is there; without it all of them are on the page */
.wcf [hidden], .wcf-js .wcf-step[hidden] { display: none !important; }
/* The trap field is out of sight, also without the inline style */
.wcf-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Newsletter signup (src/newsletter-core.php): the form is a .wcf form; the pages of the confirmation and the unsubscribe have a lone button */
.wcn .wcf-field-consent { margin-top: .25rem; }
.wcn-action { margin: 1.25rem 0; }
.wcn-sent .wcf-success { padding: 1rem 1.25rem; border-radius: var(--radius-md, .5rem); background: #ecfdf5; color: #065f46; }

/* The signup in the footer (src/newsletter-core.php, wcn_footer_html): compact, in the colours of the footer (--wc-footer-*), the button in the
   colour of the header button. The selectors start with .site-footer so they win over the page form rules above and over thema.css. */
.site-footer .wcn-footer .wcn-footer-text { margin: 0 0 var(--spacing-3, .75rem); color: var(--wc-footer-muted, var(--color-text-muted, #6b7280)); }
/* Some themes make a form a card (padding, background, border, shadow, glass): in the footer it is a plain part of the column */
.site-footer .wcn-footer form.wcf {
    max-width: none; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none; color: inherit;
}
.site-footer .wcn-footer form.wcf::before, .site-footer .wcn-footer form.wcf::after { content: none; }
.site-footer .wcn-footer .wcf-field { margin: 0 0 .75rem; }
.site-footer .wcn-footer .wcf-field > label { color: var(--wc-footer-text, var(--color-text, #1f2937)); font-weight: 600; }
.site-footer .wcn-footer .wcf-req { color: inherit; }
.site-footer .wcn-footer .wcf input[type="email"], .site-footer .wcn-footer input[type="email"] {
    color: var(--wc-footer-text, var(--color-text, #1f2937)); background: var(--wc-footer-bg, var(--color-bg-secondary, #f9fafb));
    border: 1px solid var(--wc-footer-muted, var(--color-text-muted, #6b7280));
}
.site-footer .wcn-footer input[type="email"]::placeholder { color: var(--wc-footer-subtle, var(--wc-footer-muted, var(--color-text-light, #6b7280))); opacity: 1; }
.site-footer .wcn-footer input:focus-visible, .site-footer .wcn-footer button:focus-visible, .site-footer .wcn-footer a:focus-visible {
    outline: 2px solid var(--wc-focus-ring-footer, currentColor); outline-offset: 2px;
}
.site-footer .wcn-footer .wcf-field > label.wcf-check { font-size: var(--font-size-sm, .875rem); font-weight: 400; text-transform: none; letter-spacing: normal; line-height: 1.5; color: var(--wc-footer-muted, var(--color-text-muted, #6b7280)); }
.site-footer .wcn-footer .wcf-check input { accent-color: var(--wc-cta-bg, var(--color-primary, #3b82f6)); }
.site-footer .wcn-footer .wcf-check a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.site-footer .wcn-footer .wcf-check a:hover { color: var(--wc-footer-text, inherit); }
.site-footer .wcn-footer .wcf-status { color: var(--wc-footer-text, var(--color-text, #1f2937)); }
.site-footer .wcn-footer .wcf-submit {
    color: var(--wc-on-cta, var(--wc-on-primary, #fff)); background: var(--wc-cta-bg, var(--color-primary, #3b82f6)); border: 1px solid var(--wc-cta-bg, var(--color-primary, #3b82f6));
}
.site-footer .wcn-footer .wcf-submit:hover { color: var(--wc-on-cta-hover, var(--wc-on-primary-hover, #fff)); background: var(--wc-cta-bg-hover, var(--color-primary-dark, #2563eb)); border-color: var(--wc-cta-bg-hover, var(--color-primary-dark, #2563eb)); }
.site-footer .wcn-footer .wcn-sent { margin: 0; }
.site-footer .wcn-footer .wcn-sent .wcf-success { margin: 0; max-width: none; background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.site-footer .wcn-footer .wcn-sent:focus-visible { outline: 2px solid var(--wc-focus-ring-footer, currentColor); outline-offset: 2px; }
.site-footer .wcn-footer .wcf-preview-note { color: var(--wc-footer-muted, inherit); }

/* Donations (src/donate-core.php): the block is a .wcf form; the amounts are choices that look like buttons; the cancel page has a lone button */
.wcd fieldset.wcf-field { border: 0; padding: 0; margin-inline: 0; min-width: 0; }
.wcd fieldset.wcf-field > legend { padding: 0; margin: 0 0 .35rem; font-weight: 600; color: var(--color-text, #1f2937); }
.wcd-intro { margin: 0 0 1rem; }
.wcd-choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.wcd-choice { position: relative; display: inline-flex; margin: 0; cursor: pointer; font-weight: 600; }
.wcd-choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.wcd-choice span { display: inline-block; min-width: 4.5rem; padding: .55rem 1rem; text-align: center; color: var(--color-text, #1f2937); background: var(--color-bg, #fff); border: 2px solid var(--color-border, #d1d5db); border-radius: var(--wc-btn-radius, var(--radius-md, .5rem)); }
.wcd-choice input:checked + span { color: var(--wc-on-primary, #fff); background: var(--wc-primary, var(--color-primary, #2563eb)); border-color: var(--wc-primary, var(--color-primary, #2563eb)); }
.wcd-choice input:focus-visible + span { outline: 3px solid var(--wc-focus-ring, var(--color-primary, #2563eb)); outline-offset: 3px; }
.wcd-other { margin-top: .75rem; max-width: 14rem; }
.wcd-other label { display: block; margin: 0 0 .25rem; font-weight: 400; font-size: var(--font-size-sm, .875rem); }
.wcd-note { margin: .4rem 0 0; font-size: var(--font-size-sm, .875rem); color: var(--color-text-muted, #4b5563); }
.wcd-action { margin: 1.25rem 0; }
.wcd-unavailable { padding: 1rem 1.25rem; border: 1px solid var(--color-border, #d1d5db); border-radius: var(--radius-md, .5rem); background: var(--color-bg-secondary, #f9fafb); }
.wcd-thanks { padding: 1rem 1.25rem; border-radius: var(--radius-md, .5rem); background: #ecfdf5; color: #065f46; }
.wcd-amount-paid { font-size: 1.5rem; font-weight: 700; margin: .5rem 0 0; }
.wcd-pending, .wcd-failed { padding: 1rem 1.25rem; border-radius: var(--radius-md, .5rem); background: #fef3c7; color: #78350f; }
.wcd-failed { background: #fef2f2; color: #7f1d1d; }