/* ==========================================================================
   TW Course Carousel V2 - Estilo Uninacional
   Versão Final com Logos e Botão Ver Todos
   
   Autor: Fusão Digital
   Versão: 2.1 - PADRÃO UNINACIONAL (hover azul)
   Última atualização: Janeiro/2026
   
   PADRÃO UNINACIONAL:
   - Normal: #001B47 (azul escuro)
   - Hover: #006699 (azul médio)
   - Border-radius: 5px
   
   Índice:
   1. Variáveis CSS
   2. Container Principal
   3. Header (Filtros + Botão Ver Todos)
   4. Navegação (Setas Laterais)
   5. Wrapper do Carousel
   6. Cards
   7. Imagem do Card
   8. Conteúdo do Card
   9. Footer do Card (Logos + Botão)
   10. Botão Ver Todos
   11. Estados (Loading, Vazio)
   12. Responsividade
   ========================================================================== */


/* ==========================================================================
   1. VARIÁVEIS CSS
   --------------------------------------------------------------------------
   Cores do sistema Uninacional.
   ========================================================================== */
:root {
    --color-uni: #001B47;        /* Azul escuro - cor principal Uninacional */
    --color-uni-hover: #006699;  /* Azul médio - hover padrão */
    --color-light: #fafafa;      /* Cinza claro para backgrounds */
    --color-dark: #222222;       /* Preto suave para textos */
    --color-accent: #006699;     /* Azul médio para destaques */
    --color-primary: var(--color-uni);  /* Cor primária padrão */
}


/* ==========================================================================
   2. CONTAINER PRINCIPAL
   --------------------------------------------------------------------------
   Wrapper externo que limita a largura máxima e centraliza o conteúdo.
   overflow: hidden previne scroll horizontal indesejado.
   ========================================================================== */
.tw-carousel-v2-container {
    width: 100%;
    max-width: 1400px;           /* Largura máxima do layout */
    margin: 0 auto;              /* Centraliza horizontalmente */
    padding: 0.3rem;               /* Espaçamento interno */
    overflow: hidden;            /* Previne vazamento de conteúdo */
}


/* ==========================================================================
   3. HEADER: FILTROS + BOTÃO VER TODOS
   --------------------------------------------------------------------------
   Flexbox para alinhar filtros à esquerda e botão à direita.
   flex-wrap permite quebra de linha em telas menores.
   ========================================================================== */
.tw-carousel-v2-header {
    display: flex;
    justify-content: space-between;  /* Filtros à esquerda, botão à direita */
    align-items: center;             /* Alinhamento vertical centralizado */
    flex-wrap: wrap;                 /* Permite quebra em mobile */
    gap: 1rem;                       /* Espaço entre elementos */
    margin-bottom: 1.5rem;           /* Espaço antes do carousel */
}

/* Container dos botões de filtro */
.tw-carousel-v2-filters {
    display: flex;
    flex-wrap: wrap;                 /* Permite quebra dos botões */
    gap: 0.75rem;                    /* Espaço entre botões */
    justify-content: center;
}

/* Botões de filtro - Padrão Uninacional */
html body .tw-carousel-v2-container .tw-carousel-v2-filters .tw-filter-pill,
html body .tw-carousel-v2-container .tw-filter-pill,
html body .tw-carousel-v2-filters .tw-filter-pill,
html body button.tw-filter-pill,
.elementor-shortcode .tw-filter-pill,
.tw-filter-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 15px 30px !important;
    background: #001B47 !important;
    background-color: #001B47 !important;
    border: none !important;
    border-style: none !important;
    color: #ffffff !important;
    border-radius: 5px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    text-decoration: none !important;
    line-height: 1 !important;
}

/* Estado hover e ativo dos filtros - Azul médio */
html body .tw-carousel-v2-container .tw-carousel-v2-filters .tw-filter-pill:hover,
html body .tw-carousel-v2-container .tw-carousel-v2-filters .tw-filter-pill.active,
html body .tw-carousel-v2-container .tw-filter-pill:hover,
html body .tw-carousel-v2-container .tw-filter-pill.active,
html body .tw-carousel-v2-filters .tw-filter-pill:hover,
html body .tw-carousel-v2-filters .tw-filter-pill.active,
html body button.tw-filter-pill:hover,
html body button.tw-filter-pill.active,
.elementor-shortcode .tw-filter-pill:hover,
.elementor-shortcode .tw-filter-pill.active,
.tw-filter-pill:hover,
.tw-filter-pill.active {
    background: #006699 !important;
    background-color: #006699 !important;
    border: none !important;
    border-style: none !important;
    color: #ffffff !important;
}


