/* Ensure wallpaper grid is visible and responsive on desktop */
#wallpaper-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    width: 100%;
}

@media (min-width: 768px) {
    #wallpaper-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

@media (min-width: 1024px) {
    #wallpaper-grid {
        grid-template-columns: repeat(6, 1fr) !important;
    }
}
/* Always-visible, styled .actions buttons on cards */
.actions {
    position: absolute !important;
    bottom: 10px !important;
    right: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 99999 !important;
}

.actions button {
    display: flex !important;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: orange !important;
    color: white !important;
    align-items: center;
    justify-content: center;
    border: none;
}

/* Final card action button polish: no overlap + glass blur effect */
.actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: center !important;
}

.actions button {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25) !important;
}

.actions button:hover {
    transform: scale(1.08);
    background: rgba(255, 255, 255, 0.28) !important;
}

/* Prevent overlap: cancel old absolute positioning on card action buttons */
#wallpaper-grid .actions .download-btn,
#wallpaper-grid .actions .share-btn {
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
}

@media (max-width: 768px) {
    .actions {
        opacity: 1 !important;
    }
}
/* Card hover effect for actions fade-in */
.card img {
    display: block;
    width: 100%;
}

.card {
    position: relative;
}

#sticky-footer-ad {
    z-index: 1 !important;
}

.actions {
    opacity: 0;
    transition: 0.3s;
}

.card:hover .actions {
    opacity: 1;
}
/* Card and vertical action buttons with Font Awesome icons */
.card {
    position: relative;
    width: 150px;
    overflow: hidden; /* ok hai but position sahi honi chahiye */
}

.card img {
    width: 100%;
    border-radius: 12px;
    display: block;
}

.actions {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: flex;
    flex-direction: column; /* vertical stack */
    gap: 6px;
    z-index: 9999;
}

.actions button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 152, 0, 0.95);
    color: white;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.actions button:hover {
    transform: scale(1.1);
}
/* Card and action buttons for wallpaper grid */
.card {
    position: relative;
    width: 150px;
    margin: 10px;
    overflow: visible; /* hidden hoga to cut ho jayega */
}

.card img {
    width: 100%;
    border-radius: 12px;
    display: block;
    position: relative;
    z-index: 1;
}

.actions {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    gap: 8px;
    z-index: 9999; /* IMPORTANT */
}

.actions button {
    background: #ff9800;
    border: none;
    padding: 8px;
    border-radius: 50%;
    color: white;
    font-size: 16px;
    cursor: pointer;
}

#sticky-footer-ad {
    z-index: 1;
}
/* User-suggested fixes for download/share button visibility and stacking */
.download-btn, .share-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 10; /* IMPORTANT */
    background: #ff9800;
    color: white; /* ensure visible */
}

.card img {
    position: relative;
    z-index: 1;
}

.download-btn {
    position: absolute;
    z-index: 5; /* image se upar */
}

.download-btn i {
    color: black; /* test karne ke liye */
}

