/* ==========================================================================
   DUNECASTLE LUXURY RESORT BROCHURE — DYNAMIC HTML/CSS TEMPLATE
   100% Pixel-to-Pixel Exact Matching to PDF
   A4 Dimensions: 595pt x 842pt (210mm x 297mm)
   Font Family: Sora (Google Fonts)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;600;700&display=swap');

:root {
  --font-main: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  
  /* Brand Color Palette */
  --bg-canvas: #f1faf9;
  --bg-white: #ffffff;
  --teal-primary: #0e9aa7;
  --teal-accent: #37b7c0;
  --teal-dark: #123a3a;
  --teal-lead: #3e6360;
  --coral-accent: #f0784b;
  --teal-badge-text: #0b7d88;
  --teal-badge-bg: rgba(14, 154, 167, 0.102);
  --teal-muted: #7fa19d;
  --teal-light: #b0ded9;
  --border-subtle: #dcefec;
  
  /* Exact A4 dimensions in point units */
  --page-width: 595pt;
  --page-height: 842pt;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  font-family: var(--font-main);
  background-color: #0b1717;
  color: var(--teal-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Floating screen toolbar */
.screen-toolbar {
  position: fixed;
  top: 16px;
  right: 20px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(14, 45, 48, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(55, 183, 192, 0.4);
  border-radius: 40px;
  padding: 8px 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.toolbar-title {
  color: #e0f2f1;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding-right: 12px;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.toolbar-btn {
  background: var(--teal-primary);
  color: #ffffff;
  border: none;
  border-radius: 20px;
  padding: 7px 16px;
  font-family: var(--font-main);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.toolbar-btn:hover {
  background: var(--teal-accent);
  transform: translateY(-1px);
}

.pages-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 0 80px 0;
  gap: 36px;
}

/* ==========================================================================
   BASE A4 SHEET
   ========================================================================== */
.page {
  width: var(--page-width);
  height: var(--page-height);
  min-height: var(--page-height);
  max-height: var(--page-height);
  background-color: var(--bg-canvas);
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.45);
  border-radius: 2px;
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   COMMON HEADER & FOOTER (Pages 2-9)
   ========================================================================== */
.common-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 54pt;
  pointer-events: auto;
  z-index: 10;
}

.header-brand {
  position: absolute;
  left: 51.0pt;
  top: 31.9pt;
  font-size: 14.0pt;
  font-weight: 700;
  color: var(--teal-dark);
  letter-spacing: -0.01em;
  line-height: 1;
}

.header-location {
  position: absolute;
  right: 51.0pt;
  top: 35.8pt;
  font-size: 7.5pt;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal-muted);
  line-height: 1;
}

.header-location .dot {
  color: var(--teal-muted);
  margin: 0 4pt;
}

.header-divider {
  display: none;
}

.common-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50pt;
  pointer-events: auto;
  z-index: 10;
}

.footer-divider {
  display: none;
}

.footer-brand {
  position: absolute;
  left: 51.0pt;
  top: 9.5pt;
  font-size: 7.5pt;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--teal-muted);
}

.footer-meta {
  position: absolute;
  right: 51.0pt;
  top: 9.5pt;
  font-size: 7.5pt;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal-muted);
}

.footer-meta .num {
  color: var(--teal-muted);
  font-weight: 600;
}

.footer-meta .slash {
  color: var(--teal-primary);
  margin: 0 4pt;
}

.footer-meta .tagline {
  color: var(--teal-primary);
  font-weight: 300;
}

/* ==========================================================================
   COMMON SECTION TITLE AREA (Pages 3, 4, 6, 7, 8, 9)
   ========================================================================== */
.section-eyebrow {
  position: absolute;
  left: 51.0pt;
  top: 70.7pt;
  font-size: 8.5pt;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal-primary);
  line-height: 1;
}

.section-heading {
  position: absolute;
  left: 51.0pt;
  top: 94.2pt;
  font-size: 33.0pt;
  font-weight: 700;
  line-height: 1.05;
  color: var(--teal-dark);
  letter-spacing: -0.02em;
}

