/* ==========================================================================
   DEWABIZ BRAND OFFICIAL THEME (Clean, Modern, Corporate SaaS & Arcade)
   Inspired by Dewabiz Cloud VPS & Web Hosting Visual Identity
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
  --dewabiz-blue: #0052FF;
  --dewabiz-blue-hover: #0043D9;
  --dewabiz-blue-light: #EFF6FF;
  --dewabiz-sky: #00A3FF;
  --dewabiz-navy: #0A1B39;
  --dewabiz-slate: #1E293B;
  --dewabiz-amber: #FF9500;
  --dewabiz-orange: #FF7A00;
  --dewabiz-green: #10B981;
  --dewabiz-border: #E2E8F0;
  --dewabiz-border-blue: #BFDBFE;
  --bg-page: #F6F9FD;
  --card-bg: #FFFFFF;
}

/* Global Reset & Base */
*, ::before, ::after {
  box-sizing: border-box;
}

img, svg, video, canvas {
  max-width: 100%;
  height: auto;
}
body {
  background-color: var(--bg-page) !important;
  background: #F6F9FD linear-gradient(180deg, #FFFFFF 0%, #F1F6FE 25%, #EAF2FB 60%, #E2EDFA 100%) !important;
  color: #1E293B !important;
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  overflow-x: hidden;
  min-height: 100vh;
}

/* Clean Corporate Typography (replacing robotic Orbitron) */
.font-cyber {
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif !important;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  letter-spacing: -0.015em;
}

.font-mono-code {
  font-family: 'JetBrains Mono', monospace;
}

/* Subtle, clean corporate background */
.cyber-grid-bg {
  background-color: #F6F9FD !important;
  background-image: 
    radial-gradient(circle at 50% 0%, rgba(0, 82, 255, 0.08) 0%, transparent 55%),
    radial-gradient(circle at 10% 30%, rgba(0, 163, 255, 0.05) 0%, transparent 45%),
    linear-gradient(rgba(0, 82, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 82, 255, 0.035) 1px, transparent 1px) !important;
  background-size: 100% 100%, 100% 100%, 36px 36px, 36px 36px !important;
}

/* Header & Navigation */
header {
  background-color: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid #E2E8F0 !important;
  box-shadow: 0 2px 14px rgba(0, 82, 255, 0.05) !important;
}

header .text-white {
  color: #0A1B39 !important;
}

header nav {
  background-color: #F1F5F9 !important;
  border-color: #E2E8F0 !important;
}

header nav button {
  color: #475569 !important;
}

header nav button:hover {
  color: #0052FF !important;
  background-color: #FFFFFF !important;
}

/* Clean White Dewabiz Card (replaces dark cyber-card) */
.cyber-card {
  background: #FFFFFF !important;
  backdrop-filter: none !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 1.25rem !important;
  box-shadow: 0 4px 20px -2px rgba(0, 82, 255, 0.06), 0 2px 6px -1px rgba(15, 23, 42, 0.03) !important;
  color: #1E293B !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative;
}

.cyber-card:hover {
  border-color: #BFDBFE !important;
  box-shadow: 0 12px 32px -4px rgba(0, 82, 255, 0.12), 0 4px 12px -2px rgba(15, 23, 42, 0.05) !important;
  transform: translateY(-2px);
}

