/* ============================================================
   WP Slider Banners v2.0 — Styles
   Compatível com: LiteSpeed Cache, temas com CSS agressivo,
   Elementor, WooCommerce.
   ============================================================ */

/* ── Reset de contexto (escopo fechado) ───────────────────── */
.wsb-wrapper,
.wsb-wrapper *,
.wsb-wrapper *::before,
.wsb-wrapper *::after {
    box-sizing: border-box !important;
    margin:  0;
    padding: 0;
}

/* ============================================================
   WRAPPER
   ============================================================ */
.wsb-wrapper {
    position:     relative !important;
    width:        100% !important;
    display:      block !important;
    margin-left:  0 !important;
    margin-right: 0 !important;
    padding:      0 !important;
}

/* ============================================================
   FLEXSLIDER
   ============================================================ */
.wsb-flexslider {
    position:      relative !important;
    overflow:      hidden !important;
    margin-bottom: 20px !important;
    padding:       0 !important;
    border:        none !important;
    background:    transparent !important;
    /* Fallback height enquanto JS não calculou */
    min-height:    60px;
}

/* ============================================================
   SLIDES LIST
   O JS define a height via .css('height', ...).
   O padding-bottom é o fallback para LiteSpeed/lazy-load:
   usa aspect ratio 16:5 (banner típico) = 31.25%.
   ============================================================ */
.wsb-slides {
    list-style:  none !important;
    padding:     0 !important;
    margin:      0 !important;
    position:    relative !important;
    display:     block !important;
    width:       100% !important;
    /* Fallback aspect-ratio para quando JS ainda não rodou */
    min-height:  120px;
}

/* ============================================================
   SLIDES — TODOS position:absolute
   A altura real vem do JS (setHeight).
   ============================================================ */
.wsb-slide {
    position:       absolute !important;
    top:            0 !important;
    left:           0 !important;
    width:          100% !important;
    opacity:        0 !important;
    z-index:        1 !important;
    pointer-events: none !important;
    visibility:     hidden !important;
    transition:     opacity 0.65s ease !important;
    float:          none !important;
}

.wsb-slide.wsb-active {
    opacity:        1 !important;
    z-index:        2 !important;
    pointer-events: auto !important;
    visibility:     visible !important;
    position:       relative !important; /* força o container a ter altura */
}

