/* ==========================================================
   TICKET COMBO — scoped under .ticket-combo so it can't fight app.css
   Class names mirror the original design (agency-header, flight-direction,
   flight-leg, route-details, airport-block, policy-info, co2-section…).

   Fonts: LufthansaText is declared once globally in app.css; this file
   does NOT redeclare @font-face. Palette vars and a scoped reset are
   self-contained so the template can render in any context.
   ========================================================== */

/* ---- Palette (subset used by this template) ---- */
.ticket-combo {
    --lh-dark-blue: #05164d;
    --lh-yellow: #ffad00;
    --lh-gray: #9b9b9b;
    --lh-gray-lighter: #dcdcdc;
    --lh-white: #ffffff;
    --lh-text: #3f3f3f;
    --lh-text-light: #666666;
    --lh-success: #28a745;
    --lh-info: #f1f7ff;
}

/* ---- Scoped reset (does not affect anything outside .ticket-combo) ---- */
.ticket-combo *,
.ticket-combo *::before,
.ticket-combo *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.ticket-combo {
    background: var(--lh-white);
    box-sizing: border-box;
    padding: 22px 26px 24px;
    margin: 0 auto 24px;
    max-width: 900px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    color: var(--lh-text);
    font-family: 'LufthansaText', Arial, sans-serif;
    font-size: 9.5pt;
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    page-break-after: always;
    page-break-inside: auto;
}

/* ============ HEADER ============ */
.ticket-combo .agency-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--lh-gray-lighter);
}
.ticket-combo .agency-logo {
    max-height: 60px; max-width: 200px; object-fit: contain;
}
.ticket-combo .agency-info {
    text-align: right;
    font-size: 10px;
    color: var(--lh-text-light);
    line-height: 1.4;
}

/* ============ BOOKING DETAILS ============ */
.ticket-combo .booking-details {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 10px 0;
    margin: 0 0 16px;
    border-bottom: 1px solid var(--lh-gray-lighter);
}
.ticket-combo .booking-item {
    font-size: 12px;
    text-align: left;
    padding: 0 18px;
    border-right: 1px solid var(--lh-gray-lighter);
    border-left: none;
}
.ticket-combo .booking-item:first-child { padding-left: 0; }
.ticket-combo .booking-item:last-child { border-right: none; }
.ticket-combo .booking-item span {
    display: block;
    font-size: 8.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lh-text-light);
    font-weight: 700;
    margin-bottom: 2px;
}
.ticket-combo .booking-item strong {
    font-size: 12.5px; color: var(--lh-text); font-weight: 700;
}
.ticket-combo .booking-item strong.mono {
    font-family: 'LufthansaText', Arial, sans-serif;
    font-size: 11.5px; letter-spacing: 0.04em;
}
.ticket-combo .booking-item strong.supplier-grid {
    display: inline-grid;
    grid-template-columns: auto auto;
    gap: 2px 14px;
    line-height: 1.3;
}

/* ============ INFANT ============ */
.ticket-combo .infant-info {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 11px; background: #fff9e6;
    border-left: 3px solid var(--lh-yellow);
    font-size: 10px; color: var(--lh-text);
    margin-bottom: 10px;
}
.ticket-combo .infant-info .pill {
    background: var(--lh-yellow); color: var(--lh-dark-blue);
    font-weight: 700; font-size: 9px; padding: 1px 7px;
    letter-spacing: 0.1em;
}
.ticket-combo .infant-info .tkt {
    margin-left: auto; color: var(--lh-text-light);
    font-family: 'LufthansaText', Arial, sans-serif;
    font-size: 9px;
}

/* ============ FLIGHT DIRECTION ============ */
.ticket-combo .flight-direction {
    page-break-inside: avoid;
    break-inside: avoid;
    border-left: 4px solid var(--lh-gray);
    padding: 14px 16px;
    margin-bottom: 14px;
    background: #fafafa;
}
.ticket-combo .direction-info {
    font-size: 10.5px; color: var(--lh-text-light);
    padding-bottom: 6px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--lh-gray-lighter);
    display: flex; justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}
.ticket-combo .direction-info strong {
    color: var(--lh-dark-blue);
    font-size: 13px;
    letter-spacing: 0.02em;
}
.ticket-combo .direction-info .arrow {
    color: var(--lh-yellow); margin: 0 6px;
}
.ticket-combo .direction-info .meta {
    font-size: 10px; color: var(--lh-text-light); font-weight: 600;
}
.ticket-combo .direction-separator { display: none; }

