/* ============================================================
   Banner Vacaciones – Frontend Styles
   ============================================================ */

/* ── Variables por tema ────────────────────────────────────── */
.bv-banner {
    --bv-radius: 12px;
    --bv-shadow: 0 4px 24px rgba(0,0,0,.12);
    --bv-transition: .3s ease;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, sans-serif;
}

/* Tropical */
.bv-estilo-tropical {
    --bv-bg:          #d8f3dc;
    --bv-bg-gradient: linear-gradient(135deg, #d8f3dc 0%, #b7e4c7 100%);
    --bv-border:      #52b788;
    --bv-accent:      #2d6a4f;
    --bv-text:        #1b4332;
    --bv-sub:         #40916c;
    --bv-icon-bg:     rgba(45,106,79,.12);
    --bv-badge-bg:    rgba(45,106,79,.15);
    --bv-close-hover: rgba(45,106,79,.15);
}

/* Océano */
.bv-estilo-ocean {
    --bv-bg:          #caf0f8;
    --bv-bg-gradient: linear-gradient(135deg, #caf0f8 0%, #90e0ef 100%);
    --bv-border:      #0096c7;
    --bv-accent:      #023e8a;
    --bv-text:        #03045e;
    --bv-sub:         #0077b6;
    --bv-icon-bg:     rgba(0,119,182,.12);
    --bv-badge-bg:    rgba(2,62,138,.15);
    --bv-close-hover: rgba(2,62,138,.15);
}

/* Atardecer */
.bv-estilo-sunset {
    --bv-bg:          #fff3e0;
    --bv-bg-gradient: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    --bv-border:      #f48c06;
    --bv-accent:      #e85d04;
    --bv-text:        #7f3200;
    --bv-sub:         #c05e00;
    --bv-icon-bg:     rgba(232,93,4,.12);
    --bv-badge-bg:    rgba(232,93,4,.15);
    --bv-close-hover: rgba(232,93,4,.12);
}

/* Elegante */
.bv-estilo-elegant {
    --bv-bg:          #f8f9fa;
    --bv-bg-gradient: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    --bv-border:      #636e72;
    --bv-accent:      #2d3436;
    --bv-text:        #2d3436;
    --bv-sub:         #636e72;
    --bv-icon-bg:     rgba(45,52,54,.08);
    --bv-badge-bg:    rgba(45,52,54,.1);
    --bv-close-hover: rgba(45,52,54,.1);
}

/* ── Banner base ───────────────────────────────────────────── */
.bv-banner {
    background:    var(--bv-bg-gradient);
    border:        2px solid var(--bv-border);
    border-left:   5px solid var(--bv-accent);
    border-radius: var(--bv-radius);
    box-shadow:    var(--bv-shadow);
    margin:        0 0 28px;
    padding:       0;
    position:      relative;
    overflow:      hidden;
    animation:     bvSlideIn .45s cubic-bezier(.22,.68,0,1.2) both;
}

/* Faja decorativa superior */
.bv-banner::before {
    content:    '';
    display:    block;
    height:     4px;
    background: linear-gradient(90deg, var(--bv-accent), var(--bv-border), var(--bv-accent));
    background-size: 200%;
    animation:  bvShimmer 3s linear infinite;
}

/* ── Inner layout ──────────────────────────────────────────── */
.bv-inner {
    display:     flex;
    align-items: flex-start;
    gap:         18px;
    padding:     20px 52px 16px 20px;
}

/* ── Icono ─────────────────────────────────────────────────── */
.bv-icon {
    flex-shrink:     0;
    width:           56px;
    height:          56px;
    background:      var(--bv-icon-bg);
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--bv-accent);
}

.bv-svg-icon {
    width:  36px;
    height: 36px;
}

/* ── Texto ─────────────────────────────────────────────────── */
.bv-content {
    flex: 1;
    min-width: 0;
}

.bv-titulo {
    margin:      0 0 6px;
    font-size:   1.15rem;
    font-weight: 700;
    color:       var(--bv-accent);
    line-height: 1.3;
}

.bv-mensaje {
    margin:      0 0 4px;
    font-size:   .95rem;
    color:       var(--bv-text);
    line-height: 1.55;
}

.bv-mensaje strong {
    color:       var(--bv-accent);
    font-weight: 700;
}

.bv-sub-mensaje {
    margin:     4px 0 0;
    font-size:  .86rem;
    color:      var(--bv-sub);
    line-height: 1.5;
}

/* ── Footer / badge ────────────────────────────────────────── */
.bv-footer {
    padding:     0 20px 14px 20px;
    padding-left: calc(20px + 56px + 18px); /* align with content */
}

.bv-badge {
    display:         inline-flex;
    align-items:     center;
    gap:             5px;
    background:      var(--bv-badge-bg);
    color:           var(--bv-accent);
    font-size:       .78rem;
    font-weight:     600;
    letter-spacing:  .3px;
    padding:         4px 10px;
    border-radius:   50px;
    border:          1px solid var(--bv-border);
}

/* ── Botón cerrar ──────────────────────────────────────────── */
.bv-close {
    position:    absolute;
    top:         12px;
    right:       12px;
    background:  transparent;
    border:      none;
    cursor:      pointer;
    color:       var(--bv-sub);
    padding:     4px;
    border-radius: 50%;
    display:     flex;
    align-items: center;
    justify-content: center;
    transition:  background var(--bv-transition), color var(--bv-transition), transform .15s;
    line-height: 1;
}

.bv-close:hover {
    background: var(--bv-close-hover);
    color:      var(--bv-accent);
    transform:  scale(1.15);
}

/* ── Contextos especiales ──────────────────────────────────── */
.bv-context-checkout {
    margin: 0 0 24px;
}

.bv-context-cart {
    margin: 0 0 20px;
}

.bv-context-shop,
.bv-context-product {
    margin: 0 0 20px;
}

/* ── Estado oculto (dismiss) ───────────────────────────────── */
.bv-banner.bv-hidden {
    animation: bvSlideOut .3s ease forwards;
}

/* ── Animaciones ────────────────────────────────────────────── */
@keyframes bvSlideIn {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes bvSlideOut {
    from { opacity: 1; transform: translateY(0);    max-height: 300px; margin-bottom: 28px; }
    to   { opacity: 0; transform: translateY(-8px); max-height: 0;     margin-bottom: 0;   padding: 0; }
}

@keyframes bvShimmer {
    0%   { background-position: 0% 0; }
    100% { background-position: 200% 0; }
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 600px) {
    .bv-inner {
        flex-direction: column;
        align-items:    flex-start;
        gap:            12px;
        padding-right:  40px;
    }

    .bv-footer {
        padding-left: 20px;
    }

    .bv-icon {
        width:  46px;
        height: 46px;
    }

    .bv-titulo {
        font-size: 1rem;
    }

    .bv-mensaje {
        font-size: .9rem;
    }
}