/* =========================================================
   BRUNATA – POWER PAGES THEME (QUOTE PAGE)
   CLEAN VERSION – HERO + CONTENT
   ========================================================= */

/* --------- 1) Brand tokens --------- */
:root {
  --brand-blue-dark: #214579;
  --brand-blue-main: #497cad;
  --brand-blue-light: #87c1e0;
  --brand-blue-soft: #c9e8f6;

  --brand-green: #1c916b;

  --brand-black: #1e1e1e;
  --brand-grey: #878786;

  --bg: #f6f9fb;
  --surface: #ffffff;
  --border: #e6eef3;
  --border-2: #d5e4ec;

  --text: #1e1e1e;
  --text-muted: #51606b;

  --shadow-sm: 0 4px 14px rgba(33,84,121,0.08);
  --shadow-md: 0 10px 30px rgba(33,84,121,0.10);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.25);

  --radius: 16px;
  --radius-sm: 12px;

}

/* --------- 2) Base page --------- */

.brunata-logo {
  display: block !important;
  margin: 16px 20px;
  margin-top: 16px;
}

.brunata-logo img {
  height: 40px;
  width: auto;
}

.navbar {
    display: none !important;
    height: 0 !important;
  min-height: 0 !important;
  }


h1.siteTitle {
  display: none !important;
}

html, body {
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: Calibri, "Segoe UI", Inter, system-ui, -apple-system, Arial, sans-serif;
  line-height: 1.55;
  padding-bottom: 110px; /* plads til sticky CTA */
}

/* --------- 3) HERO (primary header) --------- */

.quote-hero {
  padding: 2px 16px 56px;
  background: linear-gradient(
    to bottom,
    #f6f9fb 0%,
    #ffffff 100%
  );
  text-align: center;
  margin-bottom: 48px;
}

.quote-hero-eyebrow {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--brand-blue-dark);
  margin-bottom: 8px;
  text-transform: none;
  letter-spacing: normal;
  font-family: Calibri, sans-serif;
}

.quote-hero-title {
  margin: 0 0 20px 0;
  font-size: 2rem;
  font-weight: 600;
  color: var(--brand-blue-dark);
  font-family: Calibri, sans-serif;
}

.quote-hero-columns {
  display: flex;
  justify-content: space-between;
  max-width: 820px;
  margin: 0 auto;
  gap: 24px;
}

.quote-hero-left,
.quote-hero-right {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 1rem;
  color: var(--brand-blue-dark);
}

.quote-hero-left {
  text-align: left;
}

.quote-hero-right {
  text-align: right;
}

/* --------- 4) Quote text sections --------- */
.quote-section {
  max-width: 820px;
  margin: 0 auto 48px auto;
  text-align: left;
}

.quote-section-heading,
.product-descriptions h2 {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--brand-blue-dark);
  text-align: left;
  margin-bottom: 32px;
  font-family: Calibri, sans-serif;
  line-height: 1.3;
}

.quote-section-body {
  font-size: 17px;
  line-height: 1.7;
  color: #2a2f33;
  text-align: left;
  font-family: Calibri, sans-serif;
}

.quote-section-body p {
  font-family: Calibri, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: #2a2f33;
  margin: 0 0 1em 0;
  text-align: left;
}


/* Sektion med divider (fx proces) */
.quote-section-500 {
  border-top: 1px solid var(--border);
  padding-top: 18px;
}

/* Section 900 ("Flere muligheder"/"More options") - one-off styling per sales' request,
   2026-09-14: same width as the product-descriptions box (.product-descriptions, 1300px, vs. the
   normal .quote-section's 820px), and a subtly-visible highlight background - "Blue-4" is this
   design's name for --brand-blue-soft (#c9e8f6, defined at the top of this file); rgba() is used
   directly (rather than color-mix()) so the 50% opacity works without depending on newer browser
   support. */