/* ============ FLIGHT LEG ============ */
.ticket-combo .flight-leg {
    background: transparent;
    margin-top: 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(200px, 240px);
    column-gap: 20px;
    align-items: stretch;
}
.ticket-combo .flight-leg:first-of-type { margin-top: 0; }

.ticket-combo .airline-info {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 0 2px 6px;
    background: transparent;
    border-bottom: 1px dashed var(--lh-gray-lighter);
    margin-bottom: 0;
}
.ticket-combo .flight-number {
    font-weight: 700; font-size: 12.5px;
    color: var(--lh-dark-blue); letter-spacing: 0.02em;
}
.ticket-combo .airline-name-sub {
    font-size: 9.5px; color: var(--lh-text-light);
}
.ticket-combo .airline-name-sub strong { color: var(--lh-text); font-weight: 600; }
.ticket-combo .flight-date {
    font-size: 10px; color: var(--lh-text-light); font-weight: 600;
}
.ticket-combo .brand-tag {
    font-size: 8.5px; letter-spacing: 0.1em;
    text-transform: uppercase; font-weight: 700;
    padding: 2px 8px; background: var(--lh-text); color: #fff;
}

/* ============ ROUTE ============ */
.ticket-combo .route-details {
    grid-column: 1;
    padding: 12px 2px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    align-items: center;
    margin-top: 0;
}
.ticket-combo .airport-block {
    min-width: 120px;
    flex: unset;
}
.ticket-combo .airport-block.right-align { text-align: right; }
.ticket-combo .time-display {
    font-size: 22px;
    font-weight: 700;
    color: var(--lh-text);
    letter-spacing: -0.02em;
    line-height: 1;
    display: inline-block;
    margin-top: 0;
}
.ticket-combo .airport-code {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: var(--lh-dark-blue);
    letter-spacing: 0.12em;
    margin-left: 8px;
    vertical-align: 3px;
}
.ticket-combo .airport-city-terminal {
    font-size: 10px;
    color: var(--lh-text);
    margin-top: 3px;
    line-height: 1.3;
}
.ticket-combo .airport-city-terminal .terminal {
    color: var(--lh-text-light);
    font-size: 9px;
}
.ticket-combo .day-offset {
    font-size: 9px; color: #b5830a;
    font-weight: 700; margin-left: 3px;
    vertical-align: 7px;
}

.ticket-combo .duration-block {
    text-align: center; min-width: 110px;
    flex: unset; align-self: center;
}
.ticket-combo .duration-label {
    font-size: 8.5px; color: var(--lh-text-light);
    font-weight: 700; letter-spacing: 0.04em;
    margin-bottom: 2px;
}
.ticket-combo .duration-line {
    position: relative; width: 100%; height: 1px;
    background: var(--lh-gray-lighter);
}
.ticket-combo .duration-line::before {
    content: ''; position: absolute; left: 0; top: 50%;
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--lh-dark-blue); transform: translateY(-50%);
}
.ticket-combo .duration-line::after {
    content: '✈'; position: absolute; right: -2px; top: 50%;
    transform: translateY(-50%); background: var(--lh-white);
    color: var(--lh-dark-blue); font-size: 11px; padding: 0 2px;
}
.ticket-combo .duration-time {
    font-size: 9px; color: var(--lh-text-light); margin-top: 3px;
    text-transform: uppercase; letter-spacing: 0.06em;
}

