/* =====================================================
   Register Page Design — Shared CSS
   Animated glassmorphism split-card layout with
   dual-theme support (light/dark).
   Synced with login page & landing page tokens.
   ===================================================== */

/* ─── Light theme tokens (default) ─── */
:root {
    --lp-body-bg:           #f8f7fa;
    --lp-card-border:       rgba(200,202,220,0.7);
    --lp-card-shadow:       0 35px 90px rgba(80,80,120,0.13), 0 0 0 1px rgba(180,182,210,0.25);
    --lp-left-bg:           linear-gradient(155deg, rgba(43,187,173,0.22) 0%, rgba(32,133,122,0.16) 45%, rgba(43,187,173,0.10) 100%);
    --lp-left-border:       rgba(43,187,173,0.20);
    --lp-left-grid:         rgba(0,0,0,0.04);
    --lp-left-circle:       rgba(43,187,173,0.12);
    --lp-blob1:             rgba(43,187,173,0.38);
    --lp-blob2:             rgba(20,133,122,0.30);
    --lp-blob3:             rgba(67,160,150,0.22);
    --lp-grid-dot:          rgba(0,0,0,0.055);
    --lp-prop-shape:        rgba(32,133,122,0.13);
    --lp-prop-stroke:       rgba(32,133,122,0.22);
    --lp-brand-name:        #1a2640;
    --lp-brand-tagline:     rgba(60,72,98,0.62);
    --lp-rp-bg:             rgba(255,255,255,0.90);
    --lp-welcome-h4:        #1a2640;
    --lp-welcome-p:         rgba(60,72,98,0.55);
    --lp-label:             rgba(47,43,61,0.72);
    --lp-label-focus:       #20857a;
    --lp-input-bg:          rgba(0,0,0,0.03);
    --lp-input-border:      rgba(210,213,225,0.95);
    --lp-input-focus-border:#20857a;
    --lp-input-focus-ring:  rgba(32,133,122,0.17);
    --lp-input-color:       #2f2b3d;
    --lp-input-placeholder: rgba(93,89,108,0.35);
    --lp-igt-bg:            rgba(0,0,0,0.03);
    --lp-igt-border:        rgba(210,213,225,0.95);
    --lp-igt-color:         rgba(93,89,108,0.42);
    --lp-igt-focus-color:   #20857a;
    --lp-check-bg:          rgba(0,0,0,0.05);
    --lp-check-border:      rgba(93,89,108,0.28);
    --lp-check-checked:     #20857a;
    --lp-check-label:       rgba(60,72,98,0.60);
    --lp-link:              #20857a;
    --lp-link-hover:        #175e59;
    --lp-btn-from:          #2bbbad;
    --lp-btn-via:           #1b8f87;
    --lp-btn-to:            #1b5e6b;
    --lp-btn-shadow:        rgba(43,187,173,0.36);
    --lp-btn-shadow-hover:  rgba(43,187,173,0.54);
    --lp-btn-text:          #ffffff;
    --lp-divider:           rgba(200,202,220,0.80);
    --lp-divider-text:      rgba(93,89,108,0.40);
    --lp-register-text:     rgba(60,72,98,0.52);
    --lp-nav-icon:          rgba(93,89,108,0.42);
    --lp-nav-icon-hover:    #20857a;
    --lp-dd-bg:             rgba(255,255,255,0.98);
    --lp-dd-border:         rgba(200,202,220,0.80);
    --lp-dd-item:           rgba(47,43,61,0.72);
    --lp-particle:          rgba(43,187,173,1);
    --lp-logo-glow1:        rgba(43,187,173,0.38);
    --lp-logo-glow2:        rgba(32,133,122,0.58);
    --lp-toggle-icon:       #5d596c;
    --lp-toggle-bg:         rgba(255,255,255,0.80);
    --lp-toggle-border:     rgba(200,202,220,0.80);
    --lp-alert-danger-bg:   rgba(234,84,85,0.08);
    --lp-alert-danger-bdr:  rgba(234,84,85,0.22);
    --lp-alert-danger-txt:  #c0392b;
    --lp-alert-info-bg:     rgba(32,133,122,0.08);
    --lp-alert-info-bdr:    rgba(32,133,122,0.22);
}

