/**
 * TIENDA EC - Custom Styles V2.1
 * @package TiendaEC
 */

:root {
    --color-primary: #007bff;
    --color-primary-hover: #0056b3;
    color-scheme: light !important;
}

html { scroll-behavior: smooth; }

/* ─── Marquee Banner ──────────────────────────────────────── */
.marquee-track {
    display: flex;
    animation: marqueeScroll 12s linear infinite;
    width: max-content;
}

@keyframes marqueeScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ─── Carousel ────────────────────────────────────────────── */
#carousel-track,
#product-carousel-track {
    -webkit-overflow-scrolling: touch;
}

.carousel-slide img {
    -webkit-user-drag: none;
    user-select: none;
}

.carousel-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background-color: #cbd5e1;
    border: none; padding: 0;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
}

.carousel-dot.active {
    background-color: var(--color-primary);
    transform: scale(1.3);
}

/* ─── Sticky CTA Bar ─────────────────────────────────────── */
.sticky-cta {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 50;
    padding: 10px 0;
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
    animation: slideUpCTA 0.4s ease-out;
}

@keyframes slideUpCTA {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* ─── Vibrate Animation (#14, #15) ────────────────────────── */
.vibrate-btn {
    animation: btnVibrate 3s ease-in-out infinite;
}

@keyframes btnVibrate {
    0%, 85% { transform: scale(1); }
    87% { transform: scale(1.03) rotate(-0.5deg); }
    89% { transform: scale(1.03) rotate(0.5deg); }
    91% { transform: scale(1.03) rotate(-0.5deg); }
    93% { transform: scale(1.03) rotate(0.5deg); }
    95% { transform: scale(1.03) rotate(-0.3deg); }
    97% { transform: scale(1.01) rotate(0deg); }
    100% { transform: scale(1) rotate(0deg); }
}

/* ─── Quantity Options ────────────────────────────────────── */
.qty-option {
    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.qty-option.active {
    box-shadow: 0 0 0 1px rgba(59,130,246,0.3), 0 4px 12px rgba(59,130,246,0.1);
}

.qty-option:hover:not(.active) { border-color: #94a3b8; }

/* ─── Dropdown Select ─────────────────────────────────────── */
.dropdown-select {
    appearance: none;
    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22%2394a3b8%22%3E%3Cpath d=%22M7 10l5 5 5-5H7z%22/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px;
}

/* ─── Review Cards ────────────────────────────────────────── */
.review-card {
    transition: transform 0.2s, box-shadow 0.2s;
}

.review-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.06);
}

/* ─── Category & Product Cards ────────────────────────────── */
.category-card, .product-card {
    transition: transform 0.3s, box-shadow 0.3s;
}

.category-card:hover { transform: translateY(-4px); }

.product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.08);
}

/* ─── Form Inputs ─────────────────────────────────────────── */
.purchase-form-input {
    transition: border-color 0.2s, box-shadow 0.2s;
}

.purchase-form-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0,123,255,0.15);
}

/* ─── Social Proof Popup (#3) ────────────────────────────── */
.social-proof-popup {
    position: fixed !important;
    bottom: 76px !important;
    left: 12px !important;
    z-index: 99999 !important;
    background: white;
    border-radius: 14px;
    padding: 12px 16px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.06);
    max-width: 300px;
}

.sp-animate-in {
    animation: spSlideIn 0.4s ease-out forwards;
}

.sp-animate-out {
    animation: spSlideOut 0.4s ease-in forwards;
}

@keyframes spSlideIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes spSlideOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(20px); }
}

/* ─── Carrier Logos ───────────────────────────────────────── */
.carrier-logos-section img {
    filter: grayscale(30%);
    transition: filter 0.3s;
}

.carrier-logos-section img:hover { filter: grayscale(0%); }

/* ─── No underline ────────────────────────────────────────── */
a.no-underline { text-decoration: none !important; }

/* ─── Spinner ─────────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }

.spinner {
    display: inline-block;
    width: 20px; height: 20px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* ─── Responsive ──────────────────────────────────────────── */
@media (max-width: 640px) {
    .sticky-cta { padding: 8px 0; }
    .social-proof-popup { bottom: 68px; left: 8px; max-width: 220px; }
    .social-proof-popup p { font-size: 10px; }
}