/* ============================================================ */
/* File Path: ./assets/css/mega-menu.css */
/* Purpose: Styling for the Mega Menu Pop-up with Accordion Tree, Pronounced Book-Like Vertical Flip Animation, and Dynamic 3D Design */
/* Block Separator: Main Mega Menu Styles */
/* Updated: Fixed blinking, enhanced 1s book-like flip animation, added independent color picker styling for text colors in each section, improved 3D animations, optimized performance, ensured accessibility, preserved theme colors and structure, merged simpler styles from provided CSS, enforced text color changes with specificity */
/* Console log: Merged provided CSS with existing styles, preserving mega menu functionality is preserved and text colors are enforced */
/* ============================================================ */

/* ============================================================ */
/* Purpose: Styling for the Mega Menu Container */
/* Block Separator: Mega Container Styles */
/* ============================================================ */
.mega-container {
    position: fixed !important; /* Ensures absolute positioning */
    display: flex !important; /* Always flex for animation to trigger */
    visibility: hidden !important; /* Supports animation visibility */
    background: linear-gradient(135deg, #ffffff, #2c0e53); /* Color: #ffffff (White) to #2c0e53 (Dark Purple) - Gradient: 3D background */
    border: 6px solid #facc15; /* Color: #facc15 (Grenier's Yellow) - Border */
    border-radius: 16px; /* Smooth corners */
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.25), 0 8px 30px rgba(0, 0, 0, 0.2); /* Color: rgba(0, 0, 0, 0.25) - Deep 3D shadow */
    z-index: 999999; /* High z-index for overlay */
    width: 800px; /* Default width */
    max-width: 90vw; /* Responsive width */
    height: auto; /* Dynamic height via JS */
    min-width: 280px; /* Minimum width for mobile */
    min-height: 200px; /* Minimum height for usability */
    font-family: "Poppins", sans-serif; /* Consistent typography */
    color: #ffffff !important; /* Color: #ffffff (White) - Text, changeable via color picker, enforced */
    transform-origin: top center !important; /* Origin for pronounced flip animation */
    transform: perspective(2000px) rotateX(-90deg) translateY(30px) !important; /* Initial state for 1s flip */
    opacity: 0 !important; /* Initially invisible */
    transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1), opacity 1s ease-out !important; /* 1s flip animation, no height transition to avoid blinking */
    will-change: transform, opacity, visibility !important; /* Optimize rendering for transform and opacity */
    backface-visibility: hidden !important; /* Prevent blinking artifacts */
    overflow: visible !important; /* Ensure no scrollbars */
    pointer-events: none !important; /* No interaction when hidden */
    /* Console log: Applying independent text color change for .mega-container via .mega-container-color-picker */
}

/* Color picker for mega-container text color */
.mega-container-color-picker {
    width: 40px; /* Compact size */
    height: 40px; /* Consistent height */
    border: 2px solid #facc15; /* Color: #facc15 (Grenier's Yellow) - Border */
    border-radius: 8px; /* Rounded corners */
    cursor: pointer; /* Clickable cursor */
    margin: 10px; /* Spacing */
    background: transparent; /* Show color value */
    transition: transform 0.3s ease, border-color 0.3s ease; /* Smooth transition */
    /* Console log: Independent color picker styling for .mega-container text color */
}

/* Block Separator: Ensure single menu visibility */
.mega-container.active ~ .mega-container {
    display: none !important; /* Hide other menus */
}

/* ============================================================ */
/* Purpose: Styling for the Mega Menu Active Container */
/* Block Separator: Active Container with Flip Animation */
/* ============================================================ */
.mega-container.active {
    visibility: visible !important; /* Show with animation */
    transform: perspective(2000px) rotateX(0deg) translateY(0) translateZ(20px) !important; /* Final state for flip */
    opacity: 1 !important; /* Fully visible */
    animation: pageFlip 1s cubic-bezier(0.4,0,0.2,1) forwards !important; /* Pronounced 1s book-like flip */
    background-color: #ffffff; /* Color: #ffffff (White) - Fallback */
    border: 1px solid #e6bc11; /* Color: #e6bc11 (Gold) - Overrides 6px #facc15 for active state */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Color: rgba(0, 0, 0, 0.1) - Simpler shadow for active state */
    pointer-events: auto !important; /* Enable interaction */
    /* Console log: Merged .mega-container.active styles, preserving flip animation */
}

