/* ============================================================
   Community Checkout — page-level styles.

   Everything else comes from the Bitkoning Design System
   (tokens + .bk-* classes). Only two things live here:
   1. the page shell / step-animation rules the design carried in
      its <helmet><style> block, verbatim;
   2. the layout wrappers that were inline styles on the design's
      outer divs, lifted to classes so the markup stays readable.
   ============================================================ */

/* ---- Page shell (was inline on the design's outer divs) ---- */

/* The DS base only sets box-sizing — it does NOT reset the body margin, so the
   browser's default 8px margin exposed a white <html> border around the dark page
   (Mike, PC). Reset it + paint the root dark so no sliver can ever show white. */
html, body {
  margin: 0;
  padding: 0;
  background: var(--bk-ink-0);
}

.ck-page {
  /* 100dvh (dynamic viewport height) so the column is exactly the VISIBLE height on
     mobile — plain 100vh sits behind Safari/Chrome's URL bar, which pushed the
     bottom-pinned CTA below the fold (you had to scroll to see it). The 100vh line is
     the fallback for browsers without dvh. Same fix as the giveaway funnel. */
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bk-ink-0);
  background-image: radial-gradient(120% 55% at 50% 0%, rgba(0, 255, 102, .05), transparent 62%);
  display: flex;
  justify-content: center;
  color: var(--bk-ink-7);
  font-family: var(--bk-font-sans);
}

.ck-col {
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;   /* visible-height column so the CTA stays above the mobile URL bar */
}

.ck-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bk-ink-0);
  padding: 16px 20px 12px;
}

.ck-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 8px 20px 32px;
}

/* ---- Motion + interaction (verbatim from the design) ---- */

@keyframes bk-spin { to { transform: rotate(360deg); } }

@keyframes bk-pop {
  0%   { transform: scale(0.7); opacity: 0; }
  60%  { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes ck-in {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

.ck-slide { animation: ck-in 0.3s ease both; }

/* "Je membership wordt geactiveerd" — brand-green motion on the dark shell (the old
   dark button-spinner was invisible here). A pulsing halo disc, a spinning green arc,
   and an indeterminate sweep bar — the brand's affirmative-green loading tier, so the
   confirm screen is clearly alive while the Plug&Pay sub is created. */
@keyframes ck-activate-pulse {
  0%, 100% { box-shadow: 0 0 22px var(--bk-green-halo-2); }
  50%      { box-shadow: 0 0 56px var(--bk-green-halo-2); }
}
@keyframes ck-activate-sweep {
  0%   { left: -45%; }
  100% { left: 100%; }
}
.ck-activate-disc  { animation: ck-activate-pulse 1.8s ease-in-out infinite; }
.ck-activate-ring  { animation: bk-spin 0.9s linear infinite; }
.ck-activate-sweep { animation: ck-activate-sweep 1.25s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .ck-activate-disc, .ck-activate-ring, .ck-activate-sweep { animation: none !important; }
}

@media (hover: hover) and (pointer: fine) {
  .ck-opt:hover { border-color: var(--bk-light-4) !important; }
  .ck-check:hover { border-color: var(--bk-light-3) !important; }
}

@media (hover: none) {
  .ck-opt:active { border-color: var(--bk-light-4) !important; }
  .bk-btn:active { transform: scale(0.98); }
}

@media (prefers-reduced-motion: reduce) {
  .ck-slide, .ck-pop { animation: none !important; }
}

/* Back arrow — was the design's style-hover attribute. */
.ck-back:hover {
  background: var(--bk-ink-2);
  color: var(--bk-ink-8);
}

/* Referral "Bekijk je resultaten →" link — was the design's style-hover attribute. */
.ck-reflink:hover {
  color: var(--bk-green-base);
}

/* The design system only ships :focus-visible rings for .bk-btn; the
   funnel's custom option/toggle buttons get the same treatment so
   keyboard users never lose their place. Same ring, no visual change
   for pointer users. */
.ck-opt:focus-visible,
.ck-check:focus-visible,
.ck-back:focus-visible,
.ck-toggle:focus-visible,
.ck-quiet:focus-visible {
  outline: 2px solid var(--bk-blue-base);
  outline-offset: 2px;
}

/* Each step's heading receives focus when the step changes, so keyboard
   and screen-reader users land at the top of what just appeared. It is
   never tab-reachable, so it needs no visible ring. */
#ck-title:focus { outline: none; }

/* ---- No-JS fallback ---- */

.ck-noscript {
  max-width: 440px;
  margin: 0 auto;
  padding: 32px 20px;
  font-family: var(--bk-font-sans);
  color: var(--bk-ink-7);
}

.ck-noscript__title {
  font-size: 20px;
  font-weight: 800;
  color: var(--bk-ink-8);
  letter-spacing: -0.02em;
}

.ck-noscript__body {
  font-size: 15px;
  color: var(--bk-ink-6);
  line-height: 1.55;
  margin-top: 12px;
}

.ck-noscript a { color: var(--bk-green-base); }