.roman-numeral-badge {
  position: absolute;
  right: 51.0pt;
  top: 91.5pt;
  width: 36.8pt;
  height: 36.8pt;
  background-color: var(--teal-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 11.0pt;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.p3-badge {
  top: 124.5pt;
}

/* ==========================================================================
   PAGE 1: COVER
   ========================================================================== */
.page-1 {
  background: #061618;
}

.cover-hero-img {
  position: absolute;
  left: -333.0pt;
  top: 0;
  width: 1261.5pt;
  height: 842.25pt;
  object-fit: cover;
  z-index: 1;
}

.cover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(3, 17, 18, 0.42) 0%, rgba(1, 3, 3, 0.08) 45%, rgba(5, 26, 29, 0.66) 100%);
  pointer-events: none;
  z-index: 2;
}

.cover-border-frame {
  position: absolute;
  left: 22.88pt;
  top: 22.88pt;
  width: 549.0pt;
  height: 795.75pt;
  border: 0.75pt solid rgba(255, 255, 255, 0.65);
  border-radius: 16.125pt;
  pointer-events: none;
  z-index: 3;
}

.cover-logo-box {
  position: absolute;
  left: 266.25pt;
  top: 324.75pt;
  width: 62.25pt;
  height: 62.25pt;
  background-color: var(--teal-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  z-index: 4;
}

.cover-logo-img {
  width: 39.6pt;
  height: 39.6pt;
  object-fit: contain;
}

.cover-eyebrow {
  position: absolute;
  left: 0;
  right: 0;
  top: 413.0pt;
  text-align: center;
  font-size: 9.0pt;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #ffffff;
  z-index: 4;
}

.cover-eyebrow .dot {
  color: #ffffff;
  margin: 0 5pt;
}

.cover-title {
  position: absolute;
  left: 0;
  right: 0;
  top: 429.7pt;
  text-align: center;
  font-size: 52.0pt;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
  line-height: 1;
  z-index: 4;
}

.cover-subtitle {
  position: absolute;
  left: 0;
  right: 0;
  top: 501.1pt;
  text-align: center;
  font-size: 15.0pt;
  font-weight: 300;
  color: #dcefed;
  letter-spacing: 0.05em;
  z-index: 4;
}

.cover-bottom-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 789.6pt;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16pt;
  font-size: 8.0pt;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #ffffff;
  z-index: 4;
}

.cover-bottom-bar .diamond {
  color: #ffffff;
  font-size: 8pt;
  opacity: 0.65;
}

/* ==========================================================================
   PAGE 2: OVERVIEW & STATS
   ========================================================================== */
.page-2-eyebrow {
  position: absolute;
  left: 51.0pt;
  top: 143.5pt;
  font-size: 8.5pt;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal-primary);
}

.page-2-eyebrow .dot {
  color: var(--teal-accent);
  margin: 0 4pt;
}

.page-2-lead {
  position: absolute;
  left: 51.0pt;
  top: 173.0pt;
  width: 493.5pt;
  font-size: 20.0pt;
  font-weight: 300;
  line-height: 28.5pt;
  color: var(--teal-lead);
  letter-spacing: -0.01em;
}

.page-2-lead .lead-brand {
  color: var(--teal-primary);
  font-weight: 600;
}

.page-2-photo-left {
  position: absolute;
  left: 51.0pt;
  top: 321.8pt;
  width: 238.5pt;
  height: 237.8pt;
  overflow: hidden;
  border-radius: 13.5pt;
  background-color: var(--bg-white);
  box-shadow: 0 4px 16px rgba(18, 58, 58, 0.08);
}

.page-2-photo-left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-2-photo-right {
  position: absolute;
  left: 306.0pt;
  top: 321.8pt;
  width: 238.5pt;
  height: 237.8pt;
  overflow: hidden;
  border-radius: 13.5pt;
  background-color: var(--bg-white);
  box-shadow: 0 4px 16px rgba(18, 58, 58, 0.08);
}

.page-2-photo-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-2-stats-divider {
  position: absolute;
  left: 51.0pt;
  top: 591.0pt;
  width: 493.5pt;
  height: 1px;
  background-color: var(--teal-primary);
  opacity: 0.4;
}

.stat-block {
  position: absolute;
  top: 611.0pt;
}

