/* Базовые стили для всех контактов */
.clickable-contact {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-block;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
}

/* ЦВЕТА ДЛЯ КАЖДОГО ТИПА */
.clickable-contact.phone { 
     color: ##cc3300 !important;  /* бордовый для телефона */
}

.clickable-contact.telegram { 
    color: #0088cc !important;  /* Синий Telegram */
}

.clickable-contact.youtube { 
    color: #ff0000 !important;  /* Красный YouTube */
}

.clickable-contact.vk { 
    color: #4a76a8 !important;  /* Синий VK */
}

.clickable-contact.instagram { 
    color: #e4405f !important;  /* Розовый Instagram */
}

.clickable-contact.whatsapp { 
    color: #25D366 !important;  /* Зелёный WhatsApp */
}

.clickable-contact.email { 
    color: #6c757d !important;  /* Серый Email */
}

.clickable-contact.custom { 
    color: #0066cc !important;  /* Синий по умолчанию */
}

/* HOVER - индивидуальные цвета для каждого типа (темнее) */
.clickable-contact.phone:not(.contact-revealed):hover { 
    color: #218838 !important;  /* Тёмно-зелёный */
}

.clickable-contact.telegram:not(.contact-revealed):hover { 
    color: #006699 !important;  /* Тёмно-синий */
}

.clickable-contact.youtube:not(.contact-revealed):hover { 
    color: #cc0000 !important;  /* Тёмно-красный */
}

.clickable-contact.vk:not(.contact-revealed):hover { 
    color: #2a4e77 !important;  /* Тёмно-синий VK */
}

.clickable-contact.instagram:not(.contact-revealed):hover { 
    color: #d82e4a !important;  /* Тёмно-розовый */
}

.clickable-contact.whatsapp:not(.contact-revealed):hover { 
    color: #1da851 !important;  /* Тёмно-зелёный WhatsApp */
}

.clickable-contact.email:not(.contact-revealed):hover { 
    color: #5a6268 !important;  /* Тёмно-серый */
}

.clickable-contact.custom:not(.contact-revealed):hover { 
    color: #004499 !important;  /* Тёмно-синий */
}

/* После клика - цвета остаются яркими, убираем подчёркивание */
.clickable-contact.contact-revealed {
    text-decoration: none !important;
    cursor: default !important;
    pointer-events: none !important;
}

/* Убираем hover эффекты для раскрытых контактов */
.clickable-contact.contact-revealed:hover {
    filter: none !important;
    color: inherit !important;  /* Сохраняем исходный яркий цвет */
}

/* Эффект нажатия (только для нераскрытых) */
.clickable-contact:not(.contact-revealed):active {
    transform: scale(0.95);
}