/**
 * Popup overrides. This file loads after Fancybox and the chart stylesheet.
 */

.fancybox__slide:has(.mtc-fb-content) {
  overflow-x: hidden;
}

.mtc-fancybox {
  --f-toolbar-color: #f4f0ec;
  --f-toolbar-font: "Source Sans 3", var(--main-font), Arial, sans-serif;
  --f-toolbar-font-size: 15px;
  --f-toolbar-font-weight: 600;
  --f-toolbar-text-shadow: none;
  --f-toolbar-padding: 8px 8px 0;
  --f-button-color: #f4f0ec;
  --f-button-bg: transparent;
  --f-button-hover-bg: rgba(244, 240, 236, 0.16);
  --f-button-width: 40px;
  --f-button-height: 40px;
  --f-button-border-radius: 0;
  --f-counter-padding: 0 8px;
}

.mtc-fancybox .f-counter {
  letter-spacing: 0.04em;
}

.f-html:has(.mtc-fb-content) {
  --f-html-padding: 0;
  --f-html-margin: 0;
  --f-html-bg: #f4f0ec;
  padding: 0;
  margin: 0;
  width: min(650px, 100%);
  max-width: 100%;
  height: auto;
  background: #f4f0ec;
  color: #2f414e;
}

.mtc-fb-content {
  width: 100%;
  max-width: 650px;
  padding: 24px 0 0px;
  background: #f4f0ec;
  color: #2f414e;
  font-family: "Source Sans 3", var(--main-font), Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
}

.mtc-fb-content h2.mtc-tooth-heading {
  margin: 0 0 28px;
  padding: 0 36px;
  color: #cb7b52;
  font-family: "Source Serif 4", Georgia, serif;
  font-weight: 400;
  font-style: normal;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.02em;
}

.mtc-fb-content h2.mtc-tooth-heading span,
.mtc-fb-content h2.mtc-tooth-heading strong {
  display: block;
  font-weight: 400;
  font-style: normal;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: 0;
  color: #cb7b52;
}

.mtc-fb-content h2.mtc-tooth-heading span {
  margin-bottom: 6px;
}

.mtc-fb-content h2.mtc-tooth-heading strong {
  margin-top: 10px;
}

.mtc-tooth-panel {
  background: #d6e7ea;
  padding: 36px 36px;
}

.mtc-tooth-field + .mtc-tooth-field {
  margin-top: 36px;
}

.mtc-tooth-label {
  margin: 0 0 6px;
  color: #2f414e;
  font-family: "Source Sans 3", var(--main-font), Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mtc-tooth-value {
  margin: 0;
  color: #2f414e;
  font-family: "Source Sans 3", var(--main-font), Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.45;
  letter-spacing: 0;
}

.mtc-tooth-value img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-top: 4px;
}

@media (max-width: 640px) {
  .mtc-fb-content h2.mtc-tooth-heading {
    padding-left: 20px;
    padding-right: 20px;
  }

  .mtc-tooth-panel {
    padding-left: 20px;
    padding-right: 20px;
  }
}