@keyframes lp-fu  { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@keyframes lp-sp  { to{transform:rotate(360deg)} }
@keyframes lp-sk  { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
@keyframes lp-pu  { 0%,100%{transform:scale(.95);opacity:.5} 50%{transform:scale(1.06);opacity:1} }
@keyframes lp-ch  { from{stroke-dashoffset:50} to{stroke-dashoffset:0} }
@keyframes lp-pf  { from{width:0} to{width:100%} }
@keyframes lp-rp  { to{width:300px;height:300px;opacity:0} }
@keyframes lp-dd  { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }

.deco-rangoli-rt {
    position: absolute;
    top: -30px;
    right: -30px;
    width: 220px;
    height: 220px;
    opacity: .1;
}
/* ── Layout ─────────────────────────────────────────────── */
.lp-wrap { min-height:100vh;}

/* ── Left panel ──────────────────────────────────────────── */
.lp-left {
    background:linear-gradient(145deg, var(--lp-g1) 0%, var(--lp-g2) 50%, #1a0800 100%);
    position:sticky; top:0; overflow:hidden;
    display:flex; flex-direction:column; justify-content:center;
    padding:52px; min-height:100vh;
}
.lp-deco-tr  { position:absolute; top:-40px; right:-40px; width:240px; height:240px; opacity:.1; pointer-events:none; }
.lp-deco-spark { position:absolute; bottom:28px; left:24px; font-size:44px; color:rgba(255,255,255,.1); pointer-events:none; user-select:none; }
.lp-brand    { display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.lp-brand-icon {
    width:40px; height:40px; border-radius:10px;
    background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25);
    display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden;
}
.lp-brand-icon img { width:26px; height:26px; object-fit:contain; }
.lp-brand-icon i   { font-size:18px; color:#fff; }
.lp-brand-name { font-size:13px; font-weight:800; color:#fff; letter-spacing:.6px; text-transform:uppercase; }
.lp-badge {
    display:inline-flex; align-items:center; gap:5px;
    background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22);
    color:#fff; font-size:9px; font-weight:700; letter-spacing:1px;
    padding:4px 12px; border-radius:20px; text-transform:uppercase;
    margin-bottom:18px; width:fit-content;
}
.lp-title  { font-size:clamp(30px,5vw,46px); font-weight:800; color:#fff; line-height:1.1; margin-bottom:12px; }
.lp-sub    { font-size:13.5px; color:rgba(255,255,255,.72); line-height:1.72; max-width:440px; margin-bottom:26px; }
.lp-stats  { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:26px; }
.lp-stat   { background:rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:12px 16px; min-width:90px; flex:1; }
.lp-stat-num { font-size:18px; font-weight:800; color:#fff; line-height:1; }
.lp-stat-lbl { font-size:10px; color:rgba(255,255,255,.55); margin-top:3px; }
.lp-testi  { background:rgba(0,0,0,.2); border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:16px 18px; max-width:520px; }
.lp-quote      { font-size:22px; color:rgba(255,255,255,.3); margin-bottom:8px; font-family:Georgia,serif; line-height:1; }
.lp-testi-text { font-size:13px; font-style:italic; color:rgba(255,255,255,.82); line-height:1.72; margin-bottom:14px; }
.lp-testi-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.lp-testi-user { display:flex; align-items:center; gap:8px; }
.lp-avatar { width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.22); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:#fff; flex-shrink:0; }
.lp-uname  { font-size:12px; font-weight:700; color:#fff; }
.lp-uloc   { font-size:10px; color:rgba(255,255,255,.55); }
.lp-stars  { color:rgba(255,255,255,.7); font-size:12px; letter-spacing:1px; }

/* ── Right panel ─────────────────────────────────────────── */
.lp-right {
    background:var(--orp); position:relative;
    display:flex; flex-direction:column; align-items:center;
    justify-content:center; padding:48px 40px; min-height:100vh;
    isolation:isolate; z-index:10;
    /* No overflow:hidden — lets custom dropdown escape */
}
.lp-deco-rt { position:absolute; top:-20px; right:-20px; width:180px; height:180px; opacity:.04; pointer-events:none; }
.lp-deco-bl { position:absolute; bottom:24px; left:24px; font-size:36px; color:rgba(0,0,0,.03); pointer-events:none; user-select:none; }

.lp-logo-box {
    width:60px; height:60px; border-radius:16px;
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 20px; overflow:hidden;
}
.lp-logo-box img { width:90px; height:90px; object-fit:contain; padding:4px; }
.lp-logo-box i   { font-size:24px; color:#fff; }

.lp-form-title { font-size:clamp(20px,3vw,26px); font-weight:800; color:var(--tx); text-align:center; margin-bottom:5px; transition:opacity .2s; }
.lp-form-sub   { font-size:13px; color:var(--tmu); text-align:center; margin-bottom:28px; transition:opacity .2s; }

/* ── Form card ───────────────────────────────────────────── */
.lp-card {
    background:#fff; border-radius:18px;
    padding:24px 22px 22px; width:100%; max-width:400px;
    margin-bottom:16px; position:relative;
    overflow:visible;                         /* must be visible for dropdown */
    border:1px solid rgba(0,0,0,.07);
    box-shadow:0 2px 20px rgba(0,0,0,.06);
    z-index:20;
}
.lp-step { animation:lp-fu .25s ease both; }
.lp-fg   { margin-bottom:16px; }
.lp-lbl  { font-size:12px; font-weight:700; color:var(--tx); margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.lp-lbl i    { font-size:14px; color:var(--or); }
.lp-required { color:#dc3545; margin-left:2px; font-size:12px; }
.lp-opt-tag  { font-size:10px; font-weight:400; color:var(--tlt); background:#f5f5f5; border:0.5px solid #e0e0e0; padding:1px 7px; border-radius:20px; line-height:1.6; }

/* Text / email inputs */
.lp-input {
    width:100%; border:1.5px solid var(--bd); border-radius:10px;
    padding:11px 14px; font-size:14px; font-family:'Poppins',sans-serif;
    color:var(--tx); background:#fff; outline:none; display:block;
    transition:border-color .15s, box-shadow .15s;
}
.lp-input:focus      { border-color:var(--or); box-shadow:0 0 0 3px var(--orl); }
.lp-input.is-invalid { border-color:#dc3545; box-shadow:0 0 0 3px rgba(220,53,69,.08); }
.lp-err  { display:none; align-items:center; gap:5px; font-size:11.5px; color:#dc3545; margin-top:5px; }
.lp-err.show { display:flex; }
.lp-err i    { font-size:13px; flex-shrink:0; }
.lp-input-hint { display:flex; align-items:flex-start; gap:5px; font-size:11px; color:var(--tmu); margin-top:7px; line-height:1.55; }
.lp-input-hint i { font-size:12px; flex-shrink:0; margin-top:1px; color:var(--or); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CUSTOM PHONE ROW
   Flag emoji + country code selector (no lib needed)
   + phone number input side by side
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.lp-phone-row {
    display:flex;
    border:1.5px solid var(--bd);
    border-radius:10px;
    overflow:visible;                         /* lets dropdown escape */
    background:#fff;
    transition:border-color .15s, box-shadow .15s;
    position:relative;
}
.lp-phone-row:focus-within {
    border-color:var(--or);
    box-shadow:0 0 0 3px var(--orl);
}
.lp-phone-row.is-invalid {
    border-color:#dc3545;
    box-shadow:0 0 0 3px rgba(220,53,69,.08);
}

/* ── Country selector trigger ───────────────────────────── */
.lp-cc-btn {
    display:flex; align-items:center; gap:6px;
    padding:0 10px 0 12px;
    background:#f8f8f8;
    border:none; border-right:1.5px solid var(--bd);
    border-radius:8px 0 0 8px;
    cursor:pointer; flex-shrink:0;
    min-width:88px; height:46px;
    font-family:'Poppins',sans-serif;
    transition:background .15s;
    position:relative;
    z-index:1;
}
.lp-cc-btn:hover { background:#f0f0f0; }
.lp-cc-flag  {
    flex-shrink:0; display:flex; align-items:center;
    width:24px; height:18px; overflow:hidden; border-radius:2px;
}
.lp-cc-flag img { display:block; width:24px; height:18px; border-radius:2px; }
.lp-cc-code  { font-size:13px; font-weight:600; color:var(--tx); white-space:nowrap; }
.lp-cc-arrow {
    width:0; height:0;
    border-left:4px solid transparent;
    border-right:4px solid transparent;
    border-top:5px solid var(--tmu);
    margin-left:2px; flex-shrink:0;
    transition:transform .2s;
}
.lp-cc-btn.open .lp-cc-arrow { transform:rotate(180deg); }

/* ── Phone number input ──────────────────────────────────── */
.lp-phone-input {
    flex:1; border:none; outline:none;
    padding:12px 14px; font-size:14px;
    font-weight:500; font-family:'Poppins',sans-serif;
    color:var(--tx); background:transparent;
    border-radius:0 8px 8px 0;
    min-width:0;
}
.lp-phone-input::placeholder { color:var(--tlt); font-weight:400; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   COUNTRY DROPDOWN
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.lp-cc-dropdown {
    position:absolute;
    top:calc(100% + 6px); left:0;
    width:300px;
    background:#fff;
    border:1px solid var(--bd);
    border-radius:14px;
    box-shadow:0 12px 40px rgba(0,0,0,.14);
    z-index:999999;
    overflow:hidden;
    display:none;
    animation:lp-dd .18s ease;
}
.lp-cc-dropdown.open { display:block; }

/* Search box */
.lp-cc-search-wrap {
    padding:10px 12px;
    border-bottom:1px solid var(--bd);
    display:flex; align-items:center; gap:8px;
    background:#fff;
    position:sticky; top:0; z-index:1;
}
.lp-cc-search-wrap i { font-size:14px; color:var(--tmu); flex-shrink:0; }
.lp-cc-search {
    flex:1; border:none; outline:none;
    font-size:13px; font-family:'Poppins',sans-serif;
    color:var(--tx); background:transparent;
    padding:0;
}
.lp-cc-search::placeholder { color:var(--tlt); }

/* Country list */
.lp-cc-list {
    max-height:240px; overflow-y:auto;
    padding:4px 0;
}
.lp-cc-list::-webkit-scrollbar { width:4px; }
.lp-cc-list::-webkit-scrollbar-track { background:transparent; }
.lp-cc-list::-webkit-scrollbar-thumb { background:var(--bd); border-radius:4px; }

/* Divider label */
.lp-cc-divider {
    font-size:9px; font-weight:700; color:var(--tlt);
    letter-spacing:1px; text-transform:uppercase;
    padding:8px 14px 4px;
}

/* Country item */
.lp-cc-item {
    display:flex; align-items:center; gap:10px;
    padding:8px 14px; cursor:pointer;
    transition:background .1s;
}
.lp-cc-item:hover,
.lp-cc-item.selected { background:var(--orp); }
.lp-cc-item-flag {
    width:24px; height:18px; border-radius:2px;
    flex-shrink:0; display:block; object-fit:cover;
    box-shadow:0 0 0 0.5px rgba(0,0,0,.1);
}
.lp-cc-item-name { font-size:13px; color:var(--tx); flex:1; }
.lp-cc-item-code { font-size:12px; color:var(--tmu); font-weight:600; white-space:nowrap; }

/* No results */
.lp-cc-empty { padding:20px 14px; text-align:center; font-size:13px; color:var(--tmu); display:none; }
.lp-cc-empty.show { display:block; }

/* ── Phone chip (step 2) ─────────────────────────────────── */
.lp-phone-chip {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 14px; background:#f9f9f9; border-radius:10px;
    margin-bottom:18px; border:1px solid #ebebeb;
}
.lp-chip-left { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--tx); }
.lp-chip-left i { font-size:15px; color:var(--or); flex-shrink:0; }
.lp-chip-change { font-size:12px; color:var(--or); font-weight:700; background:none; border:none; cursor:pointer; padding:0; font-family:'Poppins',sans-serif; }
.lp-chip-change:hover { text-decoration:underline; }

/* OTP boxes */
.lp-otp-lbl   { font-size:12px; font-weight:700; color:var(--tx); margin-bottom:6px; display:block; }
.lp-otp-hint  { font-size:12px; color:var(--tmu); margin-bottom:16px; line-height:1.55; }
.lp-otp-hint strong { color:var(--or); font-weight:700; }
.lp-otp-boxes { display:flex; gap:9px; justify-content:center; margin-bottom:14px; }
.lp-otp-box {
    width:48px; height:54px; border:1.5px solid var(--bd); border-radius:10px;
    font-size:20px; font-weight:800; text-align:center;
    color:var(--tx); background:#fff; outline:none;
    font-family:'Poppins',sans-serif; -moz-appearance:textfield; cursor:text;
    transition:border-color .15s, box-shadow .15s, transform .1s, background .15s;
}
.lp-otp-box::-webkit-outer-spin-button,
.lp-otp-box::-webkit-inner-spin-button { -webkit-appearance:none; }
.lp-otp-box:focus  { border-color:var(--or); box-shadow:0 0 0 3px var(--orl); transform:scale(1.05); }
.lp-otp-box.filled { border-color:var(--or); background:var(--orp); }
.lp-otp-box.shake  { animation:lp-sk .35s ease; }

/* Timer */
.lp-timer { display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--tmu); margin-bottom:16px; }
.lp-timer-num { color:var(--or); font-weight:700; }
.lp-resend-btn { font-size:12px; color:var(--or); font-weight:700; background:none; border:none; cursor:pointer; padding:0; font-family:'Poppins',sans-serif; display:flex; align-items:center; gap:4px; }
.lp-resend-btn:disabled { color:var(--tmu); cursor:not-allowed; }
.lp-resend-btn:not(:disabled):hover { text-decoration:underline; }

/* New-user notice */
.lp-reg-notice { display:flex; align-items:flex-start; gap:12px; background:var(--orp); border:1px solid var(--orb); border-radius:10px; padding:12px 14px; margin-bottom:20px; }
.lp-reg-notice-icon { width:32px; height:32px; border-radius:50%; background:var(--or); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:14px; color:#fff; }
.lp-reg-notice-text { font-size:12.5px; color:var(--tx); line-height:1.65; }
.lp-reg-notice-text strong { color:var(--or); font-weight:700; }

/* Error block */
.lp-global-err { display:none; align-items:center; justify-content:center; gap:6px; font-size:12px; color:#dc3545; margin-top:10px; padding:8px 12px; background:#fff5f5; border-radius:8px; border:1px solid rgba(220,53,69,.18); }
.lp-global-err.show { display:flex; }
.lp-global-err i { font-size:14px; flex-shrink:0; }

/* Primary button */
.lp-btn {
    width:100%; background:var(--or); color:#fff; border:none;
    border-radius:10px; padding:12px 16px; font-size:14px; font-weight:700;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    gap:8px; font-family:'Poppins',sans-serif;
    position:relative; overflow:hidden; margin-top:4px;
    transition:background .15s, transform .1s, opacity .15s;
}
.lp-btn:hover:not(:disabled)  { background:var(--ord); }
.lp-btn:active:not(:disabled) { transform:scale(.985); }
.lp-btn:disabled { opacity:.45; cursor:not-allowed; }
.lp-spin { animation:lp-sp .8s linear infinite; }
.lp-btn-ripple { position:absolute; border-radius:50%; background:rgba(255,255,255,.22); width:0; height:0; transform:translate(-50%,-50%); pointer-events:none; animation:lp-rp .5s ease-out forwards; }

/* Or divider */
.lp-or { display:flex; align-items:center; gap:12px; font-size:11px; color:var(--tmu); margin:16px 0 14px; }
.lp-or::before,.lp-or::after { content:''; flex:1; height:1px; background:var(--bd); }

/* Social */
.lp-social-grid { display:flex; flex-direction:column; gap:8px; }
.lp-btn-social { width:100%; background:#fff; color:var(--tx); border:1px solid var(--bd); border-radius:10px; padding:10px 14px; font-size:13.5px; font-weight:600; display:flex; align-items:center; justify-content:center; gap:9px; font-family:'Poppins',sans-serif; text-decoration:none; transition:border-color .15s, background .15s; }
.lp-btn-social:hover { border-color:var(--or); background:var(--orp); color:var(--tx); }
.lp-si { width:18px; height:18px; flex-shrink:0; }

/* T&C */
.lp-tnc { font-size:11px; color:var(--tmu); text-align:center; line-height:1.65; margin-top:14px; }
.lp-tnc a { color:var(--or); font-weight:500; }
.lp-tnc a:hover { text-decoration:underline; }

/* Success */
.lp-success { display:flex; flex-direction:column; align-items:center; padding:8px 0; text-align:center; }
.lp-success-ring { width:64px; height:64px; border-radius:50%; border:2px solid var(--or); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; animation:lp-pu 1.4s ease-in-out 3; }
.lp-check-path { stroke-dasharray:50; stroke-dashoffset:0; animation:lp-ch .45s ease .15s; }
.lp-success-title { font-size:18px; font-weight:800; color:var(--tx); margin-bottom:6px; }
.lp-success-sub   { font-size:12.5px; color:var(--tmu); line-height:1.65; }

/* Footer */
.lp-back { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--or); }
.lp-back:hover { text-decoration:underline; color:var(--ord); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width:991px) {
    html,body { overflow:auto; }
    .lp-wrap  { flex-direction:column; }
    .lp-left  { min-height:auto; padding:40px 28px; position:relative; }
    .lp-right { min-height:auto; padding:40px 20px; }
    .lp-title { font-size:36px; }
    .lp-deco-tr { width:160px; height:160px; }
}
@media (max-width:767px) {
    .lp-left    { padding:32px 20px; }
    .lp-right   { padding:32px 16px; }
    .lp-title   { font-size:30px; }
    .lp-deco-tr { display:none; }
    .lp-otp-box { width:44px; height:50px; font-size:18px; }
    .lp-card    { padding:22px 18px 20px; }
    .lp-cc-dropdown { width:calc(100vw - 48px); }
}
@media (max-width:480px) {
    .lp-title     { font-size:26px; }
    .lp-stats     { gap:8px; }
    .lp-left      { padding:24px 16px; }
    .lp-otp-boxes { gap:7px; }
    .lp-otp-box   { width:38px; height:46px; font-size:17px; }
}