.quote-section-900 {
  max-width: 1300px;
  /* No global box-sizing:border-box reset exists in this stylesheet (default content-box), so
     without this, the padding below would add 64px on top of max-width, rendering ~1364px wide -
     noticeably wider than .product-descriptions' exact 1300px (it has padding:0). border-box keeps
     the padding INSIDE the declared 1300px, matching it exactly. */
  box-sizing: border-box;
  background: rgba(201, 232, 246, 0.5);
  border-radius: var(--radius);
  padding: 28px 32px;
}

/* Heading intentionally left at the normal .quote-section-heading size (2026-09-14, sales' request
   to match the other section headings' size) - previously overridden here to the smaller
   product-desc-block h3 style; removed. No rule needed - it just inherits the shared style now. */

/* Debug-mode-only visual aid ("?debugTranslations=1" - see render.js's debugMode) - an outline
   around each section plus its code in the top-right corner, so PAGE_SECTION_ORDER changes
   (quotetextFallback.js) are easy to eyeball on the page. Opt-in via URL param only - never seen
   by a real customer. */
.quote-section-debug {
  position: relative;
  outline: 2px dashed #e07b39;
  outline-offset: 6px;
  margin-bottom: 64px;
}

.quote-section-debug-badge {
  position: absolute;
  top: -14px;
  right: -6px;
  background: #e07b39;
  color: #fff;
  font-family: monospace;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 8px;
  border-radius: 4px;
  z-index: 1;
  /* Was pointer-events:none from when this badge was purely decorative (before the click-to-open
     visibility-rule overlay existed, see render.js's debugBadge/ensureDebugOverlay) - that
     silently ate every click, so the overlay never opened. Removed 2026-09-14. A badge with no
     rule (no data-debug-rule attribute) still just does nothing on click - harmless. */
}

.section-body-text {
  /* NOT pre-wrap (was, until 2026-09-02) - this content is authored HTML (from Weblang), not
     freeform text, so a line break in the HTML SOURCE (added purely for readability while
     editing) must not become a visible line break on the page. pre-wrap treated every literal
     newline character in the stored HTML as meaningful, stacking on top of the normal <p> margins
     below and producing much larger gaps between paragraphs than intended. normal (the default)
     collapses source whitespace/newlines the standard HTML way, while a real <br> tag still forces
     a break regardless of this setting. See app.js's chat-bubble rendering for the one place
     pre-wrap IS correct - genuinely freeform, customer-typed text needs its own line breaks kept. */
  white-space: normal;
  margin-top: 1em;
}

.section-body-text ol {
  padding-left: 20px;
  margin: 0 0 1em 0;
  list-style-position: inside;
}

.section-body-text li {
  margin-bottom: 8px;
  line-height: 1.7;
  display: list-item;
}

.section-body-text li p {
  margin: 0 !important;
  display: inline;
}

.section-body-text a,
.quote-section-body a {
  color: var(--brand-blue-main);
  text-decoration: underline;
  font-weight: 600;
}

.section-body-text a:hover,
.quote-section-body a:hover {
  color: var(--brand-blue-dark);
}

/* --------- Produktbeskrivelser --------- */
.product-descriptions {
  max-width: 1300px;
  margin: 0 auto 48px auto;
  padding: 0;
}

.product-descriptions h2 {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
}


.product-desc-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: 24px 28px;
  margin-bottom: 16px;
}

.product-desc-block h3 {
  font-size: 1.1rem;
  font-weight: 650;
  color: var(--brand-blue-dark);
  margin: 0 0 10px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.product-desc-block p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0;
}

.product-desc-text p {
  text-align: left;
}

.product-desc-text h3 {
  text-align: left;
}

.product-descriptions .offer-table {
  margin-bottom: 0 !important;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* --------- 5) Offer table --------- */
