/*
* FooGallery Custom CSS
* This file is created by adding custom CSS on FooGallery Settings page in wp-admin
* Created : 13 Apr 2026, 8:17 am
*/

/* Container for both arrows */
.fg-lightcase-prev, 
.fg-lightcase-next {
    background-color: rgba(0, 0, 0, 0.6) !important; /* Circular dark background */
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, transform 0.2s ease;
    text-decoration: none !important;
}

/* Style the actual arrow icon/text */
.fg-lightcase-prev span, 
.fg-lightcase-next span {
    color: #ffffff !important; /* Arrow color */
    font-size: 24px !important;
    line-height: 1 !important;
    font-family: Arial, sans-serif !important; /* Ensures clean look */
}

/* Hover Effect */
.fg-lightcase-prev:hover, 
.fg-lightcase-next:hover {
    background-color: #2271b1 !important; /* WordPress Blue or your brand color */
    transform: scale(1.1);
}

/* Adjust position from the edge */
.fg-lightcase-prev { left: 30px !important; }
.fg-lightcase-next { right: 30px !important; }