/* ============================================================ */
/* Purpose: Styling for the Mega Menu Closing Container */
/* Block Separator: Closing Container with Unflip Animation */
/* ============================================================ */
.mega-container.closing {
    animation: pageUnflip 1s cubic-bezier(0.4, 0, 0.2, 1) forwards !important; /* Reverse flip for closing */
    /* Console log: Added closing animation to match open flip */
}

/* ============================================================ */
/* Purpose: Animation for Book-Like Page Flip */
/* Block Separator: Pronounced Book-Like Page-Flip Animation */
/* ============================================================ */
@keyframes pageFlip {
    0% {
        transform: perspective(2000px) rotateX(-90deg) translateY(30px) skewY(5deg); /* Start with book-like skew */
        opacity: 0; /* Invisible */
    }
    50% {
        transform: perspective(2000px) rotateX(-45deg) translateY(15px) skewY(2deg); /* Midpoint of flip */
        opacity: 0.5; /* Partial visibility */
    }
    100% {
        transform: perspective(2000px) rotateX(0deg) translateY(0) translateZ(20px); /* Final 3D position */
        opacity: 1; /* Fully visible */
    }
}

/* ============================================================ */
/* Purpose: Animation for Book-Like Page Unflip (Closing) */
/* Block Separator: Pronounced Book-Like Page-Unflip Animation */
/* ============================================================ */
@keyframes pageUnflip {
    0% {
        transform: perspective(2000px) rotateX(0deg) translateY(0) translateZ(20px); /* Start from open position */
        opacity: 1; /* Fully visible */
    }
    50% {
        transform: perspective(2000px) rotateX(-45deg) translateY(15px) skewY(2deg); /* Midpoint of unflip */
        opacity: 0.5; /* Partial visibility */
    }
    100% {
        transform: perspective(2000px) rotateX(-90deg) translateY(30px) skewY(5deg); /* End with book-like skew */
        opacity: 0; /* Invisible */
    }
}

/* ============================================================ */
/* Purpose: Animation for Interactive Shine Effect */
/* Block Separator: Shine Animation for Interactive Elements */
/* ============================================================ */
@keyframes shine {
    0% {
        background-position: -200%; /* Start shine off-screen */
    }
    100% {
        background-position: 200%; /* Shine moves across */
    }
}

/* ============================================================ */
/* Purpose: Fallback Styling for Unsupported Browsers */
/* Block Separator: Fallback for Unsupported Browsers */
/* ============================================================ */
@supports not (transform: perspective(2000px)) {
    .mega-container {
        transform: none !important; /* Remove 3D transform */
        opacity: 1 !important; /* Ensure visibility */
        /* Console log: Fallback styling applied for .mega-container */
    }
    .mega-container.active {
        opacity: 1 !important; /* Fallback for active state */
        background-color: #ffffff; /* Color: #ffffff (White) */
        border: 1px solid #e6bc11; /* Color: #e6bc11 (Gold) */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Color: rgba(0, 0, 0, 0.1) */
        /* Console log: Fallback styling for .mega-container.active */
    }
}

/* ============================================================ */
/* Purpose: Responsive Adjustments for Mega Menu Container */
/* Block Separator: Responsive Adjustments */
/* ============================================================ */
@media (min-width: 1024px) {
    .mega-container {
        width: 900px; /* Larger width for desktop */
    }
}

@media (max-width: 768px) {
    .mega-container {
        width: 90vw; /* Full width on tablet */
        min-width: 260px; /* Adjusted for smaller screens */
    }
}

@media (max-width: 320px) {
    .mega-container {
        width: 95vw; /* Near full width on mobile */
        min-width: 240px; /* Ensure usability */
    }
}

