/* =========================================================
   Market UI v2 - Forms Component (View Layer)
   Path: public/assets/marketv2/components/forms/forms.css

   Rules:
   - consumes only --m-form-*
   - no direct --m-context-* access
   - preserves slot + size + legacy DOM compatibility
   - checkbox / radio / switch ownership lives in choices.css
========================================================= */

/* =========================================================
   FIELD BASE
========================================================= */

.m-field {
    --m-form-current-height: var(--m-form-height-md);
    --m-form-current-radius: var(--m-form-radius-md);
    --m-form-current-padding-inline: var(--m-form-padding-inline-md);
    --m-form-current-font-size: var(--m-form-font-size-md);

    --m-form-field-bg: var(--m-form-bg);
    --m-form-field-text: var(--m-form-text);
    --m-form-field-border: var(--m-form-border);

    --m-form-field-hover-bg: var(--m-form-hover-bg);
    --m-form-field-hover-text: var(--m-form-hover-text);
    --m-form-field-hover-border: var(--m-form-hover-border);

    --m-form-field-disabled-bg: var(--m-form-disabled-bg);
    --m-form-field-disabled-text: var(--m-form-disabled-text);
    --m-form-field-disabled-border: var(--m-form-disabled-border);

    --m-form-field-readonly-bg: var(--m-form-readonly-bg);
    --m-form-field-readonly-text: var(--m-form-readonly-text);
    --m-form-field-readonly-border: var(--m-form-readonly-border);

    --m-form-field-focus-border: var(--m-form-focus-border);
    --m-form-field-focus-ring: var(--m-form-focus-ring);

    --m-form-field-placeholder: var(--m-form-placeholder);
    --m-form-field-label: var(--m-form-label);
    --m-form-field-hint: var(--m-form-hint);
    --m-form-field-icon: var(--m-form-icon);

    --m-form-field-invalid-bg: var(--m-form-invalid-bg);
    --m-form-field-invalid-text: var(--m-form-invalid-text);
    --m-form-field-invalid-border: var(--m-form-invalid-border);
    --m-form-field-invalid-focus-border: var(--m-form-invalid-focus-border);
    --m-form-field-invalid-focus-ring: var(--m-form-invalid-focus-ring);

    --m-form-field-success-bg: var(--m-form-success-bg);
    --m-form-field-success-text: var(--m-form-success-text);
    --m-form-field-success-border: var(--m-form-success-border);
    --m-form-field-success-focus-border: var(--m-form-success-focus-border);
    --m-form-field-success-focus-ring: var(--m-form-success-focus-ring);

    --m-form-field-selected-bg: var(--m-form-selected-bg);
    --m-form-field-selected-text: var(--m-form-selected-text);
    --m-form-field-selected-border: var(--m-form-selected-border);

    --m-form-field-addon-bg: var(--m-form-addon-bg);
    --m-form-field-addon-text: var(--m-form-addon-text);
    --m-form-field-addon-border: var(--m-form-addon-border);
    --m-form-field-addon-invalid-bg: var(--m-form-addon-invalid-bg);
    --m-form-field-addon-invalid-text: var(--m-form-addon-invalid-text);
    --m-form-field-addon-invalid-border: var(--m-form-addon-invalid-border);
    --m-form-field-addon-success-bg: var(--m-form-addon-success-bg);
    --m-form-field-addon-success-text: var(--m-form-addon-success-text);
    --m-form-field-addon-success-border: var(--m-form-addon-success-border);

    display: grid;
    gap: var(--m-form-field-gap);
    min-width: 0;
}

.m-control-sm {
    --m-form-current-height: var(--m-form-height-sm);
    --m-form-current-radius: var(--m-form-radius-sm);
    --m-form-current-padding-inline: var(--m-form-padding-inline-sm);
    --m-form-current-font-size: var(--m-form-font-size-sm);
}

.m-control-md {
    --m-form-current-height: var(--m-form-height-md);
    --m-form-current-radius: var(--m-form-radius-md);
    --m-form-current-padding-inline: var(--m-form-padding-inline-md);
    --m-form-current-font-size: var(--m-form-font-size-md);
}

.m-control-lg {
    --m-form-current-height: var(--m-form-height-lg);
    --m-form-current-radius: var(--m-form-radius-lg);
    --m-form-current-padding-inline: var(--m-form-padding-inline-lg);
    --m-form-current-font-size: var(--m-form-font-size-lg);
}

