/* ======================================================
   DaMail Authentication Styles
   Version: 1.0
   Author: cAlchemy NexTech
   Product: DaMail
   Motto: Rooted in Africa, Building for the World
====================================================== */

/* ======================================================
   CSS VARIABLES
====================================================== */

:root {

    /* ===============================================
       BRAND COLORS
    =============================================== */

    --primary-color: #2563eb;

    --primary-hover: #1d4ed8;

    --secondary-color: #0f172a;

    --accent-color: #38bdf8;

    /* ===============================================
       STATUS COLORS
    =============================================== */

    --success-color: #16a34a;

    --warning-color: #f59e0b;

    --danger-color: #dc2626;

    --info-color: #0ea5e9;

    /* ===============================================
       BACKGROUND COLORS
    =============================================== */

    --background-color: #f5f7fb;

    --surface-color: #ffffff;

    --surface-secondary: #f8fafc;

    /* ===============================================
       TEXT COLORS
    =============================================== */

    --text-primary: #111827;

    --text-secondary: #6b7280;

    --text-light: #ffffff;

    /* ===============================================
       BORDER COLORS
    =============================================== */

    --border-color: #dbe3ee;

    --border-focus: var(--primary-color);

    /* ===============================================
       SHADOWS
    =============================================== */

    --shadow-small:

        0 2px 8px rgba(0, 0, 0, 0.08);

    --shadow-medium:

        0 8px 24px rgba(0, 0, 0, 0.10);

    --shadow-large:

        0 16px 40px rgba(0, 0, 0, 0.15);

    /* ===============================================
       BORDER RADIUS
    =============================================== */

    --radius-small: 8px;

    --radius-medium: 14px;

    --radius-large: 22px;

    --radius-round: 999px;

    /* ===============================================
       TRANSITIONS
    =============================================== */

    --transition-fast: .2s ease;

    --transition-normal: .3s ease;

    --transition-slow: .45s ease;

    /* ===============================================
       TYPOGRAPHY
    =============================================== */

    --font-family:

        "Inter",

        sans-serif;

}

/* ======================================================
   DARK THEME
====================================================== */

body.dark {

    --background-color: #0f172a;

    --surface-color: #1e293b;

    --surface-secondary: #243244;

    --text-primary: #f8fafc;

    --text-secondary: #cbd5e1;

    --border-color: #334155;

}

/* ======================================================
   RESET
====================================================== */

*,

*::before,

*::after {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

/* ======================================================
   HTML
====================================================== */

html {

    scroll-behavior: smooth;

    font-size: 16px;

}

/* ======================================================
   BODY
====================================================== */

body {

    min-height: 100vh;

    font-family: var(--font-family);

    background: var(--background-color);

    color: var(--text-primary);

    line-height: 1.6;

    transition:

        background var(--transition-normal),

        color var(--transition-normal);

}

/* ======================================================
   IMAGES
====================================================== */

img {

    display: block;

    max-width: 100%;

    height: auto;

}

/* ======================================================
   LINKS
====================================================== */

a {

    color: inherit;

    text-decoration: none;

    transition: var(--transition-fast);

}

/* ======================================================
   BUTTONS
====================================================== */

button {

    font: inherit;

    border: none;

    background: none;

    cursor: pointer;

}

/* ======================================================
   INPUTS
====================================================== */

input,

select,

textarea,

button {

    font-family: inherit;

}

/* ======================================================
   LISTS
====================================================== */

ul,

ol {

    list-style-position: inside;

}

/* ======================================================
   APPLICATION
====================================================== */

.app {

    min-height: 100vh;

}

/* ======================================================
   ACCESSIBILITY
====================================================== */

.sr-only {

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;

}
/* ======================================================
   MAIN LAYOUT
====================================================== */

main {

    min-height: 100vh;

    display: flex;

    align-items: stretch;

    justify-content: center;

}

/* ======================================================
   AUTHENTICATION PAGES
====================================================== */

.login-page,

.reset-password-page,

.register-page,

.forgot-password-page {

    display: grid;

    grid-template-columns: 1.1fr 1fr;

    width: 100%;

    min-height: 100vh;

}

/* ======================================================
   BRANDING PANEL
====================================================== */

.branding-panel {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    padding: 4rem;

    background:

        linear-gradient(

            135deg,

            var(--primary-color),

            #1e40af,

            #0f172a

        );

}

/* ======================================================
   BRANDING OVERLAY
====================================================== */

.branding-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(

            rgba(15,23,42,.25),

            rgba(15,23,42,.55)

        );

}

