/* Reusable compact ticket card styles for my_tickets.php etc. */
.ticket-wrapper {
    width: var(--width);
    max-width: 100%;
    margin: 0 auto;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
.ticket-wrapper.w80 {
    --width: 80mm;
    --qr: 34mm;
    --icon: 8.5mm;
    --pad: 3.5mm;
    --radius: 4mm;
    --top-min: 36mm;
    --curve-bottom: -22mm;
    --curve-height: 44mm;
    --qr-overlap: -10mm;
    --line: 14mm;
    --fs-logo: 18pt;
    --fs-tagline: 5pt;
    --fs-digital: 9pt;
    --fs-event: 13pt;
    --fs-vip: 6pt;
    --fs-label: 5pt;
    --fs-value: 8pt;
    --fs-status: 6pt;
    --fs-footer-title: 6pt;
    --fs-footer-text: 5pt;
    --fs-print: 7pt;
    --logo-height: 12mm;
}
.ticket-wrapper.w50 {
    --width: 50mm;
    --qr: 22mm;
    --icon: 6mm;
    --pad: 2mm;
    --radius: 2.5mm;
    --top-min: 24mm;
    --curve-bottom: -14mm;
    --curve-height: 28mm;
    --qr-overlap: -6mm;
    --line: 7mm;
    --fs-logo: 13pt;
    --fs-tagline: 4pt;
    --fs-digital: 7pt;
    --fs-event: 10pt;
    --fs-vip: 5pt;
    --fs-label: 4pt;
    --fs-value: 6.5pt;
    --fs-status: 5pt;
    --fs-footer-title: 5pt;
    --fs-footer-text: 4pt;
    --fs-print: 6pt;
    --logo-height: 8mm;
}
.ticket {
    position: relative;
    overflow: hidden;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: 0 2mm 5mm rgba(4, 15, 30, 0.15);
}
.ticket-top {
    position: relative;
    overflow: hidden;
    min-height: var(--top-min);
    padding: var(--pad) var(--pad) 9mm;
    color: #fff;
    background:
        radial-gradient(circle at 0% 0%, rgba(255, 77, 141, 0.65), transparent 27%),
        radial-gradient(circle at 100% 60%, rgba(25, 211, 236, 0.45), transparent 30%),
        linear-gradient(135deg, #050b15 0%, #0b1526 48%, #061624 100%);
}
.dot-grid {
    position: absolute;
    left: 3mm;
    top: 2.5mm;
    width: 22mm;
    height: 17mm;
    opacity: .23;
    background-image: radial-gradient(rgba(255,255,255,.65) 0.4mm, transparent 0.4mm);
    background-size: 2mm 2mm;
    mask-image: linear-gradient(to right, black, transparent);
}
.decor-line {
    position: absolute;
    height: 0.5mm;
    opacity: .8;
}
.decor-line.left {
    left: 8mm;
    top: 22mm;
    width: 18mm;
    background: linear-gradient(to right, var(--pink, #ff3f78), transparent);
}
.decor-line.right {
    right: 8mm;
    top: 22mm;
    width: 18mm;
    background: linear-gradient(to left, var(--cyan, #21d4e8), transparent);
}
.brand { position: relative; z-index: 5; text-align: center; }
.brand-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-logo);
    line-height: 1;
    font-weight: 900;
    letter-spacing: -1mm;
}
.brand-logo .d { color: var(--pink, #ff3f78); }
.brand-logo .tix { color: var(--cyan, #21d4e8); }
.dtix-logo { display: block; max-height: var(--logo-height); width: auto; margin: 0 auto; }
.brand-tagline {
    margin-top: 1mm;
    font-size: var(--fs-tagline);
    font-weight: 800;
    letter-spacing: 1pt;
    color: rgba(255,255,255,.85);
}
.digital-ticket {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2mm;
    margin-top: 3mm;
    font-size: var(--fs-digital);
    font-weight: 800;
    letter-spacing: 2pt;
}
.digital-ticket::before, .digital-ticket::after {
    content: "";
    height: 0.4mm;
    width: var(--line);
}
.digital-ticket::before { background: linear-gradient(to right, transparent, var(--pink, #ff3f78)); }
.digital-ticket::after { background: linear-gradient(to left, transparent, var(--cyan, #21d4e8)); }
.curve {
    position: absolute;
    left: -5%;
    bottom: var(--curve-bottom);
    width: 110%;
    height: var(--curve-height);
    background: #fff;
    border-radius: 50% 50% 0 0 / 35% 35% 0 0;
}
.qr-section {
    position: relative;
    z-index: 20;
    display: flex;
    justify-content: center;
    margin-top: var(--qr-overlap);
}
.qr-frame {
    position: relative;
    width: var(--qr);
    height: var(--qr);
    padding: 2mm;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: 0 1.5mm 3mm rgba(5, 15, 30, .15);
    border: 0.5mm solid transparent;
    background-image: linear-gradient(#fff,#fff), linear-gradient(135deg, var(--pink, #ff3f78), var(--cyan, #21d4e8));
    background-origin: border-box;
    background-clip: padding-box, border-box;
}
.qr-corner { position: absolute; width: 3.5mm; height: 3.5mm; }
.qr-corner::before, .qr-corner::after { content: ""; position: absolute; background: currentColor; }
.qr-corner::before { width: 100%; height: 0.4mm; }
.qr-corner::after { width: 0.4mm; height: 100%; }
.qr-corner.tl { left: 2mm; top: 2mm; color: var(--pink, #ff3f78); }
.qr-corner.tr { right: 2mm; top: 2mm; color: var(--cyan, #21d4e8); transform: rotate(90deg); }
.qr-corner.bl { left: 2mm; bottom: 2mm; color: var(--pink, #ff3f78); transform: rotate(-90deg); }
.qr-corner.br { right: 2mm; bottom: 2mm; color: var(--cyan, #21d4e8); transform: rotate(180deg); }
#qrcode {
    width: 100%; height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
}
#qrcode img { width: 100%; height: 100%; object-fit: contain; }
.event-section {
    text-align: center;
    padding: 3mm var(--pad) 4mm;
}
.event-name {
    font-size: var(--fs-event);
    line-height: 1.1;
    font-weight: 900;
    color: #0a1424;
    letter-spacing: -0.2pt;
}
.vip-badge {
    display: inline-flex;
    align-items: center;
    gap: 1mm;
    margin-top: 1.5mm;
    color: var(--pink, #ff3f78);
    font-size: var(--fs-vip);
    font-weight: 800;
    letter-spacing: 1pt;
    text-transform: uppercase;
}
.vip-star { font-size: var(--fs-vip); }
.perforation {
    position: relative;
    margin: 0;
    height: 4mm;
    border-top: 0.5mm dashed #aeb7c4;
}
.perforation::before, .perforation::after {
    content: "";
    position: absolute;
    top: -2.5mm;
    width: 5mm;
    height: 5mm;
    border-radius: 50%;
    background: #07111f;
}
.perforation::before { left: -2.5mm; }
.perforation::after { right: -2.5mm; }
.details-wrapper { padding: 0 var(--pad) var(--pad); }
.details {
    display: grid;
    grid-template-columns: 1fr;
    border: 0.3mm solid #dce2ea;
    border-radius: calc(var(--radius) * 0.6);
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff, #fbfcfd);
}
.detail {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 12mm;
    padding: 2mm var(--pad);
    gap: 2mm;
    border-bottom: 0.3mm solid #dce2ea;
}
.detail:last-child { border-bottom: 0; }
.detail-icon {
    flex: 0 0 var(--icon);
    width: var(--icon);
    height: var(--icon);
    border-radius: 1.5mm;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4mm;
    color: #fff;
    background: linear-gradient(145deg, #0d1b2d, #152842);
    box-shadow: inset 0 0.2mm 0 rgba(255,255,255,.12), 0 1mm 2mm rgba(10, 25, 45, .12);
}
.detail-label {
    font-size: var(--fs-label);
    font-weight: 700;
    color: #667085;
    letter-spacing: 0.5pt;
    text-transform: uppercase;
    margin-bottom: 0.5mm;
}
.detail-value {
    font-size: var(--fs-value);
    font-weight: 800;
    color: #111827;
    line-height: 1.3;
    word-break: break-word;
}
.status {
    display: inline-flex;
    align-items: center;
    gap: 1mm;
    padding: 1mm 2mm;
    border-radius: 5mm;
    color: #fff;
    background: #18b96d;
    font-size: var(--fs-status);
    font-weight: 800;
}
.status.used { background: #64748b; }
.status::before {
    content: "";
    width: 1mm;
    height: 1mm;
    background: #fff;
    border-radius: 50%;
}
.ticket-footer {
    position: relative;
    overflow: hidden;
    padding: 3mm var(--pad);
    text-align: center;
    color: #fff;
    background: linear-gradient(135deg, #050c18, #0c192b);
}
.footer-title {
    font-size: var(--fs-footer-title);
    font-weight: 800;
    letter-spacing: 1pt;
    text-transform: uppercase;
}
.footer-text {
    margin-top: 1mm;
    font-size: var(--fs-footer-text);
    color: rgba(255,255,255,.65);
    letter-spacing: 0.5pt;
}
.footer-lines {
    position: absolute;
    right: -8mm;
    bottom: -10mm;
    width: 30mm;
    height: 16mm;
    opacity: .25;
    transform: rotate(-10deg);
    background: repeating-radial-gradient(ellipse at bottom right, transparent 0 2mm, #21d4e8 2.1mm 2.3mm, transparent 2.5mm 4mm);
}
.actions {
    display: flex;
    justify-content: center;
    margin-top: 3mm;
}
.print-btn {
    border: 0;
    padding: 2mm 4mm;
    border-radius: 2mm;
    color: #fff;
    background: linear-gradient(135deg, var(--pink, #ff3f78), #ff2868);
    font-size: var(--fs-print);
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 1mm 2.5mm rgba(255,63,120,.25);
    transition: transform .2s ease, box-shadow .2s ease;
}
.print-btn:hover {
    transform: translateY(-1mm);
    box-shadow: 0 1.5mm 3mm rgba(255,63,120,.35);
}
@media print {
    .ticket { box-shadow: none; border-radius: 0; }
    .actions { display: none; }
    .ticket-top, .ticket-footer { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}