.stat-block-1 { left: 51.0pt; }
.stat-block-2 { left: 192.1pt; top: 614.0pt; }
.stat-block-3 { left: 315.4pt; }
.stat-block-4 { left: 438.7pt; }

.stat-number-row {
  display: flex;
  align-items: baseline;
  gap: 4pt;
}

.stat-number {
  font-size: 33.0pt;
  font-weight: 700;
  color: var(--teal-primary);
  line-height: 1;
  letter-spacing: -0.02em;
}

.stat-block-2 .stat-number {
  margin-bottom: 13.0pt;
}

.stat-unit {
  font-size: 22.0pt;
  font-weight: 700;
  color: var(--coral-accent);
  line-height: 1;
  margin-bottom: 9.6pt;
}

.stat-label {
  font-size: 7.5pt;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal-muted);
  margin-top: 12pt;
  line-height: 1.35;
}

.stat-block-2 .stat-label {
  margin-top: 0;
}

/* ==========================================================================
   PAGE 3: THE CENTREPIECE (INFINITY POOL)
   ========================================================================== */
.photo-frame-2x2 {
  position: absolute;
  width: 238.5pt;
  height: 238.5pt;
  overflow: hidden;
  border-radius: 13.5pt;
  background-color: var(--bg-white);
  box-shadow: 0 4px 16px rgba(18, 58, 58, 0.08);
}

.photo-frame-2x2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.p3-photo-1 { left: 51.0pt; top: 228.0pt; }
.p3-photo-2 { left: 306.0pt; top: 228.0pt; }
.p3-photo-3 { left: 51.0pt; top: 483.0pt; }
.p3-photo-4 { left: 306.0pt; top: 483.0pt; }

/* ==========================================================================
   PAGES 4 & 5: WHERE YOU STAY (STAYS & SUITES)
   ========================================================================== */
.stay-row {
  position: absolute;
  left: 0;
  width: 100%;
}

.p4-row-1 { top: 162.75pt; height: 181.5pt; }
.p4-row-2 { top: 378.75pt; height: 181.5pt; }
.p4-row-3 { top: 595.5pt; height: 181.5pt; }

.p5-row-4 { top: 87.75pt; height: 181.5pt; }
.p5-row-5 { top: 304.5pt; height: 180.75pt; }
.p5-row-6 { top: 520.5pt; height: 181.5pt; }

.stay-photo-wrap {
  position: absolute;
  overflow: hidden;
  border-radius: 13.5pt;
  background-color: var(--bg-white);
  box-shadow: 0 4px 16px rgba(18, 58, 58, 0.06);
}

.stay-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.p4-photo {
  left: 51.0pt;
  top: 0;
  width: 181.5pt;
  height: 181.5pt;
  overflow: hidden;
  border-radius: 13.5pt;
}

.p4-photo img {
  position: absolute;
  left: -30.0pt;
  top: 0;
  width: 241.5pt;
  height: 181.5pt;
  max-width: none;
  object-fit: cover;
}

.p5-photo-portrait {
  left: 51.0pt;
  top: 0;
  width: 181.5pt;
  height: 181.5pt;
  overflow: hidden;
  border-radius: 13.5pt;
}

.p5-photo-portrait img {
  position: absolute;
  left: 0;
  top: -30.0pt;
  width: 181.5pt;
  height: 241.5pt;
  max-width: none;
  object-fit: cover;
}

.p5-photo-landscape {
  left: 51.0pt;
  top: 0;
  width: 181.5pt;
  height: 180.75pt;
  overflow: hidden;
  border-radius: 13.5pt;
}

.p5-photo-landscape img {
  position: absolute;
  left: -45.0pt;
  top: 0;
  width: 271.5pt;
  height: 180.75pt;
  max-width: none;
  object-fit: cover;
}

.stay-text-block {
  position: absolute;
  left: 263.6pt;
  top: 49.86pt;
}

.p4-text-block {
  top: 49.86pt;
}

.p5-text-block-portrait {
  top: 49.86pt;
}

.p5-text-block-landscape {
  top: 49.86pt;
}

.stay-number {
  font-size: 14.0pt;
  font-weight: 700;
  color: var(--teal-primary);
  line-height: 1;
  margin-bottom: 9.0pt;
}

