/* ═══════════════════════════════════════════════════════════════
   abonament.css — the subscription pages.

   Shares cl-shell.css's tokens (--cl-primary, --cl-border, …), so the
   packages page, the sign-up and the confirmation look like the rest of
   the site rather than like three visitors.

   Everything is prefixed .ab- because these pages sit inside the same
   shell as the calculators, and an unprefixed .card or .price would
   collide with theirs within a release or two.
   ═══════════════════════════════════════════════════════════════ */

.ab-wrap { max-width: 1180px; margin: 0 auto; padding: 34px 20px 64px; }

.ab-head { text-align: center; max-width: 660px; margin: 0 auto 8px; }
.ab-kicker {
  display: inline-block; background: rgba(11,71,212,.08); color: var(--cl-primary);
  font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
}
.ab-title {
  margin: 14px 0 10px; font-size: clamp(26px, 3.6vw, 38px);
  font-weight: 800; letter-spacing: -.02em; line-height: 1.15;
}
.ab-sub { margin: 0; color: var(--cl-muted); font-size: 15px; line-height: 1.6; }

/* ───── frequency switch ───── */
.ab-freq-row { text-align: center; }
.ab-freq {
  display: inline-flex; background: var(--cl-bg-soft); border: 1px solid var(--cl-border);
  border-radius: 999px; padding: 4px; gap: 2px; margin: 24px auto 0;
}
.ab-freq button {
  border: none; background: none; font: inherit; font-weight: 600; font-size: 14px;
  color: var(--cl-muted); padding: 9px 16px; border-radius: 999px; cursor: pointer;
  white-space: nowrap; display: flex; align-items: center; gap: 7px;
}
.ab-freq button.on { background: #fff; color: var(--cl-text); box-shadow: var(--cl-shadow-sm); }
.ab-save {
  font-size: 11px; font-weight: 800; color: var(--cl-success);
  background: rgba(16,185,129,.1); padding: 2px 6px; border-radius: 5px;
}
.ab-freq button.on .ab-save { background: rgba(16,185,129,.14); }

/* ───── package cards ───── */
.ab-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 18px; margin-top: 30px; align-items: start;
}
.ab-card {
  background: #fff; border: 1px solid var(--cl-border); border-radius: 20px;
  padding: 26px 24px; display: flex; flex-direction: column; gap: 14px;
  position: relative; transition: transform .2s, box-shadow .2s, border-color .2s;
}
.ab-card:hover {
  transform: translateY(-3px); box-shadow: var(--cl-shadow-md);
  border-color: rgba(11,71,212,.3);
}
.ab-card.ab-best { border-color: var(--cl-primary); box-shadow: 0 12px 36px rgba(11,71,212,.14); }
.ab-badge {
  position: absolute; top: -11px; left: 24px; background: var(--cl-primary); color: #fff;
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 6px;
}
.ab-card-name { margin: 0; font-size: 19px; font-weight: 800; }
.ab-card-fits { color: var(--cl-muted); font-size: 13px; margin: -8px 0 0; line-height: 1.5; }
.ab-card-hours { color: #94a3b8; }

.ab-price { display: flex; align-items: baseline; gap: 7px; margin-top: 4px; flex-wrap: wrap; }
.ab-price b { font-size: 36px; font-weight: 800; letter-spacing: -.02em; }
.ab-price s { color: #94a3b8; font-size: 15px; }
.ab-price span { color: var(--cl-muted); font-size: 13.5px; }
.ab-permo { color: var(--cl-muted); font-size: 13px; margin: -6px 0 0; }
.ab-permo::before { content: "≈ "; }

.ab-incl { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ab-incl li { position: relative; padding-left: 24px; font-size: 13.5px; line-height: 1.45; color: #334155; }
.ab-incl li::before { content: "\2713"; position: absolute; left: 0; color: var(--cl-success); font-weight: 800; }

.ab-btn {
  display: block; text-align: center; text-decoration: none; font-weight: 700; font-size: 15px;
  padding: 13px 18px; border-radius: 999px; margin-top: auto; transition: background .2s, border-color .2s;
  cursor: pointer; border: 1px solid transparent; font-family: inherit;
}
.ab-btn-primary { background: var(--cl-primary); color: #fff; }
.ab-btn-primary:hover { background: var(--cl-primary-2); }
.ab-btn-ghost { background: #fff; border-color: var(--cl-border); color: var(--cl-text); }
.ab-btn-ghost:hover { border-color: var(--cl-muted); }
.ab-btn:disabled { opacity: .55; cursor: default; }

/* ───── extras: informational only ───── */
.ab-addons {
  max-width: 820px; margin: 38px auto 0; text-align: center;
  background: var(--cl-bg-soft); border: 1px dashed var(--cl-border);
  border-radius: 18px; padding: 22px 24px;
}
.ab-addons h2 { margin: 0 0 14px; font-size: 17px; font-weight: 800; }
.ab-addon-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 18px;
}
.ab-addon-list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 13.5px; color: #334155; border-bottom: 1px dotted var(--cl-border); padding-bottom: 6px;
}
.ab-addon-list b { color: var(--cl-primary); white-space: nowrap; font-weight: 700; }
.ab-addon-note { margin: 16px 0 0; font-size: 13px; font-weight: 600; color: var(--cl-primary); }

.ab-trust {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 26px;
  color: var(--cl-muted); font-size: 13.5px;
}
.ab-trust li { display: inline-flex; align-items: center; gap: 8px; }
.ab-trust i { color: var(--cl-success); }

.ab-calc-link { text-align: center; margin: 22px 0 0; color: var(--cl-muted); font-size: 13.5px; }
.ab-calc-link a { color: var(--cl-primary); font-weight: 600; text-decoration: none; }
.ab-calc-link a:hover { text-decoration: underline; }

/* ═══════════ sign-up: four screens ═══════════ */

/* Form on the left, running receipt on the right. The card used to be
   asked for on a screen with no price, package or date on it — all three
   chosen earlier and gone by the time they mattered. */
.ab-flow {
  max-width: 1040px; margin: 0 auto; padding: 26px 20px 64px;
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: 32px; align-items: start;
}
.ab-flow__main { min-width: 0; }

.ab-summary {
  order: 2; position: sticky; top: 96px;
  background: #fff; border: 1px solid var(--cl-border); border-radius: 18px;
  padding: 22px; box-shadow: var(--cl-shadow-sm);
}
.ab-summary__toggle { display: none; }
.ab-summary__lbl {
  margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--cl-muted);
}
.ab-summary__title { margin: 8px 0 0; font-size: 20px; font-weight: 800; line-height: 1.25; }
.ab-summary__fits { margin: 8px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--cl-muted); }

.ab-summary__rows { margin-top: 18px; border-top: 1px solid var(--cl-border); padding-top: 14px; }
.ab-summary__row {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 13px; color: var(--cl-muted); margin-bottom: 7px;
}
.ab-summary__row b, .ab-summary__row span:last-child { color: var(--cl-text); }
.ab-summary__off { color: var(--cl-success) !important; font-weight: 700; }

.ab-summary__total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  border-top: 1px solid var(--cl-border); margin-top: 12px; padding-top: 14px;
  font-size: 13.5px; font-weight: 700;
}
.ab-summary__total b { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.ab-summary__month { margin: 4px 0 0; font-size: 12px; color: var(--cl-muted); text-align: right; }

.ab-summary__facts:not(:empty) { margin-top: 16px; }
.ab-summary__fact {
  border-top: 1px dashed var(--cl-border); padding-top: 11px; margin-top: 11px;
  font-size: 12.5px; line-height: 1.5;
}
.ab-summary__fact b {
  display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--cl-muted); margin-bottom: 3px;
}
.ab-summary__note {
  margin: 18px 0 0; font-size: 12px; color: var(--cl-success);
  font-weight: 600; display: flex; align-items: center; gap: 7px;
}

.ab-steps { display: flex; gap: 6px; margin-bottom: 22px; }
.ab-steps i { height: 4px; flex: 1; background: var(--cl-border); border-radius: 2px; transition: background .25s; }
/* Done steps are calm, the current one is not. All four filled the same
   blue read as "finished" on the last screen, which is the one screen where
   there is still something to do. */
.ab-steps i.done { background: rgba(11,71,212,.35); }
.ab-steps i.on { background: var(--cl-primary); }

.ab-screen { display: none; }
.ab-screen.on { display: block; }

.ab-lbl {
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cl-muted); margin: 22px 0 8px;
}
/* One shape for all four screens: a heading, a line of explanation, then the
   controls. Screens that each invented their own rhythm read as four pages
   built by four people, which is most of what "unprofessional" means here. */