/* ─── Dark theme tokens ─── */
[data-style="dark"], .dark-theme {
    --lp-body-bg:           #1e2139;
    --lp-card-border:       #434968;
    --lp-card-shadow:       0 35px 90px rgba(0,0,0,0.55), 0 0 0 1px rgba(67,73,104,0.6);
    --lp-left-bg:           linear-gradient(155deg, rgba(43,187,173,0.28) 0%, rgba(32,133,122,0.20) 40%, rgba(43,187,173,0.14) 100%);
    --lp-left-border:       #434968;
    --lp-left-grid:         rgba(207,211,236,0.04);
    --lp-left-circle:       rgba(61,196,184,0.10);
    --lp-blob1:             rgba(43,187,173,0.28);
    --lp-blob2:             rgba(61,196,184,0.22);
    --lp-blob3:             rgba(32,133,122,0.18);
    --lp-grid-dot:          rgba(207,211,236,0.06);
    --lp-particle:          rgba(61,196,184,1);
    --lp-brand-name:        #cfd3ec;
    --lp-brand-tagline:     rgba(182,190,227,0.65);
    --lp-rp-bg:             rgba(47,51,73,0.95);
    --lp-welcome-h4:        #cfd3ec;
    --lp-welcome-p:         rgba(182,190,227,0.55);
    --lp-label:             rgba(207,211,236,0.80);
    --lp-label-focus:       #3DC4B8;
    --lp-input-bg:          rgba(207,211,236,0.05);
    --lp-input-border:      #434968;
    --lp-input-focus-border:#3DC4B8;
    --lp-input-focus-ring:  rgba(61,196,184,0.20);
    --lp-input-color:       #cfd3ec;
    --lp-input-placeholder: rgba(121,131,187,0.55);
    --lp-igt-bg:            rgba(207,211,236,0.05);
    --lp-igt-border:        #434968;
    --lp-igt-color:         rgba(121,131,187,0.65);
    --lp-igt-focus-color:   #3DC4B8;
    --lp-check-bg:          rgba(207,211,236,0.07);
    --lp-check-border:      #545976;
    --lp-check-checked:     #2BBBAD;
    --lp-check-label:       rgba(182,190,227,0.65);
    --lp-link:              #3DC4B8;
    --lp-link-hover:        #5DE4D4;
    --lp-btn-from:          #2BBBAD;
    --lp-btn-via:           #20857A;
    --lp-btn-to:            #175E59;
    --lp-btn-shadow:        rgba(43,187,173,0.42);
    --lp-btn-shadow-hover:  rgba(61,196,184,0.58);
    --lp-btn-text:          #ffffff;
    --lp-divider:           #434968;
    --lp-divider-text:      rgba(121,131,187,0.60);
    --lp-register-text:     rgba(182,190,227,0.55);
    --lp-nav-icon:          rgba(121,131,187,0.60);
    --lp-nav-icon-hover:    #3DC4B8;
    --lp-dd-bg:             rgba(30,33,57,0.99);
    --lp-dd-border:         #434968;
    --lp-dd-item:           rgba(207,211,236,0.75);
    --lp-logo-glow1:        rgba(43,187,173,0.45);
    --lp-logo-glow2:        rgba(61,196,184,0.65);
    --lp-toggle-bg:         rgba(47,51,73,0.85);
    --lp-toggle-border:     #434968;
    --lp-toggle-icon:       rgba(207,211,236,0.70);
    --lp-alert-danger-bg:   rgba(234,84,85,0.10);
    --lp-alert-danger-bdr:  rgba(234,84,85,0.25);
    --lp-alert-danger-txt:  #f1abab;
    --lp-alert-info-bg:     rgba(43,187,173,0.10);
    --lp-alert-info-bdr:    rgba(43,187,173,0.25);
    --lp-prop-shape:        rgba(61,196,184,0.10);
    --lp-prop-stroke:       rgba(61,196,184,0.20);
}

/* ─── Base ─── */
html, body { height: 100%; margin: 0; padding: 0; }

body {
    background: var(--lp-body-bg) !important;
    min-height: 100vh;
    overflow-x: hidden;
    font-family: 'Public Sans', sans-serif;
    transition: background 0.35s ease;
}