.offer-table {
  width: 100%;
  max-width: 1300px;
  margin: 32px auto 40px auto;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.offer-table th,
.offer-table td {
  padding: 11px 12px;
  border: 1px solid var(--border-2);
  vertical-align: top;
}

.offer-table .grandparent-header td,
.offer-table .grandparent-header th {
  color: var(--brand-blue-dark);
  font-size: 1.1em;
  padding: 10px;
  font-weight: bold;
}

.offer-table .column-header th {
  background: var(--brand-blue-main);
  color: #eef5f9;
  font-weight: bold;
  text-align: left;
  border-top: none;
  border: 1px solid #c5d5e0;
}

.offer-table .parent-header td {
  background-color: #f0f4f8;
  font-weight: bold;
  padding: 6px 10px;
  text-align: left;
}

/* Gruppe header */
.group-header th {
  background: var(--brand-blue-dark);
  color: #fff;
  font-weight: 750;
  text-transform: uppercase;
  text-align: left;
  font-size: 13px;
  letter-spacing: 0.04em;
  border-color: rgba(255,255,255,0.10);
}

/* Zebra rows */
.offer-table tbody tr:nth-child(even):not(.subtotal-row):not(.sum-row):not(.total-incl):not(.parent-header) td {
  background: ##fbfdff;
}

/* Numeric columns */
.offer-table th:nth-child(n+3),
.offer-table td:nth-child(n+3) {
  text-align: right;
  white-space: nowrap;
}

/* Totals */
.subtotal-row td {
  font-weight: 450;
  text-align: left;
}

.sum-row td {
  background: #e7f1f6;
  font-weight: 500;
  text-align: left;
}

.total-incl td {
  background: var(  --brand-blue-soft);
  font-weight: 800;
  color: var(--brand-black);
  text-align: left;
}

/* --------- 6) Sticky accept bar --------- */
.sticky-accept-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 16px;
  text-align: center;
  z-index: 1000;
  background: linear-gradient(
    to top,
    rgba(246,249,251,0.96),
    rgba(246,249,251,0.72)
  );
  backdrop-filter: blur(7px);
  box-shadow: 0 -10px 30px rgba(33,84,121,0.10);
  border-top: 1px solid rgba(33,84,121,0.12);
}

/* Status-tekst */
.accept-status {
  color: #1c916b;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* --------- 7) Accept button (delt base) --------- */
#acceptQuoteBtn,
.acceptQuoteBtn.disabled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 36px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 999px;
  border: none;
  letter-spacing: 0.3px;
  user-select: none;
  border-radius: 14px !important;
}

#acceptQuoteBtn {
  background-color: var(--brand-green);
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(28,145,107,0.35);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

#acceptQuoteBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(28,145,107,0.45);
}

#acceptQuoteBtn:disabled {
  cursor: not-allowed;
  opacity: 0.85;
}

.acceptQuoteBtn.disabled {
  background-color: #e5e7eb;
  color: #6b7280;
  border: 1px solid #d1d5db;
  cursor: not-allowed;
  opacity: 0.9;
}

.quote-already-accepted {
  max-width: 720px;
  margin: 48px auto;
  padding: 20px 24px;
  background: #f0faf6;
  border: 1px solid #cce9dd;
  border-radius: 12px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: #1c916b;
  border-radius: 14px !important;
}

#askQuestionBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 36px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 999px;
  border: none;
  letter-spacing: 0.3px;
  user-select: none;
  background-color: var(--brand-blue-main);
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(73,124,173,0.35);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  border-radius: 14px !important;
}

#askQuestionBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(73,124,173,0.45);
}

/* --------- 8) Modal --------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.modal-overlay.is-open {
  display: flex;
}

.modal-box {
  background: var(--surface);
  max-width: 520px;
  width: 100%;
  padding: 26px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(33,84,121,0.12);
}

.modal-box label {
  display: block;
  margin-top: 14px;
  font-weight: 650;
  color: var(--brand-blue-dark);
  text-align: left;
}

.modal-box input {
  width: 100%;
  padding: 11px 12px;
  margin-top: 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fbfdff;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 22px;
}

.modal-actions .primary {
  background: var(--brand-green);
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 13px;
  font-family: inherit;
  box-shadow: 0 10px 18px rgba(28,145,107,0.22);
}

.modal-actions .secondary {
  background: #eef2f5;
  border: 1px solid #e2e8ee;
  padding: 8px 14px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 13px;
  font-family: inherit;
  color: #2a2f33;
}

.modal-actions {
  display: flex;
  justify-content: center !important;
  gap: 12px;
  margin-top: 22px;
}

/* --------- 9) Responsive --------- */
@media (max-width: 640px) {
  .quote-hero {
    padding: 56px 16px 40px;
  }

  .quote-hero-title {
    font-size: 1.6rem;
  }

  #acceptQuoteBtn {
    width: 100%;
    max-width: 520px;
    font-size: 18px;
  }

  .offer-table {
    font-size: 13px;
  }
}


