.phone {
    position: relative;
    display: block;
    margin-left: 15px;
    align-self: center;
}

.phone-container {
    position: relative;
    padding-right: 1rem;
    display: inline-flex; 
    align-items: center;
}

.phone-toggle {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.phone-arrow {
    position: relative;
    margin-left: 0px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    transition: transform 0.3s;
    flex-shrink: 0;
}
.phone-arrow::after {
    content: '';
    display: block;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 16px solid #ffffff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Исправленный селектор */
.phone-toggle:checked ~ .dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
}

.phone-toggle:checked + .phone-arrow {
    transform: translateY(0%) rotate(180deg);
}

.dropdown-menu {
    display: block; /* Изменено с none */
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    color:black;
    border: 1px solid #ddd;
    padding: 1rem;
    min-width: 200px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 1000;
    margin-top: 1rem;
    transition: opacity 0.3s, visibility 0.3s;
    right: auto; 
    left: 0;
}

.dropdown-menu a {
    display: block;
    margin: 8px 0;
    text-decoration: none;
    color: var(--primary-color);
}

.phone__subname {
    display: block;
    font-size: 0.8em;
    color: #666;
    margin: 5px 0;
}

.dropdown-item {
    color: var(--primary-color);
}