/*
 * premium.css — the parts of /ritmi/premium the design does not draw
 * (RITMI prompt 106): the masked-e-mail step, the plan's truth, the result and
 * the status lines (the cancel form is gone — D153: the page cancels nothing,
 * the app does; RITMI bug-fix pass H2). Hand-written, never rewritten by the
 * build (js/premium.js draws into the places tools/build-ritmi.py makes).
 *
 * Every value is the page's own: the card #0E1433 and the field #070B24 with
 * their lavender hairlines, the text colours #F4F6FF / #E2E6FA / #A7B0DA /
 * #7C86B8, the accents of the plan cards and the explainers (cyan #67E8F9,
 * green #34D399 of the Flitt lock, rose #FB7185 of the iPhone card) and the pay
 * button's gradient. System fonts only, every control at least 44 px (the house
 * rules).
 */

/* The wrapper around steps 1–3 must not break the card's column and its gaps. */
.premium-steps { display: contents; }
.premium-steps[hidden], .premium-result[hidden], .premium-panel[hidden],
.premium-error[hidden], [data-premium-plans][hidden],
.pay-btn[hidden] { display: none !important; }

/* The drawn pay <div> is a <button> now (the builder, 106), and site.css's
   button reset (`.ritmi-root button` — no background, no border, inherited
   font and colour) outranks `.pay-btn`. Its drawn look, restated at the
   reset's weight: the values of site.css's .pay-btn, unchanged. */
.ritmi-root .pay-btn {
  background: #131A3D;
  border: 1px solid rgba(140, 160, 255, .18);
  color: #6B76A8; font-size: 17px; font-weight: 800;
  text-align: center;
}
.ritmi-root .pay-btn.is-ready {
  background: linear-gradient(90deg, #2563EB, #7C3AED);
  border-color: transparent;
  color: #FFFFFF;
}
.pay-btn:focus-visible { outline: 2px solid #67E8F9; outline-offset: 3px; }
.pay-btn.is-busy { cursor: progress; opacity: .82; }

/* The field's own error — tied to it with aria-describedby. */
.premium-error {
  margin: -8px 0 0;
  color: #FDA4AF;
  font-size: 13.5px;
  line-height: 1.5;
  font-weight: 600;
}

/* The line under the button: checking, redirecting, the price, a retry. */
.premium-status {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 4px 10px;
  margin-top: -6px;
  color: #A7B0DA;
  font-size: 13.5px;
  line-height: 1.5;
  text-align: center;
}

/* Empty, it takes no room: the negative margin gives back the card's gap. */
.premium-status:empty { margin-top: -18px; }

.premium-panel { display: flex; flex-direction: column; gap: 12px; }
.premium-result { display: flex; flex-direction: column; }

/* A step card: the field's ground inside the page's card. */
.premium-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px 18px 20px;
  border-radius: 18px;
  background: #070B24;
  border: 1px solid rgba(140, 160, 255, .2);
}
.premium-card--summary { border-color: rgba(103, 232, 249, .3); }
.premium-card--status  { border-color: rgba(192, 132, 252, .34); background: rgba(168, 85, 247, .08); }
.premium-card--result  { padding: 22px 20px 22px; gap: 12px; }
.premium-card--ok      { border-color: rgba(52, 211, 153, .45); background: rgba(52, 211, 153, .07); }
.premium-card--wait    { border-color: rgba(103, 232, 249, .3); }
.premium-card--bad     { border-color: rgba(251, 113, 133, .42); background: rgba(251, 113, 133, .06); }

.premium-card__head { display: flex; align-items: center; gap: 12px; }

.premium-card__title {
  margin: 0;
  color: #F4F6FF;
  font-size: clamp(17px, 4.2vw, 19px);
  font-weight: 700;
  font-family: var(--font-serif);
  line-height: 1.3;
}
/* A title takes the focus only so a screen reader reads the new step (tabindex -1, never a Tab
   stop, not a control): no ring — after Flitt's return a phone would otherwise draw one round
   the result's heading, like a field. The next Tab lands on the card's buttons, which have one. */
.premium-card__title:focus, .premium-card__title:focus-visible { outline: none; }

.premium-card__text { margin: 0; color: #A7B0DA; font-size: 14.5px; line-height: 1.55; }
.premium-card__email {
  margin: 0;
  color: #F4F6FF;
  font-size: clamp(17px, 4.4vw, 20px);
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: .02em;
  overflow-wrap: anywhere;
}
.premium-card__price {
  margin: 2px 0 0;
  color: #67E8F9;
  font-size: 19px;
  font-weight: 800;
  font-family: var(--font-mono);
}
.premium-card__renew {
  margin: 0;
  color: #E2E6FA;
  font-size: 14.5px;
  line-height: 1.55;
  font-weight: 600;
}

.premium-benefits { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.premium-benefits li {
  position: relative;
  padding-left: 24px;
  color: #E2E6FA;
  font-size: 14.5px;
  line-height: 1.5;
}
/* A drawn tick, the Flitt line's green: no icon font, no image. */
.premium-benefits li::before {
  content: "";
  position: absolute; left: 4px; top: .32em;
  width: 6px; height: 11px;
  border: solid #34D399;
  border-width: 0 2.2px 2.2px 0;
  transform: rotate(45deg);
}

.premium-card__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

.premium-btn {
  flex: 1 1 180px;
  min-height: 52px;
  padding: 0 18px;
  border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800; line-height: 1.25;
  text-align: center;
  transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}
.ritmi-root .premium-btn--primary {
  background: linear-gradient(90deg, #2563EB, #7C3AED);
  box-shadow: 0 12px 32px rgba(59, 130, 246, .3);
  color: #FFFFFF;
}
.ritmi-root .premium-btn--secondary {
  background: #131A3D;
  border: 1px solid rgba(140, 160, 255, .24);
  color: #E2E6FA;
}
/* The status line's „try again“: a text button, still 44 px tall. */
.ritmi-root .premium-btn--link {
  flex: none;
  min-height: 44px;
  padding: 0 8px;
  border-radius: 10px;
  color: #67E8F9;
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.premium-btn:focus-visible { outline: 2px solid #67E8F9; outline-offset: 3px; }
.premium-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* While the page waits for Flitt's answer. Still under reduced motion (site.css). */
.premium-spinner {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2.5px solid rgba(103, 232, 249, .22);
  border-top-color: #67E8F9;
  animation: premiumSpin .9s linear infinite;
}
@keyframes premiumSpin { to { transform: rotate(360deg); } }

.premium-noscript {
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(251, 113, 133, .08);
  border: 1px solid rgba(251, 113, 133, .3);
  color: #FECDD3;
  font-size: 14px;
  line-height: 1.5;
}

/* The code field's own error look (the field is drawn; only its invalid state is added). */
#ritmi-code[aria-invalid="true"] { border-color: rgba(251, 113, 133, .7); }