/* ============================================================
   Marshanam — Login User
   File: public/css/login.css
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    font-family: 'DM Sans', sans-serif;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #3a4fd4 0%, #4a6ee0 50%, #2d5fc4 100%);
    position: relative;
    overflow-x: hidden;
    padding: 0;
    margin: 0;
}

/* Background blobs */
body::before, body::after {
    content: '';
    position: fixed;
    border-radius: 50%;
    opacity: 0.18;
    pointer-events: none;
    z-index: 0;
}
body::before {
    width: 380px; height: 380px;
    background: #5ecfa0;
    top: -80px; right: 80px;
}
body::after {
    width: 280px; height: 280px;
    background: #7ab8ff;
    bottom: -40px; left: -40px;
}

/* Top nav bar - full width strip like register */
.ms-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 58px;
    display: flex;
    align-items: center;
    padding: 0 32px;
    z-index: 100;
    background: rgba(42,60,196,0.45);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.nav-logo {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 1.25rem;    
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}
.nav-logo span {
    width: 28px; height: 28px; border-radius: 8px;
    background: #25d366;
    display: grid; place-items: center;
    color: #fff; 
    font-size: .9rem;
}

/* Page content area */
.ms-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    width: 100%;
    padding: 2rem 1rem;
    position: relative;
    z-index: 1;
}

/* Outer card (blue header) */
.ms-card-outer {
    background: linear-gradient(160deg, #3a55cc 0%, #3349b8 100%);
    border-radius: 16px;
    padding: 2rem 2rem 0 2rem;
    width: 100%;
    max-width: 550px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}

.ms-card-title {
    color: white;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 4px;
}
.ms-card-sub {
    color: rgba(255,255,255,0.7);
    font-size: 13px;
    margin-bottom: 1.5rem;
}

/* Inner white card */
.ms-inner {
    background: white;
    border-radius: 0 0 12px 12px;
    padding: 1.75rem;
    margin: 0 -2rem;
}

/* Badge */
.ms-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f0fdf4;
    border: 1px solid #86efac;
    color: #15803d;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 14px;
    border-radius: 999px;
    margin-bottom: 1.25rem;
}
.ms-badge-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
}

/* Form labels */
.ms-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #555;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.ms-label .req { color: #e04; }

/* Inputs */
.ms-input {
    width: 100%;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    font-family: 'DM Sans', sans-serif;
    color: #222;
    outline: none;
    transition: border-color 0.15s;
    background: white;
}
.ms-input:focus { border-color: #4a6ee0; }
.ms-input::placeholder { color: #bbb; }

.ms-field { margin-bottom: 1rem; }

/* Checkbox */
.ms-check-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 1rem;
}
.ms-check-row input[type="checkbox"] {
    width: 15px; height: 15px;
    accent-color: #4a6ee0;
    cursor: pointer;
}
.ms-check-row label {
    font-size: 13px;
    color: #555;
    cursor: pointer;
}

/* Button */
.ms-btn {
    width: 100%;
    background: #4a6ee0;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px;
    font-size: 15px;
    font-weight: 600;
    font-family: 'DM Sans', sans-serif;
    cursor: pointer;
    transition: background 0.15s;
}
.ms-btn:hover { background: #3a5cd0; }

/* Alerts */
.ms-alert {
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 1rem;
    font-weight: 500;
}
.ms-alert-danger { background: #fef2f2; border: 1px solid #fca5a5; color: #b91c1c; }
.ms-alert-warning { background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; }
.ms-alert-success { background: #ecfdf5; border: 1px solid #34d399; color: #065f46; }

.ms-error { font-size: 12px; color: #e04; margin-top: 4px; display: block; }

/* ── Register Hint ── */
.hint {
    text-align: center;
    margin-top: 18px;
    font-size: 13px;
    color: #6b7280;
}
.hint a { color: #4f6ef7; font-weight: 700; text-decoration: none; }
.hint a:hover { text-decoration: underline; }