/* Mobile fixes for black box overlay issues */

/* Force background to be fixed */
@media (max-width: 767px) {
    body {
        background: linear-gradient(to bottom, #121212, #1a1a2e) !important;
        background-attachment: fixed !important;
    }

    /* Fix z-index for all content */
    .container, .container-fluid, .row, .col, 
    main, .card, .card-body, .card-title, 
    .card-text, h1, h2, h3, h4, h5, h6, p {
        position: relative;
        z-index: 100 !important;
    }

    /* Hide problematic background elements */
    #celestial-background, canvas, .overlay {
        z-index: -10 !important;
        opacity: 0.6 !important;
    }

    /* Ensure buttons and links are clickable */
    .btn, button, a {
        position: relative;
        z-index: 200 !important;
    }

    /* Fix card-specific display issues */
    .card-info, .card-detail, .tab-content, .tab-pane {
        position: relative;
        z-index: 500 !important;
        background-color: rgba(33, 37, 41, 0.95) !important;
    }

    /* Force dark background for card content areas */
    .symbolic-elements, #card-meaning, #symbolic-elements, #practice-application {
        position: relative;
        z-index: 200 !important;
        background-color: rgba(33, 37, 41, 0.98) !important;
    }
    
    /* Fix button overlap in explore cards section */
    .mt-auto.d-flex.flex-wrap.gap-2 {
        display: flex;
        flex-direction: column;
        gap: 5px !important;
        margin-bottom: 15px;
    }
    
    .mt-auto.d-flex.flex-wrap.gap-2 .btn {
        margin-bottom: 8px;
        width: 100%;
    }
    
    /* Fix purple box overlap issue */
    .homepage-card {
        position: relative;
        z-index: 1000 !important;
        background-color: transparent !important;
    }
    
    /* Make sure today's card is visible */
    .homepage-card .yoga-card,
    .homepage-card .yoga-card-inner,
    .homepage-card .yoga-card-front,
    .homepage-card .yoga-card-back {
        background-color: rgba(25, 25, 35, 0.85) !important;
        overflow: visible !important;
        z-index: 1500 !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
        border-radius: 15px !important;
    }
    
    /* Daily card image should be clearly visible */
    .homepage-card .card-image-container {
        background-color: rgba(30, 30, 45, 0.7) !important;
    }
    
    .homepage-card .card-image {
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Move content upward to prevent overlap */
    .card-description, .card-title, .card-body {
        position: relative;
        top: -15px;
        z-index: 1000 !important;
    }
    
    /* Hide the purple box overlay */
    .card > .bg-dark, .card-body > .bg-dark, .card-body > div > .bg-dark {
        background-color: transparent !important;
    }
    
    /* Aggressively remove ANY purple element */
    div[style*="background-color"],
    div[style*="background"],
    div[style*="bg-"],
    div[style*="purple"],
    div[style*="rgb(102, 0, 102)"],
    div[style*="#660066"],
    div[style*="660066"],
    .daily-card-container .card-body div[style*="background-color"],
    div[style*="background-color: rgb(102, 0, 102)"],
    div[style*="background-color:rgb(102,0,102)"],
    div[style*="background-color: #660066"],
    div[style*="background-color:#660066"] {
        background-color: transparent !important;
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        z-index: -9999 !important;
        top: -9999px !important;
        left: -9999px !important;
    }
    
    /* Make sure to target any element with inline style containing purple */
    [style*="purple"] {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Fix positioning for the flipped/revealed card */
    #card-container .yoga-card.flip,
    .homepage-card .yoga-card.flip,
    .reading-container .yoga-card.flip {
        position: relative;
        top: 0 !important;
        margin-bottom: 0 !important;
        transform: none !important;
        transform-origin: center center !important;
    }
    
    #card-container .yoga-card,
    .homepage-card .yoga-card,
    .reading-container .yoga-card {
        height: var(--card-height-mobile) !important;
        width: var(--card-width-mobile) !important;
        transform-origin: center center !important;
        position: relative !important;
        overflow: visible !important;
        transform-style: preserve-3d !important;
    }
    
    #card-container .yoga-card .yoga-card-inner,
    .homepage-card .yoga-card .yoga-card-inner,
    .reading-container .yoga-card .yoga-card-inner {
        position: absolute !important;
        height: 100% !important;
        width: 100% !important;
        top: 0 !important;
        left: 0 !important;
        transform-style: preserve-3d !important;
    }
    
    #card-container .yoga-card-front,
    .homepage-card .yoga-card-front,
    .reading-container .yoga-card-front,
    #card-container .yoga-card-back,
    .homepage-card .yoga-card-back,
    .reading-container .yoga-card-back {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        height: 100% !important;
        width: 100% !important;
        backface-visibility: hidden !important;
    }

    /* NFT section mobile styling */
    .nft-offer-section {
        z-index: 200 !important;
    }

    .nft-tier-options {
        flex-direction: column;
    }
    
    /* Sanskrit name styling */
    .sanskrit-name {
        font-style: italic;
        color: #d4d4ff;
        margin-bottom: 5px;
        font-size: 0.85rem;
    }
    
    .sanskrit-translation {
        font-size: 0.8rem;
        color: #a0a0c0;
        margin-bottom: 8px;
    }
}

    .nft-tier-card {
        margin-bottom: 10px;
    }
    
    /* Black box fix for reading cards */
    .yoga-card, .yoga-card-inner, .yoga-card-front, .yoga-card-back {
        position: relative;
        z-index: 300 !important;
    }
    
    /* Fix for card details page */
    .card-detail-image {
        position: relative;
        z-index: 50 !important;
    }
    
    /* Fix for the specific black box issue on card pages */
    .card-title {
        background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2)) !important;
        z-index: 1000 !important;
    }
    
    /* Special styling for homepage card title */
    .homepage-card .card-title {
        background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1)) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
    }
    
    /* Fix the Heart Opener card description black box issue */
    .card-description, 
    div[data-card-title="The Heart Opener"] .card-title,
    div[data-card-energy="Asana"] .card-title {
        background-color: rgba(0, 0, 0, 0.95) !important;
        z-index: 5000 !important;
        position: relative;
        color: #fff !important;
    }
    
    /* Fix for card tabs */
    .nav-tabs, .nav-link {
        position: relative;
        z-index: 100 !important;
        background-color: rgba(33, 37, 41, 0.8) !important;
    }
    
    /* Fix for any black box absolute positioning overlay */
    .black-box-overlay {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    /* Fix for the black box overlay on the index page */
    .card-reading-preview {
        position: relative;
        z-index: 9999 !important;
        background-color: transparent !important;
    }
    
    /* Disable any problematic animations that might cause black boxes */
    .card-reading-preview p,
    .card-reading-preview * {
        background-color: transparent !important;
        color: white !important;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    }
    
    /* Force normal card title display */
    .yoga-card-front .card-title {
        min-height: 45% !important;
        z-index: 9999 !important;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1)) !important;
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
    }
}