/* ==========================================================================
   4. NAVEGAÇÃO (SETAS NAS LATERAIS)
   --------------------------------------------------------------------------
   Setas circulares posicionadas no centro vertical das imagens.
   ========================================================================== */
.tw-carousel-v2-container .tw-carousel-v2-wrapper .tw-nav-btn,
.tw-carousel-v2-wrapper .tw-nav-btn,
.tw-nav-btn {
    position: absolute !important;
    top: 50% !important;
    z-index: 10 !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    border: none !important;
    background: rgba(0, 27, 71, 0.75) !important;  /* Azul Uninacional */
    color: #ffffff !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.3s ease, transform 0.3s ease !important;
    padding: 0 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
}

/* Hover das setas - Azul médio */
.tw-carousel-v2-container .tw-carousel-v2-wrapper .tw-nav-btn:hover,
.tw-carousel-v2-wrapper .tw-nav-btn:hover,
.tw-nav-btn:hover {
    background: rgba(0, 102, 153, 0.95) !important;  /* #006699 */
    transform: scale(1.05) !important;
}

/* Ícone SVG dentro das setas */
.tw-carousel-v2-container .tw-carousel-v2-wrapper .tw-nav-btn svg,
.tw-carousel-v2-wrapper .tw-nav-btn svg,
.tw-nav-btn svg {
    width: 16px !important;
    height: 16px !important;
    stroke: #ffffff !important;
    stroke-width: 2.5 !important;
    fill: none !important;
}

/* Posição da seta esquerda */
.tw-carousel-v2-container .tw-carousel-v2-wrapper .tw-nav-prev,
.tw-carousel-v2-wrapper .tw-nav-prev,
.tw-nav-prev {
    left: 0 !important;
    right: auto !important;
}

/* Posição da seta direita */
.tw-carousel-v2-container .tw-carousel-v2-wrapper .tw-nav-next,
.tw-carousel-v2-wrapper .tw-nav-next,
.tw-nav-next {
    right: 0 !important;
    left: auto !important;
}


/* ==========================================================================
   5. WRAPPER DO CAROUSEL
   ========================================================================== */
.tw-carousel-v2-wrapper {
    position: relative;
    overflow: visible;
    margin: 0 auto;
    padding: 0;
}

/* Força o Owl Carousel a funcionar corretamente */
.tw-carousel-v2.owl-carousel {
    display: block !important;
    width: 100% !important;
    overflow: hidden;
}

/* Container interno do Owl Carousel */
.tw-carousel-v2.owl-carousel .owl-stage-outer {
    overflow: hidden !important;
}

/* Stage do Owl - usa flexbox para alinhamento */
.tw-carousel-v2.owl-carousel .owl-stage {
    display: flex !important;
}

/* Items individuais do carousel */
.tw-carousel-v2.owl-carousel .owl-item {
    float: left;
    min-height: 1px;
}

/* Esconde navegação e dots padrão do Owl */
.tw-carousel-v2.owl-carousel .owl-nav,
.tw-carousel-v2.owl-carousel .owl-dots {
    display: none !important;
}


/* ==========================================================================
   6. CARDS
   ========================================================================== */
.tw-carousel-card {
    background-color: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    min-height: 420px;
}

/* Efeito hover no card */
.tw-carousel-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

/* Link que envolve todo o card */
.tw-carousel-card-link {
    text-decoration: none !important;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Força altura igual nos items do Owl Carousel */
.tw-carousel-v2.owl-carousel .owl-item {
    float: left;
    min-height: 1px;
    display: flex;
}

/* Card ocupa 100% da largura do item */
.tw-carousel-v2.owl-carousel .owl-item > .tw-carousel-card {
    width: 100%;
}


/* ==========================================================================
   7. IMAGEM DO CARD
   ========================================================================== */
.tw-carousel-card-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    background-color: #f5f5f5;
}

/* Imagem em si */
.tw-carousel-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

/* Zoom suave na imagem ao passar mouse no card */
.tw-carousel-card:hover .tw-carousel-card-image img {
    transform: scale(1.05);
}

/* Placeholder quando não há imagem */
.tw-carousel-card-no-image {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e0e0e0 0%, #f5f5f5 100%);
}


/* ==========================================================================
   8. CONTEÚDO DO CARD
   ========================================================================== */
.tw-carousel-card-content {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: flex-start;
}