/* ============ SERVICE ROW (per segment) ============ */
.ticket-combo .flight-details {
    grid-column: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: min-content;
    gap: 8px 14px;
    border-left: 1px dashed var(--lh-gray-lighter);
    background: transparent;
    margin-top: 0;
    padding: 10px 0 10px 18px;
    align-content: center;
    font-size: unset;
    color: unset;
}
.ticket-combo .detail-cell {
    padding: 0;
    display: flex; flex-direction: column; gap: 2px;
    min-width: 0;
}
.ticket-combo .detail-cell .lbl {
    font-size: 7.5px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--lh-text-light);
    font-weight: 700;
}
.ticket-combo .detail-cell .val {
    font-size: 10.5px; font-weight: 600; color: var(--lh-text);
}
.ticket-combo .detail-cell .val.seat {
    display: inline-block;
    background: var(--lh-dark-blue); color: #fff;
    padding: 0 7px; letter-spacing: 0.05em;
    font-size: 10.5px; align-self: flex-start;
}
.ticket-combo .detail-cell .val.none {
    color: var(--lh-text-light); font-style: italic; font-weight: 400;
}
.ticket-combo .detail-cell .val.co2 { color: #2e7d32; }

/* ============ TECH STOP / LAYOVER ============ */
.ticket-combo .stop-info {
    margin: 8px 12px 0;
    padding: 5px 10px;
    background: #fff9e6;
    border-left: 3px solid var(--lh-yellow);
    font-size: 9.5px;
    color: var(--lh-text);
}
.ticket-combo .stop-info strong { color: var(--lh-text); font-weight: 700; }

.ticket-combo .layover {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(200px, 240px);
    column-gap: 20px;
    margin: 10px 0 0;
    background: transparent;
    padding: 0;
}
.ticket-combo .layover-text {
    grid-column: 1;
    text-align: center;
    font-size: 10px;
    color: var(--lh-text-light);
    background: #f5f7fb;
    padding: 7px 10px;
    font-weight: 500;
    letter-spacing: 0.02em;
}
.ticket-combo .layover-text strong { color: var(--lh-dark-blue); font-weight: 700; }

/* ============ POLICY / BAGGAGE / EMD ============ */
.ticket-combo .policy-info {
    margin-top: 10px;
    padding: 8px 12px;
    background: var(--lh-info);
    border-left: 4px solid var(--lh-dark-blue);
    display: grid;
    grid-template-columns: auto 1fr auto 1fr;
    gap: 12px;
    align-items: center;
}
.ticket-combo .policy-info .lbl {
    font-size: 7.5px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--lh-dark-blue);
    font-weight: 700;
}
.ticket-combo .policy-info .val { font-size: 10px; color: var(--lh-text); font-weight: 600; }
.ticket-combo .policy-info .val strong { color: var(--lh-dark-blue); font-weight: 700; }
.ticket-combo .policy-info .val .fee {
    color: #a03500; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    font-size: 8.5px;
}

/* EMD list variant — single column, full-width rows */
.ticket-combo .policy-info--list {
    grid-template-columns: 1fr;
    background: #fff9e6;
    border-left-color: var(--lh-yellow);
    gap: 6px;
    align-items: stretch;
}
.ticket-combo .policy-info--list .emd-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: baseline;
    padding: 4px 0;
    border-bottom: 1px dashed var(--lh-gray-lighter);
}
.ticket-combo .policy-info--list .emd-row:last-child { border-bottom: none; }
.ticket-combo .policy-info--list .emd-id {
    font-size: 10px; font-weight: 700; color: var(--lh-dark-blue);
    letter-spacing: 0.04em;
}
.ticket-combo .policy-info--list .emd-name {
    font-size: 10.5px; color: var(--lh-text);
}
.ticket-combo .policy-info--list .emd-meta {
    font-size: 9px; color: var(--lh-text-light);
}

/* Alert variant — for schedule-change notices and similar warnings */
.ticket-combo .policy-info--alert {
    grid-template-columns: auto 1fr;
    background: #fff4e6;
    border-left-color: #c75300;
    align-items: stretch;
    gap: 6px;
}
.ticket-combo .policy-info--alert .alert-title {
    font-size: 9px; letter-spacing: 0.14em;
    text-transform: uppercase; color: #c75300;
    font-weight: 700; align-self: center;
}
.ticket-combo .policy-info--alert .alert-list {
    margin: 0; padding-left: 16px; font-size: 10.5px; color: var(--lh-text);
}
.ticket-combo .policy-info--alert .alert-list li { padding: 1px 0; }
.ticket-combo .policy-info--alert .alert-list strong { color: var(--lh-dark-blue); font-weight: 700; }

