/* Cherry payment-plan widget (Insurance & Financing page).
   The widget keeps Cherry's own proportions and is shown at two thirds of its normal size on a computer (phones use Cherry's own phone layout). */
.cherry-financing {
  margin: var(--space-8, 2rem) 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}
.cherry-financing__intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8, 2rem);
  max-width: 1080px;
  margin-bottom: var(--space-6);
}
.cherry-financing__head {
  max-width: 46rem;
}
.cherry-financing__qr {
  margin: 0;
  flex: 0 0 auto;
  width: 8.5rem;
  text-align: center;
}
.cherry-financing__qr img {
  display: block;
  width: 8.5rem;
  height: 8.5rem;
  background: #fff;
  padding: 0.4rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}
.cherry-financing__qr figcaption {
  margin-top: var(--space-2);
  font-size: var(--text-xs, 0.75rem);
  line-height: 1.4;
  color: var(--color-text-muted);
}
/* A phone is already the device that would scan it. */
@media (max-width: 800px) {
  .cherry-financing__qr {
    display: none;
  }
}
.cherry-financing__head h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}
.cherry-financing__head p {
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0;
}
/* The widget draws a light card; in dark mode it sits on a light panel so it stays readable. */
.cherry-financing__panel {
  background: #fff;
  color: #10233a;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  width: 100%;
  min-height: 10rem;
  padding: 24px;
  overflow: hidden;
}
.cherry-financing__note {
  margin: var(--space-4) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-faint);
}

/* Remove only the widget's own outer whitespace. If Cherry ever renames these ids the
   widget simply shows with its own spacing. */
.cherry-financing #widget-layout {
  padding: 0 !important;
}
.cherry-financing #widgets-container {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Cherry leaves a very large blank band above and below each part; keep a smaller one. */
.cherry-financing #widgets-container section {
  padding: 32px 0 !important;
}

/* Everything inside scales together (text, photo, buttons), so proportions stay as designed. */
@media (min-width: 801px) {
  .cherry-financing__panel {
    zoom: 0.667;
  }
}

/* Spacing around the widget: the page's own paragraph and heading margins were stacking up. */
.cherry-financing {
  margin: var(--space-6) 0 0;
}
.cherry-financing .cherry-financing__note {
  margin: var(--space-3) 0 0 !important;
}
.cherry-financing #widgets-container section:last-child {
  padding-bottom: 0 !important;
}
.cherry-financing + h2 {
  margin-top: var(--space-8) !important;
}

/* Dark theme: use the site's blue-tinted surface with light text so the widget blends into the page.
   The widget's own colors are flipped (dark text becomes light) and its photo is flipped back. */
[data-theme='dark'] .cherry-financing__panel {
  background: var(--color-surface-2);
  border-color: var(--color-border);
  color: #fff;
}
[data-theme='dark'] .cherry-financing__panel > div {
  filter: invert(1) hue-rotate(180deg);
}
[data-theme='dark'] .cherry-financing__panel img {
  filter: invert(1) hue-rotate(180deg);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .cherry-financing__panel {
    background: var(--color-surface-2);
    border-color: var(--color-border);
    color: #fff;
  }
  :root:not([data-theme]) .cherry-financing__panel > div {
    filter: invert(1) hue-rotate(180deg);
  }
  :root:not([data-theme]) .cherry-financing__panel img {
    filter: invert(1) hue-rotate(180deg);
  }
}

/* The page's generic section padding added a large blank band under the widget. */
.cherry-financing {
  padding: var(--space-6) 0 0 !important;
}

.cherry-financing__panel [data-cw='clear'] {
  background-color: transparent !important;
}