.ab-h {
  margin: 0; font-size: clamp(20px, 2.4vw, 25px); font-weight: 800;
  line-height: 1.25; letter-spacing: -.015em;
}
.ab-note { margin: 8px 0 0; color: var(--cl-muted); font-size: 13.5px; line-height: 1.6; }
.ab-screen > .ab-note:first-of-type { max-width: 46em; }

/* Give the controls room to breathe under the heading without every screen
   hard-coding its own margin. */
.ab-screen > .ab-chips,
.ab-screen > #abAccess,
.ab-screen > #abMode { margin-top: 18px; }

.ab-box { border: 1px solid var(--cl-border); border-radius: 14px; padding: 16px; background: #fff; }
.ab-box + .ab-box { margin-top: 10px; }
.ab-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ab-row + .ab-row { margin-top: 7px; }
.ab-muted { color: var(--cl-muted); font-size: 13px; }
.ab-hr { height: 1px; background: var(--cl-border); margin: 12px 0; border: 0; }
.ab-big { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }

.ab-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.ab-chip {
  border: 1.5px solid var(--cl-border); background: #fff; border-radius: 11px;
  padding: 10px 13px; font: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s;
}
.ab-chip:hover { border-color: rgba(11,71,212,.35); }
.ab-chip.on {
  border-color: var(--cl-primary); background: rgba(11,71,212,.05); color: var(--cl-primary);
  box-shadow: 0 0 0 3px rgba(11,71,212,.07);
}
.ab-chip.on::before { content: "\2713 "; color: var(--cl-success); font-weight: 800; }
.ab-chip[disabled] { opacity: .4; cursor: not-allowed; }

.ab-choice {
  border: 1.5px solid var(--cl-border); border-radius: 14px; padding: 14px 16px;
  background: #fff; cursor: pointer; text-align: left; width: 100%; font: inherit;
  display: block; transition: border-color .15s, background .15s, box-shadow .15s;
}
.ab-choice + .ab-choice { margin-top: 9px; }
.ab-choice b { display: block; font-size: 14.5px; }
.ab-choice span { display: block; color: var(--cl-muted); font-size: 12.5px; margin-top: 4px; line-height: 1.5; }
.ab-choice.on {
  border-color: var(--cl-primary); background: rgba(11,71,212,.04);
  box-shadow: 0 0 0 3px rgba(11,71,212,.07);
}

.ab-field { margin-top: 14px; }
.ab-field + .ab-grid2, .ab-grid2 + .ab-field { margin-top: 14px; }
.ab-field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--cl-muted); margin-bottom: 5px; }
.ab-field input, .ab-field textarea, .ab-field select {
  width: 100%; border: 1px solid var(--cl-border); border-radius: 11px; padding: 12px 13px;
  font: inherit; font-size: 14.5px; color: var(--cl-text); background: #fff;
}
.ab-field input:focus, .ab-field textarea:focus, .ab-field select:focus {
  outline: none; border-color: var(--cl-primary); box-shadow: 0 0 0 3px rgba(11,71,212,.1);
}
.ab-field textarea { min-height: 78px; resize: vertical; }
.ab-field.ab-invalid input, .ab-field.ab-invalid select { border-color: #ef4444; }
.ab-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.ab-ok {
  background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 12px;
  padding: 12px 14px; font-size: 13px; color: #065f46; line-height: 1.55; margin-top: 14px;
}
.ab-warn {
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 12px;
  padding: 12px 14px; font-size: 13px; color: #92400e; line-height: 1.55; margin-top: 14px;
}
.ab-err {
  background: #fef2f2; border: 1px solid #fecaca; border-radius: 12px;
  padding: 12px 14px; font-size: 13px; color: #991b1b; line-height: 1.55; margin-top: 14px;
}

.ab-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ab-list li { position: relative; padding-left: 24px; font-size: 13.5px; color: #334155; line-height: 1.45; }
.ab-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--cl-success); font-weight: 800; }
.ab-list--tight { margin: 10px 0 14px; gap: 6px; }
.ab-list--tight li { font-size: 12.5px; }