/* ============ CO2 SECTION ============ */
.ticket-combo .co2-section {
    margin-top: 12px;
    padding: 8px 12px;
    background: #e8f5e9;
    border-left: 4px solid var(--lh-success);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.ticket-combo .co2-section .lbl {
    font-size: 8px; letter-spacing: 0.14em;
    text-transform: uppercase; color: #2e7d32;
    font-weight: 700;
}
.ticket-combo .co2-section .total {
    font-size: 13px; font-weight: 700; color: #2e7d32;
}
.ticket-combo .co2-section .disclaimer {
    font-size: 8.5px; color: #2e7d32; text-align: right;
}

/* ============ PRICE BREAKDOWN / SUMMARY PANELS ============ */
.ticket-combo .summary-title {
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lh-dark-blue);
    font-weight: 700;
    margin: 16px 0 6px;
}
.ticket-combo .price-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}
.ticket-combo .price-table thead td {
    background: var(--lh-dark-blue);
    color: #fff;
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 8px 12px;
}
.ticket-combo .price-table tbody td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--lh-gray-lighter);
    vertical-align: top;
}
.ticket-combo .price-table tbody tr:nth-child(odd) td { background: #fafafa; }
.ticket-combo .price-table tbody td.amount { text-align: right; white-space: nowrap; font-weight: 600; }
.ticket-combo .price-table .item-desc {
    display: block;
    font-size: 9.5px;
    color: var(--lh-text-light);
    margin-top: 2px;
}
.ticket-combo .price-table tfoot td {
    background: #DCE1F0;
    font-size: 12px;
    font-weight: 700;
    padding: 10px 12px;
    color: var(--lh-dark-blue);
}
.ticket-combo .price-table tfoot td.amount { text-align: right; }

/* Billing / Payment use a two-column key/value grid; reuses policy-info
   panel look but supports stacked label/value pairs. */
.ticket-combo .kv-panel {
    margin-top: 8px;
    padding: 10px 14px;
    background: #DCE1F0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 24px;
    align-items: start;
}
.ticket-combo .kv-panel .kv {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ticket-combo .kv-panel .kv .lbl {
    font-size: 8px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lh-dark-blue);
    font-weight: 700;
}
.ticket-combo .kv-panel .kv .val {
    font-size: 11px;
    font-weight: 700;
    color: var(--lh-text);
    word-break: break-word;
}
.ticket-combo .kv-panel .kv .sub {
    font-size: 9px;
    color: var(--lh-text-light);
    font-weight: 400;
}

/* ============ FOOTER ============ */
.ticket-combo .footer-info {
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--lh-gray-lighter);
    font-size: 8.5px; color: var(--lh-text-light);
    line-height: 1.5;
}
.ticket-combo .footer-info p + p { margin-top: 3px; }
.ticket-combo .footer-info strong { color: var(--lh-text); }
.ticket-combo .footer-meta {
    margin-top: 6px; padding-top: 5px;
    border-top: 1px solid var(--lh-gray-lighter);
    display: flex; justify-content: space-between;
    gap: 12px; font-size: 7.5px; letter-spacing: 0.05em;
    color: var(--lh-text-light); text-transform: uppercase;
    flex-wrap: wrap;
}

/* ============ PRINT ============ */
@page {
    size: A4;
    margin: 5mm 6mm;
}

@media print {
    html, body {
        background: #fff !important;
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
    }
    .app-header,
    .tab-nav,
    .card,
    .alert,
    form,
    .controls,
    .no-print { display: none !important; }

    .app-content,
    .tickets-wrapper {
        max-width: none !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .ticket-combo {
        margin: 0 !important;
        padding: 0 !important;
        max-width: none !important;
        width: 100% !important;
        box-shadow: none !important;
        border: none !important;
        background: #fff !important;
    }

    .ticket-combo .flight-direction,
    .ticket-combo .flight-leg { page-break-inside: avoid; break-inside: avoid; }
    .ticket-combo .booking-details { flex-wrap: wrap; row-gap: 8px; }
}

/* ============ RESPONSIVE ============ */
@media screen and (max-width: 860px) {
    .ticket-combo { padding: 16px; }
    .ticket-combo .agency-header { grid-template-columns: 1fr; text-align: center; gap: 8px; }
    .ticket-combo .issue-info, .ticket-combo .doc-title { text-align: center; }
    .ticket-combo .agency-info { text-align: center; }
    .ticket-combo .booking-details { flex-direction: column; gap: 8px; }
    .ticket-combo .booking-item {
        padding: 4px 0; border-right: none;
        border-bottom: 1px solid var(--lh-gray-lighter);
    }
    .ticket-combo .booking-item:last-child { border-bottom: none; }
    .ticket-combo .flight-leg,
    .ticket-combo .layover { grid-template-columns: 1fr; column-gap: 0; }
    .ticket-combo .airline-info { grid-template-columns: 1fr auto; gap: 6px; }
    .ticket-combo .airline-name-sub, .ticket-combo .brand-tag { display: none; }
    .ticket-combo .route-details { grid-template-columns: 1fr; gap: 10px; }
    .ticket-combo .airport-block,
    .ticket-combo .airport-block.right-align { text-align: left; }
    .ticket-combo .duration-block {
        min-width: auto; display: flex; gap: 10px; align-items: center;
    }
    .ticket-combo .duration-line { flex: 1; }
    .ticket-combo .flight-details {
        grid-column: 1;
        grid-template-columns: 1fr 1fr;
        border-left: none;
        border-top: 1px dashed var(--lh-gray-lighter);
        padding: 8px 2px 0;
    }
    .ticket-combo .policy-info { grid-template-columns: 1fr; gap: 2px; }
    .ticket-combo .kv-panel { grid-template-columns: 1fr; }
}