/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */

/* ── Notificación "producto en carrito" (página de producto) ─────── */
body.page-product #notifications {
    margin: 0;
}
body.page-product #notifications .alert-info {
    background: #f0fafa;
    border: none;
    border-left: 3px solid #00adb5;
    border-radius: 0;
    padding: 0.6rem 1.25rem;
    margin: 0;
    font-size: 0.85rem;
    color: #2a7a80;
}
body.page-product #notifications .alert-info ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
body.page-product #notifications {
    margin-bottom: 1.5rem;
}

/* ── Botones de compartir ────────────────────────────────────────── */
.opc-social-sharing {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}
.opc-social-label {
    font-size: 0.82rem;
    color: #999;
    font-style: italic;
}
.opc-social-sharing ul {
    display: flex;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.opc-share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #e0e0e0;
    color: #aaa !important;
    font-size: 0.85rem;
    text-decoration: none !important;
    transition: border-color 0.2s, color 0.2s;
}
.opc-share-btn:hover {
    border-color: #00adb5;
    color: #00adb5 !important;
}

/* ── Trust badges bajo botones ───────────────────────────────────── */
.opc-trust-badges {
    display: flex;
    gap: 0;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #efefef;
    flex-wrap: wrap;
}
.opc-trust-badge {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
    padding: 0 0.5rem;
    border-right: 1px solid #efefef;
}
.opc-trust-badge:last-child {
    border-right: none;
}
.opc-trust-badge .fa {
    font-size: 1.6rem;
    color: #00adb5;
}
.opc-trust-badge span {
    font-size: 0.75rem;
    color: #666;
    font-weight: 500;
    line-height: 1.3;
}
@media (max-width: 480px) {
    .opc-trust-badge { min-width: 50%; border-right: none; margin-bottom: 1rem; }
}

/* ── Section titles en página de producto ────────────────────────── */
#main .block-section > .section-title,
#main .block-section > h4.section-title {
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #555;
    border-bottom: 1px solid #e8e8e8;
    padding-bottom: 0.75rem;
    margin-bottom: 1.25rem;
}
#main .block-section > .section-title span,
#main .block-section > h4.section-title span {
    background: none;
    padding: 0;
}

/* ── Estrellas sin reseñas (iqitreviews override) ───────────────── */
.iqitreviews-no-reviews .iqit-review-star {
    color: #ddd;
}
.iqitreviews-none {
    color: #999;
    font-size: 0.8rem;
}

/* ── Estado vacío de reseñas (iqitreviews) ───────────────────────── */
.iqit-no-reviews-cta {
    text-align: center;
    padding: 2.5rem 1rem;
}
.iqit-no-reviews-stars {
    margin-bottom: 1rem;
}
.iqit-no-reviews-stars .fa {
    font-size: 2rem;
    color: #ddd;
    margin: 0 2px;
}
.iqit-no-reviews-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 0.35rem;
}
.iqit-no-reviews-subtitle {
    font-size: 0.875rem;
    color: #888;
    margin-bottom: 1.5rem;
}
.iqit-no-reviews-btn {
    padding: 0.6rem 1.5rem;
    font-size: 0.9rem;
}

/* ── Estado vacío de reseñas (productcomments) ───────────────────── */
.opc-empty-reviews {
    text-align: center;
    padding: 2.5rem 1rem;
}
.opc-empty-reviews-stars {
    margin-bottom: 1rem;
}
.opc-empty-reviews-stars .fa {
    font-size: 2rem;
    color: #ddd;
    margin: 0 2px;
}
.opc-empty-reviews-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 0.35rem;
}
.opc-empty-reviews-subtitle {
    font-size: 0.875rem;
    color: #888;
    margin-bottom: 1.5rem;
}
.opc-empty-reviews-btn {
    padding: 0.6rem 1.5rem;
    font-size: 0.9rem;
}

