/* --- Floating Contact Styles --- */
:root {
    /* More transparent for better glass effect */
    --glass-bg: rgba(255, 255, 255, 0.2); 
    /* Stronger blur */
    --glass-blur: 20px;
    --glass-border: 0px solid rgba(255, 255, 255, 0.3);
    /* Softer shadow */
    --glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
    
    /* Bigger hover scale */
    --hover-scale: 1.25;
    --anim-speed: 0.3s;
    
    --z-index-contact: 5999;
}

/* Base Container */
.contact-float {
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-index-contact);
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none; /* Let clicks pass through outside the bar */
}

/* Glass Bar */
.contact-float__glass {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: var(--glass-border);
    box-shadow: var(--glass-shadow);
    border-radius: 50px; /* Pill shape */
    padding: 10px 24px;
    pointer-events: auto; /* Re-enable clicks */
    transition: transform var(--anim-speed) cubic-bezier(0.34, 1.56, 0.64, 1);
}

.contact-float__glass:hover {
    /* No scale on container, keep it stable */
    background: rgba(255, 255, 255, 0.3); 
}

/* List Reset */
.contact-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Items */
.contact-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Links (Buttons) */
.contact-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    transition: all var(--anim-speed) ease;
    background: transparent;
    position: relative;
    text-decoration: none;
}

/* Hover Effects with pseudo-element for colored background */
.contact-link::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    border-radius: 50%;
    background: currentColor; /* Inherit from specific modifier */
    opacity: 0;
    transform: scale(0.8);
    transition: all var(--anim-speed) ease;
    z-index: -1;
}

.contact-link:hover {
    /* Only Scale (Grow), no sliding */
    transform: scale(var(--hover-scale));
    z-index: 10; /* Bring to front */
}

.contact-link:hover::before {
    opacity: 0.15; /* Subtle colored background */
    transform: scale(1);
}

/* Icon Colors */
.contact-link--whatsapp { color: #25D366; }
.contact-link--phone    { color: #0ea5e9; }
.contact-link--email    { color: #ea4335; }

/* SVG Optimization */
.icon {
    display: block;
    width: 32px;
    height: 32px;
    /* Force Hardware Acceleration for smooth scaling */
    transform: translateZ(0); 
    /* Ensure color is respected */
    fill: currentColor; 
}
/* Note: Using fill definitions in SVG paths directly for multi-color support, 
   or currentColor for single-color icons. Above SVG paths have specific hex fills.
   Let's ensure the SVG paths use 'currentColor' if we want hover states to match text color,
   OR keep original colors as requested. 
   
   The user asked for ORIGINAL colors. So the SVGs have hardcoded fills in the HTML above.
   The :hover::before effect uses the CSS color property to create a matching background tint.
*/

/* Accessibility Helpers */
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

/* --- Responsive Logic --- */

/* 1. All Devices (Default) */
.contact-float--all { display: flex; }

/* 2. Desktop Only */
@media (max-width: 767px) {
    .contact-float--desktop { display: none !important; }
}

/* 3. Mobile Only */
@media (min-width: 768px) {
    .contact-float--mobile { display: none !important; }
}

/* Mobile Tweaks */
@media (max-width: 767px) {
    .contact-float {
        bottom: 40px;
        width: 80%; /* Safety margin */
    }
    .contact-float__glass {
        padding: 8px 16px;
        width: 100%;
        justify-content: center;
        display: flex;
    }
    .contact-list {
        gap: 20px; /* Tighter on mobile */
        justify-content: space-around;
        width: 100%;
    }
    .contact-link {
        width: 44px;
        height: 44px;
    }
    .icon {
        width: 28px;
        height: 28px;
    }
}

/* Print Optimization */
@media print {
    .contact-float { display: none; }
}