/* ============================================
   Panorama Trade — Enhancements CSS v3
   Performance · UX · Accessibility · Dark Mode
   ============================================ */

/* ── 1. Smooth image loading ── */
img[data-src] {
    background: linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}
img.loaded { animation: imgFadeIn 0.35s ease-in; }

@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}
@keyframes imgFadeIn {
    from { opacity: 0; transform: scale(1.02); }
    to   { opacity: 1; transform: scale(1); }
}

/* ── 2. Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
.reduce-motion * { animation: none !important; transition: none !important; }

/* ── 3. Offline banner ── */
body[data-network-status="offline"]::before {
    content: '⚠️ No internet connection';
    position: fixed; top: 0; left: 0; right: 0;
    background: #f59e0b; color: #fff;
    text-align: center; padding: 8px;
    font-size: 0.85rem; font-weight: 600;
    z-index: 9999; animation: slideDown 0.3s ease;
}
@keyframes slideDown {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

/* ── 4. Skeleton ── */
.skeleton {
    background: linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 8px;
}
.skeleton-text  { height: 16px; margin-bottom: 8px; }
.skeleton-title { height: 24px; width: 60%; margin-bottom: 12px; }
.skeleton-image { height: 200px; width: 100%; }

/* ── 5. Focus / Accessibility ── */
*:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}
body.using-keyboard *:focus {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

/* ── 6. Smooth scroll ── */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ── 7. Touch targets ── */
@media (max-width: 768px) {
    button, a,
    input[type="checkbox"],
    input[type="radio"] {
        min-height: 44px;
        min-width: 44px;
    }
    /* Prevent zoom on input focus */
    input, select, textarea { font-size: 16px !important; }
    * { -webkit-tap-highlight-color: rgba(37,99,235,0.15); }
}

/* ── 8. Print ── */
@media print {
    .no-print, .header, .sidebar, .mobile-nav,
    .fab-search, button, .modal-overlay { display: none !important; }
    .product-card { break-inside: avoid; page-break-inside: avoid; }
    body { background: #fff !important; color: #000 !important; }
}

/* ── 9. Pause animations on hidden tab ── */
body.paused * { animation-play-state: paused !important; }

/* ── 10. Selection color ── */
::selection       { background: var(--primary); color: #fff; }
::-moz-selection  { background: var(--primary); color: #fff; }

/* ── 11. Custom scrollbar ── */
::-webkit-scrollbar       { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-elevated); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── 12. Spinner ── */
.spinner {
    display: inline-block;
    width: 20px; height: 20px;
    border: 3px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 13. Tooltip ── */
[data-tooltip] { position: relative; cursor: help; }
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute; bottom: 100%; left: 50%;
    transform: translateX(-50%) translateY(-8px);
    padding: 6px 12px;
    background: rgba(0,0,0,0.88); color: #fff;
    font-size: 0.75rem; border-radius: 6px;
    white-space: nowrap; opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
    z-index: 1000;
}
[data-tooltip]:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(-4px);
}

/* ── 14. Form validation ── */
input:invalid:not(:placeholder-shown),
textarea:invalid:not(:placeholder-shown) { border-color: var(--danger) !important; }
input:valid:not(:placeholder-shown),
textarea:valid:not(:placeholder-shown)   { border-color: var(--success) !important; }

/* ── 15. Disabled buttons ── */
button:disabled, button[disabled] {
    opacity: 0.5; cursor: not-allowed; pointer-events: none;
}

/* ── 16. GPU acceleration — only animated elements ── */
.product-card { will-change: transform; }
.modal        { will-change: transform, opacity; }

/* ── 17. Dark mode ── */
html.force-dark { color-scheme: dark; }
html.force-dark img { opacity: 0.92; }

/* ── 18. Product card hover glow ── */
.product-card:hover {
    box-shadow: 0 8px 32px rgba(37,99,235,0.13), 0 2px 8px rgba(0,0,0,0.07);
}

/* ── 19. Category chip count badge ── */
.chip-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 5px;
    background: rgba(37,99,235,0.12); color: var(--primary);
    border-radius: 10px; font-size: 0.7rem; font-weight: 700;
    margin-left: 4px;
}
.category-chip.active .chip-count {
    background: rgba(255,255,255,0.25); color: #fff;
}

/* ── 20. Smooth page transitions ── */
.view { transition: opacity 0.18s ease; }
.view:not(.active) { opacity: 0; pointer-events: none; }
.view.active { opacity: 1; }

/* ── 21. Better toast ── */
.toast {
    transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
}

/* ── 22. Loading overlay ── */
.loading-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999; backdrop-filter: blur(4px);
}
.loading-overlay .spinner { width: 48px; height: 48px; border-width: 4px; }

/* ── 23. Skip to content ── */
.skip-to-content {
    position: absolute; top: -40px; left: 0;
    background: var(--primary); color: #fff;
    padding: 8px 16px; text-decoration: none; z-index: 10000;
    border-radius: 0 0 6px 0;
}
.skip-to-content:focus { top: 0; }

/* ── 24. Sticky header shadow on scroll ── */
.header.scrolled {
    box-shadow: 0 2px 16px rgba(0,0,0,0.1);
}

/* ── 25. Product card image zoom cursor ── */
.product-image { cursor: zoom-in; }

/* ── 26. Smooth number counter animation ── */
.stat-number { transition: all 0.4s ease; }

/* ── 27. Better mobile modal ── */
@media (max-width: 767px) {
    .modal-overlay { align-items: flex-end; }
    .modal {
        border-radius: 20px 20px 0 0;
        max-height: 92vh;
        padding-bottom: max(20px, env(safe-area-inset-bottom));
    }
}

/* ── 28. Ripple effect on buttons ── */
.btn { position: relative; overflow: hidden; }
.btn::after {
    content: '';
    position: absolute; inset: 0;
    background: rgba(255,255,255,0.18);
    opacity: 0; border-radius: inherit;
    transition: opacity 0.2s;
}
.btn:active::after { opacity: 1; }

/* ── 29. Dark mode skeleton ── */
html.force-dark .skeleton,
@media (prefers-color-scheme: dark) {
    .skeleton {
        background: linear-gradient(90deg,#1e293b 25%,#334155 50%,#1e293b 75%);
        background-size: 200% 100%;
    }
}

/* ── 30. Scrollbar in dark mode ── */
html.force-dark ::-webkit-scrollbar-track { background: #0f172a; }
html.force-dark ::-webkit-scrollbar-thumb { background: #334155; }
html.force-dark ::-webkit-scrollbar-thumb:hover { background: #475569; }