/* ═══════════════════════════════════════════════════════════
   Store SPA Styles
   ═══════════════════════════════════════════════════════════ */
body { font-family: 'Inter', system-ui, sans-serif; }

/* Material Symbols — ensure filled style and proper sizing */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-size: 24px;
    vertical-align: middle;
}

/* SPA transitions */
#app { opacity: 1; transition: opacity 0.15s; }
#app.loading { opacity: 0.5; }

/* Auth modal */
.modal-overlay { position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:200;display:flex;align-items:center;justify-content:center;animation:fadeIn 0.2s }
.modal-box { background:#fff;border-radius:var(--bath-radius);padding:32px;max-width:420px;width:90%;max-height:90vh;overflow-y:auto;box-shadow:0 25px 50px rgba(0,0,0,0.25) }
.modal-box h2 { margin:0 0 24px;font-size:24px;font-weight:700 }
.modal-close { position:absolute;top:12px;right:12px;background:none;border:none;font-size:24px;cursor:pointer;color:var(--bath-text-muted) }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

/* Skeleton loader */
.skeleton { background: linear-gradient(90deg, var(--bath-surface-alt) 25%, var(--bath-divider) 50%, var(--bath-surface-alt) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 8px; }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.skeleton-card { height: 280px; }
.skeleton-text { height: 16px; margin-bottom: 8px; }
.skeleton-text.short { width: 60%; }

/* Tabs */
.bath-tabs { display:flex;gap:0;border-bottom:2px solid var(--bath-divider);margin-bottom:24px }
.bath-tab { padding:12px 20px;font-size:14px;font-weight:600;color:var(--bath-text-muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all 0.2s }
.bath-tab:hover { color:var(--bath-text) }
.bath-tab.active { color:var(--bath-primary);border-bottom-color:var(--bath-primary) }

/* Product detail */
.product-detail { display:grid;grid-template-columns:1fr 1fr;gap:40px }
.product-gallery img { width:100%;border-radius:var(--bath-radius);aspect-ratio:1;object-fit:cover;background:var(--bath-surface-alt) }
.product-info .price { font-size:28px;font-weight:800;color:var(--bath-primary-dark);margin:12px 0 }
.variant-options { display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 }
.variant-btn { padding:8px 16px;border:2px solid var(--bath-divider);border-radius:var(--bath-radius-sm);cursor:pointer;font-weight:600;font-size:13px;background:var(--bath-surface);transition:all 0.2s }
.variant-btn:hover,.variant-btn.selected { border-color:var(--bath-primary);background:var(--bath-badge-bg);color:var(--bath-primary) }

/* Checkout */
.checkout-grid { display:grid;grid-template-columns:1.2fr 0.8fr;gap:32px }
.order-summary { position:sticky;top:80px;background:var(--bath-surface-alt);border-radius:var(--bath-radius);padding:24px }

/* Profile / Account */
.account-layout { display:grid;grid-template-columns:240px 1fr;gap:32px }
.account-sidebar a { display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--bath-radius-sm);color:var(--bath-text-secondary);font-weight:500;font-size:14px;transition:all 0.2s }
.account-sidebar a:hover,.account-sidebar a.active { background:var(--bath-badge-bg);color:var(--bath-primary) }

/* Admin stat icons */
.stat-icon-blue { background:#DBEAFE;color:#2563EB }
.stat-icon-green { background:#DCFCE7;color:#16A34A }
.stat-icon-orange { background:#FEF3C7;color:#D97706 }
.stat-icon-purple { background:#EDE9FE;color:#7C3AED }

/* Quantity selector */
.qty-selector { display:flex;align-items:center;border:1.5px solid var(--bath-divider);border-radius:var(--bath-radius-sm);overflow:hidden }
.qty-selector button { width:36px;height:36px;border:none;background:var(--bath-surface-alt);cursor:pointer;font-size:18px;font-weight:600;transition:background 0.2s }
.qty-selector button:hover { background:var(--bath-primary);color:#fff }
.qty-selector span { min-width:40px;text-align:center;font-weight:600;font-size:15px }

/* Address card */
.address-card { border:1.5px solid var(--bath-divider);border-radius:var(--bath-radius);padding:16px;cursor:pointer;transition:all 0.2s }
.address-card:hover,.address-card.selected { border-color:var(--bath-primary);background:var(--bath-badge-bg) }

/* Search overlay */
.search-overlay { position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7);z-index:300;display:flex;align-items:flex-start;justify-content:center;padding-top:80px }
.search-box { background:#fff;border-radius:var(--bath-radius);padding:24px;width:90%;max-width:640px }
.search-results { max-height:400px;overflow-y:auto;margin-top:16px }

/* Admin date filter bar — compact single row */
.admin-date-filter { display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:16px;padding:10px 14px;background:var(--bath-surface-alt);border-radius:var(--bath-radius-sm);border:1px solid var(--bath-divider) }
.date-filter-presets { display:flex;gap:4px;flex-wrap:wrap }
.date-preset { background:var(--bath-surface);border:1.5px solid var(--bath-divider);color:var(--bath-text-secondary);font-weight:600;font-size:12px;padding:4px 12px;border-radius:6px;cursor:pointer;transition:all 0.2s }
.date-preset:hover { border-color:var(--bath-primary);color:var(--bath-primary) }
.date-preset.active { background:var(--bath-primary);color:#fff;border-color:var(--bath-primary) }
.date-filter-inputs { display:flex;align-items:center;gap:8px;flex-wrap:wrap }
.date-filter-label { display:flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--bath-text-secondary) }
.bath-input-sm { padding:4px 8px;font-size:12px;border:1.5px solid var(--bath-divider);border-radius:6px;background:var(--bath-surface) }

/* Responsive */
@media(max-width:768px) {
    .product-detail { grid-template-columns:1fr }
    .checkout-grid { grid-template-columns:1fr }
    .account-layout { grid-template-columns:1fr }
    .bath-admin-sidebar { position:fixed;left:-260px;transition:left 0.3s;z-index:150 }
    .bath-admin-sidebar.open { left:0 }
}