/* ==========================================================
   Harborlight Trust — Auth Pages Shared Styles
   Used by: login.html, register.html, forgot.html, login2.php
   ========================================================== */

/* ---------- Reset & Variables ---------- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
    --brand-navy:#0F2D52;
    --brand-teal:#027C68;
    --brand-blue:#1077C9;
    --bg:#F8FAFC;
    --card:#FFFFFF;
    --text:#1E293B;
    --muted:#64748B;
    --border:#E2E8F0;
    --success:#16A34A;
    --warning:#F59E0B;
    --danger:#DC2626;
    --info:#0EA5E9;
}

html, body {
    min-height:100%;
    font-family:'Inter',-apple-system,sans-serif;
    background:var(--bg);
    color:var(--text);
}

/* ---------- Home Button ---------- */
.home-btn {
    position:fixed; top:24px; left:24px; z-index:100;
    width:44px; height:44px; border-radius:12px;
    background:var(--card); border:1.5px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    color:var(--muted); text-decoration:none; font-size:18px;
    transition:all .2s; box-shadow:0 1px 3px rgba(0,0,0,0.06);
}
.home-btn:hover {
    background:rgba(2,124,104,0.08);
    border-color:var(--brand-teal);
    color:var(--brand-teal);
    transform:translateY(-1px);
}

/* ---------- Split Layout ---------- */
.split-layout { display:flex; min-height:100vh; }