/* ============================================================ */
/* Purpose: Styling for the Mega Menu Draggable Header */
/* Block Separator: Mega Header Styles */
/* ============================================================ */
.mega-header {
    background: linear-gradient(180deg, #2c0e53, #2c0e53); /* Color: #2c0e53 (Dark Purple) - Gradient */
    padding: 15px 20px; /* Comfortable padding */
    display: flex; /* Flexbox for layout */
    justify-content: space-between; /* Space out content */
    align-items: center; /* Center vertically */
    cursor: move; /* Draggable cursor */
    border-bottom: 1px solid #facc15; /* Color: #facc15 (Grenier's Yellow) - Border */
    user-select: none; /* Prevent text selection */
    flex-shrink: 0; /* Prevent shrinking */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Color: rgba(0, 0, 0, 0.1) - Subtle shadow */
    z-index: 1000000; /* Ensure above content */
    color: #ffffff !important; /* Color: #ffffff (White) - Text, changeable via color picker, enforced */
    /* Console log: Applying independent text color change for .mega-header via .mega-header-color-picker */
}

/* Color picker for mega-header text color */
.mega-header-color-picker {
    width: 40px; /* Compact size */
    height: 40px; /* Consistent height */
    border: 2px solid #facc15; /* Color: #facc15 (Grenier's Yellow) - Border */
    border-radius: 8px; /* Rounded corners */
    cursor: pointer; /* Clickable cursor */
    margin: 10px; /* Spacing */
    background: transparent; /* Show color value */
    transition: transform 0.3s ease, border-color 0.3s ease; /* Smooth transition */
    /* Console log: Independent color picker styling for .mega-header text color */
}

/* ============================================================ */
/* Purpose: Styling for the Mega Menu Header Title */
/* Block Separator: Header Title */
/* ============================================================ */
.mega-header h3 {
    margin: 0; /* Remove default margin */
    font-size: 18px; /* Readable size */
    font-weight: 600; /* Bold for emphasis */
    color: #ffffff !important; /* Color: #ffffff (White) - High contrast, changeable via color picker, enforced */
    /* Console log: Applying independent text color change for .mega-header h3 via .mega-header-title-color-picker */
}

/* Color picker for mega-header h3 text color */
.mega-header-title-color-picker {
    width: 40px; /* Compact size */
    height: 40px; /* Consistent height */
    border: 2px solid #facc15; /* Color: #facc15 (Grenier's Yellow) - Border */
    border-radius: 8px; /* Rounded corners */
    cursor: pointer; /* Clickable cursor */
    margin: 10px; /* Spacing */
    background: transparent; /* Show color value */
    transition: transform 0.3s ease, border-color 0.3s ease; /* Smooth transition */
    /* Console log: Independent color picker styling for .mega-header h3 text color */
}

/* ============================================================ */
/* Purpose: Styling for the Mega Menu Close Button */
/* Block Separator: Close Button */
/* ============================================================ */
.mega-close {
    background: none; /* Simpler background */
    border: none; /* No border */
    color: #ffffff !important; /* Color: #ffffff (White) - High contrast, changeable via color picker, enforced */
    width: 32px; /* Consistent size */
    height: 32px; /* Consistent size */
    border-radius: 50%; /* Circular shape */
    cursor: pointer; /* Clickable cursor */
    font-size: 20px; /* Icon size */
    font-weight: 400; /* Normal weight */
    line-height: 1; /* Center icon */
    display: flex; /* Flexbox for centering */
    align-items: center; /* Vertical centering */
    justify-content: center; /* Horizontal centering */
    transition: transform 0.3s ease, background 0.3s ease; /* Smooth 3D transition */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* Color: rgba(0, 0, 0, 0.15) - Shadow: 3D depth */
    z-index: 1000002; /* Above header */
    /* Console log: Applying independent text/icon color change for .mega-close via .mega-close-color-picker */
}

/* Color picker for mega-close text/icon color */
.mega-close-color-picker {
    width: 40px; /* Compact size */
    height: 40px; /* Consistent height */
    border: 2px solid #facc15; /* Color: #facc15 (Grenier's Yellow) - Border */
    border-radius: 8px; /* Rounded corners */
    cursor: pointer; /* Clickable cursor */
    margin: 10px; /* Spacing */
    background: transparent; /* Show color value */
    transition: transform 0.3s ease, border-color 0.3s ease; /* Smooth transition */
    /* Console log: Independent color picker styling for .mega-close text/icon color */
}

.mega-close:hover,
.mega-close:focus {
    background: linear-gradient(45deg, #facc15, #2e0c5e); /* Color: #facc15 (Grenier's Yellow) to #2e0c5e (Primary Purple) - Gradient: Hover */
    transform: rotate(90deg) translateZ(10px); /* 3D rotation effect */
    animation: shine 0.6s ease; /* Shine animation */
}

.mega-close:focus {
    outline: 2px solid #2e0c5e; /* Color: #2e0c5e (Primary Purple) - Focus */
    outline-offset: 2px; /* Visible focus */
}

/* ============================================================ */
/* Purpose: Styling for the Mega Menu Content Area */
/* Block Separator: Mega Content Styles */
/* ============================================================ */
.mega-content {
    padding: 20px; /* Comfortable padding */
    flex-grow: 1; /* Expand to fill space */
    display: flex; /* Flexbox for layout */
    flex-direction: column; /* Vertical stacking */
    overflow: visible; /* Ensure no scrollbars */
    color: #ffffff !important; /* Color: #ffffff (White) - Text, changeable via color picker, enforced */
    /* Console log: Applying independent text color change for .mega-content via .mega-content-color-picker */
}

/* Color picker for mega-content text color */
.mega-content-color-picker {
    width: 40px; /* Compact size */
    height: 40px; /* Consistent height */
    border: 2px solid #facc15; /* Color: #facc15 (Grenier's Yellow) - Border */
    border-radius: 8px; /* Rounded corners */
    cursor: pointer; /* Clickable cursor */
    margin: 10px; /* Spacing */
    background: transparent; /* Show color value */
    transition: transform 0.3s ease, border-color 0.3s ease; /* Smooth transition */
    /* Console log: Independent color picker styling for .mega-content text color */
}

/* ============================================================ */
/* Purpose: General Styling for Color Picker Inputs */
/* Block Separator: Color Picker Styling */
/* ============================================================ */
.color-picker {
    width: 40px; /* Compact size */
    height: 40px; /* Consistent height */
    border: 2px solid #facc15; /* Color: #facc15 (Grenier's Yellow) - Border */
    border-radius: 8px; /* Rounded corners */
    cursor: pointer; /* Clickable cursor */
    margin: 10px 0; /* Spacing in dropdown */
    background: transparent; /* Show color value */
    transition: transform 0.3s ease, border-color 0.3s ease; /* Smooth transition */
    /* Console log: General color picker styling for dropdown */
}

.color-picker:hover,
.color-picker:focus {
    border-color: #2e0c5e; /* Color: #2e0c5e (Primary Purple) - Hover */
    transform: scale(1.1) translateZ(5px); /* 3D hover effect */
}

.color-picker:focus {
    outline: 2px solid #2e0c5e; /* Color: #2e0c5e (Primary Purple) - Focus */
    outline-offset: 2px; /* Visible focus */
}

/* ============================================================ */
/* Purpose: Styling for the Mega Menu Columns */
/* Block Separator: Column & Simple Item Styles */
/* ============================================================ */
.mega-columns {
    display: flex; /* Flexbox for responsive grid */
    flex-wrap: wrap; /* Allow wrapping */
    gap: 20px; /* Space between items */
    /* Console log: Merged .mega-columns styles with flexbox layout */
}

/* ============================================================ */
/* Purpose: Styling for Individual Columns in Mega Menu */
/* Block Separator: Column Layout */
/* ============================================================ */
.mega-column {
    flex: 1 1 250px; /* Flexible width, min 250px */
    display: flex; /* Flexbox for items */
    flex-direction: column; /* Vertical stacking */
    gap: 10px; /* Space between items */
    /* Console log: Merged .mega-column styles with flex: 1 */
}

/* ============================================================ */
/* Purpose: Styling for the Mega Menu View All Pricing Button */
/* Block Separator: Menu Item Buttons */
/* ============================================================ */
.mega-item a {
    position: relative; /* For pseudo-elements */
    display: block; /* Full width */
    color: #121212 !important; /* Color: #121212 (Near Black) - High contrast, changeable via color picker, enforced */
    background: linear-gradient(45deg, #ffffff, #ffffff); /* Color: #ffffff (White) - Gradient: 3D button */
    text-decoration: none; /* No underline */
    padding: 8px 0; /* Padding */
    font-size: 15px; /* Readable size */
    font-weight: 600; /* Bold text */
    border-radius: 12px; /* Smooth corners */
    border: 1px solid #facc15; /* Color: #facc15 (Grenier's Yellow) - Border */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2), inset 0 2px 5px rgba(160, 160, 160, 0.3); /* Color: rgba(0, 0, 0, 0.2) - Shadow: 3D depth */
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease; /* Smooth 3D transition, includes color */
    overflow: hidden; /* Contain pseudo-elements */
    /* Console log: Applying independent text color change for .mega-item a via .mega-item-color-picker */
}

/* Color picker for mega-item a text color */
.mega-item-color-picker {
    width: 40px; /* Compact size */
    height: 40px; /* Consistent height */
    border: 2px solid #facc15; /* Color: #facc15 (Grenier's Yellow) - Border */
    border-radius: 8px; /* Rounded corners */
    cursor: pointer; /* Clickable cursor */
    margin: 10px; /* Spacing */
    background: transparent; /* Show color value */
    transition: transform 0.3s ease, border-color 0.3s ease; /* Smooth transition */
    /* Console log: Independent color picker styling for .mega-item a text color */
}

.mega-item a::before {
    content: ''; /* Shine effect */
    position: absolute; /* Position over button */
    top: 0; /* Full coverage */
    left: -100%; /* Start off-screen */
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); /* Color: rgba(255, 255, 255, 0.4) - Shine effect */
    transition: left 0.5s ease; /* Smooth shine */
}

.mega-item a:hover,
.mega-item a:focus {
    transform: translateY(-5px) translateZ(15px) rotate(2deg); /* Enhanced 3D lift and tilt */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25); /* Color: rgba(0, 0, 0, 0.25) - Shadow: Stronger 3D */
    background: linear-gradient(45deg, #facc15, #2e0c5e); /* Color: #facc15 (Grenier's Yellow) to #2e0c5e (Primary Purple) - Gradient: Hover */
    color: #2e0c5e !important; /* Color: #2e0c5e (Primary Purple) - Hover, enforced */
    animation: shine 0.6s ease; /* Shine animation */
}

.mega-item a:focus {
    outline: 2px solid #2e0c5e; /* Color: #2e0c5e (Primary Purple) - Focus */
    outline-offset: 2px; /* Visible focus */
}

/* ============================================================ */
/* Purpose: Animation for Button Glow Effect */
/* Block Separator: Glow Animation for Buttons */
/* ============================================================ */
@keyframes glow {
    0% { box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); } /* Color: rgba(0, 0, 0, 0.2) - Base shadow */
    50% { box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3), 0 0 15px #facc15; } /* Color: #facc15 (Grenier's Yellow) - Glow */
    100% { box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); } /* Color: rgba(0, 0, 0, 0.2) - Base shadow */
}