/* Theme-Wide Card & Surface Overrides */
.bg-slate-900,
.bg-slate-950,
.bg-\[\#0B0F19\],
.bg-\[\#0B0F19\]\/90,
.bg-slate-900\/90,
.bg-slate-900\/80,
.bg-slate-900\/70,
.bg-slate-900\/60,
.bg-slate-900\/40 {
  background-color: #FFFFFF !important;
}

.bg-slate-800 {
  background-color: #F8FAFC !important;
  border-color: #E2E8F0 !important;
  color: #1E293B !important;
}

/* Soft Modern Gradients for Hero & Promos */
.from-blue-950 {
  background: linear-gradient(135deg, #EFF6FF 0%, #FFFFFF 50%, #F0F7FF 100%) !important;
  border-color: #BFDBFE !important;
}

[class*="from-purple-950"] {
  background: linear-gradient(135deg, #FAF5FF 0%, #FFFFFF 60%, #F5F3FF 100%) !important;
  border-color: #E9D5FF !important;
}

/* Borders */
.border-slate-800,
.border-slate-700,
.border-slate-900,
.border-cyan-500\/20,
.border-cyan-500\/30,
.border-cyan-500\/40 {
  border-color: #E2E8F0 !important;
}

.border-orange-500\/30,
.border-orange-500\/40 {
  border-color: #FED7AA !important;
}

.border-purple-500\/30,
.border-purple-500\/40 {
  border-color: #E9D5FF !important;
}

/* Typography & Headings */
h1:not(.text-white):not([class*="text-white"]):not(.force-white),
h2:not(.text-white):not([class*="text-white"]):not(.force-white),
h3:not(.text-white):not([class*="text-white"]):not(.force-white),
h4:not(.text-white):not([class*="text-white"]):not(.force-white),
h5:not(.text-white):not([class*="text-white"]):not(.force-white),
h6:not(.text-white):not([class*="text-white"]):not(.force-white) {
  color: #0A1B39 !important;
}

.text-white,
.text-white *,
.force-white,
.force-white * {
  color: #FFFFFF !important;
}

.text-gray-200, .text-gray-300 {
  color: #334155 !important;
}

.text-gray-400 {
  color: #64748B !important;
}

.text-gray-500 {
  color: #94A3B8 !important;
}

.text-cyan-400, .text-cyan-300 {
  color: #0052FF !important;
}

/* Badges & Chips */
.bg-cyan-950, .bg-cyan-950\/40, .bg-cyan-950\/60, .bg-cyan-950\/80,
.bg-blue-950, .bg-blue-950\/40, .bg-blue-950\/60, .bg-blue-950\/80 {
  background-color: #EFF6FF !important;
  color: #0052FF !important;
  border-color: #BFDBFE !important;
}

.bg-orange-950, .bg-orange-950\/40, .bg-orange-950\/60 {
  background-color: #FFF7ED !important;
  color: #EA580C !important;
  border-color: #FED7AA !important;
}

.bg-purple-950, .bg-purple-950\/40, .bg-purple-950\/60 {
  background-color: #FAF5FF !important;
  color: #7E22CE !important;
  border-color: #E9D5FF !important;
}

.bg-emerald-950, .bg-emerald-950\/40, .bg-emerald-950\/60, .bg-emerald-950\/80 {
  background-color: #ECFDF5 !important;
  color: #047857 !important;
  border-color: #A7F3D0 !important;
}

.bg-red-950, .bg-red-950\/40, .bg-red-950\/60, .bg-red-950\/80 {
  background-color: #FEF2F2 !important;
  color: #B91C1C !important;
  border-color: #FECACA !important;
}

/* Primary Button: Dewabiz Solid Royal Blue */
.btn-cyber-primary {
  background: linear-gradient(135deg, #0052FF 0%, #0066FF 100%) !important;
  color: #FFFFFF !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 4px 14px rgba(0, 82, 255, 0.25) !important;
  transition: all 0.2s ease !important;
  border: none !important;
}

.btn-cyber-primary:hover {
  background: linear-gradient(135deg, #0043D9 0%, #0052FF 100%) !important;
  box-shadow: 0 6px 20px rgba(0, 82, 255, 0.35) !important;
  transform: translateY(-1px);
}

.btn-cyber-primary:active {
  transform: scale(0.98);
}

/* Accent Button: Warm Golden Amber (from Dewabiz Mascot) */
.btn-cyber-orange {
  background: linear-gradient(135deg, #FF9500 0%, #FF7A00 100%) !important;
  color: #FFFFFF !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  border-radius: 0.85rem !important;
  box-shadow: 0 4px 16px rgba(255, 122, 0, 0.3) !important;
  transition: all 0.2s ease !important;
  border: none !important;
}

.btn-cyber-orange:hover {
  background: linear-gradient(135deg, #F58700 0%, #F06A00 100%) !important;
  box-shadow: 0 8px 24px rgba(255, 122, 0, 0.4) !important;
  transform: translateY(-1px);
}

.btn-cyber-orange:active {
  transform: scale(0.98);
}

/* Ensure text in buttons stays crisp white */
.btn-cyber-primary, .btn-cyber-primary *,
.btn-cyber-orange, .btn-cyber-orange *,
button.bg-blue-600, button.bg-blue-600 *,
button.bg-purple-600, button.bg-purple-600 *,
button.bg-emerald-600, button.bg-emerald-600 *,
button.bg-red-600, button.bg-red-600 *,
[class*="from-pink-600"], [class*="from-pink-600"] *,
[class*="from-purple-600"], [class*="from-purple-600"] *,
.force-white {
  color: #FFFFFF !important;
}

/* Clean Ticket Voucher Styling */
.ticket-container {
  background: #FFFFFF !important;
  border: 2px dashed #BFDBFE !important;
  border-radius: 1.25rem !important;
  box-shadow: 0 10px 40px -5px rgba(0, 82, 255, 0.08), 0 4px 12px rgba(0, 0, 0, 0.03) !important;
  color: #1E293B !important;
  position: relative;
}

.ticket-notch-left, .ticket-notch-right {
  width: 32px !important;
  height: 32px !important;
  background-color: var(--bg-page) !important;
  border: 2px dashed #BFDBFE !important;
  border-radius: 50% !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10;
}

.ticket-notch-left {
  left: -17px !important;
  border-left-color: transparent !important;
}

.ticket-notch-right {
  right: -17px !important;
  border-right-color: transparent !important;
}

/* Subtle LED Pulsing */
@keyframes softPulse {
  0%, 100% { opacity: 0.5; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1.05); }
}

.led-blink-green {
  animation: softPulse 1.8s infinite ease-in-out;
}

.led-blink-blue {
  animation: softPulse 1.5s infinite ease-in-out;
}

/* Modern Form Controls */
input[type="text"], input[type="tel"], input[type="email"], input[type="number"], select, textarea {
  background-color: #FFFFFF !important;
  border: 1.5px solid #CBD5E1 !important;
  color: #0F172A !important;
  border-radius: 0.75rem !important;
  transition: all 0.2s ease !important;
}

input:focus, select:focus, textarea:focus {
  border-color: #0052FF !important;
  box-shadow: 0 0 0 3px rgba(0, 82, 255, 0.15) !important;
  outline: none !important;
}

input::placeholder, textarea::placeholder {
  color: #94A3B8 !important;
}

/* 3D Card Flip for Memory Game */
.memory-card {
  perspective: 1000px;
  cursor: pointer;
  user-select: none;
}

.memory-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.4s;
  transform-style: preserve-3d;
}

.memory-card.flipped .memory-card-inner {
  transform: rotateY(180deg);
}

.memory-card-front, .memory-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.memory-card-front {
  background: #FFFFFF;
  border: 2px solid #E2E8F0;
  box-shadow: 0 4px 10px rgba(0, 82, 255, 0.05);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.memory-card:hover .memory-card-front {
  border-color: #93C5FD;
  box-shadow: 0 8px 18px rgba(0, 82, 255, 0.12);
  transform: translateY(-2px);
}

.memory-card-back {
  background: #FFFFFF;
  border: 2.5px solid #0052FF;
  box-shadow: 0 6px 18px rgba(0, 82, 255, 0.15);
  transform: rotateY(180deg);
  transition: all 0.25s ease;
}

.memory-card.matched .memory-card-back {
  background: #F0FDF4;
  border-color: #10B981 !important;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.28);
}

/* Tables in Leaderboard and Admin */
table {
  border-collapse: collapse;
}

thead th {
  background-color: #F8FAFC !important;
  color: #475569 !important;
  border-bottom: 1.5px solid #E2E8F0 !important;
}

tbody td {
  color: #1E293B !important;
  border-bottom: 1px solid #F1F5F9 !important;
}

tbody tr:hover {
  background-color: #F8FAFC !important;
}

/* Modals */
.modal-overlay, [id$="Modal"] {
  background-color: rgba(15, 23, 42, 0.5) !important;
  backdrop-filter: blur(4px) !important;
}

/* Custom Clean Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #F1F5F9;
}

::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

/* Shake Animation */
@keyframes screenShake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.shake-effect {
  animation: screenShake 0.3s;
}

/* Glowing text replaced with solid brand colors */
.text-glow-orange {
  color: #FF7A00 !important;
  text-shadow: none !important;
}

.text-glow-cyan {
  color: #0052FF !important;
  text-shadow: none !important;
}

/* Sound Active Pulse */
@keyframes audioWavePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 82, 255, 0.35); }
  50% { box-shadow: 0 0 0 6px rgba(0, 82, 255, 0); }
}

.sound-active {
  animation: audioWavePulse 2s infinite ease-in-out;
}