/**
 * Smart Gear Select — Best Budget Smartwatches 2026
 * Non-critical styles (cached separately)
 *
 * Critical styles are inlined in the PHP template.
 * This file is enqueued for caching and overrides.
 *
 * @version 1.0.0
 */

/* ============================================================
   PRINT STYLES
   ============================================================ */

@media print {
    .sgs-bb-hero__actions,
    .sgs-bb-product-card__actions,
    .sgs-bb-trust-bar,
    .sgs-bb-related-grid,
    .sgs-bb-author-box__credentials {
        display: none !important;
    }
    
    .sgs-bb-product-card {
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ccc;
    }
    
    .sgs-bb-hero {
        background: #fff;
        color: #000;
        padding: 20px 0;
    }
    
    .sgs-bb-hero__title {
        color: #000;
    }
}

/* ============================================================
   REDUCED MOTION PREFERENCE
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .sgs-bb-product-card,
    .sgs-bb-related-card,
    .sgs-bb-btn {
        transition: none !important;
        transform: none !important;
        animation: none !important;
    }
    
    .sgs-bb-product-card:hover,
    .sgs-bb-related-card:hover {
        transform: none !important;
    }
    
    .sgs-bb-btn:hover {
        transform: none !important;
    }
}

/* ============================================================
   DARK MODE SUPPORT (OPTIONAL)
   ============================================================ */

@media (prefers-color-scheme: dark) {
    .sgs-bb-wrap {
        background: #0f172a;
        color: #cbd5e1;
    }
    
    .sgs-bb-product-card {
        background: #1e293b;
        border-color: #334155;
    }
    
    .sgs-bb-product-card__name {
        color: #f1f5f9;
    }
    
    .sgs-bb-product-card__desc {
        color: #94a3b8;
    }
    
    .sgs-bb-faq-item {
        background: #1e293b;
        border-color: #334155;
    }
    
    .sgs-bb-faq-item__question {
        color: #f1f5f9;
    }
    
    .sgs-bb-faq-item__answer {
        color: #94a3b8;
    }
    
    .sgs-bb-related-card {
        background: #1e293b;
    }
    
    .sgs-bb-related-card:hover {
        background: #334155;
    }
    
    .sgs-bb-related-card__title {
        color: #f1f5f9;
    }
    
    .sgs-bb-author-box {
        background: #1e293b;
        border-color: #334155;
    }
    
    .sgs-bb-author-box__name {
        color: #f1f5f9;
    }
    
    .sgs-bb-author-box__bio {
        color: #94a3b8;
    }
    
    .sgs-bb-credential {
        background: #0f172a;
        border-color: #334155;
        color: #94a3b8;
    }
}

/* ============================================================
   ADDITIONAL NON-CRITICAL STYLES
   ============================================================ */

/* Smooth hover transitions for all interactive elements */
.sgs-bb-product-card,
.sgs-bb-related-card,
.sgs-bb-btn {
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                background 0.2s ease,
                border-color 0.2s ease;
}

/* Focus styles for keyboard navigation */
.sgs-bb-btn:focus-visible,
.sgs-bb-related-card:focus-visible,
.sgs-bb-faq-item__question:focus-visible {
    outline: 2px solid #10b981;
    outline-offset: 3px;
    border-radius: 8px;
}

/* Disabled button state (if used) */
.sgs-bb-btn--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Loading skeleton animation for images (optional) */
.sgs-bb-product-card__image img {
    background: linear-gradient(
        90deg,
        #f0fdf4 25%,
        #dcfce7 50%,
        #f0fdf4 75%
    );
    background-size: 200% 100%;
    animation: sgsBbShimmer 1.5s ease-in-out infinite;
}

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

/* Remove animation once image loads */
.sgs-bb-product-card__image img.loaded {
    animation: none;
    background: none;
}