/* ============================================================ */
/* Purpose: Styling for the Mega Menu Accordion */
/* Block Separator: Accordion Styles */
/* ============================================================ */
.mega-accordion {
    border: 1px solid #e5e7eb; /* Color: #e5e7eb (Light Gray) - Border */
    border-radius: 12px; /* Smooth corners */
    transition: box-shadow 0.3s ease, transform 0.3s ease; /* Smooth 3D transition */
    color: #ffffff !important; /* Color: #ffffff (White) - Text, changeable via color picker, enforced */
    /* Console log: Applying independent text color change for .mega-accordion via .mega-accordion-color-picker */
}

/* Color picker for mega-accordion text color */
.mega-accordion-color-picker {
    width: 40px; /* Compact size */
    height: 40px; /* Consistent height */
    border: 2px solid #facc15; /* Color: #facc15 (Grenier's Yellow) - Border */
    border-radius: 8px; /* Rounded corners */
    cursor: pointer; /* Clickable cursor */
    margin: 10px; /* Spacing */
    background: transparent; /* Show color value */
    transition: transform 0.3s ease, border-color 0.3s ease; /* Smooth transition */
    /* Console log: Independent color picker styling for .mega-accordion text color */
}

.mega-accordion:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); /* Color: rgba(0, 0, 0, 0.2) - Shadow: 3D hover */
    transform: translateZ(10px); /* 3D lift on hover */
}

