/* Special class for when printing is active */
body.printing-ticket {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #ffffff;
}

/* Screen styles - only visible in browser */
@media screen {
  .ticket-item {
    margin-bottom: 30px;
  }

  .ticket-item .d-flex {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
  }

  #complete-ticket-container {
    display: flex;
    width: 100%;
    page-break-inside: avoid;
  }

  #complete-ticket-container .card.w-75,
  #complete-ticket-container .card.w-25 {
    page-break-inside: avoid;
    overflow: visible;
  }
}

/* Base print styles */
@page {
  size: landscape;
  margin: 0;
}

/* Ticket print styles - simplified to avoid blank pages */
@media print {
  html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
  }
  
  /* Hide all elements by default */
  body * {
    visibility: hidden;
  }
  
  /* Make the ticket container and its children visible */
  #complete-ticket-container,
  #complete-ticket-container * {
    visibility: visible;
  }
  
  /* Position the ticket container */
  #complete-ticket-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    display: flex;
    flex-direction: row;
  }
  
  /* Hide elements we don't want to print */
  .d-print-none,
  header, 
  nav, 
  .sidebar, 
  button,
  .btn {
    display: none !important;
  }
  
  /* Basic card styles */
  .card {
    border: 1px solid #ddd;
    page-break-inside: avoid;
  }
  
  /* Make sure QR code is visible */
  svg {
    display: block;
    margin: 0 auto;
  }
  
  /* Specific styling for QR code container */
  #ticket-qr-code {
    visibility: visible !important;
    display: block !important;
    width: 100% !important;
    max-width: 200px !important;
    margin: 0 auto !important;
  }
  
  #ticket-qr-code svg {
    visibility: visible !important;
    display: block !important;
    width: 100% !important;
    max-width: 200px !important;
    height: auto !important;
  }
  
  /* Set main text color */
  body {
    color: #000;
  }
  
  /* Make ticket sides correct width */
  .card.w-75 {
    width: 75% !important;
    float: left !important;
  }
  
  .card.w-25 {
    width: 25% !important;
    float: right !important;
  }

  /* Hide non-printable elements - ONLY when printing */
  header, footer, nav, .sidebar, button, .btn, .no-print {
    display: none !important;
  }
}

body {
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  font-family: Arial, sans-serif;
}

.ticket-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 0;
  box-shadow: none;
  border: none;
}

.ticket-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  background-color: #f8f9fa;
  border-bottom: 1px dashed #000;
}

.event-logo {
  max-height: 80px;
  max-width: 200px;
}

.event-title {
  margin: 0;
  font-size: 24px;
  color: #000;
}

.ticket-title-section {
  text-align: right;
}

.ticket-title {
  margin: 0 0 5px;
  font-size: 24px;
  color: #000;
}

.ticket-date {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.ticket-body {
  display: flex;
  padding: 20px;
  border-bottom: 1px dashed #000;
}

.ticket-details {
  flex: 2;
}

.detail-row {
  margin-bottom: 12px;
  display: flex;
  align-items: baseline;
}

.detail-label {
  font-weight: bold;
  width: 120px;
  color: #333;
}

.detail-value {
  flex: 1;
  color: #000;
}

.ticket-qr {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.barcode {
  margin: 10px 0 5px;
  font-family: "Courier New", monospace;
  font-size: 14px;
  letter-spacing: 1px;
}

.scan-text {
  font-size: 14px;
  color: #333;
  text-align: center;
}

.ticket-footer {
  padding: 15px 20px;
  font-size: 12px;
  color: #333;
  text-align: center;
}

/* Screen styles */
.ticket-item {
  margin-bottom: 30px;
}

.ticket-item .d-flex {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Special class for when printing is active */
body.printing-ticket {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #ffffff;
}

#complete-ticket-container .card.w-75,
#complete-ticket-container .card.w-25 {
  page-break-inside: avoid !important;
  overflow: visible !important;
}