/* Transição "slide" horizontal */
.wsb-transition-slide .wsb-slide {
    opacity:        1 !important;
    visibility:     visible !important;
    transform:      translateX(100%) !important;
    transition:     transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
.wsb-transition-slide .wsb-slide.wsb-active {
    transform:      translateX(0) !important;
}
.wsb-transition-slide .wsb-slide.wsb-leaving {
    transform:      translateX(-100%) !important;
    position:       absolute !important;
    z-index:        1 !important;
}

/* ============================================================
   SLIDE INNER
   ============================================================ */
.wsb-slide-inner {
    position:    relative !important;
    width:       100% !important;
    display:     block !important;
    line-height: 0 !important;
    font-size:   0 !important;
}

/* ============================================================
   IMAGENS
   ============================================================ */
.wsb-slide-inner img,
.wsb-img {
    display:          block !important;
    width:            100% !important;
    height:           auto !important;
    max-width:        100% !important;
    user-select:      none !important;
    -webkit-user-drag: none !important;
    /* Garante que LiteSpeed lazy não cause CLS */
    min-height:       1px;
}

.wsb-img-desktop { display: block !important; }
.wsb-img-mobile  { display: none  !important; }

@media (max-width: 767px) {
    .wsb-img-desktop { display: none  !important; }
    .wsb-img-mobile  { display: block !important; }
    .wsb-slide-inner:not(:has(.wsb-img-mobile)) .wsb-img-desktop {
        display: block !important;
    }
}

/* ============================================================
   LAYOUTS
   ============================================================ */

/* ---- 1. CONTAINED ---- */
.wsb-slide[data-layout="contained"] .wsb-slide-inner .wsb-img,
.wsb-slide[data-layout="contained"] .wsb-slide-inner img {
    border-radius: 10px !important;
    border:        1px solid #e8e8e8 !important;
}

/* ---- 2. FULL-WIDTH ---- */
.wsb-wrapper:has(.wsb-slide[data-layout="full-width"]) {
    margin-top: 0 !important;
}
.wsb-wrapper:has(.wsb-slide[data-layout="full-width"]) .wsb-flexslider {
    margin-left:   calc(-50vw + 50%) !important;
    margin-right:  calc(-50vw + 50%) !important;
    width:         100vw !important;
    margin-bottom: 20px !important;
}
.wsb-slide[data-layout="full-width"] .wsb-slide-inner img {
    border-radius: 0 !important;
    border:        none !important;
}

/* ---- 3. FULLSCREEN ---- */
.wsb-wrapper:has(.wsb-slide[data-layout="fullscreen"]) .wsb-flexslider {
    margin-left:   calc(-50vw + 50%) !important;
    margin-right:  calc(-50vw + 50%) !important;
    width:         100vw !important;
    margin-top:    0 !important;
    margin-bottom: 20px !important;
}
.wsb-slide[data-layout="fullscreen"] .wsb-slide-inner {
    height:   100vh !important;
    overflow: hidden !important;
}
.wsb-slide[data-layout="fullscreen"] .wsb-slide-inner img {
    width:           100% !important;
    height:          100% !important;
    object-fit:      cover !important;
    object-position: center !important;
    border-radius:   0 !important;
    border:          none !important;
}

/* ============================================================
   LINK INVISÍVEL (quando não há CTA)
   ============================================================ */
a.wsb-slide-link {
    position:        absolute !important;
    inset:           0 !important;
    z-index:         3 !important;
    display:         block !important;
    background:      transparent !important;
    border:          none !important;
    padding:         0 !important;
    text-decoration: none !important;
}

/* ============================================================
   BOTÃO CTA OVERLAY
   — centro horizontal, parte INFERIOR da imagem
   ============================================================ */
.wsb-cta-wrap {
    position:       absolute !important;
    bottom:         18px !important;
    left:           50% !important;
    transform:      translateX(-50%) !important;
    z-index:        5 !important;
    text-align:     center !important;
    pointer-events: auto !important;
    white-space:    nowrap !important;
    line-height:    normal !important;
    font-size:      initial !important;
}

a.wsb-cta-btn,
.wsb-cta-btn {
    display:             inline-block !important;
    padding:             10px 32px !important;
    font-size:           13px !important;
    font-weight:         600 !important;
    letter-spacing:      2px !important;
    text-transform:      uppercase !important;
    color:               #ffffff !important;
    text-decoration:     none !important;
    line-height:         1.4 !important;

    border:              2px solid rgba(255,255,255,0.85) !important;
    border-radius:       4px !important;

    background-color:    rgba(255,255,255,0.08) !important;
    backdrop-filter:     blur(7px) !important;
    -webkit-backdrop-filter: blur(7px) !important;

    text-shadow:         0 1px 4px rgba(0,0,0,0.5) !important;
    box-shadow:          0 2px 12px rgba(0,0,0,0.18) !important;
    cursor:              pointer !important;
    transition:          background-color 0.3s ease, border-color 0.3s ease !important;
}

a.wsb-cta-btn:hover,
.wsb-cta-btn:hover {
    background-color: rgba(255,255,255,0.22) !important;
    border-color:     rgba(255,255,255,1) !important;
    color:            #ffffff !important;
}

@media (max-width: 767px) {
    .wsb-cta-wrap { bottom: 10px !important; }
    a.wsb-cta-btn,
    .wsb-cta-btn  { font-size: 11px !important; padding: 7px 18px !important; }
}

/* ============================================================
   SETAS DE NAVEGAÇÃO
   ── Usamos atributos + pseudo-class para ganhar especificidade
      sem depender de !important onde possível.
   ── Normal:  fundo ROXO (#5b12b0) + símbolo BRANCO
   ── Hover:   fundo BRANCO         + símbolo ROXO
   ============================================================ */

/* Garante que o tema não resete nossos botões */
.wsb-flexslider button.wsb-arrow,
.wsb-flexslider button.wsb-prev,
.wsb-flexslider button.wsb-next {
    /* Reset agressivo de estilos herdados do tema */
    all:             initial !important;
    /* Restaura o que queremos */
    position:        absolute !important;
    top:             50% !important;
    transform:       translateY(-50%) !important;
    z-index:         10 !important;
    cursor:          pointer !important;

    width:           42px !important;
    height:          42px !important;
    border-radius:   50% !important;

    /* ROXO com símbolo branco — estado normal */
    background-color: rgba(80, 18, 160, 0.88) !important;
    color:            #ffffff !important;
    border:           none !important;
    box-shadow:       0 2px 10px rgba(0,0,0,0.30) !important;

    font-size:        26px !important;
    line-height:      42px !important;
    text-align:       center !important;
    font-family:      Arial, sans-serif !important;
    font-weight:      300 !important;

    opacity:          0 !important;
    transition:       opacity 0.3s ease, background-color 0.25s ease, color 0.25s ease !important;

    display:          flex !important;
    align-items:      center !important;
    justify-content:  center !important;
    padding:          0 !important;
    outline:          none !important;
    text-decoration:  none !important;
    margin:           0 !important;
    float:            none !important;
    text-indent:      0 !important;
}

/* Setas ficam visíveis ao hover no slider */
.wsb-flexslider:hover button.wsb-arrow {
    opacity: 1 !important;
}

/* Mobile: sempre visível */
@media (max-width: 767px) {
    .wsb-flexslider button.wsb-arrow { opacity: 0.75 !important; }
}

/* HOVER: inverte — BRANCO com símbolo ROXO */
.wsb-flexslider button.wsb-arrow:hover {
    background-color: rgba(255,255,255,0.97) !important;
    color:            #5b12b0 !important;
}

.wsb-flexslider button.wsb-prev { left:  12px !important; }
.wsb-flexslider button.wsb-next { right: 12px !important; }

@media (max-width: 767px) {
    .wsb-flexslider button.wsb-arrow {
        width:      34px !important;
        height:     34px !important;
        font-size:  20px !important;
        line-height: 34px !important;
    }
    .wsb-flexslider button.wsb-prev { left:  5px !important; }
    .wsb-flexslider button.wsb-next { right: 5px !important; }
}

/* ============================================================
   PAGINAÇÃO — alinhada à DIREITA, parte inferior
   ============================================================ */
ol.wsb-paging,
.wsb-paging {
    list-style:    none !important;
    position:      absolute !important;
    bottom:        12px !important;
    right:         16px !important;
    left:          auto !important;
    width:         auto !important;
    text-align:    right !important;
    z-index:       8 !important;
    padding:       0 !important;
    margin:        0 !important;
    display:       flex !important;
    align-items:   center !important;
    gap:           5px !important;
    pointer-events: auto !important;
}

.wsb-paging li {
    display:    inline-flex !important;
    list-style: none !important;
    margin:     0 !important;
    padding:    0 !important;
}

.wsb-paging li button {
    all:           initial !important;
    display:       block !important;
    width:         12px !important;
    height:        12px !important;
    border-radius: 3px !important;
    border:        1.5px solid rgba(255,255,255,0.9) !important;
    background:    transparent !important;
    cursor:        pointer !important;
    padding:       0 !important;
    transition:    background 0.25s ease !important;
    line-height:   0 !important;
    font-size:     0 !important;
    overflow:      hidden !important;
}

.wsb-paging li.wsb-paging-active button {
    background: rgba(255,255,255,0.75) !important;
}

/* ============================================================
   ACESSIBILIDADE
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .wsb-slide,
    .wsb-transition-slide .wsb-slide,
    .wsb-cta-btn,
    .wsb-flexslider button.wsb-arrow { transition: none !important; }
}