/* ======================================================
   BRAND CONTENT
====================================================== */

.branding-content {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 520px;

    color: white;

}

/* ======================================================
   BRAND LOGO
====================================================== */

.brand-logo {

    display: flex;

    align-items: center;

    gap: 1rem;

    margin-bottom: 3rem;

}

.brand-logo img {

    width: 72px;

    height: 72px;

    object-fit: contain;

}

.brand-text h1 {

    font-size: 2rem;

    font-weight: 800;

    margin-bottom: .35rem;

}

.brand-text p {

    opacity: .9;

    font-size: .95rem;

}

/* ======================================================
   HERO CONTENT
====================================================== */

.hero-content {

    margin-bottom: 3rem;

}

.hero-tag {

    display: inline-flex;

    align-items: center;

    padding: .45rem 1rem;

    border-radius: var(--radius-round);

    background:

        rgba(255,255,255,.15);

    backdrop-filter: blur(12px);

    font-size: .85rem;

    margin-bottom: 1.5rem;

}

.hero-content h2 {

    font-size: 2.8rem;

    font-weight: 800;

    line-height: 1.2;

    margin-bottom: 1.5rem;

}

.hero-content p {

    font-size: 1.05rem;

    opacity: .92;

}

/* ======================================================
   HERO FEATURES
====================================================== */

.hero-features {

    display: flex;

    flex-direction: column;

    gap: 1rem;

}

.feature-item {

    display: flex;

    align-items: center;

    gap: .85rem;

    padding: 1rem;

    border-radius: var(--radius-medium);

    background:

        rgba(255,255,255,.10);

    backdrop-filter: blur(8px);

}

.feature-item i {

    width: 40px;

    height: 40px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:

        rgba(255,255,255,.18);

}

/* ======================================================
   AUTHENTICATION PANEL
====================================================== */

.authentication-panel {

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 2.5rem;

    background: var(--background-color);

}

/* ======================================================
   AUTHENTICATION CONTAINER
====================================================== */

.authentication-container {

    width: 100%;

    max-width: 560px;

}

/* ======================================================
   AUTHENTICATION CARD
====================================================== */

.authentication-card {

    background: var(--surface-color);

    border-radius: var(--radius-large);

    padding: 2.5rem;

    border: 1px solid var(--border-color);

    box-shadow: var(--shadow-medium);

}

/* ======================================================
   AUTHENTICATION HEADER
====================================================== */

.authentication-header {

    text-align: center;

    margin-bottom: 2rem;

}

.authentication-header h2 {

    font-size: 2rem;

    font-weight: 700;

    margin-bottom: .75rem;

}

.authentication-header p {

    color: var(--text-secondary);

    font-size: .95rem;

    line-height: 1.7;

}
/* ======================================================
   AUTHENTICATION FORM
====================================================== */

.authentication-form {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

}

/* ======================================================
   FORM GROUP
====================================================== */

.form-group {

    display: flex;

    flex-direction: column;

    gap: .55rem;

}

.form-group label {

    font-size: .95rem;

    font-weight: 600;

    color: var(--text-primary);

}

/* ======================================================
   INPUT CONTAINER
====================================================== */

.input-box {

    position: relative;

    display: flex;

    align-items: center;

}

/* ======================================================
   INPUT ICON
====================================================== */

