/**
 * Print-Styling für Checkout und weitere druckbare Seiten
 * Optimiert für saubere, formatierte Ausgaben ohne unnötige Seitenumbrüche
 */

@media print {
  /* ============================================
     Elemente ausblenden
     ============================================ */
  .no-print,
  .blog-header,
  .main-navigation,
  .sidebar-container-card,
  nav[aria-label="breadcrumb"],
  .checkout-buttons,
  .checkout-page-wrap,
  .checkout-screen-content,
  footer,
  .cart-badge-link,
  .btn,
  .header-image-container {
    display: none !important;
    visibility: hidden !important;
  }

  /* Eigenständige Druckversion einblenden */
  .checkout-print-document.print-only {
    display: block !important;
    visibility: visible !important;
  }

  /* Tags-Sektion (Beliebte Tags) komplett ausblenden */
  .container.mt-5.mb-4:has(.tags-container) {
    display: none !important;
  }

  /* ============================================
     Basis-Layout für Druck
     ============================================ */
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body {
    font-size: 12pt;
    line-height: 1.4;
    background: #fff !important;
  }

  a,
  a:visited {
    text-decoration: underline;
    color: #000 !important;
  }

  a[href]::after {
    content: none !important;
  }

  /* ============================================
     Container und Abstände
     ============================================ */
  .container {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .container .row {
    margin: 0 !important;
  }

  .container .row > [class*="col-"] {
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
  }

  /* ============================================
     Keine unnötigen Seitenumbrüche
     ============================================ */
  .card,
  .main-content-card,
  .checkout-order-header,
  .booking-info-box,
  .checkout-success-info,
  .checkout-cancel-info {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid !important;
  }

  ul, ol {
    page-break-inside: avoid !important;
  }

  /* ============================================
     Karten-Styling für Druck (lesbar, schlicht)
     ============================================ */
  .card {
    border: 1px solid #333 !important;
    margin-bottom: 1rem !important;
    padding: 0 !important;
  }

  .card-header,
  .checkout-order-header {
    background: #f0f0f0 !important;
    border-bottom: 1px solid #333 !important;
    padding: 0.5rem 1rem !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .card-body {
    padding: 1rem !important;
  }

  .booking-info-box,
  .checkout-success-info,
  .checkout-cancel-info {
    border: 1px solid #333 !important;
    padding: 1rem !important;
    margin-bottom: 1rem !important;
    background: #f9f9f9 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* ============================================
     Text-Bereiche
     ============================================ */
  .text-center {
    text-align: center !important;
  }

  .text-muted {
    color: #555 !important;
  }

  .text-success {
    color: #000 !important;
  }

  .text-warning {
    color: #000 !important;
  }

  /* Icons beim Druck als Text ersetzen oder klein halten */
  .bi::before {
    font-size: 0.9em;
  }

  /* ============================================
     Listen formatieren
     ============================================ */
  .list-unstyled {
    padding-left: 0 !important;
  }

  .list-unstyled li {
    margin-bottom: 0.25rem !important;
    padding-left: 0 !important;
  }

  /* ============================================
     Druck-Ränder (Seitenlayout)
     ============================================ */
  @page {
    margin: 1.5cm;
    size: A4;
  }

  @page :first {
    margin-top: 1.5cm;
  }

  /* ============================================
     Eigenständige Checkout-Druckversion
     Einfarbig, informationsorientiert, Logo + Firmenname
     ============================================ */
  .checkout-print-document {
    max-width: 100%;
    padding: 0;
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 11pt;
    line-height: 1.5;
    color: #000 !important;
  }

  .checkout-print-document * {
    color: #000 !important;
    background: transparent !important;
  }

  .print-doc-header {
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #333;
  }

  .print-doc-logo {
    max-height: 48px;
    max-width: 200px;
    display: block;
    margin-bottom: 0.5rem;
    filter: grayscale(100%);
  }

  .print-doc-company {
    font-size: 14pt;
    font-weight: bold;
    margin: 0;
    letter-spacing: 0.02em;
  }

  .print-doc-divider {
    border: none;
    border-top: 1px solid #333;
    margin: 1rem 0;
  }

  .print-doc-title {
    font-size: 13pt;
    font-weight: bold;
    margin: 0 0 0.25rem 0;
  }

  .print-doc-date {
    font-size: 10pt;
    color: #444 !important;
    margin: 0 0 1rem 0;
  }

  .print-info-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
    font-size: 11pt;
  }

  .print-info-table th,
  .print-info-table td {
    padding: 0.35rem 0.5rem 0.35rem 0;
    text-align: left;
    border-bottom: 1px solid #ccc;
    vertical-align: top;
  }

  .print-info-table th {
    font-weight: 600;
    width: 35%;
    color: #333 !important;
  }

  .print-info-table td {
    color: #000 !important;
  }

  .print-doc-note {
    font-size: 10pt;
    color: #444 !important;
    margin: 0;
    line-height: 1.5;
  }
}

@media screen {
  .print-only {
    display: none !important;
  }
}