/* =========================================================
   SLOT CONTRACT
========================================================= */

.m-field[data-slot="c1"],
.m-field[data-theme-slot="c1"] {
    --m-form-field-bg: var(--m-form-slot-c1-bg);
    --m-form-field-text: var(--m-form-slot-c1-text);
    --m-form-field-border: var(--m-form-slot-c1-border);
    --m-form-field-hover-bg: var(--m-form-slot-c1-hover-bg);
    --m-form-field-hover-text: var(--m-form-slot-c1-hover-text);
    --m-form-field-hover-border: var(--m-form-slot-c1-hover-border);
    --m-form-field-disabled-bg: var(--m-form-slot-c1-disabled-bg);
    --m-form-field-disabled-text: var(--m-form-slot-c1-disabled-text);
    --m-form-field-disabled-border: var(--m-form-slot-c1-disabled-border);
}

.m-field[data-slot="c2"],
.m-field[data-theme-slot="c2"] {
    --m-form-field-bg: var(--m-form-slot-c2-bg);
    --m-form-field-text: var(--m-form-slot-c2-text);
    --m-form-field-border: var(--m-form-slot-c2-border);
    --m-form-field-hover-bg: var(--m-form-slot-c2-hover-bg);
    --m-form-field-hover-text: var(--m-form-slot-c2-hover-text);
    --m-form-field-hover-border: var(--m-form-slot-c2-hover-border);
    --m-form-field-disabled-bg: var(--m-form-slot-c2-disabled-bg);
    --m-form-field-disabled-text: var(--m-form-slot-c2-disabled-text);
    --m-form-field-disabled-border: var(--m-form-slot-c2-disabled-border);
}

.m-field[data-slot="c3"],
.m-field[data-theme-slot="c3"] {
    --m-form-field-bg: var(--m-form-slot-c3-bg);
    --m-form-field-text: var(--m-form-slot-c3-text);
    --m-form-field-border: var(--m-form-slot-c3-border);
    --m-form-field-hover-bg: var(--m-form-slot-c3-hover-bg);
    --m-form-field-hover-text: var(--m-form-slot-c3-hover-text);
    --m-form-field-hover-border: var(--m-form-slot-c3-hover-border);
    --m-form-field-disabled-bg: var(--m-form-slot-c3-disabled-bg);
    --m-form-field-disabled-text: var(--m-form-slot-c3-disabled-text);
    --m-form-field-disabled-border: var(--m-form-slot-c3-disabled-border);
}

.m-field[data-slot="c4"],
.m-field[data-theme-slot="c4"] {
    --m-form-field-bg: var(--m-form-slot-c4-bg);
    --m-form-field-text: var(--m-form-slot-c4-text);
    --m-form-field-border: var(--m-form-slot-c4-border);
    --m-form-field-hover-bg: var(--m-form-slot-c4-hover-bg);
    --m-form-field-hover-text: var(--m-form-slot-c4-hover-text);
    --m-form-field-hover-border: var(--m-form-slot-c4-hover-border);
    --m-form-field-disabled-bg: var(--m-form-slot-c4-disabled-bg);
    --m-form-field-disabled-text: var(--m-form-slot-c4-disabled-text);
    --m-form-field-disabled-border: var(--m-form-slot-c4-disabled-border);
}

.m-field[data-slot="c5"],
.m-field[data-theme-slot="c5"] {
    --m-form-field-bg: var(--m-form-slot-c5-bg);
    --m-form-field-text: var(--m-form-slot-c5-text);
    --m-form-field-border: var(--m-form-slot-c5-border);
    --m-form-field-hover-bg: var(--m-form-slot-c5-hover-bg);
    --m-form-field-hover-text: var(--m-form-slot-c5-hover-text);
    --m-form-field-hover-border: var(--m-form-slot-c5-hover-border);
    --m-form-field-disabled-bg: var(--m-form-slot-c5-disabled-bg);
    --m-form-field-disabled-text: var(--m-form-slot-c5-disabled-text);
    --m-form-field-disabled-border: var(--m-form-slot-c5-disabled-border);
}

