/* BH Tour Package Generator - PDF Styles */
:root {
  --pdf-primary: #4f81bc;
  /* Brand Blue */
  --pdf-accent: #04da03;
  /* Brand Green */
  --pdf-amber: #f1c232;
  /* Legal/booking section bars — matches the reference proposal doc */
  --pdf-amber-text: #4a3b00;
  --pdf-text: #1e293b;
  --pdf-light-bg: #f8fafc;
  --pdf-border: #cbd5e1;
  --pdf-shadow:
    0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.itinerary-pdf {
  background: white;
  padding: 60px;
  border: none;
  max-width: 100%;
  margin: 0 auto;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 11pt;
  line-height: 1.6;
  color: var(--pdf-text);
}

/* Header — full-bleed blue banner (negative margins escape .itinerary-pdf's
   own padding so it spans edge-to-edge), matching the reference doc's solid
   blue header band rather than a plain white header row. */
.pdf-header {
  display: flex;
  align-items: center;
  gap: 30px;
  margin: -60px -60px 30px -60px;
  padding: 40px 60px;
  background: var(--pdf-primary);
  page-break-after: avoid;
}

.pdf-header img {
  max-height: 90px;
  width: auto;
  border-radius: 50%;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
}

.pdf-header-right {
  text-align: left;
  flex-grow: 1;
}

.pdf-title {
  font-family: "Montserrat", sans-serif;
  font-size: 24pt;
  font-weight: 800;
  color: white;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 1.15;
}

.pdf-subtitle {
  font-size: 12pt;
  color: var(--pdf-accent);
  font-weight: 700;
  margin-top: 8px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* Info Table */
.pdf-info-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 25px;
  border: 1px solid var(--pdf-border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.pdf-info-table td {
  padding: 11px 22px;
  border-bottom: 1px solid var(--pdf-border);
  vertical-align: middle;
}

.pdf-info-table td:first-child {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  color: var(--pdf-primary);
  background-color: #f8fafc;
  width: 35%;
  border-right: 1px solid var(--pdf-border);
  text-transform: uppercase;
  font-size: 9pt;
  letter-spacing: 1px;
}

/* Alternating row tint (both cells), matching the reference's striped table */
.pdf-info-table tr:nth-child(even) td {
  background-color: #eaf2fb;
}

.pdf-info-table tr:nth-child(even) td:first-child {
  background-color: #dfeaf7;
}

/* High-altitude safety advisory — deliberately a distinct amber/orange
   left-border card (not the legal boxes' top-border amber, not the CTA's
   green), so it reads as "important safety note" rather than "policy" or
   "call to action" at a glance. Only appears when the route actually
   touches a flagged high-altitude location. */
.pdf-altitude-advisory {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-left: 5px solid #ea580c;
  border-radius: 8px;
  padding: 14px 20px;
  margin: 15px 0 20px 0;
  page-break-inside: avoid;
}

.pdf-altitude-advisory-title {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 11.5pt;
  color: #9a3412;
  margin-bottom: 10px;
}

.pdf-altitude-advisory ul {
  margin: 0;
  padding-left: 20px;
}

.pdf-altitude-advisory li {
  font-size: 10pt;
  color: #7c2d12;
  margin-bottom: 4px;
  line-height: 1.4;
}

.pdf-altitude-advisory li:last-child {
  margin-bottom: 0;
}

/* Section Titles — green for itinerary/pricing sections (Detailed Itinerary,
   Accommodation Options & Pricing), matching the bars in the reference
   proposal doc. Legal/booking sections (Inclusions, Booking Process, Payment
   Methods, Remarks, Terms, ...) use the .legal amber variant below instead. */
.pdf-section-title {
  font-family: "Montserrat", sans-serif;
  font-size: 14pt;
  font-weight: 700;
  color: white;
  text-align: center;
  background-color: var(--pdf-accent);
  padding: 14px 25px;
  margin: 30px 0 20px 0;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(10, 37, 64, 0.15);
  page-break-after: avoid;
}

.pdf-section-title.legal {
  color: var(--pdf-amber-text);
  background-color: var(--pdf-amber);
}

/* Day Itinerary */
.pdf-day {
  margin-bottom: 45px;
  page-break-inside: avoid;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 25px;
}

.pdf-day-title {
  font-family: "Montserrat", sans-serif;
  font-size: 15pt;
  font-weight: 700;
  color: var(--pdf-primary);
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Day number badge — content: attr(data-day) reads the same data-day the
   Day Bank's renumberDaysInPreview() already keeps current on this same
   element, so the badge stays in sync for free with no extra rendering
   logic. Generated content like this never appears in innerHTML or
   textContent, so it's invisible to (and can't be corrupted by) the
   title-renumbering regex or the Quote Editor's title-text extraction,
   both of which only ever see the real "Day N: ..." text. Replaces the
   plain colored left-border bar this title used to have. */
.pdf-day-title::before {
  content: attr(data-day);
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--pdf-accent);
  color: white;
  font-size: 13pt;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Reserve room for the Day Bank Replace/Remove toolbar (absolutely
   positioned top-right of .pdf-day) so a wrapped title on a narrow screen
   doesn't sit underneath the buttons. Scoped to :has(sibling toolbar), so
   it only ever applies in the live Generator preview — the toolbar is
   always stripped before quote-editor or the exported PDF render this
   HTML, so this rule is inert there regardless of :has() support. */
.pdf-day-title:has(~ .day-ctrl-toolbar) {
  padding-right: 90px;
}

.pdf-day-meta {
  font-family: "Montserrat", sans-serif;
  font-size: 9pt;
  color: #64748b;
  margin-bottom: 18px;
  font-weight: 600;
  text-transform: uppercase;
  display: flex;
  gap: 25px;
  padding-left: 20px;
  letter-spacing: 0.5px;
}

.pdf-day-description {
  margin-bottom: 15px;
  text-align: justify;
  color: #334155;
  padding-left: 20px;
  line-height: 1.7;
  font-size: 10.5pt;
}

/* Day Overnights */
.pdf-day-overnight {
  margin-top: 15px;
  padding: 10px 18px;
  background-color: #f1f5f9;
  border-radius: 6px;
  font-size: 10pt;
  font-weight: 700;
  color: var(--pdf-primary);
  display: inline-block;
  border: 1px solid #e2e8f0;
}

/* Curated per-day highlights — short bullets, distinct from the flowing
   description paragraph above. */
.pdf-day-highlights {
  list-style: none;
  margin: 10px 0 0 0;
  padding: 0;
}

.pdf-day-highlights li {
  position: relative;
  font-size: 9.5pt;
  color: #475569;
  line-height: 1.4;
  margin-bottom: 4px;
  padding-left: 16px;
}

.pdf-day-highlights li::before {
  content: "\2726";
  position: absolute;
  left: 0;
  color: var(--pdf-accent);
  font-size: 8pt;
}

/* Signature Experience */
.pdf-signature-experience {
  margin: 20px 0 20px 20px;
  padding: 20px;
  background-color: #fffaf0;
  border-left: 4px solid var(--pdf-accent);
  border-radius: 0 8px 8px 0;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.03);
}

.pdf-signature-label {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  color: var(--pdf-accent);
  text-transform: uppercase;
  font-size: 8.5pt;
  letter-spacing: 1.5px;
  margin-bottom: 6px;
}

.pdf-signature-title {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 12pt;
  color: var(--pdf-primary);
  margin-bottom: 5px;
}

.pdf-signature-desc {
  font-size: 10pt;
  font-style: italic;
  color: #475569;
}

/* Activity List - New Time-Based Activities */
.pdf-activity-list {
  list-style: none;
  padding: 15px 20px;
  margin: 15px 0;
  background-color: #f8fafc;
  border-left: 4px solid #94a3b8; /* Changed to neutral gray for distinction */
  border-radius: 0 8px 8px 0;
}

.pdf-activity-list li {
  padding: 10px 0;
  color: #334155;
  font-size: 10pt;
  line-height: 1.6;
  border-bottom: 1px dashed #e2e8f0;
}

.pdf-activity-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.pdf-activity-list strong {
  color: var(--pdf-primary);
  font-weight: 700;
}

/* About Section */
.pdf-about {
  margin-top: 20px;
  padding: 20px 25px;
  background-color: #f8fafc;
  border-radius: 8px;
  font-size: 9.5pt;
  color: #64748b;
  line-height: 1.6;
  border: 1px solid #e2e8f0;
}

.pdf-about-title {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  color: var(--pdf-primary);
  margin-bottom: 8px;
  text-transform: uppercase;
  font-size: 8.5pt;
  letter-spacing: 1px;
}

/* Accommodation Table */
.pdf-accommodation-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 45px;
  border: 1px solid var(--pdf-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.pdf-accommodation-table th {
  font-family: "Montserrat", sans-serif;
  background-color: var(--pdf-primary);
  color: white;
  padding: 18px 15px;
  text-align: left;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 9.5pt;
  letter-spacing: 1px;
}

.pdf-accommodation-table th:first-child,
.pdf-accommodation-table th:nth-child(2) {
  text-align: center;
}

.pdf-accommodation-table td {
  padding: 16px 15px;
  border-bottom: 1px solid var(--pdf-border);
  font-size: 10.5pt;
  color: #334155;
}

.pdf-accommodation-table td:first-child,
.pdf-accommodation-table td:nth-child(2) {
  text-align: center;
  font-weight: 600;
  color: var(--pdf-primary); /* Highlight Dates/Days */
}

.pdf-accommodation-table tr:nth-child(even) {
  background-color: #f8fafc;
}

/* A stop with no hotel record found — shown clearly instead of the row
   (and its night) silently disappearing from the table and cost total. */
.pdf-accommodation-table tr.pdf-accommodation-missing td {
  background-color: #fffaeb !important;
  font-style: italic;
  color: var(--pdf-amber-text);
}

.pdf-accommodation-table tr.pdf-accommodation-missing td:first-child,
.pdf-accommodation-table tr.pdf-accommodation-missing td:nth-child(2) {
  color: var(--pdf-amber-text);
}

/* Per-tier package price row when a "Compare With" tier is selected —
   see generateAccommodationTable() in bh-generator.js. Reuses the same
   brand green as .pdf-section-title so it reads as a continuation of the
   table rather than a new, differently-styled element. */
.pdf-accommodation-table tr.pdf-accommodation-total td {
  background-color: var(--pdf-accent) !important;
  color: white;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 11pt;
  text-align: center;
  border-bottom: none;
}

.pdf-accommodation-table tr.pdf-accommodation-total td:first-child {
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Plain text, not an icon font — see the comment where this class is
   applied (bh-generator.js) for why. */
.pdf-hotel-link {
  color: var(--pdf-primary);
  text-decoration: none;
  font-size: 9pt;
  font-weight: 600;
}
.pdf-hotel-link:before {
  content: "· ";
  color: #94a3b8;
}

/* The hotel's own style (Deluxe/Premium/Luxury/Camp/Homestay/...) — sits on
   every hotel record but previously never reached this table, leaving a
   client with just a name and a meal-plan code and no sense of what kind
   of property it actually is. */
.pdf-hotel-category {
  display: inline-block;
  margin-top: 3px;
  font-size: 8pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #64748b;
  background: #f1f5f9;
  border-radius: 4px;
  padding: 1px 7px;
}

/* Pricing Section */
.pdf-pricing {
  background: linear-gradient(135deg, #0f172a 0%, #172554 100%);
  color: white;
  padding: 40px;
  margin: 50px 0;
  text-align: center;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.3);
  /* The redesigned card (stat tiles, includes line, urgency pill, and the
     tier-B compare line) got tall enough to land right at a page boundary
     in real exports — confirmed live: the totals/stats rendered on one
     page while "Compare (Luxury): INR X/-" was orphaned as a disconnected
     navy sliver at the very top of the next, reading as a broken card and
     as the compare tier's numbers going missing. Keep it one atomic unit
     that moves to the next page whole instead of splitting mid-card. */
  page-break-inside: avoid;
  break-inside: avoid;
}

.pdf-pricing:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: var(--pdf-accent);
}

.pdf-pricing p {
  margin: 8px 0;
  font-family: "Montserrat", sans-serif;
  font-size: 11pt;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.pdf-pricing p:nth-child(2) {
  font-size: 28pt;
  font-weight: 800;
  color: #ffffff;
  margin: 15px 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Per Person / Per Person Per Day — a compact two-tile stat row instead of
   a single stacked "Per Person: ..." line. */
.pdf-pricing-stats {
  display: flex;
  gap: 1px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  overflow: hidden;
  margin: 16px 0 14px;
}

.pdf-pricing-stat {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  padding: 12px 10px;
}

.pdf-pricing-stat-label {
  font-family: "Montserrat", sans-serif;
  font-size: 8pt;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #9db3d6;
  margin-bottom: 4px;
}

.pdf-pricing-stat-value {
  font-family: "Montserrat", sans-serif;
  font-size: 14pt;
  font-weight: 800;
  color: #ffffff;
}

.pdf-pricing-stat-day .pdf-pricing-stat-value {
  color: var(--pdf-accent);
}

/* One line answering "what am I getting" right at the price, instead of
   the reader having to reach the separate Inclusions section further down
   the document — also carries the GST-inclusive disclosure the old
   standalone note used to state on its own. */
.pdf-pricing-includes {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 9pt;
  opacity: 0.9;
  line-height: 1.5;
  margin: 0 0 14px;
}

.pdf-pricing-includes strong {
  color: #ffffff;
  font-weight: 700;
}

/* The validity deadline as a real, noticeable pill — reusing the amber
   this document already uses for its policy/legal sections — instead of
   blending into the same muted fine print as everything else. */
.pdf-pricing-urgency {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--pdf-amber);
  color: var(--pdf-amber-text);
  border-radius: 999px;
  padding: 5px 14px;
  font-family: "Montserrat", sans-serif;
  font-size: 8.5pt;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.pdf-pricing-urgency-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--pdf-amber-text);
  flex-shrink: 0;
}

/* "Compare With" tier's total, inside the same card as the primary price
   — a div, not a p, so it can't shift the p:nth-child(2)/(3) positional
   selectors the primary total and per-person lines above rely on. */
.pdf-pricing-compare {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-family: "Montserrat", sans-serif;
  font-size: 11pt;
  font-weight: 600;
  color: var(--pdf-accent);
  letter-spacing: 0.5px;
}

.pdf-pricing-compare-pp {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.65);
  font-size: 9.5pt;
  letter-spacing: 0.3px;
}

/* Lists and Legal — bordered stacked rows (one per bullet), matching the
   reference doc's bordered single-column list look, rather than one card
   with all bullets loose inside it. */
.pdf-list {
  border: 1px solid var(--pdf-border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 35px;
}

.pdf-list ul,
.pdf-remarks ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pdf-list li {
  padding: 12px 20px 12px 45px;
  position: relative;
  font-size: 10.5pt;
  color: #334155;
  line-height: 1.5;
  border-bottom: 1px solid var(--pdf-border);
}

.pdf-list li:last-child {
  border-bottom: none;
}

.pdf-list li:nth-child(even) {
  background-color: #f8fafc;
}

.pdf-list li:before {
  content: "\2713"; /* Checkmark */
  color: #10b981;
  position: absolute;
  left: 18px;
  top: 12px;
  font-weight: 800;
  font-size: 13pt;
}

.pdf-list.pdf-exclusions li:before {
  content: "\2715"; /* Cross */
  color: #ef4444;
  font-size: 13pt;
}

/* Multi-column grid for Inclusions/Exclusions */
.pdf-legal-grid {
  display: flex;
  gap: 40px;
  margin-bottom: 40px;
  page-break-inside: avoid;
}

.pdf-legal-col {
  flex: 1;
  /* Flex items default to min-width:auto, which refuses to shrink a column
     below its *content's* natural width (e.g. the longest inclusion/
     exclusion line) rather than the width actually available. At full A4
     width this never bites, but on a narrow mobile preview it was the
     single largest source of horizontal overflow — this list stretched
     the whole page out to ~492px wide inside a ~291px-wide preview pane.
     min-width:0 lets it actually shrink/wrap instead; harmless at any
     width where the content already fits. */
  min-width: 0;
}

/* Payment Info & Policy Box */
.pdf-payment-info,
.pdf-policy-box {
  background: white;
  padding: 25px;
  margin-bottom: 18px;
  border: 1px solid var(--pdf-border);
  border-top: 4px solid var(--pdf-amber);
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  page-break-inside: avoid;
}

.pdf-payment-info .pdf-section-title,
.pdf-policy-box .pdf-section-title {
  margin: 0 0 15px 0;
  font-size: 13pt;
  padding: 10px 15px;
}

.pdf-payment-table {
  width: 100%;
  margin-top: 20px;
  border-collapse: collapse;
}

.pdf-payment-table td {
  padding: 12px 15px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-size: 10.5pt;
}

.pdf-payment-table td:first-child {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  width: 35%;
  color: var(--pdf-amber-text);
  text-transform: uppercase;
  font-size: 9pt;
  letter-spacing: 0.5px;
  border-left: 4px solid var(--pdf-amber);
}

.pdf-payment-table td:last-child {
  font-weight: 500;
}

/* Reassurance directly beside the bank details — the point of highest
   financial-commitment anxiety (a 50% advance wired to a bank account is
   a real trust hurdle), not several sections away in Booking Process. */
.pdf-payment-trust-note {
  margin-top: 15px;
  padding: 12px 15px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 6px;
  color: #166534;
  font-size: 9.5pt;
  font-weight: 600;
}

/* Ready-to-book CTA — deliberately louder than the amber policy boxes
   around it: this is the one place in the document meant to prompt an
   action, not just inform. */
.pdf-cta-box {
  background: linear-gradient(135deg, #04da03 0%, #03b302 100%);
  color: white;
  padding: 25px 30px;
  margin-bottom: 25px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 6px 16px rgba(4, 218, 3, 0.25);
  page-break-inside: avoid;
}

.pdf-cta-title {
  font-family: "Montserrat", sans-serif;
  font-size: 14pt;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.pdf-cta-sub {
  font-size: 11pt;
  opacity: 0.95;
}

.pdf-cta-sub strong {
  font-weight: 800;
}

/* Plain-English meal-code legend under the accommodation table. */
.pdf-accommodation-legend {
  text-align: center;
  font-size: 8.5pt;
  color: #64748b;
  margin: 10px 0 35px 0;
}

/* Remarks & Terms — same bordered-row treatment as .pdf-list, so Booking
   Process / Payment Terms / Remarks / Cancellation / Terms sections all
   read as one consistent pattern rather than two different list styles. */
.pdf-remarks {
  border: 1px solid var(--pdf-border);
  border-radius: 8px;
  overflow: hidden;
}

.pdf-remarks li {
  padding: 12px 20px 12px 40px;
  position: relative;
  color: #475569;
  font-size: 10.5pt;
  line-height: 1.5;
  border-bottom: 1px solid var(--pdf-border);
}

.pdf-remarks li:last-child {
  border-bottom: none;
}

.pdf-remarks li:nth-child(even) {
  background-color: #f8fafc;
}

.pdf-remarks li:before {
  content: "•";
  color: var(--pdf-amber-text);
  position: absolute;
  left: 18px;
  font-size: 18pt;
  top: 8px;
  line-height: 1;
}

/* Closing */
.pdf-ends {
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: 16pt;
  font-weight: 700;
  color: var(--pdf-primary);
  margin: 50px 0;
  text-transform: uppercase;
  letter-spacing: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
}

.pdf-ends:before,
.pdf-ends:after {
  content: "";
  height: 3px; /* Slightly thicker */
  width: 60px;
  background: var(--pdf-accent);
}

.pdf-closing {
  text-align: center;
  margin-top: 30px;
  padding: 35px;
  background-color: var(--pdf-primary); /* Changed to Dark BG */
  color: white;
  border-radius: 12px;
  page-break-inside: avoid;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3);
}

.pdf-closing-title {
  font-family: "Montserrat", sans-serif;
  font-size: 28pt;
  font-weight: 800;
  color: white;
  letter-spacing: 5px;
  margin-bottom: 15px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.pdf-closing-url {
  font-family: "Montserrat", sans-serif;
  font-size: 16pt;
  color: var(--pdf-accent);
  font-weight: 700;
  letter-spacing: 2px;
}

/* ===== DESTINATION IMAGES ===== */

/* Image Container */
.pdf-image-container {
  margin: 35px 0;
  page-break-inside: avoid;
  text-align: center;
}

.pdf-image-container.cover {
  margin: 45px 0 55px 0;
}

/* Cover + highlight photo pair, side by side — matches the reference doc's
   two-photo layout near the top of the proposal. */
.pdf-destination-gallery {
  display: flex;
  gap: 16px;
  margin: 20px 0;
  page-break-inside: avoid;
}

.pdf-destination-gallery .pdf-image-container {
  flex: 1;
  margin: 0;
  min-width: 0;
}

.pdf-destination-gallery .pdf-cover-image,
.pdf-destination-gallery .pdf-highlight-image {
  width: 100%;
  height: 220px;
  max-height: none;
}

.pdf-image-container.highlight {
  margin: 55px 0 35px 0;
}

/* Cover Image - Hero style */
.pdf-cover-image {
  width: 100%;
  max-height: 450px; /* Increased height */
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  border: 4px solid white; /* Frame effect */
  transition: transform 0.3s ease;
}

.pdf-cover-image:hover {
  transform: scale(1.01);
}

/* Highlight Image - Secondary placement */
.pdf-highlight-image {
  width: 100%;
  max-height: 350px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  border: 1px solid #f1f5f9;
}

/* Image Caption — small and uniform for both photos: a quiet photo
   credit, not competing with the "Detailed Itinerary" heading and section
   titles around it. The cover caption used to be larger/bold/brand-blue,
   which gave a plain photo caption more visual weight than the actual
   headings nearby. */
.pdf-image-caption {
  text-align: center;
  font-size: 9pt;
  color: #94a3b8;
  margin-top: 10px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.3px;
}

.pdf-image-container.cover .pdf-image-caption {
  margin-top: 10px;
}

/* ===== PER-DAY DESTINATION IMAGE ===== */
/* 72% width instead of the full column: at the PDF's real content width
   (~718px), a full-width 3:2 photo rendered ~479px tall — nearly half a
   printed page for one day's image alone, before title/description/
   overnight text are even added. That's a strong candidate for why whole
   days were landing alone on a page even after multiple rounds of margin/
   padding trims elsewhere had zero effect. Shrinking the box (not the
   aspect ratio) cuts that to ~345px tall with zero extra cropping — the
   3:2 crop the image already fills is unchanged, it's just displayed
   smaller and centered. */
.pdf-day-image-wrap {
  width: 72%;
  margin: 12px auto 18px auto;
  page-break-inside: avoid;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.pdf-day-image {
  width: 100%;
  /* 3:2 instead of a fixed max-height: these photos are almost all shot at
     ~3:2 or a little wider (checked live across the current stock-photo
     set: naturally 1.33–1.78, clustering right at 1.5). A fixed 260px
     height against the image's now-correct full container width produced
     a ~2.55:1 box — object-fit:cover then had to crop 30–40% off the top
     and bottom of every photo to fill that much wider shape, turning
     normal landscape shots into thin, oddly-composed strips. aspect-ratio
     scales with the actual rendered width (different between this preview
     and the PDF's own viewport) instead of fighting it with a magic
     pixel number, and 3:2 keeps cropping minimal for the photos actually
     in use — near-zero for anything shot at 3:2, ~10–16% at the edges for
     the widest (16:9-ish) or narrowest (4:3-ish) outliers, instead of the
     30–40% off the top/bottom every image was taking before.
  */
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

/* Side-by-side day layout: image beside the description instead of
   stacked above it, alternating left/right per day for visual rhythm and
   to pack more days per printed page — a photo and its paragraph
   stacking HORIZONTALLY instead of both stacking vertically cuts each
   day's total height well below what the 72%-centered standalone image
   above needed. Days with no photo (leisure/departure days) fall back to
   the original full-width text flow — see the dayImageHtml-conditional
   in bh-generator.js's renderDatabaseItinerary/generateDetailedDay. */
.pdf-day-content-row {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.pdf-day-image-col {
  flex: 0 0 42%;
}

.pdf-day-text-col {
  flex: 1;
  min-width: 0;
}

/* Odd days: image left, text right (default DOM/row order). Even days:
   image right, text left — reversed via flex-direction so the underlying
   markup order (image col, then text col) never has to change. */
.pdf-day-alt-right .pdf-day-content-row {
  flex-direction: row-reverse;
}

/* Inside the row, the image fills its column edge-to-edge — the
   72%-centered sizing above was for a photo with the day's full width to
   itself; the column has already done that sizing job. */
.pdf-day-content-row .pdf-day-image-wrap {
  width: 100%;
  margin: 0;
}

/* Responsive image sizing */
@media screen and (max-width: 768px) {
  .pdf-cover-image {
    max-height: 300px;
  }

  .pdf-highlight-image {
    max-height: 250px;
  }

  /* A 42/58 column split is too cramped to read on a phone-width preview
     (the exported PDF always renders at full desktop width regardless of
     the viewer's screen, so this only affects live on-screen browsing) —
     stack image-then-text instead, same as a day with no photo. */
  .pdf-day-content-row,
  .pdf-day-alt-right .pdf-day-content-row {
    flex-direction: column;
  }

  .pdf-day-image-col {
    flex-basis: auto;
  }
}

/* This stylesheet doubles as both the on-screen itinerary preview and the
   actual print/PDF layout (see wrapForPdf() in routes/pdf.js) — so it's
   sized for an A4 page (60px padding, a 24pt title) by design, and that
   must stay untouched for the real PDF output. But nothing scoped that
   sizing to print/desktop, so the on-screen mobile preview inherited the
   same fixed 60px padding, forcing ~451px of minimum content width into a
   ~291px-wide preview pane and clipping the title/header off-screen
   (confirmed live at 375px viewport width). @media screen only, so the
   generated PDF itself (@media print, above) is unaffected. */
@media screen and (max-width: 480px) {
  .itinerary-pdf {
    padding: 20px;
  }

  .pdf-header {
    margin: -20px -20px 30px -20px;
    padding: 20px;
    gap: 16px;
  }

  .pdf-header img {
    max-height: 60px;
  }

  .pdf-title {
    font-size: 16pt;
    letter-spacing: 1px;
  }

  .pdf-subtitle {
    font-size: 10pt;
  }

  /* Even after min-width:0 lets these columns shrink (see .pdf-legal-col
     above) instead of overflowing, two side-by-side inclusion/exclusion
     lists are too narrow to read comfortably on a phone — stack them. */
  .pdf-legal-grid {
    flex-direction: column;
    gap: 20px;
  }

  /* Tables default to table-layout:auto, sizing each column to fit its
     content's longest unwrapped line — with 4 columns (Day/Date/Location/
     Accommodation Offered) that came out to ~406px, well past this
     preview's ~291px width, and was the single largest remaining source
     of horizontal overflow. table-layout:fixed shares the declared 100%
     width evenly instead, and overflow-wrap lets long hotel names/location
     names actually wrap onto a second line within their cell rather than
     forcing the column wider. */
  .pdf-accommodation-table {
    table-layout: fixed;
  }

  .pdf-accommodation-table th,
  .pdf-accommodation-table td {
    padding: 8px 6px;
    font-size: 8pt;
    overflow-wrap: break-word;
  }

  /* Explicit widths only on the first 3 (short-content) columns — with
     table-layout:fixed, any column left unset shares the remaining space
     equally. That means this same rule works whether the table has 4
     columns (single accommodation column) or 5 (the "Compare With"
     second-tier column, see generateAccommodationTable in bh-generator.js)
     without needing two separate rules. */
  .pdf-accommodation-table th:nth-child(1),
  .pdf-accommodation-table td:nth-child(1) {
    width: 10%;
  }
  .pdf-accommodation-table th:nth-child(2),
  .pdf-accommodation-table td:nth-child(2) {
    width: 20%;
  }
  .pdf-accommodation-table th:nth-child(3),
  .pdf-accommodation-table td:nth-child(3) {
    width: 16%;
  }

  .pdf-accommodation-table tr.pdf-accommodation-total td {
    padding: 10px 6px;
    font-size: 8pt;
  }
}

@media print {
  body {
    background: white;
  }

  .itinerary-pdf {
    padding: 0;
    margin: 0;
    width: 100%;
  }

  .pdf-pricing,
  .pdf-section-title {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ===== PRICING BREAKDOWN STYLES ===== */

.pdf-pricing-breakdown {
  font-size: 9px !important;
  color: #666 !important;
  margin-top: 6px !important;
  border-top: 1px solid #ddd !important;
  padding-top: 6px !important;
  line-height: 1.3 !important;
}

.pdf-pricing-breakdown p {
  margin: 2px 0 !important;
  font-weight: normal !important;
}

.pdf-pricing-breakdown strong {
  font-size: 10px !important;
  color: #333 !important;
}

/* ===== PHASE 2: INLINE EDITING VISUAL CUES (screen only, not printed) ===== */
@media screen {
  [data-editable="true"] {
    cursor: text;
    border-radius: 3px;
    transition: background 0.15s, box-shadow 0.15s;
    position: relative;
  }

  [data-editable="true"]:hover {
    background: rgba(66, 133, 244, 0.06);
    box-shadow: 0 0 0 1px rgba(66, 133, 244, 0.3);
    outline: none;
  }

  [data-editable="true"]:focus {
    background: rgba(66, 133, 244, 0.08);
    box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.45);
    outline: none;
  }

  /* Tooltip hint that appears on hover */
  [data-editable="true"]:hover::after {
    content: "✎ Click to edit";
    position: absolute;
    top: -22px;
    left: 0;
    font-size: 10px;
    color: #4285F4;
    background: #fff;
    border: 1px solid #4285F4;
    border-radius: 3px;
    padding: 1px 5px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 100;
    opacity: 0.9;
  }
}

/* Ensure editing cues don't appear in print/PDF */
@media print {
  [data-editable="true"] {
    cursor: default !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
  }
  [data-editable="true"]::after {
    display: none !important;
  }
}