/* Drop 1173: the clock on pages that ask for an email code — how long the code stays good, then how long is left to
   finish the form, turning into an alert with Extend near the end. Colors come from the site's own tokens. */
.fclk {
  --fclk-warn: #B7791F; --fclk-out: #C0392B;
  /* fixed, so it stays in sight on long forms whatever block it was printed in */
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px)); z-index: 210;
  width: min(36rem, calc(100% - 2rem)); box-sizing: border-box;
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .8rem;
  margin: 0; padding: .65rem .95rem; border-radius: 14px;
  border: 1px solid var(--border-2, rgba(11, 18, 38, .15));
  background: var(--bg-card, #fff); color: var(--fg-2, #3A4258);
  font-size: .9rem; line-height: 1.45;
  box-shadow: 0 10px 30px rgba(11, 18, 38, .16);
}
.fclk[hidden] { display: none; }
.fclk-ic { display: inline-flex; width: 1.15rem; height: 1.15rem; color: var(--accent, #C98E1F); flex: none; }
.fclk-ic svg { width: 100%; height: 100%; }
.fclk-txt { flex: 1 1 14rem; min-width: 0; }
.fclk-time { font-variant-numeric: tabular-nums; color: var(--fg, #0B1226); font-weight: 700; letter-spacing: .02em; }
.fclk-note { display: block; margin-top: .15rem; font-size: .84em; }
.fclk-note:empty { display: none; }
.fclk-btn {
  flex: none; padding: .45rem 1rem; border-radius: 9px; border: 1px solid var(--accent, #C98E1F);
  background: var(--accent, #C98E1F); color: #fff; font: inherit; font-weight: 600; cursor: pointer;
}
.fclk-btn:hover { filter: brightness(1.06); }
.fclk-btn[disabled] { opacity: .6; cursor: progress; }
.fclk-btn[hidden] { display: none; }
.fclk.is-warn { border-color: var(--fclk-warn); background: color-mix(in srgb, var(--fclk-warn) 9%, var(--bg-card, #fff)); }
.fclk.is-warn .fclk-ic, .fclk.is-warn .fclk-time { color: var(--fclk-warn); }
.fclk.is-out { border-color: var(--fclk-out); background: color-mix(in srgb, var(--fclk-out) 8%, var(--bg-card, #fff)); }
.fclk.is-out .fclk-ic, .fclk.is-out .fclk-time { color: var(--fclk-out); }
.fclk.is-ok .fclk-note { color: var(--accent-green, #15803D); }
[data-theme="dark"] .fclk { --fclk-warn: #E8B04B; --fclk-out: #F07A6A; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
@media (prefers-reduced-motion: no-preference) { .fclk.is-warn { animation: fclk-pulse 2.4s ease-in-out infinite; } }
@keyframes fclk-pulse { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--fclk-warn) 18%, transparent); } }
/* phones: above the floating chat button in the corner */
@media (max-width: 560px) { .fclk { bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px)); font-size: .86rem; } .fclk-btn { width: 100%; } }
/* Drop 1280: the journey closed for inactivity — a notice over the page, and once more on the first page after it. */
.fclk-lock {
  position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; padding: 1rem;
  background: rgba(6, 10, 22, .62); backdrop-filter: blur(3px);
}
.fclk-lock-box {
  width: min(30rem, 100%); box-sizing: border-box; display: grid; justify-items: center; gap: .65rem; text-align: center;
  padding: 1.6rem 1.5rem 1.4rem; border-radius: 16px; border: 1px solid var(--border-2, rgba(11, 18, 38, .15));
  background: var(--bg-card, #fff); color: var(--fg-2, #3A4258); box-shadow: 0 24px 60px rgba(11, 18, 38, .28);
}
.fclk-lock-box h2 { margin: 0; font-size: 1.2rem; line-height: 1.35; color: var(--fg, #0B1226); text-wrap: balance; }
.fclk-lock-box p { margin: 0; font-size: .93rem; line-height: 1.6; max-width: 26rem; }
.fclk-lock-box .fclk-btn { margin-top: .4rem; padding: .6rem 1.4rem; }
.fclk-lock-ic {
  display: inline-grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%;
  color: var(--fclk-out, #C0392B); background: color-mix(in srgb, #C0392B 10%, var(--bg-card, #fff));
}
.fclk-lock-ic svg { width: 1.45rem; height: 1.45rem; }
.fclk-ended {
  display: flex; gap: .75rem; align-items: flex-start; margin: 0 0 1.1rem; padding: .85rem 1rem; border-radius: 12px;
  border: 1px solid color-mix(in srgb, #B7791F 45%, transparent); background: color-mix(in srgb, #B7791F 8%, var(--bg-card, #fff));
  color: var(--fg-2, #3A4258); font-size: .92rem; line-height: 1.55;
}
.fclk-ended .fclk-ic { color: #B7791F; margin-top: .15rem; }
.fclk-ended b { color: var(--fg, #0B1226); }
.fclk-ended p { margin: .15rem 0 0; }
[data-theme="dark"] .fclk-lock-box { box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }
[data-theme="dark"] .fclk-ended { border-color: color-mix(in srgb, #E8B04B 45%, transparent); background: color-mix(in srgb, #E8B04B 9%, var(--bg-card, #14192B)); }
[data-theme="dark"] .fclk-ended .fclk-ic { color: #E8B04B; }