/* ============================================
   CONTACT BAR (Desktop)
   Vertical stack of contact options
   ============================================ */

.contact-bar {
    position: fixed;
    top: 50%;
    right: 2rem;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    z-index: 999;
    padding: 1rem;
    border-radius: 60px;
}

.contact-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    cursor: pointer;
}

/* Growth direction based on position in stack */
.contact-btn:nth-child(1) {
    transform-origin: top center;  /* Top icon grows DOWN */
}

.contact-btn:nth-child(2) {
    transform-origin: center center;  /* Middle icon grows in place */
}

.contact-btn:nth-child(3) {
    transform-origin: bottom center;  /* Bottom icon grows UP */
}

/* Hover: grow the hovered icon */
.contact-btn:hover {
    transform: scale(1.3);
}

/* When TOP icon hovered: shrink bottom two */
.contact-bar:has(.contact-btn:nth-child(1):hover) .contact-btn:nth-child(2) {
    transform: scale(0.8) translateY(8px);
    opacity: 0.5;
}

.contact-bar:has(.contact-btn:nth-child(1):hover) .contact-btn:nth-child(3) {
    transform: scale(0.8);
    opacity: 0.5;
}

/* When MIDDLE icon hovered: shrink top and bottom */
.contact-bar:has(.contact-btn:nth-child(2):hover) .contact-btn:nth-child(1) {
    transform: scale(0.8);
    opacity: 0.5;
}

.contact-bar:has(.contact-btn:nth-child(2):hover) .contact-btn:nth-child(3) {
    transform: scale(0.8);
    opacity: 0.5;
}

/* When BOTTOM icon hovered: shrink top two */
.contact-bar:has(.contact-btn:nth-child(3):hover) .contact-btn:nth-child(1) {
    transform: scale(0.8);
    opacity: 0.5;
}

.contact-bar:has(.contact-btn:nth-child(3):hover) .contact-btn:nth-child(2) {
    transform: scale(0.8) translateY(-8px);
    opacity: 0.5;
}

.contact-btn img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

/* ============================================
   MOBILE CTA BAR (Bottom Navigation)
   ============================================ */

.mobile-cta-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.1);
    z-index: 998;
    padding: 0.75rem;
}

.mobile-cta-bar .cta-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.75rem;
    color: var(--text-primary);
    font-size: 0.75rem;
    font-weight: 500;
    transition: all var(--transition-base);
    border-radius: var(--radius-sm);
}

.mobile-cta-bar .cta-btn:hover {
    background: var(--bg-secondary);
}

.mobile-cta-bar .cta-btn i {
    width: 24px;
    height: 24px;
    color: var(--primary);
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .mobile-cta-bar {
        display: flex;
    }
    
    .contact-bar {
        top: auto;
        bottom: 5.5rem;
        right: 1rem;
        transform: none;
        padding: 0.75rem;
        gap: 0.75rem;
    }
    
    .contact-btn {
        width: 52px;
        height: 52px;
    }
    
    .contact-btn img {
        width: 28px;
        height: 28px;
    }
}