.ab-actions {
  display: flex; gap: 10px; margin-top: 28px; align-items: center;
  border-top: 1px solid var(--cl-border); padding-top: 20px;
}
.ab-actions .ab-btn { margin-top: 0; flex: 1; }
/* A bordered button rather than bare text. On the last screen the text-only
   version sat next to a full-width primary and effectively disappeared,
   which is the wrong thing to hide on the screen people most want to go
   back from. */
.ab-back {
  background: #fff; border: 1px solid var(--cl-border); border-radius: 999px;
  color: var(--cl-muted); font: inherit; font-size: 13.5px; font-weight: 700;
  cursor: pointer; padding: 13px 20px; white-space: nowrap;
}
.ab-back:hover { color: var(--cl-text); border-color: var(--cl-muted); }

/* Always reachable, never loud. The customer who is stuck is the one this
   is for, and they are not looking at the middle of the screen. */
.ab-help { text-align: center; margin: 20px 0 0; font-size: 12.5px; color: var(--cl-muted); }
.ab-help a { color: var(--cl-primary); font-weight: 600; text-decoration: none; }

#ab-card-mount { margin-top: 14px; }

/* ───── confirmation ───── */
.ab-done { max-width: 560px; margin: 0 auto; padding: 40px 20px 64px; text-align: center; }
.ab-done-tick {
  width: 62px; height: 62px; border-radius: 50%; background: rgba(16,185,129,.12);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--cl-success); font-size: 26px; margin-bottom: 18px;
}
.ab-visits { text-align: left; margin-top: 22px; }
.ab-visit { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.ab-visit + .ab-visit { border-top: 1px solid var(--cl-border); }
.ab-visit-d { width: 46px; text-align: center; flex: none; }
.ab-visit-d b { display: block; font-size: 17px; font-weight: 800; line-height: 1; }
.ab-visit-d span { font-size: 10px; color: var(--cl-muted); text-transform: uppercase; letter-spacing: .05em; }
.ab-visit-m { flex: 1; font-size: 13.5px; }
.ab-visit-p { font-weight: 700; font-size: 13.5px; }

@media (max-width: 720px) {
  .ab-addon-list { grid-template-columns: 1fr 1fr; }
}

/* On a phone the receipt becomes a strip at the top that can be opened.
   Always-visible: the package and the price, because those are the two
   facts worth carrying through every screen. Everything else is one tap
   away rather than pushing the form off the bottom of the screen. */
@media (max-width: 900px) {
  .ab-flow { grid-template-columns: 1fr; gap: 16px; max-width: 640px; }
  .ab-summary {
    order: 0; position: sticky; top: 0; z-index: 20; padding: 0;
    border-radius: 14px; overflow: hidden;
  }
  .ab-summary__toggle {
    display: flex; width: 100%; align-items: center; justify-content: space-between;
    gap: 12px; background: #fff; border: 0; padding: 13px 16px;
    font: inherit; font-size: 14px; font-weight: 700; color: var(--cl-text); cursor: pointer;
  }
  .ab-summary__toggle-r { display: inline-flex; align-items: center; gap: 9px; }
  .ab-summary__toggle-r b { font-size: 17px; font-weight: 800; }
  .ab-summary__toggle-r i { color: var(--cl-muted); font-size: 12px; transition: transform .2s; }
  .ab-summary__toggle[aria-expanded="true"] .ab-summary__toggle-r i { transform: rotate(180deg); }
  .ab-summary__body { display: none; padding: 4px 16px 18px; border-top: 1px solid var(--cl-border); }
  .ab-summary.is-open .ab-summary__body { display: block; }
  .ab-summary__title { font-size: 17px; }
}
@media (max-width: 560px) {
  .ab-wrap { padding: 26px 16px 48px; }
  .ab-freq { width: 100%; justify-content: space-between; }
  .ab-freq button { flex: 1; justify-content: center; padding: 10px 8px; font-size: 13px; }
  .ab-save { display: none; }
  .ab-addon-list { grid-template-columns: 1fr; }
  .ab-grid2 { grid-template-columns: 1fr; }
  .ab-flow { padding: 20px 16px 48px; }
  .ab-actions { flex-direction: column-reverse; }
  .ab-actions .ab-back { width: 100%; }
}

/* A quiet aside under a form control, for explaining a label we do not own
   (Stripe renders its own field text and will not let it be replaced). */
.ab-hint {
  margin: 9px 0 0; font-size: 12px; line-height: 1.5; color: var(--cl-muted);
  display: flex; gap: 7px; align-items: flex-start;
}
.ab-hint::before { content: "\f05a"; font-family: "Font Awesome 6 Free"; font-weight: 900; opacity: .55; }

/* ───── the flexible calendar ─────
   Only slots a crew can actually take are offered. A calendar that shows
   everything and then rings back to apologise is worse than no calendar,
   so a day with nobody free is visibly, unmistakably not clickable. */
.ab-cal {
  border: 1px solid var(--cl-border); border-radius: 16px;
  background: #fff; padding: 14px; margin-top: 12px;
}
.ab-cal__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.ab-cal__head b { font-size: 15px; font-weight: 800; text-transform: capitalize; }
.ab-cal__nav {
  width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--cl-border);
  background: #fff; color: var(--cl-text); cursor: pointer; font-size: 12px;
}
.ab-cal__nav:hover:not(:disabled) { border-color: var(--cl-muted); }
.ab-cal__nav:disabled { opacity: .35; cursor: default; }

