/* Widget Positioning Guide
 * This file documents the positioning system for all floating widgets
 * to prevent overlapping and ensure proper spacing
 *
 * DESKTOP (1025px+) - ORIGINAL BEHAVIOR:
 * RIGHT SIDE WIDGETS (right: 20px):
 * 1. Teams Widget    - bottom: 240px (top)
 * 2. WhatsApp Widget - bottom: 160px (middle) 
 * 3. Email Widget   - bottom: 80px (bottom)
 * LEFT SIDE WIDGETS (left: 20px):
 * 1. Calendly Widget - bottom: 120px
 *
 * TABLET & MOBILE (1024px and below) - EXPANDABLE SYSTEM:
 * - All widgets hidden by default
 * - Single expandable button at bottom-right
 * - Widgets appear in staggered animation when expanded
 * - Overlay backdrop for easy closing
 * - Counter badge shows number of available widgets
 *
 * EXPANDABLE SYSTEM POSITIONS:
 * - Expander Button: right: 15px, bottom: 20px (tablet), right: 10px, bottom: 15px (mobile)
 * - Widgets maintain responsive sizes when expanded
 * - Calendly widget remains on left side, unaffected by expandable system
 *
 * RESPONSIVE BREAKPOINTS:
 * - Desktop: 1025px+ (original widget behavior)
 * - Tablet: 769px-1024px (expandable system)
 * - Mobile: 481px-768px (expandable system, smaller expander)
 * - Small Mobile: 480px and below (expandable system, smallest expander)
 *
 * INTERACTION BEHAVIOR:
 * - Desktop: Widgets always visible, hover tooltips
 * - Tablet/Mobile: Tap expander to show/hide all widgets
 * - Auto-close on: outside click, escape key, overlay click
 * - Prevents body scroll when expanded
 *
 * ACCESSIBILITY FEATURES:
 * - ARIA labels and expanded states
 * - Keyboard navigation support
 * - Focus management
 * - Reduced motion support
 * - High contrast mode compatibility
 *
 * ADDING NEW WIDGETS:
 * - Desktop: Follow existing spacing rules (80px gaps)
 * - Mobile/Tablet: Add to expandable system selectors
 * - Update counter in expandable-widgets.js
 * - Test on all breakpoints
 */

/* Global widget container styles */
.widget-container {
    pointer-events: none;
}

.widget-container > * {
    pointer-events: auto;
}

/* Ensure all widgets don't interfere with page scroll */
.teams-widget,
.whatsapp-widget,
.email-widget,
.calendly-badge-widget {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}