.receipt-page {
    width: min(1080px, calc(100% - 40px));
    margin: 28px auto 120px;
    color: #17323f;
    letter-spacing: 0;
}

.receipt-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 0 0 24px;
    border-bottom: 3px solid #007c91;
}

.receipt-heading h1 { margin: 4px 0 6px; font-size: 30px; line-height: 1.2; }
.receipt-heading p { margin: 0; color: #536873; font-size: 15px; }
.receipt-eyebrow { color: #a54b19; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.receipt-link, .receipt-download { color: #006b7d; font-weight: 700; text-decoration: none; white-space: nowrap; }

.receipt-form, .receipt-track-form, .receipt-results {
    margin-top: 24px;
    padding: 24px;
    border: 1px solid #c9d6dc;
    border-radius: 6px;
    background: #ffffff;
}

.receipt-form fieldset { margin: 0 0 28px; padding: 0; border: 0; }
.receipt-form legend { width: 100%; margin: 0 0 18px; padding: 0 0 10px; border-bottom: 1px solid #dbe4e8; color: #17323f; font-size: 20px; font-weight: 700; }
.receipt-form legend span { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; margin-right: 8px; border-radius: 50%; color: #fff; background: #007c91; font-size: 14px; }
.receipt-grid { display: grid; gap: 16px; }
.receipt-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.receipt-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.receipt-grid--four label:nth-last-child(-n+2) { grid-column: span 2; }

.receipt-form label, .receipt-track-form label { color: #253f4b; font-size: 14px; font-weight: 700; }
.receipt-form label small, .receipt-track-form label small { color: #667b85; font-size: 12px; font-weight: 400; }
.receipt-form label > small, .receipt-track-form label > small { display: block; margin-top: 2px; line-height: 1.35; }
.receipt-form input, .receipt-form select, .receipt-track-form input {
    box-sizing: border-box;
    width: 100%;
    min-height: 42px;
    margin-top: 6px;
    padding: 9px 11px;
    border: 1px solid #aebfc7;
    border-radius: 4px;
    background: #fff;
    color: #17323f;
    font: inherit;
}
.receipt-form input:focus, .receipt-form select:focus, .receipt-track-form input:focus { outline: 3px solid rgba(0, 124, 145, .16); border-color: #007c91; }
.receipt-readonly { min-height: 64px; padding: 12px 14px; border-left: 3px solid #d2a106; background: #f6f8f9; }
.receipt-readonly span, .receipt-readonly small { display: block; color: #637781; font-size: 12px; }
.receipt-readonly strong { display: block; margin: 4px 0; }
.receipt-check { display: flex; align-items: center; gap: 8px; margin: 18px 0 12px; }
.receipt-check input { width: 18px; min-height: 18px; margin: 0; accent-color: #007c91; }
.receipt-agent { max-width: 520px; margin-bottom: 18px; }
.receipt-help { margin: -6px 0 16px; color: #5d717b; }
.receipt-invoice { margin-bottom: 14px; padding: 18px; border-left: 3px solid #007c91; background: #f4f7f8; }
.receipt-invoice__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.receipt-icon-button { width: 36px; height: 36px; border: 1px solid #c1cdd2; border-radius: 4px; color: #a3382d; background: #fff; }
.receipt-icon-button:disabled { color: #9aa8ae; opacity: .55; }
.receipt-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 18px; border-top: 1px solid #dbe4e8; }
.receipt-button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border: 1px solid #006b7d; border-radius: 4px; font-weight: 700; text-decoration: none; }
.receipt-button--primary { color: #fff; background: #006b7d; }
.receipt-button--secondary { color: #006b7d; background: #fff; }
.receipt-alert { margin-top: 20px; padding: 13px 16px; border-left: 4px solid; }
.receipt-alert--error { border-color: #b43b32; background: #fbeeed; color: #79251f; }
.receipt-alert--success { border-color: #268354; background: #ecf7f1; color: #1d6541; }

.receipt-track-form { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 14px; }
.receipt-results h2 { margin: 0 0 16px; font-size: 21px; }
.receipt-table-wrap { overflow-x: auto; }
.receipt-table { width: 100%; border-collapse: collapse; }
.receipt-table th, .receipt-table td { padding: 11px 10px; border-bottom: 1px solid #dbe4e8; text-align: left; vertical-align: top; }
.receipt-table th { color: #506670; font-size: 12px; text-transform: uppercase; }
.receipt-status { display: inline-block; padding: 3px 7px; border-radius: 3px; background: #e8eef1; font-weight: 700; white-space: nowrap; }
.receipt-status--submitted, .receipt-status--awaiting-confirmation { color: #775a00; background: #fff4cc; }
.receipt-status--confirmed, .receipt-status--receipted, .receipt-status--receipted-via-email { color: #1d6541; background: #e1f4e9; }
.receipt-empty { padding: 20px; border-left: 3px solid #d2a106; background: #f6f8f9; }
.receipt-empty p { margin: 5px 0 0; }
.receipt-note { margin-top: 18px; padding: 16px 18px; border-left: 3px solid #d2a106; background: #f6f8f9; }
.receipt-note p { margin: 5px 0 0; }

@media (max-width: 900px) {
    .receipt-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .receipt-track-form { grid-template-columns: 1fr; }
    .receipt-track-form .receipt-button { width: 100%; }
}

@media (max-width: 640px) {
    .receipt-page { width: min(100% - 24px, 1080px); margin-top: 16px; }
    .receipt-heading { align-items: flex-start; flex-direction: column; }
    .receipt-heading h1 { font-size: 25px; }
    .receipt-form, .receipt-track-form, .receipt-results { padding: 16px; }
    .receipt-grid--two, .receipt-grid--four { grid-template-columns: 1fr; }
    .receipt-grid--four label:nth-last-child(-n+2) { grid-column: auto; }
    .receipt-actions { align-items: stretch; flex-direction: column-reverse; }
}