/* ============================================================
   LEGAL PAGE HEADER
============================================================ */

.legal-header {
    border-bottom: 1px solid var(--color-border-dark);
    padding: var(--space-4) var(--space-5);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: linear-gradient( to right, rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0.7) );
    backdrop-filter: blur(12px);
    color: var(--color-text-primary);
}

.legal-logo {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
}

.legal-title-block h1 {
    margin: 0;
    font-size: var(--font-size-lg);
    color: var(--color-text-primary);
}

.legal-title-block p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}


/* ============================================================
   MAIN LEGAL CONTENT
============================================================ */

.legal-container {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-5);
    font-family: "Inter", var(--font-family-base);
    line-height: 1.6;
    color: var(--color-text-primary);
}

    .legal-container h1 {
        font-size: 2.4rem;
        margin-bottom: var(--space-5);
        text-align: center;
        color: var(--color-text-primary);
    }

    .legal-container h2 {
        font-size: 1.6rem;
        margin-top: var(--space-6);
        margin-bottom: var(--space-3);
        color: var(--color-text-primary);
    }

    .legal-container p,
    .legal-container li {
        font-size: var(--font-size-md);
        margin-bottom: var(--space-3);
        color: var(--color-text-secondary);
    }

    .legal-container ul {
        padding-left: var(--space-5);
        margin-bottom: var(--space-5);
    }

    .legal-container strong {
        font-weight: 600;
        color: var(--color-text-primary);
    }


/* ============================================================
   BACK BUTTON
============================================================ */

.back-button {
    display: inline-block;
    margin-bottom: var(--space-5);
    font-size: var(--font-size-sm);
    color: var(--color-info);
    text-decoration: none;
}

    .back-button:hover {
        text-decoration: underline;
    }


/* ============================================================
   DROPDOWN LEGAL LINKS (PROFILE MENU)
============================================================ */

#profileDropdown .privacy-link a,
#profileDropdown .terms-link a {
    font-size: 0.75rem;
    opacity: 0.6;
}

#profileDropdown .dropdown-item a:hover {
    opacity: 1;
    text-decoration: underline;
}