/* ─── Animated background layers ─── */
.login-bg {
    position: fixed; inset: 0; z-index: 0;
    background: var(--lp-body-bg);
    transition: background 0.35s ease;
}
.login-blob {
    position: fixed; border-radius: 50%;
    filter: blur(90px); pointer-events: none; z-index: 1;
}
.login-blob-1 {
    width: 650px; height: 650px; top: -220px; left: -180px;
    background: radial-gradient(circle, var(--lp-blob1) 0%, transparent 68%);
    animation: blobFloat1 22s ease-in-out infinite;
}
.login-blob-2 {
    width: 550px; height: 550px; bottom: -180px; right: -120px;
    background: radial-gradient(circle, var(--lp-blob2) 0%, transparent 68%);
    animation: blobFloat2 28s ease-in-out infinite;
}
.login-blob-3 {
    width: 380px; height: 380px; top: 42%; left: 50%;
    transform: translate(-50%,-50%);
    background: radial-gradient(circle, var(--lp-blob3) 0%, transparent 68%);
    animation: blobFloat3 19s ease-in-out infinite;
}
@keyframes blobFloat1 {
    0%,100% { transform: translate(0,0) scale(1); }
    33%      { transform: translate(45px,35px) scale(1.08); }
    66%      { transform: translate(-20px,55px) scale(0.94); }
}
@keyframes blobFloat2 {
    0%,100% { transform: translate(0,0) scale(1); }
    40%      { transform: translate(-55px,-45px) scale(1.12); }
    70%      { transform: translate(30px,-25px) scale(0.88); }
}
@keyframes blobFloat3 {
    0%,100% { transform: translate(-50%,-50%) scale(1) rotate(0deg); }
    50%      { transform: translate(-50%,-50%) scale(1.45) rotate(130deg); }
}

/* Grid-dot overlay */
.login-grid {
    position: fixed; inset: 0; z-index: 2; pointer-events: none;
    background-image: radial-gradient(var(--lp-grid-dot) 1px, transparent 1px);
    background-size: 48px 48px;
}

/* Particles canvas */
#login-particles {
    position: fixed; inset: 0; z-index: 3; pointer-events: none;
}

/* ─── Floating property shapes ─── */
.login-prop-shapes {
    position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden;
}
.prop-shape {
    position: absolute;
    opacity: 0;
    animation: propFloat linear infinite;
    will-change: transform, opacity;
}
.prop-shape svg {
    fill: var(--lp-prop-shape);
    stroke: var(--lp-prop-stroke);
    stroke-width: 1.5;
    transition: fill 0.35s, stroke 0.35s;
}
.prop-shape:nth-child(1)  { width:52px; left:8%;   top:110%; animation-duration:18s; animation-delay:0s;    animation-name: propFloatA; }
.prop-shape:nth-child(2)  { width:38px; left:18%;  top:110%; animation-duration:24s; animation-delay:3s;    animation-name: propFloatB; }
.prop-shape:nth-child(3)  { width:64px; left:30%;  top:110%; animation-duration:20s; animation-delay:6s;    animation-name: propFloatA; }
.prop-shape:nth-child(4)  { width:44px; left:42%;  top:110%; animation-duration:22s; animation-delay:1s;    animation-name: propFloatC; }
.prop-shape:nth-child(5)  { width:36px; left:55%;  top:110%; animation-duration:26s; animation-delay:8s;    animation-name: propFloatB; }
.prop-shape:nth-child(6)  { width:56px; left:67%;  top:110%; animation-duration:19s; animation-delay:4s;    animation-name: propFloatA; }
.prop-shape:nth-child(7)  { width:42px; left:78%;  top:110%; animation-duration:23s; animation-delay:11s;   animation-name: propFloatC; }
.prop-shape:nth-child(8)  { width:48px; left:88%;  top:110%; animation-duration:21s; animation-delay:7s;    animation-name: propFloatB; }
.prop-shape:nth-child(9)  { width:34px; left:4%;   top:110%; animation-duration:28s; animation-delay:14s;   animation-name: propFloatA; }
.prop-shape:nth-child(10) { width:60px; left:93%;  top:110%; animation-duration:17s; animation-delay:2s;    animation-name: propFloatC; }
@keyframes propFloatA {
    0%   { transform: translateY(0)   rotate(-5deg)  scale(1);   opacity:0; }
    5%   { opacity: 0.9; }
    90%  { opacity: 0.7; }
    100% { transform: translateY(-115vh) rotate(15deg) scale(1.1); opacity:0; }
}
@keyframes propFloatB {
    0%   { transform: translateY(0)   translateX(0)    rotate(8deg)  scale(1);   opacity:0; }
    5%   { opacity: 0.85; }
    40%  { transform: translateY(-45vh) translateX(30px)  rotate(-6deg) scale(1.05); }
    75%  { transform: translateY(-85vh) translateX(-20px) rotate(12deg) scale(0.95); }
    100% { transform: translateY(-115vh) translateX(10px) rotate(-3deg) scale(1.1); opacity:0; }
}
@keyframes propFloatC {
    0%   { transform: translateY(0)   rotate(0deg)   scale(1);    opacity:0; }
    5%   { opacity: 0.8; }
    50%  { transform: translateY(-55vh) rotate(180deg) scale(1.08); }
    100% { transform: translateY(-115vh) rotate(360deg) scale(1);  opacity:0; }
}

