/* =====================================================================
   INFINITY EXIST — Auth pages (Login / Register) "Estate" redesign
   Pairs with design-system.css. Loaded on auth/login + auth/register.
   ===================================================================== */

.est-auth { background: var(--bg); padding-bottom: 80px; }

/* Dark hero band (consistent with search/detail) */
.est-auth__band {
    background:
        linear-gradient(90deg, rgba(13, 30, 44, .9) 0%, rgba(13, 30, 44, .55) 60%, rgba(13, 30, 44, .3) 100%),
        linear-gradient(120deg, #0f2233 0%, #16344a 100%);
    color: #fff;
    text-align: center;
    padding: 46px 0 96px;
}
.est-auth__band h1 { font-size: 34px; font-weight: 800; letter-spacing: -.02em; }
.est-auth__band h1 span { color: var(--accent); }
.est-auth__band p { margin-top: 8px; color: rgba(255, 255, 255, .82); font-size: 16px; }

.est-auth__wrap { max-width: 480px; margin: -58px auto 0; padding: 0 20px; position: relative; z-index: 3; }
.est-auth--wide .est-auth__wrap { max-width: 880px; }
.est-auth__card { background: #fff; border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-float); padding: 34px; }

/* Fields */
.est-auth__field { margin-bottom: 18px; }
.est-auth__field label { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.est-auth__field input,
.est-auth__field select {
    width: 100%;
    height: 52px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 0 16px;
    font-family: inherit;
    font-size: 15px;
    color: var(--ink);
    background: #fff;
    outline: none;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.est-auth__field input:focus,
.est-auth__field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.est-auth__field input::placeholder { color: #9aa1ac; }

.est-auth__submit { width: 100%; height: 52px; margin-top: 4px; }
.est-auth__error { background: #fef2f2; border: 1px solid #fecaca; color: var(--danger); padding: 11px 15px; border-radius: var(--r-sm); font-size: 14px; margin-bottom: 16px; }
.est-invalid { color: var(--danger); font-size: 13px; margin-top: 6px; display: block; }

/* OR divider */
.est-auth__divider { display: flex; align-items: center; gap: 14px; margin: 22px 0; color: var(--muted); font-size: 13px; font-weight: 600; }
.est-auth__divider::before, .est-auth__divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* Social buttons */
.est-auth__social { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.est-social-btn { display: flex; align-items: center; justify-content: center; gap: 10px; height: 48px; border: 1px solid var(--border); border-radius: var(--r-sm); background: #fff; color: var(--ink); font-size: 14px; font-weight: 600; transition: border-color .16s ease, background .16s ease; }
.est-social-btn:hover { border-color: var(--accent); background: var(--surface-alt); }
.est-social-btn img { height: 20px; width: auto; }

/* Links */
.est-auth__links { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; font-size: 14px; flex-wrap: wrap; }
.est-auth__links a { color: var(--accent); font-weight: 600; }
.est-auth__links a:hover { text-decoration: underline; }

/* =====================================================================
   REGISTER — restyle the existing (JS-coupled) theme markup in Estate look
   The register form keeps its rh_ classes / ids / JS; these rules skin it.
   ===================================================================== */
.est-register .contact100-form-title { display: none; }
/* let the form use the full card width (was capped at 600px inline) */
.est-register .rh_page,
.est-register .rh_page__contact { max-width: none !important; width: 100% !important; margin: 0 !important; }
.est-register .rh_contact__wrap { padding: 0 !important; }
.est-register .container { max-width: none !important; padding: 0 !important; }
.est-register .rh_section { padding: 0 !important; }

/* Role selector chips */
.est-register .btn_wraper { display: flex; justify-content: center; gap: 12px; margin: 0 0 28px; }
.est-register .role-select-btn.outlined-btn {
    background: #fff;
    border: 1px solid var(--border);
    color: var(--body);
    border-radius: var(--r-pill);
    padding: 11px 28px;
    min-width: 130px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all .18s ease;
}
.est-register .role-select-btn.outlined-btn:hover { border-color: var(--accent); color: var(--accent); }
.est-register .role-select-btn.outlined-btn.selected { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Even 2-column grid — hidden fields are removed from the flow automatically */
.est-register .rh_form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    justify-content: initial;
}
.est-register .rh_form__item { padding: 0 !important; width: auto !important; margin: 0 !important; min-width: 0; }
.est-register .rh_form__item label:not(.error) { display: block; color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 7px; }

/* Text / email / password / phone inputs — one consistent control */
.est-register .rh_form__item input[type="text"],
.est-register .rh_form__item input[type="email"],
.est-register .rh_form__item input[type="password"],
.est-register .rh_form__item input[type="tel"] {
    width: 100%;
    height: 52px;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-sm) !important;
    padding: 0 16px !important;
    font-family: inherit !important;
    font-size: 15px;
    color: var(--ink);
    background: #fff !important;
    outline: none;
    box-shadow: none !important;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.est-register .rh_form__item input:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-ring) !important; }
.est-register .rh_form__item input::placeholder { color: #9aa1ac !important; opacity: 1; }

/* Native selects (fallback before select2 upgrades them) */
.est-register .selectwrap > select {
    width: 100%; height: 52px;
    border: 1px solid var(--border); border-radius: var(--r-sm);
    padding: 0 16px; font-family: inherit; font-size: 15px; color: var(--ink); background: #fff;
    -webkit-appearance: none; appearance: none; outline: none;
}

/* select2 widgets → match the inputs exactly */
.est-register .select2-container { width: 100% !important; }
.est-register .select2-container--default .select2-selection--single,
.est-register .select2-container--default .select2-selection--multiple {
    height: 52px !important;
    min-height: 52px !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-sm) !important;
    background: #fff !important;
    display: flex;
    align-items: center;
}
.est-register .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: normal !important;
    padding: 0 34px 0 16px !important;
    color: var(--ink) !important;
    font-size: 15px;
    width: 100%;
}
.est-register .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 50px !important;
    right: 12px !important;
    top: 1px !important;
    background: transparent !important;
    border: 0 !important;
}
.est-register .select2-container--default .select2-selection--multiple .select2-selection__rendered { padding: 4px 12px !important; }
.est-register .select2-dropdown { border-color: var(--border) !important; border-radius: var(--r-sm) !important; }
.est-register .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--accent) !important; }

/* Submit — full width, aligned under the grid */
.est-register .form-group.row { margin-top: 8px; }
.est-register .form-group.row .col-md-12 { padding: 0 !important; margin: 0 !important; }
.est-register button[type="submit"].outlined-btn.selected {
    background: var(--accent) !important;
    border: 0 !important;
    color: #fff !important;
    border-radius: var(--r-pill) !important;
    height: 54px;
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    box-shadow: 0 10px 24px -12px var(--accent);
    transition: background .16s ease, transform .16s ease;
}
.est-register button[type="submit"].outlined-btn.selected:hover { background: var(--accent-dark) !important; transform: translateY(-2px); }

/* intl-tel-input — keep the flag dropdown aligned inside the 52px control */
.est-register .iti { display: block; width: 100%; }
.est-register .iti__flag-container { padding: 1px; }
.est-register .iti__selected-flag { height: 50px; padding: 0 8px 0 12px; border-radius: var(--r-sm) 0 0 var(--r-sm); background: var(--surface-alt); }
/* make room for the flag so the placeholder/value doesn't sit under it */
.est-register .iti input[type="text"],
.est-register .iti input[type="tel"] { padding-left: 56px !important; }

@media (max-width: 640px) {
    .est-auth__card { padding: 24px; }
    .est-auth__social { grid-template-columns: 1fr; }
    .est-register .rh_form__row { grid-template-columns: 1fr; }
    .est-register .btn_wraper { flex-wrap: wrap; }
}
