/**
 * Shared Theme Styles & Modal for Admin, Editor, Merchant, Mobile
 */
:root, [data-theme="violet"] {
  --brand-primary: #6b3ecb;
  --brand-primary-dark: #4c299f;
  --brand-primary-light: #f0ebff;
  --brand-secondary: #22d3ee;
  --brand-gradient: linear-gradient(135deg, #6b3ecb 0%, #3b82f6 50%, #22d3ee 100%);
  --brand-glow: rgba(107, 62, 203, 0.4);
  --brand-rgb: 107, 62, 203;
}
[data-theme="ocean"] {
  --brand-primary: #0284c7;
  --brand-primary-dark: #0369a1;
  --brand-primary-light: #e0f2fe;
  --brand-secondary: #38bdf8;
  --brand-gradient: linear-gradient(135deg, #0369a1 0%, #0284c7 50%, #38bdf8 100%);
  --brand-glow: rgba(2, 132, 199, 0.4);
  --brand-rgb: 2, 132, 199;
}
[data-theme="emerald"] {
  --brand-primary: #059669;
  --brand-primary-dark: #047857;
  --brand-primary-light: #ecfdf5;
  --brand-secondary: #34d399;
  --brand-gradient: linear-gradient(135deg, #047857 0%, #059669 50%, #34d399 100%);
  --brand-glow: rgba(5, 150, 105, 0.4);
  --brand-rgb: 5, 150, 105;
}
[data-theme="sakura"] {
  --brand-primary: #e11d48;
  --brand-primary-dark: #be123c;
  --brand-primary-light: #fff1f2;
  --brand-secondary: #fb7185;
  --brand-gradient: linear-gradient(135deg, #be123c 0%, #e11d48 50%, #fb7185 100%);
  --brand-glow: rgba(225, 29, 72, 0.4);
  --brand-rgb: 225, 29, 72;
}


/* Glassmorphic Theme Modal */
.phonecase-theme-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 8, 20, 0.65);
  backdrop-filter: blur(8px);
  padding: 16px;
  animation: themeFadeIn 0.18s ease-out;
}
.phonecase-theme-backdrop[hidden] {
  display: none !important;
}

.phonecase-theme-modal {
  width: min(420px, 94vw);
  background: #1e1932;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  animation: themePopIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.phonecase-theme-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 12px;
}
.phonecase-theme-header h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
}
.phonecase-theme-header small {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: #a79dc5;
}
.phonecase-theme-close {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.phonecase-theme-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.phonecase-theme-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.phonecase-theme-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: all 0.18s ease;
}
.phonecase-theme-option:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}
.phonecase-theme-option.active {
  background: rgba(255, 255, 255, 0.12);
  border-color: #22d3ee;
  box-shadow: 0 0 16px rgba(34, 211, 238, 0.25);
}

.theme-orb-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 18px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}

.theme-option-info {
  flex: 1;
  min-width: 0;
}
.theme-option-info b {
  display: block;
  font-size: 13px;
  color: #fff;
  font-weight: 700;
}
.theme-option-info small {
  display: block;
  font-size: 11px;
  color: #a79dc5;
  margin-top: 2px;
}

.theme-check-icon {
  display: none;
  font-size: 15px;
  color: #22d3ee;
  font-weight: 800;
}
.phonecase-theme-option.active .theme-check-icon {
  display: block;
}

@keyframes themeFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes themePopIn {
  from { opacity: 0; transform: scale(0.95) translateY(6px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}