.card {
    overflow: visible; /* hidden hoga to cut ho jayega */
}
/* Super-strong patch: force emoji/text in .action-btn to always be visible */
.action-btn {
    font-size: 2rem !important;
    color: #fff !important;
    background: #FF8C00 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    box-shadow: none !important;
    text-indent: 0 !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 99999 !important;
}
.action-btn::before, .action-btn::after {
    content: none !important;
}
/* Force emoji/text inside .action-btn to always be visible */
.action-btn {
    font-size: 2rem !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #FF8C00 !important;
    border: none !important;
    box-shadow: none !important;
}
/* Force Font Awesome icons inside .action-btn to display correctly */
.action-btn i.fas {
    font-size: 2rem !important;
    color: #fff !important;
    display: inline-block !important;
    font-style: normal !important;
    font-weight: 900 !important;
    text-rendering: auto !important;
    line-height: 1 !important;
    background: none !important;
}
/* Remove blur/opacity from card action buttons and guarantee visibility */
.card .action-btn,
.card .action-btn * {
    filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: #FF8C00 !important;
    color: #fff !important;
    pointer-events: auto !important;
    box-shadow: 0 0 0 0 transparent !important;
}
:root{--primary:#FF8C00;--primary-dark:#CC7000;--accent:#8B0000;--bg-body:#FFFBF0;--text-dark:#2C1810;--text-muted:#6D4C41;--white:#FFFFFF;--glass-bg:rgba(255,255,255,.95);--shadow-soft:0 10px 30px rgba(0,0,0,.05);--shadow-hover:0 20px 40px rgba(255,140,0,.15)}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;padding:0;box-sizing:border-box;font-family:'Outfit',sans-serif;font-display:swap;background-color:var(--bg-body);color:var(--text-dark);line-height:1.6;overflow-x:hidden}h1,h2,h3,.serif-font{font-family:'Playfair Display',serif;font-display:swap}@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.animate{opacity:0;animation:fadeUp .8s cubic-bezier(.2,.8,.2,1) forwards}.delay-100{animation-delay:.1s}.delay-200{animation-delay:.2s}.delay-300{animation-delay:.3s}.navbar{position:relative;top:0;width:100%;padding:15px 0;z-index:1000;transition:.3s;background:#1a0f0a;border-bottom:2px solid rgba(255,215,0,.3);box-shadow:0 4px 20px rgba(0,0,0,.5)}.navbar.scrolled,.navbar.scanned{background:var(--white);box-shadow:0 4px 20px rgba(0,0,0,.05);padding:10px 0}.navbar.scanned{position:sticky;top:0}.nav-container{max-width:1200px;margin:0 auto;padding:0 20px;display:flex;justify-content:space-between;align-items:center}.logo{font-size:1.8rem;font-weight:700;color:var(--white);letter-spacing:1px;transition:color .3s}.navbar.scrolled .logo,.navbar.scanned .logo{color:var(--text-dark)}.logo span{color:var(--primary)}.hero{height:70vh;background:radial-gradient(circle at center,#2c1810 0,#000000 100%);display:flex;align-items:center;justify-content:center;position:relative;text-align:center;color:white;overflow:hidden}.chakra-container::before{content:'';position:absolute;width:100%;height:100%;border-radius:50%;border:2px dashed rgba(255,215,0,.3);box-shadow:0 0 60px rgba(255,140,0,.2);animation:rotateChakraReverse 30s linear infinite}.chakra-container::after{content:'';position:absolute;width:60%;height:60%;border-radius:50%;background:radial-gradient(circle,rgba(255,140,0,.2) 0,transparent 70%);animation:divinePulse 4s ease-in-out infinite;z-index:1}@keyframes rotateChakra{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes rotateChakraReverse{0%{transform:rotate(360deg)}100%{transform:rotate(0deg)}}@keyframes divinePulse{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.1);opacity:.8}}.hero-content{max-width:800px;padding:0 20px;position:relative;z-index:2}.hero h1{font-size:4.5rem;line-height:1.1;margin-bottom:20px;color:var(--white);text-shadow:0 2px 10px rgba(0,0,0,.3)}.hero p{font-size:1.2rem;color:rgba(255,255,255,.9);max-width:600px;margin:0 auto 40px;font-weight:400}.cta-btn{display:inline-block;padding:15px 40px;background:var(--primary);color:var(--white);text-decoration:none;font-weight:600;font-size:1rem;border-radius:50px;transition:.3s;border:2px solid var(--primary)}.cta-btn:hover{background:transparent;color:var(--primary);transform:translateY(-3px)}.scroll-indicator{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.6);animation:bounce 2s infinite}.container{max-width:1200px;margin:0 auto;padding:30px 20px}#collections .section-header{margin-bottom:50px!important;padding-bottom:0!important}.section-title{font-size:3rem;font-weight:700;margin:0 0 10px 0;color:var(--text-dark)}.section-label{display:block;color:var(--text-muted);font-size:1rem;font-weight:400;letter-spacing:1px;text-transform:uppercase}.section-label::after{display:none}.section-title{font-size:3.5rem;font-weight:400;margin:0;line-height:1.2;color:var(--text-dark)}.category-card{width:100%;flex:none;text-align:center;transition:.3s;cursor:pointer;padding:0;margin:0 auto;display:flex;flex-direction:column;align-items:center}.category-card .card-img-wrapper{width:100%;padding-top:150%;height:0;margin:0 auto;border-radius:12px;overflow:hidden;box-shadow:0 8px 25px rgba(0,0,0,.1);border:none;transition:.3s;position:relative;background:var(--white)}.category-card:hover .card-img-wrapper{transform:translateY(-5px);box-shadow:0 15px 35px rgba(0,0,0,.15)}.category-card img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;transition:.6s ease;display:block}.category-card:hover img{transform:scale(1.1)}.category-card h3{font-family:'Outfit',sans-serif;font-display:swap;font-size:1.1rem;font-weight:600;color:var(--text-dark);margin:0;transition:.3s}.category-card:hover h3{color:var(--primary)}#category-list,#wallpapers #wallpaper-grid,#wallpaper-grid{display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:15px;padding-bottom:50px;justify-content:center}@media(min-width:768px) and (max-width:1023px){#category-list,#wallpapers #wallpaper-grid,#wallpaper-grid{grid-template-columns:repeat(4,1fr)!important}}@media(min-width:1024px){#category-list,#wallpapers #wallpaper-grid,#wallpaper-grid{grid-template-columns:repeat(6,1fr)!important}}.card{position:relative;border-radius:12px;overflow:hidden;background:white;box-shadow:var(--shadow-soft);transition:.2s;cursor:pointer}.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}.card-img-wrapper{position:relative;padding-top:150%;overflow:hidden}.card img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:top;transition:.6s ease;display:block}.card:hover img{transform:scale(1.08)}.card-overlay{position:absolute;bottom:0;left:0;width:100%;padding:20px;background:linear-gradient(to top,rgba(0,0,0,.8),transparent);opacity:1;transition:.3s;display:flex;justify-content:flex-end;align-items:flex-end}.card-actions{display:flex;gap:12px;transform:translateY(0);transition:.4s cubic-bezier(.175,.885,.32,1.275)}.action-btn{width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.3);color:var(--white);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .4s cubic-bezier(.175,.885,.32,1.275);text-decoration:none;font-size:0!important;
    /* Force hide text */
    line-height: 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.action-btn i {
    font-size: 1.2rem;
    color: #ffffff !important;
    /* Adjust icon size */
    transition: transform 0.3s ease;
}

/* Mobile Button Resizing */
@media (max-width: 768px) {
    .action-btn {
        width: 32px;
        height: 32px;
    }

    .action-btn i {
        font-size: 0.9rem;
    }
}

.action-btn:hover {
    background: var(--primary);
    color: var(--white);
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
    border-color: var(--primary);
}

.action-btn:hover i {
    transform: scale(1.15);
    /* Icon pop */
}

.action-btn.active {
    background: var(--white);
    color: #e74c3c;
    /* Red heart */
    box-shadow: 0 0 15px rgba(231, 76, 60, 0.4);
}





/* Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 20000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    /* Darker blur for focus */
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.modal.show {
    opacity: 1;
}

.modal-content {
    max-width: 90%;
    max-height: 85vh;
    border-radius: 10px;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
    border: none;
    transform: scale(0.9);
    transition: transform 0.4s;
}

.modal.show .modal-content {
    transform: scale(1);
}

#modalImg {
    max-width: 90%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 10px;
}

