/* ==========================================================================
   Page Header Banner
   ========================================================================== */
.page-header {
  padding: 160px 0 80px;
  background-image: url('../images/hero-bg.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
.page-header-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(9, 13, 26, 0.95) 0%, rgba(9, 13, 26, 0.85) 100%);
  z-index: 0;
}

.breadcrumb-synapse {
  display: flex;
  justify-content: center;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 15px 0 0 0;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 500;
}
.breadcrumb-synapse li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.breadcrumb-synapse li:not(:last-child)::after {
  content: '\F285'; /* Bootstrap Icon chevron-right */
  font-family: 'bootstrap-icons';
  font-size: 0.75rem;
  color: var(--synapse-text-muted);
}
.breadcrumb-synapse a {
  color: var(--synapse-text-secondary);
}
.breadcrumb-synapse a:hover {
  color: var(--synapse-text-primary);
}
.breadcrumb-synapse li.active {
  color: var(--synapse-text-primary);
}

/* ==========================================================================
   Ticketing Forms & Cards
   ========================================================================== */
.pass-selection-card {
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(18, 24, 41, 0.3);
  transition: var(--transition-normal);
}
.pass-selection-card.active {
  border-color: var(--synapse-primary);
  background: rgba(124, 58, 237, 0.08);
  box-shadow: 0 10px 25px rgba(124, 58, 237, 0.15);
}

.pass-price-badge {
  font-size: 1.5rem;
  font-weight: 800;
  font-family: var(--font-heading);
  color: var(--synapse-cyan);
}

/* Web3 Connection styling */
.web3-connect-btn {
  border-color: rgba(6, 182, 212, 0.3);
  color: var(--synapse-cyan);
  transition: var(--transition-normal);
}
.web3-connect-btn:hover {
  background: rgba(6, 182, 212, 0.08);
  border-color: var(--synapse-cyan);
  color: var(--synapse-cyan);
}
.web3-status-box {
  background: rgba(16, 185, 129, 0.06);
  border: 1px dashed rgba(16, 185, 129, 0.25);
  color: #10b981;
}

/* Checkout receipt sidebar */
.ticket-receipt-card {
  border-color: rgba(255, 255, 255, 0.05);
  background: rgba(18, 24, 41, 0.8) !important;
}

/* Barcode printable wrapper */
.pass-pdf-ticket {
  border: 2px dashed rgba(255, 255, 255, 0.15);
  background: #0f172a;
}
.pass-pdf-header {
  border-bottom: 2px dashed rgba(255, 255, 255, 0.1);
}

.ticket-type-label {
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 6px 16px;
  border-radius: 4px;
}
.label-dev {
  background: rgba(124, 58, 237, 0.15);
  color: var(--synapse-primary);
}
.label-vip {
  background: rgba(236, 72, 153, 0.15);
  color: var(--synapse-accent);
}
.label-hack {
  background: rgba(6, 182, 212, 0.15);
  color: var(--synapse-cyan);
}

/* Loading overlays */
.checkout-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(5, 7, 15, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.checkout-loading-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* ==========================================================================
   Print Stylesheet (Prints Ticket on Single Page)
   ========================================================================== */
@media print {
  @page {
    size: portrait;
    margin: 1cm;
  }
  
  body {
    background: #ffffff !important;
    color: #000000 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Hide all elements that are not part of the physical ticket */
  header, 
  footer, 
  section.page-header, 
  .page-header-overlay, 
  .glow-blob, 
  #checkoutInputState,
  #checkoutSuccessState > div > div > div:first-child,
  .d-flex.justify-content-center.flex-wrap.gap-3.mt-4,
  .checkout-loading-overlay {
    display: none !important;
  }
  
  /* Force ticket parent to center and display */
  #checkoutSuccessState, 
  #checkoutSuccessState > div, 
  #checkoutSuccessState > div > div {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }
  
  /* Style ticket container to be black and white print friendly */
  .pass-pdf-ticket {
    display: block !important;
    border: 2px dashed #000000 !important;
    background: #ffffff !important;
    color: #000000 !important;
    box-shadow: none !important;
    margin: 0 auto !important;
    padding: 30px !important;
    width: 100% !important;
    max-width: 650px !important;
    border-radius: 8px !important;
    page-break-inside: avoid !important;
  }
  
  /* Ticket header text styling */
  .pass-pdf-header {
    border-bottom: 2px dashed #000000 !important;
    padding-bottom: 15px !important;
    margin-bottom: 20px !important;
  }
  
  .pass-pdf-header a, 
  .pass-pdf-header a i {
    color: #000000 !important;
  }
  
  .ticket-type-label {
    background: #e2e8f0 !important;
    color: #000000 !important;
    border: 1px solid #000000 !important;
  }
  
  /* Ticket metadata text mapping */
  .text-white, 
  strong, 
  #pdfHolderName, 
  #pdfBookingRef {
    color: #000000 !important;
  }
  
  .text-secondary, 
  .text-muted, 
  .text-white-50, 
  .text-md-end span, 
  .col-4.text-muted {
    color: #4b5563 !important;
  }
  
  /* Barcode container styling */
  .pass-pdf-ticket .pt-4.border-top {
    border-top: 1px solid #000000 !important;
    margin-top: 20px !important;
  }
  
  .pass-pdf-ticket .bg-white {
    background: #ffffff !important;
    border: 1px solid #000000 !important;
    padding: 10px !important;
    opacity: 1 !important;
  }
  
  .pass-pdf-ticket .bg-dark {
    background: #000000 !important; /* Forces black bars */
  }
}