/* Custom CSS to override default styles */

/* Make product cards with only bottom white border for product name */
.voucher-section .img-box, 
.gift-card-section .img-box,
.topup-section .img-box,
.shop-section .item-area .img-box,
.shop-section .game-box .img-box {
    background-color: transparent !important;
    border-radius: 16px !important;
    box-shadow: none;
    position: relative;
    padding: 0;
    margin: 0;
    transition: none !important; /* Remove transform animation */
    font-size: 0; /* Remove any inline-block spacing */
    line-height: 0; /* Remove line height spacing */
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
}

/* Add hover effect for better user experience */
.voucher-section .img-box:hover, 
.gift-card-section .img-box:hover,
.topup-section .img-box:hover,
.shop-section .item-area .img-box:hover,
.shop-section .game-box .img-box:hover {
    transform: translateY(-5px);
}

/* Product image styling without borders */
.voucher-section .img-box img, 
.gift-card-section .img-box img,
.topup-section .img-box img,
.shop-section .item-area .img-box img,
.shop-section .game-box .img-box img {
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 16px !important;
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block; /* Ensures no extra space */
    vertical-align: bottom; /* Remove any baseline space */
    border: none !important; /* Ensure no border adds space */
    box-shadow: none !important;
}

/* Product name in white container at bottom */
.voucher-section .img-box p, 
.gift-card-section .img-box p,
.topup-section .img-box p,
.shop-section .item-area .img-box p,
.shop-section .item-area .img-box h5,
.shop-section .game-box .img-box h5 {
    display: none !important; /* Hide the product titles on landing page */
}

/* Also remove the spacing after that was reserved for titles */
.voucher-section .img-box:after, 
.gift-card-section .img-box:after,
.topup-section .img-box:after,
.shop-section .item-area .img-box:after,
.shop-section .game-box .img-box:after {
    content: none !important;
    display: none !important;
    height: 0 !important;
    top: 0 !important;
}

/* Remove the space at the bottom of images */
.voucher-section .img-box img, 
.gift-card-section .img-box img,
.topup-section .img-box img,
.shop-section .item-area .img-box img,
.shop-section .game-box .img-box img {
    margin-bottom: 0 !important;
    float: none !important;
    top: 0 !important;
}

/* Standardize all buttons to be simple with 16px border radius */
.btn, button, .game-btn, .game-btn-sm, .cmn-btn, .cmn-btn2, .cmn-btn3, .btn-sm,
button[type="submit"], input[type="submit"], a.btn, .btn-primary, .btn-secondary,
.btn-success, .btn-info, .btn-warning, .btn-danger {
    border-radius: 16px !important;
    background-color: #6c5ce7 !important; /* Purple background */
    background-clip: padding-box !important;
    position: static !important; /* Changed from relative to prevent positioning effects */
    overflow: visible !important; /* Changed from hidden to prevent clipping */
    z-index: 1 !important;
    transition: none !important; /* Remove all transitions */
    animation: none !important; /* Remove all animations */
    padding: 12px 24px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    text-transform: capitalize !important;
    border: none !important;
    background-image: none !important;
    -webkit-clip-path: none !important; 
    clip-path: none !important;
    transform: none !important; /* Prevent transform animations */
    opacity: 1 !important; /* Ensure full opacity */
    color: white !important; /* Ensure text is visible on purple */
}

/* Remove any hover effects */
.btn:hover, button:hover, .game-btn:hover, .game-btn-sm:hover, .cmn-btn:hover, 
.cmn-btn2:hover, .cmn-btn3:hover, .btn-sm:hover,
button[type="submit"]:hover, input[type="submit"]:hover, a.btn:hover,
.btn-primary:hover, .btn-secondary:hover, .btn-success:hover, 
.btn-info:hover, .btn-warning:hover, .btn-danger:hover {
    background-color: #5d4ed6 !important; /* Slightly darker purple on hover */
    transform: none !important;
    transition: none !important;
    animation: none !important;
    box-shadow: none !important;
}

/* Remove any before/after elements that might add animations */
.btn:before, .btn:after, button:before, button:after, 
.game-btn:before, .game-btn:after, .game-btn-sm:before, .game-btn-sm:after,
.cmn-btn:before, .cmn-btn:after, .cmn-btn2:before, .cmn-btn2:after, 
.cmn-btn3:before, .cmn-btn3:after {
    display: none !important;
    content: none !important;
    background: none !important;
    animation: none !important;
    transition: none !important;
}

/* Remove animated icon from buttons */
.game-btn img, .game-btn-sm img, .cmn-btn img, .cmn-btn2 img, .cmn-btn3 img {
    display: none !important;
}

/* Package list items on voucher and gift card detail pages */
.package-list {
    background: #ffffff;
}

.package-list label.btn {
    background-color: #ffffff;
}

.package-list input:checked + label.btn {
    background-color: #f0f8ff;
}

/* Hide the top_up section on the landing page */
#topup.topup-section,
section.topup-section,
section#topup {
    display: none !important;
}

