/*
==============================================
TABLE OF CONTENTS
==============================================
1.  GLOBAL STYLES
2.  THEME VARIABLES
3.  HEADER & NAVIGATION
4.  HERO SECTION
5.  GENERAL SECTION & CARD STYLES
6.  CHART SECTION
7.  CALCULATOR SECTION
8.  PORTFOLIO TRACKER
9.  CRYPTO CONVERTER
10. WATCHLIST
11. PRICE ALERTS
12. MINING CALCULATOR
13. CRYPTO HEATMAP
14. LEARN CRYPTO
15. DCA CALCULATOR
16. TRENDING COINS
17. PRICE PREDICTIONS
18. FOOTER
19. RESPONSIVE DESIGN
==============================================
*/

/* 1. GLOBAL STYLES */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #f8fafc; /* Fallback */
    background-color: var(--background-color);
    color: #1e293b; /* Fallback */
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}

main {
    padding-top: 80px;
}

/* 2. THEME VARIABLES */
:root {
    --primary-color: #3b82f6;
    --secondary-color: #10b981;
    --background-color: #f8fafc;
    --card-bg: #ffffff;
    --text-color: #1e293b;
    --text-secondary: #64748b;
    --border-color: #e2e8f0;
    --success-color: #10b981;
    --error-color: #ef4444;
    --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] {
    --primary-color: #60a5fa;
    --secondary-color: #34d399;
    --background-color: #0f172a;
    --card-bg: #1e293b;
    --text-color: #f8fafc;
    --text-secondary: #94a3b8;
    --border-color: #334155;
    --success-color: #34d399;
    --error-color: #f87171;
    --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

/* 3. HEADER & NAVIGATION */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
    z-index: 1000;
}

[data-theme="dark"] header {
    background: rgba(15, 23, 42, 0.8);
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 1rem 2rem;
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 2rem;
    list-style: none;
}

.nav-links a {
    color: var(--text-color);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: var(--primary-color);
}

/* 4. HERO SECTION */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

.hero-content {
    max-width: 800px;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.hero-description {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.cta-button {
    display: inline-block;
    padding: 0.8rem 1.5rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    transition: transform 0.3s;
}

.cta-button.primary {
    background-color: var(--primary-color);
    color: #fff;
}

.cta-button:hover {
    transform: translateY(-2px);
}

/* 5. GENERAL SECTION & CARD STYLES */
section {
    padding: 4rem 2rem;
}

.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 600;
}

.card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: var(--card-shadow);
}

/* 6. CHART SECTION */
.chart-container {
    height: 500px;
    margin-bottom: 2rem;
}

.chart-controls {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.coin-btn, .time-btn {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: transparent;
    color: var(--text-color);
    cursor: pointer;
}

.coin-btn.active, .time-btn.active {
    background-color: var(--primary-color);
    color: #fff;
}

.price-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.chart-wrapper {
    position: relative;
    height: 400px;
}

.chart-wrapper.loading .loading-spinner {
    display: block;
}

.chart-wrapper.loading #cryptoChart {
    opacity: 0.3;
}

.chart-wrapper.error .error-message {
    display: block;
    color: var(--error-color);
}

.chart-wrapper.error #cryptoChart {
    display: none;
}

.chart-wrapper .loading-spinner,
.chart-wrapper .error-message {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
}

.loading-spinner {
    border: 4px solid var(--border-color);
    border-top: 4px solid var(--primary-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.stat-value.positive {
    color: var(--success-color);
}

.stat-value.negative {
    color: var(--error-color);
}

/* 7. CALCULATOR SECTION */
.calculator-container {
    max-width: 500px;
    margin: 0 auto;
}

.input-group {
    margin-bottom: 1rem;
}

.input-group label {
    display: block;
    margin-bottom: 0.5rem;
}

.input-group input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--background-color);
    color: var(--text-color);
}

.calculate-btn {
    width: 100%;
    padding: 0.8rem;
    border: none;
    border-radius: 8px;
    background-color: var(--primary-color);
    color: #fff;
    cursor: pointer;
}

/* 8. PORTFOLIO TRACKER */
.portfolio-list {
    margin-top: 2rem;
}

.asset-item {
    display: flex;
    justify-content: space-between;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-color);
}

.remove-btn {
    background: none;
    border: none;
    color: var(--error-color);
    cursor: pointer;
}

/* 18. FOOTER */
footer {
    text-align: center;
    padding: 2rem;
    border-top: 1px solid var(--border-color);
}

.social-links a {
    color: var(--text-secondary);
    margin: 0 0.5rem;
    font-size: 1.2rem;
}

/* 19. RESPONSIVE DESIGN */
@media (max-width: 768px) {
    .nav-links {
        display: none; /* Simple responsive solution for now */
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .chart-controls {
        flex-direction: column;
    }
}

.error-message {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: var(--error-color);
    color: white;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 2000;
}