/* =====================================================================
   A4 DOCUMENTS — Quotation (proposal) & Invoice
   Matches the Mau Africa Safaris proposal design.
   ===================================================================== */
.doc { --d-rust: #93391a; --d-cream: #f7efe5; --d-cream-2: #fbf6f0; --d-line: #e3d3c2; --d-ink: #1f1a17; --d-muted: #6f655d;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif; color: var(--d-ink); }
.doc-page { width: 210mm; height: 297mm; position: relative; background: #fff; margin: 0 auto 26px; box-shadow: 0 10px 40px rgba(40, 25, 10, .18); overflow: hidden; padding: 12mm 13mm 16mm; font-size: 8.6pt; line-height: 1.5; }
.doc h1, .doc h2, .doc h3, .doc .serif { font-family: 'Fraunces', Georgia, 'Times New Roman', serif; font-weight: 600; color: var(--d-ink); margin: 0; letter-spacing: -.005em; }
.doc p { margin: 0 0 7px; }

/* page header & footer */
.pg-top { display: flex; align-items: stretch; border-top: 1px solid #cfc3b7; border-bottom: 1.4px solid var(--d-ink); margin-bottom: 7mm; height: 9mm; }
.pg-top .sec { background: var(--d-rust); color: #fff; font-weight: 700; padding: 0 5mm; display: flex; align-items: center; font-size: 8.5pt; gap: 6px; }
.pg-top .sec b { font-weight: 400; color: #f3d2bf; }
.pg-top .right { margin-left: auto; display: flex; align-items: center; font-weight: 700; font-size: 8pt; gap: 5px; }
.pg-top .right svg { width: 11px; height: 11px; }
.pg-foot { position: absolute; left: 13mm; right: 13mm; bottom: 7mm; border-top: 1px solid var(--d-ink); padding-top: 2mm; display: flex; font-size: 7pt; color: var(--d-muted); }
.pg-foot b { color: var(--d-ink); margin-right: 6px; }
.pg-foot .r { margin-left: auto; font-weight: 700; color: var(--d-ink); }

/* cover */
.cover { padding: 0; color: #fff; }
.cover .bg { position: absolute; inset: 0 0 26mm 0; background: center/cover; }
.cover .bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .15) 35%, rgba(0, 0, 0, .25) 70%, rgba(0, 0, 0, .35)); }
.cover .in { position: absolute; left: 13mm; right: 13mm; top: 10mm; }
.cover .cbar { display: flex; align-items: center; gap: 5mm; border-bottom: 1px solid rgba(255, 255, 255, .6); font-size: 7.5pt; }
.cover .cbar .tagp { background: var(--d-rust); color: #fff; padding: 2.4mm 6mm; font-weight: 700; font-size: 9pt; }
.cover .cbar .dear { margin-left: auto; }
.cover .facts { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid rgba(255, 255, 255, .85); margin-top: 3mm; }
.cover .facts div { padding: 2mm 3mm; border-right: 1px solid rgba(255, 255, 255, .5); font-size: 6.8pt; }
.cover .facts div:last-child { border-right: 0; }
.cover .facts b { display: block; font-size: 8pt; }
.cover h1 { color: #fff; font-size: 25pt; line-height: 1.1; text-transform: uppercase; margin-top: 7mm; max-width: 170mm; text-shadow: 0 2px 14px rgba(0, 0, 0, .3); }
.cover .greet { position: absolute; left: 13mm; top: 96mm; width: 118mm; background: rgba(28, 22, 18, .78); padding: 6mm 6mm 5mm; font-size: 8pt; color: #f3ece5; }
.cover .greet p { margin: 0 0 3mm; }
.cover .greet .sig { display: flex; gap: 5mm; align-items: center; margin-top: 4mm; }
.cover .greet .sig .lg { width: 19mm; height: 19mm; border-radius: 50%; background: #fff; border: 2px solid #d9b77a; display: grid; place-items: center; padding: 1.5mm; flex: none; }
.cover .greet .sig .lg img { width: 100%; }
.cover .greet .sig b { color: #fff; }
.cover .band { position: absolute; left: 0; right: 0; bottom: 0; height: 26mm; background: #fff; color: var(--d-ink); display: flex; align-items: center; padding: 0 13mm; font-size: 7.5pt; }
.cover .band b { display: block; font-size: 8pt; }
.cover .band img { margin-left: auto; height: 17mm; }

/* summary */
.sum-head { display: flex; gap: 8mm; align-items: center; margin-bottom: 7mm; }
.sum-head .ph { width: 33mm; height: 24mm; background: center/cover; flex: none; }
.sum-head h1 { font-size: 17pt; text-transform: uppercase; line-height: 1.15; }
.doc h2.big { font-size: 15pt; margin-bottom: 2.5mm; }
.arr { font-size: 7.6pt; margin-bottom: 2mm; }
.arr b { font-weight: 700; }
.sum-tbl { width: 100%; border-collapse: collapse; border: 1px solid var(--d-line); font-size: 7.6pt; }
.sum-tbl th { text-align: left; padding: 3mm 3mm; font-weight: 700; border-bottom: 1.2px solid var(--d-ink); }
.sum-tbl td { padding: 2.6mm 3mm; border-bottom: 1px solid var(--d-line); vertical-align: top; }
.sum-tbl tr:nth-child(odd) td { background: var(--d-cream); }
.sum-tbl td small { display: block; color: var(--d-muted); font-size: 6.6pt; }
.sum-tbl .dot { color: var(--d-rust); font-weight: 700; margin-right: 2mm; }
.hl { display: flex; flex-wrap: wrap; gap: 2mm; margin: 4mm 0; }
.hl span { border: 1px solid var(--d-line); background: var(--d-cream-2); padding: 1.2mm 3mm; font-size: 7.4pt; }
.note-box { background: var(--d-cream); padding: 3.5mm 4mm; font-size: 7.6pt; border-left: 2px solid var(--d-rust); }

/* vehicles */
.veh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3mm; }
.veh-grid .ph { background: center/cover; height: 62mm; position: relative; }
.veh-grid .ph.wide { grid-column: 1 / -1; height: 78mm; }
.cap { position: absolute; left: 3mm; bottom: 3mm; background: rgba(25, 20, 16, .78); color: #fff; font-size: 6.6pt; padding: 1mm 2.4mm; }
.feat { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6mm 8mm; margin-top: 6mm; font-size: 7.8pt; }
.feat div::before { content: '•'; color: var(--d-rust); margin-right: 2mm; font-weight: 700; }

/* route */
.route { display: grid; grid-template-columns: 1fr 1fr; gap: 8mm; }
.route-line { position: relative; padding-left: 9mm; }
.route-line::before { content: ''; position: absolute; left: 3mm; top: 3mm; bottom: 3mm; width: 1.4px; background: repeating-linear-gradient(var(--d-rust) 0 3px, transparent 3px 6px); }
.route-line .st { position: relative; margin-bottom: 5mm; }
.route-line .st::before { content: ''; position: absolute; left: -7.6mm; top: 1mm; width: 3.2mm; height: 3.2mm; border-radius: 50%; background: #fff; border: 1.4px solid var(--d-rust); }
.route-line .st.end::before { background: var(--d-rust); }
.route-line .st b { display: block; font-size: 8.6pt; }
.route-line .st small { color: var(--d-muted); }
.route-tbl { width: 100%; border-collapse: collapse; font-size: 7.8pt; }
.route-tbl td { padding: 2.2mm 2mm; border-bottom: 1px solid var(--d-line); }
.route-tbl td:first-child { font-weight: 700; width: 18mm; }

/* day page */
.day-title { font-size: 16pt; line-height: 1.2; margin-bottom: 4mm; max-width: 165mm; }
.day-date { color: var(--d-rust); font-weight: 700; font-size: 7.6pt; margin-bottom: 2mm; }
.day-cols { display: grid; grid-template-columns: 1fr 67mm; gap: 7mm; }
.day-cols .txt { font-size: 8.3pt; text-align: justify; }
.side-box { border: 1px solid var(--d-rust); margin-bottom: 4mm; }
.side-box .hd { padding: 3mm 4mm 1mm; font-family: 'Fraunces', Georgia, serif; font-size: 11pt; font-weight: 600; }
.side-box .hd span { color: var(--d-rust); }
.side-box .bd { padding: 0 4mm 3mm; font-size: 7.4pt; }
.side-box .bd b { display: block; margin-top: 1.5mm; }
.side-box .bd .it::before { content: '→ '; color: var(--d-rust); }
.side-box .meal { background: var(--d-cream); padding: 3mm 4mm; border-top: 1px solid var(--d-line); font-size: 7.4pt; }
.side-box .meal small { display: block; color: var(--d-muted); }
.ovn { background: var(--d-cream-2); border: 1px solid var(--d-line); padding: 3mm 4mm; margin-bottom: 4mm; font-size: 7.4pt; }
.ovn .t { font-size: 6.6pt; text-transform: uppercase; letter-spacing: .06em; color: var(--d-muted); }
.ovn b { display: block; font-family: 'Fraunces', Georgia, serif; font-size: 10.5pt; }
.ph-box { position: relative; background: center/cover; height: 52mm; }
.ph-bottom { position: absolute; left: 13mm; bottom: 19mm; width: 118mm; height: 60mm; background: center/cover; }

/* accommodation page */
.acc-tag { font-size: 8pt; margin-bottom: 2mm; color: var(--d-muted); }
.acc-name { font-size: 17pt; }
.acc-type { font-size: 8pt; color: var(--d-muted); margin-bottom: 4mm; }
.facts-tbl { border-collapse: collapse; margin-top: 4mm; font-size: 7.8pt; }
.facts-tbl td { padding: 1.4mm 0; vertical-align: top; }
.facts-tbl td:first-child { font-weight: 700; width: 22mm; }
.acc-photos { display: grid; gap: 4mm; }
.acc-photos .ph-box { height: 56mm; }
.acc-strip { position: absolute; left: 13mm; right: 13mm; bottom: 19mm; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3mm; }
.acc-strip div { height: 40mm; background: center/cover; }

/* pricing */
.box { border: 1px solid var(--d-rust); padding: 3.5mm 4mm; margin-bottom: 5mm; }
.box.facts2 { display: grid; grid-template-columns: 1fr 1fr; font-size: 7.4pt; }
.box.facts2 b { display: block; font-size: 8.4pt; }
.incl { display: grid; grid-template-columns: 1fr 1fr; gap: 6mm; font-size: 7.5pt; }
.incl h4 { font-family: 'Inter', Arial, sans-serif; font-size: 8.4pt; margin: 0 0 2mm; display: flex; align-items: center; gap: 2mm; }
.incl h4 i { width: 4.4mm; height: 4.4mm; border-radius: 50%; border: 1.2px solid; display: grid; place-items: center; font-style: normal; font-size: 7pt; }
.incl .y i { color: #3d7a3d; } .incl .n i { color: var(--d-rust); }
.incl ul { margin: 0; padding-left: 4mm; }
.incl li { margin-bottom: 1.2mm; }
.price-tbl { width: 100%; border-collapse: collapse; font-size: 8pt; margin-top: 3mm; }
.price-tbl th { text-align: left; padding: 3mm; border-bottom: 1.2px solid var(--d-rust); font-weight: 700; }
.price-tbl td { padding: 3.2mm 3mm; border-bottom: 1px solid var(--d-line); }
.price-tbl .r { text-align: right; }
.price-tbl tr.tot td { background: var(--d-cream); font-weight: 700; border-bottom: 1.2px solid var(--d-rust); font-size: 8.6pt; }
.terms h3 { font-size: 10pt; margin: 5mm 0 2mm; font-family: 'Inter', Arial, sans-serif; font-weight: 700; }
.terms { font-size: 7.8pt; }
.terms ul { margin: 0; padding-left: 0; list-style: none; }
.opt-tbl { width: 100%; border-collapse: collapse; font-size: 7.8pt; }
.opt-tbl td, .opt-tbl th { padding: 2.4mm 3mm; border-bottom: 1px solid var(--d-line); text-align: left; }
.opt-tbl th { border-bottom: 1.2px solid var(--d-ink); }

/* about */
.about { display: grid; grid-template-columns: 1fr 72mm; gap: 8mm; font-size: 8pt; }
.contact-tbl td { padding: 1.6mm 0; font-size: 7.8pt; }
.contact-tbl td:first-child { width: 22mm; color: var(--d-muted); }
.reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 5mm; margin-top: 6mm; font-size: 7.8pt; }
.reasons b { display: block; font-family: 'Fraunces', Georgia, serif; font-size: 10pt; margin-bottom: 1mm; }

/* closing */
.closing { padding: 0; }
.closing .bg { position: absolute; inset: 0 0 60mm 0; background: center/cover; }
.closing .bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .45), transparent 50%); }
.closing .quote { position: absolute; left: 0; right: 0; top: 96mm; text-align: center; color: #fff; font-family: 'Fraunces', Georgia, serif; font-size: 22pt; line-height: 1.25; text-shadow: 0 2px 16px rgba(0, 0, 0, .5); }
.closing .quote small { display: block; font-size: 10pt; margin-top: 4mm; font-family: 'Inter', Arial, sans-serif; }
.closing .low { position: absolute; left: 13mm; right: 13mm; bottom: 12mm; font-size: 7.4pt; }
.closing .low img { height: 20mm; margin-bottom: 4mm; }

/* ===================== INVOICE ===================== */
.inv { padding: 14mm 15mm 18mm; }
.inv-head { display: flex; align-items: flex-start; gap: 8mm; padding-bottom: 6mm; border-bottom: 2px solid var(--d-rust); }
.inv-head img { height: 24mm; }
.inv-head .co { font-size: 7.6pt; color: var(--d-muted); line-height: 1.55; }
.inv-head .co b { color: var(--d-ink); font-size: 9pt; }
.inv-head .tt { margin-left: auto; text-align: right; }
.inv-head .tt h1 { font-size: 26pt; color: var(--d-rust); letter-spacing: .04em; }
.inv-head .tt .st { display: inline-block; margin-top: 2mm; padding: 1mm 3mm; font-size: 7pt; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; border: 1px solid; }
.st.paid { color: #2f6b2f; } .st.unpaid { color: var(--d-rust); } .st.partial { color: #8a6512; }
.inv-meta { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10mm; margin: 7mm 0; font-size: 8pt; }
.inv-meta .lbl { font-size: 6.8pt; text-transform: uppercase; letter-spacing: .08em; color: var(--d-muted); margin-bottom: 1.5mm; font-weight: 700; }
.inv-meta table td { padding: 1mm 0; }
.inv-meta table td:first-child { color: var(--d-muted); padding-right: 6mm; }
.inv-trip { background: var(--d-cream); padding: 3.5mm 4mm; font-size: 8pt; margin-bottom: 5mm; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3mm; }
.inv-trip b { display: block; }
.inv-trip small { color: var(--d-muted); font-size: 6.8pt; text-transform: uppercase; letter-spacing: .06em; }
.inv-items { width: 100%; border-collapse: collapse; font-size: 8.2pt; }
.inv-items th { background: var(--d-ink); color: #fff; text-align: left; padding: 2.6mm 3mm; font-weight: 600; font-size: 7.4pt; text-transform: uppercase; letter-spacing: .05em; }
.inv-items td { padding: 3mm; border-bottom: 1px solid var(--d-line); vertical-align: top; }
.inv-items td small { display: block; color: var(--d-muted); }
.inv-items .r { text-align: right; white-space: nowrap; }
.inv-tot { margin-left: auto; width: 82mm; margin-top: 4mm; font-size: 8.4pt; }
.inv-tot div { display: flex; justify-content: space-between; padding: 1.8mm 3mm; }
.inv-tot .grand { background: var(--d-rust); color: #fff; font-weight: 700; font-size: 10pt; }
.inv-tot .due { border: 1.4px solid var(--d-rust); font-weight: 700; color: var(--d-rust); font-size: 10pt; margin-top: 1.5mm; }
.inv-sched { display: grid; grid-template-columns: 1fr 1fr; gap: 6mm; margin-top: 7mm; font-size: 7.8pt; }
.inv-sched h4 { font-family: 'Inter', Arial, sans-serif; font-size: 8pt; text-transform: uppercase; letter-spacing: .06em; color: var(--d-rust); margin: 0 0 2mm; }
.inv-sched table { width: 100%; border-collapse: collapse; }
.inv-sched td { padding: 1.4mm 0; border-bottom: 1px dotted var(--d-line); }
.inv-sched td:last-child { text-align: right; }
.inv-foot { position: absolute; left: 15mm; right: 15mm; bottom: 10mm; text-align: center; font-size: 7pt; color: var(--d-muted); border-top: 1px solid var(--d-line); padding-top: 3mm; }
.inv-foot b { color: var(--d-rust); font-family: 'Fraunces', Georgia, serif; font-size: 10pt; display: block; margin-bottom: 1mm; }

@media print {
  @page { size: A4; margin: 0; }
  html, body { width: 210mm; }
  .doc-page { margin: 0 !important; box-shadow: none !important; page-break-after: always; break-after: page; }
  .doc-page:last-child { page-break-after: auto; break-after: auto; }
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}