/* ==========================================================================
   OPTIV — compact booking calendar box
   Sits in the right-hand banner column of the health goal pages, directly
   under the intro copy and CTA. Scoped to .ovcal-box
   ========================================================================== */

.ovcal-box {
  --ink:         #141714;
  --accent:      #7bfb8e;
  --accent-soft: #e6fced;
  --accent-mid:  #b6f7c4;
  --accent-deep: #14742d;
  --muted:       #6a706a;
  --hairline:    rgba(20, 23, 20, 0.12);

  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  margin-top: 18px;
  max-width: 420px;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 36px -30px rgba(20, 23, 20, 0.5);
}

.ovcal-box *, .ovcal-box *::before, .ovcal-box *::after { box-sizing: border-box; }

.ovcal-box-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 16px;
  background: var(--accent-soft);
  border-bottom: 1px solid var(--accent-mid);
}
.ovcal-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-deep);
  flex: none;
}
.ovcal-box-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--accent-deep);
  line-height: 1.3;
}

.ovcal-frame {
  position: relative;
  background: #fff;
  /* No fixed height: GoHighLevel's form_embed.js sets this inline to match
     the widget's real content, so the calendar can't be clipped. The value
     below is only what shows before that script reports back. */
  overflow: visible;
}
.ovcal-iframe {
  display: block;
  width: 100%;
  height: 820px;
  border: 0;
}

/* Standalone placement (TRT page and the fallback) gets its own breathing room */
.ovcal-loose {
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding: 0 clamp(20px, 4vw, 32px) clamp(32px, 4vw, 56px);
}
.ovcal-loose .ovcal-box { margin-top: 0; max-width: 760px; margin-inline: auto; }

/* The banner column is narrow — let the box use its full width there */
.inner-banner .ovcal-box { max-width: none; }

@media (max-width: 991px) {
  .ovcal-box { max-width: 480px; margin-inline: auto; }
}

@media (max-width: 767px) {
  .ovcal-box { margin-top: 16px; border-radius: 14px; }
  .ovcal-iframe { height: 900px; }
  .ovcal-box-title { font-size: 12.5px; }
}