.download-btn {
    position: absolute;
    bottom: 40px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--white);
    padding: 0;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    text-decoration: none;
    font-size: 0 !important;
    /* Force hide text absolutely */
    line-height: 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transition: 0.3s;
}

.download-btn i {
    font-size: 1.8rem;
    color: #ffffff !important;
    /* Larger, prominent icon */
    line-height: 1;
}

.download-btn:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    transform: translateY(-5px) scale(1.1);
}

.close {
    position: absolute;
    top: 30px;
    right: 40px;
    font-size: 3rem;
    cursor: pointer;
    color: white;
    z-index: 20050;
    /* Above ads */
}

/* Modal Ads */
.modal-ad-left,
.modal-ad-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    /* Hidden on mobile by default */
    z-index: 2002;
}

.modal-ad-left {
    left: 40px;
}

.modal-ad-right {
    right: 40px;
}

/* Keep wallpaper preview clean: never show ad blocks inside modal overlay */
.modal .modal-ad-left,
.modal .modal-ad-right,
.modal .download-ad-block,
.modal .download-ad-placeholder,
.modal .modal-download-ad {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.modal .modal-content,
.modal #modalImg {
    max-width: min(95vw, 1100px) !important;
    max-height: 88vh !important;
    margin: 0 auto;
}

/* Ensure modal content (image) doesn't overlap ads on large screens */
@media (min-width: 1400px) {

    .modal-ad-left,
    .modal-ad-right {
        display: block;
    }

    .modal-content {
        max-width: min(95vw, 1100px);
    }
}

