/*
Theme Name: Zelda
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.4
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

/**
 * Glassmorphism Cursor Effect for Flickity Sliders
 * Child theme implementation
 */

.slider-glassmorphism-cursor {
    position: fixed;
    width: 75px;
    height: 75px;
    border-radius: 50%;
    /* Lightly dark background as requested */
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    pointer-events: none; /* CRITICAL: Don't interfere with Flickity */
    z-index: 9999;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
    transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
    user-select: none;
    will-change: transform, opacity;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* Chevron left arrow */
.slider-glassmorphism-cursor .chevron-left {
    width: 18px;
    height: 18px;
    /* Brighter light green with better contrast */
    color: rgb(180, 220, 100);
    opacity: 1;
    transition: all 0.2s ease;
    /* Add subtle glow for better visibility */
    filter: drop-shadow(0 0 2px rgba(180, 220, 100, 0.3));
}

.slider-glassmorphism-cursor .chevron-left svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    stroke-width: 2.5;
}

/* Chevron right arrow */
.slider-glassmorphism-cursor .chevron-right {
    width: 18px;
    height: 18px;
    /* Brighter light green with better contrast */
    color: rgb(180, 220, 100);
    opacity: 1;
    transition: all 0.2s ease;
    /* Add subtle glow for better visibility */
    filter: drop-shadow(0 0 2px rgba(180, 220, 100, 0.3));
}

.slider-glassmorphism-cursor .chevron-right svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    stroke-width: 2.5;
}

/* Show cursor when hovering slider */
.slider-glassmorphism-cursor.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Enhanced effect during drag */
.slider-glassmorphism-cursor.dragging {
    /* Darker background during drag */
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.5);
    transform: translate(-50%, -50%) scale(1.1);
}

.slider-glassmorphism-cursor.dragging .chevron-left,
.slider-glassmorphism-cursor.dragging .chevron-right {
    opacity: 1;
    /* Enhanced glow during drag for maximum visibility */
    filter: drop-shadow(0 0 4px rgba(180, 220, 100, 0.6));
    transform: scale(1.1);
}


/* Accordion Customizations - CSS Only Solution */

/* Reorder accordion elements: move toggle button to the right */
.accordion-title {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-direction: row-reverse !important; /* This moves the button to the right */
    transition: none !important; /* Remove any title animations */
    padding-left: 0 !important; /* Remove left padding */
}

/* Hide the original icon and disable any animations */
.accordion-title .toggle i {
    display: none !important;
    transition: none !important;
    transform: none !important;
    animation: none !important;
}

.accordion-title .toggle {
    background: none !important;
    border: none !important; /* Remove border completely */
    font-size: 36px !important; /* Make icon twice as big (18px * 2) */
    font-weight: bold !important;
    color: inherit !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    line-height: 1 !important;
    width: 24px !important; /* Match the icon size */
    height: 24px !important; /* Match the icon size */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    top: 0 !important; /* Position at top */
    opacity: 1 !important; /* Force opacity to 1 always */
    transition: none !important; /* Remove any button animations */
    transform: none !important; /* Prevent any transform animations */
}

/* Add plus sign image for closed accordion */
.accordion-title .toggle:after {
    content: "" !important;
    background-image: url('https://naujas.zelda.lt/wp-content/uploads/2025/08/plus.svg') !important;
    background-size: 24px 24px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: 24px !important;
    height: 24px !important;
    display: block !important;
    transition: none !important; /* Remove any transition animations */
}

/* Change to minus sign image for open accordion */
.accordion-title.active .toggle:after {
    content: "" !important;
    background-image: url('https://naujas.zelda.lt/wp-content/uploads/2025/08/Group-23.svg') !important;
    background-size: 24px 24px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: 24px !important;
    height: 24px !important;
    display: block !important;
    transition: none !important; /* Remove any transition animations */
}

/* Make accordion content full width */
.accordion {
    width: 100% !important;
}

.accordion-item {
    width: 100% !important;
    border-bottom: 1px solid #374836 !important;
}

.accordion-inner {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

/* Additional styling for better appearance */
.accordion-title .toggle:hover {
    opacity: 1 !important; /* Keep opacity always at 1 */
}

.accordion-title .toggle:focus {
    outline: none !important;
}

/* Ensure proper spacing - the span (title) should take remaining space */
.accordion-title span {
    flex: 1 !important;
    text-align: left !important;
}

/* Accordion title styling */
.accordion-title {
    color: var(--Dark-Green, #374836) !important;
    font-size: 20px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 30px !important;
    border-top: none !important;
    padding-right: 0 !important;
}

/* Active accordion title styling - no color change, no background */
.accordion-title.active {
    color: var(--Dark-Green, #374836) !important;
    background-color: transparent !important;
}

/* For WooCommerce product tabs accordion (different structure) */
.product-page-accordian .accordion-title {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-direction: row-reverse !important;
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/

/* Fix lightbox arrow z-index on mobile - ensure arrows are clickable */
.mfp-arrow {
    z-index: 10000 !important; /* Higher than glassmorphism cursor (9999) */
    top: calc(50% - 34px) !important; /* Custom positioning - preserve on all states */
}

/* Prevent arrow movement on click/hover/focus states */
.mfp-arrow:hover,
.mfp-arrow:focus,
.mfp-arrow:active {
    top: calc(50% - 34px) !important; /* Keep the same position on all states */
}

/* Ensure glassmorphism cursor doesn't interfere with lightbox on mobile */
.mfp-ready .slider-glassmorphism-cursor {
    display: none !important;
}

}