/* روم قراند | Grand RP Luxury Brown & Bronze Theme */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

input, textarea, select {
  user-select: text !important;
  -webkit-user-select: text !important;
}

:root {
  --bg-primary: #120c08;
  --bg-surface: #1a120c;
  --bg-card: #241911;
  --bg-card-hover: #2e2017;
  --border-bronze: rgba(212, 155, 88, 0.25);
  --bronze-accent: #c89355;
  --bronze-light: #e4b377;
  --bronze-dark: #8c5d2e;
}

body {
  font-family: 'Tajawal', sans-serif;
  background-color: var(--bg-primary);
  color: #f3ece4;
  touch-action: manipulation;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: rgba(30, 20, 14, 0.6);
}
::-webkit-scrollbar-thumb {
  background: rgba(200, 147, 85, 0.35);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(228, 179, 119, 0.7);
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Dynamic Brown & Luxury Themes */
.theme-brown-luxury {
  background: radial-gradient(circle at 50% 0%, #301f14 0%, #170e08 55%, #0d0704 100%) !important;
}
.theme-copper-night {
  background: radial-gradient(circle at 50% 0%, #3d2315 0%, #1f1109 60%, #0e0704 100%) !important;
}
.theme-leather-dark {
  background: radial-gradient(circle at 50% 0%, #261b14 0%, #150d09 60%, #080503 100%) !important;
}
.theme-tactical-bronze {
  background: radial-gradient(circle at 50% 0%, #242217 0%, #14120c 60%, #090805 100%) !important;
}

/* Active Avatar Picker */
.selected-avatar {
  border-color: #d49b58 !important;
  background: rgba(212, 155, 88, 0.2) !important;
  box-shadow: 0 0 16px rgba(212, 155, 88, 0.4);
}

/* Active Radio Bar Simulation */
@keyframes radioBeepWave {
  0%, 100% { height: 4px; }
  50% { height: 18px; }
}
.radio-wave-1 { animation: radioBeepWave 0.6s infinite ease-in-out; }
.radio-wave-2 { animation: radioBeepWave 0.8s infinite ease-in-out 0.15s; }
.radio-wave-3 { animation: radioBeepWave 0.5s infinite ease-in-out 0.3s; }
.radio-wave-4 { animation: radioBeepWave 0.7s infinite ease-in-out 0.2s; }

/* Subtle pulse for radio live status */
@keyframes radioPulseGlow {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}
.animate-radio-glow {
  animation: radioPulseGlow 2s infinite ease-in-out;
}

/* Slide in animation for admin drawer */
@keyframes slideInFromRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
.animate-slide-left {
  animation: slideInFromRight 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}