/* Файл: assets/css/features.css (Baseline v4.5 - Фикс модального окна "Поделиться") */

.tooltip-icon { display: inline-block; position: relative; margin-left: 8px; color: var(--accent-color); cursor: help; }
.tooltip-icon::after {
    z-index: 1002; content: attr(data-tooltip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
    width: 280px; padding: 10px; background-color: #333; border-radius: 5px; font-size: 0.85rem; opacity: 0; visibility: hidden; transition: all 0.2s;
}
.tooltip-icon:hover::after { opacity: 1; visibility: visible; }

.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85);
    display: none; justify-content: center; align-items: center; z-index: 2000;
}
.modal-content { position: relative; max-width: 90vw; max-height: 90vh; display: flex; justify-content: center; align-items: center; }

/* ГЛОБАЛЬНЫЙ ВИДЕО ПЛЕЕР */
.video-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.95);
    display: none; justify-content: center; align-items: center; z-index: 3000;
}
.video-modal-content {
    width: 95%; height: 80%; max-width: 1400px; position: relative; background: #000;
    border-radius: 8px; box-shadow: 0 0 40px rgba(0,0,0,0.8);
}
.video-modal-close {
    position: absolute; top: -45px; right: 0; background: none; border: none;
    color: #fff; font-size: 2.5rem; cursor: pointer; transition: 0.2s;
}
.video-modal-close:hover { color: #ff4d4d; }
.video-iframe-container { width: 100%; height: 100%; position: relative; border-radius: 8px; }
.video-iframe-container iframe { width: 100%; height: 100%; border: none; border-radius: 8px; }

/* МОДАЛЬНОЕ ОКНО "ПОДЕЛИТЬСЯ" */
.share-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.9); display: none; justify-content: center; align-items: center; z-index: 4000;
}
.share-modal-content {
    background: #1a1a2e; border: 1px solid #363377; border-radius: 12px;
    width: 90%; max-width: 450px; padding: 40px 20px 30px 20px; position: relative;
    box-shadow: 0 15px 50px rgba(0,0,0,0.8); text-align: center;
    box-sizing: border-box;
}

/* Кнопка-крестик внутри контента для мобильных */
.share-modal-close-btn {
    position: absolute; top: 10px; right: 15px; background: none; border: none;
    color: #888; font-size: 2rem; cursor: pointer; transition: 0.2s; line-height: 1;
}
.share-modal-close-btn:hover { color: #fff; }

.share-modal-content h3 { color: #fff; margin-bottom: 25px; font-size: 1.4rem; }

.share-grid-modal {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 30px;
}
.share-item-modal {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    color: #aaa; text-decoration: none; font-size: 0.7rem; transition: 0.2s;
}
.share-item-modal i {
    width: 45px; height: 45px; border-radius: 50%; background: #282845;
    display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: #fff;
}
.share-item-modal:hover { color: #bb86fc; transform: translateY(-3px); }
.share-item-modal:hover i { background: #363377; box-shadow: 0 0 15px rgba(187, 134, 252, 0.4); }

.share-copy-block {
    display: flex; gap: 10px; background: #0c0c14; padding: 5px; border-radius: 8px; border: 1px solid #334;
}
.share-copy-input {
    background: transparent; border: none; color: #88e5ff; padding: 10px; flex: 1; font-size: 0.85rem; outline: none; min-width: 0;
}
.btn-copy-modal {
    background: var(--accent-color); color: #000; border: none; padding: 0 12px; border-radius: 6px;
    font-weight: bold; cursor: pointer; transition: 0.2s; white-space: nowrap; font-size: 0.8rem;
}
.btn-copy-modal:hover { background: #d1a9ff; }

/* Видео-элементы */
.video-watermark {
    position: absolute; display: flex; align-items: center; gap: 8px; background: #000000; color: #FFD700;
    padding: 4px 10px 4px 4px; font-weight: bold; border: 1px solid #333; border-radius: 4px; pointer-events: none;
    z-index: 50; font-size: 0.95rem; box-shadow: 0 2px 10px rgba(0,0,0,0.8);
}
.watermark-icon { background: #ffffff; color: #000000; padding: 2px 8px; border-radius: 4px; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; }
.youtube-watermark { bottom: 10px; right: 10px; }
.rutube-watermark { bottom: -35px; right: 10px; }
.vpn-warning-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 20; text-align: center; border-radius: 8px; }
.video-fullscreen-btn { position: absolute; top: 15px; left: 15px; background: rgba(0,0,0,0.6); color: #fff; border: 1px solid #555; border-radius: 4px; width: 45px; height: 45px; font-size: 1.3rem; cursor: pointer; z-index: 15; }

@media (max-width: 480px) {
    .share-grid-modal { grid-template-columns: repeat(2, 1fr); }
    .share-modal-content { padding: 40px 15px 25px 15px; }
}