/* ========================================================================
   SMART STICKY BUTTONS SYSTEM - ORGANIZED CSS
   ========================================================================
   
   Structure:
   1. Desktop Styles (>992px)
   2. Mobile Base Styles (≤992px)
   3. Real Accordion Buttons
   4. Sticky Buttons Container
   5. Sticky Button Elements
   6. Dropdown Menu Positioning
   7. Small Mobile Adjustments (<600px)
   8. Button Alignment & Fixes
   
   ======================================================================== */


/* ========================================================================
   1. DESKTOP STYLES (Above 992px)
   ======================================================================== */

/* @media (min-width: 993px) { */
    /* Desktop buttons stay in normal flow */
    /* .submit-form-btn {
        display: flex !important;
        flex-direction: row !important;
        gap: 0 !important;
        width: 100% !important;
    } */
/* } */


/* ========================================================================
   2. MOBILE/ACCORDION BASE (992px and below)
   ======================================================================== */

@media (max-width: 992px) {
    
    /* ====================================================================
       3. REAL ACCORDION BUTTONS (Inside Form)
       ==================================================================== */
    

    /* ----------------------------------------
       Real Dropdown Wrapper (Plus Button) - 1/3
       ---------------------------------------- */
    
    
    /* ----------------------------------------
       Real Submit Button - 2/3 Width
       ---------------------------------------- */
   
    
    /* ----------------------------------------
       Sticky Container Base Styles
       ---------------------------------------- */
    
    #sticky-submit-buttons {
        /* Positioning */
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 1000 !important;
        
        /* Display */
        display: none !important; /* Hidden by default */
        
        /* Visual */
        background: white !important;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15) !important;
        
        /* Animation */
        transform: translateY(100%) !important;
        transition: transform 0.3s ease-out !important;
        
        /* Spacing */
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* ----------------------------------------
       Sticky Container - Visible State
       ---------------------------------------- */
    
    #sticky-submit-buttons.visible {
        display: block !important;
        transform: translateY(0) !important;
    }
    
    /* ----------------------------------------
       Sticky Container - Hidden State (At Real Position)
       ---------------------------------------- */
    
    #sticky-submit-buttons.at-real-position {
        transform: translateY(100%) !important;
    }
    
    
    /* ====================================================================
       5. STICKY BUTTON ELEMENTS (Cloned Buttons)
       ==================================================================== */
    
    /* ----------------------------------------
       Sticky Buttons Container - 1/3 + 2/3 Split
       ---------------------------------------- */
    
    #sticky-submit-buttons .submit-form-btn {
        display: flex !important;
        flex-direction: row !important;
        gap: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* ----------------------------------------
       Sticky Dropdown Wrapper (Plus Button) - 1/3
       ---------------------------------------- */
    
    #sticky-submit-buttons .submit-form-btn > .dropdown {
        flex: 0 0 calc(100% / 3) !important;
        width: calc(100% / 3) !important;
        min-width: unset !important;
    }
    
    /* ----------------------------------------
       Sticky Plus Button - Full Width of Container
       ---------------------------------------- */
    
    #sticky-submit-buttons .submit-form-btn > .dropdown > button {
        width: 100% !important;
        height: 60px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }
    
    /* ----------------------------------------
       Sticky Submit Button - 2/3 Width
       ---------------------------------------- */
    
    #sticky-submit-buttons .submit-form-btn > .submit-button,
    #sticky-submit-buttons .submit-form-btn > button.submit-button {
        flex: 0 0 calc(100% * 2 / 3) !important;
        width: calc(100% * 2 / 3) !important;
        margin: 0 !important;
        padding: 0 !important;
        height: 60px !important;
        border-radius: 0 !important;
    }
    
    
    /* ====================================================================
       6. DROPDOWN MENU POSITIONING
       ==================================================================== */
    
    /* ----------------------------------------
       Dropdown Menu - Appears Above Sticky Container
       ---------------------------------------- */
    
    #sticky-submit-buttons .dropdown-menu {
        top: auto !important;
        transform-origin: bottom !important;
        margin-bottom: 2px !important;
        margin-left: 2px !important;
    }
    
    
    /* ====================================================================
       7. SMALL MOBILE ADJUSTMENTS (Below 600px)
       ==================================================================== */
    
    @media (max-width: 600px) {
        
        /* ----------------------------------------
           Smaller Button Heights for Small Screens
           ---------------------------------------- */
        
        
        #sticky-submit-buttons .submit-form-btn > .dropdown > button {
            height: 55px !important;
        }
        
        
        #sticky-submit-buttons .submit-form-btn > .submit-button,
        #sticky-submit-buttons .submit-form-btn > button.submit-button {
            height: 55px !important;
        }
        
        /* ----------------------------------------
           Smaller Plus Button Font Size
           ---------------------------------------- */
        
        #sticky-submit-buttons .submit-form-btn > .dropdown > button {
            font-size: 32px !important;
        }
    }
    
    
    /* ====================================================================
       8. BUTTON ALIGNMENT & FIXES
       ==================================================================== */
    
    /* ----------------------------------------
       Remove Border Radius from First/Last Child
       Prevents gaps between buttons
       ---------------------------------------- */
    
   
    #sticky-submit-buttons .submit-form-btn > *:first-child {
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
    }
    
  
    #sticky-submit-buttons .submit-form-btn > *:last-child {
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }
    
    /* ----------------------------------------
       Dropdown Button Flexbox Alignment
       Centers content inside plus button
       ---------------------------------------- */
    
   
    #sticky-submit-buttons .submit-form-btn .dropdown > button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}


/* ========================================================================
   END OF SMART STICKY BUTTONS SYSTEM
   ======================================================================== */