/* ── Registration Page Styles ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body { 
    font-family: 'Manrope', sans-serif; 
    -webkit-font-smoothing: antialiased; 
    min-height: 100vh; 
    background: var(--cream); 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    padding: 2.5rem 1.25rem 3rem; 
}
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select { font-family: inherit; }

:root {
    --cream: #FFF8F0;
    --beige: #F0E6D3;
    --beige2: #E2D0B8;
    --sand: #C4A882;
    --ink: #2D1B0E;
    --ink2: #5C3D1E;
    --ink3: #8B6347;
    --brand: #9b00ff;
    --brandL: #c266ff;
    --brandD: #6b00b3;
    --green: #059669;
    --red: #dc2626;
}

.hero { width: 100%; max-width: 460px; text-align: center; margin-bottom: 1.6rem; }
.hero-logo { font-family: 'Outfit', sans-serif; font-size: 1.05rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em; margin-bottom: 1.4rem; display: inline-block; }
.hero-logo em { font-style: normal; color: var(--brand); }
.hero-h { font-family: 'Outfit', sans-serif; font-size: clamp(1.6rem, 5vw, 2.15rem); font-weight: 900; letter-spacing: -.05em; line-height: 1.12; color: var(--ink); margin-bottom: .65rem; }
.hero-h em { font-style: normal; color: var(--brand); }
.hero-sub { font-size: .85rem; color: var(--ink3); line-height: 1.75; max-width: 340px; margin: 0 auto 1.35rem; }

.hero-pills { display: flex; align-items: center; justify-content: center; gap: .5rem; flex-wrap: wrap; }
.h-pill { display: inline-flex; align-items: center; gap: .32rem; font-size: .68rem; font-weight: 700; color: var(--ink2); background: #fff; border: 1.5px solid var(--beige2); border-radius: 100px; padding: .28rem .72rem; }
.h-pill span { font-size: .75rem; }

.card { width: 100%; max-width: 460px; background: #fff; border-radius: 20px; padding: clamp(2rem, 5vw, 2.75rem) clamp(1.75rem, 5vw, 2.75rem); box-shadow: 0 8px 40px rgba(45, 27, 14, .08), 0 1px 0 var(--beige); }
.form-h { font-family: 'Outfit', sans-serif; font-size: 1.65rem; font-weight: 900; letter-spacing: -.045em; line-height: 1.15; color: var(--ink); margin-bottom: .35rem; }
.form-sub { font-size: .82rem; color: var(--ink3); line-height: 1.68; margin-bottom: 1.6rem; }

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: .7rem; }
@media(max-width:380px) { .row2 { grid-template-columns: 1fr; } }

.fg { display: flex; flex-direction: column; gap: .28rem; margin-bottom: .7rem; }
.fl { font-size: .71rem; font-weight: 700; color: var(--ink2); }
.req { color: var(--red); }
.fi { width: 100%; font-family: 'Manrope', sans-serif; font-size: .875rem; color: var(--ink); background: var(--cream); border: 1.5px solid var(--beige); border-radius: 9px; padding: .65rem .9rem; outline: none; transition: all .18s; }
.fi:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(155, 0, 255, .09); background: #fff; }
.fi::placeholder { color: var(--sand); }
.fi.err { border-color: var(--red) !important; }

.ferr { font-size: .65rem; color: var(--red); display: none; }
.ferr.v { display: block; }

.pw-wrap { position: relative; }
.pw-wrap .fi { padding-right: 2.65rem; }
.pw-eye { position: absolute; right: .78rem; top: 50%; transform: translateY(-50%); opacity: .38; cursor: pointer; display: flex; color: var(--ink3); transition: opacity .14s; }
.pw-eye:hover { opacity: .8; }
.pw-eye svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

.pw-bars { display: flex; gap: 3px; height: 3px; margin-top: .3rem; }
.pw-bar { flex: 1; border-radius: 2px; background: var(--beige); transition: background .22s; }
.pw-bar.w { background: #ef4444; }
.pw-bar.f { background: #f59e0b; }
.pw-bar.g { background: #3b82f6; }
.pw-bar.s { background: var(--green); }
.pw-slbl { font-size: .6rem; color: var(--ink3); margin-top: .22rem; }

.agrees { display: flex; flex-direction: column; gap: .55rem; margin: 1rem 0; }
.ag-row { display: flex; align-items: flex-start; gap: .48rem; }
.ag-row input[type=checkbox] { width: 14px; height: 14px; accent-color: var(--brand); cursor: pointer; flex-shrink: 0; margin-top: .18rem; }
.ag-lbl { font-size: .71rem; color: var(--ink3); line-height: 1.55; }
.ag-lbl a { color: var(--brand); font-weight: 700; transition: color .13s; }
.ag-lbl a:hover { color: var(--brandD); }

.sub-btn { width: 100%; margin-top: .25rem; font-family: 'Outfit', sans-serif; font-size: .92rem; font-weight: 800; color: #fff; background: var(--brand); padding: .84rem; border-radius: 11px; box-shadow: 0 4px 20px rgba(155, 0, 255, .28); display: flex; align-items: center; justify-content: center; gap: .5rem; letter-spacing: -.01em; transition: all .2s; }
.sub-btn:hover { transform: translateY(-2px); box-shadow: 0 7px 26px rgba(155, 0, 255, .38); }
.sub-btn svg { width: 14px; height: 14px; stroke: #fff; fill: none; stroke-width: 2.5; stroke-linecap: round; }

.login-row { text-align: center; font-size: .74rem; color: var(--ink3); margin-top: 1rem; }
.login-row a { color: var(--brand); font-weight: 700; }

.alert-err { background: #fff1f1; border: 1.5px solid #fca5a5; border-radius: 9px; padding: .65rem .9rem; font-size: .76rem; color: #b91c1c; margin-bottom: .85rem; display: flex; align-items: center; gap: .5rem; line-height: 1.5; }
.alert-err svg { width: 14px; height: 14px; stroke: #b91c1c; fill: none; stroke-width: 2; stroke-linecap: round; flex-shrink: 0; }

/* ── Phone Input Modernization (intl-tel-input v21+) ── */
.iti { width: 100%; display: block; }
.iti__country-container { 
    pointer-events: none; 
    left: 0 !important; 
    right: auto !important; 
}
.iti__selected-country { 
    background: var(--beige) !important; 
    border-radius: 9px 0 0 9px; 
    padding: 0 12px !important;
    border-right: 1.5px solid var(--beige2);
    cursor: default;
    height: 100%;
    display: flex;
    align-items: center;
}
.iti__selected-country:hover { background: var(--beige) !important; }
.iti__selected-country-primary .iti__arrow { display: none !important; }
.iti input { padding-left: 56px !important; }
.iti__selected-dial-code { font-size: 0.875rem; color: var(--ink2); font-weight: 600; margin-left: 6px; }
#rTel.fi.err { border-color: var(--red) !important; }