@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');

button,
input,
select,
textarea,
optgroup {
    font-family: var(--app-font);
}

.floating-field {
    --floating-accent: #2563eb;
    --floating-bg: #fff;
    --floating-border: #cfd8e6;
    position: relative;
    display: block;
}

.floating-field > .floating-label-text {
    position: absolute;
    z-index: 3;
    inset-inline-start: 14px;
    top: 50%;
    max-width: calc(100% - 28px);
    margin: 0 !important;
    padding: 0;
    color: #667085;
    font-size: .92rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    transform: translateY(-50%);
    transform-origin: right center;
    transition: top .16s ease, transform .16s ease, color .16s ease, background-color .16s ease, padding .16s ease;
}

html[dir="ltr"] .floating-field > .floating-label-text {
    transform-origin: left center;
}

.floating-field > .floating-control {
    width: 100%;
    min-height: 52px;
    padding-block: 20px 8px !important;
    padding-inline: 14px !important;
    border-color: var(--floating-border);
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.floating-field > textarea.floating-control {
    min-height: 104px;
    padding-top: 25px !important;
    line-height: 1.65;
}

.floating-field > select.floating-control {
    padding-inline-end: 36px !important;
}

.floating-field > .floating-control::placeholder {
    color: transparent !important;
    transition: color .16s ease;
}

.floating-field.is-focused > .floating-control::placeholder {
    color: #98a2b3 !important;
}

.floating-field.is-focused > .floating-control {
    border-color: var(--floating-accent) !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .11) !important;
}

.floating-field.is-focused > .floating-label-text,
.floating-field.has-value > .floating-label-text,
.floating-field.always-float > .floating-label-text {
    top: 0;
    padding-inline: 7px;
    color: var(--floating-accent);
    background: var(--floating-bg);
    transform: translateY(-50%) scale(.84);
}

.floating-field.is-textarea > .floating-label-text {
    top: 25px;
    transform: translateY(0);
}

.floating-field.is-textarea.is-focused > .floating-label-text,
.floating-field.is-textarea.has-value > .floating-label-text,
.floating-field.is-textarea.always-float > .floating-label-text {
    top: 0;
    transform: translateY(-50%) scale(.84);
}

.floating-field.has-error > .floating-label-text,
.floating-field:has(.has-error) > .floating-label-text {
    color: #b42318;
}

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