/* --------- 11) Language switcher --------- */
.language-switcher {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1000;
}

.language-switcher button {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--brand-blue-dark);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  font-family: inherit;
}

.language-switcher button:hover {
  background: var(--brand-blue-soft);
}

.language-switcher ul {
  list-style: none;
  margin: 6px 0 0 0;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  min-width: 140px;
}

.language-switcher ul li a {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
}

.language-switcher ul li a:hover {
  background: var(--brand-blue-soft);
  color: var(--brand-blue-dark);
}

.product-desc-inner {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-direction: row-reverse;
}

.product-desc-img {
  width: 140px;
  height: 140px;
  object-fit: contain;
  border-radius: 8px;
  flex-shrink: 0;
  background: var(--bg);
  padding: 8px;
  border: 1px solid var(--border);
}

.product-desc-text {
  flex: 1;
}

.product-desc-text h3 {
  font-size: 1.1rem;
  font-weight: 650;
  color: var(--brand-blue-dark);
  margin: 0 0 10px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.product-desc-text p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0 0 12px 0;
}

.product-desc-link {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--brand-blue-main);
  text-decoration: none;
}

.product-desc-link:hover {
  color: var(--brand-blue-dark);
  text-decoration: underline;
}

/* --------- 12) Print to PDF --------- */
.print-pdf-btn {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1001;
  background: var(--brand-blue-main);
  color: #fff;
  border: none;
  padding: 14px 24px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(73,124,173,0.35);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.print-pdf-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(73,124,173,0.45);
}

@media (max-width: 640px) {
  .product-desc-inner {
    flex-direction: column;
  }

  .product-desc-img {
    width: 100%;
    height: 180px;
  }
}

@page {
  margin: 1cm;
}

@media print {
  /* Only hide interactive/UI chrome that makes no sense on paper - NOT the quote's actual
     content. The previous version of this rule also hid .product-descriptions,
     .quote-section-body, .quote-section-heading, .quote-section img and .quote-farewell, which
     meant "Print som PDF" produced a PDF missing almost the entire quote (just the hero + price
     tables) - fixed 2026-08-29 so the full quote prints. */
  .sticky-accept-bar,
  .language-switcher,
  #askQuestionBtn,
  .print-pdf-btn,
  .modal-overlay,
  [style*="background:#fffbe6"],
  #launcher,
  [class*="chat"],
  [class*="widget"],
  iframe {
    display: none !important;
  }

  body {
    padding-bottom: 0 !important;
    background: #fff !important;
  }

  .quote-hero {
    background: none !important;
  }

  /* Avoid splitting a section heading from its body, or a product-description card, across a
     page break where it can be helped. */
  .quote-section,
  .product-desc-block {
    page-break-inside: avoid;
  }

  .quote-section-body a,
  .product-desc-link {
    color: var(--brand-blue-dark) !important;
    text-decoration: underline;
  }

  .offer-table {
    page-break-inside: avoid;
    font-size: 12px;
    border-radius: 0;
    box-shadow: none;
    border: 1px solid #ccc;
  }

  .offer-table .column-header th {
    background: var(--brand-blue-dark) !important;
    color: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .offer-table .grandparent-header td {
    color: var(--brand-blue-main) !important;
    font-weight: bold;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .offer-table .total-incl td {
    background: var(--brand-blue-soft) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .product-desc-block {
    box-shadow: none;
    border: 1px solid #ccc;
  }
}