/* Online HTML quote width. Deliberately excluded from tablet/mobile and PDF surfaces. */
.tq-online-quote-width {
  --tq-online-document-width: 960px;
  --tq-rendered-body-max-width: none;
  display: block;
  width: min(100%, var(--tq-online-document-width));
  min-width: 0;
  max-width: var(--tq-online-document-width);
  margin-inline: auto;
}

.tq-online-quote-width[data-online-quote-width="wide"] {
  --tq-online-document-width: 1280px;
}

.tq-online-quote-width[data-online-quote-width="extra-wide"] {
  --tq-online-document-width: 1440px;
}

.tq-online-quote-width[data-template-layout="journeyCollection"][data-online-quote-width="wide"] {
  --tq-online-document-width: 1180px;
}

.tq-online-quote-width[data-template-layout="journeyCollection"][data-online-quote-width="extra-wide"] {
  --tq-online-document-width: 1360px;
}

.tq-online-quote-width[data-template-layout="luxury-package"] {
  --tq-rendered-body-max-width: 794px;
}

.tq-online-quote-width[data-template-layout="luxury-cruise"] {
  --tq-rendered-body-max-width: 1020px;
}

.tq-online-quote-width:is([data-template-layout="stormlisa"], [data-template-layout="signature"], [data-template-layout="luxuryCollection"]) {
  --tq-rendered-body-max-width: 1180px;
}

/* Header, renderer root and footer are one width-controlled document. */
.tq-online-quote-width > * {
  box-sizing: border-box;
  width: 100% !important;
  max-width: var(--tq-rendered-body-max-width) !important;
  margin-inline: auto;
}

.tq-online-quote-width > .cruise-timeline-template > .ct-document-shell {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

/* The wizard frame reflects the saved width without changing public or PDF surfaces. */
.tq-horizon #newQuoteTab #previewSaveSection #quotePreviewArea[data-preview-quote-width] {
  --tq-preview-frame-width: 960px;
  width: min(var(--tq-preview-frame-width), calc(100vw - 64px));
  max-width: none;
  margin-inline: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
}

.tq-horizon #newQuoteTab #previewSaveSection #quotePreviewArea[data-preview-quote-width="wide"] {
  --tq-preview-frame-width: 1280px;
}

.tq-horizon #newQuoteTab #previewSaveSection #quotePreviewArea[data-preview-quote-width="extra-wide"] {
  --tq-preview-frame-width: 1440px;
}

.tq-journey-preview[data-preview-quote-width] {
  --tq-journey-preview-width: 960px;
  width: min(var(--tq-journey-preview-width), calc(100vw - 64px));
  max-width: none;
  margin-inline: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
}

.tq-journey-preview[data-preview-quote-width="wide"] { --tq-journey-preview-width: 1180px; }
.tq-journey-preview[data-preview-quote-width="extra-wide"] { --tq-journey-preview-width: 1360px; }

@media screen and (max-width: 1100px) {
  .tq-horizon #newQuoteTab #previewSaveSection #quotePreviewArea[data-preview-quote-width] {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    transform: none;
  }
  .tq-journey-preview[data-preview-quote-width] { width:100%;max-width:100%;margin-inline:0;transform:none; }
}

@media screen and (min-width: 1101px) {
  .client-quote-shell[data-online-quote-width="wide"] {
    max-width: min(1280px, calc(100vw - 48px));
  }

  .client-quote-shell[data-online-quote-width="extra-wide"] {
    max-width: min(1440px, calc(100vw - 48px));
  }

  .tq-online-quote-width {
    overflow-x: clip;
  }

  /* Let established branding and contact regions spend the added width on content. */
  .tq-online-quote-width:not([data-online-quote-width="standard"]) .executive-header-inner,
  .tq-online-quote-width:not([data-online-quote-width="standard"]) .modern-topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, max-content);
    align-items: center;
  }

  .tq-online-quote-width:not([data-online-quote-width="standard"]) .executive-brand,
  .tq-online-quote-width:not([data-online-quote-width="standard"]) .modern-branding,
  .tq-online-quote-width:not([data-online-quote-width="standard"]) .modern-brand-copy,
  .tq-online-quote-width:not([data-online-quote-width="standard"]) .executive-contact,
  .tq-online-quote-width:not([data-online-quote-width="standard"]) .modern-contact-small,
  .tq-online-quote-width:not([data-online-quote-width="standard"]) .tq-signature-header-slot,
  .tq-online-quote-width:not([data-online-quote-width="standard"]) .tq-jc-header > * {
    min-width: 0;
  }

  .tq-online-quote-width:not([data-online-quote-width="standard"]) .modern-contact-small {
    max-width: none;
    flex-basis: auto;
  }

  .tq-online-quote-width:not([data-online-quote-width="standard"]) :is(
    .executive-brand h1,
    .executive-contact,
    .modern-business-name,
    .modern-contact-value,
    .blackboard-brand h1,
    .blackboard-contact-item strong,
    .ct-brand-name,
    .ct-contact-row,
    .dp-brand-name,
    .dp-contact,
    .dmag-brand,
    .tq-signature-header-value,
    .tq-signature-header-item--business-name,
    .tq-jc-header address
  ) {
    overflow-wrap: anywhere;
  }

  .tq-online-quote-width:not([data-online-quote-width="standard"]) .tq-jc-header {
    grid-template-columns: minmax(240px, 1.25fr) minmax(260px, 1fr) auto;
  }
}

.tq-online-quote-width-setting {
  margin-top: 16px;
}

.tq-journey-width-control {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
}

.tq-journey-width-control label span {
  display: block;
  margin-top: 5px;
  color: #526173;
  font-size: .85rem;
}

.tq-journey-width-control select {
  width: min(240px, 100%);
}

@media (max-width: 700px) {
  .tq-journey-width-control {
    align-items: stretch;
    flex-direction: column;
  }
}