/* ============================================================
   BANNER SLIDER
============================================================ */

.banner-slider {
    position: absolute;
    inset: 0;
    overflow: hidden;
}


/* ============================================================
   BANNER ABAIXO DO LOGO
============================================================ */
.banner-slider.banner-below {
    position: relative !important;
    inset: auto !important;
    display: block;
    width: 100%;
    aspect-ratio: 3 / 1;
    height: auto !important;
    overflow: hidden;
}


/* ============================================================
   ÁREA DOS SLIDES
============================================================ */

.banner-slides {
    position: relative;

    width: 100%;
    height: 100%;
}


.banner-slider.banner-below .banner-slides {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* ============================================================
   SLIDES
============================================================ */

.banner-slide {
    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 100%;

    opacity: 0;

    transition: opacity .8s ease-in-out;

    will-change: opacity;
}


.banner-slide.active {
    opacity: 1;
    z-index: 1;
}


.banner-slide img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    user-select: none;

    -webkit-user-drag: none;
}


/* ============================================================
   SETAS
============================================================ */

.banner-arrow {
    position: absolute;

    top: 50%;

    width: 40px;
    height: 40px;

    transform: translateY(-50%);

    z-index: 3;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 50%;

    background: rgba(0, 0, 0, .4);

    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    color: #fff;

    cursor: pointer;

    transition: all .2s;

    opacity: 0;
}


.banner-slider:hover .banner-arrow {
    opacity: 1;
}


.banner-arrow:hover {
    background: rgba(0, 0, 0, .65);

    transform: translateY(-50%) scale(1.1);
}


.banner-prev {
    left: 12px;
}


.banner-next {
    right: 12px;
}


/* ============================================================
   DOTS
============================================================ */

.banner-dots {
    position: absolute;

    bottom: 12px;
    left: 50%;

    transform: translateX(-50%);

    z-index: 3;

    display: flex;

    gap: 8px;

    padding: 6px 12px;

    border-radius: 20px;

    background: rgba(0, 0, 0, .3);

    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}


.banner-dot {
    width: 8px;
    height: 8px;

    padding: 0;

    border: none;
    border-radius: 50%;

    background: rgba(255, 255, 255, .4);

    cursor: pointer;

    transition: all .3s;
}


.banner-dot.active {
    width: 24px;

    background: #fff;

    border-radius: 4px;
}


.banner-dot:hover:not(.active) {
    background: rgba(255, 255, 255, .7);
}


/* ============================================================
   BARRA DE PROGRESSO
============================================================ */

.banner-progress {
    position: absolute;

    bottom: 0;
    left: 0;

    height: 3px;

    background: rgba(255, 255, 255, .6);

    z-index: 3;

    transition: width linear;

    border-radius: 0 2px 2px 0;
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 768px) {

    .banner-arrow {
        width: 32px;
        height: 32px;

        opacity: .7;
    }

    .banner-arrow svg {
        width: 16px;
        height: 16px;
    }

    .banner-prev {
        left: 6px;
    }

    .banner-next {
        right: 6px;
    }

    .banner-dots {
        bottom: 8px;

        gap: 6px;

        padding: 4px 10px;
    }

    .banner-dot {
        width: 6px;
        height: 6px;
    }

    .banner-dot.active {
        width: 18px;
    }

}


/* ============================================================
   PAUSAR AO PASSAR O MOUSE
============================================================ */

.banner-slider.paused .banner-progress {
    animation-play-state: paused;
}
/* ────────────────────────────────────────────
   PWA Install Button - Expandable FAB 
   ──────────────────────────────────────────── */
#btnInstallPWA{
    width:48px;
    height:48px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    overflow:hidden;
    transition:width .35s ease, box-shadow .3s ease;
}

#btnInstallPWA:hover{
    width:200px;
    box-shadow:0 10px 40px rgba(59,130,246,.4);
}

#btnInstallPWA .fab-inner{
    display:flex;
    align-items:center;
    height:100%;
}

#btnInstallPWA .fab-icon-wrap{
    display:flex;
    align-items:center;
    justify-content:center;
    width:48px;
    height:48px;
    flex-shrink:0;
}

#btnInstallPWA .fab-label{
    opacity:0;
    white-space:nowrap;
    font-size:.875rem;
    font-weight:600;
    padding-right:16px;
    padding-left:4px;
    transition:opacity .25s ease;
}

#btnInstallPWA:hover .fab-label{
    opacity:1;
    transition-delay:.15s;
}


/* ================================================================
   CARD SYSTEM — Bordas, Decoração SVG e Hierarquia de Z-Index
   ================================================================ */

/* ────────────────────────────────────────────
   1. BASE — Estrutura comum a todos os cards
   ──────────────────────────────────────────── */