.m-field[data-slot="c6"],
.m-field[data-theme-slot="c6"] {
    --m-form-field-bg: var(--m-form-slot-c6-bg);
    --m-form-field-text: var(--m-form-slot-c6-text);
    --m-form-field-border: var(--m-form-slot-c6-border);
    --m-form-field-hover-bg: var(--m-form-slot-c6-hover-bg);
    --m-form-field-hover-text: var(--m-form-slot-c6-hover-text);
    --m-form-field-hover-border: var(--m-form-slot-c6-hover-border);
    --m-form-field-disabled-bg: var(--m-form-slot-c6-disabled-bg);
    --m-form-field-disabled-text: var(--m-form-slot-c6-disabled-text);
    --m-form-field-disabled-border: var(--m-form-slot-c6-disabled-border);
}

.m-field[data-slot="c7"],
.m-field[data-theme-slot="c7"] {
    --m-form-field-bg: var(--m-form-slot-c7-bg);
    --m-form-field-text: var(--m-form-slot-c7-text);
    --m-form-field-border: var(--m-form-slot-c7-border);
    --m-form-field-hover-bg: var(--m-form-slot-c7-hover-bg);
    --m-form-field-hover-text: var(--m-form-slot-c7-hover-text);
    --m-form-field-hover-border: var(--m-form-slot-c7-hover-border);
    --m-form-field-disabled-bg: var(--m-form-slot-c7-disabled-bg);
    --m-form-field-disabled-text: var(--m-form-slot-c7-disabled-text);
    --m-form-field-disabled-border: var(--m-form-slot-c7-disabled-border);
}

.m-field[data-slot="c8"],
.m-field[data-theme-slot="c8"] {
    --m-form-field-bg: var(--m-form-slot-c8-bg);
    --m-form-field-text: var(--m-form-slot-c8-text);
    --m-form-field-border: var(--m-form-slot-c8-border);
    --m-form-field-hover-bg: var(--m-form-slot-c8-hover-bg);
    --m-form-field-hover-text: var(--m-form-slot-c8-hover-text);
    --m-form-field-hover-border: var(--m-form-slot-c8-hover-border);
    --m-form-field-disabled-bg: var(--m-form-slot-c8-disabled-bg);
    --m-form-field-disabled-text: var(--m-form-slot-c8-disabled-text);
    --m-form-field-disabled-border: var(--m-form-slot-c8-disabled-border);
}

.m-field[data-slot="c9"],
.m-field[data-theme-slot="c9"] {
    --m-form-field-bg: var(--m-form-slot-c9-bg);
    --m-form-field-text: var(--m-form-slot-c9-text);
    --m-form-field-border: var(--m-form-slot-c9-border);
    --m-form-field-hover-bg: var(--m-form-slot-c9-hover-bg);
    --m-form-field-hover-text: var(--m-form-slot-c9-hover-text);
    --m-form-field-hover-border: var(--m-form-slot-c9-hover-border);
    --m-form-field-disabled-bg: var(--m-form-slot-c9-disabled-bg);
    --m-form-field-disabled-text: var(--m-form-slot-c9-disabled-text);
    --m-form-field-disabled-border: var(--m-form-slot-c9-disabled-border);
}

.m-field[data-slot="c10"],
.m-field[data-theme-slot="c10"] {
    --m-form-field-bg: var(--m-form-slot-c10-bg);
    --m-form-field-text: var(--m-form-slot-c10-text);
    --m-form-field-border: var(--m-form-slot-c10-border);
    --m-form-field-hover-bg: var(--m-form-slot-c10-hover-bg);
    --m-form-field-hover-text: var(--m-form-slot-c10-hover-text);
    --m-form-field-hover-border: var(--m-form-slot-c10-hover-border);
    --m-form-field-disabled-bg: var(--m-form-slot-c10-disabled-bg);
    --m-form-field-disabled-text: var(--m-form-slot-c10-disabled-text);
    --m-form-field-disabled-border: var(--m-form-slot-c10-disabled-border);
}

/* =========================================================
   LAYOUT HELPERS
========================================================= */

.m-form-group,
.m-field-group {
    display: flex;
    flex-direction: column;
    gap: var(--m-form-field-gap);
    min-width: 0;
}

.m-form-inline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--m-form-inline-gap);
}

/* =========================================================
   LABEL / HELP / ERROR
========================================================= */

