/* Shared light/dark theme controls used by every site page. */
.theme-toggle {
  min-width: 76px;
  height: 40px;
  padding: 0 13px;
  border: 1px solid var(--border, rgba(148, 163, 184, 0.35));
  border-radius: 999px;
  background: var(--card-bg, rgba(255, 255, 255, 0.08));
  color: var(--primary, currentColor);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font: 700 0.78rem/1 system-ui, sans-serif;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.theme-toggle:hover { transform: translateY(-1px); border-color: var(--accent, #d97706); }
.theme-toggle:focus-visible { outline: 3px solid rgba(217, 119, 6, .28); outline-offset: 2px; }
.theme-toggle > span:first-child { font-size: 1.05rem; }
.theme-toggle-floating { position: fixed; top: 18px; right: 18px; z-index: 10001; }

html[data-theme='light'] {
  --bg-color: #f7f8fc;
  --bg-gradient: radial-gradient(circle at 50% -20%, #fff8dc 0%, #f7f8fc 48%, #eef2f7 100%);
  --card-bg: rgba(255, 255, 255, .78);
  --card-glass: rgba(255, 255, 255, .88);
  --card-border: rgba(15, 23, 42, .1);
  --card-border-hover: rgba(15, 23, 42, .24);
  --primary: #111827;
  --primary-gradient: linear-gradient(135deg, #111827 0%, #475569 100%);
  --text: #273449;
  --text-muted: #5b687b;
  --text-light: #6b7280;
  --border: rgba(15, 23, 42, .12);
  --glass-bg: rgba(255, 255, 255, .9);
  --shadow-sm: 0 4px 20px rgba(15, 23, 42, .08);
  --shadow-md: 0 10px 40px -10px rgba(15, 23, 42, .16);
}

html[data-theme='light'],
html[data-theme='light'] body {
  background-color: var(--bg-color) !important;
  color: var(--text);
}

html[data-theme='light'] .navigation { box-shadow: 0 10px 30px rgba(15, 23, 42, .1); }
html[data-theme='dark'] .navigation .logo-text,
html[data-theme='dark'] .theme-toggle { color: #fff !important; }
html[data-theme='light'] .navigation .logo-text,
html[data-theme='light'] .theme-toggle { color: #111827 !important; }
html[data-theme='light'] .cta-button {
  background: var(--gold-gradient);
  color: #111827 !important;
  box-shadow: 0 6px 18px rgba(217, 119, 6, .2);
}
html[data-theme='light'] .cta-button:hover { box-shadow: 0 10px 26px rgba(217, 119, 6, .28); }
html[data-theme='light'] .btn-secondary-outline,
html[data-theme='light'] .video-share-button {
  background: #fff;
  border-color: rgba(15, 23, 42, .16);
  color: #1f2937;
}
html[data-theme='light'] .logo-text,
html[data-theme='light'] .nav-links a:hover,
html[data-theme='light'] .nav-links a.active,
html[data-theme='light'] .mobile-menu-btn,
html[data-theme='light'] .menu-close,
html[data-theme='light'] .mobile-nav a:hover,
html[data-theme='light'] .btn-secondary-outline,
html[data-theme='light'] .pwa-info strong,
html[data-theme='light'] .pwa-close-btn:hover { color: var(--primary); }

html[data-theme='light'] .mobile-menu,
html[data-theme='light'] .pwa-banner,
html[data-theme='light'] .video-player-heading,
html[data-theme='light'] .video-playlist-controls,
html[data-theme='light'] .video-quality-hint { background: rgba(255, 255, 255, .96); }
html[data-theme='light'] .mobile-overlay { background: rgba(15, 23, 42, .55); }
html[data-theme='light'] .floating-badge { background: rgba(255, 255, 255, .9); }
html[data-theme='light'] .footer { background: rgba(226, 232, 240, .65); }
html[data-theme='light'] .solution-video-player { background: #fff; box-shadow: 0 24px 60px rgba(15, 23, 42, .14); }
html[data-theme='light'] .ticket-client-header,
html[data-theme='light'] .ticket-refresh-status,
html[data-theme='light'] .ticket-client-chat .ticket-followup-form { background: #f8fafc; }
html[data-theme='light'] .ticket-client-chat .ticket-conversation { background-color: #efeae2; background-image: radial-gradient(rgba(15,23,42,.055) 1px,transparent 1px); }
html[data-theme='light'] .ticket-client-chat .ticket-message-admin { background: #fff; color: #172033; }
html[data-theme='light'] .ticket-client-chat .ticket-message-admin header { color: #64748b; }
html[data-theme='light'] .ticket-composer-fields textarea,
html[data-theme='light'] .ticket-attach-button { background: #fff; color: #172033; }
html[data-theme='light'] .video-choice { background: #f1f5f9; color: var(--text-muted); }
html[data-theme='light'] .video-choice strong,
html[data-theme='light'] .video-choice.active { color: var(--primary); }
html[data-theme='light'] .filter-btn { background: #fff; color: #334155; }
html[data-theme='light'] .filter-btn.active { background: var(--gold-gradient); color: #111827; border-color: #d97706; }
html[data-theme='light'] .input-group input,
html[data-theme='light'] .input-group textarea,
html[data-theme='light'] .input-group select { background: rgba(255, 255, 255, .9) !important; color: var(--text) !important; border-color: var(--border) !important; }
html[data-theme='light'] .input-group select { color-scheme: light; }
html[data-theme='light'] .input-group select option { background: #fff; color: #273449; }
html[data-theme='light'] [style*="background: rgba(255,255,255"] { background: rgba(15, 23, 42, .045) !important; }
html[data-theme='light'] .bento-card::before { background: radial-gradient(800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(250, 204, 21, .12), transparent 40%); }
html[data-theme='light'] .card-icon {
  background: #fff !important;
  border-color: rgba(15, 23, 42, .12);
  box-shadow: 0 8px 20px rgba(15, 23, 42, .08);
}
html[data-theme='light'] .bento-card:hover .card-icon {
  background: var(--gold-gradient) !important;
  border-color: #d97706 !important;
  color: #111827 !important;
}
html[data-theme='light'] .feature-box:hover .feature-box-icon { color: #92400e; }
html[data-theme='light'] .footer-col a[style*="border-radius: 50%"] {
  background: #fff !important;
  color: #334155;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .08);
}
html[data-theme='light'] .footer-col a[style*="border-radius: 50%"]:hover {
  padding-left: 10px;
  background: var(--gold-gradient) !important;
  color: #111827;
  transform: translateY(-2px);
}
html[data-theme='light'] .menu-gallery-stage { background: #eef2f7; }
html[data-theme='light'] .menu-gallery-thumb { background: #fff; }
html[data-theme='light'] .menu-hq-card img { background: #eef2f7; }
html[data-theme='light'] .pwa-later-btn { background: #fff; color: #334155; }

/* Standalone Shopify portfolio page. */
html[data-theme='dark'] {
  --light: #111827;
  --text: #dbe4f0;
}
html[data-theme='dark'],
html[data-theme='dark'] body { background-color: #050505; }
html[data-theme='dark'] .portfolio-filter,
html[data-theme='dark'] .stat-card { background: #111827; }
html[data-theme='dark'] .image-title,
html[data-theme='dark'] .back-home a,
html[data-theme='dark'] .portfolio-grid { color: #e5e7eb; }
html[data-theme='dark'] .modal-content { background: #111827; color: #e5e7eb; }
html[data-theme='dark'] body > .content h1 { color: #f8fafc; }
html[data-theme='dark'] body > .content p { color: #cbd5e1; }

html[data-theme='light'] .portfolio-filter,
html[data-theme='light'] .stat-card,
html[data-theme='light'] .modal-content { background: #f8fafc; color: #334155; }

@media (max-width: 1100px) {
  .nav-container .theme-toggle { margin-left: auto; margin-right: 12px; }
  .theme-toggle-text { display: none; }
  .theme-toggle { min-width: 40px; width: 40px; padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle { transition: none; }
}