/*
* FooGallery Custom CSS
* This file is created by adding custom CSS on FooGallery Settings page in wp-admin
* Created : 15 Oct 2025, 5:02 pm
*/

/* ==== FooGallery Horizontal Slider (Final Fixed Version) ==== */

/* 1. Remove all overlays, icons, and "+" lightbox triggers (STRONGER HIDING) /
.fg-caption .fg-icon,
.fg-lightbox-icon,
.fg-overlay,
.fg-item .fg-hover,
.fg-item .fg-hover-icon,
.fg-item:hover .fg-lightbox-icon,
.fg-item:hover .fg-overlay,
.fg-item:hover .fg-hover-icon,
/ Added specific selector to ensure the overlay doesn't appear on item hover /
.fg-item:hover .fg-image-wrap:after {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
/ Ensure the image itself doesn't dim on hover */
.fg-item:hover img {
opacity: 1 !important;
}

.fg-lightbox-icon::before,
.fg-lightbox-icon::after,
.fg-hover-icon::before,
.fg-hover-icon::after {
content: none !important;
display: none !important;
}
.fg-lightbox-icon svg,
.fg-hover-icon svg,
.fg-icon svg {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
}

/* 2. Horizontal scroll setup /
/ IMPORTANT: Added padding-left/right to create space for external buttons /
.foogallery {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden !important;
gap: 20px;
/ Added significant padding to push content away from the wrapper edges,
making room for the external buttons without overlapping the images. */
padding: 10px 60px;
scroll-behavior: smooth !important;
-webkit-overflow-scrolling: touch;
}

/* Make sure the last image isn't cut */
.foogallery::after {
content: "";
flex: 0 0 30px;
}

/* 3. Hide scrollbars /
.foogallery::-webkit-scrollbar {
display: none;
}
.foogallery {
-ms-overflow-style: none; / IE and Edge /
scrollbar-width: none; / Firefox */
}

/* 4. Gallery items (Fixed shadow application) /
.foogallery .fg-item {
flex: 0 0 calc(20% - 20px);
aspect-ratio: 1 / 1;
border-radius: 12px;
overflow: hidden;
/ Shadow is applied here to the item wrapper (fg-item) /
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
transition: transform 0.3s ease;
/ Added background color to ensure shadow is visible against transparency */
background-color: #ffffff;
}
.foogallery .fg-item:hover {
transform: scale(1.03);
}

/* Image styling */
.foogallery .fg-item img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
}

/* 5. Responsive breakpoints */
@media (max-width: 1024px) {
.foogallery .fg-item {
flex: 0 0 calc(33.33% - 20px);
}
}
@media (max-width: 768px) {
.foogallery .fg-item {
flex: 0 0 calc(50% - 20px);
}
}
@media (max-width: 480px) {
.foogallery .fg-item {
flex: 0 0 calc(100% - 20px);
}
}

/* 6. Wrapper & Buttons /
.gallery-wrapper {
position: relative;
display: flex;
align-items: center;
justify-content: center;
/ Max width helps contain the wrapper if Elementor is too wide */
max-width: 1200px;
margin: 0 auto;
}

/* Scroll buttons (modern style) /
.scroll-btn {
/ REVERTED: Changed back to blue background and white text/icon color /
background: #0078ff;
color: #fff;
border: none; / Removed border /
font-size: 20px;
cursor: pointer;
border-radius: 50%;
width: 50px; / Made slightly larger /
height: 50px;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 20; / Increased z-index to ensure it is always on top */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
transition: all 0.3s ease;
padding: 0;
}

.scroll-btn:hover {
/* REVERTED: Darker blue background on hover, keeps white text/icon color */
background: #005fcc;
color: #fff;
transform: translateY(-50%) scale(1.1);
}

.scroll-btn svg {
/* Keeps the SVG icon white */
fill: currentColor;
width: 20px;
height: 20px;
}

/* 7. Positioning (Fixes buttons being over the images) /
.scroll-btn.left {
/ Pushed further out to clear the images and the 60px padding /
left: 0px;
}
.scroll-btn.right {
/ Pushed further out to clear the images and the 60px padding */
right: 0px;
}