.m-field__label {
    display: block;
    margin: 0;
    min-width: 0;

    color: var(--m-form-field-label);
    font-size: var(--m-form-label-font-size);
    font-weight: var(--m-form-label-font-weight);
    line-height: var(--m-form-label-line-height);
}

.m-field__required {
    color: var(--m-form-field-invalid-text);
    font-weight: 800;
    line-height: 1;
}

.m-field__hint,
.m-field__error {
    display: block;
    margin: 0;
    min-width: 0;

    font-size: var(--m-form-help-font-size);
    line-height: var(--m-form-help-line-height);
    word-break: break-word;
}

.m-field__hint {
    color: var(--m-form-field-hint);
}

.m-field__error {
    color: var(--m-form-field-invalid-text);
}

.m-field__error[hidden] {
    display: none !important;
}

.m-field.is-success .m-field__hint {
    color: var(--m-form-field-success-text);
}

.m-field.is-disabled .m-field__label,
.m-field[aria-disabled="true"] .m-field__label,
.m-field.is-disabled .m-field__hint,
.m-field[aria-disabled="true"] .m-field__hint {
    color: var(--m-form-field-disabled-text);
}

/* =========================================================
   FIELD HELP ICON
========================================================= */

.m-field-help-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    inline-size: 1.75rem;
    block-size: 1.75rem;
    margin: 0;
    padding: 0;

    border: 1px solid color-mix(in srgb, var(--m-form-field-icon, var(--m-form-icon)) 24%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--m-form-field-hint, var(--m-form-hint)) 8%, transparent);
    color: var(--m-form-field-icon, var(--m-form-icon));

    appearance: none;
    cursor: help;
    outline: none;

    transition:
        background-color var(--m-form-transition-fast),
        border-color var(--m-form-transition-fast),
        color var(--m-form-transition-fast),
        box-shadow var(--m-form-transition-fast);
}

.m-field-help-trigger i {
    font-size: 1rem;
    line-height: 1;
    pointer-events: none;
}

.m-field-help-trigger:hover,
.m-field-help-trigger:focus,
.m-field-help-trigger:focus-visible {
    background: color-mix(in srgb, var(--m-form-focus-border) 10%, transparent);
    border-color: color-mix(in srgb, var(--m-form-focus-border) 34%, transparent);
    color: var(--m-form-focus-border);
    box-shadow: 0 8px 18px -16px color-mix(in srgb, var(--m-form-focus-border) 70%, transparent);
}

.m-field-help-bubble {
    position: absolute;
    inset-block-start: calc(100% + .45rem);
    inset-inline-end: 0;
    z-index: 80;

    inline-size: max-content;
    min-inline-size: 11rem;
    max-inline-size: min(22rem, calc(100vw - 2rem));
    margin: 0;
    padding: .58rem .7rem;

    border: 1px solid var(--m-form-border);
    border-radius: var(--m-form-radius-md);
    background: var(--m-form-bg);
    color: var(--m-form-text);
    box-shadow: var(--m-form-identity-shadow-panel);

    font-size: var(--m-form-help-font-size);
    font-weight: 700;
    line-height: var(--m-form-help-line-height);
    text-align: start;
    white-space: normal;
    overflow-wrap: anywhere;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-.2rem);

    transition:
        opacity var(--m-form-transition-fast),
        visibility var(--m-form-transition-fast),
        transform var(--m-form-transition-fast);
}

.m-field-help-bubble::before {
    content: "";
    position: absolute;
    inset-block-start: -.35rem;
    inset-inline-end: .75rem;
    inline-size: .65rem;
    block-size: .65rem;
    border-block-start: 1px solid var(--m-form-border);
    border-inline-start: 1px solid var(--m-form-border);
    background: inherit;
    transform: rotate(45deg);
}

.m-field-help-trigger:hover + .m-field-help-bubble,
.m-field-help-trigger:focus + .m-field-help-bubble,
.m-field-help-trigger:focus-visible + .m-field-help-bubble,
.m-field-help-bubble:hover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* =========================================================
   CONTROL WRAP / GROUP / ADDON
========================================================= */

.m-field__control-wrap,
.m-field__group {
    position: relative;
    display: flex;
    width: 100%;
    min-width: 0;
}