/* ── Indicador de stock ──────────────────────────────────────────── */
.opc-stock-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    font-weight: 500;
}
.opc-stock-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}
.opc-stock--in   .opc-stock-dot { background-color: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,.2); }
.opc-stock--low  .opc-stock-dot { background-color: #f59e0b; box-shadow: 0 0 0 2px rgba(245,158,11,.2); }
.opc-stock--out  .opc-stock-dot { background-color: #ef4444; box-shadow: 0 0 0 2px rgba(239,68,68,.2); }
.opc-stock--in   .opc-stock-label { color: #16a34a; }
.opc-stock--low  .opc-stock-label { color: #b45309; }
.opc-stock--out  .opc-stock-label { color: #dc2626; }
.opc-stock-date { font-weight: 400; opacity: 0.8; }

/* Neutralizar stacking contexts que atrapan el menú mobile
   - #header { z-index: 100 } atrapa el menú cuando no está sticky
   - #mobile-header-sticky { z-index: 5000 } lo atrapa cuando está sticky
   Sin z-index, position:fixed igual funciona para sticky — solo pierde la
   competencia contra otros elementos posicionados, que no existen en esta página */
#header {
    z-index: initial !important;
}

#mobile-header-sticky.stuck-down,
#mobile-header-sticky.stuck-up.visible-stuck-up,
#mobile-header-sticky.stuck-up.visible-stuck-up-scroll {
    z-index: initial !important;
}

/* El menú ya tiene z-index:5005 en theme.css — ahora aplica en root context */

/* Touchspin horizontal en carrito */
.cart-items .bootstrap-touchspin {
    max-width: 120px;
    flex-wrap: nowrap;
}

.cart-items .bootstrap-touchspin .btn-touchspin {
    height: auto;
    min-height: 38px;
    padding: 0 10px;
    line-height: 1;
    flex-shrink: 0;
}

.cart-items .bootstrap-touchspin input {
    min-width: 0;
    text-align: center;
}

/* Barra de búsqueda mobile siempre visible */
.mobile-search-bar {
    padding: 8px 0 10px;
}

.mobile-search-bar .input-group {
    background: #f5f5f5;
    border-radius: 6px;
    overflow: hidden;
}

.mobile-search-bar .form-search-control {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 9px 12px;
    font-size: 14px;
}

.mobile-search-bar .form-search-control:focus {
    background: transparent;
    box-shadow: none;
}

.mobile-search-bar .search-btn {
    background: transparent;
    border: none;
    padding: 0 14px;
    color: #555;
    font-size: 15px;
}

/* ── Badge "Pack" ────────────────────────────────────────────────── */
.product-flag.pack {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: linear-gradient(135deg, #67b0bd 0%, #00adb5 100%);
    color: #fff;
    border-radius: 20px;
    padding: 0.35rem 0.9rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.product-flag.pack .fa {
    font-size: 0.78rem;
}

/* ── Zoom expander (product image) ───────────────────────────────── */
.opc-expander {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 38px !important;
    height: 38px !important;
    background: rgba(103, 176, 189, 0.9) !important;
    border: none !important;
    border-radius: 50% !important;
    color: #fff !important;
    font-size: 1rem !important;
    backdrop-filter: blur(4px);
    transition: background 0.2s, transform 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.opc-expander:hover {
    background: rgba(0, 173, 181, 1) !important;
    color: #fff !important;
    transform: scale(1.1);
}
.opc-expander span { display: none; }

/* ── Pack items compactos ─────────────────────────────────────────── */
.opc-pack-item {
    border-bottom: 1px solid #f0f0f0;
    padding: 0.55rem 0;
}
.opc-pack-item:last-child {
    border-bottom: none;
}
.opc-pack-item .pack-product-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.opc-pack-item .pack-product-thumb {
    flex-shrink: 0;
    width: 68px;
    height: 68px;
    overflow: hidden;
    border-radius: 6px;
    border: 1px solid #efefef;
    background: #fafafa;
}
.opc-pack-item .pack-product-thumb img {
    width: 68px;
    height: 68px;
    object-fit: cover;
}
.opc-pack-item .pack-product-name {
    flex: 1;
    min-width: 0;
}
.opc-pack-item .pack-product-name a {
    font-size: 0.88rem;
    color: #333;
    line-height: 1.35;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}
.opc-pack-item .pack-product-name a:hover {
    color: #00adb5;
}
.opc-pack-item .pack-product-price {
    font-size: 0.83rem;
    color: #888;
    margin-top: 0.2rem;
    display: block;
}
.opc-pack-item .opc-pack-qty {
    flex-shrink: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: #555;
    background: #f5f5f5;
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    white-space: nowrap;
}

/* ── Carousel: flechas mejoradas ─────────────────────────────────── */
.swiper-button-prev,
.swiper-button-next {
    width: 38px !important;
    height: 38px !important;
    background: #fff;
    border: 1.5px solid #e0e0e0;
    border-radius: 50%;
    color: #67b0bd !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
    top: calc(50% - 30px);
}
.swiper-button-prev::after,
.swiper-button-next::after {
    font-size: 13px !important;
    font-weight: 700;
}
.swiper-button-prev:hover,
.swiper-button-next:hover {
    background: #67b0bd;
    border-color: #67b0bd;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(103,176,189,0.35);
}
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
    opacity: 0.3;
    box-shadow: none;
}

/* ── Carousel: puntos tipo pill ──────────────────────────────────── */
.swiper-pagination-bullets .swiper-pagination-bullet {
    width: 8px !important;
    height: 8px !important;
    background: #c8c8c8 !important;
    opacity: 1 !important;
    border-radius: 999px !important;
    transition: width 0.3s ease, background 0.3s ease !important;
    margin: 0 4px !important;
}
.swiper-pagination-bullets .swiper-pagination-bullet-active {
    width: 28px !important;
    background: #67b0bd !important;
}

/* Overlay */
#mobile-menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 5003;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#mobile-menu-overlay.is-active {
    display: block;
    opacity: 1;
}