/* =========================================================================
   FrontOffice shared contact module — "Call or text us" affordance + chooser
   Reusable across client sites. Themeable via CSS custom properties (below);
   each site's build copies this file in, so there is NO runtime host dependency.
   ========================================================================= */
:root {
  --fo-accent: #C02222;         /* primary CTA (call)      */
  --fo-accent-ink: #ffffff;
  --fo-accent-hover: #a81d1d;
  --fo-navy: #1D3B6A;           /* secondary (text)        */
  --fo-ink: #1b2430;
  --fo-muted: #6b7686;
  --fo-line: #e6e9ef;
  --fo-tint: #eef3fa;
  --fo-radius: 14px;
  --fo-font: inherit;
}

/* ---- Trigger: discoverable "Call or text us" pill ---------------------- */
.fo-contact {
  font-family: var(--fo-font);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
button.fo-contact { background: none; border: 0; }

.fo-contact--pill {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .42rem .7rem .42rem .8rem;
  border: 1px solid var(--fo-line); border-radius: 999px; background: #fff;
  line-height: 1; transition: border-color .18s ease, background .18s ease;
}
.fo-contact--pill:hover { border-color: var(--fo-navy); background: var(--fo-tint); }
.fo-contact--pill .fo-contact__ic { width: 16px; height: 16px; color: var(--fo-navy); flex: none; }
/* Number + label stack as two lines (keeps the pill narrow so it doesn't widen
   the header). Hide .fo-contact__label per breakpoint to show the number alone. */
.fo-contact__text { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.12; gap: 1px; }
.fo-contact__num { color: var(--fo-navy); font-weight: 700; font-size: .95rem; white-space: nowrap; }
.fo-contact__label {
  color: var(--fo-muted); font-size: .64rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; white-space: nowrap;
}
.fo-contact__caret {
  width: 11px; height: 11px; color: var(--fo-muted); flex: none;
  transition: transform .2s ease;
}
.fo-contact[aria-expanded="true"] .fo-contact__caret { transform: rotate(180deg); }

/* ---- Chooser: shared shell -------------------------------------------- */
.fo-chooser[hidden] { display: none; }
.fo-chooser__row {
  display: flex; align-items: center; justify-content: center; gap: .7rem;
  padding: .85rem 1rem; border-radius: 999px; font-family: var(--fo-font);
  font-weight: 700; font-size: 1rem; line-height: 1; text-decoration: none;
  border: 2px solid transparent; transition: background .15s ease, transform .15s ease;
}
.fo-chooser__row .fo-ic { width: 18px; height: 18px; flex: none; }
.fo-chooser__row--call { background: var(--fo-accent); color: var(--fo-accent-ink); box-shadow: 0 6px 18px rgba(192,34,34,.28); }
.fo-chooser__row--call:hover { background: var(--fo-accent-hover); color: var(--fo-accent-ink); }
.fo-chooser__row--text { background: #fff; color: var(--fo-navy); border-color: var(--fo-navy); }
.fo-chooser__row--text:hover { background: var(--fo-tint); }
.fo-chooser__row--primary { background: var(--fo-navy); color: #fff; box-shadow: 0 6px 18px rgba(29,59,106,.25); }
.fo-chooser__row--primary:hover { background: #16305a; color: #fff; }

/* ---- Desktop: popover anchored under the trigger ---------------------- */
.fo-chooser--popover {
  position: absolute; z-index: 120; width: 260px; background: #fff;
  border: 1px solid var(--fo-line); border-radius: var(--fo-radius);
  box-shadow: 0 18px 44px rgba(20,42,77,.18); padding: 14px;
  display: grid; gap: 10px; animation: fo-pop .16s ease;
}
.fo-chooser--popover .fo-chooser__num { font-weight: 800; color: var(--fo-ink); font-size: 1.15rem; text-align: center; }
.fo-chooser--popover .fo-chooser__hint { font-size: .78rem; color: var(--fo-muted); text-align: center; margin: -2px 0 2px; }
@keyframes fo-pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---- Mobile: bottom sheet -------------------------------------------- */
.fo-sheet { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-end; justify-content: center; }
.fo-sheet__backdrop { position: absolute; inset: 0; background: rgba(20,42,77,.55); backdrop-filter: blur(2px); }
.fo-sheet__panel {
  position: relative; width: 100%; max-width: 440px; background: #fff;
  border-radius: var(--fo-radius) var(--fo-radius) 0 0;
  padding: 22px 20px calc(20px + env(safe-area-inset-bottom));
  box-shadow: 0 -12px 40px rgba(20,42,77,.28); display: grid; gap: 12px; animation: fo-up .22s ease;
}
.fo-sheet__grip { width: 36px; height: 4px; border-radius: 999px; background: #d2d6de; margin: 0 auto 6px; }
.fo-sheet__num { text-align: center; color: var(--fo-ink); font-size: 1.5rem; font-weight: 800; margin: 0; letter-spacing: -.01em; }
.fo-sheet__hint { text-align: center; color: var(--fo-muted); font-size: .88rem; margin: 0 0 4px; }
.fo-sheet__cancel { background: none; border: 0; color: var(--fo-muted); font-family: var(--fo-font); font-size: .95rem; font-weight: 600; padding: 8px; cursor: pointer; }
.fo-sheet__cancel:hover { color: var(--fo-ink); }
@keyframes fo-up { from { transform: translateY(100%); } to { transform: none; } }

.fo-noscroll { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .fo-chooser--popover, .fo-sheet__panel { animation: none; }
}