/**
 * Telegram Click Tracker Pro - Styles
 * Скрытие номеров на десктопах до клика
 * С поддержкой градиентных текстов и тултипом
 */

@media screen and (min-width: 769px) {
    
    a[href^="tel:"] {
        position: relative;
        display: inline-block;
        transition: all 0.3s ease;
        cursor: pointer;
    }
    
    /* Специальная обработка для градиентных телефонов */
    .gradient-text a[href^="tel:"],
    a[href^="tel:"].gradient-text,
    a[href^="tel:"] .gradient-text {
        background: inherit;
        -webkit-background-clip: inherit;
        background-clip: inherit;
        -webkit-text-fill-color: inherit;
        color: inherit;
    }
    
    /* Основной псевдоэлемент для размытия */
    a[href^="tel:"]::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        width: 35%;
        height: 100%;
        pointer-events: none;
        border-radius: 0 4px 4px 0;
        transition: opacity 0.2s ease;
        z-index: 5;
    }
    
    /* Для обычных телефонов (без градиента) */
    body:not(.has-gradient-support) a[href^="tel:"]:not(.gradient-text):not(.has-text-gradient)::after {
        background: linear-gradient(to right, transparent, rgba(255,255,255,0.9) 20%, rgba(255,255,255,1) 50%);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }
    
    /* Для градиентных телефонов - используем только blur без белой заливки */
    .gradient-text a[href^="tel:"]::after,
    a[href^="tel:"].gradient-text::after,
    a[href^="tel:"] .gradient-text::after,
    .has-xx-large-font-size a[href^="tel:"]::after,
    .wp-block-column a[href^="tel:"]::after {
        background: transparent !important;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        box-shadow: inset -10px 0 10px -5px rgba(0,0,0,0.1);
    }
    
    /* Тултип при наведении */
    a[href^="tel:"]::before {
        content: "Показать номер телефона";
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%) translateY(-5px);
        background: rgba(0, 0, 0, 0.8);
        color: white;
        font-size: 12px;
        padding: 4px 8px;
        border-radius: 4px;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
        z-index: 1000;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        font-weight: normal;
        letter-spacing: normal;
        text-transform: none;
        -webkit-text-fill-color: white;
        background-clip: unset;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }
    
    /* Маленькая стрелочка у тултипа */
    a[href^="tel:"]::before {
        border-bottom: 6px solid transparent;
    }
    
    /* Показываем тултип при наведении */
    a[href^="tel:"]:hover::before {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(-10px);
    }
    
    /* Не показываем тултип, если номер уже раскрыт */
    a[href^="tel:"].phone-revealed:hover::before {
        opacity: 0;
        visibility: hidden;
    }
    
    /* Когда номер раскрыт - убираем все эффекты */
    a[href^="tel:"].phone-revealed::after {
        opacity: 0;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
    }
    
    a[href^="tel:"].phone-revealed {
        filter: drop-shadow(0 0 5px rgba(0,160,255,0.3));
    }
    
    /* Эффект свечения при раскрытии */
    .phone-reveal-glow {
        animation: phoneGlow 0.5s ease;
    }
    
    @keyframes phoneGlow {
        0% { filter: drop-shadow(0 0 0 rgba(0,160,255,0)); }
        50% { filter: drop-shadow(0 0 10px rgba(0,160,255,0.5)); }
        100% { filter: drop-shadow(0 0 0 rgba(0,160,255,0)); }
    }
    
    /* Поддержка старых браузеров */
    @supports not (backdrop-filter: blur(3px)) {
        .gradient-text a[href^="tel:"]::after,
        a[href^="tel:"].gradient-text::after,
        a[href^="tel:"] .gradient-text::after {
            background: linear-gradient(to right, transparent, rgba(255,255,255,0.1) 30%, rgba(255,255,255,0.2) 60%) !important;
            backdrop-filter: none;
        }
    }
}

@media screen and (max-width: 768px) {
    a[href^="tel:"]::after {
        display: none;
    }
    
    /* На мобильных тултип не нужен */
    a[href^="tel:"]::before {
        display: none;
    }
}

/* Дополнительные стили для градиентных блоков */
.gradient-text {
    background: linear-gradient(90deg, #B1B7C7 0%, #FFFFFF 42.15%, #B1B7C7 55.31%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
}

/* Фикс для ссылок внутри градиентных блоков */
.gradient-text a {
    background: inherit;
    -webkit-background-clip: inherit;
    background-clip: inherit;
    -webkit-text-fill-color: inherit;
    color: inherit;
}

/* Фикс для больших градиентных телефонов */
.has-xx-large-font-size a[href^="tel:"] {
    background: linear-gradient(90deg, #B1B7C7 0%, #FFFFFF 42.15%, #B1B7C7 55.31%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Дополнительный тултип для градиентных телефонов (на всякий случай) */
.gradient-text a[href^="tel:"]::before,
.has-xx-large-font-size a[href^="tel:"]::before {
    -webkit-text-fill-color: white;
    color: white;
    background-clip: unset;
}