/* =========================================================
   CHECKOUT
   Adapted from the SaaS Payment Checkout modal (node 2001:61)
   into ThreadOptic's palette and type scale.
   ========================================================= */

.page-checkout { background: #f6f6f8; }

/* ===== Slim bar ===== */
.checkout-bar {
  max-width: var(--container);
  margin: 0 auto;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.checkout-back {
  font-size: 15px;
  color: var(--gray);
  transition: color .15s ease;
}
.checkout-back:hover { color: var(--purple); }

/* ===== Layout ===== */
.checkout {
  max-width: var(--container);
  margin: 0 auto;
  padding: 20px 24px 80px;
}

.checkout-grid {
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 380px);
  gap: 28px;
  justify-content: center;
  align-items: start;
}

/* ===== Payment card (Figma: white, radius 10, soft drop shadow) ===== */
.checkout-card {
  background: #fff;
  border-radius: 18px;
  padding: 34px 40px 30px;
  box-shadow: 0 10px 30px -12px rgba(20, 20, 20, .16);
}

.co-heading {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 30px;
}

/* Figma node 2001:63 — 60px tile, tinted with the brand colour */
.co-icon {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 12px;
  background: #eeeeff;
  color: var(--purple);
  display: flex;
  align-items: center;
  justify-content: center;
}
.co-icon svg { width: 32px; height: 32px; }

.co-heading-text h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 25px;
  line-height: 32px;
  color: #0a0a0a;
  margin-bottom: 4px;
}
.co-heading-text p { font-size: 15px; line-height: 24px; color: #5c5c5c; }

.co-block { margin-bottom: 22px; }
.co-block-tight { margin-bottom: 26px; }

.co-label {
  display: block;
  font-size: 14px;
  line-height: 22px;
  color: #5c5c5c;
  margin-bottom: 7px;
}

/* ===== Plan tabs (Figma node 2001:79) ===== */
.co-tabs {
  display: flex;
  gap: 0;
  padding: 5px;
  background: #eef0f3;
  border-radius: 12px;
}

.co-tab {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 20px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  text-align: left;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.co-tab.is-active {
  background: #fff;
  border-color: var(--purple);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
}

.co-tab-copy { display: flex; flex-direction: column; }
.co-tab-name { font-size: 14px; font-weight: 500; line-height: 22px; color: #5c5c5c; }
.co-tab.is-active .co-tab-name { font-weight: 600; color: #0a0a0a; }
.co-tab-note { font-size: 12px; font-weight: 500; line-height: 18px; color: #636363; }

.co-tab-price {
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 22px;
  color: #5c5c5c;
  white-space: nowrap;
}
.co-tab.is-active .co-tab-price { font-size: 24px; color: var(--purple); }

/* Each tab states its own interval, so an annual price can never be mistaken
   for a monthly one at a glance. */
.co-tab-per { font-size: 13px; font-weight: 500; color: inherit; opacity: .7; }

/* ===== Wallets ===== */
.co-wallets { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.wallet {
  height: 50px;
  border-radius: 10px;
  border: 1px solid #e0e0e4;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.wallet:hover { border-color: #bdbdc6; transform: translateY(-1px); box-shadow: 0 6px 14px -8px rgba(20,20,20,.3); }

.wallet-gpay { background: #fff; color: #3c4043; }
.wallet-mark { height: 19px; width: auto; }

.wallet-paypal { background: #ffc439; border-color: #ffc439; }
.wallet-word { font-size: 19px; letter-spacing: -.02em; font-style: italic; }
.wallet-word em { color: #003087; font-style: italic; font-weight: 700; }
.wallet-word strong { color: #009cde; font-weight: 700; }

.wallet-status { margin-top: 10px; font-size: 13px; color: var(--gray); min-height: 18px; }
.wallet-status.is-err { color: #d94a4a; }

.co-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  color: #9a9aa2;
  font-size: 13px;
}
.co-divider::before,
.co-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e7e7ea;
}

/* ===== Fields (Figma node 2001:91) ===== */
.co-field {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 12px;
  background: #fff;
  border: 1px solid #e7e7e7;
  border-radius: 10px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.co-field:focus-within {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(85, 82, 255, .13);
}
.co-field.is-invalid { border-color: #d94a4a; }
.co-field.is-invalid:focus-within { box-shadow: 0 0 0 3px rgba(217, 74, 74, .13); }

.co-field input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: #1f1f1f;
  padding: 13px 0;
}
.co-field input::placeholder { color: #b4b4bb; font-weight: 400; }

/* Must out-specify `.co-field input { flex: 1 }` above, otherwise expiry and CVC
   flex-grow to an equal share and squeeze the card number into a third of the
   row, which is what was clipping the last digits. */
.co-field input.co-inline { flex: 0 0 72px; text-align: right; }
.co-field input.co-inline-cvc { flex: 0 0 46px; }

/* Card brand chip, filled in by the detector */
.card-brand {
  flex-shrink: 0;
  width: 32px;
  height: 22px;
  border-radius: 4px;
  background: #f1f1f4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
  transition: background-color .16s ease;
}
.card-brand[data-brand="visa"] { background-color: #1a1f71; }
.card-brand[data-brand="mastercard"] { background-color: #16161a; }
.card-brand[data-brand="amex"] { background-color: #006fcf; }
.card-brand[data-brand="discover"] { background-color: #f27712; }

.co-err { margin-top: 7px; font-size: 13px; color: #d94a4a; min-height: 17px; }

/* ===== Submit + ThreadOptic loop spinner ===== */
.co-submit {
  position: relative;
  width: 100%;
  height: 52px;
  border: none;
  border-radius: 10px;
  background: var(--purple);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .16s ease, transform .16s ease;
}
.co-submit:hover { opacity: .93; transform: translateY(-1px); }
.co-submit:disabled { opacity: .8; cursor: default; transform: none; }

.co-spinner { display: none; width: 30px; height: 30px; }
.co-submit.is-busy .co-submit-label { display: none; }
.co-submit.is-busy .co-spinner { display: block; }

.loop-spinner { width: 100%; height: 100%; }

/* The mark's own loop, traced from the logo. Animating dash length as well as
   offset makes the stroke stretch and snap, so one end reads as being tugged
   around the loop rather than a segment sliding at constant length. */
.loop-path {
  animation: loop-pull 1.35s cubic-bezier(.55, .1, .4, .9) infinite;
}
@keyframes loop-pull {
  0%   { stroke-dasharray: 6 94;  stroke-dashoffset: 100; }
  45%  { stroke-dasharray: 42 58; stroke-dashoffset: 55; }
  75%  { stroke-dasharray: 30 70; stroke-dashoffset: 22; }
  100% { stroke-dasharray: 6 94;  stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .loop-path { animation-duration: 3s; animation-timing-function: linear; }
}

.co-status { margin-top: 14px; font-size: 14px; line-height: 1.6; color: var(--gray); }
.co-status.is-ok { color: #1a8a4a; }
.co-status.is-err { color: #d94a4a; }

.co-secure {
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 500;
  color: #1f1f1f;
}
.co-secure svg { width: 15px; height: 15px; }

/* ===== Order summary ===== */
.order-summary {
  position: sticky;
  top: 24px;
  background: #fff;
  border: 1px solid #ececf0;
  border-radius: 18px;
  padding: 30px 28px;
}

.order-summary h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  color: var(--ink);
  margin-bottom: 20px;
}

.os-plan {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-bottom: 18px;
  border-bottom: 1px solid #eeeef2;
}
.os-plan-name { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--ink); }
.os-plan-billing { font-size: 14px; color: var(--gray); }

.os-rows { list-style: none; padding: 18px 0; border-bottom: 1px solid #eeeef2; }
.os-rows li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 15px;
  color: var(--gray);
  padding: 5px 0;
}
.os-rows li[hidden] { display: none; }

/* The 12-month total is a transparency note, not a charge, so it reads
   quieter than the actual monthly line above it. */
.os-row-muted { font-size: 13px; color: var(--gray-soft); margin-top: 2px; }

.os-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 18px 0 14px;
}
.os-total span { font-size: 15px; color: var(--ink); }
.os-total strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px;
  color: var(--ink);
}

.os-note { font-size: 13px; line-height: 1.6; color: var(--gray-soft); }

.os-perks { list-style: none; margin-top: 22px; padding-top: 20px; border-top: 1px solid #eeeef2; }
.os-perks li {
  position: relative;
  padding-left: 24px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--gray);
  margin-bottom: 10px;
}
.os-perks li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 7px;
  width: 5px;
  height: 9px;
  border: solid var(--purple);
  border-width: 0 1.8px 1.8px 0;
  transform: rotate(45deg);
}

/* ===== Foot ===== */
.checkout-foot {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px 40px;
  text-align: center;
  font-size: 14px;
  color: var(--gray-soft);
}
.checkout-foot a { transition: color .15s ease; }
.checkout-foot a:hover { color: var(--purple); }

/* ===== Responsive ===== */
@media (max-width: 1000px) {
  .checkout-grid { grid-template-columns: minmax(0, 560px); }
  .order-summary { position: static; order: -1; }
}

@media (max-width: 620px) {
  .checkout-card { padding: 26px 20px 24px; border-radius: 14px; }
  .co-heading { gap: 12px; margin-bottom: 24px; }
  .co-icon { width: 48px; height: 48px; }
  .co-icon svg { width: 26px; height: 26px; }
  .co-heading-text h1 { font-size: 21px; line-height: 28px; }
  .co-heading-text p { font-size: 14px; }

  .co-tab { padding: 11px 14px; }
  .co-tab-price { font-size: 17px; }
  .co-tab.is-active .co-tab-price { font-size: 20px; }

  /* Card row wraps so expiry and CVC keep usable hit targets */
  .co-field-card { flex-wrap: wrap; padding: 6px 12px; }
  .co-field-card #cardNumber { flex: 1 1 100%; order: 1; }
  .card-brand { order: 0; }
  .co-field input.co-inline { order: 2; flex: 1 1 0; text-align: left; border-top: 1px solid #f0f0f3; }
  .co-field input.co-inline-cvc { order: 3; }

  .order-summary { padding: 24px 20px; border-radius: 14px; }
  .checkout-bar { padding: 18px 20px; }
  .checkout { padding: 12px 16px 60px; }
}

/* ===== Address block ===== */
.co-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 12px; }
.co-col { min-width: 0; }

/* Second line of a stacked address field sits directly under the first */
.co-field-stacked { margin-top: 10px; }

.co-field select {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: #1f1f1f;
  padding: 13px 0;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%235c5c5c' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right center;
  padding-right: 18px;
}

.co-optional { font-weight: 400; color: var(--gray-soft); }

.co-hint { margin-top: 7px; font-size: 12.5px; line-height: 1.55; color: var(--gray-soft); }

/* ===== Consent ===== */
.co-terms {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--gray);
  cursor: pointer;
}
.co-terms input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--purple);
  cursor: pointer;
}
.co-terms a { color: var(--purple); }
.co-terms a:hover { text-decoration: underline; }
.co-terms.is-invalid { color: #d94a4a; }
.co-terms.is-invalid input { outline: 2px solid #d94a4a; outline-offset: 2px; border-radius: 3px; }

/* ===== Summary rows ===== */
.os-rows li[hidden] { display: none; }
.os-row-muted span:last-child:empty { display: none; }

@media (max-width: 620px) {
  .co-row { grid-template-columns: 1fr 1fr; }
  /* City spans the full width, region and postcode share the row below */
  .co-row .co-col:first-child { grid-column: 1 / -1; }
}

/* Two priced tabs side by side run out of room on a phone, so stack the copy
   above the price rather than letting the interval wrap onto its own line. */
@media (max-width: 620px) {
  .co-tab {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
    padding: 12px 14px;
  }
  .co-tab-name { line-height: 18px; }
  .co-tab-note { line-height: 15px; }
  .co-tab-price { font-size: 19px; }
  .co-tab.is-active .co-tab-price { font-size: 21px; }
  .co-tab-per { font-size: 12px; }
}