/*
 * GG Bookings — account.css: the customer account pages (/account/*).
 * Built on the theme's tokens (--gg-fire, --gg-border, --gg-dim, the two
 * font stacks) so it follows global.css. Served raw from the plugin.
 *
 * The card, the form fields, the button, the notices and the links live in
 * account-forms.css, which this depends on: the sign-in form is also the
 * popup the header opens on every public page, and that page must not pay
 * for this whole stylesheet. A rule the sign-in form needs goes THERE.
 */

.gg-acct {
  padding: 40px 0 64px;
  max-width: 880px;
}

/* ---------- header ---------- */
.gg-acct__head {
  text-align: center;
  margin-bottom: 24px;
}
.gg-acct__title {
  font-family: var(--gg-font-ui);
  font-weight: 800;
  letter-spacing: 0.04em;
  font-size: clamp(26px, 4vw, 38px);
  margin: 0 0 8px;
  color: #fff;
}
.gg-acct__subtitle {
  margin: 0;
  color: var(--gg-dim);
  font-family: var(--gg-font-body);
  font-size: 15px;
}

.gg-acct__cardtitle {
  margin: 0 0 16px;
  font-family: var(--gg-font-ui);
  font-size: 17px;
  font-weight: 700;
  color: #fff;
}

.gg-acct__cardtitle--section {
  margin: 10px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--gg-border);
}

/* ---------- Wallet ---------- */
.gg-acct__credit-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.gg-acct__credit-head .gg-acct__hint { margin: 4px 0 0; }
/* The balance and its History button, side by side; the button opens the
   ledger in a popup (owner, 2026-09-24: the lines were a list under the balance). */
/* The card: the title, the balance under it, and History small in the
   card's top-right corner, clear of the balance (owner, 2026-09-25). */
.gg-acct__credit { position: relative; }
.gg-acct__credit .gg-acct__credit-head { flex-direction: column; gap: 10px; padding-right: 96px; }
.gg-acct__credit-side { display: flex; }
.gg-acct__credit .gg-acct__btn.gg-acct__credit-historybtn {
  position: absolute;
  top: 18px;
  right: 18px;
  padding: 5px 12px;
  font-size: 12px;
  min-width: 0;
  width: auto;
}
/* The popup is printed inside the signed-in shell, whose cards run full
   width (.gg-acct--app .gg-acct__card, later in this file) and drop their
   left margin (.gg-acct__main .gg-acct__card): give the ledger's panel a
   width of its own. Three classes deep on purpose — those rules are two, so
   a two-class rule here loses to whichever comes later — and margin 0,
   because the base card's auto margins on a flex item beat the modal's
   centring and pin the panel to the left edge. */
