/**
 * Copyright since 2007 PrestaShop SA and Contributors
 * PrestaShop is an International Public License Integration
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE.md.
 * It is also available through the world-wide-web at this URL:
 * https://opensource.org/licenses/AFL-3.0
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@prestashop.com so we can send you a copy immediately.
 *
 * @author    PrestaShop SA <contact@prestashop.com>
 * @copyright Since 2007 PrestaShop SA and Contributors
 * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License (AFL 3.0)
 */

/* Import Google Font Outfit if not present for a premium feel */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700&display=swap');

#isg-sidebanner {
    position: fixed;
    z-index: 999999;
    background: #ffffff;
    box-sizing: border-box;
    font-family: 'Outfit', sans-serif;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1),
                top 0.6s cubic-bezier(0.25, 1, 0.5, 1),
                left 0.6s cubic-bezier(0.25, 1, 0.5, 1),
                right 0.6s cubic-bezier(0.25, 1, 0.5, 1),
                bottom 0.6s cubic-bezier(0.25, 1, 0.5, 1),
                width 0.6s cubic-bezier(0.25, 1, 0.5, 1),
                max-width 0.6s cubic-bezier(0.25, 1, 0.5, 1),
                border-radius 0.6s cubic-bezier(0.25, 1, 0.5, 1),
                opacity 0.4s ease;
    opacity: 1;
}

#isg-sidebanner.isg-sidebanner--hidden {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.9) !important;
}

#isg-sidebanner.isg-sidebanner--hidden.isg-sidebanner--minimized,
#isg-sidebanner.isg-sidebanner--hidden.isg-sidebanner--expanded {
    transform: translateX(105%) !important;
}

/* Cortina / Fondo atenuado (Overlay) */
.isg-sidebanner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    z-index: 999998;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.5s ease-in-out;
}

.isg-sidebanner-overlay.isg-sidebanner-overlay--hidden {
    opacity: 0;
    pointer-events: none;
}

/* ==========================================
   ESTADO: CENTRADO INICIAL
   ========================================== */
#isg-sidebanner.isg-sidebanner--centered {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    width: 90%;
    max-width: 1316px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ==========================================
   ESTADO: MINIMIZADO EN EL LATERAL
   ========================================== */
#isg-sidebanner.isg-sidebanner--minimized {
    top: auto;
    bottom: 80px;
    left: auto;
    right: 0;
    width: 320px;
    border-radius: 12px 0 0 12px;
    transform: translateX(calc(100% - 42px)); /* Deja asomando solo la pestaña */
    box-shadow: -5px 10px 30px rgba(0, 0, 0, 0.15);
}

#isg-sidebanner.isg-sidebanner--minimized:hover {
    transform: translateX(calc(100% - 55px)); /* Desplaza un poco al pasar el ratón para sugerir clic */
}

/* ==========================================
   ESTADO: EXPANDIDO DESDE EL LATERAL
   ========================================== */
#isg-sidebanner.isg-sidebanner--expanded {
    top: auto;
    bottom: 80px;
    left: auto;
    right: 0;
    width: 320px;
    border-radius: 12px 0 0 12px;
    transform: translateX(0);
    box-shadow: -10px 15px 40px rgba(0, 0, 0, 0.25);
}

/* ==========================================
   COMPONENTES INTERNOS
   ========================================== */

/* Botón de cierre */
.isg-sidebanner__close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: #ffffff;
    border: none;
    font-size: 20px;
    line-height: 28px;
    text-align: center;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.isg-sidebanner__close:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
}

/* Contenido / Imagen */
.isg-sidebanner__content {
    width: 100%;
    height: 100%;
}

.isg-sidebanner__link {
    display: block;
    width: 100%;
    height: 100%;
    outline: none;
}

.isg-sidebanner__img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

#isg-sidebanner.isg-sidebanner--centered .isg-sidebanner__img:hover {
    transform: scale(1.02);
}

/* Pestaña de apertura (Handle) */
.isg-sidebanner__handle {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 42px;
    background: #000000;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, background 0.3s ease;
}

#isg-sidebanner.isg-sidebanner--minimized .isg-sidebanner__handle {
    opacity: 1;
    pointer-events: auto;
}

#isg-sidebanner.isg-sidebanner--expanded .isg-sidebanner__handle {
    opacity: 0;
    pointer-events: none;
}

.isg-sidebanner__handle-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
}

.isg-sidebanner__handle-text i {
    font-size: 14px;
    transform: rotate(90deg);
}

/* Ocultar botón de cierre cuando está minimizado */
#isg-sidebanner.isg-sidebanner--minimized .isg-sidebanner__close {
    display: none;
}

/* Adaptación para pantallas pequeñas */
@media (max-width: 767px) {
    #isg-sidebanner.isg-sidebanner--centered {
        width: 95%;
        border-radius: 12px;
    }
    
    #isg-sidebanner.isg-sidebanner--minimized {
        width: 260px;
        transform: translateX(calc(100% - 38px));
        bottom: 60px;
    }
    
    #isg-sidebanner.isg-sidebanner--minimized .isg-sidebanner__handle {
        width: 38px;
    }

    #isg-sidebanner.isg-sidebanner--expanded {
        width: 260px;
        bottom: 60px;
    }
}