{{--
    CLEAN PRINT TICKET STYLES
    =========================
    No gradients, no web styling - pure print design
    Matches client reference design
--}}

<style>
    /* ============================================================================
       PAGE SETUP - Custom Ticket Size
       ============================================================================ */
    /* NOTE: Paper size is set via setPaper() in PHP, not @page CSS */
    /* This prevents conflicts between CSS and DomPDF paper size settings */

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 11pt;
        color: #000000;
        background: #FFFFFF;
        margin: 0;
        padding: 0;
    }

    /* ============================================================================
       LAYOUT
       ============================================================================ */
    .ticket-container {
        width: 1040pt;
        height: 510pt;
        background: #FFFFFF;
        position: relative;
        overflow: hidden; /* Prevent overflow */
        page-break-inside: avoid; /* Keep ticket on one page */
    }

    /* Event Banner Header - auto height based on image aspect ratio */
    .event-banner {
        width: 1040pt; /* Exact width to match ticket */
        overflow: hidden;
        position: relative;
    }

    .event-banner img {
        width: 1040pt; /* Fit to ticket width */
        height: auto; /* Auto height preserves aspect ratio */
        display: block;
        background: #FFFFFF;
    }

    /* Content area (below banner) - flexible height */
    .ticket-content {
        width: 100%;
        position: relative;
        padding: 0; /* No padding - rely on text padding */
    }

    /* 3-column layout */
    .ticket-layout {
        display: table;
        width: 100%;
        height: 100%;
        table-layout: fixed;
        border-collapse: collapse;
    }

    .ticket-column {
        display: table-cell;
        vertical-align: top;
        padding: 5mm; /* Reduced from 10mm to prevent overflow */
        /* Removed border-right for cleaner look */
    }

    .ticket-column:last-child {
        /* No border needed */
    }

    .column-left {
        width: 30%;
    }

    .column-center {
        width: 40%;
        text-align: center;
        vertical-align: top; /* Changed from middle to top */
    }

    .column-right {
        width: 30%;
    }

    /* ============================================================================
       TYPOGRAPHY - Increased sizes for better readability
       ============================================================================ */
    .text-small {
        font-size: 11pt; /* Increased from 9pt */
    }

    .text-normal {
        font-size: 13pt; /* Increased from 11pt */
    }

    .text-medium {
        font-size: 16pt; /* Increased from 14pt */
    }

    .text-large {
        font-size: 22pt; /* Increased from 18pt */
    }

    .text-xl {
        font-size: 28pt; /* Increased from 24pt */
    }

    .text-xxl {
        font-size: 54pt; /* Increased from 48pt */
    }

    .text-huge {
        font-size: 84pt; /* Increased from 72pt */
    }

    .bold {
        font-weight: bold;
    }

    .uppercase {
        text-transform: uppercase;
    }

    /* ============================================================================
       COMPONENTS
       ============================================================================ */

    /* Event info block - Tightened spacing */
    .event-info {
        margin-bottom: 3mm; /* Reduced from 8mm */
    }

    .event-title {
        font-size: 14pt;
        font-weight: bold;
        margin-bottom: 1mm; /* Reduced from 3mm */
        line-height: 1.1;
    }

    .event-type {
        font-size: 11pt;
        margin-bottom: 1mm; /* Reduced from 2mm */
    }

    .event-date-time {
        font-size: 11pt;
        margin-bottom: 1mm; /* Reduced from 2mm */
    }

    .event-meta {
        font-size: 9pt;
        color: #333333;
    }

    /* QR Code - Tighter spacing */
    .qr-code-container {
        text-align: center;
        margin: 2mm 0; /* Reduced from 5mm */
    }

    .qr-code-image {
        width: 35mm;
        height: 35mm;
        border: none;
        padding: 0; /* Removed padding */
    }

    .qr-label {
        font-size: 9pt;
        margin-top: 1mm; /* Reduced from 2mm */
        text-transform: uppercase;
    }

    /* Tier badge - Tighter spacing */
    .tier-badge {
        display: inline-block;
        padding: 1mm 4mm; /* Reduced from 2mm 5mm */
        border: 2px solid #000000;
        font-size: 14pt;
        font-weight: bold;
        text-transform: uppercase;
        margin: 2mm 0; /* Reduced from 3mm */
    }

    /* Seat info - Tighter spacing */
    .seat-info-small {
        margin: 2mm 0; /* Reduced from 5mm */
        padding: 2mm; /* Reduced from 3mm */
        border: 1px solid #CCCCCC;
    }

    .seat-label {
        font-size: 9pt;
        color: #666666;
        text-transform: uppercase;
        margin-bottom: 1mm;
    }

    .seat-value {
        font-size: 14pt;
        font-weight: bold;
    }

    /* Large center display - Tighter spacing */
    .center-zone {
        margin: 2mm 0; /* Reduced from 5mm */
    }

    .zone-huge {
        font-size: 36pt;
        font-weight: bold;
        line-height: 1;
        margin: 1mm 0; /* Reduced from 2mm */
    }

    .seat-huge {
        font-size: 48pt;
        font-weight: bold;
        line-height: 1;
        margin: 1mm 0; /* Reduced from 2mm */
    }

    /* Customer info - Tighter spacing */
    .customer-info {
        margin-top: 2mm; /* Reduced from 5mm */
        padding-top: 2mm; /* Reduced from 3mm */
        border-top: 1px solid #CCCCCC;
    }

    .info-label {
        font-size: 9pt;
        color: #666666;
        margin-bottom: 1mm;
    }

    .info-value {
        font-size: 11pt;
        font-weight: bold;
        margin-bottom: 3mm;
    }

    /* Footer */
    .ticket-footer {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 5mm 10mm;
        border-top: 2px solid #000000;
        background: #F5F5F5;
        display: table;
        width: 100%;
    }

    .footer-cell {
        display: table-cell;
        vertical-align: middle;
    }

    .footer-left {
        width: 33%;
    }

    .footer-center {
        width: 34%;
        text-align: center;
    }

    .footer-right {
        width: 33%;
        text-align: right;
    }

    /* Spacing utilities */
    .mb-1 { margin-bottom: 1mm; }
    .mb-2 { margin-bottom: 2mm; }
    .mb-3 { margin-bottom: 3mm; }
    .mb-5 { margin-bottom: 5mm; }
    .mb-8 { margin-bottom: 8mm; }

    .mt-1 { margin-top: 1mm; }
    .mt-2 { margin-top: 2mm; }
    .mt-3 { margin-top: 3mm; }
    .mt-5 { margin-top: 5mm; }
    .mt-8 { margin-top: 8mm; }

    /* Print optimization */
    @media print {
        body {
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
            color-adjust: exact;
        }
    }

    /* Horizontal rule - made invisible for cleaner look */
    .divider {
        border: none;
        margin: 3mm 0;
        height: 0;
        visibility: hidden;
    }

    /* Simple table */
    .info-table {
        width: 100%;
        border-collapse: collapse;
    }

    .info-table td {
        padding: 2mm 0;
        vertical-align: top;
    }

    .info-table .label-col {
        width: 40%;
        font-size: 9pt;
        color: #666666;
    }

    .info-table .value-col {
        font-size: 11pt;
        font-weight: bold;
    }

    /* ============================================================================
       COMP-001: Complimentary Guest Badge
       ============================================================================ */
    .complimentary-badge {
        text-align: center;
        margin: 8mm 0;
    }

    .guest-title {
        font-size: 22pt;
        font-weight: bold;
        color: #000000;
        text-transform: uppercase;
        margin: 0;
        line-height: 1.2;
    }

    .guest-subtitle {
        font-size: 9pt;
        color: #000000;
        margin-top: 2mm;
        text-transform: uppercase;
    }
</style>