/* Gallery fix that will override any existing styling */

.swiftcash-gallery,
.routechef-gallery,
.bidryd-gallery,
.lifeofgirl-gallery,
.valorant-gallery,
.hogar-gallery,
.biro-gallery,
.dete-gallery {
    position: relative !important;
    height: 220px !important;
    overflow: hidden !important;
}

.gallery-container {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    cursor: pointer !important; /* Add pointer cursor to indicate clickable */
}

.gallery-image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 0 !important;
    transition: opacity 0.5s ease-in-out !important;
    display: block !important;
}

.gallery-image.active {
    opacity: 1 !important;
    z-index: 2 !important;
}

/* Hover effect to make image slightly larger */
.gallery-container:hover .gallery-image.active {
    transform: scale(1.03) !important;
    transition: transform 0.3s ease !important;
}

.gallery-nav {
    position: absolute !important;
    bottom: 15px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    gap: 8px !important;
    z-index: 5 !important;
}

.gallery-dot {
    width: 10px !important;
    height: 10px !important;
    background-color: rgba(255, 255, 255, 0.5) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease !important;
}

.gallery-dot.active {
    background-color: var(--primary-color) !important;
}

.dark-mode .gallery-dot.active {
    background-color: var(--dark-primary-color) !important;
}

/* Fix for folder icon in hero section */
#hero::before,
#hero::after {
    display: none !important;
    content: none !important;
}

.hero-image::before,
.hero-image::after {
    display: none !important;
    content: none !important;
}

/* Hide any stray elements in hero section */
.hero * {
    visibility: visible;
}

.hero *::before,
.hero *::after {
    display: none !important;
    content: none !important;
}

/* Only allow specific content in hero section */
.hero-image * {
    display: block !important;
}

.hero-image img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Lightbox Styles */
.lightbox {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.9) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 9999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

.lightbox.active {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Loading indicator */
.lightbox::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 50px !important;
    height: 50px !important;
    margin-top: -25px !important;
    margin-left: -25px !important;
    border: 5px solid rgba(255, 255, 255, 0.2) !important;
    border-top: 5px solid var(--primary-color) !important;
    border-radius: 50% !important;
    animation: spin 1s linear infinite !important;
    z-index: 1 !important;
}

.lightbox.image-loaded::after {
    display: none !important;
}

@keyframes spin {
    0% { transform: rotate(0deg) !important; }
    100% { transform: rotate(360deg) !important; }
}

.lightbox-content {
    position: relative !important;
    max-width: 90% !important;
    max-height: 90% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 2 !important;
}

.lightbox-image {
    display: block !important;
    max-width: 100% !important;
    max-height: 85vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important; /* This ensures the image maintains aspect ratio */
    margin: 0 auto !important;
    border: 5px solid white !important;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5) !important;
    transition: transform 0.3s ease !important;
    transform-origin: center !important;
}

/* Add zoom capability on double-click */
.lightbox-image.zoomed {
    cursor: zoom-out !important;
    transform: scale(1.5) !important;
}

.lightbox-image:not(.zoomed) {
    cursor: zoom-in !important;
}

/* Custom styles for portrait vs landscape images */
.lightbox-image.portrait {
    max-height: 85vh !important;
    max-width: 85vw !important;
}

.lightbox-image.landscape {
    max-width: 85vw !important;
    max-height: 85vh !important;
}

.lightbox-close {
    position: absolute !important;
    top: -40px !important;
    right: 0 !important;
    color: white !important;
    font-size: 30px !important;
    cursor: pointer !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    padding: 5px !important;
    z-index: 3 !important;
}

.lightbox-prev,
.lightbox-next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: white !important;
    font-size: 30px !important;
    cursor: pointer !important;
    background: rgba(0, 0, 0, 0.5) !important;
    border: none !important;
    outline: none !important;
    padding: 15px 20px !important;
    border-radius: 50% !important;
    transition: background 0.3s ease !important;
    z-index: 10 !important;
}

.lightbox-prev:hover,
.lightbox-next:hover {
    background: rgba(0, 0, 0, 0.8) !important;
}

.lightbox-prev {
    left: 20px !important;
}

.lightbox-next {
    right: 20px !important;
}

.lightbox-counter {
    position: absolute !important;
    bottom: -40px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    color: white !important;
    font-size: 16px !important;
    z-index: 3 !important;
}