/* ===================================================
   O-Calories - Light Glassmorphism Theme Override
   Gradient Purple → Pink | White Frosted Glass Cards
   =================================================== */

/* ===== NEW COLOR VARIABLES ===== */
:root {
  --purple-deep: #5B4BD8;
  --purple-mid: #7B6BE8;
  --purple-light: #9B8BF8;
  --purple-pale: #C4BAF8;
  --pink-deep: #D45A9A;
  --pink-mid: #E87BB5;
  --pink-light: #F5A5C8;
  --teal: #4ECDC4;
  --orange: #FF8B60;
  --green: #5EBC8A;

  /* Override dark theme vars */
  --bg-primary: linear-gradient(145deg,#5B4BD8 0%,#7B6BE8 22%,#AB7BD8 52%,#D87BB5 80%,#F5A5C8 100%);
  --bg-secondary: rgba(255,255,255,0.18);
  --bg-card: rgba(255,255,255,0.90);
  --bg-glass: rgba(255,255,255,0.22);
  --accent-purple: #7B6BE8;
  --accent-violet: #9B8BF8;
  --accent-pink: #E87BB5;
  --accent-cyan: #4ECDC4;
  --accent-green: #5EBC8A;
  --accent-orange: #FF8B60;
  --text-primary: #2A1B69;
  --text-secondary: #5B4B99;
  --text-muted: #8B7BC9;
  --border: rgba(255,255,255,0.45);
  --glow-purple: 0 8px 32px rgba(123,107,232,0.35);
  --glow-pink:   0 8px 32px rgba(232,123,181,0.35);
  --glow-cyan:   0 8px 32px rgba(78,205,196,0.35);
  --shadow-card: 0 8px 32px rgba(91,75,216,0.12),0 2px 8px rgba(0,0,0,0.05);
  --shadow-card-hover: 0 16px 48px rgba(91,75,216,0.20),0 4px 16px rgba(0,0,0,0.08);
  --shadow-btn: 0 8px 24px rgba(123,107,232,0.40);
}

/* ===== GLOBAL BACKGROUND ===== */
html, body {
  background: linear-gradient(145deg,#5B4BD8 0%,#7B6BE8 22%,#AB7BD8 52%,#D87BB5 80%,#F5A5C8 100%) !important;
  color: #2A1B69 !important;
}

body::before {
  background:
    radial-gradient(ellipse 70% 50% at 20% 15%, rgba(255,255,255,0.14) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 85%, rgba(255,200,220,0.16) 0%, transparent 60%),
    radial-gradient(ellipse 60% 55% at 55% 40%, rgba(180,140,255,0.10) 0%, transparent 60%) !important;
}

/* Floating white orb */
body::after {
  content: '';
  position: fixed;
  width: 350px; height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.10) 0%, transparent 70%);
  top: -120px; right: -120px;
  animation: orb-float 10s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes orb-float {
  0%,100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(-25px,30px) scale(1.08); }
  66%      { transform: translate(20px,-20px) scale(0.92); }
}

/* ===== PARTICLES ===== */
#particles-canvas { opacity: 0.55 !important; }

/* ===== LOADING OVERLAY ===== */
#loading-overlay {
  background: linear-gradient(145deg,#5B4BD8 0%,#7B6BE8 30%,#AB7BD8 60%,#D87BB5 85%,#F5A5C8 100%) !important;
}

.loading-text {
  color: rgba(255,255,255,0.92) !important;
  text-shadow: 0 2px 8px rgba(91,75,216,0.3) !important;
}

.loading-robot {
  filter: drop-shadow(0 0 24px rgba(255,255,255,0.7)) !important;
  animation: light-robot-spin 3s ease-in-out infinite !important;
}

@keyframes light-robot-spin {
  0%,100% { transform:rotate(-4deg); filter:drop-shadow(0 0 20px rgba(255,255,255,0.6)); }
  50%      { transform:rotate(4deg);  filter:drop-shadow(0 0 35px rgba(255,255,255,0.9)); }
}

/* ===== INSTALL CARD ===== */
.install-card {
  background: rgba(255,255,255,0.88) !important;
  border: 1.5px solid rgba(255,255,255,0.75) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.9),
    0 20px 60px rgba(91,75,216,0.22),
    0 40px 80px rgba(0,0,0,0.06) !important;
}

.install-card::after {
  background: rgba(255,255,255,0.90) !important;
}