.card-hover {
    border-width: 1px;
    border-style: solid;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    box-shadow:
        0 1px 3px 0 rgba(0, 0, 0, 0.1),
        0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

.card-hover:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
}

/* ────────────────────────────────────────────
   2. BORDAS — Por tipo de card (Light Mode)
   ──────────────────────────────────────────── */

/* Card Normal */
.card-hover.card--default {
    border-color: #bfdbfe; /* blue-200 */
}

.card-hover.card--default:hover {
    border-color: #3b82f6; /* blue-500 */
    box-shadow:
        0 0 0 2px rgba(59, 130, 246, 0.15),
        0 4px 12px rgba(59, 130, 246, 0.15);
}

/* Card Combo */
.card-hover.card--combo {
    border-color: #d8b4fe; /* purple-300 */
}

.card-hover.card--combo:hover {
    border-color: #a855f7; /* purple-500 */
    box-shadow:
        0 0 0 2px rgba(168, 85, 247, 0.15),
        0 4px 12px rgba(168, 85, 247, 0.15);
}

/* ────────────────────────────────────────────
   3. BORDAS — Dark Mode
   ──────────────────────────────────────────── */
:is(.dark, [data-theme="dark"]) .card-hover.card--default {
    border-color: #1e3a5f;
}

:is(.dark, [data-theme="dark"]) .card-hover.card--default:hover {
    border-color: #3b82f6;
    box-shadow:
        0 0 0 2px rgba(59, 130, 246, 0.25),
        0 4px 12px rgba(59, 130, 246, 0.2);
}

:is(.dark, [data-theme="dark"]) .card-hover.card--combo {
    border-color: #4c1d95;
}

:is(.dark, [data-theme="dark"]) .card-hover.card--combo:hover {
    border-color: #a855f7;
    box-shadow:
        0 0 0 2px rgba(168, 85, 247, 0.25),
        0 4px 12px rgba(168, 85, 247, 0.2);
}

/* ────────────────────────────────────────────
   4. SVG DECORATIVO — Layer primário (retângulos)
   ──────────────────────────────────────────── */
.card-bg-decoration {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 0;
    pointer-events: none;
    transform: scale(1.5);
    opacity: 0.07;
    transition: opacity 0.3s ease, transform 0.5s ease;
}

.card-bg-decoration rect {
    fill: #1e293b; /* slate-800 — contraste no light */
    transition: fill 0.3s ease;
}

:is(.dark, [data-theme="dark"]) .card-bg-decoration rect {
    fill: #ffffff;
}

/* Hover — retângulos ganham vida */
.card-hover:hover .card-bg-decoration {
    opacity: 0.12;
    transform: scale(1.6) rotate(2deg);
}

/* ────────────────────────────────────────────
   5. SVG DECORATIVO — Cores por tipo de card
   ──────────────────────────────────────────── */

/* Normal — tom azulado */
.card-bg-decoration--default rect {
    fill: #1e40af; /* blue-800 */
}

:is(.dark, [data-theme="dark"]) .card-bg-decoration--default rect {
    fill: #93c5fd; /* blue-300 */
}

/* Combo — tom roxo */
.card-bg-decoration--combo rect {
    fill: #6b21a8; /* purple-800 */
}

:is(.dark, [data-theme="dark"]) .card-bg-decoration--combo rect {
    fill: #c4b5fd; /* violet-300 */
}

/* ────────────────────────────────────────────
   6. SVG DECORATIVO — Layer secundário (opcional)
   ──────────────────────────────────────────── */
.card-bg-decoration-secondary {
    position: absolute;
    top: -20px;
    right: -20px;
    z-index: 0;
    pointer-events: none;
    transform: scale(0.8);
    opacity: 0.04;
    transition: opacity 0.3s ease;
}

.card-bg-decoration-secondary rect {
    fill: #1e293b;
    transition: fill 0.3s ease;
}

:is(.dark, [data-theme="dark"]) .card-bg-decoration-secondary rect {
    fill: #ffffff;
}

.card-hover:hover .card-bg-decoration-secondary {
    opacity: 0.08;
}

/* ────────────────────────────────────────────
   7. Z-INDEX — Hierarquia de camadas do card
   ──────────────────────────────────────────── */

/*  z-0  →  SVG decorativo (já definido acima)       */
/*  z-1  →  Imagem do produto                        */
/*  z-2  →  Conteúdo (texto, preço, botão)            */
/*  z-10 →  Badges, wishlist, overlays                */

.card-hover .card-image-wrapper {
    position: relative;
    z-index: 1;
}

.card-hover .card-content {
    position: relative;
    z-index: 2;
}

.card-hover .card-badge,
.card-hover .wishlist-btn {
    position: relative;
    z-index: 10;
}