/* Theme toggle button */
.login-theme-toggle {
    position: fixed; top: 1.2rem; right: 1.2rem; z-index: 100;
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--lp-toggle-bg);
    border: 1px solid var(--lp-toggle-border);
    color: var(--lp-toggle-icon);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    font-size: 1.05rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}
[dir="rtl"] .login-theme-toggle { right: auto; left: 1.2rem; }
.login-theme-toggle:hover {
    transform: scale(1.12) rotate(12deg);
    box-shadow: 0 4px 18px rgba(0,0,0,0.22);
}

/* ─── Page wrapper ─── */
.login-page-wrapper {
    position: relative; z-index: 10;
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 2rem 1rem;
}

/* ─── Split card ─── */
.login-split-card {
    display: flex; width: 100%; max-width: 1050px; min-height: 540px;
    border-radius: 28px; overflow: hidden;
    border: 1px solid var(--lp-card-border);
    box-shadow: var(--lp-card-shadow), inset 0 1px 0 rgba(255,255,255,0.07);
    animation: cardReveal 0.9s cubic-bezier(0.16,1,0.3,1) both;
    opacity: 0; transform: translateY(50px) scale(0.97);
    transition: border-color 0.35s, box-shadow 0.35s;
}
@keyframes cardReveal {
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ─── Left branding panel ─── */
.login-left-panel {
    flex: 0 0 340px;
    background: var(--lp-left-bg);
    border-right: 1px solid var(--lp-left-border);
    backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
    padding: 3rem 2.5rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
    transition: background 0.35s, border-color 0.35s;
}
[dir="rtl"] .login-left-panel { border-right: none; border-left: 1px solid var(--lp-left-border); }
.login-left-panel::before {
    content: ''; position: absolute; inset: 0;
    background-image:
        linear-gradient(var(--lp-left-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--lp-left-grid) 1px, transparent 1px);
    background-size: 38px 38px;
}
.login-left-panel::after {
    content: ''; position: absolute;
    width: 320px; height: 320px; border-radius: 50%;
    border: 1px solid var(--lp-left-circle);
    bottom: -100px; right: -100px;
}

.lp-logo-wrap {
    position: relative; z-index: 2; margin-bottom: 2rem;
    animation: lpFadeUp 0.8s cubic-bezier(0.16,1,0.3,1) 0.15s both;
}
.lp-logo-wrap img {
    max-width: 100px; max-height: 100px; object-fit: contain;
    animation: logoPulse 4s ease-in-out infinite;
}
@keyframes logoPulse {
    0%,100% { filter: drop-shadow(0 0 20px var(--lp-logo-glow1)); }
    50%      { filter: drop-shadow(0 0 42px var(--lp-logo-glow2)); }
}

.lp-brand-name {
    position: relative; z-index: 2;
    font-size: 1.55rem; font-weight: 700; color: var(--lp-brand-name);
    text-align: center; line-height: 1.35; margin-bottom: 0.75rem;
    animation: lpFadeUp 0.8s cubic-bezier(0.16,1,0.3,1) 0.3s both;
    transition: color 0.35s;
}
.lp-brand-tagline {
    position: relative; z-index: 2;
    font-size: 0.85rem; color: var(--lp-brand-tagline);
    text-align: center; margin-bottom: 0;
    animation: lpFadeUp 0.8s cubic-bezier(0.16,1,0.3,1) 0.4s both;
    transition: color 0.35s;
}
@keyframes lpFadeUp {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── Right form panel ─── */
.login-right-panel {
    flex: 1;
    background: var(--lp-rp-bg);
    backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
    padding: 2.5rem 2.5rem;
    display: flex; flex-direction: column; justify-content: center;
    animation: rpSlideIn 0.9s cubic-bezier(0.16,1,0.3,1) 0.12s both;
    opacity: 0;
    transition: background 0.35s;
    overflow-y: auto;
    max-height: 90vh;
}
@keyframes rpSlideIn {
    from { opacity: 0; transform: translateX(28px); }
    to   { opacity: 1; transform: translateX(0); }
}
[dir="rtl"] .login-right-panel { animation-name: rpSlideInRtl; }
@keyframes rpSlideInRtl {
    from { opacity: 0; transform: translateX(-28px); }
    to   { opacity: 1; transform: translateX(0); }
}

.rp-welcome { margin-bottom: 1.5rem; }
.rp-welcome h4 {
    font-size: 1.45rem; font-weight: 700; color: var(--lp-welcome-h4);
    margin-bottom: 0.3rem;
    animation: lpFadeUp 0.6s cubic-bezier(0.16,1,0.3,1) 0.22s both;
    transition: color 0.35s;
}
.rp-welcome p {
    color: var(--lp-welcome-p); font-size: 0.86rem; margin: 0;
    animation: lpFadeUp 0.6s cubic-bezier(0.16,1,0.3,1) 0.33s both;
    transition: color 0.35s;
}

/* Form labels */
.login-right-panel .form-label {
    color: var(--lp-label) !important;
    font-size: 0.82rem !important; font-weight: 500 !important;
    letter-spacing: 0.018em; margin-bottom: 0.35rem !important;
    transition: color 0.25s;
}
.login-right-panel .mb-3:focus-within .form-label { color: var(--lp-label-focus) !important; }

/* Inputs */
.login-right-panel .form-control {
    background: var(--lp-input-bg) !important;
    border: 1.5px solid var(--lp-input-border) !important;
    border-radius: 12px !important;
    color: var(--lp-input-color) !important; padding: 0.62rem 0.9rem !important;
    font-size: 0.88rem !important;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1) !important;
    box-shadow: none !important;
}
.login-right-panel .form-control::placeholder { color: var(--lp-input-placeholder) !important; }
.login-right-panel .form-control:focus {
    background: var(--lp-input-bg) !important;
    border-color: var(--lp-input-focus-border) !important;
    box-shadow: 0 0 0 4px var(--lp-input-focus-ring) !important;
    color: var(--lp-input-color) !important;
}
.login-right-panel .form-control.is-invalid { border-color: rgba(234,84,85,0.5) !important; }
.login-right-panel .form-control.is-valid { border-color: rgba(40,199,111,0.5) !important; }
.login-right-panel .invalid-feedback { color: var(--lp-alert-danger-txt) !important; font-size: 0.78rem; }
.login-right-panel .form-text { font-size: 0.76rem; transition: color 0.25s; }
.login-right-panel .form-text.text-muted { color: var(--lp-welcome-p) !important; }

/* Password input-group */
.login-right-panel .input-group-merge .form-control {
    border-right: none !important; border-radius: 12px 0 0 12px !important;
}
.login-right-panel .input-group-merge .input-group-text {
    background: var(--lp-igt-bg) !important;
    border: 1.5px solid var(--lp-igt-border) !important;
    border-left: none !important; border-radius: 0 12px 12px 0 !important;
    color: var(--lp-igt-color) !important; transition: all 0.3s; cursor: pointer;
}
[dir="rtl"] .login-right-panel .input-group-merge .form-control {
    border-left: none !important;
    border-right: 1.5px solid var(--lp-input-border) !important;
    border-radius: 0 12px 12px 0 !important;
}
[dir="rtl"] .login-right-panel .input-group-merge .input-group-text {
    border-right: none !important;
    border-left: 1.5px solid var(--lp-igt-border) !important;
    border-radius: 12px 0 0 12px !important;
}
.login-right-panel .input-group:focus-within .form-control {
    border-color: var(--lp-input-focus-border) !important;
    box-shadow: 0 0 0 4px var(--lp-input-focus-ring) !important;
}
.login-right-panel .input-group:focus-within .input-group-text {
    border-color: var(--lp-input-focus-border) !important; color: var(--lp-igt-focus-color) !important;
}

/* Links */
.login-right-panel a { color: var(--lp-link) !important; text-decoration: none; transition: color 0.22s; }
.login-right-panel a:hover { color: var(--lp-link-hover) !important; }

/* Submit button */
.login-right-panel .btn-signin {
    background: linear-gradient(135deg, var(--lp-btn-from) 0%, var(--lp-btn-via) 55%, var(--lp-btn-to) 100%) !important;
    background-size: 200% 100% !important;
    border: none !important; border-radius: 12px !important;
    padding: 0.72rem 1rem !important;
    font-size: 0.93rem !important; font-weight: 600 !important; color: var(--lp-btn-text) !important;
    position: relative !important; overflow: hidden !important;
    transition: all 0.4s cubic-bezier(0.4,0,0.2,1) !important;
    box-shadow: 0 4px 22px var(--lp-btn-shadow) !important;
    animation: btnReveal 0.6s cubic-bezier(0.16,1,0.3,1) 0.5s both;
}
@keyframes btnReveal {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.login-right-panel .btn-signin::after {
    content: ''; position: absolute; top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
    transition: left 0.6s ease;
}
.login-right-panel .btn-signin:hover::after { left: 100%; }
.login-right-panel .btn-signin:hover {
    background-position: right center !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 32px var(--lp-btn-shadow-hover) !important;
}
.login-right-panel .btn-signin:active { transform: translateY(0) scale(0.99) !important; }
.login-right-panel .btn-signin:disabled {
    opacity: 0.65 !important;
    cursor: not-allowed !important;
}

/* Alerts */
.login-right-panel .alert-danger {
    background: var(--lp-alert-danger-bg) !important;
    border: 1px solid var(--lp-alert-danger-bdr) !important;
    color: var(--lp-alert-danger-txt) !important; border-radius: 10px !important;
    animation: alertShake 0.45s cubic-bezier(0.36,0.07,0.19,0.97);
}
@keyframes alertShake {
    10%,90% { transform: translateX(-3px); }
    30%,70% { transform: translateX(5px); }
    50%      { transform: translateX(-5px); }
}
.login-right-panel .alert-info {
    background: var(--lp-alert-info-bg) !important;
    border: 1px solid var(--lp-alert-info-bdr) !important;
    color: var(--lp-input-color) !important; border-radius: 10px !important;
    font-size: 0.82rem;
}

/* Divider */
.login-right-panel .divider .divider-text { color: var(--lp-divider-text) !important; font-size: 0.78rem; }
.login-right-panel .divider::before,
.login-right-panel .divider::after { border-color: var(--lp-divider) !important; }

/* Register text */
.rp-register-text { color: var(--lp-register-text); font-size: 0.85rem; text-align: center; margin: 0; transition: color 0.35s; }

/* Language toggle ─ same style as landing page */
.lp-lang-toggle {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.45rem 1rem;
    background: transparent;
    border: 1px solid var(--lp-dd-border);
    border-radius: 0.375rem;
    color: var(--lp-nav-icon);
    font-size: 0.85rem; font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.lp-lang-toggle:hover {
    background: var(--lp-alert-info-bg);
    border-color: var(--lp-link);
    color: var(--lp-link);
}
[dir="rtl"] .lp-lang-toggle { flex-direction: row-reverse; }

/* Validation state colors */
.form-text.text-success, .text-success:not(.alert-success) { color: #28c76f !important; }
.form-text.text-danger, .text-danger:not(.alert-danger):not(.badge) { color: #ea5455 !important; }
.form-text.text-info { color: #00cfe8 !important; }
[data-style="dark"] .form-text.text-success, [data-style="dark"] .text-success:not(.alert-success) { color: #28c76f !important; }
[data-style="dark"] .form-text.text-danger, [data-style="dark"] .text-danger:not(.alert-danger):not(.badge) { color: #ff6166 !important; }
[data-style="dark"] .form-text.text-info { color: #03c3ec !important; }
[data-style="dark"] .invalid-feedback { color: #ff6166 !important; }

/* ─── OTP Modal ─── */
#otpModal .modal-content {
    border-radius: 16px;
    border: 1px solid var(--lp-card-border);
    background: var(--lp-rp-bg);
    backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
}
#otpModal .modal-title {
    color: var(--lp-welcome-h4);
    font-weight: 600;
}
#otpModal .modal-body {
    color: var(--lp-input-color);
}
#otpModal .modal-body p {
    color: var(--lp-welcome-p);
}
#otpModal .modal-body .fw-bold,
#otpModal .modal-body .fw-semibold {
    color: var(--lp-input-color);
}
.otp-input-group {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 10px;
    justify-content: center;
    align-items: center;
    margin: 16px 0;
    direction: ltr;
}
.otp-input {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 56px !important;
    flex: 0 0 48px !important;
    text-align: center !important;
    font-size: 22px !important;
    font-weight: bold;
    border: 2px solid var(--lp-input-border) !important;
    border-radius: 10px !important;
    transition: all 0.3s;
    padding: 0 !important;
    background: var(--lp-input-bg);
    color: var(--lp-input-color);
}
@media (max-width: 400px) {
    .otp-input { width: 40px !important; min-width: 40px !important; max-width: 40px !important; height: 48px !important; flex: 0 0 40px !important; font-size: 18px !important; }
    .otp-input-group { gap: 6px; }
}
@media (max-width: 350px) {
    .otp-input { width: 34px !important; min-width: 34px !important; max-width: 34px !important; height: 42px !important; flex: 0 0 34px !important; font-size: 16px !important; }
    .otp-input-group { gap: 4px; }
}
.otp-input:focus {
    border-color: var(--lp-input-focus-border) !important;
    outline: none;
    box-shadow: 0 0 0 3px var(--lp-input-focus-ring) !important;
}
.otp-input.error {
    border-color: #ff4c51 !important;
    animation: otpShake 0.5s;
}
@keyframes otpShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}
.otp-timer {
    font-size: 16px;
    color: var(--lp-link);
    font-weight: bold;
    margin: 15px 0;
}
.otp-timer.expired { color: #ff4c51; }
.otp-resend-link { color: var(--lp-link); cursor: pointer; text-decoration: underline; }
.otp-resend-link:hover { color: var(--lp-link-hover); }
.otp-resend-link.disabled { color: var(--lp-input-placeholder); cursor: not-allowed; text-decoration: none; }

[data-style="dark"] #otpModal .modal-content {
    background-color: rgba(47,51,73,0.98) !important;
    border-color: #434968 !important;
}
[data-style="dark"] #otpModal .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
[data-style="dark"] .otp-resend-link.disabled { color: #555873 !important; }

/* OTP Verify button */
#otpModal .btn-primary,
#otpModal .btn-signin {
    background: linear-gradient(135deg, var(--lp-btn-from) 0%, var(--lp-btn-via) 55%, var(--lp-btn-to) 100%) !important;
    border: none !important; border-radius: 12px !important;
    color: var(--lp-btn-text) !important; font-weight: 600;
    box-shadow: 0 4px 22px var(--lp-btn-shadow) !important;
}

/* Mobile OTP Modal */
@media (max-width: 575.98px) {
    #otpModal .modal-dialog { margin: 0.25rem; }
    #otpModal .modal-body { padding: 0.875rem 0.75rem; }
    #otpModal .otp-timer { font-size: 14px; margin: 10px 0; }
}

/* Domain logo */
.domain-logo {
    max-height: 75px;
    max-width: 200px;
    object-fit: contain;
}

/* Avatar icon in error/header states */
.login-right-panel .avatar-initial {
    background-color: rgba(32,133,122,0.12) !important;
    color: var(--lp-link) !important;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .login-left-panel { display: none; }
    .login-split-card { max-width: 500px; min-height: auto; border-radius: 20px; }
    .login-right-panel { padding: 2rem 1.5rem; max-height: none; }
    .rp-welcome h4 { font-size: 1.3rem; }
}
@media (max-width: 480px) {
    .login-right-panel { padding: 1.5rem 1.15rem; }
}

/* Scrollbar styling for right panel */
.login-right-panel::-webkit-scrollbar { width: 4px; }
.login-right-panel::-webkit-scrollbar-track { background: transparent; }
.login-right-panel::-webkit-scrollbar-thumb { background: var(--lp-divider); border-radius: 4px; }
.login-right-panel::-webkit-scrollbar-thumb:hover { background: var(--lp-nav-icon); }