.input-box i:first-child {

    position: absolute;

    left: 1rem;

    color: var(--text-secondary);

    pointer-events: none;

}

/* ======================================================
   INPUTS
====================================================== */

.input-box input,

.input-box select,

.input-box textarea {

    width: 100%;

    min-height: 52px;

    padding:

        .9rem

        3rem

        .9rem

        2.9rem;

    border: 1px solid var(--border-color);

    border-radius: var(--radius-medium);

    background: var(--surface-color);

    color: var(--text-primary);

    font-size: .95rem;

    transition:

        border-color var(--transition-fast),

        box-shadow var(--transition-fast),

        background var(--transition-fast);

}

/* ======================================================
   INPUT PLACEHOLDER
====================================================== */

.input-box input::placeholder,

.input-box textarea::placeholder {

    color: var(--text-secondary);

}

/* ======================================================
   INPUT FOCUS
====================================================== */

.input-box input:focus,

.input-box textarea:focus,

.input-box select:focus {

    outline: none;

    border-color: var(--border-focus);

    box-shadow:

        0 0 0 4px

        rgba(37,99,235,.12);

}

/* ======================================================
   PASSWORD TOGGLE
====================================================== */

.password-toggle {

    position: absolute;

    right: .8rem;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 38px;

    height: 38px;

    color: var(--text-secondary);

    border-radius: 50%;

    transition:

        background var(--transition-fast),

        color var(--transition-fast);

}

.password-toggle:hover {

    background:

        rgba(37,99,235,.08);

    color: var(--primary-color);

}

/* ======================================================
   FIELD STATUS
====================================================== */

.field-status {

    font-size: .82rem;

    color: var(--warning-color);

    margin-top: .25rem;

}

/* ======================================================
   CHECKBOX GROUP
====================================================== */

.checkbox-group {

    display: flex;

    align-items: center;

    gap: .65rem;

    cursor: pointer;

    user-select: none;

}

.checkbox-group input {

    width: 18px;

    height: 18px;

    accent-color: var(--primary-color);

}

/* ======================================================
   AUTHENTICATION OPTIONS
====================================================== */

.authentication-options {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 1rem;

    flex-wrap: wrap;

}

.authentication-options a {

    color: var(--primary-color);

    font-weight: 600;

}

.authentication-options a:hover {

    text-decoration: underline;

}

/* ======================================================
   PRIMARY BUTTON
====================================================== */

.primary-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: .75rem;

    width: 100%;

    min-height: 52px;

    padding: .95rem 1.5rem;

    border-radius: var(--radius-medium);

    background: var(--primary-color);

    color: white;

    font-weight: 600;

    transition:

        transform var(--transition-fast),

        background var(--transition-fast),

        box-shadow var(--transition-fast);

}

.primary-button:hover {

    background: var(--primary-hover);

    transform: translateY(-2px);

    box-shadow: var(--shadow-small);

}

/* ======================================================
   SECONDARY BUTTON
====================================================== */

.secondary-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: .75rem;

    min-height: 50px;

    padding: .9rem 1.4rem;

    border-radius: var(--radius-medium);

    border: 1px solid var(--border-color);

    background: var(--surface-color);

    color: var(--text-primary);

    font-weight: 600;

    transition:

        background var(--transition-fast),

        border-color var(--transition-fast),

        transform var(--transition-fast);

}

.secondary-button:hover {

    background: var(--surface-secondary);

    border-color: var(--primary-color);

    transform: translateY(-2px);

}

/* ======================================================
   BUTTON DISABLED
====================================================== */

button:disabled,

.primary-button:disabled,

.secondary-button:disabled {

    opacity: .6;

    cursor: not-allowed;

    transform: none;

}

/* ======================================================
   AUTHENTICATION DIVIDER
====================================================== */

.authentication-divider {

    display: flex;

    align-items: center;

    gap: 1rem;

    color: var(--text-secondary);

}

.authentication-divider::before,