.ab-cal__dow, .ab-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.ab-cal__dow {
  margin-bottom: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--cl-muted); text-align: center;
}
.ab-cal__day {
  aspect-ratio: 1; border: 1px solid transparent; border-radius: 10px;
  background: none; font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--cl-text); cursor: pointer; position: relative;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s;
}
.ab-cal__day--pad { visibility: hidden; }
.ab-cal__day--free:hover { border-color: var(--cl-primary); background: rgba(11,71,212,.05); }
/* The dot is the signal; colour alone would fail for anyone who cannot
   separate the two greys. */
.ab-cal__day--free::after {
  content: ""; position: absolute; bottom: 6px; width: 4px; height: 4px;
  border-radius: 50%; background: var(--cl-success);
}
.ab-cal__day--busy { color: #cbd5e1; cursor: not-allowed; text-decoration: line-through; }
.ab-cal__day--on {
  background: var(--cl-primary); border-color: var(--cl-primary); color: #fff;
}
.ab-cal__day--on::after { background: #fff; }

.ab-cal__legend {
  margin: 12px 0 0; font-size: 11.5px; color: var(--cl-muted);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.ab-cal__key { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.ab-cal__key--free { background: var(--cl-success); }
.ab-cal__key--busy { background: #cbd5e1; margin-left: 10px; }

/* A card around a group of controls. Screen 4 was a single column of
   full-width inputs with a payment widget dropped in at the end; grouping
   "who you are" and "how you pay" makes it read as two decisions rather
   than eight fields. */
.ab-panel {
  background: #fff; border: 1px solid var(--cl-border); border-radius: 14px;
  padding: 4px 16px 18px;
}
.ab-panel .ab-field:first-child, .ab-panel .ab-grid2:first-child { margin-top: 14px; }