.install-title {
  background: linear-gradient(135deg,#5B4BD8,#E87BB5) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.install-subtitle { color: #5B4B99 !important; }

.install-btn {
  background: linear-gradient(135deg,#5B4BD8,#7B6BE8,#9B6BE8) !important;
  box-shadow: 0 8px 24px rgba(91,75,216,0.40) !important;
}

@keyframes btn-pulse {
  0%,100% { box-shadow: 0 8px 24px rgba(91,75,216,0.40); }
  50%      { box-shadow: 0 12px 40px rgba(91,75,216,0.65), 0 0 0 4px rgba(123,107,232,0.15); }
}

.ios-step-icon {
  background: linear-gradient(135deg,rgba(123,107,232,0.12),rgba(232,123,181,0.12)) !important;
  border: 1px solid rgba(123,107,232,0.20) !important;
}

.ios-step { border-bottom-color: rgba(123,107,232,0.10) !important; }
.ios-step-text       { color: #5B4B99 !important; }
.ios-step-text strong{ color: #2A1B69 !important; }
.browser-note        { color: #8B7BC9 !important; }
.dot-sep             { background: #8B7BC9 !important; }

/* ===== TOP BAR ===== */
.top-bar {
  background: rgba(255,255,255,0.18) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.30) !important;
}

.logo-icon {
  background: linear-gradient(135deg,#7B6BE8,#E87BB5) !important;
  box-shadow: 0 4px 16px rgba(123,107,232,0.40) !important;
}

.logo-text {
  background: none !important;
  -webkit-text-fill-color: white !important;
  color: white !important;
  text-shadow: 0 2px 10px rgba(91,75,216,0.35) !important;
}

.history-btn {
  background: rgba(255,255,255,0.25) !important;
  border: 1px solid rgba(255,255,255,0.45) !important;
  box-shadow: 0 2px 12px rgba(91,75,216,0.15) !important;
}

.history-btn svg { stroke: white !important; }

/* ===== CAMERA VIEWPORT ===== */
.camera-viewport {
  background: rgba(0,0,0,0.22) !important;
  border: 2px solid rgba(255,255,255,0.45) !important;
  box-shadow:
    0 8px 32px rgba(91,75,216,0.25),
    inset 0 1px 0 rgba(255,255,255,0.35) !important;
}

.camera-grid::before,
.camera-grid::after { background: rgba(255,255,255,0.22) !important; }

.camera-corner { border-color: rgba(255,255,255,0.85) !important; }

.scan-line {
  background: linear-gradient(90deg,transparent,rgba(255,255,255,0.85),#C4BAF8,rgba(255,255,255,0.85),transparent) !important;
  box-shadow: 0 0 14px rgba(255,255,255,0.55) !important;
}

/* ===== CAMERA CONTROLS ===== */
.ctrl-btn {
  background: rgba(255,255,255,0.28) !important;
  border: 1px solid rgba(255,255,255,0.45) !important;
  box-shadow: 0 4px 16px rgba(91,75,216,0.15) !important;
}

.ctrl-btn:hover { background: rgba(255,255,255,0.40) !important; }

.capture-btn {
  background: linear-gradient(135deg,#7B6BE8,#E87BB5) !important;
  box-shadow:
    0 8px 24px rgba(123,107,232,0.50),
    0 0 0 5px rgba(255,255,255,0.32) !important;
}

@keyframes pulse-btn {
  0%,100% { box-shadow: 0 8px 24px rgba(123,107,232,0.50),0 0 0 5px rgba(255,255,255,0.32); }
  50%      { box-shadow: 0 12px 40px rgba(123,107,232,0.80),0 0 0 8px rgba(255,255,255,0.45); }
}

/* ===== ANALYSIS STATUS ===== */
.analysis-status {
  background: rgba(255,255,255,0.18) !important;
  border: 1px solid rgba(255,255,255,0.32) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-radius: 32px !important;
  margin: 0 20px !important;
}

.status-text {
  color: white !important;
  text-shadow: 0 2px 8px rgba(91,75,216,0.30) !important;
}

.status-dot                 { background: rgba(255,255,255,0.85) !important; }
.status-dot:nth-child(2)   { background: #F5A5C8 !important; }
.status-dot:nth-child(3)   { background: #C4BAF8 !important; }

/* ===== RESULTS HEADER ===== */
.results-title {
  color: white !important;
  text-shadow: 0 2px 8px rgba(91,75,216,0.30) !important;
}

.total-calories-badge {
  background: rgba(255,255,255,0.25) !important;
  border: 1px solid rgba(255,255,255,0.45) !important;
  color: white !important;
  box-shadow: 0 4px 16px rgba(91,75,216,0.20) !important;
}

/* ===== FOOD CARDS ===== */
.food-card {
  background: rgba(255,255,255,0.93) !important;
  border: 1.5px solid rgba(255,255,255,0.88) !important;
  box-shadow: var(--shadow-card) !important;
}

.food-card:hover {
  box-shadow: var(--shadow-card-hover) !important;
  transform: translateY(-3px) !important;
}

.food-image-wrap {
  background: linear-gradient(135deg,rgba(123,107,232,0.08),rgba(232,123,181,0.08)) !important;
}

.food-category-badge {
  background: rgba(255,255,255,0.94) !important;
  color: #7B6BE8 !important;
  border: 1px solid rgba(123,107,232,0.18) !important;
  font-weight: 700 !important;
}

.food-name-ar { color: #2A1B69 !important; }
.food-name-en { color: #8B7BC9 !important; }
.calories-unit{ color: #8B7BC9 !important; }

.calories-val {
  background: linear-gradient(135deg,#7B6BE8,#E87BB5) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.confidence-bar  { background: rgba(123,107,232,0.10) !important; }
.confidence-fill { background: linear-gradient(90deg,#7B6BE8,#E87BB5) !important; }

.food-card.unknown { border-color: rgba(255,140,90,0.28) !important; }
.food-card.unknown .calories-val {
  background: linear-gradient(135deg,#FF8B60,#FF5050) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.food-card.unknown .confidence-fill {
  background: linear-gradient(90deg,#FF8B60,#FF5050) !important;
}

/* ===== SCENE CARD ===== */
.scene-card {
  background: rgba(255,255,255,0.18) !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
  backdrop-filter: blur(10px) !important;
}

.scene-text { color: rgba(255,255,255,0.92) !important; }

/* ===== RETAKE BUTTON ===== */
.retake-btn {
  background: rgba(255,255,255,0.20) !important;
  border: 1px solid rgba(255,255,255,0.42) !important;
  color: white !important;
  backdrop-filter: blur(10px) !important;
}

.retake-btn:hover {
  background: rgba(255,255,255,0.30) !important;
  border-color: rgba(255,255,255,0.65) !important;
}

/* ===== BOTTOM NAV ===== */
.bottom-nav {
  background: rgba(255,255,255,0.88) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-top: 1px solid rgba(255,255,255,0.65) !important;
  box-shadow: 0 -4px 24px rgba(91,75,216,0.12) !important;
}

.nav-item        { color: #8B7BC9 !important; }
.nav-label       { color: inherit !important; }
.nav-item.active { color: #7B6BE8 !important; background: rgba(123,107,232,0.10) !important; }

/* ===== HISTORY PANEL ===== */
#history-panel {
  background: linear-gradient(145deg,#5B4BD8 0%,#9B75D8 50%,#D87BB5 100%) !important;
}

.panel-header {
  background: rgba(255,255,255,0.12) !important;
  border-bottom: 1px solid rgba(255,255,255,0.22) !important;
  backdrop-filter: blur(12px) !important;
}

.panel-title { color: white !important; }

.close-btn {
  background: rgba(255,255,255,0.22) !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
  color: white !important;
}

.history-item {
  background: rgba(255,255,255,0.91) !important;
  border: 1.5px solid rgba(255,255,255,0.94) !important;
  box-shadow: var(--shadow-card) !important;
}

.history-item:hover {
  box-shadow: var(--shadow-card-hover) !important;
  transform: translateY(-2px) !important;
}

.history-thumb {
  background: linear-gradient(135deg,rgba(123,107,232,0.14),rgba(232,123,181,0.14)) !important;
}

.history-date        { color: #8B7BC9 !important; }
.history-items-count { color: #2A1B69 !important; }

.history-cal {
  background: linear-gradient(135deg,#7B6BE8,#E87BB5) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ===== EMPTY STATE ===== */
.empty-state      { color: rgba(255,255,255,0.75) !important; }
.empty-state svg  { color: white !important; opacity: 0.55 !important; }
.empty-state div  { color: rgba(255,255,255,0.75) !important; }

/* ===== TOAST ===== */
#toast {
  box-shadow: 0 8px 24px rgba(239,68,68,0.30) !important;
}
#toast.success {
  background: rgba(94,188,138,0.94) !important;
  box-shadow: 0 8px 24px rgba(94,188,138,0.32) !important;
}

/* ===== ROBOT SVGs — lighter glow on bright bg ===== */
.robot-svg {
  filter: drop-shadow(0 4px 16px rgba(91,75,216,0.45)) !important;
}

@keyframes robot-float {
  0%,100% {
    transform: translateY(0) rotate(-2deg);
    filter: drop-shadow(0 4px 16px rgba(91,75,216,0.45));
  }
  50% {
    transform: translateY(-8px) rotate(2deg);
    filter: drop-shadow(0 10px 28px rgba(155,107,216,0.65)) drop-shadow(0 0 40px rgba(123,107,232,0.28));
  }
}

/* ===== STATUS ROBOT ===== */
.status-robot {
  filter: drop-shadow(0 4px 16px rgba(255,255,255,0.40)) !important;
}