/* Checkout and welcome pages, in the look of poolspotter.com/pricing: cream paper, cream cards
   with 28px corners and a hard 6px shadow, ink outlines, aqua pill buttons, and a row of pool
   waterline tiles under the top bar. Builds on styles.css. */

body.checkout {
  --ink: #022846;
  --paper: #FBF9EE;
  --nav: #F7F5E7;
  --card: #FCFBF7;
  --card-trial: #F6F4E6;
  --pick: #E1F2F5;
  --chip: #F3F1E6;
  --warn: #FFF9E8;
  --warn-line: #D9C48A;
  --ck-text: #161F26;
  --ck-text-2: #3D454B;
  --ck-text-3: #456169;
  --ck-link: #245B72;
  --divider: #E4E1D3;
  --edge: #022846;
  --drop: #3EA0C3;
  --check-bg: #D3EEF4;
  --display: "Archivo", "IBM Plex Sans", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  min-height: 100%;
  background: var(--paper);
  color: var(--ck-text);
  color-scheme: light;
}
:root[data-theme="dark"] body.checkout {
  --paper: #0D1215;
  --nav: #11171B;
  --card: #171D22;
  --card-trial: #1B2227;
  --pick: #1D2E34;
  --chip: #1E252A;
  --warn: #2E2914;
  --warn-line: #6B5A22;
  --ck-text: #EEF0F1;
  --ck-text-2: #C5CBCF;
  --ck-text-3: #989FA3;
  --ck-link: #50C9DE;
  --divider: #293137;
  --edge: #38444C;
  --check-bg: #1D3138;
  color-scheme: dark;
}

/* ---------- top bar ---------- */
.ck-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 32px; background: var(--nav); }
.ck-top .logo { height: 38px; width: auto; display: block; }
:root[data-theme="dark"] .ck-top .logo { content: url("/brand/logo-reversed.svg"); } /* white wordmark on the dark bar */
/* The pool's waterline: a row of blue tiles with cream grout, outlined in ink like the cards. */
.ck-top { position: relative; margin-bottom: 18px; }
.ck-top::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px; border-bottom: 2px solid var(--edge);
  background: var(--nav) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect x='1' y='1' width='14' height='14' rx='1.5' fill='%233EA0C3'/%3E%3C/svg%3E") repeat-x left top / 16px 16px;
}
:root .ck-top a.ck-signin { /* outranks the app's light-theme link color */
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 22px; border-radius: 100px;
  background: var(--card); color: var(--ck-text); border: 2px solid var(--edge); box-shadow: 0 4px 0 var(--edge);
  font: 800 14px/1 var(--display); text-decoration: none; transition: transform .12s var(--ease), box-shadow .12s var(--ease);
}
:root .ck-top .ck-signin:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--edge); }

/* ---------- heading ---------- */
.checkout-main { max-width: 1080px; margin: 0 auto; padding: 44px 24px 64px; }
.ck-head { text-align: center; margin-bottom: 30px; }
.ck-head h1 { font-family: var(--display); font-weight: 800; font-size: 36px; line-height: 1.1; letter-spacing: -0.02em; color: var(--ck-text); }
.ck-head .lede { max-width: 560px; margin: 12px auto 0; font-size: 16px; line-height: 1.5; color: var(--ck-text-2); }
.trial-badge { display: none; } /* the lede says it */
.ck-step { margin: 34px 0 14px; font: 800 20px/1.2 var(--display); letter-spacing: -0.01em; color: var(--ck-text); }
.step-num { display: none; }

/* ---------- plans: three cards side by side ---------- */
.plan-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
.plan {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 28px 26px 26px; border-radius: 28px;
  background: var(--card); border: 2px solid var(--edge); box-shadow: 0 6px 0 var(--edge); cursor: pointer;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.plan:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--edge); }
