/*
  Wojo Framework 4.0 — Forms
  Namespace: .wf-form / .wf-field / .wf-input
  Requires: wf-layout.css, wf-colors.css

  Quick reference:
    <div class="wf-field">
      <label>Label</label>
      <input class="wf-input" type="text" placeholder="…">
      <span class="wf-field-hint">Help text</span>
    </div>

*/
:root {
    --wf-input-inline-space: 1.25rem;
    --wf-field-label-width: 9rem;
}
.wf-form {
    display: flex;
    flex-direction: column;
    gap: var(--wf-gap, var(--wf-space-5));
    position: relative;
}
.wf-field {
    display: flex;
    flex-direction: column;
    gap: var(--wf-gap, var(--wf-space-2));
}
.wf-field > label {
    display: inline-flex;
    position: relative;
    font-size: .875rem;
    font-weight: 600;
    color: var(--wf-text);
}
.wf-field-required > label:after,
.wf-field > label.wf-required:after,
.wf-field-inline > label.wf-required:after {
    margin-block-start: .25rem;
    margin-inline-start: .375rem;
    content: "\002A";
    height: .875rem;
    font-size: .75rem;
    font-family: WojoIcons, serif;
    line-height: 1.2;
    color: var(--negative-color, #e53935);
}
.wf-field-hint {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: .8125rem;
    line-height: 1;
    color: var(--wf-text-muted);
}
.wf-field-hint i.icon {
    font-size: 1.25rem;
    color: var(--info-color);
}
.wf-fields {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wf-gap, var(--wf-space-6));
}
.wf-fields > .wf-field {
    flex: 1;
    min-width: 0;
    max-width: 100%;
}
.wf-fields > .wf-field-7 {
    flex: 70 1 0;
    max-width: 70%;
}
.wf-fields > .wf-field-6 {
    flex: 60 1 0;
    max-width: 60%;
}
.wf-fields > .wf-field-5 {
    flex: 50 1 0;
    max-width: 50%;
}
.wf-fields > .wf-field-4 {
    flex: 40 1 0;
    max-width: 40%;
}
.wf-fields > .wf-field-3 {
    flex: 30 1 0;
    max-width: 30%;
}
.wf-fields > .wf-field-2 {
    flex: 20 1 0;
    max-width: 20%;
}
.wf-input,
.wf-textarea,
.wf-select {
    appearance: none;
    outline: none;
    display: block;
    width: 100%;
    padding-inline: var(--wf-input-inline-space);
    padding-block: 0;
    transition: border-color .15s, box-shadow .15s;
    background-color: var(--wf-surface);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-radius-control, var(--wf-radius-4));
    font-size: 1rem;
    height: 2.625rem;
    font-family: inherit;
    font-weight: 400;
    line-height: 1.5;
    color: var(--wf-text);
}
.wf-input::placeholder,
.wf-textarea::placeholder {
    opacity: .7;
    color: var(--wf-text-muted);
}

/*.wf-input:focus,*/
.wf-input:not(.wf-input-wrap .wf-input):focus,
.wf-textarea:focus,
.wf-select:focus {
    box-shadow: 0 0 0 3px var(--primary-color-shadow, rgba(95, 65, 251, .15));
    border-color: var(--primary-color);
}

