/* =========================
   WRAPPER
========================= */

.um {
    max-width: 420px;
    margin: 0 auto;
}

/* card container */
.um .um-form {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.06);
}

/* =========================
   LABELS
========================= */

.um-field-label label {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

/* =========================
   INPUT SYSTEM (3PX GLOBAL)
========================= */

.um .um-form-field,
.um .um-field-area input,
.um .um-field-area textarea,
.um .um-field-area select,
.select2-container .select2-choice {

    width: 100%;
    background: #fff !important;

    border: 3px solid var(--input-border) !important;
    border-radius: 14px !important;

    padding: 12px 14px;
    font-size: 14px;
    color: var(--text-dark) !important;

    outline: none !important;
    box-shadow: none !important;

    transition: border-color .2s ease, box-shadow .2s ease;
}

/* =========================
   HOVER
========================= */

.um-field:hover input,
.um-field:hover textarea,
.um-field:hover select,
.um-field:hover .um-form-field {
    border-color: var(--input-focus) !important;
}

/* =========================
   FOCUS
========================= */

.um input:focus,
.um textarea:focus,
.um select:focus,
.um .um-form-field:focus {
    border-color: var(--input-focus) !important;
    box-shadow: 0 0 0 3px rgba(27,80,172,0.25) !important;
}

/* =========================
   AUTOFILL FIX
========================= */

.um input:-webkit-autofill,
.um input:-webkit-autofill:hover,
.um input:-webkit-autofill:focus,
.um textarea:-webkit-autofill,
.um select:-webkit-autofill {

    -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
    box-shadow: 0 0 0px 1000px #fff inset !important;

    -webkit-text-fill-color: var(--text-dark) !important;
    color: var(--text-dark) !important;

    border: 3px solid var(--input-border) !important;
    border-radius: 14px !important;

    transition: background-color 9999s ease-in-out 0s !important;
}

/* =========================
   INPUT GROUP
========================= */

.um .input-group {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    border-radius: 14px;
}

.um .input-group .form-control {
    border: 3px solid var(--input-border) !important;
    border-right: 0 !important;
    border-radius: 14px 0 0 14px !important;
    background: #fff !important;
}

.um .input-group-text {
    background: #fff !important;
    border: 3px solid var(--input-border) !important;
    border-left: 0 !important;
    border-radius: 0 14px 14px 0 !important;
}

/* =========================
   BUTTONS
========================= */

.um .um-button {
    width: 100%;
    background: var(--btn-bg) !important;
    color: var(--btn-text) !important;

    border: none !important;
    border-radius: 9999px !important;

    padding: 12px 18px !important;
    font-weight: 600;

    cursor: pointer;
    transition: all .2s ease;
}

.um .um-button:hover {
    background: var(--btn-bg-hover) !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

/* secondary */
.um .um-button.um-alt {
    background: transparent !important;
    color: var(--text-dark) !important;
    border: 1px solid var(--card-border) !important;
}

.um .um-button.um-alt:hover {
    background: #f9fafb !important;
}

/* =========================
   LINKS
========================= */

.um a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 13px;
}

.um a:hover {
    color: var(--text-dark);
}

/* =========================
   CHECKBOX
========================= */

.um-field-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #374151;
}

.um-field-checkbox-state i {
    color: var(--text-dark);
}

/* =========================
   BUTTON LAYOUT
========================= */

.um-col-alt {
    margin-top: 20px;
}

.um-col-alt .um-left,
.um-col-alt .um-right {
    width: 48%;
}

.um-col-alt .um-left input,
.um-col-alt .um-right a {
    width: 100%;
}

/*-----------------------------------*/
/* =========================
   GLOBAL INPUT STYLE (UM + ACCOUNT)
========================= */

.um input[type="text"],
.um input[type="email"],
.um input[type="date"],
.um input[type="email"],
.um input[type="tel"],
.um input[type="number"],
.um textarea,
.um select,
input[type="url"],
input[type="text"],
input[type="email"],
input[type="date"],
input[type="password"],
input[type="tel"],
input[type="number"],
textarea,
select {

    width: 100%;
    background: #fff !important;

    border: 3px solid #4b5563 !important;
    border-radius: 14px !important;

    padding: 12px 14px;
    font-size: 14px;

    color: #111 !important;

    outline: none !important;
    box-shadow: none !important;

    transition: border-color .2s ease, box-shadow .2s ease;
}

/* hover */
.um input:hover,
.um textarea:hover,
input:hover,
textarea:hover {
    border-color: #1b50ac !important;
}

/* focus */
.um input:focus,
.um textarea:focus,
.um select:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: #1b50ac !important;
    box-shadow: 0 0 0 3px rgba(27,80,172,0.25) !important;
}

/* autofill fix (убирает голубой фон Chrome) */
input:-webkit-autofill,
textarea:-webkit-autofill {

    -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
    -webkit-text-fill-color: #111 !important;

    border: 3px solid #4b5563 !important;
    border-radius: 14px !important;

    transition: background-color 9999s ease-in-out 0s;
}

/* =========================
   DISABLED INPUTS STYLE
========================= */

input:disabled,
textarea:disabled,
select:disabled,
.um input:disabled,
.um textarea:disabled,
.um select:disabled {

    background: #f3f4f6 !important; /* серый фон */
    color: #6b7280 !important;      /* приглушённый текст */

    border: 3px solid #e5e7eb !important;

    cursor: not-allowed;
    opacity: 1 !important; /* чтобы не было слишком блекло */
}

input:disabled:hover {
    border-color: #e5e7eb !important;
}

/* =========================
   SUCCESS MESSAGE (BRAND BLUE)
========================= */

.bg-green-50 {
    background: #eef4ff !important; /* мягкий пудрово-синий */
    border: 1px solid #c7d2fe !important;
}

.text-green-700 {
    color: #1e3a8a !important; /* тёмно-синий текст для читаемости */
}

/* =========================
   FIX FOR PASSWORD EYE ICON
========================= */

.um .um-field-password input,
.um input[type="password"] {
    padding-right: 42px !important;
}

.um .um-field-password .um-field-password-eye,
.um .um-reveal-password,
.um .um-field-icon {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    cursor: pointer !important;
    z-index: 10;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.um .um-field-password .um-field-password-eye i,
.um .um-reveal-password i {
    color: var(--text-muted, #6b7280) !important;
    font-size: 16px;
}

.um .um-field-password .um-field-password-eye:hover i,
.um .um-reveal-password:hover i {
    color: var(--text-dark, #111) !important;
}

.um .um-field-area-password {
    position: relative !important;
    display: block !important;
    width: 100% !important;
}

.um .um-field-area-password input[type="password"] {
    padding-right: 48px !important;
}

.um .um-field-area-password .um-toggle-password {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    cursor: pointer !important;
    z-index: 20 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    width: auto !important;
}

.um .um-field-area-password .um-toggle-password i {
    color: var(--text-muted, #6b7280) !important;
    font-size: 16px !important;
    line-height: 1 !important;
}

.um .um-field-area-password .um-toggle-password:hover i {
    color: var(--text-dark, #111) !important;
}