/* Light Mode Only Store Styles
 * These styles force light mode for public store pages
 * regardless of user or system preferences
 */

/* Force light mode for public store pages */
.light-mode-only {
  /* Override color variables to always use light mode values */
  --color-background: #ffffff !important;
  --color-background-secondary: #f9fafb !important;
  --color-background-tertiary: #f3f4f6 !important;
  --color-surface: #ffffff !important;

  --color-text-primary: #111827 !important;
  --color-text-secondary: #4b5563 !important;
  --color-text-tertiary: #9ca3af !important;
  --color-text-inverse: #ffffff !important;

  --color-border: #e5e7eb !important;
  --color-border-hover: #d1d5db !important;
  --color-border-focus: #3b82f6 !important;

  --color-neutral-50: #f9fafb !important;
  --color-neutral-100: #f3f4f6 !important;
  --color-neutral-200: #e5e7eb !important;
  --color-neutral-300: #d1d5db !important;
  --color-neutral-400: #9ca3af !important;
  --color-neutral-500: #6b7280 !important;
  --color-neutral-600: #4b5563 !important;
  --color-neutral-700: #374151 !important;
  --color-neutral-800: #1f2937 !important;
  --color-neutral-900: #111827 !important;

  --color-primary-50: #eff6ff !important;
  --color-primary-100: #dbeafe !important;
  --color-primary-200: #bfdbfe !important;
  --color-primary-300: #93c5fd !important;
  --color-primary-400: #60a5fa !important;
  --color-primary-500: #3b82f6 !important;
  --color-primary-600: #2563eb !important;
  --color-primary-700: #1d4ed8 !important;
  --color-primary-800: #1e40af !important;
  --color-primary-900: #1e3a8a !important;

  --color-success-50: #f0fdf4 !important;
  --color-success-100: #dcfce7 !important;
  --color-success-200: #bbf7d0 !important;
  --color-success-300: #86efac !important;
  --color-success-400: #4ade80 !important;
  --color-success-500: #22c55e !important;
  --color-success-600: #16a34a !important;
  --color-success-700: #15803d !important;
  --color-success-800: #166534 !important;
  --color-success-900: #14532d !important;

  --color-info-50: #eff6ff !important;
  --color-info-100: #dbeafe !important;
  --color-info-200: #bfdbfe !important;
  --color-info-300: #93c5fd !important;
  --color-info-400: #60a5fa !important;
  --color-info-500: #3b82f6 !important;
  --color-info-600: #2563eb !important;
  --color-info-700: #1d4ed8 !important;
  --color-info-800: #1e40af !important;
  --color-info-900: #1e3a8a !important;

  --color-warning-50: #fffbeb !important;
  --color-warning-100: #fef3c7 !important;
  --color-warning-200: #fde68a !important;
  --color-warning-300: #fcd34d !important;
  --color-warning-400: #fbbf24 !important;
  --color-warning-500: #f59e0b !important;
  --color-warning-600: #d97706 !important;
  --color-warning-700: #b45309 !important;
  --color-warning-800: #92400e !important;
  --color-warning-900: #78350f !important;

  --color-danger-50: #fef2f2 !important;
  --color-danger-100: #fee2e2 !important;
  --color-danger-200: #fecaca !important;
  --color-danger-300: #fca5a5 !important;
  --color-danger-400: #f87171 !important;
  --color-danger-500: #ef4444 !important;
  --color-danger-600: #dc2626 !important;
  --color-danger-700: #b91c1c !important;
  --color-danger-800: #991b1b !important;
  --color-danger-900: #7f1d1d !important;

  /* Ensure background is always white */
  background-color: #ffffff !important;
  color: #111827 !important;

  /* Disable color-scheme to prevent browser dark mode overrides */
  color-scheme: light !important;
}

/* Apply light background to body when public store is visible */
body:has(.light-mode-only) {
  background-color: #ffffff !important;
  color-scheme: light !important;
}

/* Override any dark mode media queries for light-mode-only elements */
@media (prefers-color-scheme: dark) {
  .light-mode-only,
  .light-mode-only * {
    background-color: inherit;
    color: inherit;
  }

  body:has(.light-mode-only) {
    background-color: #ffffff !important;
  }
}

/* Override manual dark theme for light-mode-only elements */
[data-theme="dark"] .light-mode-only,
[data-theme="dark"] .light-mode-only * {
  background-color: inherit;
  color: inherit;
}

[data-theme="dark"] body:has(.light-mode-only) {
  background-color: #ffffff !important;
}

/* Public Store Specific Styles */
.public-store {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-6);
}

.store-header {
  text-align: center;
  margin-bottom: var(--spacing-8);
}

.store-name {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-3);
}

.store-description {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  max-width: 600px;
  margin: 0 auto;
}

.store-section {
  margin-bottom: var(--spacing-8);
}

.section-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-5);
}

/* Drops Grid */
.drops-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-6);
}

.drop-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--spacing-5);
  border: 1px solid var(--color-border);
  transition: transform 0.2s, box-shadow 0.2s;
}

.light-mode-only .drop-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.drop-card.active {
  border-color: var(--color-success-500);
}

.drop-card.upcoming {
  border-color: var(--color-info-500);
}

.drop-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-3);
}

.drop-name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin: 0;
}

.drop-name a {
  color: var(--color-text-primary);
  text-decoration: none;
}

.drop-name a:hover {
  color: var(--color-primary-600);
}

.drop-status {
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.drop-status.active {
  background: var(--color-success-100);
  color: var(--color-success-700);
}

.drop-status.upcoming {
  background: var(--color-info-100);
  color: var(--color-info-700);
}

.drop-product {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-2);
}

.drop-price {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-3);
}

.drop-timer {
  font-size: var(--font-size-sm);
  color: var(--color-danger-600);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--spacing-3);
}

.drop-schedule {
  font-size: var(--font-size-sm);
  color: var(--color-info-600);
  margin-bottom: var(--spacing-3);
}

.drop-link {
  display: inline-block;
  padding: var(--spacing-2) var(--spacing-4);
  background: var(--color-primary-600);
  color: white;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  transition: background 0.2s;
}

.drop-link:hover {
  background: var(--color-primary-700);
}

/* Products Grid */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-4);
}

.product-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

.light-mode-only .product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.product-content {
  padding: var(--spacing-4);
}

.product-name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-2);
}

.product-name a {
  color: var(--color-text-primary);
  text-decoration: none;
}

.product-name a:hover {
  color: var(--color-primary-600);
}

.product-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-3);
}

.product-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-3);
}

.product-type {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  background: var(--color-neutral-100);
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-sm);
}

.product-price {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.product-link {
  display: block;
  text-align: center;
  padding: var(--spacing-2);
  background: var(--color-neutral-100);
  color: var(--color-text-primary);
  border-radius: var(--radius-md);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  transition: background 0.2s;
}

.product-link:hover {
  background: var(--color-neutral-200);
}

.empty-state {
  text-align: center;
  padding: var(--spacing-8);
  color: var(--color-text-tertiary);
}

.store-footer {
  margin-top: var(--spacing-8);
  padding-top: var(--spacing-6);
  border-top: 1px solid var(--color-border);
  text-align: center;
}

.footer-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
}

.separator {
  margin: 0 var(--spacing-2);
}

@media (max-width: 768px) {
  .public-store {
    padding: var(--spacing-4);
  }

  .drops-grid,
  .products-grid {
    grid-template-columns: 1fr;
  }
}