/* BAO theme palette and overrides (extracted from BAO project) */

/* Theme: Orange (BAO) */
.theme-orange {
  --theme-primary: #FF8C00;
  --theme-primary-rgb: 255, 140, 0;
  --theme-primary-dark: #FF6A00;
  --theme-glow: rgba(255,140,0,0.5);
  --text-color: white;
  --bg-color: #000;
  --font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

.theme-orange .bg-purple-500\/20 { background-color: rgba(255,140,0,0.18) !important; }
.theme-orange .text-purple-300 { color: #fbd38d !important; }
.theme-orange .text-purple-400 { color: #fb923c !important; }

/* Theme: Purple (BAO) */
.theme-purple {
  --theme-primary: #9b5cf6;
  --theme-primary-rgb: 155, 92, 246;
  --theme-primary-dark: #7c3aed;
  --theme-primary-light: #c084fc;
  --theme-accent: #fb923c;
  --theme-accent-rgb: 251, 146, 60;
  --theme-glow: rgba(155,92,246,0.5);
  --text-color: white;
  --bg-color: #000;
  --font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

.theme-purple .text-orange-500,
.theme-purple .text-orange-400 { color: var(--theme-accent) !important; }
.theme-purple .bg-orange-500 { background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%) !important; }

/* Theme: Green */
.theme-green {
  --theme-primary: #22c55e;
  --theme-primary-rgb: 34, 197, 94;
  --theme-primary-dark: #16a34a;
  --theme-glow: rgba(34,197,94,0.12);
  --text-color: #e6f8ea;
  --bg-color: #071013;
  --font-family: 'JetBrains Mono', 'Fira Code', 'Space Mono', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, monospace;
}

.theme-green .bg-white { background-color: rgba(255,255,255,0.02) !important; color: var(--text-color) !important; }
.theme-green button.bg-white, .theme-green .btn.bg-white { background: linear-gradient(135deg, #042f1a 0%, #0b5e33 50%, #042f1a 100%) !important; color: var(--text-color) !important; border: 1px solid rgba(var(--theme-primary-rgb),0.12) !important; }

/* Ensure data attribute for JS-driven behaviors has minimal styling */
html[data-bao-theme] { transition: none !important; }

/* Topbar styling for the selector (small, non-intrusive) */
#bao-theme-switcher { font-size: 14px; color: var(--text-color, #111); }
#bao-theme-select { background: white; color: #111; border: 1px solid #ddd; }

/* Make the BAO themes apply globally if body/html has the theme class */
:root { --bao-theme-applied: 0; }

/* Global overrides to force BAO look into PrestaShop Classic selectors */
html.theme-orange, html.theme-purple, html.theme-green {
  /* ensure the entire page respects theme variables */
  --bao-theme-applied: 1;
}

/* Core variables applied to :root for JS to read/update if needed */
:root {
  --bao-bg: var(--bg-color, #fff);
  --bao-text: var(--text-color, #111);
  --bao-link: var(--theme-primary, #ff8c00);
  --bao-header-bg: rgba(0,0,0,0.06);
  --bao-footer-bg: rgba(0,0,0,0.06);
  --bao-btn-bg: var(--theme-primary, #ff8c00);
  --bao-btn-border: rgba(0,0,0,0.06);
  --bao-card-bg: rgba(255,255,255,0.02);
}

/* Shared selector overrides (high specificity) */
html[class*="theme-"] body,
html.theme-orange body,
html.theme-purple body,
html.theme-green body {
  background: var(--bao-bg) !important;
  color: var(--bao-text) !important;
}

html.theme-orange a { color: var(--Bao-orange-link, var(--theme-primary)) !important; }
html.theme-purple a { color: var(--theme-primary) !important; }
html.theme-green a { color: rgba(var(--theme-primary-rgb),1) !important; }

/* Header and nav */
html.theme-orange #header, html.theme-orange .header-top, html.theme-orange .header-nav { background: rgba(0,0,0,0.6) !important; }
html.theme-purple #header, html.theme-purple .header-top, html.theme-purple .header-nav { background: rgba(8,5,20,0.6) !important; }
html.theme-green #header, html.theme-green .header-top, html.theme-green .header-nav { background: linear-gradient(135deg, rgba(7,16,19,0.95) 0%, rgba(9,22,17,0.85) 100%) !important; }

/* Buttons */
html.theme-orange .btn-primary,
html.theme-orange .btn-primary:hover,
html.theme-orange .btn-primary:focus { background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-dark) 100%) !important; border-color: rgba(var(--theme-primary-rgb),0.9) !important; color: #fff !important; }

html.theme-purple .btn-primary,
html.theme-purple .btn-primary:hover,
html.theme-purple .btn-primary:focus { background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%) !important; border-color: rgba(var(--theme-primary-rgb),0.9) !important; color: #fff !important; }

html.theme-green .btn-primary,
html.theme-green .btn-primary:hover,
html.theme-green .btn-primary:focus { background: linear-gradient(135deg, rgba(var(--theme-primary-rgb),1) 0%, rgba(30,140,70,1) 100%) !important; border-color: rgba(var(--theme-primary-rgb),0.95) !important; color: var(--text-color) !important; }

/* Footer */
html.theme-orange .page-footer, html.theme-orange #footer { background: rgba(0,0,0,0.65) !important; color: var(--text-color) !important; }
html.theme-purple .page-footer, html.theme-purple #footer { background: rgba(5,3,18,0.7) !important; color: var(--text-color) !important; }
html.theme-green .page-footer, html.theme-green #footer { background: rgba(6,12,11,0.9) !important; color: var(--text-color) !important; }

/* Cards, panels, and content blocks */
html.theme-orange .card, html.theme-orange .card-block, html.theme-orange .product-miniature { background: rgba(0,0,0,0.5) !important; color: var(--text-color) !important; }
html.theme-purple .card, html.theme-purple .card-block, html.theme-purple .product-miniature { background: rgba(8,5,20,0.5) !important; color: var(--text-color) !important; }
html.theme-green .card, html.theme-green .card-block, html.theme-green .product-miniature { background: linear-gradient(135deg, rgba(7,16,19,0.85) 0%, rgba(9,22,17,0.75) 100%) !important; color: var(--text-color) !important; }

/* Product flags, badges, prices */
html.theme-orange .product-flag, html.theme-orange .badge { background: var(--theme-primary) !important; color: #fff !important; }
html.theme-purple .product-flag, html.theme-purple .badge { background: var(--theme-primary) !important; color: #fff !important; }
html.theme-green .product-flag, html.theme-green .badge { background: rgba(var(--theme-primary-rgb),1) !important; color: var(--text-color) !important; }

/* Breadcrumbs and page titles */
html.theme-orange .breadcrumb, html.theme-orange .page-title { color: var(--text-color) !important; }
html.theme-purple .breadcrumb, html.theme-purple .page-title { color: var(--text-color) !important; }
html.theme-green .breadcrumb, html.theme-green .page-title { color: var(--text-color) !important; }

/* Forms and inputs */
html.theme-orange input, html.theme-orange textarea, html.theme-orange select,
html.theme-purple input, html.theme-purple textarea, html.theme-purple select,
html.theme-green input, html.theme-green textarea, html.theme-green select {
  background-color: rgba(255,255,255,0.03) !important;
  color: var(--text-color) !important;
  border-color: rgba(255,255,255,0.06) !important;
}

/* Utilities and minor adjustments */
html.theme-orange .text-muted, html.theme-purple .text-muted, html.theme-green .text-muted { color: rgba(255,255,255,0.6) !important; }

/* Make the theme selector visible on dark backgrounds */
#bao-theme-select { background: #fff; color: #111; border-radius: 4px; padding: 4px 8px; }
#bao-theme-switcher { z-index: 9999; }

/* Provide a clear visual hint for debugging/testing */
#bao-theme-indicator { transition: background-color 160ms ease; border-color: rgba(0,0,0,0.12); }

/* Fallback: ensure high specificity for any stubborn elements */
body.html.theme-orange, body.html.theme-purple, body.html.theme-green {}