.authentication-divider::after {

    content: "";

    flex: 1;

    height: 1px;

    background: var(--border-color);

}

.authentication-divider span {

    font-size: .85rem;

    font-weight: 600;

    text-transform: uppercase;

}

/* ======================================================
   AUTHENTICATION LINKS
====================================================== */

.authentication-links {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 1rem;

    text-align: center;

}

.authentication-links p {

    color: var(--text-secondary);

}

.authentication-links a {

    color: var(--primary-color);

    font-weight: 600;

}

.authentication-links a:hover {

    text-decoration: underline;

}
/* ======================================================
   RECOVERY STEPS
====================================================== */

.recovery-step {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

}

.recovery-step h3 {

    font-size: 1.25rem;

    font-weight: 700;

}

.recovery-step p {

    color: var(--text-secondary);

}

/* ======================================================
   SECURITY QUESTION
====================================================== */

.security-question-box,

.verification-card,

.security-card,

.success-card,

.contact-card,

.company-statement {

    padding: 1.5rem;

    border: 1px solid var(--border-color);

    border-radius: var(--radius-medium);

    background: var(--surface-secondary);

}

.security-question-box strong,

.verification-card strong {

    display: block;

    margin-bottom: .5rem;

}

.verification-card,

.success-card {

    text-align: center;

}

.verification-card i,

.success-card i,

.security-card i,

.company-statement i {

    font-size: 2rem;

    color: var(--primary-color);

    margin-bottom: 1rem;

}

/* ======================================================
   PASSWORD STRENGTH
====================================================== */

.password-strength {

    display: flex;

    flex-direction: column;

    gap: .75rem;

}

.strength-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.strength-bar {

    width: 100%;

    height: 8px;

    background: var(--border-color);

    border-radius: var(--radius-round);

    overflow: hidden;

}

#password-strength-fill {

    width: 0;

    height: 100%;

    background: var(--danger-color);

    transition:

        width var(--transition-normal),

        background var(--transition-normal);

}

/* ======================================================
   PASSWORD REQUIREMENTS
====================================================== */

.password-requirements {

    padding: 1.25rem;

    border-radius: var(--radius-medium);

    background: var(--surface-secondary);

    border: 1px solid var(--border-color);

}

.password-requirements h3 {

    margin-bottom: 1rem;

}

.password-requirements ul {

    display: flex;

    flex-direction: column;

    gap: .75rem;

    list-style: none;

}

.password-requirements li {

    display: flex;

    align-items: center;

    gap: .75rem;

}

/* ======================================================
   LEGAL / ABOUT PAGES
====================================================== */

.about-page,

.legal-page {

    min-height: 100vh;

    background: var(--background-color);

}

.about-header,

.legal-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    gap: 1rem;

    padding: 1.5rem 5%;

    background: var(--surface-color);

    border-bottom: 1px solid var(--border-color);

}

.about-navigation,

.legal-navigation {

    display: flex;

    gap: 1rem;

    flex-wrap: wrap;

}

.about-container,

.legal-container {

    width: min(1100px, 92%);

    margin: 3rem auto;

}

.about-content,

.legal-content {

    display: flex;

    flex-direction: column;

    gap: 2.5rem;

}

.about-section,

.legal-section {

    display: flex;

    flex-direction: column;

    gap: 1.25rem;

}

.section-heading {

    display: flex;

    flex-direction: column;

    gap: .5rem;

}

.section-heading span {

    color: var(--primary-color);

    font-weight: 700;

    text-transform: uppercase;

    font-size: .85rem;

}

.section-heading h2 {

    font-size: 2rem;

}

/* ======================================================
   GRID COMPONENTS
====================================================== */

.features-grid,

.values-grid,

.principles-grid,

.advantages-grid,

.mission-grid,

.roadmap-grid,

.hero-highlights {

    display: grid;

    grid-template-columns:

        repeat(

            auto-fit,

            minmax(240px,1fr)

        );

    gap: 1.5rem;

}

