/* Order form document styles (screen preview + print/PDF). Everything is scoped to .of */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.of { --ink: #1f2a44; --line: #1f2a44; --band: #f4f4f6; --muted: #4b5568; width: 794px; box-sizing: border-box; padding: 40px 48px 48px; background: #fff; color: var(--ink);
  font: 11px/1.45 'Open Sans', Arial, Helvetica, sans-serif; }
.of * { box-sizing: border-box; }
.of-head { margin-bottom: 28px; }
.of-logo { display: block; height: 24px; width: auto; margin: 0 0 18px auto; }
.of-title { margin: 0; text-align: center; font-size: 20px; font-weight: 600; letter-spacing: .2px; }
.of-parties { display: grid; grid-template-columns: 1fr max-content; gap: 24px 48px; margin-bottom: 18px; }
.of-strong { font-weight: 700; }
.of-gap { margin-top: 16px; }
.of-meta { margin: 8px 0 20px; color: var(--ink); }
.of-ph { color: #6b7280; font-style: italic; }
.of-totalbar { display: flex; justify-content: space-between; width: 62%; border-bottom: 2px solid var(--line); padding: 4px 0; margin-bottom: 14px; font-size: 12px; }
.of-scroll { overflow-x: auto; }
.of-table { width: 100%; border-collapse: collapse; border: 1.5px solid var(--line); font-size: 10px; }
.of-table th, .of-table td { padding: 6px 7px; text-align: left; vertical-align: top; border-bottom: 1px solid #c9ccd6; }
.of-table thead th { background: var(--band); font-size: 9px; text-transform: uppercase; letter-spacing: .3px; border-bottom: 1.5px solid var(--line); }
.of-table .r { text-align: right; white-space: nowrap; }
.of-name { font-weight: 500 !important; }
.of-name small { display: block; color: var(--muted); font-weight: 400; font-size: 9px; }
.of-summary th { font-weight: 500; }
.of-band th { background: var(--band); text-transform: uppercase; font-size: 9px; letter-spacing: .3px; border-top: 1.5px solid var(--line); }
.of-empty { text-align: center !important; color: var(--muted); padding: 20px !important; }
.of-grand { display: flex; justify-content: space-between; width: 46%; margin: 14px 0 22px auto; border: 1.5px solid var(--line); background: var(--band); padding: 8px 14px; font-size: 12px; }
.of-box { border: 1.5px solid var(--line); padding: 12px 16px; margin-bottom: 16px; }
.of-box h2 { margin: 0 0 6px; font-size: 11px; font-weight: 600; }
.of-pre { margin: 0; white-space: pre-wrap; min-height: 28px; }
.of-terms { font-size: 9px; line-height: 1.4; }
.of-terms h2 { font-weight: 600; margin-bottom: 8px; font-size: 10px; }
.of-terms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; }
.of-terms-col { display: flex; flex-direction: column; gap: 10px; }
.of-term { break-inside: avoid; }
.of-terms h3 { margin: 0 0 2px; font-size: 9px; font-weight: 600; }
.of-terms p { margin: 0; }
.of-terms .of-ver { margin: 12px 0 0; color: var(--muted); }
.of-signs { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 30px; break-inside: avoid; }
.of-sig { border-top: 1.5px solid var(--line); padding-top: 6px; min-height: 64px; display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.of-sig-name { font-family: "Segoe Script", "Brush Script MT", "Snell Roundhand", cursive; font-size: 20px; line-height: 1.2; order: 2; }
.of-sig-label { font-size: 9.5px; color: var(--muted); order: 1; }
.of-sig { flex-direction: column; }
.of-sig-name { order: 0; margin-bottom: 4px; }
.of-sig-label { order: 1; }
.of-sig { border-top: 0; border-bottom: 1.5px solid var(--line); padding: 0 0 6px; min-height: 0; }
.of-sig-label { margin-top: 0; }

@page { size: A4; margin: 12mm; }
@media print {
  html, body { background: #fff !important; }
  .of { width: 100%; padding: 0; }
  .of-table tr, .of-box h2, .of-grand, .of-totalbar { break-inside: avoid; }
  .of-scroll { overflow: visible; }
}

/* signature block: compact */
.of-signs { gap: 32px; margin-top: 16px; grid-template-columns: minmax(0, 240px) minmax(0, 240px); }
.of-sig-name { font-size: 14px; font-style: italic; line-height: 1.25; margin-bottom: 3px; }
.of-sig { padding-bottom: 4px; border-bottom-width: 1px; }
.of-sig-label { font-size: 9px; }

/* print: keep every border inside the printable area (Chrome clips half of a border that sits exactly on the page edge) */
@media print {
  .of { padding: 0 3px 0 3px; }
}

/* breathing room between the products table and the boxes below it (the old bottom Total box used to provide it) */
.of-scroll { margin-bottom: 14px; }
.of-box { margin-bottom: 14px; }

/* last row of the products table: same dark border as the rest of the table */
.of-table tbody:last-child tr:last-child th, .of-table tbody:last-child tr:last-child td { border-bottom: 1.5px solid var(--line); }

/* terms: a vertical divider between the left and right columns, and a box that keeps its border when it runs onto the next page */
.of-terms-col:first-child { padding-right: 18px; }
.of-terms-col + .of-terms-col { padding-left: 18px; border-left: 1px solid var(--line); }
.of-box { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@media print {
  .of-terms { break-inside: auto; }
  .of-term, .of-signs { break-inside: avoid; }
}

/* signatures: a touch smaller */
.of-sig-name { font-size: 12.5px; }
.of-signs { margin-top: 14px; grid-template-columns: minmax(0, 220px) minmax(0, 220px); }

/* Shoot Production Cost's HMU and outfit questions: sub-rows under the line, label left, cost under the net price, normal text colour */
.of-table tr.of-sub th, .of-table tr.of-sub td { border-top: 0; border-bottom: 0; padding-top: 0; padding-bottom: 0; line-height: 1.25; }
.of-table tr.of-sub-last th, .of-table tr.of-sub-last td { border-bottom: 1px solid #c9ccd6; padding-bottom: 6px; }
.of-table tr.has-sub > * { border-bottom: 0; padding-bottom: 2px; }
.of-table .of-extra { color: #000; font-weight: 400 !important; font-size: 9px; line-height: 1.3; }  /* pure black, smaller than the 10px product name */

/* a product's note ("*Travel Included") is set in italics */
.of-name small.of-note { font-style: italic; }

/* the TrueFan address block (right-hand party) is right-aligned */
.of-parties > div:last-child { text-align: right; }

/* Payment due now: a lighter bar directly above the Total bar (recurring billing only) */
.of-totalbar.of-duenow { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; color: var(--muted); }
.of-totalbar.of-duenow strong { color: var(--ink); }

/* customer signature (right-hand column) */
.of-sig-blank { min-height: 1.25em; }
.of-sig-note { font-size: 8.5px; color: var(--muted); margin-top: 1px; }
.of-signs { align-items: start; grid-template-columns: minmax(0, 220px) minmax(0, 280px); }
.of-sig-note { margin-top: 3px; }
/* the customer's signature sits in the bottom-right corner of the form */
.of-signs { justify-content: space-between; }
.of-sig-col { grid-column: 2; justify-self: end; width: 100%; max-width: 280px; }
.of-sig-col-low { grid-row: 1 / span 2; align-self: end; }