/* Scoped to the purchase reception page and its existing Administration window. */
@media screen {
  .receipt-design {
    --receipt-bg: color-mix(in srgb,var(--a-base,#eaf1f5) 56%,#dfeaf1);
    --receipt-panel: var(--a-panel, #fff);
    --receipt-soft: var(--a-soft, #eaf1f6);
    --receipt-text: var(--a-text, #132d44);
    --receipt-muted: var(--a-muted, #425c70);
    --receipt-line: var(--a-line, #bdccd9);
    --receipt-action: #315361;
    --receipt-focus: #357999;
    --receipt-control: 32px;
    --receipt-head: 48px;
    color: var(--receipt-text);
  }
  @media (pointer:coarse) {
    .receipt-design { --receipt-control: 44px; --receipt-head: 56px; }
  }
  .window-frame-desktop .receipt-design { --receipt-control: 32px; --receipt-head: 48px; }
  html.appearance504[data-appearance=oled] .receipt-design { --receipt-focus: #78c6ef; --receipt-bg: var(--a-base); }

  :is(.receipt-ribbon, #cajaWorkspace504 .admin-reception-window > .head, dialog.admin-reception-window > .head) {
    position: relative;
    isolation: isolate;
    color: #fff !important;
    background: linear-gradient(110deg,#102e37,#294650 49%,#503858) !important;
    border-bottom: 3px solid #dfbd79 !important;
  }
  :is(.receipt-ribbon, #cajaWorkspace504 .admin-reception-window > .head, dialog.admin-reception-window > .head)::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 90' preserveAspectRatio='none'%3E%3Cpath d='M0 79 C160 93 243 3 422 19 S641 89 794 54 S906 17 1000 22' stroke='%237fd7c5' opacity='.44' fill='none'/%3E%3Cpath d='M0 88 C166 98 268 10 427 29 S646 99 806 62 S918 27 1000 30' stroke='%23efb96a' opacity='.53' fill='none'/%3E%3Cpath d='M0 67 C148 88 228 -7 410 9 S625 79 782 44 S894 4 1000 13' stroke='%23bf9de8' opacity='.43' fill='none'/%3E%3C/svg%3E") center / 100% 100%;
  }
  :is(.receipt-ribbon, #cajaWorkspace504 .admin-reception-window > .head, dialog.admin-reception-window > .head)::after {
    content: "";
    position: absolute;
    pointer-events: none;
    inset: auto 0 -3px;
    height: 3px;
    background: linear-gradient(90deg,#82c8b8,#ecc578,#b794d1);
    background-size: 190% 100%;
    animation: receipt-glow 4.6s ease-out both;
  }
  @keyframes receipt-glow { from { background-position: 100% 0; } to { background-position: 0 0; } }
  @media (prefers-reduced-motion:reduce) {
    :is(.receipt-ribbon, #cajaWorkspace504 .admin-reception-window > .head, dialog.admin-reception-window > .head)::after { animation: none; }
  }
  .admin-reception-frame { background: #eaf1f5 !important; }
  html body #receipt-page-header :is(h1,a,b span) { color: #fff !important; -webkit-text-fill-color: #fff !important; }
  html body #receipt-page-header .reception-brand { color: #f6d58d !important; -webkit-text-fill-color: #f6d58d !important; }
  html[data-fp-embedded] body.receipt-design #receipt-page-header { display: flex !important; }
  .receipt-design.reception-hosted,
  .receipt-design .reception-standalone-body,
  .receipt-design .reception-toolbar {
    background: var(--receipt-bg) !important;
  }
  .receipt-design .reception-standalone-panel { width: min(1500px,calc(100% - 24px)); max-height: none; }
  .receipt-design .reception-standalone-head { flex-basis: var(--receipt-head); }
  .receipt-design .reception-toolbar { padding-block: 8px; }
  .receipt-design .reception-help { background: var(--receipt-panel); border-color: var(--receipt-line); }
  .receipt-design :is(.reception-help > summary, .pcg-guide h2, .pcg-guide h3) { color: var(--receipt-text) !important; }
  .receipt-design .pcg-journey, .receipt-design .pcg-config-hint { display: none !important; }
  .receipt-design .receipt-sr {
    position: absolute !important; clip-path: inset(50%); width: 1px; height: 1px;
    overflow: hidden; white-space: nowrap;
  }

  .receipt-steps {
    display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); list-style: none;
    margin: 0 0 9px; padding: 0; border: 1px solid var(--receipt-line); border-radius: 10px;
    background: var(--receipt-panel); overflow: hidden; min-width: 0;
  }
  .receipt-steps li { display: flex; min-width: 0; gap: 8px; padding: 7px 11px; align-items: center; }
  .receipt-steps li + li { border-inline-start: 1px solid var(--receipt-line); }
  .receipt-steps li[aria-current] { background: #f5e9d1; color: #142d43; box-shadow: inset 0 -2px #bc883a; }
  .receipt-steps li > span {
    display: grid; place-items: center; flex: 0 0 26px; height: 26px; border-radius: 50%;
    font-size: 11px; font-weight: 750; background: var(--receipt-soft); color: var(--receipt-text);
  }
  .receipt-steps li[aria-current] > span { background: #ecd29f; color: #4b3413; }
  .receipt-steps b, .receipt-steps small { display: block; font-size: 12px; line-height: 1.25; }
  .receipt-steps small { font-size: 10px; margin-top: 2px; }

  .receipt-design #purchase66Modal.open,
  .receipt-design #purchaseDocumentsModal.open {
    background: var(--receipt-bg) !important;
    padding: 5px !important;
  }
  html body.receipt-design #purchase66Modal .p68-config-window {
    --receipt-width: min(1180px,calc(100vw - 20px));
    --receipt-height: min(760px,calc(100dvh - 20px));
    position: fixed !important;
    inset: var(--receipt-y,max(10px,calc((100dvh - 760px)/2))) auto auto var(--receipt-x,max(10px,calc((100vw - 1180px)/2))) !important;
    translate: none !important;
    transform: none !important;
    margin: 0 !important;
    width: var(--receipt-width) !important;
    height: var(--receipt-height) !important;
    max-width: calc(100vw - 10px) !important;
    max-height: calc(100dvh - 10px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border: 1px solid var(--receipt-line) !important;
    border-radius: 10px !important;
  }
  html body.receipt-design :is(#purchase66Modal .p68-config-window, #purchaseDocumentsModal .purchase-documents-dialog).receipt-expanded {
    position: fixed !important; inset: 5px !important; width: auto !important; height: auto !important;
    max-width: none !important; max-height: none !important; margin: 0 !important;
  }
  .receipt-design :is(.p68-config-window, .purchase-documents-dialog, .receipt-confirm-dialog) {
    color: var(--receipt-text); background: var(--receipt-panel);
  }
  html body.receipt-design :is(.p68-config-window > .p66-window-head, .purchase-documents-dialog > header, .receipt-subhead) {
    display: flex !important; justify-content: space-between; align-items: center !important;
    flex: 0 0 var(--receipt-head) !important; min-height: var(--receipt-head) !important;
    padding: 0 10px 0 14px !important; box-sizing: border-box; gap: 6px;
    background: #31515f !important; border-bottom: 2px solid #dbb674 !important; color: #fff !important;
    touch-action: none; cursor: grab; user-select: none;
  }
  html body.receipt-design :is(.p68-config-window > .p66-window-head, .purchase-documents-dialog > header, .receipt-subhead) h2 {
    margin: 0 !important; color: #fff !important; font-size: 16px !important; line-height: 1.2;
  }
  .receipt-design :is(.p66-window-head,.purchase-documents-dialog > header) p { color: #e3edf2 !important; margin: 1px 0 0; font-size: 11px; }
  .receipt-window-controls { display: flex; flex: 0 0 auto; gap: 2px; }
  html body.receipt-design :is(.receipt-window-controls,.receipt-subhead) > button {
    display: grid; place-items: center; box-sizing: border-box;
    width: var(--receipt-control) !important; height: var(--receipt-control) !important;
    min-width: var(--receipt-control) !important; min-height: var(--receipt-control) !important;
    padding: 0 !important; border: 1px solid transparent !important; border-radius: 7px !important;
    background: transparent !important; color: #fff !important; font-size: 20px; cursor: pointer;
  }
  html body.receipt-design :is(.receipt-window-controls,.receipt-subhead) > button:hover { background: #ffffff25 !important; }
  .receipt-design .receipt-restore { position: fixed; z-index: 1800; inset: auto 10px 10px auto; min-height: var(--receipt-control); }

  html body.receipt-design #purchase66Modal .p66-window-body {
    display: grid !important; align-content: start; align-items: start;
    grid-template-columns: minmax(0,1fr) minmax(235px,26%) !important;
    grid-template-rows: max-content max-content minmax(max-content,1fr);
    gap: 9px 12px !important; padding: 10px 12px !important; overflow: auto;
    color: var(--receipt-text); background: var(--receipt-bg) !important;
  }
  .receipt-design .p66-window-body > .receipt-steps { grid-area: 1 / 1 / auto / -1; margin: 0; }
  .receipt-design #p68CostPreview { display: contents; }
  .receipt-design .p66-window-body > .p66-form-grid { grid-area: 2 / 1; }
  .receipt-design .receipt-summary { grid-area: 2 / 2; }
  .receipt-design :is(.receipt-table,.p68-cost-preview-empty) { grid-area: 3 / 1; }
  .receipt-design .receipt-documents { grid-area: 3 / 2; }
  .receipt-design :is(.p66-form-grid, .receipt-summary, .receipt-table, .receipt-documents, .p68-cost-preview-empty) {
    min-width: 0; border: 1px solid var(--receipt-line); border-radius: 9px;
    background: var(--receipt-panel); color: var(--receipt-text);
  }
  html body.receipt-design .p66-form-grid {
    grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px 8px !important;
    padding: 0 9px 7px !important; align-items: start; margin: 0 !important;
  }
  .receipt-design .p66-form-grid > .wide { grid-column: span 2 !important; }
  html body.receipt-design .p66-form-grid .receipt-form-heading {
    grid-column: 1/-1; padding: 5px 0; margin: 0; font-size: 15px;
    color: var(--receipt-text) !important; background: transparent !important; border: 0 !important;
    border-bottom: 1px solid var(--receipt-line) !important;
  }
  .receipt-design .p66-form-grid label { min-width: 0; font-size: 11px !important; color: var(--receipt-text) !important; line-height: 1.25; }
  html body.receipt-design :is(.p66-form-grid,.p66-workspace,.purchase-documents-body) :is(input:not([type=file],[type=checkbox],[type=radio]),textarea,select) {
    box-sizing: border-box; min-height: var(--receipt-control); height: auto; min-width: 0; width: 100%;
    color: var(--receipt-text) !important; background: var(--receipt-panel) !important;
    border: 1px solid var(--receipt-line) !important; outline: 0 !important; box-shadow: none !important;
    border-radius: 7px !important; padding: 5px 8px !important;
  }
  html body.receipt-design :is(.p66-form-grid,.p66-workspace,.purchase-documents-body) :is(input:not([type=file]),textarea,select):focus {
    border-color: var(--receipt-focus) !important; outline: 0 !important; box-shadow: none !important;
  }
  .receipt-design .p66-form-grid label input { margin-top: 2px; }
  .receipt-design .p66-detected { padding: 3px 0 !important; background: transparent !important; color: var(--receipt-muted) !important; border: 0 !important; }
  .receipt-form-footer { grid-column: 1 / -1; display: flex; gap: 6px 12px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
  .receipt-design .receipt-extra { min-width: min(185px,100%); font-size: 12px; }
  .receipt-design .receipt-extra > summary { cursor: pointer; padding: 5px 0; color: var(--receipt-text); }
  .receipt-design #p66Balance { padding: 4px 7px !important; font-size: 11px; margin: 0 !important; }
  .receipt-summary, .receipt-documents { padding: 9px 10px; }
  .receipt-summary h3, .receipt-documents h3, .receipt-table h3 { margin: 0; font-size: 13px; line-height: 1.2; }
  .receipt-summary > strong { display: block; margin: 4px 0 6px; font-size: 23px; line-height: 1.15; }
  .receipt-summary dl { margin: 0; }
  .receipt-summary dl div { display: flex; justify-content: space-between; gap: 5px; font-size: 11px; padding-block: 3px; border-top: 1px solid var(--receipt-line); }
  .receipt-summary dd { margin: 0; font-weight: 650; text-align: right; }
  .receipt-table { overflow: hidden; }
  .receipt-table > header { display: flex; gap: 8px; justify-content: space-between; padding: 8px 9px; }
  .receipt-table > header span { color: var(--receipt-muted); font-size: 11px; }
  .receipt-table-scroll { overflow: auto; min-height: 110px; max-height: max(220px,calc(100dvh - 340px)); }
  .receipt-table table { width: 100%; min-width: 510px; border-spacing: 0; font-size: 12px; }
  .receipt-table :is(th,td) { text-align: start; padding: 6px 8px; }
  .receipt-table thead th { position: sticky; top: 0; background: var(--receipt-soft); }
  .receipt-table tbody th { font-weight: 650; }
  .receipt-table tbody tr:nth-child(even) { background: var(--receipt-soft); }
  .receipt-table :is(th,td):nth-child(n+3) { text-align: end; white-space: nowrap; }
  .receipt-design .receipt-documents .p66-upload-zone {
    display: grid; gap: 7px; padding: 6px 0 !important; margin: 0 !important;
    border: 0 !important; background: transparent !important; color: var(--receipt-text) !important;
  }
  .receipt-documents .p66-upload-zone small { overflow-wrap: anywhere; }
  .receipt-documents .p68-document-row { grid-template-columns: minmax(0,1fr) auto; gap: 4px; padding: 4px 6px; }
  .receipt-documents .p68-document-row small { grid-column: 1/-1; grid-row: 2; }
  .receipt-documents .p66-upload-zone > div { min-width: 0; }
  .receipt-documents details > summary { color: var(--receipt-muted); font-size: 12px; cursor: pointer; padding-block: 3px; }
  .receipt-design .receipt-documents .p66-file-btn { width: 100% !important; min-width: 0; padding: 6px 8px !important; box-sizing: border-box; }
  .receipt-design :is(.receipt-documents,.purchase-documents-dialog) :is(.purchase-document-widget,.purchase-document-order) {
    background: var(--receipt-panel) !important; color: var(--receipt-text) !important; border-color: var(--receipt-line);
    padding: 7px; margin-block: 5px; box-shadow: none;
  }
  .receipt-design :is(.purchase-document-widget,.purchase-documents-body) :is(small,p,[role=status]) { color: var(--receipt-muted) !important; }
  .receipt-design .purchase-document-layout { gap: 9px; margin-top: 8px; }
  html body.receipt-design #purchaseDocumentsModal .purchase-documents-dialog {
    position: fixed; inset: var(--receipt-y,10px) auto auto var(--receipt-x,max(10px,calc((100vw - 960px)/2))) !important;
    margin: 0; width: min(960px,calc(100vw - 24px)) !important; height: auto !important;
    max-height: calc(100dvh - 20px) !important; box-sizing: border-box; border-radius: 10px !important;
  }
  .receipt-design .purchase-documents-body { background: var(--receipt-bg); padding: 9px 11px; }
  html body.receipt-design .receipt-confirm-dialog {
    position: fixed; inset: var(--receipt-y,max(7px,calc((100dvh - 195px)/2))) auto auto var(--receipt-x,max(7px,calc((100vw - 450px)/2))) !important;
    margin: 0; padding: 0; width: min(450px,calc(100vw - 18px)) !important;
    height: auto !important; max-height: calc(100dvh - 18px) !important;
    border: 1px solid var(--receipt-line) !important; border-radius: 10px !important; overflow: auto; box-sizing: border-box;
  }
  html body.receipt-design .receipt-confirm-dialog::backdrop { background: var(--receipt-bg) !important; backdrop-filter: none; }
  .receipt-confirm-dialog > p { padding: 0 14px; overflow-wrap: anywhere; }
  .receipt-confirm-dialog > form { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; padding: 5px 12px 12px; }
  .receipt-confirm-dialog > form button { min-height: var(--receipt-control); }

  html body.receipt-design .purchase66 { height: auto !important; min-height: 0 !important; gap: 7px; }
  .receipt-design .purchase66 > .receipt-steps { margin: 0; }
  html body.receipt-design .purchase66 .p66-topbar { padding: 5px 8px !important; gap: 7px; }
  html body.receipt-design .purchase66 .p66-title { padding: 0 !important; }
  html body.receipt-design .purchase66 .p66-title h1 { font-size: 15px !important; }
  html body.receipt-design .p66-progress { display: flex !important; flex-wrap: wrap; margin: 0 !important; align-items: center; gap: 4px 9px !important; }
  html body.receipt-design .p66-stat { min-height: 0 !important; padding: 4px 7px !important; border-left: 0 !important; box-shadow: none !important; }
  .receipt-design .p66-progress { border: 1px solid var(--receipt-line); border-radius: 9px; background: var(--receipt-panel); padding: 3px 8px; }
  .receipt-design .p66-progress progress { width: clamp(100px,24%,260px); margin-inline-start: auto; accent-color: #5e987e; height: 8px; }
  html body.receipt-design .p66-workspace { display: grid !important; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); height: auto !important; min-height: 0 !important; align-items: start; }
  html body.receipt-design :is(.p66-panel,.p66-item,.p66-reviewed-item) {
    min-height: 0 !important; height: auto !important; padding: 7px !important; border-color: var(--receipt-line);
    background: var(--receipt-panel); color: var(--receipt-text); box-shadow: none; border-radius: 9px;
  }
  html body.receipt-design .p66-panel-head { padding: 1px 1px 5px !important; gap: 6px; }
  .receipt-design .p66-panel-head h2 { margin: 0; font-size: 15px; }
  html body.receipt-design :is(.p66-search-wrap,.p66-list) {
    min-height: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important;
    background: transparent !important;
  }
  .receipt-design .p66-search-wrap { margin-bottom: 6px; }
  .receipt-design .p66-list { max-height: none !important; overflow: visible !important; }
  .receipt-design :is(.p66-list [hidden],.p66-search-status:not(.show)) { display: none !important; }
  html body.receipt-design .p66-item-head { padding: 0 0 4px !important; }
  html body.receipt-design .p66-compact-grid {
    gap: 3px !important; padding: 3px 4px !important; margin: 0 0 4px !important;
    background: var(--receipt-soft) !important; border-radius: 6px;
  }
  html body.receipt-design :is(.p66-compact-value,.p66-count,.p66-diff-cell,.p66-description-direct) {
    border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important;
    padding: 2px 4px !important;
  }
  .receipt-design .p66-reviewed-item p { margin: 4px 0; }
  html body.receipt-design :is(.p66-review,.p66-confirm,#p66Start) { background: var(--receipt-action) !important; color: #fff !important; min-height: var(--receipt-control); }
  .receipt-design :is(.p66-review,.p66-confirm,#p66Start):disabled { opacity: .55; }
  html body.receipt-design :is(.p66-bottom,.p66-window-foot) { padding: 6px 10px !important; }
  .receipt-design .p66-window-foot { flex-wrap: wrap; }

  @container (max-width: 820px) {
    html body.receipt-design #purchase66Modal .p66-window-body { grid-template-columns: minmax(0,1fr) minmax(170px,30%) !important; }
    html body.receipt-design .p66-form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  }
  @container (max-width: 600px) {
    html body.receipt-design #purchase66Modal .p66-window-body { grid-template-columns: minmax(0,1fr) !important; grid-template-rows: none; grid-auto-rows: max-content; }
    .receipt-design :is(.p66-window-body > .p66-form-grid,.receipt-summary,.receipt-table,.p68-cost-preview-empty,.receipt-documents) { grid-area: auto; }
    .receipt-design .p66-window-body:has(.p68-cost-preview-empty) .receipt-documents { grid-row: 2; }
    .receipt-design .receipt-table-scroll { max-height: 280px; }
  }
  @media (max-width: 700px) {
    .receipt-design .reception-standalone-panel { width: 100%; margin: 0; }
    html body.receipt-design .p66-workspace { grid-template-columns: minmax(0,1fr); }
    .receipt-steps li { padding: 5px; gap: 4px; }
    .receipt-steps b { font-size: 10px; }
    .receipt-steps small, .receipt-design :is(.p66-window-head,.purchase-documents-dialog > header) p { display: none; }
    .receipt-steps li > span { flex-basis: 19px; height: 19px; font-size: 9px; }
  }
}