@charset "UTF-8";
/* ============================================================================
   overrides.css — presentation layer applied on top of the prebuilt React
   bundle in /assets/index.js.

   NOTE: the @charset above must stay on line 1, before this comment, so the
   literal curly quotes and em dashes in `content` values below are decoded
   correctly. Do not use CSS hex escapes for them — an escape like \201C
   followed by a letter that is also a hex digit ("As") is parsed as one
   5-digit codepoint and renders a CJK character instead.

   WHY THIS FILE EXISTS
   The front end is a compiled bundle that cannot be rebuilt from this repo, so
   changes that are purely visual are made here instead of in component code.
   Everything below therefore hooks onto classes and DOM order that the bundle
   produces. Two consequences worth knowing:

     1. Selectors are structural (`:nth-child`, Tailwind class names). If the
        bundle is ever rebuilt with reordered pricing cards or different
        utility classes, these rules go stale silently — they will stop
        matching rather than error.
     2. Verified against the bundle on 2026-09-03: #treatments contains exactly
        one `.grid.items-stretch` with 4 children, in this order —
        1 Single Dental Implant · 2 Snap-On Dentures · 3 Essential Arch ·
        4 Signature Zirconia — plus exactly one footnote at
        `.mt-8.text-center > p.text-sm.text-gray-600`.

   Linked from every page shell in src/pages/. Served straight from /public.
   ========================================================================== */


/* ---------------------------------------------------------------------------
   1. Sell With Chat (ApexChat) layout fixes
   The widget injects its invitation bar with inline `bottom: 0` at
   z-index 9999999, outside the React tree — hence `!important` on IDs.
   ------------------------------------------------------------------------- */

/* Below lg the site has its own fixed Call / Book bar (56px tall) pinned to
   bottom-0. Without this offset the chat bar sits directly on top of it and
   hides the only always-visible CTAs on mobile. */
@media (max-width: 1023.98px) {
  #apexchat_bar_invitation_wrapper,
  #apexchat_bar_invitation_frame {
    bottom: 56px !important;
  }
}

/* The booking modal locks scrolling by setting `overflow: hidden` inline on
   <body>, which is the only signal available for "modal is open". The chat bar
   outranks the modal (z-index 9999999 vs 200) and would cover its submit
   button, so hide it for as long as the modal is up. */
body[style*="overflow: hidden"] #apexchat_bar_invitation_wrapper,
body[style*="overflow: hidden"] #apexchat_bar_invitation_frame {
  display: none !important;
}


/* ---------------------------------------------------------------------------
   2. Pricing tier hover reveal — illustration + monthly payment

   Hovering a tier fades in a panel carrying that procedure's illustration on
   the left, its monthly figure beside it, and the financing term beneath.

   THE MONTHLY FIGURES
   Two financing programs exist: a 0% APR promotional plan over shorter terms,
   and a 60-month plan at 20.8% APR. The 60-month plan produces the lowest
   monthly payment, so it is the one "As Low As" refers to — and the term is
   stated on the panel because a monthly payment amount is a triggering term
   under Reg Z, which requires the repayment terms alongside it.

   Amounts are standard amortization, M = P·r / (1 − (1+r)^−n), r = 0.208/12,
   n = 60:
       $3,499  ->  $94/mo        $18,700  ->  $504/mo
       $7,300  -> $197/mo        $25,000  ->  $674/mo
   Do not "round down" these figures. Understating an advertised payment is the
   specific thing the disclosure exists to prevent.

   LAYOUT
   Anchored to the card's vertical centre rather than a pixel offset from the
   top, so it lands in the same place whether the grid is at 4, 2 or 1 column —
   leaving the tier name, the total price and the CTA button all visible.
   `pointer-events: none` keeps the CTA clickable underneath.

   The panel is ::after; the small term line is ::before, painted above it.
   ------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
  /* --- the panel --- */
  #treatments .grid.items-stretch > div::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 14px;
    right: 14px;
    height: 112px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding-left: 100px;
    padding-right: 12px;
    /* lifts the two big lines to make room for the ::before term line */
    padding-bottom: 24px;
    border-radius: 12px;
    background-color: #F1F8FC;
    background-repeat: no-repeat;
    background-position: 14px center;
    /* Constrained by WIDTH, not height: the four illustrations range from
       240x182 to 500x500, and only a fixed width keeps every one inside the
       100px gutter reserved for it. At 76px wide the tallest (1:1) renders
       76px high, still clear of the 112px panel. */
    background-size: 76px auto;
    font-family: var(--font-body), system-ui, -apple-system, sans-serif;
    font-size: 14px;
    font-weight: 700;
    /* "As Low As $504/mo" does not fit the ~142px text column at the
       4-column breakpoint, so the label is broken deliberately rather than
       left to wrap unevenly. */
    white-space: pre-line;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: #0D1B2A;
    box-shadow:
      0 0 0 1px rgba(22, 114, 165, 0.14),
      0 12px 30px -14px rgba(13, 27, 42, 0.5);
    opacity: 0;
    transform: translateY(-50%) scale(0.96);
    transition: opacity 0.22s ease, transform 0.22s ease;
    pointer-events: none;
    z-index: 4;
  }

  /* --- the term line, sitting inside the panel near its lower edge --- */
  #treatments .grid.items-stretch > div::before {
    content: "60 mos. at 20.8% APR";
    position: absolute;
    top: calc(50% + 28px);
    left: 114px;
    right: 26px;
    font-family: var(--font-body), system-ui, -apple-system, sans-serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0;
    color: #5B6E7E;
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 0.22s ease, transform 0.22s ease;
    pointer-events: none;
    z-index: 5;
  }

  /* focus-within so keyboard users reaching the card's CTA get it too */
  #treatments .grid.items-stretch > div:hover::after,
  #treatments .grid.items-stretch > div:focus-within::after {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
  #treatments .grid.items-stretch > div:hover::before,
  #treatments .grid.items-stretch > div:focus-within::before {
    opacity: 1;
    transform: scale(1);
  }

  #treatments .grid.items-stretch > div:nth-child(1)::after {
    content: "As Low As\A $94/mo";
    background-image: url("/images/tier-single-implant.webp");
  }
  #treatments .grid.items-stretch > div:nth-child(2)::after {
    content: "As Low As\A $197/mo";
    background-image: url("/images/tier-snap-on-dentures.webp");
  }
  #treatments .grid.items-stretch > div:nth-child(3)::after {
    content: "As Low As\A $504/mo";
    background-image: url("/images/tier-essential-arch.webp");
  }
  #treatments .grid.items-stretch > div:nth-child(4)::after {
    content: "As Low As\A $674/mo";
    background-image: url("/images/tier-signature-zirconia.webp");
  }

  @media (prefers-reduced-motion: reduce) {
    #treatments .grid.items-stretch > div::after {
      transition: opacity 0.22s ease;
      transform: translateY(-50%);
    }
    #treatments .grid.items-stretch > div:hover::after,
    #treatments .grid.items-stretch > div:focus-within::after {
      transform: translateY(-50%);
    }
    #treatments .grid.items-stretch > div::before,
    #treatments .grid.items-stretch > div:hover::before,
    #treatments .grid.items-stretch > div:focus-within::before {
      transition: opacity 0.22s ease;
      transform: none;
    }
  }
}

