input,
select,
textarea {
    width: 100%;
    min-height: var(--np-input-height);
    padding-inline: var(--np-input-padding-x);
    color: var(--np-color-text);
    background: var(--np-input-background);
    border: var(--np-border-width) var(--np-border-style) var(--np-input-border-color);
    border-radius: var(--np-input-radius);
    font-family: var(--np-font-primary);
    font-size: var(--np-font-size-md);
    font-weight: var(--np-font-weight-regular);
    line-height: var(--np-line-height-sm);
    transition:
        color var(--np-transition-fast),
        background-color var(--np-transition-fast),
        border-color var(--np-transition-fast),
        box-shadow var(--np-transition-fast);
}

input {
    overflow: visible;
}

textarea {
    min-height: 9rem;
    padding-block: var(--np-spacing-sm);
    resize: vertical;
}

select {
    appearance: none;
    padding-inline-end: 2.75rem;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--np-color-text-muted) 50%),
        linear-gradient(135deg, var(--np-color-text-muted) 50%, transparent 50%);
    background-position:
        calc(100% - 1.25rem) 50%,
        calc(100% - 0.95rem) 50%;
    background-size:
        0.35rem 0.35rem,
        0.35rem 0.35rem;
    background-repeat: no-repeat;
}

html[dir="rtl"] select {
    background-position:
        1.25rem 50%,
        0.95rem 50%;
}

input:hover,
select:hover,
textarea:hover {
    border-color: var(--np-color-border-strong);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--np-input-border-color-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--np-color-primary-teal) 16%, transparent);
    outline: none;
}

input::placeholder,
textarea::placeholder {
    color: var(--np-color-text-soft);
    opacity: 1;
}

input:disabled,
select:disabled,
textarea:disabled {
    cursor: not-allowed;
    color: var(--np-color-text-muted);
    background: var(--np-color-surface-muted);
    opacity: 0.72;
}

input[readonly],
textarea[readonly] {
    background: var(--np-color-surface-soft);
}

input[type="checkbox"],
input[type="radio"] {
    width: 1.125rem;
    min-width: 1.125rem;
    height: 1.125rem;
    min-height: 1.125rem;
    padding: 0;
    accent-color: var(--np-color-primary-teal);
}

input[type="color"] {
    width: 3rem;
    min-height: 3rem;
    padding: 0.2rem;
}

input[type="file"] {
    min-height: auto;
    padding: var(--np-spacing-sm);
    cursor: pointer;
}

input[type="range"] {
    min-height: auto;
    padding: 0;
    accent-color: var(--np-color-primary-teal);
}

input[type="search"] {
    appearance: none;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    appearance: none;
}

label {
    display: inline-flex;
    gap: var(--np-spacing-xs);
    align-items: center;
    margin-block-end: var(--np-spacing-xs);
    color: var(--np-color-primary-dark);
    font-size: var(--np-font-size-sm);
    font-weight: var(--np-font-weight-semibold);
    line-height: var(--np-line-height-sm);
}

fieldset {
    display: grid;
    gap: var(--np-spacing-md);
    margin: 0 0 var(--np-spacing-lg);
    padding: var(--np-spacing-lg);
    background: var(--np-color-surface);
    border: var(--np-border);
    border-radius: var(--np-radius-xl);
}

legend {
    padding-inline: var(--np-spacing-xs);
    color: var(--np-color-primary-dark);
    font-family: var(--np-font-heading);
    font-size: var(--np-font-size-lg);
    font-weight: var(--np-font-weight-bold);
}

.np-form-row,
.np-form-field,
.comment-form p,
.search-form,
.wp-block-search {
    position: relative;
}

.np-form-row,
.np-form-field {
    display: grid;
    gap: var(--np-spacing-xs);
}

.np-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--np-spacing-lg);
}

.np-form-grid-full,
.np-form-field-full {
    grid-column: 1 / -1;
}

.np-form-help,
.np-form-description {
    color: var(--np-color-text-muted);
    font-size: var(--np-font-size-sm);
    line-height: var(--np-line-height-sm);
}

.np-form-error {
    color: var(--np-color-danger);
    font-size: var(--np-font-size-sm);
    line-height: var(--np-line-height-sm);
}

.np-form-success {
    color: var(--np-color-success);
    font-size: var(--np-font-size-sm);
    line-height: var(--np-line-height-sm);
}

.is-error input,
.is-error select,
.is-error textarea,
input.is-error,
select.is-error,
textarea.is-error,
input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"] {
    border-color: var(--np-color-danger);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--np-color-danger) 14%, transparent);
}

.is-success input,
.is-success select,
.is-success textarea,
input.is-success,
select.is-success,
textarea.is-success {
    border-color: var(--np-color-success);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--np-color-success) 14%, transparent);
}

.np-search-form,
.search-form,
.wp-block-search__inside-wrapper {
    display: flex;
    gap: var(--np-spacing-sm);
    align-items: stretch;
    width: 100%;
}

.np-search-form-field {
    flex: 1 1 auto;
    min-width: 0;
}

.np-search-form-label,
.search-form label {
    margin: 0;
}

.np-search-form-input,
.search-field,
.wp-block-search__input {
    width: 100%;
    min-width: 0;
}

.np-search-form-submit,
.search-submit,
.wp-block-search__button {
    flex: 0 0 auto;
}

