:root {
    --lcms-input-fg: var(--color-text-primary, #101010);
    --lcms-input-bg: var(--input-bg, var(--color-bg-secondary, #f5f5f5));
    --lcms-input-border: var(--color-border, oklch(0.8 0 0));
    --lcms-input-radius: var(--input-radius, var(--button-radius, var(--border-radius, 0.5rem)));
    --lcms-input-accent: var(--color-brand-primary, oklch(0.6 0.2 250));
    --lcms-input-error: var(--color-error, oklch(0.637 0.237 25.331));
    --lcms-input-muted: var(--color-text-secondary, #6c757d);
    --lcms-input-ring: color-mix(in oklch, var(--lcms-input-accent) 20%, transparent);
}

.lcms-form {
    max-width: var(--lcms-form-measure, var(--lcms-article-measure, var(--lcms-measure-narrow, 48rem)));
    margin-inline: auto;
}

.post-password-form {
    --lcms-form-measure: 36rem;
}

:is(.lcms-form, .gform_wrapper) :is(
    input[type="text"],
    input[type="email"],
    input[type="url"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"],
    input[type="file"],
    textarea,
    select
) {
    display: flex;
    height: 3rem;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--lcms-input-fg);
    background-color: var(--lcms-input-bg);
    border: 1px solid var(--lcms-input-border);
    border-radius: var(--lcms-input-radius);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

:is(.lcms-form, .gform_wrapper) textarea {
    height: auto;
    min-height: 6rem;
    resize: vertical;
}

:is(.lcms-form, .gform_wrapper) select {
    cursor: pointer;
}

:is(.lcms-form, .gform_wrapper) input[type="file"] {
    height: auto;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
}

:is(.lcms-form, .gform_wrapper) :is(input, textarea)::placeholder {
    color: var(--lcms-input-muted);
    opacity: 1;
}

:is(.lcms-form, .gform_wrapper) :is(input, textarea, select):focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: var(--lcms-input-accent);
    box-shadow: 0 0 0 3px var(--lcms-input-ring);
}

:is(.lcms-form, .gform_wrapper) :is(input, textarea, select):disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

:is(.lcms-form, .gform_wrapper) :is(input, textarea, select)[readonly] {
    background-color: color-mix(in oklch, var(--lcms-input-bg) 60%, transparent);
    cursor: default;
}

:is(.lcms-form, .gform_wrapper) :is(input, textarea, select)[aria-invalid="true"],
.lcms-form .is-error :is(input, textarea, select),
.gform_wrapper .gfield_error :is(input, textarea, select) {
    border-color: var(--lcms-input-error);
}

:is(.lcms-form, .gform_wrapper) :is(input, textarea, select)[aria-invalid="true"]:focus-visible,
.lcms-form .is-error :is(input, textarea, select):focus-visible,
.gform_wrapper .gfield_error :is(input, textarea, select):focus-visible {
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--lcms-input-error) 20%, transparent);
}

:is(.lcms-form, .gform_wrapper) :is(input[type="checkbox"], input[type="radio"]) {
    width: 1.25rem;
    height: 1.25rem;
    accent-color: var(--lcms-input-accent);
    cursor: pointer;
}

:is(.lcms-form, .gform_wrapper) :is(input[type="checkbox"], input[type="radio"]):disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

:is(.lcms-form, .gform_wrapper) input[type="range"] {
    width: 100%;
    accent-color: var(--lcms-input-accent);
}

.lcms-form label,
.gform_wrapper .gfield_label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--lcms-input-fg);
}

.lcms-form .lcms-form__required,
.gform_wrapper .gfield_required {
    color: var(--lcms-input-error);
    margin-left: 0.25rem;
}

.gform_wrapper .gfield_required_text {
    font-size: 0.75rem;
    font-weight: 400;
}

.lcms-form__help,
.gform_wrapper .gfield_description:not(.validation_message) {
    font-size: 0.75rem;
    color: var(--lcms-input-muted);
    margin-top: 0.25rem;
}

.lcms-form__error,
.gform_wrapper .gfield_validation_message {
    font-size: 0.75rem;
    color: var(--lcms-input-error);
    margin-top: 0.25rem;
}