/* ============================================================ */
/* Purpose: Styling for the Mega Menu Accordion Trigger Button */
/* Block Separator: Accordion Trigger */
/* ============================================================ */
.mega-accordion-trigger {
    width: 100%; /* Full width */
    padding: 10px 0; /* Comfortable padding */
    background: none; /* Simpler background */
    border: none; /* No border */
    text-align: left; /* Align text */
    font-size: 16px; /* Readable size */
    font-weight: 600; /* Bold text */
    color: #121212 !important; /* Color: #121212 (Near Black) - High contrast, changeable via color picker, enforced */
    cursor: pointer; /* Clickable cursor */
    transition: background 0.3s ease, transform 0.3s ease, color 0.3s ease; /* Smooth 3D transition, includes color */
    display: flex; /* Flexbox for layout */
    justify-content: space-between; /* Space out content */
    align-items: center; /* Center vertically */
    box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.3); /* Color: rgba(255, 255, 255, 0.3) - Inset shadow: 3D depth */
    /* Console log: Applying independent text color change for .mega-accordion-trigger via .mega-accordion-trigger-color-picker */
}

/* Color picker for mega-accordion-trigger text color */
.mega-accordion-trigger-color-picker {
    width: 40px; /* Compact size */
    height: 40px; /* Consistent height */
    border: 2px solid #facc15; /* Color: #facc15 (Grenier's Yellow) - Border */
    border-radius: 8px; /* Rounded corners */
    cursor: pointer; /* Clickable cursor */
    margin: 10px; /* Spacing */
    background: transparent; /* Show color value */
    transition: transform 0.3s ease, border-color 0.3s ease; /* Smooth transition */
    /* Console log: Independent color picker styling for .mega-accordion-trigger text color */
}

