/* ============================================================
   Aquapro.cl — plugins.css
   Estilos para Swiper, GLightbox, noUiSlider, Select2,
   Scroll-to-top, Toasts, Autocomplete, Loading states
   ============================================================ */

/* ── SCROLL TO TOP ── */
#scrollTop {
    position: fixed; bottom: 2rem; right: 1.5rem; z-index: 999;
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--aq-navy); color: #fff; border: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; cursor: pointer; opacity: 0;
    transform: translateY(12px);
    transition: opacity .3s, transform .3s, background .2s;
    box-shadow: 0 4px 16px rgba(10,37,64,.3);
}
#scrollTop.visible { opacity: 1; transform: translateY(0); }
#scrollTop:hover { background: var(--aq-cyan); }

/* ── CART TOAST ── */
#aqToastWrap {
    position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
    z-index: 1090; min-width: 280px;
}
#aqToast { color: #fff; border-radius: .75rem !important; }
#aqToast .btn-close-white { filter: brightness(0) invert(1); }

/* ── SWIPER HERO ── */
.swiper-hero { width: 100%; height: 100vh; min-height: 700px; }
.swiper-hero .swiper-slide { position: relative; overflow: hidden; }
.swiper-hero .swiper-slide img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.swiper-hero .slide-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to right, rgba(10,37,64,.85) 0%, rgba(10,37,64,.55) 50%, transparent 100%),
                linear-gradient(to top, rgba(10,37,64,.6), transparent 60%);
}
.swiper-hero .slide-content { position: absolute; inset: 0; display: flex; align-items: center; padding-top: 5rem; }
.swiper-hero .swiper-pagination { bottom: 2rem !important; left: 4rem !important; width: auto !important; text-align: left; }
.swiper-hero .swiper-pagination-bullet { width: 8px; height: 8px; background: rgba(255,255,255,.4); opacity: 1; transition: all .3s; }
.swiper-hero .swiper-pagination-bullet-active { width: 28px; border-radius: 99px; background: var(--aq-cyan); }
.swiper-hero .swiper-button-prev,
.swiper-hero .swiper-button-next {
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
    color: #fff; --swiper-navigation-size: 18px;
    transition: background .2s;
}
.swiper-hero .swiper-button-prev:hover,
.swiper-hero .swiper-button-next:hover { background: rgba(255,255,255,.2); }
.swiper-hero .swiper-button-prev { left: 1rem; }
.swiper-hero .swiper-button-next { right: 1rem; }
@media (max-width: 991px) {
    .swiper-hero, .swiper-hero .swiper-slide { min-height: 600px; height: 100svh; }
    .swiper-hero .swiper-pagination { left: 1rem !important; }
}

/* ── SWIPER PRODUCTS ── */
.swiper-products { padding-bottom: 2.5rem !important; overflow: visible !important; }
.swiper-products .swiper-pagination { bottom: 0; }
.swiper-products .swiper-pagination-bullet-active { background: var(--aq-cyan); }
.swiper-products .swiper-button-prev,
.swiper-products .swiper-button-next {
    width: 36px; height: 36px; border-radius: 50%;
    background: #fff; border: 1px solid #e5e7eb;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    color: var(--aq-navy); --swiper-navigation-size: 16px;
    top: calc(50% - 1.5rem);
}
.swiper-products-wrap { position: relative; }

/* ── SWIPER TESTIMONIALS ── */
.swiper-testimonials { padding-bottom: 2.5rem !important; }
.swiper-testimonials .swiper-pagination-bullet-active { background: var(--aq-cyan); }

/* ── GLIGHTBOX ── */
.glightbox-trigger { cursor: zoom-in; position: relative; display: block; }
.glightbox-trigger::after {
    content: '\F3E8'; font-family: 'remixicon'; font-size: 1.25rem;
    position: absolute; top: .5rem; right: .5rem; color: #fff;
    background: rgba(0,0,0,.4); border-radius: .4rem; padding: .2rem .4rem;
    opacity: 0; transition: opacity .2s;
}
.glightbox-trigger:hover::after { opacity: 1; }
/* GLightbox override */
.glightbox-clean .gslide-description { background: var(--aq-navy); }
.glightbox-clean .gnext, .glightbox-clean .gprev { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); }

/* Product thumbnail gallery */
.product-thumbs { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }
.product-thumb {
    width: 72px; height: 72px; border-radius: .75rem; object-fit: cover; object-position: top;
    cursor: pointer; border: 2px solid #f1f1f1; transition: border-color .2s; opacity: .75;
}
.product-thumb:hover, .product-thumb.active { border-color: var(--aq-cyan); opacity: 1; }

/* ── noUiSlider ── */
.noUi-target {
    background: #e5e7eb; border: none; box-shadow: none;
    height: 4px; border-radius: 99px; margin: 1rem .5rem;
}
.noUi-connect { background: var(--aq-cyan); }
.noUi-handle {
    width: 20px !important; height: 20px !important;
    top: -8px !important; right: -10px !important;
    border-radius: 50%; background: #fff;
    border: 2px solid var(--aq-cyan); box-shadow: 0 1px 6px rgba(6,182,212,.3);
    cursor: pointer;
}
.noUi-handle::before, .noUi-handle::after { display: none; }
.noUi-tooltip {
    background: var(--aq-navy); color: #fff; border: none;
    border-radius: .4rem; font-size: .7rem; padding: .15rem .5rem;
}
#priceDisplay { font-size: .8rem; font-weight: 600; color: var(--aq-cyan); text-align: center; }

/* ── SELECT2 ── */
.select2-container .select2-selection--single {
    height: 36px; border: 1px solid #e5e7eb; border-radius: .75rem;
    display: flex; align-items: center;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--aq-navy); font-size: .875rem; font-weight: 600; padding-left: .75rem;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 34px;
}
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--aq-cyan); box-shadow: 0 0 0 .15rem rgba(6,182,212,.2);
}
.aq-select2-dropdown { border: 1px solid #e5e7eb; border-radius: .75rem; box-shadow: 0 8px 24px rgba(0,0,0,.1); }
.select2-results__option { font-size: .875rem; padding: .5rem .75rem; }
.select2-results__option--highlighted { background: rgba(6,182,212,.1) !important; color: var(--aq-cyan) !important; }
.select2-results__option--selected { background: rgba(6,182,212,.15) !important; color: var(--aq-navy) !important; font-weight: 600; }

/* ── SEARCH AUTOCOMPLETE ── */
#searchSuggestions {
    background: #fff; border: 1px solid #e5e7eb; border-radius: .75rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.1); margin-top: .25rem;
    overflow: hidden; max-height: 260px; overflow-y: auto;
}
.sug-item {
    background: transparent; border: none; font-size: .875rem; color: var(--aq-navy);
    transition: background .15s; cursor: pointer;
}
.sug-item:hover { background: rgba(6,182,212,.08); color: var(--aq-cyan); }

/* ── LOADING STATE (product grid) ── */
.aq-loading { opacity: .5; pointer-events: none; transition: opacity .3s; }
.aq-loading::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 36px; height: 36px; border: 3px solid #e5e7eb;
    border-top-color: var(--aq-cyan); border-radius: 50%;
    animation: aqSpin .7s linear infinite;
}
@keyframes aqSpin { to { transform: translate(-50%,-50%) rotate(360deg); } }
#productsGrid { position: relative; min-height: 200px; }

/* ── LAZY IMAGES ── */
img[data-src] { opacity: 0; transition: opacity .4s; }
img.img-loaded { opacity: 1; }

/* ── COUNTER ── */
[data-count] { display: inline-block; }