.plan.is-on { outline: 3px solid var(--brand-lime); outline-offset: 4px; }
.plan-trial { background: var(--card-trial); }
.plan-team { background: #022846; color: #fff; border-color: #022846; box-shadow: 0 6px 0 #3EA0C3; }
.plan-team:hover { box-shadow: 0 8px 0 #3EA0C3; }
.plan input, .market input { position: absolute; opacity: 0; pointer-events: none; }
.plan:has(input:focus-visible), .market:has(input:focus-visible) { outline: 3px solid var(--brand-600); outline-offset: 4px; }
.plan-head { display: flex; align-items: center; gap: 10px; }
.plan-head b { font: 800 22px/1.2 var(--display); letter-spacing: -0.01em; }
.best { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 100px; background: var(--brand-lime); color: #161F26; font: 700 12px/1.3 var(--font); }
.best::before { content: "\2606"; font-size: 12px; }
.plan-blurb { font-size: 15px; line-height: 1.45; color: var(--ck-text-2); }
.plan.plan-team .plan-blurb, .plan.plan-team .plan-detail, .plan.plan-team .per, .plan.plan-team .plan-then { color: rgba(255,255,255,.82); }
.plan .price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; margin-top: 8px; }
.plan .price strong { font: 600 50px/1 var(--display); letter-spacing: -0.02em; color: var(--ck-text); }
.plan-team .price strong { color: #fff; }
.plan .per { font-size: 15px; color: var(--ck-text-2); }
.plan-then { font-size: 13.5px; font-weight: 600; color: var(--ck-text-2); }
.plan-detail { font-size: 13px; line-height: 1.45; color: var(--ck-text-3); }
.plan-features { list-style: none; margin: 8px 0 0; padding: 14px 0 0; border-top: 1px solid var(--divider); display: grid; gap: 9px; }
.plan-team .plan-features { border-top-color: rgba(255,255,255,.18); }
.plan-features li { position: relative; padding-left: 30px; font-size: 14.5px; line-height: 1.4; }
.plan-features li::before { /* a water drop, the one on the mascot's cap */
  content: ""; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--check-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 4.6C10 4.6 6.3 9.1 6.3 11.7A3.7 3.7 0 0 0 13.7 11.7C13.7 9.1 10 4.6 10 4.6Z' fill='%23245B72'/%3E%3C/svg%3E");
  background-size: 20px; background-position: center; background-repeat: no-repeat;
}
.plan-team .plan-features li::before { background-color: #1A2F3D; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 4.6C10 4.6 6.3 9.1 6.3 11.7A3.7 3.7 0 0 0 13.7 11.7C13.7 9.1 10 4.6 10 4.6Z' fill='%2350C9DE'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] .plan-features li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 4.6C10 4.6 6.3 9.1 6.3 11.7A3.7 3.7 0 0 0 13.7 11.7C13.7 9.1 10 4.6 10 4.6Z' fill='%2350C9DE'/%3E%3C/svg%3E"); }
/* The radio dot, top right. */
.tick { flex: none; margin-left: auto; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--edge); background: var(--card); display: grid; place-items: center; }
.plan-team .tick { border-color: rgba(255,255,255,.55); background: transparent; }
.plan.is-on .tick { border-color: var(--brand-lime); background: var(--brand-lime); }
.plan.is-on .tick::after { content: ""; width: 12px; height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.3 6.4L4.9 9L9.7 3.3' fill='none' stroke='%23161F26' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ---------- notices ---------- */
.checkout .notice {
  display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; padding: 14px 16px; border-radius: 16px;
  border: 1.5px solid var(--warn-line); background: var(--warn); font-size: 13.5px; line-height: 1.5; color: var(--ck-text);
}
.checkout .notice-plain { background: var(--pick); border-color: var(--divider); }
.checkout .notice a { color: inherit; font-weight: 600; }
.plan-list + .notice { margin-top: 26px; }
.notice-icon { flex: none; width: 30px; height: 30px; margin-top: -2px; }
.notice-icon * { stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }

/* ---------- markets: a search box that opens a grouped checklist ---------- */
.picker { position: relative; }
.picker.is-open { z-index: 6; } /* over the sticky total bar while the list is open */
.picker-field {
  display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 10px 0 18px; border-radius: 24px;
  background: var(--card); border: 2px solid var(--edge); box-shadow: 0 7px 0 var(--edge);
}
.picker-field:focus-within { outline: 3px solid var(--brand-lime); outline-offset: 3px; }
.picker.is-open .picker-field { border-radius: 24px 24px 0 0; border-bottom-color: var(--divider); box-shadow: none; }
.picker-icon { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--ck-text-3); stroke-width: 2.2; stroke-linecap: round; }
.picker-input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; font: 500 15px var(--font); color: var(--ck-text); }
.picker-input::placeholder { color: var(--ck-text-3); opacity: 1; }
.picker-toggle { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--chip); color: var(--ck-text); }
.picker-toggle:hover { background: var(--pick); }
.picker-toggle:focus-visible { outline: 3px solid var(--brand-600); outline-offset: 2px; }
.picker-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.picker.is-open .picker-toggle svg { transform: rotate(180deg); }
.picker-panel { border: 2px solid var(--edge); border-top: 0; border-radius: 0 0 24px 24px; background: var(--card); box-shadow: 0 7px 0 var(--edge); overflow: hidden; }
.picker-list { max-height: min(340px, 50vh); overflow-y: auto; overscroll-behavior: contain; padding: 0 8px 8px; }
.opt-head {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 12px 10px 6px; background: var(--card);
  font: 700 11.5px/1.2 var(--display); letter-spacing: .07em; text-transform: uppercase; color: var(--ck-text-3);
}
.opt-head span { padding: 1px 7px; border-radius: 999px; background: var(--chip); font: 600 11px/1.5 var(--font); letter-spacing: 0; }
.market { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; cursor: pointer; transition: background-color .12s; }
.market:hover { background: var(--chip); }
.market.is-on { background: var(--pick); }
.box { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--edge); background: var(--card); transition: background-color .15s; }
.market.is-on .box { background-color: var(--brand-600); border-color: var(--brand-600); }
.market.is-on .box::after {
  content: ""; width: 12px; height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.3 6.4L4.9 9L9.7 3.3' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.opt-text { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 12px; }
.opt-text b { flex: none; font-size: 14.5px; font-weight: 600; }
.opt-text span { min-width: 0; margin-left: auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12.5px; color: var(--ck-text-3); }
.picker-empty { padding: 22px 18px; font-size: 13.5px; color: var(--ck-text-3); }
.picker-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 12px 18px; border-top: 1.5px solid var(--divider); }
#pickerCount { font-size: 13px; font-weight: 600; color: var(--ck-text-2); }
.picker-done {
  height: 38px; padding: 0 20px; border-radius: 100px; background: var(--brand-lime); color: #161F26;
  border: 0; box-shadow: 0 3px 0 var(--edge); font: 800 13.5px/1 var(--display); transition: transform .12s var(--ease), box-shadow .12s var(--ease);
}
.picker-done:hover { transform: translateY(1px); box-shadow: 0 2px 0 var(--edge); }