/* Título do curso */
.tw-carousel-card-title {
    margin: 0 0 0.5rem 0 !important;
    font-size: 1.25rem !important;
    color: #001B47 !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    min-height: 3.25rem;
    
    /* Trunca texto em 3 linhas com "..." */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Modalidade */
.tw-carousel-card-modality {
    font-size: 0.9rem;
    color: #001B47;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
}

/* Duração */
.tw-carousel-card-duration {
    font-size: 0.875rem;
    color: #666;
    margin: 0 0 1rem 0;
}

/* Container de preços */
.tw-carousel-card-prices {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Preço original (riscado) */
.tw-price-from {
    font-size: 0.8rem;
    color: #888;
}

.tw-price-from s {
    color: #999;
}

/* Preço promocional */
.tw-price-to {
    font-size: 1rem;
    font-weight: 700;
    color: #006699;
}


/* ==========================================================================
   9. FOOTER DO CARD: LOGOS + BOTÃO
   ========================================================================== */
.tw-carousel-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid #eee;
}

/* Container dos logos */
.tw-carousel-card-logos {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Logos em geral */
.tw-carousel-card-logos img {
    height: 28px;
    width: auto;
    opacity: 0.9;
}

/* Logo ETEP */
.tw-carousel-card-logos img.logo-etep {
    height: 30px;
}

/* Logo Uninacional */
.tw-carousel-card-logos img.logo-uni {
    height: 40px;
}

/* Botão "Ver detalhes" - Padrão Uninacional */
.tw-carousel-card-btn {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    background: #001B47;
    background-color: #001B47;
    color: #ffffff !important;
    text-align: center;
    border-radius: 5px;
    text-decoration: none !important;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

/* Hover no botão - Azul médio (igual aos filtros) */
.tw-carousel-card:hover .tw-carousel-card-btn,
.tw-carousel-card-btn:hover {
    background: #006699;
    background-color: #006699;
}


/* ==========================================================================
   10. BOTÃO VER TODOS OS CURSOS (no header)
   ========================================================================== */
html body .tw-carousel-v2-container .tw-see-all-btn,
html body .tw-see-all-btn,
.elementor-shortcode .tw-see-all-btn,
a.tw-see-all-btn,
.tw-see-all-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 15px 30px !important;
    background: #001B47 !important;
    background-color: #001B47 !important;
    border: none !important;
    border-style: none !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 5px !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}

/* Hover do botão - Azul médio */
html body .tw-carousel-v2-container .tw-see-all-btn:hover,
html body .tw-see-all-btn:hover,
.elementor-shortcode .tw-see-all-btn:hover,
a.tw-see-all-btn:hover,
.tw-see-all-btn:hover {
    background: #006699 !important;
    background-color: #006699 !important;
    border: none !important;
    border-style: none !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Ícone de seta no botão */
.tw-see-all-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    transition: transform 0.3s ease;
}

/* Animação da seta no hover */
.tw-see-all-btn:hover svg {
    transform: translateX(4px);
}


/* ==========================================================================
   11. ESTADOS (LOADING, VAZIO)
   ========================================================================== */

/* Estado de carregamento */
.tw-carousel-v2.loading {
    opacity: 0.5;
    pointer-events: none;
}

/* Mensagem quando não há cursos */
.tw-no-courses {
    text-align: center;
    padding: 2rem;
    color: #666;
    font-size: 1rem;
}


/* ==========================================================================
   12. RESPONSIVIDADE
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tablet (até 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    
    .tw-carousel-v2-container {
        padding: 1rem;
    }
    
    .tw-carousel-v2-header {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    
    .tw-carousel-v2-filters {
        justify-content: center;
    }
    
    .tw-see-all-btn {
        width: auto;
    }
    
    .tw-filter-pill {
        padding: 0.4rem 1rem;
        font-size: 0.875rem;
    }
    
    .tw-carousel-card-title {
        font-size: 1.1rem !important;
    }
    
    .tw-carousel-card-footer {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
    }
    
    .tw-carousel-card-btn {
        width: 100%;
    }
    
    .tw-nav-btn {
        width: 38px !important;
        height: 38px !important;
    }
    
    .tw-nav-btn svg {
        width: 14px !important;
        height: 14px !important;
    }
}

/* --------------------------------------------------------------------------
   Mobile pequeno (até 480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    
    .tw-carousel-v2-filters {
        gap: 0.5rem;
    }
    
    .tw-filter-pill {
        padding: 0.35rem 0.75rem;
        font-size: 0.8rem;
    }
    
    .tw-see-all-btn {
        width: 100%;
        justify-content: center;
    }
    
    .tw-nav-btn {
        width: 36px !important;
        height: 36px !important;
    }
    
    .tw-nav-btn svg {
        width: 12px !important;
        height: 12px !important;
    }
}