.wf-input:disabled,
.wf-textarea:disabled,
.wf-select:disabled {
    opacity: .55;
    background-color: var(--wf-surface-subtle);
    cursor: not-allowed;
}
.wf-input[readonly],
.wf-textarea[readonly] {
    background-color: var(--wf-surface-subtle);
    cursor: default;
}
.wf-textarea {
    resize: vertical;
    height: auto;
    padding-block: .5rem;
    min-height: 6.5rem;
}
.wf-select {
    appearance: none;
    padding-inline-end: 2.5rem;
    background-image: var(--select-arrow-down);
    /* Use specific image variable */
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 1rem;
    cursor: pointer;
}
.wf-select:focus {
    background-image: var(--select-arrow-up);
    /* Only change the image on focus */
}
.wf-input-fluid {
    width: 100%;
}
.wf-input-transparent {
    box-shadow: none;
    border-block-end: 1px solid var(--wf-border);
    padding-inline-start: 0;
    padding-inline-end: 0;
    background-color: transparent;
    border-color: transparent;
    border-radius: 0;
}
.wf-input-transparent:focus {
    border-block-end-color: var(--primary-color);
    box-shadow: none;
    border-color: transparent;
}
.wf-input-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    width: 100%;
    background-color: var(--wf-surface);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-radius-control, var(--wf-radius-4));
    transition: border-color 0.2s, box-shadow 0.2s;
}
.wf-input-wrap:focus-within {
    box-shadow: 0 0 0 3px var(--primary-color-shadow, rgba(95, 65, 251, .15));
    border-color: var(--primary-color);
}
.wf-input-wrap .wf-input,
.wf-input-wrap .wf-select {
    flex: 1;
    width: auto;
    min-width: 0;
    outline: none;
    height: 2.5rem;
    background-color: transparent;
    border: 0;
}
.wf-input-wrap > :first-child {
    border-top-left-radius: var(--wf-radius-control, var(--wf-radius-4));
    border-bottom-left-radius: var(--wf-radius-control, var(--wf-radius-4));
}
.wf-input-wrap > :last-child {
    border-top-right-radius: var(--wf-radius-control, var(--wf-radius-4));
    border-bottom-right-radius: var(--wf-radius-control, var(--wf-radius-4));
}
.wf-input-wrap > :first-child:is(.wf-input-icon) {
    padding-inline-start: var(--wf-input-inline-space);
    padding-inline-end: 0;
}
.wf-input-wrap > :last-child:is(.wf-input-icon) {
    padding-inline-end: var(--wf-input-inline-space);
    padding-inline-start: 0;
}
.wf-input-wrap:has(> :first-child:is(.wf-input-addon-plain)) .wf-input {
    padding-inline-start: 0;
}
.wf-input-wrap:has(> :last-child:is(.wf-input-addon-plain)) .wf-input {
    padding-inline-end: 0;
}
.wf-input-icon {
    display: flex;
    justify-content: center;
    align-items: center;
}
.wf-input-addon {
    padding-inline: var(--wf-input-inline-space);
    font-size: 0.875rem;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    color: var(--wf-text-muted);
    background-color: var(--wf-surface-subtle);
    align-self: stretch;
    white-space: nowrap;
}
.wf-input-addon-plain {
    border-inline-end: 0;
    border-inline-start: 0;
    background-color: transparent;
}
.wf-input-wrap > :first-child:is(.wf-input-addon-outlined) {
    border-inline-end: 1px solid var(--wf-border);
}
.wf-input-wrap > :last-child:is(.wf-input-addon-outlined) {
    border-inline-start: 1px solid var(--wf-border);
}
.wf-input-wrap button {
    padding-inline: var(--wf-input-inline-space);
    border-radius: var(--wf-radius-control, var(--wf-radius-4));
    padding-block: 0;
    border: 0;
    align-self: stretch;
    box-shadow: none;
}
.wf-radio,
.wf-toggle,
.wf-checkbox {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    position: relative;
}
.wf-toggle {
    gap: 2rem;
}
.wf-toggle-slide {
    display: inline-flex;
    background: var(--wf-surface-subtle);
    border-radius: var(--wf-radius-3);
    gap: .25rem;
    padding: .25rem;
}
.wf-toggle-card {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 1rem;
    background: none;
    padding: 0;
}
.wf-radio input[type=radio],
.wf-toggle input[type=checkbox],
.wf-checkbox input[type=checkbox] {
    opacity: 0;
    width: 1.375rem;
    height: 1.375rem;
    margin: 0;
    cursor: pointer;
}
.wf-radio label,
.wf-toggle label,
.wf-checkbox label {
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
    font-weight: 500;
    color: var(--wf-text-muted);
}
.wf-radio label:before,
.wf-radio label:after,
.wf-toggle label:before,
.wf-toggle label:after,
.wf-checkbox label:before,
.wf-checkbox label:after {
    inset-block-start: 50%;
    content: "";
    position: absolute;
    transition: all .3s;
}
.wf-radio label:before,
.wf-toggle label:before,
.wf-checkbox label:before {
    inset-inline-start: 0;
    translate: 0 -50%;
    z-index: 1;
    width: 1.375rem;
    height: 1.375rem;
    background-color: var(--wf-surface);
    border: 2px solid var(--wf-border);
    border-radius: var(--wf-radius-3);
}
.wf-radio label:after,
.wf-toggle label:after,
.wf-checkbox label:after {
    inset-block-start: 50%;
    inset-inline-start: .125rem;
    z-index: 2;
    opacity: 0;
    transform: translateY(-50%);
    width: 1.125rem;
    height: 1.125rem;
    transition: translate .35s, opacity .35s, scale .35s;
    background: var(--primary-color);
    border-radius: var(--wf-radius-2);
}
.wf-radio label:before,
.wf-radio label:after {
    border-radius: 50%;
}
.wf-radio label:after {
    inset-inline-start: .3125rem;
    width: .75rem;
    height: .75rem;
}
.wf-radio input[type=radio]:checked + label,
.wf-checkbox input[type=checkbox]:checked + label {
    color: var(--wf-text);
}
.wf-radio input[type=radio]:checked + label:after,
.wf-checkbox input[type=checkbox]:checked + label:after {
    translate: 0;
    scale: 1;
    opacity: 1;
    transition-duration: .2s;
}
.wf-toggle label:before {
    width: 2.5rem;
    height: 1.375rem;
    transition: background-color .2s, border-color .2s;
    background-color: var(--wf-border);
    border-radius: 999rem;
}
.wf-toggle label:after {
    scale: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    opacity: 1;
    width: 1rem;
    height: 1rem;
    transition: transform .2s;
    background-color: var(--wf-surface);
    border-radius: 50%;
}
.wf-toggle input[type=radio]:checked + label:before,
.wf-toggle input[type=checkbox]:checked + label:before {
    background-color: var(--primary-color);
    border: 2px solid var(--primary-color);
}
.wf-toggle input[type=radio]:checked + label:after,
.wf-toggle input[type=checkbox]:checked + label:after {
    transform: translate(100%, -50%);
}
.wf-radio input[type=radio]:disabled,
.wf-checkbox input[type=checkbox]:disabled {
    cursor: not-allowed;
}
.wf-radio input[type=radio]:disabled + label,
.wf-checkbox input[type=checkbox]:disabled + label {
    cursor: not-allowed;
    color: var(--wf-text-muted);
}
.wf-radio input[type=radio]:disabled + label:before,
.wf-checkbox input[type=checkbox]:disabled + label:before {
    opacity: .35;
}
.wf-radio input[type=radio]:disabled:not(:checked) + label:after,
.wf-checkbox input[type=checkbox]:disabled:not(:checked) + label:after {
    opacity: 0;
    transition: none;
}
.wf-radio input[type=radio]:disabled:checked + label:after,
.wf-checkbox input[type=checkbox]:disabled:checked + label:after {
    opacity: .35;
}
.wf-check-group {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.wf-check-group-inline {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
}
.wf-toggle-card input,
.wf-toggle-slide input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.wf-toggle-slide label {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1rem;
    line-height: 1rem;
    border-radius: var(--wf-radius-2);
    border: 1px solid transparent;
    cursor: pointer;
    color: var(--wf-text-muted);
    user-select: none;
    position: relative;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.wf-toggle-slide label:hover {
    color: var(--wf-text);
}
.wf-toggle-slide input:checked + label {
    border: 1px solid var(--wf-border);
    background: var(--primary-color-shadow);
    color: var(--primary-color);
}
.wf-toggle-slide-pill label,
.wf-toggle-slide-pill {
    border-radius: 999px;
}
.wf-toggle-card label {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1.25rem;
    cursor: pointer;
    border-radius: var(--wf-radius-4);
    border: 1px solid var(--wf-border);
    background: var(--wf-surface-subtle);
    text-align: center;
}
.wf-toggle-card input:checked + label {
    border-color: var(--primary-color);
    background: var(--primary-color-shadow);
    transform: translateY(-2px);
    box-shadow:var(--wf-shadow-soft);
}

.wf-radio.wf-radio-sm input[type=radio],
.wf-toggle.wf-toggle-sm input[type=checkbox],
.wf-checkbox.wf-checkbox-sm input[type=checkbox] {
    width: 1rem;
    height: 1rem;
}
.wf-radio.wf-radio-sm label:before,
.wf-toggle.wf-toggle-sm label:before,
.wf-checkbox.wf-checkbox-sm label:before {
    width: 1rem;
    height: 1rem;
}
.wf-toggle.wf-toggle-sm label:before {
    width: 2rem;
}
.wf-radio.wf-radio-sm label::after {
    inset-inline-start: .125rem;
}
.wf-radio.wf-radio-sm label:after,
.wf-toggle.wf-toggle-sm label:after,
.wf-checkbox.wf-checkbox-sm label:after {
    width: .750rem;
    height: .750rem;
}
.wf-field-error .wf-input,
.wf-field-error .wf-textarea,
.wf-field-error .wf-select {
    background-color: color-mix(in srgb, var(--negative-color-inverted, #fdecea) 50%, var(--wf-surface));
    border-color: var(--negative-color);
}
.wf-field-error .wf-input:focus,
.wf-field-error .wf-textarea:focus,
.wf-field-error .wf-select:focus {
    box-shadow: 0 0 0 3px var(--negative-color-shadow, rgba(229, 57, 53, .15));
}
.wf-field-error .wf-input-addon {
    background-color: color-mix(in srgb, var(--negative-color-inverted, #fdecea) 50%, var(--wf-surface));
    border-color: var(--negative-color);
}
.wf-field-warning .wf-input,
.wf-field-warning .wf-textarea,
.wf-field-warning .wf-select {
    background-color: color-mix(in srgb, var(--alert-color-inverted, #fff8ed) 50%, var(--wf-surface));
    border-color: var(--alert-color);
}
.wf-field-warning .wf-input:focus,
.wf-field-warning .wf-textarea:focus,
.wf-field-warning .wf-select:focus {
    box-shadow: 0 0 0 3px var(--alert-color-shadow, rgba(161, 91, 0, .15));
}
.wf-field-warning .wf-input-addon {
    border-color: var(--alert-color);
}
.wf-field-success .wf-input,
.wf-field-success .wf-textarea,
.wf-field-success .wf-select {
    background-color: color-mix(in srgb, var(--positive-color-inverted, #e8f5e9) 50%, var(--wf-surface));
    border-color: var(--positive-color);
}
.wf-field-success .wf-input:focus,
.wf-field-success .wf-textarea:focus,
.wf-field-success .wf-select:focus {
    box-shadow: 0 0 0 3px var(--positive-color-shadow, rgba(13, 145, 88, .15));
}
.wf-field-success .wf-input-addon {
    border-color: var(--positive-color);
}
.wf-field-info .wf-input,
.wf-field-info .wf-textarea,
.wf-field-info .wf-select {
    background-color: color-mix(in srgb, var(--info-color-inverted, #e3f2fd) 50%, var(--wf-surface));
    border-color: var(--info-color);
}
.wf-field-info .wf-input:focus,
.wf-field-info .wf-textarea:focus,
.wf-field-info .wf-select:focus {
    box-shadow: 0 0 0 3px var(--info-color-shadow, rgba(33, 150, 243, .15));
}
.wf-ajax-form--pending {
    pointer-events: none;
}
.wf-field--error > .wf-input,
.wf-field--error > .wf-input-wrap,
.wf-field--error > .wf-select,
.wf-field--error > .wf-textarea {
    box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.15);
    border-color: var(--negative-color, #e53935);
}
.wf-field--error > .wf-field-hint {
    color: var(--negative-color, #e53935);
}
.wf-field--success > .wf-input,
.wf-field--success > .wf-select,
.wf-field--success > .wf-textarea {
    box-shadow: 0 0 0 3px rgba(67, 160, 71, 0.15);
    border-color: var(--positive-color, #43a047);
}
.wf-field-info .wf-input-addon {
    border-color: var(--info-color);
}
.wf-field-disabled {
    pointer-events: none;
    opacity: .55;
}
.wf-input-sm,
.wf-select-sm,
.wf-field-sm .wf-input,
.wf-field-sm .wf-textarea,
.wf-field-sm .wf-select {
    height: 2.375rem;
    padding-inline: .750rem;
    font-size: .875rem;
}
.wf-input-wrap.wf-input-sm {
    padding-inline: .750rem;
}
.wf-field-sm > label {
    font-size: .8125rem;
}
.wf-field-sm .wf-field-hint,
.wf-field-sm .wf-field-message {
    font-size: .75rem;
}
.wf-input-wrap .wf-input-sm.wf-input,
.wf-input-wrap.wf-input-sm .wf-input,
.wf-field-sm .wf-input-wrap .wf-input {
    height: 2.25rem;
}
.wf-input-lg,
.wf-select-lg,
.wf-field-lg .wf-input,
.wf-field-lg .wf-textarea,
.wf-field-lg .wf-select {
    height: 3.125rem;
    padding: .875rem 1.125rem;
    font-size: 1.125rem;
    line-height: 1.25;
}
.wf-field-lg > label {
    font-size: .9375rem;
}
.wf-input-wrap .wf-input-lg.wf-input,
.wf-input-wrap.wf-input-lg .wf-input,
.wf-field-lg .wf-input-wrap .wf-input {
    height: 3rem;
}
.wf-field-inline {
    display: grid;
    align-items: center;
    gap: var(--wf-gap, var(--wf-space-4));
    grid-template-columns: max-content 1fr;
}
.wf-field-inline > label {
    position: relative;
    font-size: .875rem;
    font-weight: 600;
    color: var(--wf-text);
}
@media (max-width: 41.999rem) {
    .wf-field-inline {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: var(--wf-space-2);
    }
    .wf-fields {
        flex-direction: column;
    }
    .wf-fields > .wf-field {
        flex: 0 1 auto;
        align-self: stretch;
        min-width: 0;
        max-width: 100%;
    }
    .wf-fields > .wf-field-7,
    .wf-fields > .wf-field-6,
    .wf-fields > .wf-field-5,
    .wf-fields > .wf-field-4,
    .wf-fields > .wf-field-3,
    .wf-fields > .wf-field-2 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}
@media (min-width: 42rem) and (max-width: 61.999rem) {
    .wf-fields {
        flex-direction: column;
    }
    .wf-fields > .wf-field {
        flex: 0 1 auto;
        align-self: stretch;
        min-width: 0;
        max-width: 100%;
    }
    .wf-fields > .wf-field-7,
    .wf-fields > .wf-field-6,
    .wf-fields > .wf-field-5,
    .wf-fields > .wf-field-4,
    .wf-fields > .wf-field-3,
    .wf-fields > .wf-field-2 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}