body {
    padding-top: 70px;
}

/* DEFAULT LIGHT THEME */
:root {
    --bg-color: #f5f7fb;
    --card-bg: #ffffff;
    --text-color: #212529;
}

/* HEADER COLORS (LIGHT MODE) */
:root {
    --header-coins-bg: #eef2ff;
    --header-coins-text: #3730a3;

    --header-trade-bg: linear-gradient(135deg, #2563eb, #3b82f6);
    --header-trade-text: #ffffff;

    --header-deposit-bg: linear-gradient(135deg, #059669, #10b981);
    --header-deposit-text: #ffffff;

    --header-recent-bg: #fff7ed;
    --header-recent-text: #b45309;

    --header-contact-bg: #f1f5f9;
    --header-contact-text: #334155;
}

/* DARK THEME */
[data-theme="dark"] {
    --bg-color: #0f172a;
    --card-bg: #1e293b;
    --text-color: #e2e8f0;

    /* HEADER COLORS (DARK MODE) */
    --header-coins-bg: rgba(99, 102, 241, 0.15);
    --header-coins-text: #c7d2fe;

    --header-trade-bg: linear-gradient(135deg, #1d4ed8, #2563eb);
    --header-trade-text: #ffffff;

    --header-deposit-bg: linear-gradient(135deg, #047857, #10b981);
    --header-deposit-text: #ffffff;

    --header-recent-bg: rgba(245, 158, 11, 0.15);
    --header-recent-text: #fcd34d;

    --header-contact-bg: rgba(148, 163, 184, 0.12);
    --header-contact-text: #cbd5f5;
}

/* APPLY GLOBAL */
body {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Cards */
.card {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
    transition: 0.3s;
}


/*DARK MODE FIXES (BOOTSTRAP OVERRIDE)*/
[data-theme="dark"] .card {
    background-color: #1e293b !important;
    border: 1px solid #334155;
}

[data-theme="dark"] .table {
    color: #e2e8f0;
}

[data-theme="dark"] .table thead {
    background-color: #1e293b;
}

[data-theme="dark"] .table tbody tr {
    border-color: #334155;
}

[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: #334155;
}

/* Inputs */
[data-theme="dark"] .form-control {
    background-color: #0f172a;
    border: 1px solid #334155;
    color: #e2e8f0;
}

[data-theme="dark"] .form-control:focus {
    background-color: #0f172a;
    color: #e2e8f0;
    border-color: #0d6efd;
}

/* Buttons (secondary fix) */
[data-theme="dark"] .btn-outline-secondary {
    color: #e2e8f0;
    border-color: #475569;
}

[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: #334155;
}

/* Small UI elements */
[data-theme="dark"] .bg-light {
    background-color: #1e293b !important;
}

/* Text muted fix */
[data-theme="dark"] .text-muted {
    color: #94a3b8 !important;
}

/* =========================
   TABLE FULL DARK FIX
========================= */

[data-theme="dark"] .table {
    background-color: transparent !important;
}

[data-theme="dark"] .table td,
[data-theme="dark"] .table th {
    background-color: transparent !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] .table thead th {
    border-bottom: 1px solid #334155;
}

[data-theme="dark"] .table tbody tr {
    border-top: 1px solid #334155;
}

[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: #1e293b !important;
}

/*STATS CARDS*/
.stats-card {
    transition: all 0.2s ease;
    border-radius: 12px;
}

.stats-card:hover {
    transform: translateY(-3px);
}

/* Better card depth */
.card {
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

/* Hover elevation */
.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

/* Navbar polish */
.navbar {
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Section spacing improvement */
.card-header {
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* Table polish */
.table td,
.table th {
    vertical-align: middle;
}

/* Row hover smoother */
.table-hover tbody tr {
    transition: background-color 0.2s ease;
}

/* Buttons refinement */
.btn {
    border-radius: 8px;
    transition: all 0.2s ease;
}

/* Inputs refinement */
.form-control {
    border-radius: 8px;
}

/* Recent trades spacing */
.card-body .d-flex {
    padding: 4px 0;
}

/* Subtle separators */
.card-body hr {
    border-color: rgba(255, 255, 255, 0.08);
}

/*DARK MODE SHADOW FIX*/
[data-theme="dark"] .card {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}

/*COLORED CARD HEADERS*/

.card-header {
    border-bottom: none;
}

/* Trade (blue) */
.card.border-info .card-header {
    background: linear-gradient(135deg, #0d6efd, #2563eb);
    color: white;
}

/*COLORED HEADERS (SAFE)*/

.card-header {
    border-bottom: none;
}

/*DYNAMIC HEADER SYSTEM*/

.card-header-coins {
    background: var(--header-coins-bg);
    color: var(--header-coins-text);
}

.card-header-trade {
    background: var(--header-trade-bg);
    color: var(--header-trade-text);
}

.card-header-deposit {
    background: var(--header-deposit-bg);
    color: var(--header-deposit-text);
}

.card-header-recent {
    background: var(--header-recent-bg);
    color: var(--header-recent-text);
}

.card-header-contact {
    background: var(--header-contact-bg);
    color: var(--header-contact-text);
}

/*ENSURE HEADER COLORS WIN*/
[data-theme="dark"] .card-header-coins,
[data-theme="dark"] .card-header-trade,
[data-theme="dark"] .card-header-deposit,
[data-theme="dark"] .card-header-recent,
[data-theme="dark"] .card-header-contact {
    color: inherit;
}

/*MICRO INTERACTIONS (SAFE)*/

/* Buttons feel clickable */
.btn {
    transition: all 0.15s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: scale(0.97);
}

/* Inputs focus glow */
.form-control:focus {
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
}

/* Table row interaction */
.table-hover tbody tr {
    transition: all 0.15s ease;
}

.table-hover tbody tr:hover {
    transform: scale(1.01);
}

/* Card smooth feel */
.card {
    transition: all 0.2s ease;
}

/* Small hover feedback */
.card:hover {
    transform: translateY(-2px);
}

/*COINS TABLE (PRO MINIMAL)*/
.table td {
    padding-top: 12px;
    padding-bottom: 12px;
}

/* Price emphasis */
.table td.text-end.fw-semibold {
    letter-spacing: 0.3px;
}

/* Softer header */
.table thead th {
    font-weight: 500;
    opacity: 0.7;
}

/*COINS TABLE INTERACTION*/

/* Row hover (clean, not aggressive) */
.table-hover tbody tr {
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.1s ease;
}

/* Light mode */
:root .table-hover tbody tr:hover {
    background-color: #f1f5f9;
}

/* Dark mode */
[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: #1e293b;
}

/* Slight click feel */
.table-hover tbody tr:active {
    transform: scale(0.99);
}

/* Improve clickable feeling */
.table-hover tbody tr td {
    user-select: none;
}

/*TREND INDICATORS*/
.text-success {
    font-weight: 600;
}

.text-danger {
    font-weight: 600;
}

/* FORCE COLORS IN DARK MODE (FIX) */
[data-theme="dark"] .text-success {
    color: #22c55e !important; /* bright green */
}

[data-theme="dark"] .text-danger {
    color: #ef4444 !important; /* bright red */
}

/*CARD HEADER SPACING FIX*/
.card-header {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

/*INPUT GROUP POLISH*/
.input-group-text {
    background-color: transparent;
    border-left: none;
}

/* Dark mode */
[data-theme="dark"] .input-group-text {
    color: #94a3b8;
    border-color: #334155;
}

/*HERO PRO ANIMATION*/

.hero-section {
    position: relative;
    overflow: hidden;
}

/* Subtle floating effect */
.hero-section::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.08), transparent 70%);
    animation: heroFloat 12s linear infinite;
}

@keyframes heroFloat {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Balance highlight */
.hero-balance {
    transition: all 0.3s ease;
}

.hero-balance:hover {
    transform: scale(1.05);
}

/* Text glow (subtle) */
[data-theme="dark"] .hero-section {
    box-shadow: 0 0 40px rgba(59, 130, 246, 0.15);
}

/* SOFT SECTION CARD (VISIBLE BUT CLEAN) */
.soft-card {
    background: #f1f5ff; /* soft blue */
    border: 1px solid #dbe4ff;
}

/* DARK MODE VERSION */
[data-theme="dark"] .soft-card {
    background: #16213a; /* slightly lighter than bg */
    border: 1px solid #2a3a5a;
}

/* PRO COINS TABLE* /

/* Compact spacing */
.coins-table td,
.coins-table th {
    padding: 10px 8px;
    font-size: 0.9rem;
}

/* Row hover (pro feel) */
.coin-row {
    cursor: pointer;
    transition: all 0.2s ease;
}

.coin-row:hover {
    transform: scale(1.01);
    background: rgba(13, 110, 253, 0.06);
}

/* Dark mode hover */
[data-theme="dark"] .coin-row:hover {
    background: rgba(255, 255, 255, 0.04);
}

/* Coin dot (fake icon for now) */
.coin-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0d6efd, #6610f2);
}

/* Price pulse animation */
.price-cell {
    position: relative;
}

.price-up {
    animation: pulseGreen 0.6s ease;
}

.price-down {
    animation: pulseRed 0.6s ease;
}

@keyframes pulseGreen {
    0% {
        background: rgba(25, 135, 84, 0.3);
    }
    100% {
        background: transparent;
    }
}

@keyframes pulseRed {
    0% {
        background: rgba(220, 53, 69, 0.3);
    }
    100% {
        background: transparent;
    }
}

.coin-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0d6efd, #6610f2);
}

/* hide dot if icon loads */
.coin-icon:not([src=""]) + .coin-dot {
    display: none;
}

/* COIN BADGE (PRO FALLBACK ICON) */
.coin-badge {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0d6efd, #6610f2);
    color: white;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

#activityTicker {
    transition: opacity 0.3s ease;
    min-height: 40px;
}

/*FOOTER PRO UI*/

.footer {
    position: relative;
    background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.05) 100%
    ), var(--card-bg);

    border-top: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(6px);
}

/* Top glow line */
.footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 10%;
    width: 80%;
    height: 1px;
    background: linear-gradient(
            90deg,
            transparent,
            rgba(13, 110, 253, 0.5),
            transparent
    );
}

/* Titles */
.footer-title {
    font-weight: 600;
    margin-bottom: 10px;
}

/* Links */
.footer-links li {
    margin-bottom: 6px;
}

.footer-links a {
    color: var(--text-color);
    text-decoration: none;
    opacity: 0.8;
    transition: 0.2s;
}

.footer-links a:hover {
    opacity: 1;
    transform: translateX(3px);
}

/* Live counter */
.live-counter {
    font-weight: 600;
    font-size: 1rem;
}

/* Newsletter */
.newsletter-box input {
    min-width: 220px;
    max-width: 260px;
}

/* Social */
.footer-social a {
    margin: 0 8px;
    font-size: 1.2rem;
    opacity: 0.7;
    transition: 0.2s;
}

.footer-social a:hover {
    opacity: 1;
    transform: translateY(-2px);
}

[data-theme="dark"] .footer {
    background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.02) 0%,
            rgba(0, 0, 0, 0.6) 100%
    ), var(--card-bg);
}

/*NEWSLETTER CTA*/

.newsletter-wrapper {
    padding: 12px 0;
}

/* Input */
.newsletter-input {
    min-width: 240px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.newsletter-input:focus {
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
    border-color: #0d6efd;
}

/* Button */
.newsletter-btn {
    border-radius: 8px;
    padding: 8px 16px;
    transition: all 0.2s ease;
}

.newsletter-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(13, 110, 253, 0.35);
}

/* Subtle glow container */
.newsletter-wrapper {
    position: relative;
}

.newsletter-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: radial-gradient(
            circle at center,
            rgba(13, 110, 253, 0.08),
            transparent 70%
    );
    pointer-events: none;
}

