@font-face { font-family: ContractDubai; src: url('assets/fonts/dubai/Dubai-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
.rental-contract-page { background:var(--cloud); color:var(--ink); }
.rental-contract-page a { color:var(--blue); }
.contract-embedded { background:var(--white); }
.contract-embedded .contract-toolbar,.contract-embedded #contractContent > h1 { display:none; }
.contract-embedded .contract-workspace { width:100%; margin:0; }
.reservation-operation-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-block:16px; }
.reservation-operation-tabs [aria-selected="true"] { background:var(--blue); color:var(--white); }
.contract-workspace [data-operation-pane][hidden] { display:none; }
.reservation-invoice { background:var(--white); padding:24px; color:var(--ink); }
.reservation-invoice table { width:100%; border-collapse:collapse; }
.reservation-invoice th,.reservation-invoice td { text-align:start; border-bottom:1px solid var(--line); padding:12px; }
.contract-toolbar,.contract-workspace { width:min(1100px,calc(100% - 24px)); margin:20px auto; }
.contract-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.contract-workspace section { padding:20px; margin-block:18px; background:var(--white); border-radius:18px; }
.contract-workspace h1 { font-size:28px; }
.contract-workspace h2 { font-size:22px; margin:0 0 16px; }
.contract-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.checkout-contract-details { margin-block:16px; }
.checkout-contract-details summary { cursor:pointer; padding-block:12px; font-size:16px; }
#additionalDrivers fieldset,[data-driver-card] { margin-block:16px; border:1px solid var(--line); border-radius:12px; padding:16px; min-width:0; }
#additionalDrivers button,[data-remove-driver],[data-add-driver] { padding:10px 16px; min-height:44px; margin-block:10px; border:1px solid var(--line); border-radius:8px; color:var(--blue); background:var(--white); font:inherit; }
.checkout-contract-details .contract-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
.contract-fields label { display:flex; flex-direction:column; gap:6px; min-width:0; font-size:16px; }
.contract-fields :is(input,select,textarea,.fancy-select-trigger) { width:100%; box-sizing:border-box; min-height:44px; padding:10px; border:1px solid var(--line); border-radius:8px; font:inherit; background:var(--white); color:var(--ink); }
.contract-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-block:16px; }
.contract-data-hint { margin:0; font-size:.9em; color:var(--muted,#5e686b); }
.contract-paper-adjust { display:flex; flex-wrap:wrap; gap:8px 16px; margin:12px 0 0; padding:10px 12px; border:1px solid var(--line,#d5d7dc); border-radius:10px; }
.contract-paper-adjust legend { padding:0 6px; font-size:.9em; font-weight:700; }
.contract-paper-adjust label { display:grid; gap:4px; font-size:.9em; }
.contract-paper-adjust input { width:120px; min-height:40px; padding:6px 10px; border:1px solid var(--control-border,#868d97); border-radius:8px; font:inherit; }
.contract-workspace button,.contract-toolbar button,.contract-actions a { min-height:44px; padding:10px 16px; border:1px solid var(--line); border-radius:8px; background:var(--white); color:var(--blue-dark); font:inherit; cursor:pointer; }
.contract-workspace button:disabled { opacity:.5; cursor:wait; }
.contract-workspace .primary { background:var(--blue); color:var(--white); }
.contract-workspace [role=status] { overflow-wrap:anywhere; }
.contract-workspace .missing { color:var(--amber-ink); background:var(--amber-soft); padding:12px; border-radius:8px; }
.contract-history { display:grid; gap:10px; list-style:none; padding:0; }
.contract-history li { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:12px; border-bottom:1px solid var(--line); }
/* Receipting a payment and reaching the invoice belong beside the payments themselves, not in another section.
   Both are scoped past `.contract-workspace button`, which would otherwise reimpose its own shape on them. */
.payment-history-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; }
.payment-history-head h3 { margin:0; }
.contract-workspace :is(.payment-invoice-action,.payment-receipt-link) { display:inline-flex; align-items:center; gap:6px; padding:0 14px; border:1px solid var(--line); border-radius:999px; background:var(--white); color:var(--blue-dark); font:700 14px/1 inherit; text-decoration:none; cursor:pointer; }
.contract-workspace .payment-invoice-action { min-height:40px; }
.contract-workspace .payment-receipt-link { min-height:36px; font-size:13px; }
.contract-workspace :is(.payment-invoice-action,.payment-receipt-link) svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; }
/* Narrow rows wrap, and where the receipt lands then depends on how much wrapped with it; an auto margin puts
   it at the end of whatever line it falls on. Not on wide rows, where it would cancel the row's spacing. */
@media (max-width:700px) { .contract-history li .payment-receipt-link { margin-inline-start:auto; } }
/* Admin only: delete a recorded payment. Quiet until reached for; the reason form opens under the row. */
.contract-workspace .payment-delete { min-height:36px; padding:0 14px; border:1px solid var(--red-line,#f4c7c3); border-radius:999px; background:var(--white,#fff); color:var(--red,#b22d3b); font-size:13px; font-weight:700; }
.contract-workspace .payment-delete:is(:hover,:focus-visible) { background:var(--red-soft,#fff1f0); }
.contract-history .payment-delete-form { flex-basis:100%; display:grid; gap:8px; padding:12px; border:1px solid var(--red-line,#f4c7c3); border-radius:12px; background:var(--red-soft,#fff1f0); }
.contract-history .payment-delete-form label { display:grid; gap:6px; font-weight:700; font-size:14px; }
.contract-history .payment-delete-form textarea { width:100%; box-sizing:border-box; min-height:64px; padding:8px 10px; border:1px solid var(--control-border,#868d97); border-radius:10px; font:inherit; background:#fff; }
.payment-delete-actions { display:flex; flex-wrap:wrap; gap:8px; }
/* :root and the element name outrank apple-buttons.css, which paints every form submit button blue. */
:root .contract-workspace .payment-delete-actions button.danger, :root .contract-workspace .payment-delete-actions button.danger:is(:hover,:focus-visible) { background:var(--red,#b22d3b); border-color:var(--red,#b22d3b); color:#fff; }
.payment-delete-note { margin:0; color:var(--red,#b22d3b); font-size:13px; }
.payment-delete-note:empty { display:none; }
.contract-summary { display:flex; flex-wrap:wrap; gap:12px 24px; }
[data-contract-overview][hidden] { display:none!important; }
.contract-summary span { overflow-wrap:anywhere; }
.contract-link { display:inline-flex; padding:8px; color:var(--blue); vertical-align:middle; }
.contract-link svg,.contract-workspace button svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; vertical-align:middle; }
.contract-print-stage { overflow:auto; }
.contract-workspace .contract-sheet { padding:0; margin:16px auto; border-radius:0; position:relative; width:210mm; height:297mm; background:var(--white); color:black; overflow:hidden; }
.contract-sheet > img { position:absolute; inset:0; width:100%; height:100%; }
.contract-value { position:absolute; display:flex; align-items:center; justify-content:center; text-align:center; font-family:ContractDubai,Arial,sans-serif; font-size:9pt; font-weight:700; line-height:1.12; overflow-wrap:anywhere; white-space:pre-wrap; }
.contract-value bdi { max-width:100%; }
/* The details sit in two layers over the first sheet: the contract's own layout, and the office's pre-printed form's
   ("Print data only"). The second keeps its layout, so its values are measured and fitted too, but is never seen
   except in that print. */
.contract-form-values,.contract-paper-values { position:absolute; inset:0; }
.contract-paper-values { visibility:hidden; }
/* The recorded payment's type beside the figure. The fixed form has no room for a second line, so it is
   smaller than the amount and clipped rather than allowed to spill into the neighbouring printed fields.
   One method always fits; a figure whose payments used several different methods ellipsises, which no smaller
   font fixes - the amount's own width is fixed, so the box cannot hold two labels at any legible size. */
.contract-value-type { font-size:7pt; font-weight:600; margin-inline-start:.4em; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.driver-annex { box-sizing:border-box; padding:16mm!important; font-family:Dubai,sans-serif; background:var(--white); color:var(--ink); }
.driver-annex .detail-list { display:grid; grid-template-columns:1fr 1fr; gap:10px 24px; }
.driver-annex dt { font-weight:bold; font-size:12pt; }
.driver-annex dd { margin:0; overflow-wrap:anywhere; font-size:11pt; }
.contract-version { position:absolute; top:16%; left:5%; font:7pt Arial,sans-serif; color:#444; }
@media(max-width:700px) { .contract-fields,.checkout-contract-details .contract-fields { grid-template-columns:1fr; } .contract-workspace section { padding:14px; } }
@media print {
 @page rental { size:A4 portrait; margin:0; }
 body.rental-contract-page { margin:0!important; padding:0!important; background:var(--white)!important; }
 .contract-toolbar,#contractMessage,.contract-no-print { display:none!important; }
 .contract-workspace,#contractContent,.contract-print-stage { margin:0!important; padding:0!important; width:auto!important; overflow:visible!important; }
 .contract-workspace .contract-sheet { page:rental; margin:0!important; break-after:page; page-break-after:always; print-color-adjust:exact; -webkit-print-color-adjust:exact; }
 .contract-workspace .contract-sheet:last-child { break-after:auto; page-break-after:auto; }
 body:not(.contract-print-ready) .contract-print-stage { display:none!important; }
 /* Print data only: the office feeds its pre-printed form, so only the first sheet's details print, at the form's own
    positions (the paper layer) - no artwork, labels, borders or bands, and no other sheet. */
 body.contract-data-only .contract-print-stage > .contract-sheet:not(:first-child) { display:none!important; }
 body.contract-data-only .contract-workspace .contract-sheet:first-child { background:none!important; break-after:auto; page-break-after:auto; }
 body.contract-data-only .contract-sheet .crisp-form { display:none!important; }
 body.contract-data-only .contract-form-values { display:none!important; }
 /* Trial prints on the real form (2026-10-05) sat above the lines; the owner tuned the fit at 8.1 mm, so every data-only
    print starts 8.1 mm lower than the scan measured. The Down/Right boxes on the contract page fine-tune per computer on top. */
 body.contract-data-only .contract-paper-values { visibility:visible; transform:translate(var(--paper-right,0mm),calc(8.1mm + var(--paper-down,0mm))); }
 body.contract-data-only .contract-value { color:#000; }
}

/* ── Screen-only presentation: card surfaces, motion and glow. Nothing here can reach paper. ── */
@media screen {
  /* Standalone page follows the site pattern (white page, grey cards, white fields). Embedded inside the
     reservation page it already sits in a grey panel, so its surfaces are left alone there. */
  .rental-contract-page:not(.contract-embedded) { background: var(--canvas, #fff); }
  .rental-contract-page:not(.contract-embedded) .contract-workspace section:not(.contract-sheet) { background: var(--card, #f0f2f5); border: 1px solid transparent; border-radius: 20px; transition: border-color 220ms ease, box-shadow 260ms ease; }
  .rental-contract-page:not(.contract-embedded) .contract-workspace section:not(.contract-sheet):is(:hover, :focus-within) { border-color: var(--card-hover-line); box-shadow: var(--card-hover-shadow); }
  .rental-contract-page:not(.contract-embedded) .contract-summary { padding: 16px 20px; border-radius: 20px; background: var(--card, #f0f2f5); }

  /* Sections arrive one after another; each heading's accent draws itself in. */
  .contract-workspace #contractContent > *, .contract-workspace #contractContent > form > section { animation: card-rise 460ms var(--card-ease, ease) backwards; }
  .contract-workspace #contractContent > :nth-child(2) { animation-delay: 60ms; } .contract-workspace #contractContent > :nth-child(3) { animation-delay: 120ms; }
  .contract-workspace #contractContent > :nth-child(4) { animation-delay: 180ms; } .contract-workspace #contractContent > :nth-child(5) { animation-delay: 240ms; }
  .contract-workspace #contractContent > :nth-child(n+6) { animation-delay: 300ms; }
  .contract-workspace section:not(.contract-sheet) > h2 { position: relative; padding-inline-start: 16px; }
  .contract-workspace section:not(.contract-sheet) > h2::before { content: ""; position: absolute; inset-block: 4px; inset-inline-start: 0; width: 4px; border-radius: 4px; background: var(--blue); animation: accent-draw 620ms var(--card-ease, ease) 320ms backwards; }
  @keyframes accent-draw { from { clip-path: inset(0 0 100% 0 round 4px); } to { clip-path: inset(0 round 4px); } }
  #contractMessage:not(:empty) { animation: price-in 320ms var(--card-ease, ease); }

  /* Glow 1 — fields: a soft blue halo instead of a hard outline. */
  .contract-workspace .contract-fields :is(input, select, textarea, .fancy-select-trigger) { border-radius: 12px; transition: border-color 180ms ease, box-shadow 220ms ease; }
  .contract-workspace .contract-fields :is(input, select, textarea, .fancy-select-trigger):focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px #0057ff26, 0 0 18px #0057ff33; }

  /* Glow 2 — primary actions: a halo on hover/focus, and one light sweep across the button when it appears. */
  .contract-workspace .primary { position: relative; overflow: hidden; transition: box-shadow 260ms ease, transform 200ms var(--card-ease, ease); }
  .contract-workspace .primary:is(:hover, :focus-visible):not(:disabled) { box-shadow: 0 0 0 4px #0057ff1f, 0 10px 28px #0057ff59; transform: translateY(-1px); }
  .contract-workspace .primary:active:not(:disabled) { transform: translateY(0) scale(.98); }
  .contract-workspace .primary:not(:disabled)::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: -60%; width: 50%; background: linear-gradient(100deg, #fff0, #ffffff66, #fff0); transform: skewX(-18deg); animation: sheen-sweep 1100ms ease-out 700ms 1 backwards; pointer-events: none; opacity: 0; }
  @keyframes sheen-sweep { 0% { opacity: 1; inset-inline-start: -60%; } 100% { opacity: 1; inset-inline-start: 120%; } }

  /* Glow 3 — the "unrecorded details" notice breathes twice in amber so it is noticed, then rests. */
  .contract-workspace .missing { border-radius: 14px; animation: amber-breathe 1600ms ease-in-out 600ms 2; }
  @keyframes amber-breathe { 0%, 100% { box-shadow: 0 0 0 0 #9c690e00; } 50% { box-shadow: 0 0 0 4px #9c690e26, 0 0 22px #9c690e40; } }

  /* Saved versions and payments: rows slide in; the hovered row lights up. */
  .contract-history li { border-radius: 12px; padding-inline: 12px; animation: price-in 360ms var(--card-ease, ease) backwards; transition: background-color 180ms ease, transform 220ms var(--card-ease, ease); }
  .contract-history li:nth-child(2) { animation-delay: 50ms; } .contract-history li:nth-child(3) { animation-delay: 100ms; } .contract-history li:nth-child(n+4) { animation-delay: 150ms; }
  .contract-history li:hover { background: var(--white, #fff); transform: translateX(-4px); }
  [dir="ltr"] .contract-history li:hover { transform: translateX(4px); }

  /* The A4 sheet settles like paper, a band of light crosses it once, and it carries a faint blue aura on hover. */
  .contract-workspace .contract-sheet { border-radius: 4px; box-shadow: 0 1px 2px #0f213d14, 0 18px 48px #0f213d1f; animation: paper-settle 700ms var(--card-ease, ease) backwards; transition: box-shadow 320ms ease; }
  .contract-workspace .contract-sheet:hover { box-shadow: 0 1px 2px #0f213d14, 0 18px 48px #0f213d1f, 0 0 0 1px #0057ff33, 0 0 44px #0057ff2e; }
  @keyframes paper-settle { from { opacity: 0; transform: translateY(22px) scale(.985) rotate(-.4deg); } to { opacity: 1; transform: none; } }
  .contract-workspace .contract-sheet::after { content: ""; position: absolute; inset: -20% auto -20% -40%; width: 30%; background: linear-gradient(100deg, #fff0, #ffffffb3, #fff0); transform: skewX(-16deg); animation: paper-sheen 1500ms ease-out 650ms 1 both; pointer-events: none; }
  @keyframes paper-sheen { from { left: -40%; opacity: 1; } to { left: 130%; opacity: 1; } }

  /* Invoice: the card rises, the total glows once, and a scan line passes over the barcode (again on hover). */
  .contract-workspace .modern-invoice { animation: card-rise 520ms var(--card-ease, ease) backwards; }
  .contract-workspace .invoice-total { animation: total-glow 1800ms ease-in-out 700ms 1; }
  @keyframes total-glow { 0%, 100% { box-shadow: 0 0 0 0 #0057ff00; } 45% { box-shadow: 0 0 0 4px #0057ff1f, 0 0 32px #0057ff4d; } }
  .contract-workspace .invoice-total strong { animation: price-in 520ms var(--card-ease, ease) 500ms backwards; }
  .contract-workspace .invoice-lines tbody tr { animation: price-in 360ms var(--card-ease, ease) backwards; }
  .contract-workspace .invoice-lines tbody tr:nth-child(2) { animation-delay: 40ms; } .contract-workspace .invoice-lines tbody tr:nth-child(3) { animation-delay: 80ms; }
  .contract-workspace .invoice-lines tbody tr:nth-child(4) { animation-delay: 120ms; } .contract-workspace .invoice-lines tbody tr:nth-child(n+5) { animation-delay: 160ms; }
  .contract-workspace .invoice-barcode { position: relative; overflow: hidden; border-radius: 8px; }
  .contract-workspace .invoice-barcode::after { content: ""; position: absolute; inset-block: 8%; left: 0; width: 3px; border-radius: 3px; background: #0057ff; box-shadow: 0 0 12px 3px #0057ff80; opacity: 0; animation: barcode-scan 1400ms ease-in-out 1100ms 1; pointer-events: none; }
  .contract-workspace .invoice-barcode:hover::after { animation: barcode-scan-again 1400ms ease-in-out 1; }
  @keyframes barcode-scan { 0% { left: 6%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 94%; opacity: 0; } }
  @keyframes barcode-scan-again { 0% { left: 6%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 94%; opacity: 0; } }
}

/* Vehicle condition, recorded in the delivery and return cards. */
.inspection-block { margin-top: 16px; padding: 14px; border: 1px solid var(--line, #d5d7dc); border-radius: 14px; background: #fafbfc; }
.inspection-block h3 { margin: 0 0 10px; font-size: 14px; }
.inspection-block label { display: grid; gap: 4px; }
.inspection-block label > span { color: #5e686b; font-size: 12px; font-weight: 700; }
.inspection-fuel { max-width: 180px; margin-bottom: 12px; }
/* What the car came back short: a fact about the car, stated for staff; fuel is not charged here. */
.inspection-fuel-gap { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px;
  padding: 10px 12px; border: 1px solid #f3d9a6; border-radius: 12px; background: #fdf6e7; font-size: 13px; }
/* A recorded finding, not a row of form fields. The number that ties it to the mark on the car leads the row
   instead of floating off the corner, the three fields read as one line, and removing it stays quiet until
   someone reaches for it — this list is evidence, and a delete button should not be the loudest thing on it. */
.inspection-damages { display: grid; gap: 10px; margin-bottom: 12px; }
.inspection-damage { display: grid; grid-template-columns: auto minmax(0,1fr) minmax(0,1fr) minmax(0,1.6fr) auto;
  gap: 4px 10px; align-items: end; padding: 12px; border: 1px solid #e3e7ee; border-radius: 14px; background: #fff;
  transition: border-color 160ms ease, box-shadow 200ms ease; }
.inspection-damage:hover { border-color: #ccd3dd; }
.inspection-damage:focus-within { border-color: var(--blue, #0057ff); box-shadow: 0 0 0 3px #0057ff1f; }
.inspection-damage label { display: grid; gap: 5px; min-width: 0; }
.inspection-damage label > span { color: #5e686b; font-size: 11px; font-weight: 700; }
.inspection-damage :is(select,input,.fancy-select-trigger) { width: 100%; box-sizing: border-box; min-height: 42px; padding: 0 12px;
  border: 1px solid #d5d7dc; border-radius: 12px; background: #fff; color: inherit; font: inherit; font-size: 14px;
  transition: border-color 160ms ease, box-shadow 200ms ease; }
.inspection-damage :is(select,input,.fancy-select-trigger):focus { outline: 0; border-color: var(--blue, #0057ff); box-shadow: 0 0 0 3px #0057ff26; }
/* Scoped past `.contract-workspace button`, which would otherwise put its own border and blue on this. */
.inspection-damage .inspection-remove { align-self: end; width: 42px; min-height: 42px; height: 42px; padding: 0;
  border: 1px solid transparent; border-radius: 12px; background: transparent; color: #98a1ab; font-size: 20px;
  line-height: 1; cursor: pointer; transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease; }
.inspection-damage .inspection-remove:is(:hover,:focus-visible) { color: #b42318; background: #fff1f0; border-color: #f4c7c3; }
.inspection-empty { margin: 0; color: #5e686b; font-size: 13px; }
.inspection-add { min-height: 38px; padding: 0 14px; margin-bottom: 12px; border: 1px dashed #b9c0cc; border-radius: 999px; background: #fff; font-weight: 700; cursor: pointer; }
.inspection-notes { margin-bottom: 10px; }
.inspection-block textarea { width: 100%; }
.inspection-meta { margin: 8px 0 0; color: #5e686b; font-size: 12px; }
/* Said beside the button that was pressed, not at the top of a document the reader cannot see from there. */
.contract-step-note { display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 0; padding: 8px 14px;
  border-radius: 999px; background: #e7f4ec; color: #1b5e3f; font-size: 13px; font-weight: 700; }
.contract-step-note::before { content: "✓"; }
.contract-step-note.is-error { background: var(--red-soft, #fff1f0); color: #b42318; }
.contract-step-note.is-error::before { content: "!"; }
/* Narrow: the number, the area and the remove share a line — enough to tell the findings apart at a glance —
   and the type and note each take the full width rather than being squeezed into halves. */
@media (max-width: 700px) {
  .inspection-damage { grid-template-columns: auto minmax(0,1fr) auto; gap: 8px 10px; }
  .inspection-number { grid-area: 1 / 1; }
  .inspection-damage label:nth-of-type(1) { grid-area: 1 / 2; }
  .inspection-remove { grid-area: 1 / 3; }
  .inspection-damage label:nth-of-type(2),
  .inspection-damage label:nth-of-type(3) { grid-column: 1 / -1; }
}

/* Damage diagram: five fixed views, tapped to mark a spot. Numbers tie a mark to its row in the list. */
.inspection-hint { margin: 0 0 8px; color: #5e686b; font-size: 12px; }
.dd-views { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.dd-view { margin: 0; padding: 8px; border: 1px solid #e7eaef; border-radius: 12px; background: #fff; }
/* One height for every view so the portrait top view does not tower over the side elevations. */
.dd-view { display: grid; place-items: center; }
.dd-view svg { display: block; width: 100%; max-width: 100%; max-height: 132px; height: auto; cursor: crosshair; touch-action: manipulation; }
.dd-view figcaption { margin-top: 4px; color: #5e686b; font-size: 11px; font-weight: 700; text-align: center; }
/* The car elevations are supplied artwork; only the marks are drawn over them. */
.dd-view svg image, .dd-single svg image { image-rendering: auto; }
.dd-mark circle { fill: #b42318; stroke: #fff; stroke-width: 0.6; }
.dd-mark text { fill: #fff; font-size: 3px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
/* A return is read against the handover: what was already there sits underneath in grey and carries no number,
   and what is being found now is blue. The question the form has to answer is "what is new", so the two can
   never be the same colour. Shape as well as colour, since the difference must survive a monochrome print. */
.dd-mark-prior circle { fill: #b7bec7; stroke: #fff; stroke-width: 0.5; opacity: .9; }
[data-inspection-phase="return"] .dd-mark:not(.dd-mark-prior) circle,
.inspection-annex[data-annex-phase="return"] .dd-mark:not(.dd-mark-prior) circle { fill: #1d4ed8; }
/* The badge beside a damage row is the same number as the mark on the car, so it has to be the same colour. */
[data-inspection-phase="return"] .inspection-number { background: #1d4ed8; }
.inspection-annex[data-annex-phase="return"] .annex-damage-no { background: #1d4ed8; }
.inspection-legend { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; color: #5e686b; font-size: 12px; font-weight: 700; }
.inspection-legend .inspection-key { width: 12px; height: 12px; border-radius: 50%; border: 1px solid #fff;
  box-shadow: 0 0 0 1px #d5d7dc; }
.inspection-legend .inspection-key + span,
.inspection-legend .inspection-key-new { margin-inline-start: 8px; }
.inspection-key-prior { background: #b7bec7; }
.inspection-key-new { background: #1d4ed8; }
/* Sits in the row rather than over its corner: as an absolute badge it was half outside the card and clipped,
   and in RTL it landed on top of the first field's label. Aligned to the inputs, not to the labels above them. */
.inspection-number { align-self: end; display: grid; place-items: center; margin-bottom: 9px;
  width: 24px; height: 24px; border-radius: 50%; background: #b42318; color: #fff; font-size: 12px; font-weight: 700; }
@media print { .dd-view svg { cursor: default; } .inspection-add, .inspection-remove, [data-save] { display: none; } }

/* Condition photos: private bucket, shown through signed links. */
.inspection-photos { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.inspection-shots { display: flex; gap: 8px; flex-wrap: wrap; }
.inspection-shot { position: relative; margin: 0; width: 84px; height: 64px; border-radius: 10px; overflow: hidden; border: 1px solid #d5d7dc; background: #f1f3f6; }
.inspection-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.inspection-shot-wait { display: block; width: 100%; height: 100%; background: linear-gradient(90deg,#eef0f3,#f7f8fa,#eef0f3); }
/* Its own full styling: this used to lean on a shared .inspection-remove rule that the damage row has since
   taken over, and without it the generic workspace button shape would burst the 84×64 thumbnail. */
.inspection-shot .inspection-remove { position: absolute; top: 3px; inset-inline-end: 3px; display: grid; place-items: center;
  width: 22px; height: 22px; min-height: 22px; padding: 0; border: 1px solid #f4c7c3; border-radius: 50%;
  background: #fff1f0; color: #b42318; font-size: 14px; line-height: 1; cursor: pointer; }
.inspection-shot .inspection-remove:is(:hover,:focus-visible) { background: #ffe3e0; border-color: #e8a49e; }
.inspection-upload { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border: 1px dashed #b9c0cc; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 700; cursor: pointer; }

/* The condition record printed with the contract. The sheet is a fixed A4 box that clips rather than
   paginating, so every block here is sized in mm against the 178×265mm the annex padding leaves. The chart
   keeps the tall top view in its own column beside the four elevations, which is the only arrangement that
   stays readable at this width. */
.inspection-annex h2 { margin: 0 0 6mm; font-size: 15pt; }
.inspection-annex .annex-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3mm; margin: 0 0 6mm; }
.inspection-annex .annex-facts dt { font-size: 9pt; font-weight: 700; color: #5e686b; }
.inspection-annex .annex-facts dd { margin: 0; font-size: 11pt; overflow-wrap: anywhere; }
.inspection-annex .dd-views { grid-template-columns: repeat(3, 1fr); gap: 4mm; margin: 0 0 6mm; }
.inspection-annex .dd-view { padding: 2mm; }
.inspection-annex .dd-view:first-child { grid-column: 3; grid-row: 1 / span 2; }
/* Height caps only; the drawing and its marks share one viewBox, so they scale together and stay aligned. The
   portrait top view is allowed the height that makes it as WIDE as the elevations beside it — a mark is sized
   as a share of the drawing's width, so a cramped top view would carry marks smaller than all the others. */
.inspection-annex .dd-view svg { max-height: 30mm; cursor: default; }
.inspection-annex .dd-view:first-child svg { max-height: 85mm; }
.inspection-annex .dd-view figcaption { font-size: 8pt; }
/* On paper a mark has to be read, not merely seen; at 56mm across the screen sizes leave a 4pt number. */
.inspection-annex .dd-mark circle { r: 4.2; stroke-width: .9; }
.inspection-annex .dd-mark text { font-size: 4.6px; }
.inspection-annex .annex-damages { columns: 2; column-gap: 8mm; margin: 0 0 5mm; padding: 0; list-style: none; }
.inspection-annex .annex-damages li { break-inside: avoid; display: flex; gap: 2.5mm; align-items: baseline; margin-bottom: 2mm; font-size: 10pt; }
.inspection-annex .annex-damage-no { flex: 0 0 auto; display: inline-grid; place-items: center; width: 5mm; height: 5mm; border-radius: 50%; background: #b42318; color: #fff; font-size: 7.5pt; font-weight: 700; }
.inspection-annex .annex-damage-text small { display: block; color: #5e686b; font-size: 9pt; }
.inspection-annex .annex-legend { display: flex; align-items: center; gap: 2mm; margin: 0 0 5mm; font-size: 9pt; color: #5e686b; }
.inspection-annex .annex-key { width: 3.6mm; height: 3.6mm; border-radius: 50%; border: .3mm solid #fff; box-shadow: 0 0 0 .2mm #c9ced6; }
.inspection-annex .annex-key-new { margin-inline-start: 6mm; }
.inspection-annex .annex-key-prior { background: #b7bec7; }
.inspection-annex .annex-key-new { background: #1d4ed8; }
.inspection-annex .annex-empty { margin: 0 0 5mm; font-size: 10pt; }
.inspection-annex .annex-remarks { margin: 0 0 5mm; font-size: 10pt; white-space: pre-wrap; overflow-wrap: anywhere; }
.inspection-annex .annex-declaration { margin: 0 0 8mm; font-size: 10pt; }
.inspection-annex .annex-sign { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8mm; margin-bottom: 6mm; }
.inspection-annex .annex-sign-line { display: block; height: 12mm; border-bottom: 1px solid #333; }
.inspection-annex .annex-sign-label { display: block; margin-top: 2mm; font-size: 9pt; color: #5e686b; }
.inspection-annex .annex-note { margin: 0; font-size: 8pt; color: #5e686b; }
.inspection-annex[data-annex-phase="handover"] .annex-declaration { margin-bottom: 5mm; }
.inspection-annex[data-annex-phase="handover"] .annex-sign { margin-bottom: 4mm; }
.inspection-annex[data-annex-phase="handover"] .annex-sign-line { height: 10mm; }
/* The promissory note slip under the handover chart: the paper slip's layout, a main note beside a narrower
   authorisation stub on a dashed tear line. Fixed at 46mm so the list above knows what room it has; the handover sheet gives up a little of its
   signature spacing to make room for it. */
.inspection-annex .annex-slip { display: flex; box-sizing: border-box; height: 46mm; margin-top: 4mm; border: .4mm solid #333; font-family: Dubai, sans-serif; font-size: 8pt; line-height: 1.2; color: #111; background: #fff; }
.inspection-annex .slip-main { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; padding: 2mm 3mm; }
.inspection-annex .slip-stub { flex: 0 0 46mm; display: flex; flex-direction: column; justify-content: space-between; gap: 1.5mm; padding: 2mm 3mm; border-inline-start: .3mm dashed #555; }
.inspection-annex .slip-stub p { margin: 0; font-weight: 700; }
.inspection-annex .slip-row { display: flex; align-items: baseline; gap: 3mm; margin: 0; }
.inspection-annex .slip-field { display: flex; align-items: baseline; gap: 1.5mm; min-width: 0; }
.inspection-annex .slip-label { flex: 0 0 auto; white-space: nowrap; font-weight: 700; }
.inspection-annex .slip-line { flex: 1 1 auto; min-width: 8mm; border-bottom: .25mm dotted #333; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.inspection-annex .slip-shaded .slip-line { background: #e9e9ec; border-bottom-style: solid; }
.inspection-annex .slip-box { display: inline-flex; flex-direction: column; align-items: center; gap: .5mm; font-size: 7pt; }
.inspection-annex .slip-box b { display: block; width: 14mm; height: 5mm; border: .3mm solid #333; }
.inspection-annex .slip-box + .slip-box b { width: 8mm; }
.inspection-annex .slip-fine { flex: 1 1 auto; font-size: 6.5pt; color: #444; text-align: start; }

/* Marking screen: one view, as large as the space allows. */
.dd-marking { background: #fff; border: 1px solid #d5d7dc; border-radius: 14px; padding: 12px; margin-bottom: 12px; }
.dd-marking:fullscreen { display: grid; grid-template-rows: auto 1fr; place-content: center stretch; padding: 20px; border-radius: 0; }
.dd-marking:fullscreen .dd-single svg { max-height: 78vh; }
.dd-marking-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.dd-marking-head p { margin: 0; color: #5e686b; font-size: 13px; font-weight: 700; }
.dd-marking-tools { display: flex; gap: 8px; }
.dd-full, .dd-close { min-height: 36px; padding: 0 14px; border: 1px solid #d5d7dc; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 700; cursor: pointer; }
.dd-close { background: #eef4ff; border-color: #cfe0ff; color: #0057ff; }
.dd-switch { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.dd-switch button { min-height: 34px; padding: 0 14px; border: 1px solid #d5d7dc; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 700; cursor: pointer; }
.dd-switch button[aria-selected="true"] { border-color: #0057ff; background: #eef4ff; color: #0057ff; }
.dd-single svg { display: block; width: 100%; height: auto; max-height: 52vh; cursor: crosshair; touch-action: manipulation; }
.dd-view svg { cursor: pointer; }

/* On a phone the workspace is already nested two cards deep; marking needs that width back, so the view
   breaks out of the padding around it. Full screen recovers the rest. */
@media (max-width: 600px) {
  .inspection-block { padding: 10px; }
  .dd-marking { margin-inline: -20px; padding: 10px; border-radius: 0; }
  .dd-single svg { max-height: 60vh; }
  .dd-marking-head { flex-wrap: nowrap; }
  .dd-marking-head p { flex: 1; min-width: 0; font-size: 12px; }
  .dd-full, .dd-close { flex: 0 0 auto; white-space: nowrap; padding: 0 10px; font-size: 12px; }
  .dd-switch button { padding: 0 10px; font-size: 12px; }
}

/* Contract step: send over WhatsApp, and the copies list with its per-copy delete. */
.contract-whatsapp-send { display: inline-flex; align-items: center; gap: 8px; margin-inline-start: 8px; }
.contract-whatsapp-send svg { flex: none; }
.contract-send-status { margin: 10px 0 0; font-size: 0.92rem; color: var(--muted, #5b6472); }
.contract-send-status.is-error { color: #b42318; }
.contract-history li .contract-copy-delete { margin-inline-start: auto; padding: 6px 12px; font-size: 0.85rem; border: 1px solid #f0b8b1; border-radius: 10px; background: #fff5f4; color: #b42318; }
.contract-history li .contract-copy-delete:hover { background: #ffe9e6; }
.contract-history li .contract-copy-current { margin-inline-start: auto; padding: 4px 10px; font-size: 0.8rem; border-radius: 999px; background: var(--brand-soft, #eef2ff); color: var(--brand, #2f4bd9); }
/* The hidden frame that draws a copy for its PDF: real layout, never on screen. */
.contract-pdf-frame { position: fixed; inset-inline-start: -10000px; top: 0; width: 1200px; height: 1600px; border: 0; opacity: 0; pointer-events: none; }
body.contract-pdf-mode .contract-toolbar, body.contract-pdf-mode .contract-no-print, body.contract-pdf-mode .admin-site-header { display: none !important; }
.contract-workspace .contract-whatsapp-send svg { fill: currentColor; stroke: none; width: 18px; height: 18px; }
body.contract-pdf-mode *, body.contract-pdf-mode *::before, body.contract-pdf-mode *::after { animation: none !important; transition: none !important; }
body.contract-pdf-mode .contract-workspace .contract-sheet { box-shadow: none; }