/*
 * AND Material Forms 1.0.0 — filled floating labels.
 * Only JS-enhanced fields receive these styles; no global .uk-input / label overrides.
 * Keep this block after the theme's existing field customizations.
 */
:root {
    --and-mf-height: 56px;
    --and-mf-radius: 4px;
    --and-mf-padding-start: 14px;
    --and-mf-padding-end: 14px;
    --and-mf-background: rgba(26, 26, 26, 0.04);
    --and-mf-background-hover: rgba(26, 26, 26, 0.08);
    --and-mf-background-focus: rgba(26, 26, 26, 0.12);
    --and-mf-line: rgba(26, 26, 26, 0.35);
    --and-mf-focus: #777;
    --and-mf-label-color: #666;
    --and-mf-error: #b00020;
    --and-mf-label-size: 1rem;
    --and-mf-label-scale: 0.75;
}

.and-mf-field {
    position: relative;
    display: block;
    min-width: 0;
}

.and-mf-field .and-mf-label-wrap { display: contents; }

.and-mf-field .and-mf-controls {
    display: block;
    float: none;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.and-mf-field .and-mf-control {
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: var(--and-mf-height);
    min-height: var(--and-mf-height);
    margin: 0;
    padding-block: 21px 7px;
    padding-inline: var(--and-mf-padding-start) var(--and-mf-padding-end);
    border: 0;
    border-bottom: 1px solid var(--and-mf-line);
    border-radius: var(--and-mf-radius) var(--and-mf-radius) 0 0;
    background-color: var(--and-mf-background);
    box-shadow: none;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.and-mf-field textarea.and-mf-control {
    height: auto;
    min-height: calc(var(--and-mf-height) * 2);
    padding-top: 24px;
    resize: vertical;
}

.and-mf-field select.and-mf-control:not([multiple]) {
    display: block;
    height: var(--and-mf-height);
    min-height: var(--and-mf-height);
    padding-inline-end: max(40px, var(--and-mf-padding-end));
    /* Preserve the theme/native dropdown arrow and native option behavior. */
}

.and-mf-field .and-mf-control:hover:not(:disabled):not(:focus) {
    background-color: var(--and-mf-background-hover);
}

.and-mf-field .and-mf-control:focus {
    outline: none;
    background-color: var(--and-mf-background-focus);
    border-bottom-color: var(--and-mf-focus);
    box-shadow: inset 0 -1px 0 var(--and-mf-focus);
}

.and-mf-field .and-mf-label {
    box-sizing: border-box;
    position: absolute;
    z-index: 2;
    top: 16px;
    inset-inline-start: var(--and-mf-padding-start);
    display: block;
    width: auto;
    max-width: calc(100% - var(--and-mf-padding-start) - max(40px, var(--and-mf-padding-end)));
    margin: 0;
    padding: 0;
    float: none;
    color: var(--and-mf-label-color);
    font-family: inherit;
    font-size: var(--and-mf-label-size);
    line-height: 22px;
    text-align: start;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 1;
    transform: none;
    transform-origin: left top;
    transition: transform 150ms cubic-bezier(.4, 0, .2, 1), color 150ms ease;
    cursor: text;
    pointer-events: auto; /* Keep the real label and its tooltip usable. */
}

.and-mf-field:dir(rtl) .and-mf-label { transform-origin: right top; }

.and-mf-field.and-mf-floating .and-mf-label,
.and-mf-field:focus-within .and-mf-label {
    transform: translateY(-11px) scale(var(--and-mf-label-scale));
}

.and-mf-field:focus-within .and-mf-label { color: var(--and-mf-focus); }

/* A placeholder is supplementary text, not a replacement for the label. */
.and-mf-field .and-mf-control::placeholder { opacity: 0; }
.and-mf-field:focus-within .and-mf-control::placeholder { opacity: 0.65; }

.and-mf-field .formValidation {
    font-size: 0.75rem;
    line-height: 1.5;
}

.and-mf-field .formValidation .formError {
    color: var(--and-mf-error);
    margin-inline-start: var(--and-mf-padding-start);
}

.and-mf-field.and-mf-invalid .and-mf-label { color: var(--and-mf-error); }
.and-mf-field.and-mf-invalid .and-mf-control {
    border-bottom-color: var(--and-mf-error);
    box-shadow: inset 0 -1px 0 var(--and-mf-error);
}

.and-mf-field.and-mf-disabled .and-mf-label { opacity: 0.65; cursor: default; }
.and-mf-field .and-mf-control:disabled { opacity: 0.65; cursor: not-allowed; }

.and-mf-field.and-mf-icon-start { --and-mf-padding-start: 40px; }
.and-mf-field.and-mf-icon-end { --and-mf-padding-end: 40px; }
.and-mf-field:is(.rsform-block-geocomplete, .rsform-block-geocomplete2) {
    --and-mf-padding-start: 35px;
}

/* Native autofill can change the rendered value without a normal input event. */
@supports selector(.and-mf-field:has(input:autofill)) {
    .and-mf-field:has(.and-mf-control:autofill) .and-mf-label {
        transform: translateY(-11px) scale(var(--and-mf-label-scale));
    }
}
@supports selector(.and-mf-field:has(input:-webkit-autofill)) {
    .and-mf-field:has(.and-mf-control:-webkit-autofill) .and-mf-label {
        transform: translateY(-11px) scale(var(--and-mf-label-scale));
    }
}

@media (prefers-reduced-motion: reduce) {
    .and-mf-field .and-mf-control,
    .and-mf-field .and-mf-label { transition: none; }
}

@media (forced-colors: active) {
    .and-mf-field .and-mf-control { border: 1px solid CanvasText; }
    .and-mf-field .and-mf-control:focus { outline: 2px solid Highlight; outline-offset: 2px; }
}