/*FOOTER LOGO (WIDE BRAND)*/

.footer-logo {
    height: 165px;
    width: auto;
    object-fit: contain;
    display: block;
}

/* Better spacing under logo */
.footer .col-lg-4 {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Mobile */
@media (max-width: 768px) {
    .footer-logo {
        height: 50px;
    }
}

/*COINS TABLE SCROLL (PRO)*/

.coins-scroll {
    max-height: 420px; /* ~10 rows */
    overflow-y: auto;
}

/* Smooth scrollbar */
.coins-scroll::-webkit-scrollbar {
    width: 6px;
}

.coins-scroll::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.4);
    border-radius: 6px;
}

/* Dark mode scrollbar */
[data-theme="dark"] .coins-scroll::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.4);
}

/* ACTIVITY (purple vibe) */
.card-header-activity {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #fff;
}

/* TOP MOVERS (orange/gold trading feel) */
.card-header-movers {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    color: #1f2937;
}

/* ACTIVITY BOX HEIGHT CONTROL */
.activity-box {
    min-height: 110px; /* ~5 rows height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.4;
}

.trade-row {
    padding: 6px 0;
}

.mover-row {
    padding: 5px 0;
}

[data-theme="dark"] .coin-row {
    border-bottom: 1px solid #334155 !important;
}

/* FLOATING TRADE BUTTON */
.floating-trade-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;

    background: linear-gradient(135deg, #0d6efd, #2563eb);
    color: #fff;

    padding: 12px 18px;
    border-radius: 999px;

    font-weight: 600;
    font-size: 14px;

    text-decoration: none;
    box-shadow: 0 8px 25px rgba(13, 110, 253, 0.4);

    z-index: 9999;
    transition: all 0.2s ease;
}

/* Hover */
.floating-trade-btn:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 12px 35px rgba(13, 110, 253, 0.6);
}