.lcms-form__errors,
.gform_wrapper .gform_validation_errors {
    background-color: color-mix(in oklch, var(--lcms-input-error) 10%, transparent);
    border: 1px solid var(--lcms-input-error);
    border-radius: var(--lcms-input-radius);
    padding: 1rem;
    margin-bottom: 1.5rem;
    color: var(--lcms-input-error);
    font-size: 0.875rem;
}

.lcms-form__errors p {
    margin: 0;
}

.lcms-form :is(button[type="submit"], input[type="submit"], .lcms-form__submit) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--button-padding, 0.75rem 1.75rem);
    font-size: 1rem;
    font-weight: 600;
    color: var(--btn-primary-color, var(--color-text-on-brand, #fff));
    background-color: var(--btn-primary-bg, var(--lcms-input-accent));
    border: 1px solid var(--btn-primary-border, var(--btn-primary-bg, var(--lcms-input-accent)));
    border-radius: var(--button-radius, 9999px);
    box-shadow: var(--shadow-btn, none);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.lcms-form :is(button[type="submit"], input[type="submit"], .lcms-form__submit):hover {
    background-color: var(--btn-primary-bg-hover, var(--color-brand-primary-hover, var(--lcms-input-accent)));
    color: var(--btn-primary-color-hover, var(--button-color-hover, var(--color-text-on-brand, #fff)));
}

.lcms-form :is(button[type="submit"], input[type="submit"], .lcms-form__submit):disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.lcms-form__fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.lcms-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.lcms-form__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: 1rem;
}

.lcms-form fieldset {
    border: 1px solid var(--lcms-input-border);
    border-radius: var(--lcms-input-radius);
    padding: 1rem;
    margin: 0;
}

.lcms-form legend {
    padding: 0 0.5rem;
    font-weight: 600;
    color: var(--lcms-input-fg);
}

.lcms-form__check {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

:is(.lcms-bg-dark, .lcms-bg-dark-alt, .lcms-bg-brand, .lcms-bg-brand-alt) :is(.lcms-form label, .lcms-form legend) {
    color: var(--color-text-light, #fff);
}

:is(.lcms-bg-dark, .lcms-bg-dark-alt, .lcms-bg-brand, .lcms-bg-brand-alt) .lcms-form__help {
    color: color-mix(in oklch, var(--color-text-light, #fff) 75%, transparent);
}

:is(.lcms-bg-dark, .lcms-bg-dark-alt, .lcms-bg-brand, .lcms-bg-brand-alt) .lcms-form fieldset {
    border-color: color-mix(in oklch, var(--color-text-light, #fff) 25%, transparent);
}

.lcms-forms-dark-inputs :is(.lcms-bg-dark, .lcms-bg-dark-alt, .lcms-bg-brand, .lcms-bg-brand-alt) :is(.lcms-form, .gform_wrapper) :is(input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], input[type="password"], input[type="search"], input[type="date"], textarea, select) {
    color: var(--color-text-light, #fff);
    background-color: color-mix(in oklch, var(--color-text-light, #fff) 8%, transparent);
    border-color: color-mix(in oklch, var(--color-text-light, #fff) 25%, transparent);
}

.lcms-forms-dark-inputs :is(.lcms-bg-dark, .lcms-bg-dark-alt, .lcms-bg-brand, .lcms-bg-brand-alt) :is(.lcms-form, .gform_wrapper) :is(input, textarea)::placeholder {
    color: color-mix(in oklch, var(--color-text-light, #fff) 55%, transparent);
}

.lcms-forms-autofill :is(.lcms-form, .gform_wrapper) :is(input):-webkit-autofill {
    -webkit-text-fill-color: var(--lcms-input-fg);
    -webkit-box-shadow: 0 0 0 1000px var(--lcms-input-bg) inset;
    caret-color: var(--lcms-input-fg);
    border-radius: var(--lcms-input-radius);
}

.lcms-forms-chevron :is(.lcms-form, .gform_wrapper) select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 1rem;
    padding-right: 2.5rem;
}

@media (prefers-reduced-motion: reduce) {
    :is(.lcms-form, .gform_wrapper) :is(input, textarea, select),
    .lcms-form :is(button[type="submit"], input[type="submit"], .lcms-form__submit) {
        transition: none;
    }
}