.gg-acct-modal .gg-acct-modal__panel.gg-acct__card { width: min(640px, 100%); max-width: none; margin: 0; }
.gg-acct-modal--history .gg-acct__credit-list { margin-top: 4px; }
.gg-acct__credit-balance {
  flex: 0 0 auto;
  font-family: var(--gg-font-ui);
  font-size: 28px;
  font-weight: 700;
  color: var(--gg-fire);
  white-space: nowrap;
}
.gg-acct__credit-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  border-top: 1px solid var(--gg-border);
}
.gg-acct__credit-list li {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--gg-border);
  font-family: var(--gg-font-body);
  font-size: 14px;
}
.gg-acct__credit-list li:last-child { border-bottom: 0; }
.gg-acct__credit-when { color: var(--gg-dim); font-size: 12px; }
.gg-acct__credit-label { color: #fff; min-width: 0; }
.gg-acct__credit-label small { display: block; color: var(--gg-dim); font-size: 12px; overflow-wrap: anywhere; }
.gg-acct__credit-amount { font-family: var(--gg-font-ui); font-weight: 700; color: #fff; white-space: nowrap; }
.gg-acct__credit-amount.is-neg { color: var(--gg-dim); }
@media (max-width: 520px) {
  .gg-acct__credit-head { flex-direction: column; }
  .gg-acct__credit-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .gg-acct__credit-when { grid-column: 1 / -1; }
}
/* The Wallet's cards stand apart (owner, 2026-09-24: the credit card and
   Add a voucher sat on each other, and the vouchers hard under that). */
/* ~ not +: the History popup's markup sits between the two cards. */
.gg-acct__credit ~ .gg-acct__card--wallet-add,
.gg-acct__card--wallet-add + .gg-acct__grid,
.gg-acct__card--wallet-add + .gg-acct__empty { margin-top: 28px; }
.gg-acct__wallet-addrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}
.gg-acct__wallet-addrow .gg-acct__field { margin-bottom: 0; }
.gg-acct__wallet-addrow .gg-acct__btn { white-space: nowrap; }
.gg-acct__wallet-addrow input { text-transform: uppercase; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.06em; }
.gg-acct__wcard {
  background: #11131a;
  border: 1px solid var(--gg-border);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gg-acct__wcard--used, .gg-acct__wcard--expired, .gg-acct__wcard--disabled { opacity: 0.62; }
.gg-acct__whead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.gg-acct__wamount {
  font-family: var(--gg-font-ui);
  font-size: 17px;
  font-weight: 700;
  color: #fff;
}
.gg-acct__wstate {
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--gg-border);
  font-family: var(--gg-font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--gg-dim);
  white-space: nowrap;
}
.gg-acct__wstate--available { background: var(--gg-fire); border-color: var(--gg-fire); color: #1a0d00; }
.gg-acct__wcode {
  padding: 12px 14px;
  border: 1px dashed var(--gg-border);
  border-radius: 10px;
  background: #0b0d14;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
  text-align: center;
  user-select: all;
  overflow-wrap: anywhere;
}
.gg-acct__wmeta { margin: 0; display: grid; gap: 6px; }
.gg-acct__wmeta div { display: flex; gap: 12px; }
.gg-acct__wmeta dt {
  flex: 0 0 76px;
  color: var(--gg-dim);
  font-family: var(--gg-font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 20px;
}
.gg-acct__wmeta dd { margin: 0; color: #fff; font-family: var(--gg-font-body); font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.gg-acct__wcard .gg-acct__bactions { margin-top: auto; flex-wrap: wrap; padding: 0; } /* the card pads already */
.gg-acct__wcard .gg-acct__bactions .gg-acct__notice { flex: 1 0 100%; margin: 0; }
/* Bought to give: its own section under the vouchers to spend. */
.gg-acct__wgive { margin-top: 32px; }
.gg-acct__wpast { margin-top: 32px; }
.gg-acct__wgive > .gg-acct__cardtitle { margin: 0 0 14px; }
/* Download + Use it myself: one column of equal buttons. */
.gg-acct__wgive .gg-acct__bactions { display: grid; grid-template-columns: 1fr; gap: 10px; }
.gg-acct__wpdf { margin: 0; }
.gg-acct__wgive .gg-acct__bactions .gg-acct__btn { width: 100%; margin: 0; }
@media (max-width: 520px) {
  .gg-acct__wallet-addrow { grid-template-columns: 1fr; }
}

/* The site switch (Notifications). The real checkbox is visually hidden
   and the track is drawn as its IMMEDIATE next sibling — the on state is an
   adjacent-sibling rule, so nothing may sit between them. */
.gg-acct__switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  cursor: pointer;
}
.gg-acct__switch-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: var(--gg-font-body);
}
.gg-acct__switch-text strong {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}
.gg-acct__switch-text small {
  color: var(--gg-dim);
  font-size: 13px;
  line-height: 1.45;
}
.gg-acct__switch-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.gg-acct__switch-track {
  position: relative;
  flex: 0 0 46px;
  width: 46px;
  height: 26px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid var(--gg-border);
  transition: background 0.18s ease, border-color 0.18s ease;
}
.gg-acct__switch-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.18s ease;
}
.gg-acct__switch-input:checked + .gg-acct__switch-track {
  background: var(--gg-fire);
  border-color: var(--gg-fire);
}
.gg-acct__switch-input:checked + .gg-acct__switch-track::after {
  transform: translateX(20px);
  background: #1a0d00;
}
.gg-acct__switch-input:focus-visible + .gg-acct__switch-track {
  outline: 2px solid var(--gg-fire);
  outline-offset: 3px;
}
.gg-acct__switch-input:disabled + .gg-acct__switch-track {
  opacity: 0.55;
}




.gg-acct a { color: var(--gg-fire); text-decoration: none; }
.gg-acct a:hover { text-decoration: underline; }
/* Anchor buttons keep the dark-on-orange button text. */
.gg-acct a.gg-acct__btn { color: #1a0d00; }
.gg-acct a.gg-acct__btn:hover { color: #1a0d00; text-decoration: none; }

/* ---------- GridSquad ---------- */
.gg-acct__squad {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--gg-border);
  font-family: var(--gg-font-body);
  font-size: 13px;
}
.gg-acct__squadhead {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  color: var(--gg-dim);
}
.gg-acct__squadhead strong { color: #fff; font-weight: 600; }
.gg-acct__squadchips { display: flex; flex-wrap: wrap; gap: 6px; }
.gg-acct__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--gg-fire);
  background: var(--gg-fire-bg);
  color: var(--gg-fire);
  font-family: var(--gg-font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.gg-acct__chip.is-invited { border-style: dashed; opacity: 0.85; }
.gg-acct__chip.is-suggested { border-style: dotted; opacity: 0.7; }
.gg-acct__chip.is-leader { border-style: double; border-width: 3px; padding-top: 2px; padding-bottom: 2px; }
.gg-acct__chip.is-declined { border-color: var(--gg-border); color: var(--gg-dim); background: transparent; text-decoration: line-through; }
.gg-acct__chip small { font-family: var(--gg-font-body); font-weight: 400; letter-spacing: 0; opacity: 0.8; }
.gg-acct__chip button {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  line-height: 1;
  padding: 0 0 0 2px;
  opacity: 0.8;
}
.gg-acct__chip button:hover { opacity: 1; }
.gg-acct__squadform { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.gg-acct__squadform .gg-acct__notice { flex-basis: 100%; margin: 0; font-size: 12px; }
.gg-acct__squad .gg-acct__hint { margin: 0 0 4px; }
.gg-acct__badges { display: inline-flex; gap: 6px; flex: none; }
.gg-acct__badge--squad { border-color: var(--gg-fire); color: var(--gg-fire); }
.gg-acct__squadform input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--gg-border);
  background: #0b0d14;
  color: #fff;
  font-family: var(--gg-font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.gg-acct__squadform .gg-acct__btn { width: auto; padding: 8px 14px; font-size: 12px; white-space: nowrap; }
.gg-acct__squad .gg-acct__notice { margin: 8px 0 0; font-size: 12px; }
.gg-acct__invites { margin-bottom: 20px; }
.gg-acct__squadattach {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--gg-border);
  background: #0b0d14;
  color: #fff;
  font-family: var(--gg-font-body);
  font-size: 13px;
}
.gg-acct__squadcard {
  display: flex;
  flex-direction: column;
  background: #11131a;
  border: 1px solid var(--gg-fire-soft);
  border-radius: 14px;
  overflow: hidden;
}
.gg-acct__squadcard.is-joined { border-color: var(--gg-border); }
.gg-acct__squadcard .gg-acct__bbody { gap: 4px; }
.gg-acct__squadfoot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
}
.gg-acct__squadfoot .gg-acct__btn--inline { width: auto; }
/* The tab (owner, 2026-09-25): a head with the title and "Create a squad",
   the cards three across on a desktop, members as rows. */
/* Account-page selects draw their own arrow, clear of the edge (owner,
   2026-09-25: the browser's sat on the border). Here, not in the small
   stylesheet, which the sign-in popup carries to every page. */
.gg-acct__field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
}
/* My Gridzone's Save: sized to its label on a wide screen (owner,
   2026-09-25), full width on a phone where it is the easier tap. */
.gg-acct__form > .gg-acct__btn--save { justify-self: start; width: auto; min-width: 220px; }
@media (max-width: 520px) { .gg-acct__form > .gg-acct__btn--save { justify-self: stretch; width: 100%; } }
/* My Gridzone: the address autocomplete's list, under the Street box. */
.gg-acct__addrfield { position: relative; }
.gg-acct__addrlist {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: 100%;
  margin: 4px 0 0;
  padding: 6px;
  list-style: none;
  background: #11131a;
  border: 1px solid var(--gg-fire);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}
.gg-acct__addrlist[hidden] { display: none; }
.gg-acct__addrlist li { padding: 9px 12px; border-radius: 8px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.gg-acct__addrlist li strong { color: #fff; font-family: var(--gg-font-body); font-size: 15px; font-weight: 600; }
.gg-acct__addrlist li span { color: var(--gg-dim); font-family: var(--gg-font-body); font-size: 13px; }
.gg-acct__addrlist li:hover, .gg-acct__addrlist li.is-active { background: var(--gg-fire-bg, rgba(255, 122, 24, 0.12)); }
/* My Gridzone: the live GridGamer Tag check and its suggestions. */
.gg-acct__tagcheck { display: block; margin-top: 6px; font-family: var(--gg-font-body); font-size: 13px; color: var(--gg-dim); }
.gg-acct__tagcheck[hidden], .gg-acct__tagsuggest[hidden] { display: none; }
.gg-acct__tagcheck.is-ok { color: #4ade80; }
.gg-acct__tagcheck.is-ok::before { content: "\2713  "; }
.gg-acct__tagcheck.is-taken, .gg-acct__tagcheck.is-invalid, .gg-acct__tagcheck.is-profane { color: #ff8a8a; }
.gg-acct__tagsuggest { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.gg-acct__tagpick {
  padding: 6px 12px;
  border: 1px solid var(--gg-fire);
  border-radius: 999px;
  background: var(--gg-fire-bg, rgba(255, 122, 24, 0.1));
  color: var(--gg-fire);
  font-family: var(--gg-font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.gg-acct__tagpick:hover { background: var(--gg-fire); color: #1a0d00; }
.gg-acct__squadsection { margin-bottom: 36px; }
.gg-acct__squadhint { margin: 0; color: var(--gg-fire); font-family: var(--gg-font-body); font-size: 13px; font-weight: 600; }
.gg-acct__squadsechead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.gg-acct__squadsechead .gg-acct__cardtitle { margin: 0; }
.gg-acct__squadsechead .gg-acct__btn--inline { width: auto; }
.gg-acct__squadnotag { margin: 0 0 20px; color: var(--gg-dim); font-family: var(--gg-font-body); font-size: 14px; }
.gg-acct__squadnotag a { color: var(--gg-fire); }
.gg-acct__squadcard .gg-acct__bbody { gap: 14px; }
.gg-acct__members { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.gg-acct__member {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--gg-border);
  border-radius: 10px;
  background: #0b0d14;
}
.gg-acct__mavatar {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--gg-fire-bg);
  border: 1px solid var(--gg-fire);
  color: var(--gg-fire);
  font-family: var(--gg-font-ui);
  font-size: 13px;
  font-weight: 700;
}
.gg-acct__mname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-family: var(--gg-font-ui); font-size: 14px; font-weight: 700; letter-spacing: 0.03em; }
.gg-acct__mstate { flex: none; color: var(--gg-dim); font-family: var(--gg-font-body); font-size: 12px; }
.gg-acct__member.is-you .gg-acct__mstate,
.gg-acct__member.is-you-leader .gg-acct__mstate,
.gg-acct__member.is-leader .gg-acct__mstate { color: var(--gg-fire); }
.gg-acct__member.is-suggested { border-style: dotted; }
.gg-acct__member.is-suggested .gg-acct__mavatar { background: transparent; border-style: dotted; }
.gg-acct__mctl {
  flex: none; margin-left: 6px; padding: 4px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--gg-fire); background: var(--gg-fire); color: #0e0a1c;
  font-family: var(--gg-font-body); font-size: 12px; font-weight: 700;
}
.gg-acct__mctl--ghost { background: transparent; color: var(--gg-text, #fff); border-color: var(--gg-border); }
.gg-acct__mctl:hover { filter: brightness(1.1); }
.gg-acct__member.is-invited { border-style: dashed; }
.gg-acct__member.is-invited .gg-acct__mavatar { background: transparent; border-style: dashed; }
.gg-acct__member.is-declined { opacity: 0.55; }
.gg-acct__member.is-declined .gg-acct__mname { text-decoration: line-through; }
.gg-acct__mremove {
  flex: none;
  width: 26px;
  height: 26px;
  border: 1px solid var(--gg-border);
  border-radius: 50%;
  background: transparent;
  color: var(--gg-dim);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.gg-acct__mremove:hover { color: #fff; border-color: #fff; }
.gg-acct__squadcard .gg-acct__squadform { margin-top: 0; flex-wrap: nowrap; }
.gg-acct__squadcard .gg-acct__squadform .gg-acct__notice { flex-basis: auto; }
.gg-acct__squadcard .gg-acct__squadfoot { margin-top: auto; padding-top: 4px; }
.gg-acct__squaddanger { color: var(--gg-dim); font-size: 13px; margin-left: auto; }
.gg-acct__squaddanger:hover { color: #ff6b6b; }
.gg-acct-modal--squad .gg-acct-modal__panel.gg-acct__card { width: min(520px, 100%); }
.gg-acct-modal--squad [data-squad-addtag] { margin: 0 0 16px; text-align: left; }
/* The invite row: the box takes the room, the button its own width. */
.gg-acct .gg-acct__squadcard .gg-acct__squadform { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.gg-acct .gg-acct__squadcard .gg-acct__squadform input { width: 100%; min-width: 0; }
.gg-acct .gg-acct__squadcard .gg-acct__squadform .gg-acct__btn { width: auto; min-width: 0; padding: 8px 18px; } /* not the 220px app-button minimum */
.gg-acct .gg-acct__squadcard .gg-acct__squadform .gg-acct__notice { grid-column: 1 / -1; }
.gg-acct__squadsechead .gg-acct__cardtitle { white-space: nowrap; }
.gg-acct .gg-acct__squadsechead .gg-acct__btn--inline { flex: none; width: auto; white-space: nowrap; }
/* The popup's fields keep their gaps. */
.gg-acct-modal--squad .gg-acct-modal__title { margin-bottom: 20px; }
.gg-acct-modal--squad .gg-acct__squadtags .gg-acct__field { margin-bottom: 14px; }
.gg-acct__invite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 12px 16px;
  margin-bottom: 10px;
  border-radius: 12px;
  border: 1px solid var(--gg-fire-soft);
  background: var(--gg-fire-bg);
  color: #ffd2ab;
  font-family: var(--gg-font-body);
  font-size: 14px;
  line-height: 1.5;
}
.gg-acct__invite p { flex: 1 1 260px; margin: 0; }
.gg-acct__invite .gg-acct__btn { width: auto; padding: 8px 16px; font-size: 12px; }
.gg-acct__invite .gg-acct__notice { flex-basis: 100%; margin: 0; }

/* ---------- banners ---------- */
.gg-acct__banner {
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 18px;
  font-family: var(--gg-font-body);
  font-size: 14px;
  line-height: 1.6;
}
.gg-acct__banner.is-ok {
  background: rgba(45, 200, 120, 0.12);
  border: 1px solid rgba(45, 200, 120, 0.4);
  color: #9af0c2;
}
.gg-acct__banner.is-warn {
  background: var(--gg-fire-bg);
  border: 1px solid var(--gg-fire-soft);
  color: #ffd2ab;
}

/* ---------- bookings ---------- */
.gg-acct__empty {
  text-align: center;
  color: var(--gg-dim);
  font-family: var(--gg-font-body);
  padding: 40px 16px;
}
.gg-acct__empty p { margin: 0 0 14px; }

/* Two cards a row — wide enough that a room name never wraps — and one
   on a phone. */
.gg-acct__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 640px) {
  .gg-acct__grid { grid-template-columns: 1fr; }
}

/* Every card is the same shape: a header of fixed height (a room name that
   wraps to two lines no longer pushes its card's rows below its neighbours'),
   the same five rows, codes pinned to the foot of the body, and the button
   at the foot of the card — so a row of cards lines up whatever their
   contents. */
.gg-acct__booking {
  display: flex;
  flex-direction: column;
  background: #11131a;
  border: 1px solid var(--gg-border);
  border-radius: 14px;
  overflow: hidden;
}
.gg-acct__booking.is-upcoming { border-color: var(--gg-fire-soft); }
.gg-acct__booking.is-cancelled { opacity: 0.6; }

.gg-acct__bhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 72px;
  box-sizing: border-box;
  padding: 14px 18px;
  border-bottom: 1px solid var(--gg-border);
  background: linear-gradient(180deg, rgba(255, 122, 24, 0.06), transparent);
}
.gg-acct__bhead h3 {
  margin: 0;
  min-width: 0;
  font-family: var(--gg-font-ui);
  font-size: 15px;
  line-height: 1.25;
  font-weight: 700;
  color: #fff;
}
.gg-acct__badge {
  flex: none;
  white-space: nowrap;
  font-family: var(--gg-font-body);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--gg-border);
  color: var(--gg-dim);
}
.gg-acct__booking.is-upcoming .gg-acct__badge {
  border-color: var(--gg-fire);
  color: var(--gg-fire);
}

.gg-acct__bbody {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 14px 18px 18px;
}
.gg-acct__brow {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  font-family: var(--gg-font-body);
  font-size: 14px;
}
.gg-acct__brow span { color: var(--gg-dim); }
.gg-acct__brow strong { color: #fff; font-weight: 600; text-align: right; }

/* A card's actions sit side by side, each sized to its label, with a gap
   (owner, 2026-09-24: full-width "Play again" over full-width "See scores"
   read as one orange block). A phone stacks them full width again. */
.gg-acct__bactions { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 18px 18px; }
.gg-acct__bactions .gg-acct__btn--inline { width: auto; }
/* The quieter of a pair — an outline in the fire colour, so the primary
   action is the one that is filled. (The class was used before it was styled.) */
.gg-acct a.gg-acct__btn--ghost,
.gg-acct button.gg-acct__btn--ghost {
  background: transparent;
  color: var(--gg-fire);
  box-shadow: inset 0 0 0 2px var(--gg-fire);
}
.gg-acct a.gg-acct__btn--ghost:hover,
.gg-acct button.gg-acct__btn--ghost:hover { background: rgba(255, 122, 0, 0.12); color: var(--gg-fire); }
@media (max-width: 520px) {
  .gg-acct__bactions .gg-acct__btn--inline { width: 100%; }
}

/* Door + game codes on an upcoming card */
.gg-acct__codes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: auto; /* the foot of the body, level across the row */
  padding-top: 12px;
  border-top: 1px solid var(--gg-border);
}
.gg-acct__brow + .gg-acct__codes { margin-top: auto; padding-top: 12px; }
.gg-acct__brow:last-child { padding-bottom: 0; }
.gg-acct__code {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--gg-fire-bg);
  border: 1px solid var(--gg-fire-soft);
}
.gg-acct__code span {
  font-family: var(--gg-font-body);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gg-fire);
}
.gg-acct__code strong {
  font-family: var(--gg-font-ui);
  font-size: 18px;
  letter-spacing: 0.12em;
  color: #fff;
}

/* ---------- claim a booking ---------- */
.gg-acct__claim {
  margin-top: 22px;
  background: #11131a;
  border: 1px solid var(--gg-border);
  border-radius: 14px;
  padding: 6px 18px;
}
.gg-acct__claim summary {
  cursor: pointer;
  padding: 12px 0;
  font-family: var(--gg-font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--gg-fire);
  list-style: none;
}
.gg-acct__claim summary::-webkit-details-marker { display: none; }
.gg-acct__claim summary::before { content: "+ "; }
.gg-acct__claim[open] summary::before { content: "– "; }
.gg-acct__claim .gg-acct__form { padding: 6px 0 18px; }
.gg-acct__claim .gg-acct__hint { margin: 0 0 12px; }

/* =========================================================
   App shell (signed-in pages) — side-nav layout
   ========================================================= */
/* The signed-in pages run to the window's edge less a gutter — the theme's
   container caps at 1180px and the forms were sitting narrow inside it. The
   auth pages keep their narrow centred card. */
.gg-acct--app {
  max-width: none;
  width: calc(100% - 2 * clamp(16px, 3vw, 40px));
}
.gg-acct--app .gg-acct__card {
  width: 100%;
  max-width: none;
}
/* The signed-in pages are wide, so a full-width submit there is a banner:
   size it to its label. The narrow auth pages keep the full-width button,
   and a phone gets it back, where a narrow button is the harder tap. */
.gg-acct--app .gg-acct__btn:not(.gg-acct__btn--inline) {
  width: auto;
  min-width: 220px;
  padding: 12px 28px;
}
@media (max-width: 520px) {
  .gg-acct--app .gg-acct__btn:not(.gg-acct__btn--inline) { width: 100%; }
}

.gg-acct__layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  align-items: start;
}

.gg-acct__nav {
  background: #11131a;
  border: 1px solid var(--gg-border);
  border-radius: 16px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: 88px;
}
.gg-acct__nav a,
.gg-acct__navitem {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 10px;
  color: var(--gg-dim);
  font-family: var(--gg-font-body);
  font-size: 14px;
  text-decoration: none;
}
.gg-acct__nav a:hover { background: rgba(255, 255, 255, 0.04); color: #fff; text-decoration: none; }
.gg-acct__nav a.is-active { background: var(--gg-fire-bg); color: var(--gg-fire); }
.gg-acct__navicon { width: 18px; height: 18px; flex: none; }
.gg-acct__navitem--signout {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--gg-border);
  border-radius: 0;
}
.gg-acct__nav a.gg-acct__navitem--signout:hover { color: #ff9a8a; }
.gg-acct__navlist { display: flex; flex-direction: column; gap: 2px; }

/* A GridSquad waiting for its teammates to accept (AP_SQUAD_MIN_MEMBERS). */
.gg-acct__badge.is-pending { border-style: dashed; color: var(--gg-dim); }
[data-squad-addtag] { display: block; margin: 0 0 16px; }

/* My Gridzone's email: locked, with its Change button inside the field
   (owner, 2026-09-25). The popup does the change. */
.gg-acct__inputwrap { position: relative; display: block; }
.gg-acct__inputwrap input.is-locked { padding-right: 110px; opacity: 0.6; cursor: not-allowed; }
/* --inline keeps it out of the app shell's full-width button rules. */
.gg-acct__inputwrap .gg-acct__btn.gg-acct__inputbtn {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: auto;
  min-width: 0;
  padding: 7px 16px;
  font-size: 13px;
}
.gg-acct__emailchg-lede { margin: 0 0 14px; overflow-wrap: anywhere; }
.gg-acct__emailchg-resend { display: block; margin: 14px auto 0; }
.gg-acct__emailchg-resend:disabled { opacity: 0.55; cursor: default; }
.gg-acct__navtoggle { display: none; }

.gg-acct__main { min-width: 0; }
.gg-acct__main .gg-acct__card { margin-left: 0; }

.gg-acct__mainhead { margin-bottom: 20px; text-align: center; }
.gg-acct__mainhead h1 {
  margin: 0 0 4px;
  font-family: var(--gg-font-ui);
  font-weight: 800;
  letter-spacing: 0.04em;
  font-size: clamp(22px, 3vw, 30px);
  color: #fff;
}
.gg-acct__mainhead p { margin: 0; color: var(--gg-dim); font-family: var(--gg-font-body); font-size: 14px; }

.gg-acct__section { margin-bottom: 24px; }
.gg-acct__sectiontitle {
  margin: 0 0 14px;
  font-family: var(--gg-font-ui);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gg-dim);
}

/* Past bookings — collapsible */
.gg-acct__past {
  background: #11131a;
  border: 1px solid var(--gg-border);
  border-radius: 14px;
  padding: 4px 18px 0;
}
.gg-acct__past summary {
  cursor: pointer;
  padding: 14px 0;
  font-family: var(--gg-font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--gg-dim);
  list-style: none;
}
.gg-acct__past summary::-webkit-details-marker { display: none; }
.gg-acct__past summary::before { content: "▸ "; color: var(--gg-fire); }
.gg-acct__past[open] summary::before { content: "▾ "; }
.gg-acct__past[open] summary { color: #fff; }
.gg-acct__past .gg-acct__grid { padding: 4px 0 18px; }
/* Small cards (Wallet vouchers, GridSquad squads): three across on a desktop (owner, 2026-09-25), two on a tablet, one on a phone. */
@media (min-width: 1400px) { .gg-acct__grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Booking cards (My Bookings, upcoming and past): three across on a wide desktop (owner, 2026-10-03), two below
   that, one on a phone. A later breakpoint than the small cards': a booking card carries its door and game codes
   side by side, and under ~360px a card would squeeze them. */
@media (min-width: 1500px) { .gg-acct__grid--bookings { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- GridGamer Tag ---------- */
.gg-acct__tag {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--gg-fire);
  background: var(--gg-fire-bg);
  color: var(--gg-fire);
  font-family: var(--gg-font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.gg-acct__field--tag input {
  font-family: var(--gg-font-ui);
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ---------- My Leaderboard ---------- */
.gg-acct__card--table { padding: 6px 18px 10px; }
.gg-acct__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--gg-font-body);
  font-size: 14px;
}
.gg-acct__table th,
.gg-acct__table td {
  padding: 10px 8px;
  text-align: left;
  border-bottom: 1px solid var(--gg-border);
  vertical-align: middle;
}
.gg-acct__table th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gg-dim);
}
.gg-acct__table td { color: #fff; }
.gg-acct__table tbody tr:last-child td { border-bottom: 0; }
.gg-acct__muted { color: var(--gg-dim); font-size: 12px; }

/* A folding table (ap_account_lb_row): on a desktop every column shows,
   the chevron cell and the details row do not exist. On a phone (below)
   the fold columns hide, the chevron appears, and a tap opens the details
   row under its row. `.gg-acct__lbmore:not([hidden])` is deliberate — a
   class that sets display would beat the hidden attribute. */
.gg-acct__lbcell--toggle { display: none; width: 1%; padding-left: 0; padding-right: 0; }
.gg-acct__lbmore { display: none; }
/* The last VISIBLE row: its details row is the table's last child. */
.gg-acct__table--fold tbody tr.gg-acct__lbrow:nth-last-child(2) td { border-bottom: 0; }
.gg-acct__lbtoggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--gg-border);
  border-radius: 50%;
  background: transparent;
  color: var(--gg-dim);
  cursor: pointer;
}
.gg-acct__lbtoggle svg { width: 16px; height: 16px; transition: transform 0.18s ease; }
.gg-acct__lbtoggle:focus-visible { outline: 2px solid var(--gg-fire); outline-offset: 2px; }
.gg-acct__lbdl { margin: 0; }
.gg-acct__lbdl div { display: flex; gap: 12px; padding: 4px 0; }
.gg-acct__lbdl dt {
  flex: 0 0 76px;
  color: var(--gg-dim);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 20px;
}
.gg-acct__lbdl dd { margin: 0; color: #fff; font-size: 14px; line-height: 20px; }
.gg-acct__vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.gg-acct__pos {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--gg-border);
  color: #fff;
  font-family: var(--gg-font-ui);
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}
.gg-acct__pos small { font-family: var(--gg-font-body); font-weight: 400; font-size: 11px; color: var(--gg-dim); }
.gg-acct__pos--1 { background: #ffd24a; border-color: #ffd24a; color: #3a2700; }
.gg-acct__pos--2 { background: #c9d2e0; border-color: #c9d2e0; color: #23262e; }
.gg-acct__pos--3 { background: #e08a3c; border-color: #e08a3c; color: #2a1600; }
.gg-acct__pos--1 small, .gg-acct__pos--2 small, .gg-acct__pos--3 small { color: inherit; opacity: 0.75; }
.gg-acct__pos--none { color: var(--gg-dim); }

.gg-acct__roomtitle {
  margin: 12px 0 2px;
  font-family: var(--gg-font-ui);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
}
.gg-acct__card--table + .gg-acct__card--table { margin-top: 12px; }

/* A session is a folded <details>: the summary is the team name and the
   room (what the list is scanned by), the games open on a tap. The
   browser's own marker is dropped for the chevron. */
.gg-acct__session {
  background: #11131a;
  border: 1px solid var(--gg-border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 12px;
}
.gg-acct__session-sum {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(255, 122, 24, 0.06), transparent);
}
.gg-acct__session-sum::-webkit-details-marker { display: none; }
.gg-acct__session-sum::marker { content: ""; }
.gg-acct__session-sum:focus-visible { outline: 2px solid var(--gg-fire); outline-offset: -2px; }
.gg-acct__session-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.gg-acct__session-main strong {
  font-family: var(--gg-font-ui);
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  overflow-wrap: anywhere;
}
.gg-acct__session-sub {
  font-family: var(--gg-font-body);
  font-size: 13px;
  color: var(--gg-dim);
}
.gg-acct__session-side {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.gg-acct__session-chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--gg-border);
  border-radius: 50%;
  color: var(--gg-dim);
}
.gg-acct__session-chev svg { width: 16px; height: 16px; transition: transform 0.18s ease; }
.gg-acct__session[open] .gg-acct__session-chev svg { transform: rotate(180deg); }
.gg-acct__session[open] .gg-acct__session-sum { border-bottom: 1px solid var(--gg-border); }
.gg-acct__session-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding: 12px 18px 4px;
  font-family: var(--gg-font-body);
  font-size: 13px;
  color: var(--gg-dim);
}
.gg-acct__session-meta strong { color: #fff; font-weight: 600; }
.gg-acct__session .gg-acct__table { width: calc(100% - 36px); margin: 4px 18px 6px; }
.gg-acct__session-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 18px 18px;
}
.gg-acct__session-actions .gg-acct__btn--inline { width: auto; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .gg-acct__layout { grid-template-columns: 1fr; }
  /* Phone: a hamburger button naming the current page; the list drops
     down under it, each icon with its label (owner, 2026-09-25). */
  .gg-acct__nav { position: static; padding: 6px; }
  .gg-acct__navtoggle {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    background: none;
    border: 0;
    border-radius: 10px;
    color: #fff;
    font-family: var(--gg-font-body);
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
  }
  .gg-acct__navburger { display: inline-flex; flex-direction: column; justify-content: space-between; width: 20px; height: 14px; flex: none; }
  .gg-acct__navburger i { display: block; height: 2px; border-radius: 2px; background: currentColor; }
  .gg-acct__navcurrent { flex: 1; }
  .gg-acct__navcaret { flex: none; transition: transform 0.15s ease; color: var(--gg-dim); }
  .gg-acct__nav.is-open .gg-acct__navcaret { transform: rotate(180deg); }
  .gg-acct__nav.has-toggle:not(.is-open) .gg-acct__navlist { display: none; }
  .gg-acct__nav.is-open .gg-acct__navlist { padding-top: 4px; margin-top: 4px; border-top: 1px solid var(--gg-border); }
  .gg-acct__navitem--signout { margin-top: 4px; }
}
/* Leaderboard tables fold on a phone: game and position stay, the rest
   opens under the row on a tap (ap_account_lb_row, initLeaderboard). */
@media (max-width: 640px) {
  .gg-acct__table--fold .gg-acct__lbcell--fold { display: none; }
  .gg-acct__table--fold .gg-acct__lbcell--toggle { display: table-cell; }
  .gg-acct__table--fold .gg-acct__lbrow { cursor: pointer; }
  .gg-acct__table--fold .gg-acct__lbrow.is-open td { border-bottom: 0; }
  .gg-acct__table--fold .gg-acct__lbrow.is-open .gg-acct__lbtoggle { color: #fff; border-color: #fff; }
  .gg-acct__table--fold .gg-acct__lbrow.is-open .gg-acct__lbtoggle svg { transform: rotate(180deg); }
  .gg-acct__table--fold .gg-acct__lbmore:not([hidden]) { display: table-row; }
  .gg-acct__table--fold .gg-acct__lbmore td { padding-top: 0; padding-bottom: 12px; }
}
@media (max-width: 520px) {
  .gg-acct__card { padding: 22px; }
  .gg-acct__tag { display: block; margin: 8px 0 0; width: max-content; }
}

/* The SMS consent wording carries links (Notifications → Text messages). */
.gg-acct__switch-text small a { color: var(--gg-fire); }

/* Rewards (account-rewards.php): the Welcome Reward card. */
.gg-acct__reward { display: flex; flex-direction: column; gap: 6px; }
.gg-acct__reward .gg-acct__cardtitle { margin: 0 0 2px; }
.gg-acct__rewardbig { margin: 0; font-family: var(--gg-font-ui); font-size: 40px; line-height: 1; font-weight: 700; color: var(--gg-fire); letter-spacing: 0.02em; }
.gg-acct__rewardmeta { margin: 0; color: var(--gg-dim); }
.gg-acct__rewardfoot { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.gg-acct__reward .gg-acct__btn--inline { margin: 0; }
.gg-acct__badge--available { border-color: var(--gg-fire); color: var(--gg-fire); }
.gg-acct__reward.is-expired, .gg-acct__reward.is-redeemed { opacity: 0.75; }

/* My Gridzone: the verified mobile is read-only (owner, 2026-09-26; staff change it). */
.gg-acct__field input.is-locked { opacity: 0.6; cursor: not-allowed; }
/* The "Verified" tag inside the locked mobile field (owner, 2026-09-26). */
.gg-acct__inputwrap input.is-locked[name="phone"] { padding-right: 96px; }
.gg-acct__verified {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  padding: 3px 10px; border-radius: 999px; border: 1px solid #3ecf8e; color: #3ecf8e;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; pointer-events: none;
}

/* ---------- refer a friend (owner, 2026-09-27) ---------- */
.gg-acct__refer { display: flex; flex-direction: column; gap: 12px; }
.gg-acct__refer .gg-acct__cardtitle { margin: 0; }
.gg-acct__refer .gg-acct__lede { margin: 0; }
.gg-acct__refer .gg-acct__code { justify-items: start; }
.gg-acct__refer .gg-acct__code strong { font-size: 24px; letter-spacing: 0.18em; }
.gg-acct__refer .gg-acct__field { margin: 0; }
.gg-acct__refer .gg-acct__field input { font-family: var(--gg-font-body); }
.gg-acct__referactions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.gg-acct__referactions .gg-acct__btn { margin: 0; }
.gg-acct__refersaid { margin: 0; color: var(--gg-fire); font-family: var(--gg-font-body); font-size: 13px; }
.gg-acct__refertotal { margin: 0 0 10px; color: var(--gg-dim); font-family: var(--gg-font-body); }
.gg-acct__badge--refused { border-color: var(--gg-border); color: var(--gg-dim); }
.gg-acct__badge--reversed { border-color: var(--gg-border); color: var(--gg-dim); text-decoration: line-through; }
.gg-acct__refersaid:empty { display: none; }