.mega-accordion-trigger:hover,
.mega-accordion-trigger:focus {
    background: linear-gradient(45deg, #facc15, #2e0c5e); /* Color: #facc15 (Grenier's Yellow) to #2e0c5e (Primary Purple) - Gradient: Hover */
    transform: translateZ(8px) rotate(1deg); /* Subtle 3D tilt */
    color: #2e0c5e !important; /* Color: #2e0c5e (Primary Purple) - Hover, enforced */
    animation: shine 0.6s ease; /* Shine animation */
}

.mega-accordion-trigger:focus {
    outline: 2px solid #2e0c5e; /* Color: #2e0c5e (Primary Purple) - Focus */
    outline-offset: 2px; /* Visible focus */
}

.mega-accordion-trigger i {
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1); /* Smooth icon rotation */
    font-size: 12px; /* Icon size */
    color: #facc15 !important; /* Color: #facc15 (Grenier's Yellow) - Icon, changeable via color picker, enforced */
    /* Console log: Applying independent icon color change for .mega-accordion-trigger i via .mega-accordion-icon-color-picker */
}

/* Color picker for mega-accordion-trigger icon color */
.mega-accordion-icon-color-picker {
    width: 40px; /* Compact size */
    height: 40px; /* Consistent height */
    border: 2px solid #facc15; /* Color: #facc15 (Grenier's Yellow) - Border */
    border-radius: 8px; /* Rounded corners */
    cursor: pointer; /* Clickable cursor */
    margin: 10px; /* Spacing */
    background: transparent; /* Show color value */
    transition: transform 0.3s ease, border-color 0.3s ease; /* Smooth transition */
    /* Console log: Independent color picker styling for .mega-accordion-trigger i icon color */
}

