/* =====================================================
   LEGAL PAGES CSS (Privacy, Terms, Refund, Risk)
===================================================== */

:root {
    --bg-primary: #0a0a0f;
    --bg-secondary: #12121a;
    --bg-card: #16161f;
    --text-primary: #ffffff;
    --text-secondary: #a0a0b0;
    --border-color: rgba(255, 255, 255, 0.08);
    --gradient-1: #f59e0b;
    --gradient-2: #ec4899;
    --gradient-3: #8b5cf6;
    --gradient-4: #3b82f6;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: "Inter", sans-serif;
}

/* --- Page Header --- */
.legal-header {
    padding: 180px 0 60px;
    /* Top padding accounts for fixed navbar */
    background: var(--bg-secondary);
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Background glow effect similar to Home */
.legal-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 200%;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.legal-title {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 700;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.gradient-text {
    background: linear-gradient(135deg, var(--gradient-1), var(--gradient-2), var(--gradient-3));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.legal-subtitle {
    color: #f3f3f5;
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* --- Content Section --- */
.legal-content-section {
    padding: 60px 0 100px;
    background: #f3f3f5;
}

.legal-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
}

.legal-card {
    background: #ffffff; /* Changed to pure white for light theme */
    border: 1px solid rgba(0, 0, 0, 0.08); /* Soft dark border */
    border-radius: 24px;
    padding: 3rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04); /* Soft shadow for light theme */
}

/* Typography inside the card */
.legal-text {
    color: #3b3b3f; /* Dark gray for paragraph readability */
    line-height: 1.8;
    font-size: 1.05rem;
}

.legal-text h2 {
    color: #1a1a1a; /* Solid black for headings */
    font-size: 1.8rem;
    margin-top: 2.5rem;
    margin-bottom: 1.2rem;
    font-weight: 700;
    border-left: 4px solid var(--gradient-3);
    padding-left: 1rem;
}

.legal-text h2:first-child {
    margin-top: 0;
}

.legal-text h3 {
    color: #28282B; /* Dark text for subheadings */
    font-size: 1.3rem;
    margin-top: 1.8rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.legal-text p {
    margin-bottom: 1.2rem;
    color: var(--bg-secondary); /* Medium gray for paragraphs */
}

.legal-text ul {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.legal-text li {
    margin-bottom: 0.5rem;
    position: relative;
    list-style: none;
}

/* Custom bullet points */
.legal-text li::before {
    content: "•";
    color: var(--gradient-2);
    font-size: 1.2em;
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

/* =========================================
   NESTED BULLET POINT STYLES
   ========================================= */
/* Targets lists inside of other lists */
.legal-text ul ul {
    margin-top: 0.5rem; /* Adds a little breathing room */
    margin-bottom: 0;   /* Prevents too much gap at the bottom */
}

/* Changes the icon for the nested bullet */
.legal-text ul ul li::before {
    content: "■"; /* Your chosen bullet shape */
    color: var(--gradient-4); 
    font-size: 0.48em;
    
    /* NEW: Pushes the bullet up to align with the middle of the text */
    display: inline-block;
    transform: translateY(-3px); /* Change to -3px if it needs to go slightly higher */
}

.legal-text a {
    color: var(--gradient-4);
    text-decoration: none;
    transition: color 0.3s;
}

.legal-text a:hover {
    color: var(--gradient-2);
    text-decoration: underline;
}

/* =========================================
   ORDERED (NUMBERED) LIST STYLES
   ========================================= */
.legal-text ol {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem; /* Indents the numbers neatly */
}

/* Tell the list to use standard numbers (1, 2, 3...) */
.legal-text ol li {
    list-style-type: lower-roman;
    list-style-position: outside;
    padding-left: 0.5rem; /* Adds a tiny gap between the number and text */
}

/* Hide the custom pink bullet icon ONLY for numbered lists */
.legal-text ol li::before {
    content: none; 
    display: none;
}

/* =========================================
   NESTED UL INSIDE AN OL
   ========================================= */
.legal-text ol ul {
    margin-top: 0.5rem;
    margin-bottom: 0;
}

/* Turn off the numbers for the nested bullet items */
.legal-text ol ul li {
    list-style-type: none;
}

/* Bring back the custom bullet icon for these specific items */
.legal-text ol ul li::before {
    content: "•"; /* You can change this to "-", "○", etc. */
    display: inline-block;
    color: var(--gradient-2);
    font-size: 1.2em;
    transform: translateY(-2px); /* Keeps it vertically centered */
    width: 1em;
    margin-left: -1em;
}

/* --- Last Update Badge --- */
.last-updated {
    display: inline-block;
    background: rgba(0, 0, 0, 0.04); /* Light gray background */
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 0.9rem;
    color: #6b6b7b; /* Dark muted text */
    margin-bottom: 2rem;
    border: 1px solid rgba(0, 0, 0, 0.08); /* Soft dark border */
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .legal-header {
        padding: 140px 0 40px;
    }

    .legal-card {
        padding: 1.5rem;
        border-radius: 16px;
    }

    .legal-text h2 {
        font-size: 1.5rem;
    }
}

/* Styling for Tables inside Dynamic Legal Documents */
.legal-text table {
    width: 100%;
    margin-bottom: 1.5rem;
    border-collapse: collapse;
    color: var(--text-primary, #ffffff);
}

.legal-text table th,
.legal-text table td {
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, 0.15); /* Subtle white border */
    text-align: left;
}

.legal-text table th {
    background-color: rgba(255, 255, 255, 0.05); /* Slight highlight for headers */
    font-weight: 600;
}

.legal-text table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.02); /* Very subtle hover effect */
}

/* =========================================
   TABLE STYLES FOR LEGAL PAGES
   ========================================= */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1.5rem 0 2.5rem 0;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 700px; /* Forces scrolling on small screens to preserve layout */
    background: #ffffff;
}

.legal-table th, .legal-table td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    border-right: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 0.95rem;
    color: #3b3b3f;
}

.legal-table th:last-child, .legal-table td:last-child {
    border-right: none;
}

.legal-table th {
    background: rgba(0, 0, 0, 0.03);
    font-weight: 700;
    color: #1a1a1a;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

.legal-table tr:last-child td {
    border-bottom: none;
}

.legal-table tbody tr:hover {
    background: rgba(0, 0, 0, 0.01);
}