/* ==============================================================================
   Choir Concert Ticketing Platform - Premium Aesthetic Stylesheet
   Theme: Grand Choral Navy, Antique Gold & Choral Harmonies
   ============================================================================== */

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

:root {
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-mono: 'JetBrains Mono', monospace;
  
  --bg-deep: #070d1e;
  --bg-card: #0d172e;
  --bg-card-light: #132244;
  --gold-primary: #d4af37;
  --gold-light: #f5d77f;
  --gold-dark: #aa820a;
  --text-primary: #f8fafc;
  --text-muted: #94a3b8;
  --accent-purple: #7c3aed;
  --accent-emerald: #10b981;
  --accent-rose: #f43f5e;
  --border-color: rgba(212, 175, 55, 0.2);
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-deep);
  color: var(--text-primary);
  min-height: 100vh;
}

.font-serif {
  font-family: var(--font-serif);
}

.font-mono {
  font-family: var(--font-mono);
}

/* Gold Gradient Shimmer */
.gold-gradient-text {
  background: linear-gradient(135deg, #fce99f 0%, #d4af37 50%, #aa820a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gold-gradient-bg {
  background: linear-gradient(135deg, #d4af37 0%, #b8860b 100%);
}

.gold-gradient-bg:hover {
  background: linear-gradient(135deg, #e5c158 0%, #c59416 100%);
}

.glass-panel {
  background: rgba(13, 23, 46, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(212, 175, 55, 0.2);
}

.glass-panel-hover:hover {
  border-color: rgba(212, 175, 55, 0.5);
  transform: translateY(-2px);
  transition: all 0.25s ease;
}

/* Ticket Pass Physical Perforation Style */
.ticket-card {
  position: relative;
  background: linear-gradient(145deg, #0f1c38 0%, #0a1329 100%);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.6), 0 0 25px rgba(212, 175, 55, 0.1);
}

.ticket-notch-left, .ticket-notch-right {
  position: absolute;
  top: 68%;
  width: 24px;
  height: 24px;
  background-color: var(--bg-deep);
  border-radius: 50%;
  z-index: 10;
}

.ticket-notch-left {
  left: -12px;
  border-right: 1px solid rgba(212, 175, 55, 0.35);
}

.ticket-notch-right {
  right: -12px;
  border-left: 1px solid rgba(212, 175, 55, 0.35);
}

.ticket-perforation {
  position: absolute;
  top: 68%;
  left: 20px;
  right: 20px;
  border-bottom: 2px dashed rgba(212, 175, 55, 0.3);
  margin-top: 11px;
}

/* Mobile-safe relative ticket perforation divider */
.ticket-divider-row {
  position: relative;
  border-top: 2px dashed rgba(212, 175, 55, 0.35);
  margin: 0;
}

.ticket-divider-row::before,
.ticket-divider-row::after {
  content: '';
  position: absolute;
  top: -13px;
  width: 24px;
  height: 24px;
  background-color: var(--bg-deep);
  border-radius: 50%;
  z-index: 10;
}

.ticket-divider-row::before {
  left: -12px;
  border-right: 1px solid rgba(212, 175, 55, 0.4);
}

.ticket-divider-row::after {
  right: -12px;
  border-left: 1px solid rgba(212, 175, 55, 0.4);
}

/* Paystack Modal Theme */
.paystack-modal-overlay {
  background: rgba(4, 7, 18, 0.85);
  backdrop-filter: blur(8px);
}

.paystack-header {
  background: #00132b;
  border-bottom: 2px solid #00c3f7;
}

.paystack-btn {
  background: #0ba4db;
  color: #ffffff;
  font-weight: 700;
  transition: background 0.2s;
}

.paystack-btn:hover {
  background: #098dbd;
}

/* Scanner Animation Viewfinder (Responsive for Mobile Phones) */
.scanner-viewfinder {
  position: relative;
  width: min(230px, 68vw);
  height: min(230px, 68vw);
  border: 2px solid rgba(212, 175, 55, 0.6);
  border-radius: 20px;
  overflow: hidden;
}

/* Mobile Touch & Viewport Optimizations */
@media (max-width: 640px) {
  input, select, textarea {
    font-size: 16px !important; /* Prevents iOS/Android auto-zoom on focus */
  }
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

.scanner-laser {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #10b981, transparent);
  box-shadow: 0 0 15px #10b981;
  animation: laserScan 2s infinite ease-in-out;
}

@keyframes laserScan {
  0% { top: 0%; opacity: 0.8; }
  50% { top: 96%; opacity: 1; }
  100% { top: 0%; opacity: 0.8; }
}

/* Audio Wave Visualizer Simulation */
.sound-bar {
  display: inline-block;
  width: 4px;
  background-color: var(--gold-primary);
  border-radius: 2px;
  margin: 0 1px;
  animation: soundBounce 1.2s infinite ease-in-out alternate;
}

@keyframes soundBounce {
  0% { height: 6px; }
  100% { height: 26px; }
}

/* Print styling for tickets */
@media print {
  body {
    background: #ffffff !important;
    color: #000000 !important;
  }
  .no-print {
    display: none !important;
  }
  .ticket-card {
    background: #ffffff !important;
    color: #111827 !important;
    border: 2px solid #1f2937 !important;
    box-shadow: none !important;
    page-break-inside: avoid;
    margin: 20px auto;
  }
  .ticket-notch-left, .ticket-notch-right {
    background-color: #ffffff !important;
  }
  .gold-gradient-text {
    color: #92400e !important;
    -webkit-text-fill-color: #92400e !important;
  }
}