/* ============================================================ */
/* Purpose: Styling for the Mega Menu Active Accordion Trigger */
/* Block Separator: Active Accordion */
/* ============================================================ */
.mega-accordion.active .mega-accordion-trigger {
    background: linear-gradient(45deg, #e5e7eb, #2c0e53); /* Color: #e5e7eb (Light Gray) to #2c0e53 (Dark Purple) - Gradient: Active */
}

/* ============================================================ */
/* Purpose: Styling for the Mega Menu Accordion Panel */
/* Block Separator: Accordion Panel */
/* ============================================================ */
.mega-accordion:not(.active) .mega-accordion-panel {
    max-height: 0; /* Collapsed state */
    overflow: hidden; /* Hide content */
    padding-top: 0; /* No padding when collapsed */
    padding-bottom: 0; /* No padding when collapsed */
    border-top: none; /* No border when collapsed */
    display: none; /* Ensure collapsed state */
    padding-left: 10px; /* Padding for content */
    transition: max-height 0.5s ease-out, padding 0.5s ease-out; /* Smooth expansion */
    /* Console log: Merged .mega-accordion-panel styles */
}

.mega-accordion.active .mega-accordion-panel {
    max-height: none; /* Full content visibility */
    display: block; /* Ensure visibility */
    background: #ffffff; /* Color: #ffffff (White) - Panel */
    padding: 10px; /* Content padding */
    padding-left: 10px; /* Padding for content */
    border-top: 1px solid #e5e7eb; /* Color: #e5e7eb (Light Gray) - Border */
    transition: max-height 0.5s ease-out, padding 0.5s ease-out; /* Smooth expansion */
    /* Console log: Merged .mega-accordion.active .mega-accordion-panel styles */
}

/* ============================================================ */
/* Purpose: Styling for the Mega Menu Accordion Links */
/* Block Separator: Accordion Links */
/* ============================================================ */
.mega-accordion-link {
    position: relative; /* For pseudo-elements */
    display: block; /* Full width */
    padding: 8px 0; /* Comfortable padding */
    color: #121212 !important; /* Color: #121212 (Near Black) - High contrast, changeable via color picker, enforced */
    background: linear-gradient(45deg, #2e0c5e, #2c0e53); /* Color: #2e0c5e (Primary Purple) to #2c0e53 (Dark Purple) - Gradient: 3D button */
    text-decoration: none; /* No underline */
    font-size: 15px; /* Readable size */
    font-weight: 600; /* Bold text */
    border-radius: 10px; /* Smooth corners */
    margin: 4px 0; /* Spacing */
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease; /* Smooth 3D transition, includes color */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); /* Color: rgba(0, 0, 0, 0.2) - Shadow: 3D depth */
    /* Console log: Applying independent text color change for .mega-accordion-link via .mega-accordion-link-color-picker */
}

/* Color picker for mega-accordion-link text color */
.mega-accordion-link-color-picker {
    width: 40px; /* Compact size */
    height: 40px; /* Consistent height */
    border: 2px solid #facc15; /* Color: #facc15 (Grenier's Yellow) - Border */
    border-radius: 8px; /* Rounded corners */
    cursor: pointer; /* Clickable cursor */
    margin: 10px; /* Spacing */
    background: transparent; /* Show color value */
    transition: transform 0.3s ease, border-color 0.3s ease; /* Smooth transition */
    /* Console log: Independent color picker styling for .mega-accordion-link text color */
}

.mega-accordion-link::before {
    content: ''; /* Shine effect */
    position: absolute; /* Position over link */
    top: 0; /* Full coverage */
    left: -100%; /* Start off-screen */
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); /* Color: rgba(255, 255, 255, 0.4) - Shine effect */
    transition: left 0.5s ease; /* Smooth shine */
}

.mega-accordion-link:hover::before,
.mega-accordion-link:focus::before {
    left: 100%; /* Shine moves across */
}

.mega-accordion-link:hover,
.mega-accordion-link:focus {
    background: linear-gradient(45deg, #facc15, #2e0c5e); /* Color: #facc15 (Grenier's Yellow) to #2e0c5e (Primary Purple) - Gradient: Hover */
    transform: translateX(5px) translateZ(12px) rotate(1deg); /* 3D shift and tilt */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25); /* Color: rgba(0, 0, 0, 0.25) - Shadow: Stronger 3D */
    color: #2e0c5e !important; /* Color: #2e0c5e (Primary Purple) - Hover, enforced */
    animation: shine 0.6s ease; /* Shine animation */
}

.mega-accordion-link:focus {
    outline: 2px solid #2e0c5e; /* Color: #2e0c5e (Primary Purple) - Focus */
    outline-offset: 2px; /* Visible focus */
}

