/* Yellow/Orange Primary Color Theme Override */
:root {
  /* Yellow color palette */
  --color-yellow-50: #fefce8;
  --color-yellow-100: #fef3c7;
  --color-yellow-200: #fde68a;
  --color-yellow-300: #fcd34d;
  --color-yellow-400: #fbbf24;
  --color-yellow-500: #f59e0b;
  --color-yellow-600: #d97706;
  --color-yellow-700: #b45309;
  --color-yellow-800: #92400e;
  --color-yellow-900: #78350f;
  --color-yellow-950: #451a03;

  /* Override primary colors with yellow */
  --color-primary-50: var(--color-yellow-50);
  --color-primary-100: var(--color-yellow-100);
  --color-primary-200: var(--color-yellow-200);
  --color-primary-300: var(--color-yellow-300);
  --color-primary-400: var(--color-yellow-400);
  --color-primary-500: var(--color-yellow-500);
  --color-primary-600: var(--color-yellow-600);
  --color-primary-700: var(--color-yellow-700);
  --color-primary-800: var(--color-yellow-800);
  --color-primary-900: var(--color-yellow-900);
  --color-primary-950: var(--color-yellow-950);

  /* Update StickyMobile highlight color to orange */
  --highlight-color: #f59e0b;
  --orange-primary: #f59e0b;
  --orange-primary-dark: #d97706;
  --orange-primary-light: #fbbf24;
}

/* Update button styles to use orange primary */
.bg-highlight {
  background-color: var(--orange-primary) !important;
  color: white;
}

.bg-highlight:hover:not(:disabled) {
  background-color: var(--orange-primary-dark) !important;
}

.color-highlight {
  color: var(--orange-primary) !important;
}

/* Update form focus states */
.form-control:focus {
  border-color: var(--orange-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(245, 158, 11, 0.25) !important;
}

/* Update OTP input focus */
.otp:focus {
  border-color: var(--orange-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(245, 158, 11, 0.25) !important;
}

/* Orange button variants */
.btn-orange {
  background-color: var(--orange-primary);
  color: white;
  border: none;
}

.btn-orange:hover:not(:disabled) {
  background-color: var(--orange-primary-dark);
  transform: translateY(-1px);
}

.btn-orange:disabled {
  background-color: #fbbf24;
  opacity: 0.6;
}

/* Number pad button styling */
.number-pad-btn {
  background-color: var(--white);
  border: 2px solid #e5e7eb;
  color: var(--text-dark);
  transition: all 0.2s ease;
}

.number-pad-btn:hover {
  background-color: var(--orange-primary);
  color: white;
  border-color: var(--orange-primary);
}

.number-pad-btn:active {
  transform: scale(0.95);
}

/* PIN dots styling */
.pin-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #e5e7eb;
  transition: all 0.3s ease;
}

.pin-dot.filled {
  background-color: var(--orange-primary);
}

/* Dark theme overrides */
:global(.theme-dark) .number-pad-btn {
  background-color: #374151;
  border-color: #4b5563;
  color: var(--white);
}

:global(.theme-dark) .number-pad-btn:hover {
  background-color: var(--orange-primary);
  border-color: var(--orange-primary);
}

:global(.theme-dark) .pin-dot {
  background-color: #4b5563;
}

:global(.theme-dark) .pin-dot.filled {
  background-color: var(--orange-primary);
}