.feature-card,

.value-card,

.principle-card,

.advantage-card,

.mission-card,

.roadmap-card,

.highlight-card {

    padding: 1.75rem;

    background: var(--surface-color);

    border: 1px solid var(--border-color);

    border-radius: var(--radius-medium);

    box-shadow: var(--shadow-small);

}

.feature-card i,

.value-card i,

.principle-card i,

.advantage-card i,

.mission-card i,

.roadmap-card i,

.highlight-card i {

    font-size: 2rem;

    color: var(--primary-color);

    margin-bottom: 1rem;

}

/* ======================================================
   LOADING OVERLAY
====================================================== */

.loading-overlay {

    position: fixed;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(15,23,42,.55);

    backdrop-filter: blur(4px);

    z-index: 5000;

}
.loading-overlay[hidden] {

    display: none !important;

}

.loading-box {

    width: min(420px,90vw);

    padding: 2rem;

    text-align: center;

    background: var(--surface-color);

    border-radius: var(--radius-large);

    box-shadow: var(--shadow-large);

}

.spinner {

    width: 54px;

    height: 54px;

    margin: 0 auto 1.5rem;

    border: 5px solid var(--border-color);

    border-top-color: var(--primary-color);

    border-radius: 50%;

    animation:

        spin

        .9s

        linear

        infinite;

}

@keyframes spin {

    to {

        transform: rotate(360deg);

    }

}

/* ======================================================
   TOASTS
====================================================== */

.toast-container {

    position: fixed;

    top: 1.5rem;

    right: 1.5rem;

    display: flex;

    flex-direction: column;

    gap: 1rem;

    z-index: 6000;

}

/* ======================================================
   STATUS COMPONENTS
====================================================== */

.server-status,

.authentication-status,

.app-version {

    text-align: center;

    margin-top: 1.5rem;

    color: var(--text-secondary);

}

.status-indicator {

    display: inline-block;

    width: 10px;

    height: 10px;

    margin-right: .5rem;

    border-radius: 50%;

    background: var(--warning-color);

}

/* ======================================================
   NOSCRIPT
====================================================== */

.noscript-warning {

    display: flex;

    align-items: flex-start;

    gap: 1rem;

    padding: 1.5rem;

    background: #fff4e5;

    border: 1px solid #f59e0b;

    color: #92400e;

}

.noscript-warning i {

    font-size: 1.5rem;

}
/* ======================================================
   TOAST NOTIFICATIONS
====================================================== */

.toast {

    display: flex;

    align-items: center;

    gap: .75rem;

    min-width: 320px;

    max-width: 420px;

    padding: 1rem 1.25rem;

    background: var(--surface-color);

    border-left: 4px solid var(--primary-color);

    border-radius: var(--radius-medium);

    box-shadow: var(--shadow-medium);

    animation: toastIn .25s ease;

}

.toast i {

    font-size: 1.1rem;

}

.toast.success {

    border-left-color: var(--success-color);

}

.toast.success i {

    color: var(--success-color);

}

.toast.error {

    border-left-color: var(--danger-color);

}

.toast.error i {

    color: var(--danger-color);

}

.toast.warning {

    border-left-color: var(--warning-color);

}

.toast.warning i {

    color: var(--warning-color);

}

.toast.info {

    border-left-color: var(--info-color);

}

.toast.info i {

    color: var(--info-color);

}

@keyframes toastIn {

    from {

        opacity: 0;

        transform: translateX(20px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}

/* ======================================================
   THEME TOGGLE
====================================================== */

.theme-toggle {

    position: fixed;

    right: 1.5rem;

    bottom: 1.5rem;

    width: 56px;

    height: 56px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--primary-color);

    color: #fff;

    box-shadow: var(--shadow-medium);

    z-index: 1000;

}

.theme-toggle:hover {

    background: var(--primary-hover);

}

/* ======================================================
   BACK TO TOP
====================================================== */

.back-to-top {

    position: fixed;

    right: 1.5rem;

    bottom: 5.8rem;

    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--surface-color);

    border: 1px solid var(--border-color);

    color: var(--primary-color);

    box-shadow: var(--shadow-small);

}

