/**
 * BISDEL TELECOM - CHILD PANEL CINEMATIC DESIGN SYSTEM & MOTION BACKGROUND
 * High-tech cyber aesthetic with floating ambient light orbs, 100% font contrast,
 * glassmorphic panels, and fluid responsive interactions.
 */

:root {
  --cinematic-bg: #070b14;
  --cinematic-surface: #0f172a;
  --cinematic-card: #131b2e;
  --cinematic-card-hover: #19243d;
  --cinematic-border: rgba(255, 255, 255, 0.1);
  --cinematic-border-glow: rgba(59, 130, 246, 0.5);
  --cinematic-text-main: #ffffff;
  --cinematic-text-sub: #cbd5e1;
  --cinematic-text-muted: #94a3b8;
  --cinematic-accent-blue: #38bdf8;
  --cinematic-accent-emerald: #10b981;
  --cinematic-accent-amber: #f59e0b;
}

/* BASE BACKGROUND WITH FLOATING GLOW ORBS */
.cinematic-body {
  background-color: var(--cinematic-bg) !important;
  color: var(--cinematic-text-main) !important;
  position: relative;
  overflow-x: hidden;
  min-height: 100vh;
}

.cinematic-motion-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.cinematic-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.18;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.cinematic-orb-1 {
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, #2563eb, #1d4ed8);
  top: -150px;
  left: 10%;
  animation-name: orbFloat1;
}

.cinematic-orb-2 {
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, #10b981, #047857);
  bottom: 5%;
  right: -100px;
  animation-name: orbFloat2;
}

.cinematic-orb-3 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, #7c3aed, #4c1d95);
  top: 40%;
  left: -120px;
  animation-name: orbFloat3;
}

@keyframes orbFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(80px, 60px) scale(1.12); }
}

@keyframes orbFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-60px, -70px) scale(1.08); }
}

@keyframes orbFloat3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(70px, -50px) scale(1.15); }
}

/* HIGH CONTRAST TYPOGRAPHY GUARANTEES */
.cinematic-title-xl {
  color: #ffffff !important;
  font-weight: 900 !important;
  letter-spacing: -0.5px !important;
  line-height: 1.2 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.cinematic-subtitle {
  color: #cbd5e1 !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
}

.cinematic-text-dim {
  color: #94a3b8 !important;
}

/* GLASSMORPHIC CONTAINERS */
.cinematic-card {
  background: rgba(19, 27, 46, 0.85) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35) !important;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
  color: #ffffff !important;
}

.cinematic-card:hover {
  transform: translateY(-4px);
  border-color: rgba(59, 130, 246, 0.4) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(37, 99, 235, 0.2) !important;
}

/* HIGH-ACCESSIBILITY INPUTS */
.cinematic-input {
  width: 100%;
  background: rgba(7, 11, 20, 0.7) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  font-size: 0.95rem !important;
  padding: 0.85rem 1.15rem !important;
  outline: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.cinematic-input:focus {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.3) !important;
}

.cinematic-label {
  display: block !important;
  color: #f1f5f9 !important;
  font-weight: 800 !important;
  font-size: 0.88rem !important;
  margin-bottom: 0.45rem !important;
}

/* GLOWING ACTION BUTTONS */
.cinematic-btn-glow {
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 0.85rem 1.75rem !important;
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.4) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
}

.cinematic-btn-glow:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(37, 99, 235, 0.6) !important;
  color: #ffffff !important;
}