/* Phone Number Hover Animation in Header */
.phone-animated {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    /* Prevent wrapping to next line */
    align-items: center;
    background: rgba(var(--accent-color-rgb), 0.1);
    border: 1px solid rgba(var(--accent-color-rgb), 0.3);
    border-radius: 50px;
    padding: 8px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: visible;
    max-width: 60px;
    min-width: 60px;
    /* Prevent container from shrinking */
    cursor: pointer;
}

/* Icon always visible, NOT overlapping */
.phone-animated .icon-circle {
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
}

/* Phone number hidden by default, positioned AFTER icon */
.phone-animated .phone-number {
    display: inline-block;
    white-space: nowrap;
    margin-left: 0;
    opacity: 0;
    width: 0;
    /* Use width instead of max-width for better control */
    overflow: hidden;
    position: relative;
    z-index: 2;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: inherit;
    line-height: 1;
    flex-shrink: 0;
    /* Prevent number from shrinking */
}

/* Hover: Expand container and show number */
.phone-animated:hover {
    max-width: 280px;
    min-width: 280px;
    /* Ensure container stays wide during transition */
    padding-right: 20px;
    background: rgba(var(--accent-color-rgb), 0.15);
    box-shadow: 0 0 20px rgba(var(--accent-color-rgb), 0.3);
}

.phone-animated:hover .phone-number {
    opacity: 1;
    width: 200px;
    /* Fixed width for smooth transition */
    margin-left: 10px;
}

.phone-animated:hover .icon-circle {
    transform: scale(1.05);
}

/* Subtle pulse effect when not hovered */
@keyframes subtlePulse {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(var(--accent-color-rgb), 0.2);
    }

    50% {
        box-shadow: 0 0 15px rgba(var(--accent-color-rgb), 0.4);
    }
}

.phone-animated {
    animation: subtlePulse 3s ease-in-out infinite;
}

.phone-animated:hover {
    animation: none;
}

/* Responsive adjustments */
@media (max-width: 1199px) {
    .phone-animated {
        max-width: 60px;
        min-width: 60px;
        padding: 8px;
    }

    .phone-animated .phone-number {
        display: none;
    }

    .phone-animated:hover {
        max-width: 60px;
        min-width: 60px;
    }
}