/* account.css — the family cabinet, on top of the tournament site's tokens. */
.acct-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:14px; margin-top:14px; }
.acct-card { background:var(--chalk, #fff); border:1px solid var(--line, #dfe5dc); border-radius:16px; padding:14px 16px; margin-bottom:12px; }
.acct-card-h { font-size:18px; margin-bottom:8px; }
.acct-line { display:flex; gap:12px; justify-content:space-between; align-items:flex-start; padding:7px 0; border-top:1px solid var(--line, #eef1ec); font-size:15px; }
.acct-line:first-of-type { border-top:0; }
.acct-k { flex:0 0 96px; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted, #6b7280); padding-top:3px; }
.acct-line > span:last-child, .acct-line > b { flex:1 1 auto; text-align:right; }
.acct-plans { display:flex; flex-direction:column; gap:6px; }
.acct-plan { display:flex; gap:10px; align-items:center; padding:10px 12px; border:1px solid var(--line, #dfe5dc); border-radius:12px; cursor:pointer; font-size:15px; }
.acct-plan:has(input:checked) { border-color:var(--court, #2E5644); background:#F3FBD4; }
.acct-plan input { width:18px; height:18px; margin:0; }
.acct-plan b { margin-left:auto; }
.acct-item { display:grid; grid-template-columns:1fr auto 72px; gap:8px; align-items:center; padding:8px 0; border-top:1px solid var(--line, #eef1ec); font-size:15px; }
.acct-item:first-child { border-top:0; }
.acct-item select, .acct-item input { font:inherit; padding:8px; border:1px solid var(--line, #dfe5dc); border-radius:10px; min-height:40px; }
.acct-item input { text-align:center; }
.acct-prices { display:block; font-size:14px; margin-top:2px; }
.acct-subprice { color:var(--court, #2E5644); font-weight:600; font-size:13px; }
.acct-plan span { display:flex; flex-direction:column; flex:1; }
.acct-plan b { margin-left:0; }
.acct-mode .acct-plan-sub { border-color:var(--court, #2E5644); }
.acct-total { display:flex; justify-content:space-between; font-size:20px; margin:14px 0 6px; padding-top:10px; border-top:2px solid var(--court, #2E5644); }
/* Only the one button that ends the page is full width. "Give it up",
   "Pause", "Book a group class" are ordinary buttons and were being
   stretched across the card, which pushed the text beside them into a
   one-word column. */
.acct-pay .btn { width:auto; margin-top:0; }
.acct-pay .acct-go { width:100%; margin-top:8px; }
#card-container { margin:6px 0 10px; }
.flash { padding:10px 14px; border-radius:10px; margin:10px 0; } .flash.ok { background:#EEF7EA; color:#33502f; } .flash.err { background:#FBF0EF; color:#b5654a; }
@media (max-width: 600px) { .acct-item { grid-template-columns:1fr; } .acct-item select { width:100%; } .acct-k { flex-basis:84px; } }

/* --- booking a class --- */
.acct-book { padding:12px 16px; }
.acct-book-in { display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.acct-book-right { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.acct-book-price { font:800 20px "Barlow Semi Condensed", sans-serif; color:var(--court); }
.acct-book.is-mine { border-color:#C6D98F; background:#F8FDEE; }
.acct-book form { display:flex; gap:8px; align-items:center; }
.acct-book select { height:38px; border-radius:10px; border:1px solid #C9D3CD; padding:0 10px; font:inherit; font-size:14px; }
/* the subscription card at the top of Pay */
.acct-sub { border-color:#C6D98F; background:#F8FDEE; }
/* the last few classes on a child's card */
.acct-visits { border-top:1px solid var(--line); margin-top:8px; padding-top:8px; }
.acct-visits .acct-k { margin-bottom:4px; }
.acct-visit { display:flex; justify-content:space-between; gap:10px; font-size:13.5px; padding:2px 0; }
.acct-visit .v-yes { color:#2E5644; font-weight:600; } .acct-visit .v-no { color:#9A3C1C; }

/* ---- the booking calendar, opened from the Pay page ---- */
.acct-modal { position:fixed; inset:0; background:rgba(20,30,25,.55); z-index:900; display:flex; align-items:flex-end; justify-content:center; padding:0; }
@media (min-width: 700px) { .acct-modal { align-items:center; padding:24px; } }
.acct-modal-in { background:var(--chalk, #fff); border-radius:18px 18px 0 0; width:100%; max-width:720px; max-height:88vh; display:flex; flex-direction:column; overflow:hidden; }
@media (min-width: 700px) { .acct-modal-in { border-radius:18px; } }
.acct-modal-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line, #dfe5dc); font-size:18px; }
.acct-modal-x { border:0; background:transparent; font-size:28px; line-height:1; color:var(--muted, #6b7280); cursor:pointer; padding:0 4px; min-height:44px; min-width:44px; }
.acct-modal-body { padding:14px 18px 22px; overflow-y:auto; }
.acct-days { display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; scrollbar-width:none; }
.acct-days::-webkit-scrollbar { display:none; }
.acct-day { flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:1px; min-width:62px; padding:8px 6px; border:1px solid var(--line, #dfe5dc); border-radius:14px; background:var(--chalk, #fff); cursor:pointer; font:inherit; color:inherit; }
.acct-day span { font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted, #6b7280); }
.acct-day b { font:800 20px "Barlow Semi Condensed", sans-serif; line-height:1.1; }
.acct-day.on { background:var(--court, #2E5644); border-color:var(--court, #2E5644); color:#fff; }
.acct-day.on span { color:rgba(255,255,255,.8); }
/* a booked seat: the tick line and the "give it up" button on one row */
.acct-booked { display:flex; gap:8px; align-items:center; }
.acct-booked .acct-plan { flex:1 1 auto; }
.acct-booked .btn { flex:0 0 auto; }
/* the items block: a row per thing, never squeezed to one letter */
.acct-items .acct-item { grid-template-columns:1fr 110px 72px; }
.acct-items .acct-item:has(input[type=hidden]:only-of-type) { grid-template-columns:1fr 72px; }
@media (max-width: 600px) {
  .acct-items .acct-item, .acct-items .acct-item:has(input[type=hidden]:only-of-type) { grid-template-columns:1fr auto; align-items:center; }
  .acct-item-l { grid-column:1 / -1; }
  .acct-booked { flex-wrap:wrap; }
}
/* the child picker needs room for a name, and the quantity box for two digits */
.acct-items .acct-item { grid-template-columns:1fr 170px 76px; }
.acct-items .acct-item select { max-width:100%; }
.acct-booked { align-items:stretch; }
.acct-booked .acct-plan { min-width:0; }
.acct-booked .btn { align-self:center; white-space:nowrap; }
@media (max-width: 600px) {
  /* label on its own line, then the child picker and the number side by side —
     a 40px-wide select showed "Ді ∨" and nothing else. */
  .acct-items .acct-item, .acct-items .acct-item:has(input[type=hidden]:only-of-type) { grid-template-columns:1fr 84px; }
  .acct-items .acct-item select { width:100%; }
}

/* What the family owes, on the page they open first. The one card on this
   screen that asks for something, so it is the one card with a warm edge —
   everything else here is green and is simply telling them how things are. */
.acct-owed {
  background: #fff; border: 2px solid #E3B7AD; border-radius: 14px;
  padding: 14px 16px; margin: 0 0 16px;
}
.acct-owed .acct-card-h { margin-bottom: 8px; }
.acct-owed .acct-line:last-of-type { border-bottom: 0; }
/* The left column here is a SENTENCE — "2x a week · moving up from 1x a week,
   the difference for the 3 classes left" — not the short uppercase key the
   rest of these rows carry. Shouted, it is unreadable. */
.acct-owed .acct-k {
  text-transform: none; letter-spacing: 0; font-weight: 500;
  font-size: 14px; line-height: 1.4; color: inherit; flex: 1 1 auto; padding-right: 12px;
}
.acct-owed .acct-k .muted { text-transform: none; letter-spacing: 0; font-size: 13px; }
.acct-owed .btn { width: auto; }
@media (max-width: 520px) { .acct-owed .btn { width: 100%; } }

/* ---- the subscription: say at the top that there is one, and where to stop it ---- */
.acct-subbar { display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  background:#F8FDEE; border:1px solid #C6D98F; border-radius:14px; padding:12px 16px; margin:0 0 16px; font-size:15px; }
.acct-subbar .btn { flex:0 0 auto; }
/* the one paragraph a family has to read before it ticks anything: what is
   ending, when the next charge lands. Same card as the bar, without the button. */
.acct-note-box { background:#F8FDEE; border:1px solid #C6D98F; border-radius:14px; padding:12px 16px; margin:0 0 16px; font-size:15px; }
.acct-note-box p { font-size:14px; color:#4a4a44; }
#subscription { scroll-margin-top:80px; }
/* each thing you can do to it is its own block with its own heading */
.acct-acts { border-top:1px solid #C6D98F; margin-top:12px; padding-top:12px; }
.acct-acts-h { font:800 13px "Barlow Semi Condensed", sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--court, #2E5644); margin-bottom:4px; }
.acct-acts-row { display:flex; gap:8px; flex-wrap:wrap; }
.btn-stop { background:transparent; color:#9A3C1C; border:1.5px solid #E3B7AD; }
.btn-stop:hover { background:#FBF0EF; }

/* ---- the one choice: month by month, or a subscription ------------------ */
/* It sits above the plans and every price below it follows the switch, so the
   family sees the price it will actually pay instead of two prices at once. */
.acct-switch { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:4px 0 14px; }
.acct-sw { position:relative; display:block; cursor:pointer; }
.acct-sw input { position:absolute; opacity:0; pointer-events:none; }
.acct-sw-in { display:block; border:2px solid var(--line, #dfe4dc); border-radius:14px; padding:12px 12px 10px; background:#fff; height:100%; }
.acct-sw-in b { display:block; font-size:15px; line-height:1.25; }
.acct-sw-in i { display:block; font-style:normal; font-size:12.5px; line-height:1.35; color:#5d6b5c; margin:4px 0 8px; }
.acct-sw-in em { display:block; font-style:normal; font-weight:800; font-size:19px; }
.acct-sw input:checked + .acct-sw-in { border-color:#1e4032; background:#f4faef; box-shadow:0 2px 0 rgba(30,64,50,.08); }
.acct-sw input:focus-visible + .acct-sw-in { outline:3px solid #b7e56a; outline-offset:2px; }
.acct-off { display:inline-block; background:#d6f36b; color:#22301c; border-radius:999px; padding:1px 7px; font-size:12px; vertical-align:2px; }
@media (max-width:430px) { .acct-switch { grid-template-columns:1fr; } .acct-sw-in em { display:inline-block; } }

/* One price at a time: .p-once while paying month by month, .p-sub while subscribing. */
.acct-pay .p-sub { display:none; }
.acct-pay.mode-sub .p-sub { display:inline; }
.acct-pay.mode-sub .p-once { display:none; }

/* ---- buy one thing for several people at once -------------------------- */
.acct-buy { padding:10px 0; border-bottom:1px solid var(--line, #e7ece5); }
.acct-buy:last-child { border-bottom:0; }
.acct-buy-h { display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:14.5px; }
.acct-buy-h b { white-space:nowrap; }
.acct-kids { display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:8px; }
.acct-kid { display:flex; align-items:center; gap:8px; font-size:13.5px; color:#4a574a; }
.acct-kid input { width:64px; padding:6px 8px; border:1px solid var(--line, #dfe4dc); border-radius:8px; font-size:15px; text-align:center; }

/* ---- the card step ----------------------------------------------------- */
/* One size for both wallets. Apple draws its own button and Square injects
   Google's, so each arrived with its own idea of how tall it should be and
   they sat side by side at different heights. */
.acct-wallet { margin-bottom:10px; height:48px; width:100%; display:block; }
#google-pay-button { height:48px; width:100%; overflow:hidden; border-radius:10px; }
#google-pay-button > div, #google-pay-button button, #google-pay-button iframe { height:48px !important; width:100% !important; }
/* Apple draws this button itself. It has to be a real <button> with
   -webkit-appearance: -apple-pay-button — a styled div with the word "Pay" in
   it is not an Apple Pay button, it only looks like one, and Safari will not
   treat it as the genuine control. The height and radius below are the only
   parts we are allowed to set. */
#apple-pay-button {
  -webkit-appearance: -apple-pay-button;
  appearance: -apple-pay-button;
  -apple-pay-button-type: plain;
  -apple-pay-button-style: black;
  height:48px; width:100%; border:0; border-radius:10px; cursor:pointer; padding:0;
}
/* Anywhere that does not know the Apple button — every browser but Safari —
   the element is hidden anyway, but keep it from showing as a bare box. */
@supports not (-webkit-appearance: -apple-pay-button) {
  #apple-pay-button { background:#000; color:#fff; font-weight:700; }
  #apple-pay-button::after { content:" Pay"; }
}
.acct-or { position:relative; text-align:center; margin:12px 0; }
.acct-or::before { content:""; position:absolute; left:0; right:0; top:50%; border-top:1px solid var(--line, #e7ece5); }
.acct-or span { position:relative; background:#fff; padding:0 10px; font-size:12.5px; color:#6b776a; }
.sqmock { border:1px solid var(--line, #dfe4dc); border-radius:12px; padding:12px; background:#fff; }
.sqmock-l { display:block; font-size:12px; color:#5d6b5c; margin-bottom:8px; }
.sqmock-l input { display:block; width:100%; margin-top:4px; padding:10px; border:1px solid var(--line, #dfe4dc); border-radius:8px; font-size:16px; }
.sqmock-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.sqmock-row .sqmock-l { margin-bottom:0; }
.acct-sw-in .acct-today { display:block; font-size:12px; color:#5d6b5c; margin-top:2px; }

/* ---- hand-sized on a phone ---------------------------------------------
   A finger is about 9 mm across. Anything that is tapped rather than read
   gets 44 px of height on a small screen: the segmented switchers, the
   filter chips, the small ghost buttons and the account pill in the bar. */
@media (max-width: 680px) {
  .seg a, .seg button { min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; }
  .filters { gap: 8px; }
  .btn-sm { min-height: 44px; padding: 0 18px; }
  .pill-user { min-height: 44px; }
  .acct-plan { min-height: 48px; }
  .acct-kid input { min-height: 46px; width: 72px; font-size: 16px; }
  .acct-buy-h { font-size: 15px; }
  .acct-line { padding: 10px 0; }
  .acct-go { min-height: 52px; font-size: 16px; }
}

/* the payment policy: present, readable, not shouting */
.acct-policy { font-size: 12.5px; line-height: 1.55; color: #6b776a; background: #f4f7f2;
  border: 1px solid var(--line, #e2e8e0); border-radius: 12px; padding: 12px 14px; margin: 16px 0 0; }
.acct-policy b { color: #3d4a44; }

/* the wallet buttons, as Apple and Google draw them */
.acct-wallet-mock { margin-bottom: 4px; }
.acct-applepay, .acct-gpay { display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; border-radius: 10px; border: 0; font: 600 17px/1 -apple-system, "Helvetica Neue", Arial, sans-serif; cursor: pointer; margin-bottom: 10px; }
.acct-applepay { background: #000; color: #fff; }
.acct-applepay span::before { content: ""; display: inline-block; width: 17px; height: 20px; margin-right: 4px; vertical-align: -3px; background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 200'%3E%3Cpath d='M139 106c0-27 22-39 23-40-13-19-33-21-40-21-17-2-33 10-41 10s-22-10-36-9c-18 0-35 11-45 27-19 33-5 82 14 109 9 13 20 28 34 27 14 0 19-9 36-9s21 9 36 9 24-13 33-27c10-15 15-30 15-31 0 0-29-11-29-45zM113 27c8-9 13-22 11-35-11 1-24 8-32 17-7 8-13 21-12 33 12 1 25-6 33-15z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 200'%3E%3Cpath d='M139 106c0-27 22-39 23-40-13-19-33-21-40-21-17-2-33 10-41 10s-22-10-36-9c-18 0-35 11-45 27-19 33-5 82 14 109 9 13 20 28 34 27 14 0 19-9 36-9s21 9 36 9 24-13 33-27c10-15 15-30 15-31 0 0-29-11-29-45zM113 27c8-9 13-22 11-35-11 1-24 8-32 17-7 8-13 21-12 33 12 1 25-6 33-15z'/%3E%3C/svg%3E") center/contain no-repeat; }
.acct-gpay { background: #fff; color: #3c4043; border: 1px solid #dadce0; }
/* a booked class on the dashboard: the class, its state, and the way out */
.acct-booked { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 9px 0; border-top: 1px solid var(--line, #eef1ec); flex-wrap: wrap; }
.acct-booked:first-child { border-top: 0; }
.acct-booked form { margin: 0; }
.acct-booked .btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---- the first screen on a phone ---------------------------------------
   A parent opens Pay to pick a plan, and the plans were the one thing below
   the fold: the header pill, the page title, the bar and a paragraph filled
   the screen. Everything above the choice is made smaller, in that order. */
@media (max-width: 680px) {
  /* the email in the bar is not information, it is reassurance: one line of it */
  .nav .pill-user { max-width: 46vw; }
  .nav .pill-user span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* the page title, half a screen of it on a phone */
  .section .eyebrow { font-size: 11px; margin-bottom: 2px; }
  .section h1.h { font-size: 30px; line-height: 1.02; margin: 2px 0 10px; }
  .section { padding-top: 14px; }
  /* the two ways to pay: one row, not two cards */
  .acct-switch { grid-template-columns: 1fr 1fr; gap: 8px; margin: 2px 0 10px; }
  .acct-sw-in { padding: 9px 10px; }
  .acct-sw-in b { font-size: 13.5px; }
  .acct-sw-in i { display: none; }
  .acct-sw-in em { font-size: 16px; }
  .acct-sw-in .acct-today { font-size: 11px; }
  .acct-off { font-size: 11px; padding: 0 6px; }
  /* the explaining paragraph sits under the choice, quietly */
  .acct-pay > p.muted { font-size: 12.5px; line-height: 1.45; margin: 6px 0 10px; }
  .acct-subbar { padding: 10px 12px; gap: 8px; }
  .acct-subbar span { font-size: 13.5px; }
  h2.h3 { font-size: 17px; margin-bottom: 6px; }
}
.acct-more { display: inline-block; margin-top: 2px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
#how { scroll-margin-top: 80px; }

/* ---- one row per child, and two doors ---------------------------------- *
 * The pair of radios that used to sit above the plans is gone. Its only
 * visible effect was which of two prices was bold, and a real customer went
 * through the whole page without noticing it. Each plan now carries ONE
 * price — the one that will be charged, sibling discount already in it — and
 * the way of paying is the button you press to leave the page.
 */
.acct-child { padding-bottom: 12px; }
/* minmax(0, 1fr), not 1fr: a grid track's minimum is its CONTENT, so "2x a week
   + Fitness" refused to shrink and the row stuck 20 px past the right edge of a
   390 px phone. The whole page then scrolled sideways, and everything on the
   right of it — the "Change or cancel it" button in the bar at the top — slid
   out of sight. That is why the button looked missing in one account and
   present in another: it was there both times, one screen was simply scrolled.
   Under 420 px the four chips become two columns and "Not in it" takes a row
   of its own, which is the only way three prices and an opt-out fit a thumb. */
.acct-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 66px; gap: 6px; margin-top: 10px; }
@media (max-width: 420px) {
  .acct-chips:not(.acct-chips-wide):not(.acct-chips-lesson):not(.acct-chips-fee) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acct-chips:not(.acct-chips-wide):not(.acct-chips-lesson):not(.acct-chips-fee) .acct-chip-no { grid-column: 1 / -1; }
  .acct-chips:not(.acct-chips-wide):not(.acct-chips-lesson):not(.acct-chips-fee) .acct-chip-no > span { flex-direction: row; gap: 8px; min-height: 0; padding: 8px 10px; }
}
.acct-chip { position: relative; }
.acct-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.acct-chip > span {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 56px; padding: 8px 4px; border: 1px solid var(--line, #dfe4dc); border-radius: 12px;
  background: #fff; cursor: pointer; text-align: center;
}
.acct-chip i { font-style: normal; font-size: 11.5px; line-height: 1.15; color: #6b776a; }
.acct-chip b { font: 700 15px/1 "Barlow Semi Condensed", Inter, sans-serif; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.acct-chip input:checked + span { border-color: #1e4032; border-width: 2px; background: #f3fbd4; padding: 7px 3px; }
.acct-chip input:checked + span i { color: #1e4032; }
.acct-chip input:focus-visible + span { outline: 2px solid #1e4032; outline-offset: 2px; }
.acct-chip-no > span { color: #8b968a; }
.acct-chip-no b { font-size: 18px; }
.acct-child-note { margin: 8px 0 0; font-size: 12.5px; color: #6b776a; min-height: 1.2em; }
.acct-child-note.is-paid { color: #2f6b3f; }
.acct-ahead { display: flex; gap: 8px; align-items: center; margin-top: 8px; font-size: 13px; color: #405044; }

.acct-doors { margin-top: 22px; }
.acct-doors-note { margin: 0 0 12px; }
.acct-door-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 359px) { .acct-door-pair { grid-template-columns: 1fr; } }
.acct-door {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 14px 14px 14px; border: 2px solid var(--line, #dfe4dc); border-radius: 16px;
  background: #fff; cursor: pointer; text-align: left; font: inherit; color: inherit; width: 100%;
}
.acct-door-sub { border-color: #1e4032; }
.acct-door:active { transform: translateY(1px); }
.acct-door-k { font: 700 12px/1.2 "Barlow Semi Condensed", Inter, sans-serif; letter-spacing: .07em; text-transform: uppercase; color: #1e4032; }
.acct-door-m { font: 800 26px/1.05 "Barlow Semi Condensed", Inter, sans-serif; font-variant-numeric: tabular-nums; }
.acct-door-u { font-size: 12px; color: #6b776a; margin-bottom: 4px; }
.acct-door-who { font-size: 12px; color: #6b776a; }
.acct-door-rule { display: block; width: 100%; border-top: 1px solid var(--line, #e7ece5); margin: 8px 0; }
.acct-door-t { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.acct-door-why { font-size: 12px; line-height: 1.45; color: #6b776a; margin: 4px 0 10px; }
.acct-door-go {
  margin-top: auto; align-self: stretch; text-align: center; padding: 12px 10px; border-radius: 10px;
  font: 700 14.5px/1 Inter, sans-serif; background: #fff; border: 2px solid #1e4032; color: #17301f;
}
.acct-door-sub .acct-door-go { background: #b7f43a; border-color: #b7f43a; }

/* A section folded away until it is wanted. Used for the single classes and
   fees: six kinds of thing times a box per child is eighteen number fields,
   and on a phone that was most of the page — sitting between the plans and
   the two doors, which are what the parent came for. */
.acct-fold { border: 1px solid var(--line, #dfe4dc); border-radius: 14px; background: #fff; padding: 0 14px; margin-bottom: 12px; }
.acct-fold > summary {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 15px 0; cursor: pointer; font-weight: 600; font-size: 15px; list-style: none;
}
.acct-fold > summary::-webkit-details-marker { display: none; }
.acct-fold > summary::after { content: "+"; margin-left: auto; font: 700 20px/1 Inter, sans-serif; color: #1e4032; }
.acct-fold[open] > summary::after { content: "–"; }
.acct-fold > summary i { font-style: normal; font-size: 12.5px; color: #6b776a; }
.acct-fold[open] > summary { border-bottom: 1px solid var(--line, #eef1ec); }
.acct-fold > *:last-child { margin-bottom: 14px; }
.acct-fold .acct-card { border: 0; padding-left: 0; padding-right: 0; margin-bottom: 0; }

/* The way of paying, restated on the checkout: the one chosen, and the one
   not chosen with its real figures. Changing your mind here must not mean
   going back and picking every plan again. */
.acct-way { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; margin: 14px 0 4px; }
.acct-way-now {
  display: flex; align-items: center; padding: 10px 14px; border-radius: 12px;
  background: #1e4032; color: #fff; font: 700 12.5px/1.2 "Barlow Semi Condensed", Inter, sans-serif;
  letter-spacing: .07em; text-transform: uppercase;
}
.acct-way-alt { flex: 1 1 200px; margin: 0; }
.acct-way-alt button {
  display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left;
  padding: 8px 14px; border: 1px solid var(--line, #dfe4dc); border-radius: 12px;
  background: #fff; cursor: pointer; font: inherit; color: inherit;
}
.acct-way-alt b { font: 700 12.5px/1.2 "Barlow Semi Condensed", Inter, sans-serif; letter-spacing: .07em; text-transform: uppercase; color: #1e4032; }
.acct-way-alt i { font-style: normal; font-size: 13px; font-variant-numeric: tabular-nums; }
.acct-way-alt em { font-style: normal; font-size: 11.5px; color: #6b776a; }
.acct-child-note.is-more { color: #b5654a; font-weight: 600; }

/* The bar that appears the moment a subscription's plans are changed. It is
   sticky because the ticks are at the top of the page and the button used to
   be a long way below them, under a heading about something else — a parent
   changed a plan, watched the price change, and left without saving. */
/* FIXED, not sticky. A sticky element cannot leave its containing block, and
   this one sits near the end of a long form — so on a tall page it stayed
   14 px below the fold and the parent had to scroll to the bottom to reach it,
   which is the whole thing it exists to avoid. Fixed pins it to the viewport
   for every family, in every state. The body gets room underneath so the bar
   never sits on top of the last thing on the page. */
.acct-savebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; margin: 0;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(244,246,242,0) 0%, #f4f6f2 38%);
  pointer-events: none;   /* the gradient above the card must not swallow taps */
}
.acct-savebar-in {
  pointer-events: auto;
  max-width: 720px; margin: 0 auto;
  display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  background: #fff; border: 2px solid #1e4032; border-radius: 14px; padding: 12px 14px;
  box-shadow: 0 8px 24px rgba(20, 45, 28, .14);
}
body.acct-bar-open { padding-bottom: 148px; }

/* ON A PHONE: one straight button, nothing else.
   The owner, 21 Sep 2026: "на телефоні буде просто одна пряма кнопка — оплатити
   зараз ту суму котра висить… все без зайвих підписів, а вже в наступному вікні
   там все розписано". Three lines of explanation over a thumb are three lines
   nobody reads; the figure is on the button and the detail is one tap away. */
@media (max-width: 520px) {
  body.acct-bar-open { padding-bottom: 96px; }
  .acct-savebar { padding: 6px 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
  /* No card around it — the button IS the bar. The white box with its dark
     outline read as a dialog that had opened over the page. */
  .acct-savebar-in {
    background: none; border: 0; border-radius: 0; box-shadow: none;
    padding: 0; gap: 0;
  }
  .acct-savebar-in > div { display: none; }
  .acct-savebar-in .btn {
    flex: 1 1 100%; width: 100%; text-align: center; justify-content: center;
    font-size: 15.5px; padding: 15px 12px;
    box-shadow: 0 6px 20px rgba(20, 45, 28, .22);
  }
}
.acct-savebar b { display: block; font-size: 14.5px; }
.acct-savebar span { display: block; font-size: 13px; }
.acct-savebar .btn { flex: 0 0 auto; margin-top: 0; }

/* Single things — a private lesson, the registration fee — as squares, the
   same shape as the plans. A number box asked a parent to think in quantities
   before deciding they wanted the thing at all; a square says "this one", and
   the counter appears only after they have said yes. */
.acct-chips-wide { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.acct-item { position: relative; }
.acct-item-add {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 100%; min-height: 74px; padding: 8px 6px; border: 1px solid var(--line, #dfe4dc);
  border-radius: 12px; background: #fff; cursor: pointer; font: inherit; color: inherit; text-align: center;
}
.acct-item-add i { font-style: normal; font-size: 11.5px; line-height: 1.15; color: #6b776a; }
.acct-item-add b { font: 700 15px/1 "Barlow Semi Condensed", Inter, sans-serif; font-variant-numeric: tabular-nums; }
.acct-item-add em { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #1e4032; }
.acct-item-step {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  min-height: 74px; padding: 6px; border: 2px solid #1e4032; border-radius: 12px; background: #f3fbd4;
}
.acct-item-step button {
  width: 30px; height: 30px; border: 1px solid #c5d6b0; border-radius: 8px; background: #fff;
  font: 700 16px/1 Inter, sans-serif; color: #17301f; cursor: pointer; padding: 0;
}
.acct-item-step .acct-item-x { border-color: #e3b7ad; color: #b5654a; }
.acct-item-n { min-width: 20px; text-align: center; font: 700 15px/1 Inter, sans-serif; font-variant-numeric: tabular-nums; }
.acct-item-one { font-size: 12px; font-weight: 700; color: #2f6b3f; }
/* The cross that takes one thing out of the basket, on the screen where a
   parent finally reads what they are about to pay for. */
.acct-drop { flex: 0 0 auto; margin: 0; }
.acct-drop button {
  width: 26px; height: 26px; padding: 0; border: 1px solid var(--line, #dfe4dc); border-radius: 8px;
  background: #fff; color: #b5654a; font: 700 15px/1 Inter, sans-serif; cursor: pointer;
}
.acct-line > .acct-drop { align-self: center; }



/* Both prices on the plan, with a hierarchy — which is what the old pair of
   equal-weight numbers never had. Big is what it costs on a subscription, the
   line under it is what it costs without. */
.acct-chip u { display: block; font-style: normal; text-decoration: none; font-size: 10.5px; line-height: 1.2; color: #8b968a; }
.acct-chip input:checked + span u { color: #55705c; }


/* Single things: one row of equal squares, one choice at a time, and the count
   opens INSIDE the square that was chosen — not in a bar below it, where it
   had stopped being obviously about the thing just pressed. */
.acct-chips-lesson { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 380px) { .acct-chips-lesson { grid-template-columns: repeat(2, 1fr); } }
.acct-chips-fee { grid-template-columns: 1fr; margin-top: 8px; }
.acct-single .acct-chip > span { min-height: 68px; }
.acct-single-pick input:checked + span { padding-bottom: 6px; }
.acct-step { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 6px; }
.acct-step button {
  width: 26px; height: 26px; padding: 0; border: 1px solid #c5d6b0; border-radius: 7px; background: #fff;
  font: 700 14px/1 Inter, sans-serif; color: #17301f; cursor: pointer;
}
.acct-step .acct-step-x { border-color: #e3b7ad; color: #b5654a; }
.acct-step-n { font-style: normal; min-width: 18px; text-align: center; font: 700 14px/1 Inter, sans-serif; font-variant-numeric: tabular-nums; }

/* The registration fee is a yes or no, so it is a wide square of its own. */
.acct-fee-pick > span { flex-direction: row !important; align-items: center; gap: 10px; justify-content: flex-start; text-align: left; min-height: 52px; padding-left: 14px; }
.acct-fee-pick i { font-size: 13px !important; color: #17301f !important; }
.acct-fee-pick b { margin-left: auto; }
.acct-fee-pick em { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #1e4032; }
.acct-fee-on { display: none; color: #2f6b3f; }
.acct-fee-pick input:checked + span .acct-fee-off { display: none; }
.acct-fee-pick input:checked + span .acct-fee-on { display: block; }

/* Which price is which, said in words rather than left to be guessed — and
   the subscription said louder, because it is the one the academy wants and
   the one that costs the family less. The pair below it is deliberately
   quieter: same information, plainly second. */
.acct-chip b { font-size: 17px; }
.acct-chip-k { display: block; font-style: normal; font-size: 10.5px; line-height: 1.25; letter-spacing: .05em; text-transform: uppercase; color: #2f6b3f; font-weight: 700; }
.acct-chip u { display: block; font-style: normal; text-decoration: none; font: 700 12px/1.15 "Barlow Semi Condensed", Inter, sans-serif; color: #8b968a; margin-top: 5px; }
.acct-chip u + .acct-chip-k { font-size: 9px; font-weight: 600; color: #97a29a; letter-spacing: .04em; }

/* Which sport a class is, beside its name. The front page's calendar is already
   split by sport and says nothing here; this is for the booking screen, where
   tennis and pickleball classes sit in one list together. */
.acct-sport {
  display: inline-flex; align-items: center; vertical-align: middle;
  margin-left: 8px; padding: 3px 9px; border-radius: 999px;
  font: 700 11px/1 "Barlow Semi Condensed", Inter, sans-serif;
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  background: #E9EDE9; color: #46534B;
}
.acct-sport-tennis { background: #E4EFE8; color: #1B3A2D; }
.acct-sport-pickleball { background: #F6E7DE; color: #A2481F; }
.acct-sport-fitness { background: #E7EDF7; color: #2B4A78; }

/* The way into somebody's tournament account from their card here. Quiet: the
   cabinet is about classes and money, and the tour is a different errand. */
.acct-tlink {
  font-weight: 600;
  color: #2f6b3f;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.acct-tlink:hover { color: #1B3A2D; }

/* The card a family keeps, offered before the form. One button, because the
   whole point of it is that there is nothing to fill in. */
.acct-saved { margin: 4px 0 8px; }
.acct-saved-go { width: 100%; justify-content: center; }
.acct-saved-alt {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 10px; font-size: 13px;
}
.acct-linkbtn {
  background: none; border: 0; padding: 0;
  font: inherit; color: #2f6b3f; font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  cursor: pointer;
}
.acct-linkbtn:hover { color: #1B3A2D; }
.acct-keep {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 12px 0 0; font-size: 13.5px; line-height: 1.45;
}
.acct-keep input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; }

/* The other way to pay. Ordinary and quiet while the card form works; the
   script promotes it when the browser will not run the form at all. */
.acct-sqpage { margin: 14px 0 0; text-align: center; }
.acct-sqpage.is-main { margin: 4px 0 0; }
.acct-sqpage.is-main button { width: 100%; }
.acct-sqpage-note {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink, #1B1B1B);
  text-align: left;
}

/* Square's own words, when its form refuses to start. Small and plain: it is
   for us, not for the customer, but hiding it has cost more than showing it. */
.acct-why {
  margin: 6px 0 0;
  font: 500 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #8a938c;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
 * Seats, and the window to change your mind (24 Sep 2026)
 *
 * Both are deliberately the quietest things on the card. The accent belongs
 * on the lime Book button; these only answer two questions a person has
 * anyway — is anyone else coming, and how long have I got.
 * ------------------------------------------------------------------------- */

/* Eight people, filling from the left. Dark green rather than the brand lime:
   the button beside them is lime, and two limes on one card fight for the eye. */
.seats { display:inline-flex; align-items:center; gap:10px; }
.seats-row { display:inline-flex; gap:3px; }
.seats-row span { display:block; }
.seats-row svg { display:block; width:15px; height:15px; }
.seat-free { color:#D3DBD5; }
.seat-taken { color:#2E5644; }
.seats-n { font:700 12.5px/1 Inter, system-ui, sans-serif; color:var(--muted,#6b7280);
           font-variant-numeric:tabular-nums; white-space:nowrap; }
.seats-n b { color:#1E4032; }

/* The deadline line and its hairline. 2px, the card's own border colour,
   no red at any point — it empties, and that is the whole message. */
.bk-dl { margin:10px 0 0; font-size:12px; color:var(--muted,#6b7280); }
.bk-bar { margin-top:5px; height:2px; border-radius:2px; background:var(--line,#e6ebe4); overflow:hidden; }
.bk-bar i { display:block; height:100%; background:#9fb3a6; }