:root {
      --paper-width: 320px;
      /* approximate width of phone receipt photo */
      --accent: #0373A7;
      --stamp-color: rgba(3, 115, 167, 0.08);
      --body-font: 'Roboto', Arial, sans-serif;
      --mono-font: 'Roboto Mono', 'Courier New', monospace;
    }

    /* Page background to mimic phone photo */
    body {
      background: #222;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      margin: 20px
    }

    /* Receipt paper */
    .receipt {
      width: var(--paper-width);
      background: #fff;
      padding: 14px 12px;
      border-radius: 8px;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
      font-family: var(--body-font);
      color: #111;
      position: relative;
      overflow: hidden;
    }

    /* Very light repeating watermark stamp pattern (CSS only) */
    .receipt::before {
      content: '';
      position: absolute;
      inset: -20% -10% -20% -10%;
      pointer-events: none;
      opacity: 0.6;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><g fill='%230373A7' opacity='0.06'><circle cx='60' cy='30' r='22'/><rect x='28' y='58' width='64' height='46' rx='8'/></g></svg>");
      background-size: 120px 120px;
      transform: rotate(-6deg);
    }

    header {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding-bottom: 8px;
      border-bottom: 1px dashed #ddd
    }

    header .brand {
      font-weight: 700;
      letter-spacing: 1px;
      font-size: 15px
    }

    header .sub {
      font-size: 11px;
      color: #444;
      margin-top: 2px
    }

    .section {
      padding: 8px 0;
      border-bottom: 1px dashed #eee
    }

    .row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px
    }

    .muted {
      font-size: 12px;
      color: #666
    }

    .amount {
      font-weight: 700
    }

    .details {
      font-size: 13px;
      line-height: 1.38
    }

    .small {
      font-size: 11px;
      color: #555
    }

    /* Emphasize booking ID with monospace similar to receipt printing */
    .booking {
      font-family: var(--mono-font);
      font-weight: 700;
      letter-spacing: 2px
    }

    .agent {
      font-size: 13px
    }

    footer {
      font-size: 10px;
      color: #444;
      text-align: center;
      padding-top: 8px
    }

    /* Make sure printed export looks like paper */
    @media print {
      body {
        background: #fff
      }

      .receipt {
        box-shadow: none;
        border-radius: 0
      }
    }

    /* Fine spacing adjustments to match the photograph proportions */
    .muted,
    .small {
      line-height: 1.4
    }

    .section.details div {
      margin: 4px 0
    }

    /* Make sure printed export looks like paper */
    @media print {

      /* Remove background */
      body {
        background: #fff !important;
      }

      /* Remove shadows and borders on receipt */
      .receipt {
        box-shadow: none !important;
        border-radius: 0 !important;
      }

      /* ❌ Hide print button + links during printing */
      button,
      a {
        display: none !important;
      }

      /* ✔ Make text brighter and more readable */
      body,
      .receipt {
        color: #000 !important;
      }

      /* ✔ Increase general text size for printing */
      .receipt {
        font-size: 16px !important;
      }

      .row,
      .muted,
      .small,
      .details,
      footer {
        font-size: 15px !important;
      }

      header .brand {
        font-size: 20px !important;
        font-weight: 700 !important;
      }

      header .sub {
        font-size: 14px !important;
      }

      .amount {
        font-size: 18px !important;
        font-weight: bold !important;
      }
    }

    @page {
      margin: 0;
    }


    @media print {
      .receipt {
        page-break-inside: avoid !important;
        height: auto !important;
        max-height: 100% !important;
      }
    }


     

    @media print {
      .receipt {
        padding: 10px !important;
      }

      .section {
        padding: 5px 0 !important;
      }
    }

  
    @media print {
      body {
        zoom: 0.90;
        /* adjusts size to fit one sheet */
      }
    }