.wp-block-search__label {
    display: block;
    width: 100%;
    margin-block-end: var(--np-spacing-xs);
    color: var(--np-color-primary-dark);
    font-size: var(--np-font-size-sm);
    font-weight: var(--np-font-weight-semibold);
}

.comment-form {
    display: grid;
    gap: var(--np-spacing-lg);
    margin-block-start: var(--np-spacing-xl);
}

.comment-form p {
    display: grid;
    gap: var(--np-spacing-xs);
    margin: 0;
}

.comment-form label {
    margin: 0;
}

.comment-form-comment {
    grid-column: 1 / -1;
}

.comment-form-author,
.comment-form-email,
.comment-form-url {
    min-width: 0;
}

.comment-form-cookies-consent {
    display: flex !important;
    gap: var(--np-spacing-sm) !important;
    align-items: flex-start;
}

.comment-form-cookies-consent input {
    margin-block-start: 0.25rem;
}

.comment-form-cookies-consent label {
    margin: 0;
    color: var(--np-color-text-muted);
    font-weight: var(--np-font-weight-regular);
}

.form-submit {
    margin-block-start: var(--np-spacing-md) !important;
}

.comment-notes,
.logged-in-as,
.comment-form .required-field-message {
    color: var(--np-color-text-muted);
    font-size: var(--np-font-size-sm);
    line-height: var(--np-line-height-sm);
}

.comment-form .required {
    color: var(--np-color-danger);
}

.comment-reply-title {
    margin: 0;
    color: var(--np-color-primary-dark);
    font-family: var(--np-font-heading);
    font-size: var(--np-font-size-2xl);
    font-weight: var(--np-font-weight-bold);
    line-height: var(--np-line-height-xs);
}

.comment-reply-title small {
    display: inline-flex;
    margin-inline-start: var(--np-spacing-sm);
    font-family: var(--np-font-primary);
    font-size: var(--np-font-size-sm);
    font-weight: var(--np-font-weight-medium);
}

.comment-reply-title small a {
    color: var(--np-color-danger);
}

.np-comment-form-wrapper {
    padding: var(--np-spacing-xl);
    background: var(--np-color-surface);
    border: var(--np-border);
    border-radius: var(--np-radius-2xl);
    box-shadow: var(--np-shadow-xs);
}

.post-password-form {
    display: grid;
    gap: var(--np-spacing-md);
    max-width: 620px;
    margin-inline: auto;
    padding: var(--np-spacing-xl);
    background: var(--np-color-surface);
    border: var(--np-border);
    border-radius: var(--np-radius-2xl);
    box-shadow: var(--np-shadow-sm);
}

.post-password-form p {
    margin: 0;
}

.post-password-form p:last-child {
    display: flex;
    gap: var(--np-spacing-sm);
    align-items: flex-end;
}

.post-password-form label {
    flex: 1 1 auto;
    display: grid;
    gap: var(--np-spacing-xs);
}

.post-password-form input[type="submit"] {
    flex: 0 0 auto;
}

.wpcf7-form,
.wpforms-form,
.nf-form-cont form,
.gform_wrapper form {
    display: grid;
    gap: var(--np-spacing-lg);
}

.wpcf7-form p {
    margin: 0;
}

.wpcf7-not-valid-tip,
.wpforms-error,
.gfield_validation_message,
.validation_message {
    color: var(--np-color-danger);
    font-size: var(--np-font-size-sm);
    line-height: var(--np-line-height-sm);
}

.wpcf7-response-output,
.wpforms-confirmation-container,
.gform_confirmation_message {
    margin: 0;
    padding: var(--np-spacing-md);
    border-radius: var(--np-radius-lg);
    font-size: var(--np-font-size-sm);
    line-height: var(--np-line-height-md);
}

.wpcf7 form.sent .wpcf7-response-output,
.wpforms-confirmation-container,
.gform_confirmation_message {
    color: var(--np-color-success);
    background: color-mix(in srgb, var(--np-color-success) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--np-color-success) 35%, transparent);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
    color: var(--np-color-danger);
    background: color-mix(in srgb, var(--np-color-danger) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--np-color-danger) 35%, transparent);
}

.np-newsletter-form {
    display: flex;
    gap: var(--np-spacing-sm);
    align-items: stretch;
    width: 100%;
}

.np-newsletter-form-field {
    flex: 1 1 auto;
    min-width: 0;
}

.np-newsletter-form-submit {
    flex: 0 0 auto;
}

.np-inline-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--np-spacing-sm);
    align-items: flex-end;
}

.np-inline-form .np-form-field {
    flex: 1 1 220px;
}

.np-stacked-form {
    display: grid;
    gap: var(--np-spacing-lg);
}

.np-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--np-spacing-sm);
    align-items: center;
}

.np-form-actions-center {
    justify-content: center;
}

.np-form-actions-end {
    justify-content: flex-end;
}

@media (max-width: 782px) {
    .np-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .np-search-form,
    .search-form,
    .wp-block-search__inside-wrapper,
    .post-password-form p:last-child,
    .np-newsletter-form {
        display: grid;
    }

    .np-search-form-submit,
    .search-submit,
    .wp-block-search__button,
    .post-password-form input[type="submit"],
    .np-newsletter-form-submit {
        width: 100%;
    }

    .np-comment-form-wrapper,
    .post-password-form {
        padding: var(--np-spacing-lg);
    }
}