/* Store — Dark Mode */

/* ============================================
   DARK MODE — Customer-facing Store Pages
   ============================================ */

/* Dark Mode Toggle Button — Floating Top-Left */
.store-dark-mode-toggle {
  position: fixed;
  top: 24px;
  left: 24px;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  border: none;
  background: var(--background-white, var(--bg-surface));
  color: var(--text-color, #0f172a);
  font-size: var(--text-lg);
  cursor: pointer;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md), 0 0 0 1px color-mix(in oklch, black 5%, transparent);
  transition: all 0.3s var(--easing);
  -webkit-tap-highlight-color: transparent;
}

.store-dark-mode-toggle:hover {
  transform: scale(1.1);
  box-shadow: var(--shadow-lg);
}

.store-dark-mode-toggle:active {
  transform: scale(0.95);
}

@media (min-width: 768px) {
  .store-dark-mode-toggle {
    top: 32px;
    left: 32px;
  }
}

/* Dark mode root vars now in dark-mode.css */


/* ---- Body & Container ---- */
[data-theme="dark"] body {
  background: linear-gradient(160deg, #0f172a 0%, #1a1f36 40%, #0f172a 100%);
  color: var(--text-color);
}

[data-theme="dark"] .store-container {
  color: var(--text-color);
}

/* ---- Dark Mode Toggle Self ---- */
[data-theme="dark"] .store-dark-mode-toggle {
  background: var(--bg-dark-surface);
  color: var(--accent-amber);
  box-shadow: var(--shadow-md), 0 0 0 1px color-mix(in oklch, white 8%, transparent);
}

/* ---- Categories Navigation ---- */
[data-theme="dark"] .categories-nav {
  background: linear-gradient(180deg, var(--background-color) 0%, transparent 100%);
}

[data-theme="dark"] .categories-nav::before {
  background: linear-gradient(90deg, var(--background-color) 20%, transparent 100%);
}

[data-theme="dark"] .categories-nav::after {
  background: linear-gradient(-90deg, var(--background-color) 20%, transparent 100%);
}

[data-theme="dark"] .category-btn {
  background: var(--bg-dark-surface);
  border-color: #334155;
  color: var(--text-muted);
}

[data-theme="dark"] .category-btn:hover {
  background: #334155;
  color: var(--primary-light);
  border-color: var(--primary-color);
}

[data-theme="dark"] .category-btn .category-count {
  background: rgba(255,255,255,0.08);
}

/* ---- Search Bar ---- */
[data-theme="dark"] .store-search-box input {
  background: var(--bg-dark-surface);
  border-color: #334155;
  color: var(--text-dark-body);
}

[data-theme="dark"] .store-search-box input:focus-visible {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--primary-color) 15%, transparent), var(--shadow);
}

[data-theme="dark"] .store-search-box input::placeholder {
  color: var(--text-secondary);
}

[data-theme="dark"] .search-clear {
  background: #334155;
  color: var(--text-muted);
}

/* ---- View Toggle & Count ---- */
[data-theme="dark"] .view-toggle-container {
  background: linear-gradient(180deg, transparent 0%, var(--background-color) 100%);
}

[data-theme="dark"] .products-count {
  color: var(--text-muted);
}

[data-theme="dark"] .products-count strong {
  color: var(--text-dark-body);
}

[data-theme="dark"] .view-toggle {
  background: var(--bg-dark-surface);
  border-color: #334155;
}

[data-theme="dark"] .view-toggle-btn {
  color: var(--text-secondary);
}

[data-theme="dark"] .view-toggle-btn:hover {
  color: var(--text-dark-body);
  background: #334155;
}

/* ---- Product Cards ---- */
[data-theme="dark"] .product-card {
  background: var(--bg-dark-surface);
  border-color: color-mix(in oklch, var(--border-color) 60%, transparent);
  box-shadow: var(--shadow-sm), inset 0 1px 0 color-mix(in oklch, white 3%, transparent);
}

[data-theme="dark"] .product-card:hover {
  box-shadow: var(--shadow-xl);
  border-color: color-mix(in oklch, var(--primary-color) 30%, transparent);
}

[data-theme="dark"] .product-card::before {
  background: linear-gradient(135deg, color-mix(in oklch, var(--primary-color) 3%, transparent) 0%, transparent 60%);
}

[data-theme="dark"] .product-info h3,
[data-theme="dark"] .product-name {
  color: var(--text-dark-heading);
}

[data-theme="dark"] .product-description,
[data-theme="dark"] .product-info p {
  color: var(--text-muted);
}

[data-theme="dark"] .product-price {
  color: var(--primary-light);
}