/* ======================================================
   READING PROGRESS
====================================================== */

.reading-progress {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 4px;

    z-index: 5000;

}

.reading-progress-bar {

    width: 0;

    height: 100%;

    background: var(--primary-color);

}

/* ======================================================
   GLOBAL OVERLAY
====================================================== */

.global-overlay {

    position: fixed;

    inset: 0;

    background: rgba(15,23,42,.45);

    z-index: 4000;

}

/* ======================================================
   AUTHENTICATION FOOTER
====================================================== */

.authentication-footer {

    margin-top: 2rem;

    text-align: center;

}

.footer-links {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 1rem;

    margin-bottom: 1rem;

}

/* ======================================================
   APPLICATION STATES
====================================================== */

.hidden {

    display: none !important;

}

[hidden] {

    display: none !important;

}

.visible {

    display: block !important;

}

.flex {

    display: flex !important;

}

.grid {

    display: grid !important;

}

.loading {

    pointer-events: none;

    opacity: .65;

}

.disabled {

    pointer-events: none;

    opacity: .55;

}

.active {

    border-color: var(--primary-color);

}

.success {

    border-color: var(--success-color);

}

.error {

    border-color: var(--danger-color);

}

.warning {

    border-color: var(--warning-color);

}

.info {

    border-color: var(--info-color);

}

/* ======================================================
   FORM VALIDATION
====================================================== */

.input-valid input,

.input-valid textarea,

.input-valid select {

    border-color: var(--success-color);

}

.input-invalid input,

.input-invalid textarea,

.input-invalid select {

    border-color: var(--danger-color);

}

.validation-message {

    margin-top: .35rem;

    font-size: .82rem;

}

.validation-message.success {

    color: var(--success-color);

}

.validation-message.error {

    color: var(--danger-color);

}

/* ======================================================
   PASSWORD REQUIREMENTS
====================================================== */

.password-requirements li {

    transition: color var(--transition-fast);

}

.password-requirements li.passed {

    color: var(--success-color);

}

.password-requirements li.passed i {

    color: var(--success-color);

}

/* ======================================================
   RESPONSIVE DESIGN
====================================================== */

@media (max-width: 992px) {

    .login-page,

    .register-page,

    .forgot-password-page,

    .reset-password-page {

        grid-template-columns: 1fr;

    }

    .branding-panel {

        min-height: 340px;

        padding: 2.5rem;

    }

    .authentication-panel {

        padding: 1.5rem;

    }

}

@media (max-width: 768px) {

    .branding-panel {

        display: none;

    }

    .authentication-panel {

        width: 100%;

        min-height: 100vh;

    }

    .authentication-card {

        padding: 2rem;

    }

    .about-header,

    .legal-header {

        flex-direction: column;

        align-items: flex-start;

    }

    .about-navigation,

    .legal-navigation {

        width: 100%;

        justify-content: flex-start;

    }

    .footer-links {

        flex-direction: column;

    }

}

@media (max-width: 576px) {

    html {

        font-size: 15px;

    }

    .authentication-card {

        padding: 1.5rem;

    }

    .hero-content h2 {

        font-size: 2rem;

    }

    .primary-button,

    .secondary-button {

        width: 100%;

    }

    .authentication-options {

        flex-direction: column;

        align-items: flex-start;

    }

    .toast {

        width: calc(100vw - 2rem);

        min-width: auto;

    }

}

/* ======================================================
   PRINT
====================================================== */

@media print {

    .theme-toggle,

    .back-to-top,

    .loading-overlay,

    .toast-container,

    .global-overlay,

    .server-status,

    .app-version,

    .authentication-footer {

        display: none !important;

    }

    body {

        background: #fff;

        color: #000;

    }

}