/* ============================================================ */
/* Purpose: Styling for Draggable Resize Handles */
/* Block Separator: Resize Handle Styles */
/* ============================================================ */
.resize-handle {
    position: absolute; /* Position on container edges */
    background: #2e0c5e; /* Color: #2e0c5e (Primary Purple) - Handle */
    z-index: 1000001; /* Above header */
    transition: background 0.2s ease, transform 0.2s ease; /* Smooth transition */
    border-radius: 4px; /* Rounded edges */
    cursor: pointer; /* Clickable cursor */
    pointer-events: auto; /* Ensure clickable */
    /* Console log: No text color defined for .resize-handle (visual element only) */
}

/* ============================================================ */
/* Purpose: Styling for Horizontal Resize Handles */
/* Block Separator: Horizontal Resize Handles */
/* ============================================================ */
.resize-top,
.resize-bottom {
    width: 100%; /* Full width */
    height: 5px; /* Handle height */
    left: 12px; /* Align with container */
    right: 12px; /* Align with container */
    cursor: ns-resize; /* Resize cursor */
}

/* ============================================================ */
/* Purpose: Styling for Vertical Resize Handles */
/* Block Separator: Vertical Resize Handles */
/* ============================================================ */
.resize-left,
.resize-right {
    width: 5px; /* Handle width */
    height: 100%; /* Full height */
    top: 12px; /* Align with container */
    bottom: 12px; /* Align with container */
    cursor: ew-resize; /* Resize cursor */
}

.resize-top {
    top: 0; /* Position above container */
}

.resize-bottom {
    bottom: 0; /* Position below container */
}

.resize-left {
    left: 0; /* Position left of container */
}

.resize-right {
    right: 0; /* Position right of container */
}

/* ============================================================ */
/* Purpose: Styling for Corner Resize Handles */
/* Block Separator: Corner Resize Handles */
/* ============================================================ */
.resize-top-left,
.resize-top-right,
.resize-bottom-left,
.resize-bottom-right {
    width: 10px; /* Larger for corners */
    height: 10px; /* Larger for corners */
    background: #2e0c5e; /* Color: #2e0c5e (Primary Purple) - Corner */
    border: 2px solid #ffffff; /* Color: #ffffff (White) - Border */
    border-radius: 50%; /* Circular shape */
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); /* Color: rgba(0, 0, 0, 0.1) - Shadow: 3D depth */
    /* Console log: No text color defined for corner resize handles (visual elements only) */
}

.resize-top-left {
    top: 0; /* Position corner */
    left: 0; /* Position corner */
    cursor: nwse-resize; /* Diagonal cursor */
}

.resize-top-right {
    top: 0; /* Position corner */
    right: 0; /* Position corner */
    cursor: nesw-resize; /* Diagonal cursor */
}

.resize-bottom-left {
    bottom: 0; /* Position corner */
    left: 0; /* Position corner */
    cursor: nesw-resize; /* Diagonal cursor */
}

.resize-bottom-right {
    bottom: 0; /* Position corner */
    right: 0; /* Position corner */
    cursor: nwse-resize; /* Diagonal cursor */
}

.resize-handle:hover,
.resize-handle:focus {
    background: #facc15; /* Color: #facc15 (Grenier's Yellow) - Hover */
    transform: scale(1.2) translateZ(5px); /* 3D hover effect */
}

.resize-handle:focus {
    outline: 2px solid #2e0c5e; /* Color: #2e0c5e (Primary Purple) - Focus */
    outline-offset: 2px; /* Visible focus */
}

/* ============================================================ */
/* Purpose: Fallback Styling for Unsupported Gradients/Transforms */
/* Block Separator: Fallback for Unsupported Gradient/Transform */
/* ============================================================ */
@supports not (background: linear-gradient(45deg, #2e0c5e, #2c0e53)) {
    .mega-item a,
    .mega-accordion-link,
    .mega-accordion-trigger,
    .mega-header {
        background: #2e0c5e; /* Color: #2e0c5e (Primary Purple) - Fallback */
        /* Console log: Fallback styling applied for unsupported gradients */
        
    }
}