/* Touch devices have no hover at all, and most of this traffic is mobile — so
   surface the monthly figure inline under the price instead of hiding it
   behind an interaction that cannot happen. Appends to the existing
   "per arch · 0% financing available" line. The term for these is carried by
   the always-visible section footnote below. */
@media (hover: none) {
  #treatments .grid.items-stretch > div .mb-5 > .text-xs.text-gray-500::after {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #1672A5;
  }
  #treatments .grid.items-stretch > div:nth-child(1) .mb-5 > .text-xs.text-gray-500::after {
    content: "As Low As $94/mo";
  }
  #treatments .grid.items-stretch > div:nth-child(2) .mb-5 > .text-xs.text-gray-500::after {
    content: "As Low As $197/mo";
  }
  #treatments .grid.items-stretch > div:nth-child(3) .mb-5 > .text-xs.text-gray-500::after {
    content: "As Low As $504/mo";
  }
  #treatments .grid.items-stretch > div:nth-child(4) .mb-5 > .text-xs.text-gray-500::after {
    content: "As Low As $674/mo";
  }
}


/* ---------------------------------------------------------------------------
   3. Financing disclosure — always visible

   The hover panel only exists on hover, and not at all on touch, so the full
   disclosure lives on the section footnote where every visitor sees it on
   every device. It distinguishes the two programs, because a card reading
   "$18,700 · 0% financing available" next to "As Low As $504/mo" would
   otherwise imply the monthly figure is the 0% plan — at a true 0% over 60
   months an $18,700 arch would be $312/mo, not $504.
   ------------------------------------------------------------------------- */

#treatments .mt-8.text-center > p.text-sm.text-gray-600::after {
  content: "“As Low As” amounts are the 60-month plan at 20.8% APR on approved credit. 0% APR financing is also available over 12 months — ask which plan you qualify for.";
  display: block;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: #6B7C8C;
}


/* ---------------------------------------------------------------------------
   4. "Transparent Pricing" statement

   Moved out of the section header and below the pricing cards (bundle patch in
   TreatmentPaths), reclassed to `wm4d-pricing-statement` so it can be styled
   here rather than depending on Tailwind utilities that may not survive the
   compiled index.css purge.
   ------------------------------------------------------------------------- */

.wm4d-pricing-statement {
  margin: 40px auto 0;
  max-width: 60ch;
  padding: 30px 34px;
  border-radius: 16px;
  background: #FFFFFF;
  border: 1px solid rgba(22, 114, 165, 0.18);
  box-shadow: 0 10px 30px -18px rgba(13, 27, 42, 0.35);
  text-align: center;
  font-family: var(--font-body), system-ui, sans-serif;
  font-size: 20px;
  line-height: 1.5;
  color: #33475B;
  text-wrap: pretty;
}

.wm4d-pricing-statement strong {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-display), Georgia, serif;
  font-size: 30px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #0D1B2A;
}

@media (max-width: 640px) {
  .wm4d-pricing-statement { padding: 24px 20px; font-size: 17px; }
  .wm4d-pricing-statement strong { font-size: 25px; }
}

/* ---------------------------------------------------------------------------
   5. Lender logos are no longer outbound links

   The bundle now passes href={null} for each lender, so React omits the
   attribute and the <a> is inert. The element keeps its link-ish affordances
   though, so remove the pointer cursor and hover fade that imply clickability.
   ------------------------------------------------------------------------- */

#root a:not([href]) {
  cursor: default;
}
#root a:not([href]):hover {
  opacity: 1 !important;
}