.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.chips:empty, .picker.is-open .chips { display: none; }
/* While the list is open its footer shows the count, so the total bar steps aside instead of peeking out under it. */
#marketForm:has(.picker.is-open) .checkout-bar { visibility: hidden; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 7px 0 14px; border-radius: 100px;
  background: var(--card); color: var(--ck-text); border: 1.5px solid var(--edge); font: 600 13px/1 var(--font);
}
.chip-x {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.5 2.5L7.5 7.5M7.5 2.5L2.5 7.5' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 10px no-repeat;
}
.chip:focus-visible { outline: 3px solid var(--brand-600); outline-offset: 2px; }
.chip-clear { height: 34px; padding: 0 8px; border: 0; background: none; font: 600 13px var(--font); color: var(--ck-link); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- total and button ---------- */
.checkout-bar {
  position: sticky; bottom: 16px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 30px; padding: 14px 14px 14px 24px; border-radius: 24px; background: var(--card); color: var(--ck-text);
  border: 2px solid var(--edge); box-shadow: 0 6px 0 var(--edge);
}
.bar-text { display: flex; flex-direction: column; min-width: 0; }
#summary { font-size: 13px; color: var(--ck-text-3); }
#total { font: 800 26px/1.15 var(--display); color: var(--ck-text); letter-spacing: -0.01em; }
#total:empty { display: none; }
.ck-go, :root .checkout a.ck-go { /* the link form outranks the app's light-theme link color */
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 50px; padding: 0 28px 0 24px;
  border-radius: 100px; background: var(--brand-lime); color: #161F26; border: 0; box-shadow: 0 4px 0 var(--edge);
  font: 800 15px/1 var(--display); text-decoration: none; cursor: pointer; transition: transform .12s var(--ease), box-shadow .12s var(--ease), background-color .15s;
}
.ck-go::before { /* the arrow the site's buttons carry */
  content: ""; width: 16px; height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 12L12 4M6 4h6v6' fill='none' stroke='%23161F26' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ck-go:hover:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 var(--edge); background-color: #72D4E5; }
.ck-go:focus-visible { outline: 3px solid var(--brand-lime); outline-offset: 3px; }
.ck-go:disabled { background: var(--chip); color: var(--ck-text-3); box-shadow: none; cursor: default; }
.ck-go:disabled::before { opacity: .4; }

.fine { margin-top: 16px; font-size: 12.5px; line-height: 1.5; color: var(--ck-text-3); }
.fine a { color: var(--ck-link); font-weight: 500; }
.checkout-bar + .fine { margin-top: 22px; }

/* ---------- welcome page ---------- */
.welcome { max-width: 720px; margin: 24px auto 64px; padding: 30px 32px 28px; border-radius: 28px; background: var(--card); border: 2px solid var(--edge); box-shadow: 0 6px 0 var(--edge); }
.welcome ol { margin: 0; padding: 0; list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: 16px; }
.welcome li { counter-increment: step; display: flex; gap: 14px; font-size: 15px; line-height: 1.5; color: var(--ck-text-2); }
.welcome li::before {
  content: counter(step); flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin-top: -3px; border-radius: 50%;
  background: var(--check-bg); color: var(--ck-link); font: 800 14px/1 var(--display);
}
.welcome li b { color: var(--ck-text); }
.welcome .ck-go { margin-top: 26px; }
.welcome .fine { margin-top: 20px; font-size: 13.5px; }

@media (prefers-reduced-motion: reduce) {
  .plan, .market, .ck-go, .ck-signin, .picker-done, .box, .picker-toggle svg { transition: none; }
}

@media (max-width: 900px) {
  .plan-list { grid-template-columns: 1fr; gap: 18px; }
  .plan .price strong { font-size: 44px; }
}
@media (max-width: 600px) {
  .ck-top { padding: 12px 16px; }
  .ck-top .logo { height: 30px; }
  :root .ck-top a.ck-signin { height: 38px; padding: 0 16px; }
  .checkout-main { padding: 28px 16px 48px; }
  .ck-head h1 { font-size: 30px; }
  .ck-head .lede { font-size: 15px; }
  .plan { padding: 22px 20px 20px; border-radius: 24px; }
  .picker-input { font-size: 16px; } /* 16px keeps iPhone Safari from zooming in on focus */
  .opt-text { flex-direction: column; align-items: flex-start; gap: 1px; }
  .opt-text span { margin-left: 0; white-space: normal; }
  .checkout-bar { flex-direction: column; align-items: stretch; gap: 12px; bottom: 10px; padding: 14px; }
  .bar-text { padding: 0 6px; }
  .ck-go { width: 100%; }
  .welcome { margin: 16px 16px 40px; padding: 22px 20px; }
}