/* Expandable Widget System for Mobile and Tablet
 * This system creates a collapsible widget container that expands/collapses on mobile/tablet
 * while maintaining original desktop behavior
 */

/* Desktop - No changes, widgets work as normal */
@media (min-width: 1025px) {
    .widget-expander,
    .expandable-widgets-container {
        display: none !important;
    }
}

/* Tablet and Mobile - Expandable Widget System */
@media (max-width: 1024px) {
    /* Ensure the expander button is always visible and clickable */
    .widget-expander {
        /* Force the button to be on top of everything */
        z-index: 2147483647; /* Maximum z-index value */
        /* Prevent any parent containers from hiding it */
        isolation: isolate;
        /* Make sure it's not affected by transforms */
        position: fixed !important;
        right: 20px !important;
        bottom: 20px !important;
        /* Ensure it's always visible */
        visibility: visible !important;
        display: flex !important;
        opacity: 1 !important;
    }

    /* Hide individual widgets by default on mobile/tablet */
    .whatsapp-widget,
    .teams-widget,
    .email-widget {
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(100px) !important; /* Slide from bottom instead of right */
        transition: all 0.3s ease !important;
        pointer-events: none !important;
    }
    
    /* Position widgets above the expand/collapse button when expanded */
    body.widgets-expanded .email-widget {
        bottom: 90px !important; /* First widget above button (20px + 70px spacing) */
    }
    
    body.widgets-expanded .whatsapp-widget {
        bottom: 160px !important; /* Second widget (90px + 70px spacing) */
    }
    
    body.widgets-expanded .teams-widget {
        bottom: 230px !important; /* Third widget (160px + 70px spacing) */
    }
    
    /* Show widgets when container is expanded */
    .expandable-widgets-container.expanded .whatsapp-widget,
    .expandable-widgets-container.expanded .teams-widget,
    .expandable-widgets-container.expanded .email-widget {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important; /* Slide up to original position */
        pointer-events: auto !important;
        z-index: 99995 !important; /* Above overlay but below expander button */
    }
    
    /* Also target widgets that might be created dynamically */
    body .whatsapp-widget,
    body .teams-widget,
    body .email-widget {
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(100px) !important; /* Slide from bottom instead of right */
        transition: all 0.3s ease !important;
        pointer-events: none !important;
    }
    
    /* Show dynamically created widgets when expanded */
    body .expandable-widgets-container.expanded ~ .whatsapp-widget,
    body .expandable-widgets-container.expanded ~ .teams-widget,
    body .expandable-widgets-container.expanded ~ .email-widget,
    .expandable-widgets-container.expanded ~ .whatsapp-widget,
    .expandable-widgets-container.expanded ~ .teams-widget,
    .expandable-widgets-container.expanded ~ .email-widget {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important; /* Slide up to original position */
        pointer-events: auto !important;
        z-index: 99995 !important; /* Above overlay but below expander button */
    }
    
    /* Widget Expander Button */
    .widget-expander {
        position: fixed;
        right: 20px;
        bottom: 20px; /* Positioned at bottom like other widgets */
        z-index: 99999; /* Very high z-index to ensure it's always visible */
        width: 56px;
        height: 56px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: 2px solid rgba(255, 255, 255, 0.2); /* Subtle white border */
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
        transition: all 0.3s ease;
        outline: none;
        /* Ensure it's always visible and clickable */
        pointer-events: auto;
        transform: translateZ(0); /* Force hardware acceleration */
        /* Additional visibility ensures */
        visibility: visible !important;
        opacity: 1 !important;
        /* Prevent parent containers from hiding it */
        isolation: isolate;
    }
    
    .widget-expander:hover {
        transform: scale(1.1);
        box-shadow: 0 6px 25px rgba(102, 126, 234, 0.6);
    }
    
    .widget-expander:active {
        transform: scale(0.95);
    }
    
    /* Add subtle pulsing animation to attract attention */
    .widget-expander::before {
        content: '';
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        border-radius: 50%;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        opacity: 0;
        z-index: -1;
        animation: expander-pulse 3s infinite;
    }
    
    @keyframes expander-pulse {
        0%, 70%, 100% {
            opacity: 0;
            transform: scale(1);
        }
        35% {
            opacity: 0.3;
            transform: scale(1.1);
        }
    }
    
    /* Expander Icon */
    .widget-expander-icon {
        width: 24px;
        height: 24px;
        position: relative;
        transition: transform 0.3s ease;
    }
    
    .widget-expander-icon::before,
    .widget-expander-icon::after {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        background: white;
        border-radius: 2px;
        transition: all 0.3s ease;
    }
    
    .widget-expander-icon::before {
        width: 16px;
        height: 2px;
        transform: translate(-50%, -50%);
    }
    
    .widget-expander-icon::after {
        width: 2px;
        height: 16px;
        transform: translate(-50%, -50%);
    }
    
    /* Transform icon when expanded - rotates to show collapse (X) */
    .widget-expander.expanded .widget-expander-icon {
        transform: rotate(45deg);
    }
    
    /* Widget Counter Badge */
    .widget-counter {
        position: absolute;
        top: -5px;
        right: -5px;
        background: #ff4757;
        color: white;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        font-size: 11px;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: pulse-badge 2s infinite;
    }
    
    @keyframes pulse-badge {
        0%, 50%, 100% {
            transform: scale(1);
        }
        25%, 75% {
            transform: scale(1.1);
        }
    }
    
    /* Global override when widgets are expanded */
    body.widgets-expanded .whatsapp-widget,
    body.widgets-expanded .teams-widget,
    body.widgets-expanded .email-widget {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important; /* Slide up to original position */
        pointer-events: auto !important;
        z-index: 99995 !important; /* Above overlay but below expander button */
    }
    
    /* Stagger animation for widgets appearing - bottom to top order */
    body.widgets-expanded .email-widget {
        transition-delay: 0.1s !important; /* Email first (closest to button) */
    }
    
    body.widgets-expanded .whatsapp-widget {
        transition-delay: 0.2s !important; /* WhatsApp second (middle) */
    }
    
    body.widgets-expanded .teams-widget {
        transition-delay: 0.3s !important; /* Teams last (furthest from button) */
    }
    
    /* Overlay when widgets are expanded */
    .widgets-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.1);
        z-index: 99990; /* High but lower than expander button */
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        backdrop-filter: blur(2px);
    }
    
    .widgets-overlay.active {
        opacity: 1;
        visibility: visible;
    }
    
    /* Tooltip for expander */
    .widget-expander-tooltip {
        position: absolute;
        right: 65px;
        bottom: 50%; /* Position above the button since it's at bottom */
        transform: translateY(50%); /* Adjust transform for bottom positioning */
        background: #2d3748;
        color: white;
        padding: 8px 12px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 500;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        pointer-events: none;
    }
    
    .widget-expander-tooltip::after {
        content: '';
        position: absolute;
        top: 50%;
        right: -6px;
        transform: translateY(-50%);
        border: 6px solid transparent;
        border-left-color: #2d3748;
    }
    
    .widget-expander:hover .widget-expander-tooltip {
        opacity: 1;
        visibility: visible;
        transform: translateY(50%) translateX(-5px);
    }
    
    /* Hide tooltip when expanded */
    .widget-expander.expanded .widget-expander-tooltip {
        display: none;
    }
}