/* Search overlay styles */
.search-overlay {
    z-index: 9999 !important;
}

/* Add padding to product detail pages to fix navbar overlap */
body .voucher-details-section,
body .gift-card-details-section,
body section.voucher-details,
body section.gift-card-details {
    padding-top: 120px !important;
}

/* Extra padding for mobile views */
@media (max-width: 768px) {
    body .voucher-details-section,
    body .gift-card-details-section,
    body section.voucher-details,
    body section.gift-card-details {
        padding-top: 180px !important;
    }
    
    /* Fix product logo container */
    .voucher-details-section .product-info,
    .gift-card-details-section .product-info {
        margin-top: 30px !important;
    }
    
    /* Ensure product logo has proper spacing */
    .voucher-details-section .product-logo,
    .gift-card-details-section .product-logo,
    .voucher-details-section .product-logo img,
    .gift-card-details-section .product-logo img {
        margin-top: 20px !important;
        position: relative !important;
        z-index: 1 !important;
    }
    
    /* Target Neosurf product specifically */
    .product-details-header,
    .product-details-container {
        padding-top: 50px !important;
        margin-top: 50px !important;
    }
    
    /* Target all product detail main containers */
    .product-details,
    .details-section,
    .product-content {
        padding-top: 80px !important;
        margin-top: 30px !important;
        position: relative !important;
        z-index: 1 !important;
    }
}

.search-overlay .close-search {
    position: fixed !important;
    top: 30px !important;
    right: 30px !important;
    color: white !important;
    z-index: 10000 !important;
}

.search-overlay .search-input-container {
    position: relative !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

.search-overlay #search-input {
    width: 100% !important;
    padding: 15px 60px 15px 20px !important;
    color: #333 !important;
    background-color: rgba(255, 255, 255, 0.9) !important;
}

.search-overlay .clear-search,
.search-overlay #search-btn {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.search-overlay .clear-search {
    right: 50px !important;
    color: #333 !important;
}

.search-overlay #search-btn {
    right: 15px !important;
    color: #333 !important;
}

#search-results {
    max-width: 600px !important;
    margin: 20px auto 0 !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

#search-results .dropdown-item {
    border-radius: 5px !important;
    color: white !important;
    display: flex !important;
    align-items: center !important;
}

#search-results .dropdown-item span {
    color: white !important;
    font-weight: normal !important;
}

#search-results .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* Fix mobile menu toggle button - remove purple background */
.navbar-toggler {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 10px !important;
    z-index: 1050 !important; /* Ensure toggle is above other elements */
    cursor: pointer !important;
}

/* Make the aria-expanded attribute work visually */
.navbar-toggler[aria-expanded="true"] {
    opacity: 0.8 !important;
}

/* Make search icon in top navbar white */
.navbar .search-box .btn-search i {
    color: white !important;
}

.navbar .search-box .btn-search {
    color: white !important;
}

@media (max-width: 768px) {
    .search-overlay .close-search {
        top: 20px !important;
        right: 20px !important;
    }
    
    /* Ensure navbar collapse properly displays in mobile */
    .navbar-collapse {
        position: absolute !important;
        top: 100% !important;
        right: 0 !important;
        left: 0 !important;
        z-index: 1000 !important;
        background-color: rgba(0, 0, 0, 0.9) !important;
        padding: 20px !important;
    }
    
    /* Ensure navbar items are properly spaced */
    .navbar-nav .nav-item {
        margin: 5px 0 !important;
    }
} 

/* Add this script tag to the bottom of your CSS file - it will get automatically 
   added to the page and fix the toggle functionality */
/* <script>
document.addEventListener('DOMContentLoaded', function() {
    var navbarToggler = document.querySelector('.navbar-toggler');
    var navbarCollapse = document.querySelector('.navbar-collapse');
    
    if (navbarToggler && navbarCollapse) {
        navbarToggler.addEventListener('click', function() {
            // Check if Bootstrap's collapse is working properly
            var isOpen = navbarCollapse.classList.contains('show');
            
            if (isOpen) {
                // If menu is open, close it
                navbarCollapse.classList.remove('show');
                navbarToggler.setAttribute('aria-expanded', 'false');
            } else {
                // If menu is closed, open it
                navbarCollapse.classList.add('show');
                navbarToggler.setAttribute('aria-expanded', 'true');
            }
        });
        
        // Close the menu when clicking outside
        document.addEventListener('click', function(event) {
            if (!navbarToggler.contains(event.target) && !navbarCollapse.contains(event.target)) {
                if (navbarCollapse.classList.contains('show')) {
                    navbarCollapse.classList.remove('show');
                    navbarToggler.setAttribute('aria-expanded', 'false');
                }
            }
        });
    }
});
</script> */ 

/* Make navbar always have dark background instead of only on scroll */
.navbar {
    background-color: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(10px) !important;
    transition: none !important;
}

/* Now that navbar is always dark, no need for .scrolled class */
.navbar.scrolled {
    /* Keep these styles in sync with the above for consistency */
    background-color: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(10px) !important;
}