[data-theme="dark"] .product-category {
  background: rgba(255,255,255,0.06);
  color: var(--text-muted);
}

[data-theme="dark"] .product-image-placeholder,
[data-theme="dark"] .product-card .no-image {
  background: #334155;
  color: var(--text-secondary);
}

/* ---- Featured Section ---- */
[data-theme="dark"] .section-title {
  color: var(--text-dark-heading);
}

[data-theme="dark"] .see-all-link {
  color: var(--primary-light);
}

/* ---- Empty State ---- */
[data-theme="dark"] .empty-state {
  color: var(--text-secondary);
}

[data-theme="dark"] .empty-state i {
  color: var(--text-light);
}

[data-theme="dark"] .empty-state h2 {
  color: var(--text-muted);
}

/* ---- Skeleton Loading ---- */
[data-theme="dark"] .product-card-skeleton,
[data-theme="dark"] .skeleton {
  background: var(--bg-dark-surface);
}

[data-theme="dark"] .skeleton-image,
[data-theme="dark"] .skeleton-title,
[data-theme="dark"] .skeleton-category,
[data-theme="dark"] .skeleton-text,
[data-theme="dark"] .skeleton-price,
[data-theme="dark"] .skeleton-button {
  background: linear-gradient(90deg, #334155 25%, var(--text-light) 50%, #334155 75%);
  background-size: 200% 100%;
}

/* ---- Modals (Cart, Payment, Customer, Confirm, QR) ---- */
[data-theme="dark"] .modal .modal-content {
  background: var(--bg-dark-surface);
  color: var(--text-dark-body);
  border: 1px solid #334155;
}

[data-theme="dark"] .modal-header {
  border-bottom-color: #334155;
  color: var(--text-dark-heading);
}

[data-theme="dark"] .modal-header h2 {
  color: var(--text-dark-heading);
}

[data-theme="dark"] .close-modal {
  color: var(--text-muted);
}

[data-theme="dark"] .close-modal:hover {
  color: var(--text-dark-heading);
}

[data-theme="dark"] .cart-items {
  border-color: #334155;
}

[data-theme="dark"] .cart-item {
  border-bottom-color: #334155;
}

[data-theme="dark"] .cart-item-name {
  color: var(--text-dark-heading);
}

[data-theme="dark"] .cart-item-price {
  color: var(--primary-light);
}

[data-theme="dark"] .cart-summary {
  background: #0f172a;
  border-top-color: #334155;
}

[data-theme="dark"] .total-amount,
[data-theme="dark"] .order-total-amount {
  color: var(--primary-light);
}

[data-theme="dark"] .payment-option {
  background: #0f172a;
  border-color: #334155;
  color: var(--text-dark-body);
}

[data-theme="dark"] .payment-option:hover {
  border-color: var(--primary-color);
  background: color-mix(in oklch, var(--primary-color) 5%, transparent);
}

[data-theme="dark"] .payment-option h4 {
  color: var(--text-dark-heading);
}

[data-theme="dark"] .payment-option p {
  color: var(--text-muted);
}

[data-theme="dark"] .payment-summary {
  color: var(--text-dark-body);
}

[data-theme="dark"] .payment-summary h3 {
  color: var(--text-dark-heading);
}

[data-theme="dark"] .customer-info-content {
  background: var(--bg-dark-surface);
}

[data-theme="dark"] .customer-form-section label {
  color: var(--text-muted);
}

[data-theme="dark"] .customer-form-section input,
[data-theme="dark"] .customer-form-section textarea,
[data-theme="dark"] .customer-form-section select {
  background: #0f172a;
  border-color: #334155;
  color: var(--text-dark-body);
}

[data-theme="dark"] .customer-form-section input:focus-visible,
[data-theme="dark"] .customer-form-section textarea:focus-visible {
  border-color: var(--primary-color);
}

[data-theme="dark"] .customer-form-section input::placeholder,
[data-theme="dark"] .customer-form-section textarea::placeholder {
  color: var(--text-light);
}

[data-theme="dark"] .input-hint {
  color: var(--text-secondary);
}

[data-theme="dark"] .delivery-option-content {
  background: #0f172a;
  border-color: #334155;
  color: var(--text-muted);
}

[data-theme="dark"] .delivery-option input:checked + .delivery-option-content {
  border-color: var(--primary-color);
  background: color-mix(in oklch, var(--primary-color) 8%, transparent);
}

[data-theme="dark"] .order-preview {
  background: #0f172a;
  border-color: #334155;
}

[data-theme="dark"] .order-preview h4 {
  color: var(--text-dark-heading);
}

[data-theme="dark"] .checkout-progress .progress-step {
  color: var(--text-secondary);
}

[data-theme="dark"] .checkout-progress .progress-step.active,
[data-theme="dark"] .checkout-progress .progress-step.completed {
  color: var(--primary-light);
}

[data-theme="dark"] .checkout-progress .progress-line {
  background: #334155;
}

[data-theme="dark"] .checkout-progress .progress-line.active {
  background: var(--primary-gradient);
}

[data-theme="dark"] .confirm-section {
  border-bottom-color: #334155;
}

[data-theme="dark"] .confirm-section h4 {
  color: var(--text-dark-heading);
}

[data-theme="dark"] .confirm-total {
  color: var(--primary-light);
}

[data-theme="dark"] .whatsapp-confirm {
  background: color-mix(in oklch, var(--whatsapp-color) 8%, transparent);
  border-color: color-mix(in oklch, var(--whatsapp-color) 20%, transparent);
}

[data-theme="dark"] .store-qr-display {
  background: white;
  border-radius: var(--radius);
  padding: var(--space-4);
}

[data-theme="dark"] .store-qr-info h3 {
  color: var(--text-dark-heading);
}

[data-theme="dark"] .store-qr-hint {
  color: var(--text-muted);
}

[data-theme="dark"] .store-qr-footer {
  border-top-color: #334155;
}

/* ---- Product Detail Bottom Sheet ---- */
[data-theme="dark"] .product-detail-sheet {
  background: rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .sheet-content {
  background: var(--bg-dark-surface);
  border-top-color: #334155;
}

[data-theme="dark"] .sheet-drag-handle span {
  background: var(--text-light);
}

[data-theme="dark"] .sheet-close-btn {
  background: #334155;
  color: var(--text-muted);
}

[data-theme="dark"] .sheet-category {
  color: var(--text-muted);
  background: rgba(255,255,255,0.06);
}

[data-theme="dark"] .sheet-name {
  color: var(--text-dark-heading);
}

[data-theme="dark"] .sheet-description {
  color: var(--text-muted);
}

[data-theme="dark"] .sheet-price {
  color: var(--primary-light);
}

[data-theme="dark"] .sheet-quantity button {
  background: #334155;
  color: var(--text-dark-body);
  border-color: var(--text-light);
}

[data-theme="dark"] .sheet-quantity .qty-value {
  color: var(--text-dark-heading);
}

/* ---- Sticky Cart Bar ---- */
[data-theme="dark"] .sticky-cart-bar {
  background: var(--bg-dark-surface);
  border-color: var(--border-color);
  box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .cart-bar-info {
  color: var(--text-dark-body);
}

[data-theme="dark"] .cart-bar-total {
  color: var(--primary-light);
}

/* ---- Mobile Bottom Navigation ---- */
[data-theme="dark"] .mobile-bottom-nav {
  background: var(--bg-dark-surface);
  border-top-color: var(--border-color);
  box-shadow: var(--shadow-md);
}

[data-theme="dark"] .mobile-nav-item {
  color: var(--text-secondary);
}

[data-theme="dark"] .mobile-nav-item.active {
  color: var(--primary-light);
}

/* ---- Store Footer ---- */
[data-theme="dark"] .store-footer {
  color: var(--text-secondary);
}

[data-theme="dark"] .store-footer a {
  color: var(--primary-light);
}

/* ---- Buttons ---- */
[data-theme="dark"] .btn-accent {
  background: #334155;
  color: var(--text-dark-body);
  border-color: var(--text-light);
}
/* Dark .btn-outline — see css/components/buttons.css */

/* ---- Cart Icon (Floating) ---- */
[data-theme="dark"] .cart-icon {
  background: var(--bg-dark-surface);
  color: var(--primary-light);
  box-shadow: var(--shadow-lg), 0 0 0 1px color-mix(in oklch, white 6%, transparent);
}

[data-theme="dark"] .cart-count {
  border-color: var(--text-primary);
}

/* ---- Share Store Button ---- */
[data-theme="dark"] .share-store-btn {
  background: var(--bg-dark-surface);
  color: var(--primary-light);
  box-shadow: var(--shadow-md);
}

/* ---- Store Address ---- */
[data-theme="dark"] .store-address {
  color: rgba(255,255,255,0.7);
}

/* ---- Misc ---- */
[data-theme="dark"] .loading-state {
  color: var(--text-muted);
}

[data-theme="dark"] .loading-state i {
  color: var(--primary-light);
}

[data-theme="dark"] ::selection {
  background: color-mix(in oklch, var(--primary-color) 30%, transparent);
  color: white;
}