/* Custom styles to supplement Tailwind */

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #f3f4f6;
}

::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Card Hover Effects - Handled by Tailwind classes in JS */
.strategy-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: #ffffff;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.5s ease-out forwards;
}

/* Blob Animation for Hero */
@keyframes blob {
    0% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
}

.animate-blob {
    animation: blob 7s infinite;
}

.animation-delay-2000 {
    animation-delay: 2s;
}

.animation-delay-4000 {
    animation-delay: 4s;
}

/* Chart Container Responsiveness */
canvas {
    max-width: 100%;
}

/* Glassmorphism utilities */
.glass {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Grid Layout for Monthly Returns */
.monthly-grid {
    display: grid;
    grid-template-columns: repeat(13, minmax(0, 1fr));
    gap: 2px;
}

.h5-adapt {
    overflow-x: hidden;
}

@media (max-width: 768px) {
    .h5-adapt nav [class*="max-w-"] {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .h5-adapt nav .h-16 {
        height: auto !important;
        min-height: 4rem;
    }

    .h5-adapt .rounded-3xl {
        border-radius: 1rem !important;
    }

    .h5-adapt .p-10 {
        padding: 1.25rem !important;
    }

    .h5-adapt .p-8 {
        padding: 1rem !important;
    }

    .h5-adapt .py-12 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .h5-adapt .py-10 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .h5-adapt .text-6xl {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }

    .h5-adapt .text-5xl {
        font-size: 1.875rem !important;
        line-height: 1.2 !important;
    }

    .h5-adapt .text-4xl {
        font-size: 1.75rem !important;
    }

    .h5-adapt .text-3xl {
        font-size: 1.5rem !important;
    }

    .h5-adapt .text-2xl {
        font-size: 1.25rem !important;
    }

    .h5-adapt .text-xl {
        font-size: 1.125rem !important;
    }

    .h5-adapt .w-64 {
        width: 100% !important;
    }

    .h5-adapt .w-48,
    .h5-adapt .w-40 {
        width: 8.5rem !important;
        height: 8.5rem !important;
    }

    .page-index #strategy-grid,
    .page-market #market-grid {
        grid-template-columns: 1fr !important;
    }

    .page-index nav .space-x-6 {
        column-gap: 0.5rem !important;
    }

    .page-index #contact-btn {
        white-space: nowrap;
        font-size: 0.8125rem;
        line-height: 1;
        display: inline-flex;
        align-items: center;
    }

    .page-index #contact-popup {
        width: 240px !important;
        position: fixed !important;
        top: 68px !important;
        right: 8px !important;
        left: auto !important;
        padding: 0.875rem !important;
        margin-top: 0 !important;
        z-index: 60 !important;
        border-radius: 14px !important;
    }

    .page-index #contact-popup p,
    .page-index #contact-popup * {
        writing-mode: horizontal-tb;
        text-orientation: mixed;
    }

    .page-index #contact-popup .w-40 {
        width: 9rem !important;
        height: 9rem !important;
    }

    .page-index #contact-popup .absolute.-top-2 {
        display: none;
    }

    .page-index .nav-desktop-icon {
        display: none !important;
    }

    .page-market .flex.justify-between.items-center.mb-8 {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }

    .page-market input[type="text"] {
        width: 100% !important;
    }

    .page-cart .top-24,
    .page-cart .sticky,
    .page-member .sticky,
    .page-orders .sticky,
    .page-payment .sticky {
        position: static !important;
    }

    .page-detail [class*="h-[calc(100vh-64px)]"] {
        height: auto !important;
        overflow: visible !important;
    }

    .page-detail [class*="h-[50%]"] {
        height: auto !important;
    }

    .page-detail [class*="overflow-hidden"] {
        overflow: visible !important;
    }

    .page-detail #content-positions,
    .page-detail #content-orders {
        overflow-x: auto !important;
    }

    .page-detail table {
        min-width: 420px;
    }

    .page-detail #model-chat-container {
        max-height: 40vh;
    }

    .page-detail .detail-metrics-wrap {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem;
    }

    .page-detail .detail-metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.75rem !important;
        margin-bottom: 0 !important;
    }

    .page-detail .detail-metrics-grid > div {
        margin-top: 0 !important;
        min-width: 0;
    }

    .page-detail #detail-revenue,
    .page-detail #strategy-deposit,
    .page-detail #strategy-withdrawal,
    .page-detail #stat-roi,
    .page-detail #stat-winrate,
    .page-detail #stat-drawdown {
        font-size: 1.05rem !important;
        line-height: 1.25 !important;
        white-space: normal !important;
        word-break: break-word;
    }

    .page-detail #detail-revenue span,
    .page-detail #strategy-deposit span,
    .page-detail #strategy-withdrawal span {
        display: inline-block;
        margin-left: 0.25rem;
    }

    .page-detail #btn-follow {
        width: 100%;
        justify-content: center;
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }

    .page-cart #summary-total {
        font-size: 1.25rem !important;
        word-break: break-word;
        line-height: 1.2;
    }

    .page-auth .max-w-md {
        max-width: 100% !important;
    }

    .page-purchase .md\:flex {
        display: block !important;
    }
}