/**
 * ORO - Clean White & Black Theme
 * Global theme override - loads after main CSS to apply white bg, black buttons, black icons
 */

:root {
  --theme-bg: #ffffff;
  --theme-primary: #000000;
  --theme-primary-hover: #1a1a1a;
  --theme-primary-active: #333333;
  --theme-text: #111827;
  --theme-text-muted: #6b7280;
  --theme-border: #e5e7eb;
  --theme-border-light: #f3f4f6;
  --gold: var(--theme-primary);
  --gold-light: #f3f4f6;
  --glass-bg: rgba(255,255,255,0.95);
  --glass-border: rgba(229,231,235,0.8);
}

/* Base */
html, body {
  background-color: var(--theme-bg) !important;
  color: var(--theme-text) !important;
}

/* Override Tailwind primary/gold colors */
.bg-primary,
[class*="bg-yellow-600"]:not(.bg-yellow-600\/5):not(.bg-yellow-600\/10):not(.bg-yellow-600\/20),
[class*="bg-amber-500"],
[class*="bg-amber-600"] {
  background-color: var(--theme-primary) !important;
}

.text-primary,
.text-yellow-600,
.text-yellow-700,
.text-yellow-800,
.text-yellow-900,
.text-amber-600,
.text-amber-700,
.text-amber-800,
[class*="text-yellow"]:not(.text-gray-400) {
  color: var(--theme-primary) !important;
}

.border-primary,
.border-yellow-600,
.border-yellow-600\/20,
.border-yellow-600\/30,
.border-amber-200,
.border-amber-500 {
  border-color: var(--theme-border) !important;
}

.bg-yellow-50,
.bg-yellow-600\/5,
.bg-yellow-600\/10,
.bg-yellow-600\/20,
.bg-amber-50,
.bg-amber-100 {
  background-color: #f9fafb !important;
}

/* Buttons - black with white text (exclude nav icon buttons) */
button:not(.nav-icon-btn),
a[role="button"]:not(.nav-icon-btn):not(.nav-avatar-btn),
.btn-primary,
[class*="btn-checkout"],
.browse-btn {
  background-color: var(--theme-primary) !important;
  color: #fff !important;
  border-color: var(--theme-primary) !important;
}

button:not(.nav-icon-btn):hover,
a[role="button"]:not(.nav-icon-btn):not(.nav-avatar-btn):hover,
.btn-primary:hover,
[class*="btn-checkout"]:hover,
.browse-btn:hover {
  background-color: var(--theme-primary-hover) !important;
  border-color: var(--theme-primary-hover) !important;
  color: #fff !important;
}

button:active:not(.nav-icon-btn),
.btn-primary:active {
  background-color: var(--theme-primary-active) !important;
}

/* Icons inherit from parent - no forced black. Use text-gray-500/600 for softer look. */

/* Glass morphism - clean white */
.glass-morphism {
  background: var(--glass-bg) !important;
  border-color: var(--glass-border) !important;
}

.glass-card {
  border-color: var(--theme-border) !important;
}

.glass-card:hover {
  border-color: var(--theme-border) !important;
}

/* Logo / serif heading */
.serif-heading,
a.serif-heading {
  color: var(--theme-primary) !important;
}

.gold-gradient {
  color: var(--theme-primary) !important;
  -webkit-text-fill-color: var(--theme-primary) !important;
}

/* Form inputs - clean borders */
input, select, textarea {
  border-color: var(--theme-border) !important;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--theme-primary) !important;
  outline-color: var(--theme-primary) !important;
}

/* Badge/count - red for cart & notifications (count number stays white) */
#nav-cart-count,
#mobile-cart-count,
#nav-notif-count,
#mobile-notif-count {
  background-color: #ef4444 !important;
}

/* Nav icon buttons - modern minimal style */
.nav-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f9fafb;
  border: 1px solid rgba(0,0,0,0.06);
  color: #4b5563;
  transition: all 0.2s ease;
}
.nav-icon-btn:hover {
  background: #fff;
  color: #111827;
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transform: translateY(-1px);
}
.nav-icon-btn.nav-icon-sm {
  width: 36px;
  height: 36px;
}
.nav-icon-btn.nav-icon-sm svg {
  width: 17px;
  height: 17px;
}
.nav-icon-btn svg {
  flex-shrink: 0;
}

/* Nav avatar - initials in same style */
.nav-avatar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f9fafb;
  border: 1px solid rgba(0,0,0,0.06);
  color: #111827;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: all 0.2s ease;
}
.nav-avatar-btn:hover {
  background: #fff;
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transform: translateY(-1px);
}

/* Nav badge - refined pill */
.nav-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: #ef4444;
  border-radius: 9999px;
  padding: 0 4px;
  box-shadow: 0 1px 3px rgba(239,68,68,0.4);
}
.nav-badge-sm {
  min-width: 14px;
  height: 14px;
  font-size: 9px;
  padding: 0 3px;
}

/* Account avatar gradient → black */
[class*="from-amber-400"],
[class*="to-amber-600"] {
  background: var(--theme-primary) !important;
}

/* Ring/border on avatar */
.ring-amber-200\/50,
.ring-yellow-200 {
  --tw-ring-color: rgba(0,0,0,0.2) !important;
}

/* Focus rings - black/gray */
[class*="focus:ring-yellow"],
[class*="focus:ring-amber"],
[class*="focus-visible:ring-yellow"] {
  --tw-ring-color: rgba(0,0,0,0.2) !important;
}

[class*="focus:border-yellow"],
[class*="focus:border-amber"] {
  border-color: var(--theme-primary) !important;
}

/* Gradients → solid black */
[class*="from-yellow-500"],
[class*="from-yellow-600"],
[class*="to-amber-600"],
[class*="to-amber-700"],
[class*="from-yellow-700"],
[class*="to-amber-700"] {
  background: var(--theme-primary) !important;
}

/* Star ratings - filled stars black */
.fill-amber-400,
[class*="text-amber-400"] svg,
svg.fill-amber-400 {
  fill: var(--theme-primary) !important;
  color: var(--theme-primary) !important;
}

/* Progress bars (rating bars) - gray gradient */
[class*="from-amber-400"][class*="to-yellow"] {
  background: var(--theme-primary) !important;
}

/* Radio/checkbox accent */
input[type="radio"][class*="text-yellow"],
input[type="radio"][class*="text-amber"] {
  accent-color: var(--theme-primary);
}