/* Responsiveness */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 3rem;
    }

    /* Mobile: 2 Columns for Categories and Wallpapers */
    #category-list,
    #wallpaper-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        /* Force 2 columns */
        gap: 10px;
        /* Smaller gap for mobile */
    }

    /* CRITICAL FIX: Allow cards to shrink to fit 2 columns */
    .card,
    .category-card {
        min-width: 0 !important;
        width: 100% !important;
    }

    .category-card .card-img-wrapper {
        max-width: 100%;
        /* Allow full width in grid cell */
        height: 140px;
        /* Reduced height for mobile */
    }

    .category-card h3 {
        font-size: 0.9rem;
        /* Smaller text */
    }

    .card {
        border-radius: 8px;
        /* Slightly smaller radius */
    }

    .card-img-wrapper {
        padding-top: 140%;
        /* Adjust aspect ratio if needed */
    }

    /* Ensure container has full width */
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* Modal navigation and share controls */
/* Combined Modal Controls */
.modal-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20065; /* Higher than ads */
    width: 60px;
    height: 60px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 2.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.modal-nav-btn:hover {
    background: var(--primary);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 15px 40px rgba(255, 140, 0, 0.4);
}

.modal-nav-prev {
    left: 40px;
}

.modal-nav-next {
    right: 40px;
}

.modal-actions-wrapper {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    z-index: 20060;
    align-items: center;
    background: rgba(0, 0, 0, 0.6);
    padding: 10px 20px;
    border-radius: 50px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.5);
    min-width: fit-content;
}

.modal-download-btn, .modal-share-btn {
    position: static;
    transform: none;
    margin: 0;
}
#wallpaperModal .modal-download-btn,
#wallpaperModal .modal-share-btn,
#downloadBtn,
#modalShareBtn {
     display: inline-flex !important;
     opacity: 1 !important;
     visibility: visible !important;
     filter: none !important;
     pointer-events: auto !important;
     z-index: 99999 !important;
     background: #FF8C00 !important;
     color: #fff !important;
}

.modal-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    padding: 10px 20px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    font-weight: 600;
    font-family: inherit;
    transition: all 0.3s ease;
}

.modal-share-btn:hover {
    background: #fff;
    color: #000;
}

.modal-share-icon {
    font-size: 1.2rem;
}

.modal-share-text {
    font-size: 0.95rem;
}

/* Keep preview clean: hide page ads while modal is open */
body.modal-open .download-ad-block,
body.modal-open #sticky-footer-ad,
body.modal-open #interstitial-ad-modal {
    display: none !important;
}

@media (max-width: 768px) {
    .modal-nav-btn {
        width: 48px;
        height: 48px;
        font-size: 1.6rem;
    }

    .modal-nav-prev { left: 15px; }
    .modal-nav-next { right: 15px; }

    .modal-actions-wrapper {
        bottom: 25px;
        padding: 8px 15px;
        gap: 10px;
    }

    .modal-download-btn, .modal-share-btn {
        height: 44px;
        padding: 0 15px;
    }

    .modal-share-text { display: none; }
    .modal-share-btn { min-width: 44px; padding: 0; width: 44px; border-radius: 50%; }
}

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

/* Removing redundant styles */

/* Responsiveness */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 3rem;
    }

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


/* Hero Carousel */
.hero-carousel {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
    background: #ffffff;

    /* Optimize rendering quality */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    perspective: 1000;
}

/* Force show modal download/share buttons */
#wallpaperModal .modal-download-btn,
#wallpaperModal .modal-share-btn {
    display: inline-flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    pointer-events: auto !important;
}

.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center 35%;
    /* Positions background to keep deity faces visible */
    background-repeat: no-repeat;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
    z-index: 1;

    /* HIGH QUALITY IMAGE RENDERING - Prevents blur and grain */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-font-smoothing: subpixel-antialiased;
}

.hero-lcp-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    z-index: 0;
}

.carousel-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

.carousel-slide::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6));
    z-index: 1;
}

.carousel-content {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: white;
    z-index: 10;
    animation: fadeInUp 0.8s ease-out;
}

.carousel-content h2 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
    background: linear-gradient(45deg, #ffd700, #ffed4e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.carousel-content p {
    font-size: 1rem;
    opacity: 0.9;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}