.stay-title {
  font-size: 19.0pt;
  font-weight: 700;
  color: var(--teal-dark);
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin-bottom: 8.0pt;
}

.stay-badges-row {
  display: flex;
  gap: 14.25pt;
  align-items: center;
}

.stay-badge-pill {
  background-color: var(--teal-badge-bg);
  color: var(--teal-badge-text);
  font-size: 7.5pt;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  height: 20.25pt;
  padding: 0 10.5pt;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  line-height: 1;
}

/* Page 5 Highlight Estate Banner */
.estate-quote-block {
  position: absolute;
  left: 51.02pt;
  top: 747.11pt;
  width: 450pt;
}

.page-5-divider {
  position: absolute;
  left: 51.0pt;
  top: 718.5pt;
  width: 493.5pt;
  height: 1px;
  background-color: var(--teal-primary);
  opacity: 0.4;
}

.estate-quote-text {
  font-size: 15.0pt;
  font-weight: 300;
  line-height: 22.5pt;
  color: var(--teal-dark);
  letter-spacing: normal;
}

.estate-quote-text strong {
  font-weight: 600;
  color: var(--teal-dark);
}

.p5-numeral-badge {
  position: absolute;
  right: 51.0pt;
  top: 736.5pt;
  width: 36.8pt;
  height: 36.8pt;
  background-color: var(--teal-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 11.0pt;
  font-weight: 700;
}

/* ==========================================================================
   PAGE 6: INTERIORS
   ========================================================================== */
.p6-photo-1 { left: 51.0pt; top: 211.5pt; }
.p6-photo-2 { left: 306.0pt; top: 211.5pt; }
.p6-photo-3 { left: 51.0pt; top: 466.5pt; }
.p6-photo-4 { left: 306.0pt; top: 466.5pt; }

/* ==========================================================================
   PAGE 7: AMENITIES
   ========================================================================== */
.amenity-row {
  position: absolute;
  display: flex;
  align-items: center;
  height: 32pt;
}

.amenity-icon-box {
  width: 32pt;
  height: 32pt;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.amenity-icon-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.amenity-title {
  font-size: 13.0pt;
  font-weight: 600;
  color: var(--teal-dark);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* Column 1 Amenities (icons left: 52.0pt, text left: 102.0pt -> gap: 18.0pt) */
.amenity-col-1 {
  left: 52.0pt;
  gap: 18.0pt;
}
.amenity-item-1 { top: 156.0pt; }
.amenity-item-2 { top: 233.25pt; }
.amenity-item-3 { top: 310.5pt; }
.amenity-item-4 { top: 387.75pt; }
.amenity-item-5 { top: 465.0pt; }

/* Column 2 Amenities (icons left: 315.0pt, text left: 365.65pt -> gap: 18.65pt) */
.amenity-col-2 {
  left: 315.0pt;
  gap: 18.65pt;
}
.amenity-item-6 { top: 156.0pt; }
.amenity-item-7 { top: 233.25pt; }
.amenity-item-8 { top: 310.5pt; }
.amenity-item-9 { top: 387.75pt; }

/* Page 7 Bottom Photos */
.p7-photo-left {
  position: absolute;
  left: 51.0pt;
  top: 544.5pt;
  width: 238.5pt;
  height: 237.75pt;
  overflow: hidden;
  border-radius: 13.5pt;
  background-color: var(--bg-white);
  box-shadow: 0 4px 16px rgba(18, 58, 58, 0.08);
}

.p7-photo-left img {
  position: absolute;
  left: -59.25pt;
  top: 0;
  width: 357.0pt;
  height: 237.75pt;
  max-width: none;
  object-fit: cover;
  display: block;
}

.p7-photo-right {
  position: absolute;
  left: 306.0pt;
  top: 544.5pt;
  width: 238.5pt;
  height: 237.75pt;
  overflow: hidden;
  border-radius: 13.5pt;
  background-color: var(--bg-white);
  box-shadow: 0 4px 16px rgba(18, 58, 58, 0.08);
}

.p7-photo-right img {
  position: absolute;
  left: 0;
  top: -39.75pt;
  width: 238.5pt;
  height: 317.25pt;
  max-width: none;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   PAGE 8: THE GROUNDS
   ========================================================================== */
.p8-photo-1 { left: 51.0pt; top: 211.5pt; }
.p8-photo-2 { left: 306.0pt; top: 211.5pt; }
.p8-photo-3 { left: 51.0pt; top: 466.5pt; }
.p8-photo-4 { left: 306.0pt; top: 466.5pt; }

/* ==========================================================================
   PAGE 9: GALLERY
   ========================================================================== */
.gallery-photo-card {
  position: absolute;
  overflow: hidden;
  border-radius: 13.5pt;
  background-color: var(--bg-white);
  box-shadow: 0 4px 16px rgba(18, 58, 58, 0.08);
}

.gallery-photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Row 1 */
.p9-photo-1 { left: 51.0pt; top: 296.2pt; width: 155.2pt; height: 155.2pt; }
.p9-photo-2 { left: 220.5pt; top: 296.2pt; width: 154.5pt; height: 155.2pt; }
.p9-photo-3 { left: 389.2pt; top: 296.2pt; width: 155.2pt; height: 155.2pt; }

/* Row 2 */
.p9-photo-4 { left: 51.0pt; top: 465.0pt; width: 155.2pt; height: 155.2pt; }
.p9-photo-5 { left: 220.5pt; top: 465.0pt; width: 154.5pt; height: 155.2pt; }
.p9-photo-6 { left: 389.2pt; top: 465.0pt; width: 155.2pt; height: 155.2pt; }

/* ==========================================================================
   PAGE 10: BACK COVER
   ========================================================================== */
.page-10 {
  background: #061618;
}

.back-hero-img {
  position: absolute;
  left: -333pt;
  top: 0;
  width: 1261.5pt;
  height: 842.2pt;
  object-fit: cover;
  z-index: 1;
}

.back-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, rgba(7, 52, 57, 0.90) 0%, rgba(7, 52, 57, 0.55) 60%, rgba(7, 52, 57, 0.32) 100%);
  z-index: 2;
}

.back-badge {
  position: absolute;
  left: 57.0pt;
  top: 68.2pt;
  width: 56.2pt;
  height: 56.2pt;
  background-color: var(--teal-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  z-index: 3;
}

.back-badge img {
  width: 36.7pt;
  height: 35.8pt;
  object-fit: contain;
}

.back-eyebrow {
  position: absolute;
  left: 56.7pt;
  top: 153.2pt;
  font-size: 8.5pt;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--teal-accent);
  z-index: 3;
}

.back-heading {
  position: absolute;
  left: 56.7pt;
  top: 172.0pt;
  font-size: 46.0pt;
  font-weight: 400;
  color: #ffffff;
  line-height: 0.98;
  letter-spacing: -0.02em;
  max-width: 450pt;
  z-index: 3;
}

.contact-box-left {
  position: absolute;
  left: 56.7pt;
  top: 301.3pt;
  z-index: 3;
}

.contact-box-right {
  position: absolute;
  left: 272.5pt;
  top: 301.3pt;
  z-index: 3;
}

.contact-label {
  font-size: 8.0pt;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--teal-accent);
  line-height: 1;
  margin-bottom: 12pt;
}

.contact-value {
  font-size: 19.0pt;
  font-weight: 300;
  color: #ffffff;
  letter-spacing: -0.01em;
  line-height: 1;
}

.back-footer-divider {
  position: absolute;
  left: 56.7pt;
  top: 746.5pt;
  width: 481.5pt;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.2);
  z-index: 3;
}

.back-footer-text {
  position: absolute;
  left: 56.7pt;
  top: 764.8pt;
  font-size: 7.5pt;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  z-index: 3;
}

.back-footer-text .dot {
  color: rgba(255, 255, 255, 0.55);
  margin: 0 6pt;
}

/* ==========================================================================
   PRINT MEDIA STYLES
   ========================================================================== */
@media print {
  @page {
    size: A4 portrait;
    margin: 0;
  }

  html, body {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 210mm !important;
  }

  .screen-toolbar {
    display: none !important;
  }

  .pages-container {
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
  }

  .page {
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    page-break-after: always !important;
    break-after: page !important;
    width: 210mm !important;
    height: 297mm !important;
    min-height: 297mm !important;
    max-height: 297mm !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}