/* Tablet adjustments */
@media (max-width: 768px) and (min-width: 481px) {
    .widget-expander {
        right: 20px;
        bottom: 20px; /* Keep at bottom for tablet */
    }
}

/* Small mobile adjustments */
@media (max-width: 480px) {
    .widget-expander {
        right: 15px;
        bottom: 15px; /* Keep at bottom for mobile */
        width: 50px;
        height: 50px;
        /* Make it more prominent on small screens */
        box-shadow: 0 6px 30px rgba(102, 126, 234, 0.6);
        /* Ensure it's always above everything */
        z-index: 999999;
    }
    
    .widget-expander-icon {
        width: 20px;
        height: 20px;
    }
    
    .widget-expander-icon::before {
        width: 14px;
    }
    
    .widget-expander-icon::after {
        height: 14px;
    }
    
    .widget-counter {
        width: 18px;
        height: 18px;
        font-size: 10px;
    }
    
    .widget-expander-tooltip {
        font-size: 11px;
        padding: 6px 10px;
        right: 60px;
    }
}

/* Accessibility improvements */
.widget-expander:focus {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .widget-expander,
    .widget-expander-icon,
    .whatsapp-widget,
    .teams-widget,
    .email-widget,
    .widgets-overlay {
        transition: none !important;
        animation: none !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .widget-expander {
        background: #000;
        border: 2px solid #fff;
    }
    
    .widget-counter {
        background: #ff0000;
        border: 1px solid #fff;
    }
}

/* Ensure button is always above Calendly and other widgets */
.widget-expander {
    z-index: 2147483647 !important; /* Maximum possible z-index */
}

/* Force visibility over any potential conflicting elements */
@media (max-width: 1024px) {
    /* Ensure our button is above Calendly badge widget */
    .calendly-badge-widget {
        z-index: 99998 !important; /* Lower than our button */
    }
    
    /* Ensure our button is above any other floating elements */
    .widget-expander {
        z-index: 2147483647 !important;
        position: fixed !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    
    /* Make sure no parent element can hide it */
    body .widget-expander {
        z-index: 2147483647 !important;
        position: fixed !important;
    }
    
    /* Safety net for any container that might contain it */
    * .widget-expander {
        z-index: 2147483647 !important;
        position: fixed !important;
    }
    
    /* Ensure widgets are above overlay when expanded */
    .whatsapp-widget,
    .teams-widget,
    .email-widget {
        z-index: 99995 !important;
    }
    
    /* Force widgets to be clickable when expanded */
    body.widgets-expanded .whatsapp-widget,
    body.widgets-expanded .teams-widget,
    body.widgets-expanded .email-widget {
        z-index: 99995 !important;
        pointer-events: auto !important;
        position: fixed !important;
    }
}