/* ==========================================================================
   CONSASUR ACADEMY - HUD ARCHITECTURAL STYLESHEET
   Design System: Blueprint Dark & HUD Brutalism
   ========================================================================== */

/* Root Custom Properties */
:root {
  --primary: #ff4d5e;
  --primary-rgb: 255, 77, 94;
  --tertiary: #00f2ff;
  --tertiary-rgb: 0, 242, 255;
  --surface: #111316;
  --surface-low: #0c0e11;
  --surface-high: #282a2d;
  --grid-line: rgba(255, 255, 255, 0.03);
}

/* Base Body */
body {
  background-color: var(--surface);
  color: #e2e2e6;
  overflow-x: hidden;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

/* HUD Laser Borders & Glowing Hover Cards */
.hud-border {
  border: 1px solid rgba(255, 77, 94, 0.2);
  box-shadow: inset 0 0 20px rgba(255, 77, 94, 0.05);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.hud-border:hover {
  border-color: rgba(255, 77, 94, 0.6);
  box-shadow: inset 0 0 30px rgba(255, 77, 94, 0.12), 0 0 20px rgba(255, 77, 94, 0.25);
  transform: translateY(-4px);
}

.hud-card {
  position: relative;
}

.hud-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.35s ease;
  transform: scaleX(0.5);
  z-index: 10;
}

.hud-card:hover::before {
  opacity: 1;
  transform: scaleX(1);
}

/* Structural Laser Accent Corner Indicators */
.hud-corner {
  position: relative;
}

.hud-corner::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 8px;
  height: 8px;
  border-bottom: 2px solid var(--primary);
  border-right: 2px solid var(--primary);
  opacity: 0.7;
}

/* Glassmorphism Panel */
.glass-panel {
  background: rgba(12, 14, 17, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 77, 94, 0.2);
}

/* Scanline Effect */
.scan-line {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 77, 94, 0.8), rgba(0, 242, 255, 0.8), transparent);
  opacity: 0.6;
  pointer-events: none;
  z-index: 999;
}

/* Hero Multi-Slide Animations (Crossfade + KenBurns) */
@keyframes crossfade {
  0% { opacity: 1; }
  25% { opacity: 1; }
  33.33% { opacity: 0; }
  91.66% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes kenBurns {
  0% { transform: scale(1) translate(0, 0); }
  50% { transform: scale(1.08) translate(-1.5%, 1.5%); }
  100% { transform: scale(1.15) translate(-2%, 2%); }
}

.slide-1 { 
  animation: crossfade 12s infinite, kenBurns 24s ease-in-out infinite alternate; 
}
.slide-2 { 
  animation: crossfade 12s infinite, kenBurns 24s ease-in-out infinite alternate; 
  animation-delay: 4s; 
  opacity: 0; 
}
.slide-3 { 
  animation: crossfade 12s infinite, kenBurns 24s ease-in-out infinite alternate; 
  animation-delay: 8s; 
  opacity: 0; 
}

/* Glitch Text Effect */
.glitch-text {
  position: relative;
  text-shadow: 0 0 20px rgba(0,0,0,0.8);
}

.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.8;
}

.glitch-text::before {
  color: #ff4d5e;
  z-index: -1;
  transform: translateX(-2px);
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
}

.glitch-text::after {
  color: #00f2ff;
  z-index: -2;
  transform: translateX(2px);
  clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
}

/* Strong Text Glow */
.text-glow-strong {
  text-shadow: 0 2px 12px rgba(0,0,0,0.95), 0 0 25px rgba(0,0,0,0.8), 0 0 8px rgba(255,255,255,0.3);
}

.text-glow-primary {
  text-shadow: 0 0 15px rgba(255, 77, 94, 0.7);
}

/* Smooth Fade In On Scroll */
.fade-in-section {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-in-section.is-visible {
  opacity: 1;
  transform: none;
}

/* Custom Architectural Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--surface-low);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 77, 94, 0.35);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
  box-shadow: 0 0 10px rgba(255, 77, 94, 0.8);
}

/* Grid Background Blueprint Overlay */
.grid-bg-overlay {
  background-size: 32px 32px;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
}

/* ==========================================================================
   CHECKOUT & PAYMENT STYLES
   ========================================================================== */
.payment-option-card {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(30, 32, 35, 0.7);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.payment-option-card:hover {
  border-color: rgba(255, 77, 94, 0.5);
  background: rgba(40, 42, 45, 0.9);
  transform: translateY(-2px);
}

.payment-option-card.selected {
  border-color: #ff4d5e;
  background: linear-gradient(135deg, rgba(104, 0, 21, 0.4) 0%, rgba(30, 32, 35, 0.9) 100%);
  box-shadow: 0 0 20px rgba(255, 77, 94, 0.25), inset 0 0 15px rgba(255, 77, 94, 0.1);
}

.payment-option-card.selected .radio-indicator {
  border-color: #ff4d5e;
  background-color: #ff4d5e;
  box-shadow: 0 0 10px #ff4d5e;
}

.credit-card-container {
  background: linear-gradient(135deg, #1f2227 0%, #111316 50%, #22262c 100%);
  border: 1px solid rgba(255, 77, 94, 0.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), inset 0 0 30px rgba(255, 77, 94, 0.1);
  position: relative;
  overflow: hidden;
}

.credit-card-container::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 77, 94, 0.1) 0%, transparent 60%);
  pointer-events: none;
}

.card-chip {
  background: linear-gradient(135deg, #d4af37 0%, #f9e79f 50%, #b7950b 100%);
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  border-radius: 4px;
}

/* Printable Voucher for OXXO and SPEI */
@media print {
  body * {
    visibility: hidden;
  }
  #printableVoucher, #printableVoucher * {
    visibility: visible;
  }
  #printableVoucher {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background: #ffffff !important;
    color: #000000 !important;
    padding: 20px;
  }
  #printableVoucher * {
    color: #000000 !important;
    border-color: #000000 !important;
  }
}

/* ==========================================================================
   SESSION 1 PANEL ENHANCEMENTS
   ========================================================================== */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(12, 14, 17, 0.6);
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255, 77, 94, 0.4);
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #ff4d5e;
  box-shadow: 0 0 10px rgba(255, 77, 94, 0.8);
}

.s1-tab-btn {
  user-select: none;
  white-space: nowrap;
}

.s1-tab-btn.active {
  background-color: #ff4d5e !important;
  color: #ffffff !important;
  box-shadow: 0 0 15px rgba(255, 77, 94, 0.45) !important;
  border-color: #ff4d5e !important;
}

#s1SlideWrapper:fullscreen {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #000000 !important;
  width: 100vw !important;
  height: 100vh !important;
  padding: 10px !important;
}

#s1SlideWrapper:fullscreen canvas {
  max-width: 96vw !important;
  max-height: 96vh !important;
}