/* Active click */
.floating-trade-btn:active {
    transform: scale(0.95);
}

/* MOBILE POSITION */
@media (max-width: 768px) {
    .floating-trade-btn {
        right: 50%;
        transform: translateX(50%);
        bottom: 15px;
    }
}

/* TRADE MODAL */
.trade-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);

    display: none;
    align-items: center;
    justify-content: center;

    z-index: 10000;
}

.trade-modal-content {
    width: 360px;
    max-width: 90%;

    background: var(--card-bg);
    color: var(--text-color);

    padding: 20px;
    border-radius: 12px;

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

/* BACKGROUND VIDEO (BASE) */

.bg-video-wrapper {
    position: fixed;
    inset: 0;
    z-index: -1; /* FIX: was -1 */
    overflow: hidden;
    pointer-events: none;
}

/* Ensure content stays above background */
body {
    position: relative;
    z-index: 1;
}

/* Video base */
.bg-video {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Desktop visible */
.desktop-video {
    display: block;
}

/* Overlay (we will tune later) */
.bg-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 15, 30, 0.6);
}

/* MOBILE SWITCH */
@media (max-width: 768px) {
    .desktop-video {
        display: none;
    }
}

/* MOBILE BACKGROUND IMAGE */

.bg-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Hide by default */
.mobile-bg {
    display: none;
}

/* MOBILE SWITCH */
@media (max-width: 768px) {

    .desktop-video {
        display: none;
    }

    .mobile-bg {
        display: block;
    }
}

/* MOBILE BACKGROUND IMAGE FIX */
.bg-mobile-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Ensure visibility */
.mobile-bg {
    display: none;
}

/* MOBILE DETECTION (REAL DEVICES) */
@media (hover: none) and (pointer: coarse) {

    .mobile-bg {
        display: block !important;
    }

    .desktop-video {
        display: none !important;
    }
}

/* FALLBACK (SMALL SCREENS) */
@media (max-width: 768px) {

    .mobile-bg {
        display: block !important;
    }

    .desktop-video {
        display: none !important;
    }
}