/* 🔷 Текст "Пока нет видео..." */
.neon-muted {
    color: #00ccff;
    font-size: 0.95rem;
    text-shadow: 0 0 6px rgba(0, 123, 255, 0.3);
}


/* 🎓 Заголовок: С чего начать? */
.green-title {
    color: #00ff80; /* Ярко-зелёный неоновый */
    font-weight: 700;
    text-align: center;
    margin: 1.5rem 0;
    font-size: 1.5rem;
    text-shadow: 0 0 1px #00ff80, 0 0 3px rgba(0, 255, 128, 0.4);
}

/* 🚀 Заголовок: Как использовать на практике? */
.blue-title {
    color: #00ccff; /* Неоново-синий */
    font-weight: 700;
    text-align: center;
    margin: 1.5rem 0;
    font-size: 1.5rem;
    text-shadow: 0 0 1px #00ccff, 0 0 3px rgba(0, 204, 255, 0.4);
}

/* 🎥 Обёртка для каждого видеообзора */
.review-video-box {
    background-color: rgba(0, 0, 0, 0.4);   /* Полупрозрачный чёрный фон */
    padding: 1rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    box-shadow: 0 0 12px rgba(0, 204, 255, 0.1);  /* Мягкое неоновое свечение */
    transition: all 0.3s ease;
}

/* 🟩 Левая колонка: обрамление и свечение */
.left-column {
    background: rgba(0, 255, 128, 0.10);  /* Мягкий зелёный туман */
    border: 1px solid rgba(0, 255, 128, 0.3);
    border-radius: 12px;
    padding: 1rem;
    box-shadow:
        inset 0 0 6px rgba(0, 255, 128, 0.2),
        0 0 8px rgba(0, 255, 128, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}


/* 🟦 Правая колонка: обрамление и свечение */
.right-column {
    background: rgba(0, 204, 255, 0.10);  /* Мягкий синий туман */
    border: 1px solid rgba(0, 204, 255, 0.3);
    border-radius: 12px;
    padding: 1rem;
    box-shadow:
        inset 0 0 10px rgba(0, 204, 255, 0.2),
        0 0 8px rgba(0, 204, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}


/* Основной блок карточки видеообзора */
.video-card {
    display: flex; /* Включаем флекс-контейнер для вертикального размещения блоков */
    flex-direction: column; /* Элементы внутри карточки будут располагаться вертикально (сверху вниз) */
    padding: 1rem; /* Внутренние отступы со всех сторон (около 16px) */
    border-radius: 0.5rem; /* Скругление углов карточки (около 8px) */
    background-color: #111; /* Тёмный фон карточки (почти чёрный) */
    box-shadow: 0 0 10px rgba(0, 204, 255, 0.2); /* Мягкое неоновое голубое свечение */
}


/* Внутренний контейнер, распределяющий отступы между элементами */
.video-card-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.75rem;                   /* Расстояние между секциями (верх, видео, низ) */
}

/* Стили для всех кнопок внутри карточки */
.video-card .btn {
    min-width: 110px;              /* Минимальная ширина кнопки */
    padding: 0.375rem 0.75rem;     /* Вертикальный и горизонтальный отступы */
    font-size: 0.875rem;           /* Размер шрифта */
    border-radius: 0.3rem;         /* Скругление углов */
}

/* Верхняя панель с кнопками "Обзоры" и "Попробовать" */
.video-card-header {
    display: flex;
    justify-content: space-between; /* Разнести кнопки по краям */
    align-items: center;
    margin-bottom: 0.5rem;          /* Отступ снизу */
}

/* Видеообласть */
.video-card iframe {
    width: 100%;                    /* Занимает всю ширину */
    height: 100%;
    border-radius: 0.4rem;          /* Скругление углов у видео */
}

/* Нижняя панель с датой и кнопкой "К автору" */
.review-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.4rem;            /* Отступ сверху от видео */
    padding-bottom: 0.4rem;         /* Отступ снизу до края карточки */
    margin-top: 0.5rem;             /* Разделение от видео */
}

/* Стили для даты */
.review-footer p {
    margin-bottom: 0;               /* Убираем лишний отступ снизу */
    font-size: 0.8rem;              /* Немного меньше обычного текста */
    color: #ccc;                    /* Светло-серый текст */
}

/* Отступ между карточками на странице */
.col-md-6.mb-4 {
    margin-bottom: 1.5rem;          /* Увеличенный вертикальный отступ между карточками */
}


/* 🔷 Кнопка "К автору" — стиль в цвете #007bff (Bootstrap-синий) */
.btn-author {
    background: #1c1f30; /* фон, как у карточки */
    color: #007bff; /* основной синий цвет */
    border: 1px solid #007bff;
    font-weight: 500;
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 15px;
    text-decoration: none;
    box-shadow: inset 0 0 4px #007bff, 0 0 8px rgba(0, 123, 255, 0.3);
    transition: 0.3s ease;
}

.btn-author:hover {
    box-shadow: 0 0 10px #007bff, 0 0 20px #007bff;
    background-color: #007bff;
    color: #000;
}


@media (max-width: 768px) {
  .left-column,
  .right-column {
    width: 100%;
    margin-bottom: 1.5rem;
  }

  .row {
    flex-direction: column;
  }
}