/* ─────────────────────────────────────────────────────────────────────────
   MoreMarket registration (users/register.blade.php)
   Builds on css/login.css — same stage, page layer, worker and card — and adds
   the registration form (labelled field boxes), its four panels and the
   white compact layout used on phones.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Headline: "BUILD YOUR BUSINESS" ─────────────────────────────────────── */
.mm-register-tagline span {
    font-size: clamp(2.2rem, 4.2vw, 3.6rem);
    line-height: .98;
    max-width: 8ch;
}
.mm-register-tagline em { font-style: normal; color: var(--ml-red); display: block; }

/* ── Field box: icon, visible label, input ───────────────────────────────── */
.mm-rfield {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 54px;
    padding: .4rem .9rem .4rem 2.75rem;
    background: var(--ml-field);
    border: 1px solid #d5deeb;
    border-radius: 8px;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.mm-rfield:has(.mm-pw-toggle) { padding-right: 3rem; }
.mm-rfield:focus-within { background: #fff; border-color: var(--ml-ink); box-shadow: var(--ml-focus); }
.mm-rfield:has([aria-invalid="true"]) { background: #fef2f2; border-color: var(--ml-red); }

.mm-rfield-icon {
    position: absolute;
    top: 50%;
    left: .95rem;
    transform: translateY(-50%);
    font-size: 1rem;
    color: #4b5563;
    pointer-events: none;
}
.mm-rfield:has([aria-invalid="true"]) .mm-rfield-icon { color: var(--ml-red); }

.mm-rfield label {
    margin: 0 0 .1rem;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.2;
    color: #374151;
}

.mm-rinput {
    width: 100%;
    padding: 0;
    font-size: .92rem;
    line-height: 1.4;
    color: var(--ml-ink);
    background: transparent;
    border: 0;
    outline: none;
}
.mm-rinput::placeholder { color: #8b93a1; }
.mm-rinput:disabled { color: #6b7280; }
.mm-rinput-code { font-size: 1.15rem; font-weight: 700; letter-spacing: .45em; }

.mm-register .mm-field { margin-bottom: .8rem; }

.mm-terms { align-items: flex-start; margin: .3rem 0 0; }
.mm-terms input { margin-top: .15rem; flex: none; }
.mm-terms label { font-size: .8rem; line-height: 1.45; color: #374151; }
.mm-terms a { color: var(--ml-red); font-weight: 600; text-decoration: none; }
.mm-terms a:hover { text-decoration: underline; }
#reg-terms-error { margin-bottom: .2rem; }
.mm-register .mm-btn-primary { margin-top: 1.1rem; }

/* Server messages can be long (a debug-mode exception): wrap, and scroll past a few lines */
.mm-register .mm-login-alert { overflow-wrap: anywhere; max-height: 8.5rem; overflow-y: auto; }

/* ── Panels ──────────────────────────────────────────────────────────────── */
.reg-panel .mm-login-title:focus { outline: none; }

.reg-panel-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    color: var(--ml-red);
    background: #fdecec;
    border-radius: 50%;
}
.reg-panel-icon.is-done { color: #15803d; background: #dcfce7; }

.reg-note { margin: 0 0 1rem; font-size: .82rem; color: var(--ml-muted); }
.reg-note:empty { display: none; }
#reg-resend-status { margin: .75rem 0 0; text-align: center; }

.reg-verify-links {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
}
.reg-verify-links form { margin: 0; }
.mm-link-btn {
    padding: 0;
    font-size: .8rem;
    font-weight: 600;
    color: var(--ml-red);
    background: none;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
}
.mm-link-btn:hover { color: var(--ml-red-hover); text-decoration: underline; }
.mm-link-btn:focus-visible { outline: none; box-shadow: var(--ml-focus); }
.mm-link-btn:disabled { opacity: .55; cursor: progress; }

/* Account created */
.reg-success { text-align: center; }
.reg-success-mark {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    margin: 0 auto 1.1rem;
    font-size: 2.3rem;
    color: #fff;
    background: #16a34a;
    border-radius: 50%;
    box-shadow: 0 10px 24px -8px rgba(22, 163, 74, .6);
}
.reg-checklist {
    margin: 0 auto 1.25rem;
    padding: 0;
    max-width: 22rem;
    list-style: none;
    text-align: left;
    font-size: .88rem;
    color: #374151;
}
.reg-checklist li { display: flex; align-items: flex-start; gap: .6rem; padding: .35rem 0; }
.reg-checklist i { color: #16a34a; font-size: 1.05rem; line-height: 1.3; }
.reg-success .mm-btn-primary { margin-top: 0; }

/* ── Phones: white page, faint site behind the worker, as in the storyboard ── */
@media (max-width: 767.98px) {
    .mm-register .mm-login-page { background: #fff; }
    .mm-register .mm-site-backdrop {
        bottom: auto;
        height: 230px;
        opacity: .16;
        -webkit-mask-image: linear-gradient(#000 45%, transparent);
        mask-image: linear-gradient(#000 45%, transparent);
    }
    .mm-register .mm-register-tagline { display: none; }
    .mm-register .mm-login-visual { justify-content: center; }
    .mm-register .login-scene { width: 116px; }
    .mm-register .mm-login-form-wrap { box-shadow: 0 10px 40px -18px rgba(15, 23, 42, .35), 0 0 0 1px #eef0f3; }
}