/* ---------- Brand Panel ---------- */
.brand-panel {
    flex:1; display:flex; flex-direction:column;
    justify-content:center; align-items:center;
    background:linear-gradient(135deg,var(--brand-navy) 0%,var(--brand-blue) 100%);
    padding:60px 40px; position:relative; overflow:hidden;
}
.brand-panel::before {
    content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%;
    background:
        radial-gradient(circle at 30% 50%,rgba(255,255,255,0.1) 0%,transparent 50%),
        radial-gradient(circle at 70% 50%,rgba(255,255,255,0.06) 0%,transparent 50%);
    animation:ambientGlow 8s ease-in-out infinite alternate;
}
@keyframes ambientGlow {
    0%   { transform:translate(0,0) rotate(0deg); }
    100% { transform:translate(2%,2%) rotate(3deg); }
}
.brand-content { position:relative; z-index:1; text-align:center; max-width:480px; }
.brand-logo-img {
    width:min(180px,55vw); height:auto;
    margin:0 auto 24px; display:block;
    filter:drop-shadow(0 0 24px rgba(16,119,201,0.35));
}
.brand-title {
    font-size:clamp(28px,4vw,44px); font-weight:800; line-height:1.2;
    margin-bottom:16px; color:#FFF;
    text-shadow:0 2px 12px rgba(0,0,0,0.25);
}
.brand-subtitle {
    font-size:clamp(15px,1.2vw,18px);
    color:rgba(255,255,255,0.85); line-height:1.7; margin-bottom:40px;
}
.trust-row { display:flex; gap:32px; justify-content:center; flex-wrap:wrap; }
.trust-item { text-align:center; }
.trust-item i { font-size:24px; color:#FFF; margin-bottom:8px; }
.trust-item span { display:block; font-size:13px; color:rgba(255,255,255,0.75); font-weight:500; }

/* ---------- Form Panel ---------- */
.form-panel {
    flex:1; display:flex; flex-direction:column;
    justify-content:center; align-items:center;
    background:var(--card); padding:60px 40px; position:relative; overflow:hidden;
}
/* Subtle decorative banking background: soft brand glows + dot grid */
.form-panel::before {
    content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:
        radial-gradient(circle at 88% 8%, rgba(2,124,104,0.08) 0%, transparent 42%),
        radial-gradient(circle at 6% 92%, rgba(16,119,201,0.07) 0%, transparent 45%),
        radial-gradient(rgba(15,45,82,0.035) 1px, transparent 1.6px);
    background-size:auto, auto, 22px 22px;
}
.form-card { width:100%; max-width:420px; position:relative; z-index:1; }
.form-card .mobile-logo { display:none; }

/* ---------- Form Header ---------- */
.form-header { margin-bottom:32px; text-align:center; }
.form-header .icon-circle {
    width:56px; height:56px; border-radius:16px; margin:0 auto 14px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(2,124,104,0.10); color:var(--brand-teal); font-size:24px;
}
.form-header h1 { font-size:24px; font-weight:700; margin-bottom:6px; color:var(--brand-navy); }
.form-header p { font-size:14px; color:var(--muted); line-height:1.6; }
.form-header p a { color:var(--brand-teal); text-decoration:none; font-weight:600; transition:color .2s; }
.form-header p a:hover { color:var(--brand-blue); }

/* ---------- Inputs ----------
   Two patterns supported:
   1. .input-group > input          (no label; login / forgot / OTP)
   2. .input-group > .input-wrap    (with label; register)            */
.input-group { position:relative; margin-bottom:20px; }

.input-group .icon,
.input-wrap .field-icon,
.input-wrap .toggle-vis {
    position:absolute; top:50%; transform:translateY(-50%);
    font-size:16px; transition:color .2s;
}
.input-group .icon { left:16px; color:#94a3b8; pointer-events:none; }
.input-wrap { position:relative; }
.input-wrap .field-icon { left:16px; color:#94a3b8; font-size:15px; pointer-events:none; }
.input-wrap .toggle-vis {
    right:14px; font-size:15px; pointer-events:auto;
    cursor:pointer; background:none; border:none; padding:0;
    color:#94a3b8;
}
.input-wrap .toggle-vis:hover { color:#64748b; }

.input-group input,
.input-wrap input,
.input-wrap select {
    width:100%; padding:16px 16px 16px 48px; font-size:15px;
    font-family:'Inter',sans-serif; background:var(--bg);
    border:1.5px solid var(--border); border-radius:12px;
    color:var(--text); outline:none; transition:all .2s;
}
.input-group input::placeholder,
.input-wrap input::placeholder { color:#94a3b8; }

.input-group input:focus,
.input-wrap input:focus,
.input-wrap select:focus {
    border-color:var(--brand-teal); background:var(--card);
    box-shadow:0 0 0 4px rgba(2,124,104,0.1);
}
.input-group input:focus ~ .icon,
.input-wrap input:focus ~ .field-icon,
.input-wrap select:focus ~ .field-icon { color:var(--brand-teal); }

.input-group input.missing-at,
.input-wrap input.missing-at { border-color:#fca5a5; }
.input-group input.missing-at:focus,
.input-wrap input.missing-at:focus {
    border-color:#ef4444; box-shadow:0 0 0 4px rgba(239,68,68,0.1);
}
.input-group input.missing-at ~ .icon,
.input-wrap input.missing-at ~ .field-icon { color:#ef4444; }

/* ---------- Primary Button ---------- */
.btn-primary {
    width:100%; padding:16px; font-size:16px; font-weight:700;
    font-family:'Inter',sans-serif;
    background:linear-gradient(135deg,var(--brand-teal),var(--brand-blue));
    color:#FFF; border:none; border-radius:12px; cursor:pointer;
    transition:all .2s; position:relative; overflow:hidden;
}
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 8px 24px rgba(2,124,104,0.25); }
.btn-primary:active { transform:translateY(0); }
.btn-primary:disabled { opacity:0.6; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-primary i { margin-left:8px; font-size:14px; transition:transform .2s; }
.btn-primary:hover:not(:disabled) i { transform:translateX(3px); }
.btn-primary:disabled i { transform:none; }

/* ---------- Responsive ---------- */
@media (max-width:900px) {
    .home-btn { left:auto; right:24px; }
    .split-layout { flex-direction:column; overflow-y:auto; }
    .brand-panel { display:none; }
    .form-panel { padding:40px 24px; min-height:100vh; justify-content:flex-start; }
    .form-card { max-width:400px; }
    .form-card .mobile-logo { display:flex; justify-content:center; margin-bottom:40px; }
    .form-card .mobile-logo img { width:auto; max-width:130px; height:auto; }
}
@media (max-width:480px) {
    .form-panel { padding:32px 20px; }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .brand-panel::before { animation:none; }
    *, *::before, *::after { transition-duration:0.01ms !important; }
}