/* Кнопки скачивания (.myButton) для fstory на RU-сайте.
   Перебивает старый стиль .myButton из templates_ru/style.css (outline + transparent).
   Используется в fstory_new7vhb58.php для takefile / tezfiles ссылок.
   Подключается только в templates_ru/main.tpl. */

.myButton {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 22px !important;
    margin: 6px 4px;
    box-sizing: border-box;
    background: #2a2a2a !important;
    color: #c8c8c8 !important;
    text-decoration: none !important;
    border: none !important;
    border-radius: 22px !important;
    font-family: Arial, sans-serif;
    font-size: 15px !important;
    font-weight: 600;
    cursor: pointer;
    box-shadow: none !important;
    transition: all 0.2s ease;
    line-height: 1;
    white-space: nowrap;
}

/* Иконка «скачать» (стрелка вниз + горизонтальная полоска) — inline SVG через CSS,
   не требует правок шаблонов/кода. */
.myButton::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23c8c8c8" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>') no-repeat center;
    background-size: contain;
    flex-shrink: 0;
    transition: filter 0.2s ease;
}

/* Модификатор для "смотреть": заменяет download-стрелку на play-треугольник.
   Используется в fstory для гостевой кнопки "Смотреть фильм полностью". */
.myButton-play::before {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23c8c8c8" stroke="%23c8c8c8" stroke-width="2" stroke-linejoin="round"><polygon points="6 4 20 12 6 20 6 4"/></svg>') no-repeat center !important;
}

.myButton:hover {
    background: #EBBE5E !important;
    color: #2a2a2a !important;
}
/* На золотистом фоне белая иконка не видна → invert делает её тёмной. */
.myButton:hover::before {
    filter: invert(1);
}

.myButton:active {
    transform: translateY(1px);
}

/* Мобильный/планшет: кнопки в столбец, на всю ширину. */
@media (max-width: 768px) {
    .myButton {
        display: flex !important;
        width: 100%;
        margin: 8px 0 !important;
    }
}