/* ===== MOBILE-FRIENDLY STYLES ===== */

/* Hide desktop-only elements on mobile */
@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }
}

/* Tablet (768px and below) */
@media (max-width: 768px) {
    /* Sidebar transforms into bottom navigation */
    .sidebar {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: auto;
        padding: 8px 16px;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        border-right: none;
        border-top: 1px solid var(--border);
        z-index: 1000;
        background: var(--card-bg);
        box-shadow: 0 -4px 10px rgba(0,0,0,0.05);
    }

    .sidebar .logo {
        display: none; /* Hide logo on mobile */
    }

    .sidebar .nav-menu {
        display: flex;
        flex-direction: row;
        gap: 4px;
        margin: 0;
        padding: 0;
        flex: 1;
        list-style: none;
    }

    .sidebar .nav-menu li {
        flex: 1;
        margin: 0;
    }

    .sidebar .nav-menu a {
        flex-direction: column;
        padding: 8px 4px;
        font-size: 11px;
        gap: 4px;
        border-radius: 8px;
    }

    .sidebar .nav-menu a i {
        font-size: 20px;
        width: auto;
        margin: 0;
    }

    .sidebar .nav-menu a span {
        display: block !important;
        font-size: 10px;
        white-space: nowrap;
    }

    /* Hide user profile and daily limit on mobile (optional – you can keep them if you want) */
    .sidebar .user-profile-wrapper {
        display: none;
    }

    /* Adjust main content to make room for bottom nav */
    .main-content {
        margin-left: 0;
        padding: 16px 16px 80px; /* bottom padding for nav */
    }

    /* Header adjustments */
    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .header-right {
        width: 100%;
        justify-content: space-between;
    }

    .header-left h1 {
        font-size: 24px;
    }

    /* Portfolio overview */
    .portfolio-overview {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .total-balance-card {
        padding: 24px;
    }

    .balance-amount {
        font-size: 36px;
    }

    .quick-stats {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .stat-card {
        padding: 16px;
    }

    .stat-value {
        font-size: 20px;
    }

    /* Market summary grid */
    .summary-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .summary-card {
        padding: 12px;
    }

    .summary-card-header img {
        width: 28px;
        height: 28px;
    }

    .summary-price {
        font-size: 16px;
    }

    /* Holdings table → cards */
    .holdings-header {
        display: none;
    }

    .holding-row {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 16px;
        border: 1px solid var(--border);
        border-radius: 16px;
        margin-bottom: 12px;
        background: var(--card-bg);
    }

    .holding-row .asset-info {
    width: 100%;
    justify-content: flex-start; /* keeps icon & name together on the left */
    }

    .holding-row .holdings-amount,
    .holding-row .holdings-value,
    .holding-row .price-change {
        text-align: left;
        width: 100%;
        padding-left: 52px; /* align with icon */
        font-size: 14px;
    }

    .holding-row .send-btn-modern {
        width: 100%;
        margin-top: 5px;
    }

    /* Bottom sections */
    .bottom-sections {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .quick-actions-card,
    .recent-activity-card {
        padding: 16px;
    }

    .action-buttons {
        gap: 10px;
    }

    .action-btn-modern {
        padding: 16px 8px;
    }

    .action-btn-modern i {
        font-size: 24px;
    }

    .action-btn-modern span {
        font-size: 13px;
    }

    /* Activity list */
    .activity-item {
        padding: 10px;
        gap: 10px;
    }

    .send-icon, .receive-icon {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .activity-amount {
        min-width: 70px;
        font-size: 12px;
    }

    /* Popups */
    .popup-container {
        max-width: 95% !important;
        margin: 0 10px;
    }

    .popup-header {
        padding: 15px 20px;
    }

    .popup-header h2 {
        font-size: 20px;
    }

    .popup-body {
        padding: 20px;
    }

    .popup-footer {
        padding: 15px 20px;
    }

    .popup-balance-info {
        padding: 10px 15px;
        font-size: 13px;
    }

    .popup-select, .popup-input {
        padding: 12px 14px;
        font-size: 14px;
    }

    .popup-max {
        padding: 4px 10px;
        font-size: 11px;
        right: 10px;
        bottom: 10px;
    }

    /* Daily limit display (if shown in main content, but we hide it in sidebar) */
    .daily-limit {
        font-size: 11px;
        padding: 8px;
    }
}

/* Small phones (480px and below) */
@media (max-width: 480px) {
    .summary-grid {
        grid-template-columns: 1fr;
    }

    .quick-stats {
        grid-template-columns: 1fr;
    }

    .header-left h1 {
        font-size: 20px;
    }

    .balance-amount {
        font-size: 28px;
    }

    .stat-value {
        font-size: 18px;
    }

    .action-btn-modern {
        padding: 12px 6px;
    }

    .action-btn-modern i {
        font-size: 22px;
    }

    .action-btn-modern span {
        font-size: 12px;
    }

    .activity-item {
        flex-wrap: wrap;
    }

    .activity-amount {
        width: 100%;
        text-align: left;
        padding-left: 52px;
        min-width: auto;
    }

    .sidebar .nav-menu a {
        padding: 6px 2px;
        font-size: 10px;
    }

    .sidebar .nav-menu a i {
        font-size: 18px;
    }

    .sidebar .nav-menu a span {
        font-size: 9px;
    }
}


/* When sidebar is hidden (if using toggle) */
.sidebar-hidden .sidebar {
    transform: translateY(100%);
}

.sidebar-visible .sidebar {
    transform: translateY(0);
}

/* For alternative: sidebar slides up from bottom */
.sidebar {
    transition: transform 0.3s ease;
}

/* ===== LANDING PAGE MOBILE STYLES ===== */
@media (max-width: 768px) {
    .landing-page .navbar {
        flex-direction: column;
        padding: 16px 24px;
        gap: 12px;
    }

    .landing-page .nav-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    .landing-page .nav-links a {
        padding: 8px 16px;
        font-size: 14px;
    }

    .landing-page .login-btn,
    .landing-page .signup-btn {
        padding: 8px 20px;
        font-size: 14px;
    }

    .landing-page .hero {
        grid-template-columns: 1fr;
        padding: 0 24px;
        margin: 40px auto;
        gap: 40px;
        text-align: center;
    }

    .landing-page .hero-content h1 {
        font-size: 40px;
    }

    .landing-page .hero-content p {
        font-size: 16px;
    }

    .landing-page .hero-stats {
        justify-content: center;
        gap: 30px;
        flex-wrap: wrap;
    }

    .landing-page .hero-card {
        padding: 24px;
    }

    .price-ticker .ticker-info img {
        width: 28px;
        height: 28px;
    }

    .price-ticker .ticker-info div {
        font-size: 14px;
    }

    .ticker-price {
        font-size: 15px;
    }

    .ticker-change {
        font-size: 13px;
    }

    .landing-page .features-section {
        padding: 60px 24px;
    }

    .landing-page .section-header h2 {
        font-size: 30px;
    }

    .landing-page .section-header p {
        font-size: 16px;
    }

    .landing-page .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .landing-page .feature-card {
        padding: 24px;
    }

    .landing-page .feature-icon {
        width: 56px;
        height: 56px;
        border-radius: 16px;
    }

    .landing-page .feature-icon i {
        font-size: 28px;
    }

    .landing-page .feature-card h3 {
        font-size: 18px;
    }

    .landing-page .feature-card p {
        font-size: 14px;
    }

    .landing-page .supported-section {
        padding: 60px 24px;
    }

    .landing-page .crypto-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .landing-page .crypto-card {
        padding: 20px;
    }

    .landing-page .crypto-card img {
        width: 48px;
        height: 48px;
    }

    .landing-page .crypto-card h4 {
        font-size: 16px;
    }

    .landing-page .crypto-card p {
        font-size: 12px;
    }

    .landing-page .cta-section {
        padding: 70px 24px;
    }

    .landing-page .cta-content h2 {
        font-size: 32px;
    }

    .landing-page .cta-content p {
        font-size: 16px;
    }

    .landing-page .cta-button {
        padding: 16px 40px;
        font-size: 16px;
    }

    .landing-page .footer {
        padding: 40px 24px 20px;
    }

    .landing-page .footer-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .landing-page .footer-about {
        text-align: center;
    }

    .landing-page .footer-logo {
        justify-content: center;
        font-size: 22px;
    }

    .landing-page .footer-links h4 {
        font-size: 16px;
        margin-bottom: 12px;
        text-align: center;
    }

    .landing-page .footer-links a {
        text-align: center;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .landing-page .hero-content h1 {
        font-size: 32px;
    }

    .landing-page .hero-stats {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .landing-page .features-grid {
        grid-template-columns: 1fr;
    }

    .landing-page .crypto-grid {
        grid-template-columns: 1fr;
    }

    .landing-page .footer-links a {
        font-size: 13px;
    }
}

/* ===== INFO PAGE MOBILE STYLES ===== */
@media (max-width: 768px) {
    .info-container {
        padding: 20px;
    }

    .section-title {
        font-size: 28px;
    }

    .section-subtitle {
        font-size: 16px;
    }

    /* Pricing grid – 2 columns on tablets */
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .pricing-card {
        padding: 20px;
    }

    .pricing-header h3 {
        font-size: 20px;
    }

    .price {
        font-size: 28px;
    }

    .btc-price {
        font-size: 12px;
    }

    .pricing-features li {
        font-size: 13px;
    }

    .pricing-btn {
        padding: 10px 20px;
        font-size: 14px;
    }

    /* FAQ section */
    .faq-grid {
        gap: 15px;
    }

    .faq-question h3 {
        font-size: 16px;
    }

    .faq-answer {
        font-size: 14px;
    }

    /* Support grid – 2 columns on tablets */
    .support-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .support-card {
        padding: 20px;
    }

    .support-card i {
        font-size: 36px;
    }

    .support-card h3 {
        font-size: 18px;
    }

    .support-card p {
        font-size: 13px;
    }

    .support-email {
        font-size: 13px;
    }

    /* Legal cards */
    .legal-card {
        padding: 20px;
    }

    .legal-card h3 {
        font-size: 18px;
    }

    .legal-card p {
        font-size: 14px;
    }

    .last-updated {
        font-size: 12px;
    }

        /* General notifications – price fetching, success, error, info */
    .notification {
        max-width: 90% !important;         /* fit screen width with margins */
        left: 16px !important;
        right: 16px !important;
        bottom: 20px !important;
        width: auto !important;
        font-size: 14px !important;        /* comfortable reading size */
        padding: 14px 20px !important;      /* bigger touch target */
        border-radius: 14px !important;     /* softer corners */
        box-shadow: 0 6px 16px rgba(0,0,0,0.15) !important;
        gap: 12px !important;
        line-height: 1.5 !important;
        white-space: normal !important;     /* allow text to wrap */
        word-break: break-word !important;
    }

    /* Optional: slightly larger icon for better visibility */
    .notification i {
        font-size: 20px !important;
        flex-shrink: 0;                     /* prevent icon from shrinking */
    }

        /* Improve top‑up warning on mobile */
    .topup-warning {
        white-space: normal !important;      /* allow wrapping */
        overflow: visible !important;
        text-overflow: clip !important;
        font-size: 14px;                     /* comfortable reading size */
        padding: 12px 18px;                   /* more touch-friendly padding */
        max-width: 90%;                        /* not too wide, with margins */
        left: 16px;                            /* center with equal margins */
        right: 16px;
        bottom: 20px;
        width: auto;
        gap: 10px;                             /* space between icon and text */
        line-height: 1.5;                       /* better line spacing for wrapped text */
        box-shadow: 0 4px 12px rgba(0,0,0,0.2); /* subtle shadow */
        border-radius: 12px;                    /* slightly rounder corners */
        text-align: left;                        /* align text properly */
    }

    /* Ensure the icon stays aligned */
    .topup-warning i {
        font-size: 18px;
        flex-shrink: 0;                          /* prevent icon shrinking */
        margin-top: 2px;                          /* fine-tune vertical alignment */
    }

}

@media (max-width: 480px) {
    /* Stack grids on small phones */
    .pricing-grid {
        grid-template-columns: 1fr;
    }

    .support-grid {
        grid-template-columns: 1fr;
    }

    .section-title {
        font-size: 24px;
    }

    .faq-question h3 {
        font-size: 15px;
    }
}