.m-field__control-wrap {
    align-items: center;
}

.m-field__group {
    align-items: stretch;
}

.m-field__control-wrap > .m-control,
.m-field__group > .m-control {
    flex: 1 1 auto;
    min-width: 0;
}

.m-field__icon {
    position: absolute;
    inset-inline-start: var(--m-form-icon-inset-inline);
    top: 50%;
    z-index: 2;

    width: var(--m-form-icon-size);
    height: var(--m-form-icon-size);

    color: var(--m-form-field-icon);
    pointer-events: none;
    transform: translateY(-50%);
}

.m-field__group > * {
    min-width: 0;
}

.m-field__group > * + * {
    margin-inline-start: calc(var(--m-form-border-width) * -1);
}

.m-field__group > :first-child:not(:last-child) {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

.m-field__group > :last-child:not(:first-child) {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

.m-field__group > :not(:first-child):not(:last-child) {
    border-radius: 0;
}

.m-field__group > .m-control:focus,
.m-field__group > .m-control:focus-visible {
    position: relative;
    z-index: 1;
}

.m-field__addon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    min-height: var(--m-form-current-height);
    padding-inline: var(--m-form-current-padding-inline);

    border: var(--m-form-border-width) solid var(--m-form-field-addon-border);
    border-radius: var(--m-form-current-radius);

    background: var(--m-form-field-addon-bg);
    color: var(--m-form-field-addon-text);

    font-size: var(--m-form-current-font-size);
    font-weight: var(--m-form-control-font-weight);
    line-height: 1;
    white-space: nowrap;
}

/* =========================================================
   BASE CONTROL
========================================================= */

.m-control {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: var(--m-form-current-height);
    height: var(--m-form-current-height);

    padding-inline: var(--m-form-current-padding-inline);
    padding-block: 0;

    border: var(--m-form-border-width) solid var(--m-form-field-border);
    border-radius: var(--m-form-current-radius);

    background: var(--m-form-field-bg);
    color: var(--m-form-field-text);

    font-size: var(--m-form-current-font-size);
    font-weight: var(--m-form-control-font-weight);
    line-height: 1.4;

    appearance: none;
    outline: none;

    transition:
        background-color var(--m-form-transition-fast),
        border-color var(--m-form-transition-fast),
        color var(--m-form-transition-fast),
        box-shadow var(--m-form-transition-fast),
        opacity var(--m-form-transition-fast);
}

.m-control::placeholder {
    color: var(--m-form-field-placeholder);
}

.m-control:hover:not(:disabled):not([readonly]):not(.is-disabled):not(:focus):not(:focus-visible) {
    background: var(--m-form-field-hover-bg);
    color: var(--m-form-field-hover-text);
    border-color: var(--m-form-field-hover-border);
}

.m-control:focus,
.m-control:focus-visible {
    border-color: var(--m-form-field-focus-border);
    box-shadow: 0 0 0 var(--m-form-focus-ring-width) var(--m-form-field-focus-ring);
}

.m-control:disabled,
.m-control.is-disabled {
    background: var(--m-form-field-disabled-bg);
    color: var(--m-form-field-disabled-text);
    border-color: var(--m-form-field-disabled-border);
    cursor: not-allowed;
}

.m-control[readonly] {
    background: var(--m-form-field-readonly-bg);
    color: var(--m-form-field-readonly-text);
    border-color: var(--m-form-field-readonly-border);
}

.m-field.has-icon .m-control {
    padding-inline-start: calc(var(--m-form-current-padding-inline) + var(--m-form-icon-padding-offset));
}

textarea.m-control,
.m-control--textarea {
    min-height: var(--m-form-textarea-min-height);
    height: auto;
    padding-block: var(--m-form-textarea-padding-block);
    resize: vertical;
}

select.m-control {
    padding-inline-end: var(--m-form-select-padding-inline-end);
}

/* =========================================================
   CLEAR ACTION
========================================================= */

.m-field.has-clear .m-control {
    padding-inline-end: calc(var(--m-form-current-padding-inline) + var(--m-form-clear-padding-offset));
}

.m-field__clear {
    position: absolute;
    inset-inline-end: var(--m-form-clear-inset-inline);
    top: 50%;
    z-index: 3;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: var(--m-form-clear-size);
    height: var(--m-form-clear-size);

    border: var(--m-form-border-width) solid transparent;
    border-radius: 999px;

    background: var(--m-form-clear-bg);
    color: var(--m-form-clear-text);

    opacity: 0;
    visibility: hidden;

    appearance: none;
    cursor: pointer;
    outline: none;
    transform: translateY(-50%);

    transition:
        opacity var(--m-form-transition-base),
        background-color var(--m-form-transition-fast),
        color var(--m-form-transition-fast),
        border-color var(--m-form-transition-fast),
        box-shadow var(--m-form-transition-fast);
}

.m-field__clear[hidden] {
    display: none !important;
}

.m-field__clear svg {
    width: var(--m-form-clear-icon-size);
    height: var(--m-form-clear-icon-size);
}

.m-field.has-value:not(.is-disabled):not(.is-loading) .m-field__clear {
    opacity: 1;
    visibility: visible;
}

.m-field__clear:hover {
    background: var(--m-form-clear-hover-bg);
    color: var(--m-form-clear-hover-text);
    border-color: var(--m-form-clear-hover-border);
}

.m-field__clear:focus,
.m-field__clear:focus-visible {
    border-color: var(--m-form-clear-focus-border);
    box-shadow: 0 0 0 var(--m-form-focus-ring-width) var(--m-form-clear-focus-ring);
}

/* =========================================================
   STATES
========================================================= */

.m-field.is-invalid .m-control,
.m-field.is-error .m-control,
.m-control.is-invalid,
.m-control.is-error,
.m-control[aria-invalid="true"] {
    background: var(--m-form-field-invalid-bg);
    color: var(--m-form-field-invalid-text);
    border-color: var(--m-form-field-invalid-border);
}

.m-field.is-invalid .m-control:focus,
.m-field.is-invalid .m-control:focus-visible,
.m-field.is-error .m-control:focus,
.m-field.is-error .m-control:focus-visible,
.m-control.is-invalid:focus,
.m-control.is-invalid:focus-visible,
.m-control.is-error:focus,
.m-control.is-error:focus-visible,
.m-control[aria-invalid="true"]:focus,
.m-control[aria-invalid="true"]:focus-visible {
    border-color: var(--m-form-field-invalid-focus-border);
    box-shadow: 0 0 0 var(--m-form-focus-ring-width) var(--m-form-field-invalid-focus-ring);
}

.m-field.is-invalid .m-field__addon,
.m-field.is-error .m-field__addon {
    background: var(--m-form-field-addon-invalid-bg);
    color: var(--m-form-field-addon-invalid-text);
    border-color: var(--m-form-field-addon-invalid-border);
}

.m-field.is-success .m-control,
.m-control.is-success {
    background: var(--m-form-field-success-bg);
    color: var(--m-form-field-success-text);
    border-color: var(--m-form-field-success-border);
}

.m-field.is-success .m-control:focus,
.m-field.is-success .m-control:focus-visible,
.m-control.is-success:focus,
.m-control.is-success:focus-visible {
    border-color: var(--m-form-field-success-focus-border);
    box-shadow: 0 0 0 var(--m-form-focus-ring-width) var(--m-form-field-success-focus-ring);
}

.m-field.is-success .m-field__addon {
    background: var(--m-form-field-addon-success-bg);
    color: var(--m-form-field-addon-success-text);
    border-color: var(--m-form-field-addon-success-border);
}

.m-field.is-selected .m-control,
.m-control.is-selected {
    background: var(--m-form-field-selected-bg);
    color: var(--m-form-field-selected-text);
    border-color: var(--m-form-field-selected-border);
}

.m-field.is-selected .m-field__addon {
    border-color: var(--m-form-field-selected-border);
}

.m-field.is-loading .m-control,
.m-control.is-loading {
    pointer-events: none;
    opacity: var(--m-form-loading-opacity);
}

.m-field.is-disabled .m-field__addon,
.m-field[aria-disabled="true"] .m-field__addon {
    background: var(--m-form-field-disabled-bg);
    color: var(--m-form-field-disabled-text);
    border-color: var(--m-form-field-disabled-border);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 767.98px) {
    .m-form-inline {
        flex-direction: column;
        gap: var(--m-form-inline-gap-mobile);
    }

    .m-control {
        min-height: 40px;
    }
}