/* ==================================================
   IDENTIDADE VISUAL VIDEOUM
   Azul principal: #176BFF
   Verde-água: #00C2A8
   Fundo escuro: #06111F
================================================== */

:root {
    --videoum-blue: #176BFF;
    --videoum-blue-dark: #0D4FC4;
    --videoum-green: #00C2A8;
    --videoum-dark: #06111F;
    --videoum-card: #0B1B2D;
    --videoum-border: rgba(255, 255, 255, 0.10);
}

/* Cor principal do sistema */
.base-color,
.text--base,
.text-primary {
    color: var(--videoum-blue) !important;
}

/* Botões principais */
.btn--base,
.btn-primary,
.btn.btn-primary,
button[type="submit"],
.form--control:focus + .input-group-text {
    background: linear-gradient(
        135deg,
        var(--videoum-blue),
        var(--videoum-green)
    ) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    border-radius: 10px !important;
}

/* Efeito dos botões */
.btn--base:hover,
.btn-primary:hover,
.btn.btn-primary:hover,
button[type="submit"]:hover {
    background: linear-gradient(
        135deg,
        var(--videoum-blue-dark),
        var(--videoum-green)
    ) !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(23, 107, 255, 0.28);
}

/* Links */
a:hover,
.link,
.text--base {
    color: var(--videoum-blue) !important;
}

/* Menu lateral */
.sidebar-menu,
.sidebar,
.sidenav,
.dashboard-sidebar {
    background: linear-gradient(
        180deg,
        #05101D 0%,
        #081827 100%
    ) !important;
}

/* Item selecionado no menu */
.sidebar-menu .active,
.sidebar-menu li.active > a,
.sidebar-menu a:hover,
.sidenav .active,
.dashboard-sidebar .active {
    background: linear-gradient(
        135deg,
        var(--videoum-blue),
        var(--videoum-blue-dark)
    ) !important;
    color: #ffffff !important;
    border-radius: 10px !important;
}

/* Cabeçalho */
.header,
.navbar,
.topbar,
.dashboard-header {
    background: rgba(5, 16, 29, 0.96) !important;
    border-bottom: 1px solid var(--videoum-border) !important;
}

/* Cartões */
.card,
.custom--card,
.dashboard-card,
.video-card {
    background: var(--videoum-card) !important;
    border: 1px solid var(--videoum-border) !important;
    border-radius: 14px !important;
}

/* Cartões ao passar o mouse */
.card:hover,
.custom--card:hover,
.video-card:hover {
    border-color: rgba(23, 107, 255, 0.55) !important;
    box-shadow: 0 10px 30px rgba(0, 194, 168, 0.08);
}

/* Campos de formulário e pesquisa */
.form-control,
.form--control,
.select2-selection,
input,
textarea,
select {
    border-radius: 9px !important;
}

.form-control:focus,
.form--control:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--videoum-blue) !important;
    box-shadow: 0 0 0 3px rgba(23, 107, 255, 0.15) !important;
}

/* Barra de progresso */
.progress-bar {
    background: linear-gradient(
        90deg,
        var(--videoum-blue),
        var(--videoum-green)
    ) !important;
}

/* Ícones e indicadores selecionados */
.check-circle,
.form-check-input:checked,
input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background-color: var(--videoum-blue) !important;
    border-color: var(--videoum-blue) !important;
}

/* Botão de reprodução */
.plyr__control--overlaid {
    background: linear-gradient(
        135deg,
        var(--videoum-blue),
        var(--videoum-green)
    ) !important;
}

.plyr--video .plyr__control:hover,
.plyr--video .plyr__control[aria-expanded="true"] {
    background: var(--videoum-blue) !important;
}

.plyr--full-ui input[type="range"] {
    color: var(--videoum-blue) !important;
}

/* Categorias e etiquetas */
.badge,
.tag,
.category-item {
    border-radius: 999px !important;
}

/* Botão de inscrição */
.subscribe-btn,
.btn-subscribe {
    background: linear-gradient(
        135deg,
        var(--videoum-blue),
        var(--videoum-green)
    ) !important;
    border: none !important;
    color: #ffffff !important;
    border-radius: 999px !important;
}

/* Miniaturas dos vídeos */
.video-card img,
.video-thumb img,
.video-item img,
.thumbnail img {
    border-radius: 12px !important;
}

/* Barras de rolagem */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--videoum-dark);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(
        var(--videoum-blue),
        var(--videoum-green)
    );
    border-radius: 10px;
}
/* =========================================================
   VIDEUM — PÁGINA DE VÍDEO PROFISSIONAL NO CELULAR
   ========================================================= */

@media screen and (max-width: 767px) {

    /* Espaço para o menu inferior não cobrir o conteúdo */
    body {
        padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
    }

    .play-body {
        padding-bottom: 30px !important;
        overflow-x: hidden;
    }

    /* Player em proporção profissional 16:9 */
    .play-video .primary__videoPlayer.mainVideo {
        width: 100% !important;
        aspect-ratio: 16 / 9;
        min-height: 0 !important;
        height: auto !important;
        overflow: hidden;
        background: #000;
        border-radius: 0;
    }

    .play-video .primary__videoPlayer.mainVideo > .plyr,
    .play-video .primary__videoPlayer.mainVideo .plyr__video-wrapper,
    .play-video .primary__videoPlayer.mainVideo video,
    .play-video .primary__videoPlayer.mainVideo iframe,
    .play-video .primary__videoPlayer.mainVideo .video-player {
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
    }

    /* Evita vídeo cortado ou esticado */
    .play-video .primary__videoPlayer.mainVideo video,
    .play-video .primary__videoPlayer.mainVideo .plyr__video-wrapper video {
        object-fit: contain !important;
        background: #000;
    }

    /* Miniatura e vídeos incorporados */
    .play-video .embed-video-thumb-container,
    .play-video .embed-thumb {
        width: 100% !important;
        height: 100% !important;
    }

    .play-video .embed-thumb {
        object-fit: cover;
    }

    /* Espaçamento do conteúdo abaixo do vídeo */
    .play-video .primary {
        width: 100% !important;
        max-width: 100% !important;
    }

    .play-video .primary__videoPlayer + * {
        margin-top: 0 !important;
    }

    /* Menu inferior profissional e sem cobrir conteúdo */
    .sm-bottom-nav {
        position: fixed !important;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9999 !important;
        min-height: 72px;
        padding-bottom: env(safe-area-inset-bottom);
        background: rgba(14, 14, 16, 0.98) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.10);
        box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.30);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .sm-bottom-nav__link,
    .sm-bottom-nav a {
        min-height: 68px;
        padding: 8px 5px !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
    }

    /* Botões do player mais visíveis */
    .play-video .plyr__control--overlaid {
        width: 58px;
        height: 58px;
    }

    /* Melhor acabamento visual dos blocos */
    .play-body .video-description,
    .play-body .description {
        border-radius: 16px;
    }
}