/* account.css — styles only used by the account page, account.html (bookings, credits, purchases); loaded after aquarius.css */

/* Registrations (user page): status line and email form
   ========================================================================== */
.registrations__status {
  margin-top: 0;
}
.registrations__form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: var(--column); /* same width as the boxes */
  margin: 2rem auto 0;
}
/* the display: flex above would otherwise override the hidden attribute (while "Submitting…" shows) */
.registrations__form[hidden] {
  display: none;
}
/* the prompt above the form is a sentence, centred with the form (not the all-caps label style) */
.registrations__status:has(+ .registrations__form) {
  text-align: center;
  text-transform: none;
}
/* the big heading version (after a purchase): a little more room before the form */
.heading.registrations__status + .registrations__form {
  margin-top: 2.5rem;
}
/* submit: a small black button beside the email box, "Send login link →" */
.registrations__button {
  flex: none;
  align-self: stretch; /* the full height of the email box beside it */
  box-sizing: border-box;
  margin: 0;
  white-space: nowrap;
}
/* contact line under the form / registrations, always shown */
/* a thin line above the copyright at the foot of the page */
.footer__copyright {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
/* "Having issues?": the first thing in the footer */
p.registrations__help {
  margin-top: 0;
  text-align: center;
}
.registrations__input {
  display: block;
  box-sizing: border-box;
  flex: 1;
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: 0.75rem;
  border: 1px solid var(--content);
  border-radius: 2px;
  background: white;
}

/* the email address in the title: one line (the title widens to fit), smaller on phones */
.registrations__email {
  white-space: nowrap;
  font-size: min(1.6rem, 5.5vw);
}

/* "Log out" in the nav: a small solid pink button (white text, no underline), black on hover like the other buttons */
.nav__item.registrations__logout {
  padding: 0.25rem 0.75rem 0.1rem;
  border-radius: 2px;
  background: var(--pink);
  transition: background 0.15s;
}
.nav__item.registrations__logout:link,
.nav__item.registrations__logout:visited,
.nav__item.registrations__logout:hover,
.nav__item.registrations__logout span,
.nav__item.registrations__logout:hover span {
  color: white;
}
.nav__item.registrations__logout:hover {
  background: black;
}
.nav__item.registrations__logout {
  text-decoration: none;
}
/* "Account" / "Log out" in the nav and phone footer: only one shows (nav items would otherwise
   override the hidden attribute) */
.registrations__account[hidden],
.registrations__logout[hidden] {
  display: none;
}


/* purchases list: one row per purchase, divided by thin lines */
.registrations__list {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.registrations__item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  line-height: 1.5;
}
.registrations__item:last-child {
  padding-bottom: 0;
}
.registrations__name {
  font-variation-settings: "wght" 400;
}
/* a booking with a description: opens to show it (the same triangle and text as in Group Sessions) */
.registrations__details .timetable__summary {
  display: list-item; /* (keeps the triangle with the name and detail as blocks inside) */
}
.registrations__details .registrations__name,
.registrations__details .registrations__detail {
  display: block;
}
.registrations__details .registrations__detail {
  margin-top: 0.25rem;
}
.registrations__details + .registrations__meta {
  margin-left: 1rem; /* lined up with the text, past the triangle */
}
/* items after the first (e.g. postage): normal weight */
.registrations__extra {
  font-weight: normal;
  font-variation-settings: "wght" 350;
}
/* the smaller, lighter lines under a name: details, and e.g. "Purchased 15 October 2026 · £60.00" */
.registrations__detail,
.registrations__meta {
  font-size: 0.9rem;
  font-variation-settings: "wght" 350;
}
.registrations__detail strong {
  font-variation-settings: var(--bold-body);
}
/* full price, crossed out when a discount was applied */
.registrations__was {
  opacity: 0.6;
}

/* the Your purchases popup: always full height and the same width (not changing with each page of
   purchases); narrower screens: the full width, less the popups' side gap */
.modal--purchases .modal__box {
  box-sizing: border-box;
  width: calc(var(--column) + 4rem); /* the text column plus its side margins */
  max-width: 100%;
  height: calc(90vh - 2rem);
}
/* the Your purchases popup: the note under the title, then the list (scrolling inside the popup) */
/* "from the last 6 months…": in the popup's sticky header, under the title */
.modal--purchases .modal__header {
  flex-direction: column;
}
p.registrations__period {
  margin: 0.25rem 1rem 0; /* lined up with the title */
  font-size: var(--small);
  line-height: var(--small-line);
  font-variation-settings: "wght" 350;
}
/* just paid: the purchase just made in a blue panel right under the header, edge to edge (no white
   around it), with the product's thank-you message; then "All your purchases" over the usual list */
.modal__box > .registrations__success {
  max-width: none;
  margin: 0;
  padding: 0.5rem 2rem 1.5rem;
  background: var(--blue);
}
.registrations__success .registrations__list {
  margin: 0;
}
.registrations__success .registrations__item {
  border-top: none; /* the first and only item: no line above it */
}
p.registrations__success-thanks {
  margin: 1rem 0 0;
  line-height: var(--line-height);
  font-variation-settings: "wght" 350;
}
.modal__box > .registrations__all {
  margin: 2rem 2rem 0;
}
.registrations__all-title {
  margin: 0;
  text-align: left;
}
p.registrations__all-period {
  margin: 0.25rem 0 0;
  font-size: var(--small);
  line-height: var(--small-line);
  font-variation-settings: "wght" 350;
}
/* how to ask about older purchases, after the list */
.modal__box > p.registrations__older {
  margin-top: 1.5rem;
  font-size: var(--small);
  line-height: var(--small-line);
  font-variation-settings: "wght" 350;
}
.modal__box > .registrations__list {
  margin: 0 2rem; /* lined up with the popup's text */
}
/* ← page x of y → arrows: not used at the moment (the purchases list scrolls instead), kept for reuse */
.modal__box > .registrations__pages {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  align-items: center;
  margin: 1.5rem 2rem 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 0.9rem;
}
.modal__box > .registrations__pages[hidden] {
  display: none;
}
/* pink arrows, no underline, growing on hover like the close X */
.registrations__page {
  margin: 0;
  padding: 0 0.5rem;
  font-size: 1.4rem;
  line-height: 1;
  transition: transform 0.15s;
}
.registrations__page:link,
.registrations__page:visited,
.registrations__page span {
  color: var(--pink);
}
.registrations__page {
  text-decoration: none;
}
.registrations__page:hover {
  transform: scale(1.35);
}
/* no newer / older page: keep its space so the layout doesn't jump */
.registrations__page--off {
  visibility: hidden;
}
/* "See your purchases", at the foot of the left column */
.registrations__history {
  margin: 2.5rem 0 0;
  text-align: left;
}

/* just paid (not logged in): the purchase in its own section, straight under the page title (no space
   above the section), then the log in prompt and form in the next;
   the box has no heading, so no space or line above the purchase */
.registrations__confirmation {
  margin-top: 1.5rem;
  padding-top: 0;
}
@media (min-width: 768px) {
  .registrations__confirmation {
    margin-top: 2rem;
  }
}
.registrations__latest {
  margin-top: 0;
}
.registrations__latest .registrations__item:first-child {
  padding-top: 0;
  border-top: none;
}

/* the product's thank-you message, in the purchase box under a thin line */
p.registrations__thanks {
  margin: 1.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  text-align: left; /* (the page is otherwise centred) */
}

/* after asking for a login link: the message left-aligned (the page is otherwise centred) */
.registrations__sent {
  text-align: left;
}
p.registrations__retry {
  font-size: var(--small);
  line-height: var(--small-line);
}

/* the footer's mailing list when logged in: heading, line, Subscribe button, small print */
.registrations__news {
  margin: 2rem 0;
  text-align: center;
}
.registrations__news .btn {
  margin: 1.5rem auto 0;
}
p.registrations__small {
  margin-top: 0.75rem;
  font-size: var(--small);
  line-height: var(--small-line);
}

/* "Submitting…" box: just the heading, so no gap under it */
.registrations__sending .box__title {
  margin-bottom: 0;
}
/* its loading dots: under the title, on the left like it */
.registrations__sending .loader {
  margin: 1.5rem 0 0;
}

/* logged in: the bookings box, then credits and private sessions & gifts (white, not in a box) under it;
   from 960px two columns (2 : 3, the bookings wider): credits and private sessions & gifts on the left, the bookings on the right;
   from 1100px the bookings column a bit wider */
.registrations__dashboard {
  display: grid;
  grid-gap: 2.5rem;
  max-width: var(--column);
  margin: 0 auto;
}
.registrations__dashboard > [hidden] {
  display: none;
}
.registrations__dashboard > .box {
  max-width: none;
  margin: 0;
}
/* phones: the bookings box runs edge to edge (out over the page's side gutter) */
@media (max-width: 599px) {
  .registrations__dashboard > .registrations__bookings {
    margin: 0 calc(-1 * var(--gutter));
    border-radius: 0;
  }
}
@media (min-width: 960px) {
  .registrations__dashboard {
    grid-template-columns: 2fr 3fr;
    grid-template-rows: max-content 1fr;
    grid-gap: 3rem;
    align-items: start;
    max-width: calc(2 * var(--column));
  }
  .registrations__bookings {
    grid-column: 2;
    grid-row: 1 / span 2;
    height: 100%; /* the full height of the left column */
  }
  .registrations__panel {
    grid-column: 1;
    padding-right: 4rem;
  }
  .registrations__passes {
    margin-top: 5rem; /* the top of the left column */
  }
}
@media (min-width: 1100px) {
  .registrations__dashboard {
    grid-template-columns: 1fr calc(50% + 9rem); /* the left column a bit narrower than the bookings */
  }
}

/* the titles: on the left (the page is otherwise centred), with the ~ behind: white on the blue box,
   blue on the white panels */
.registrations__panel .box__title--tilde:before {
  color: var(--blue);
}
.registrations__panel {
  position: relative;
  text-align: left;
}
/* the gift purchases follow the private sessions in the same list style, with a little space between */
.registrations__gift-list {
  margin-top: 1rem;
}
/* the note that Marianne updates these, under the title (left, like the lists) */
p.registrations__updated {
  margin: -1rem 0 1.5rem;
  text-align: left;
}

/* the bookings box: a grid, so "Book group sessions" sits on the right of the title, on the same line;
   everything else runs the full width underneath */
.registrations__bookings {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 1rem;
  align-items: baseline;
  align-content: start; /* rows at the top, even when the box is stretched to the column's height */
}
.registrations__bookings > * {
  grid-column: 1 / -1;
}
.registrations__bookings > .box__title {
  grid-column: 1;
}
.registrations__book,
.registrations__book:link,
.registrations__book:visited {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
}
/* "Buy credits": a plain link under the Your credits title (tucked up like the note under the other title) */
.registrations__buy,
.registrations__buy:link,
.registrations__buy:visited {
  margin: -1rem 0 0;
}
.registrations__buy + .registrations__list {
  margin-top: 1rem;
}
/* Book group sessions: under 500px wide just "Book" (the full label is its title and aria-label) */
.registrations__button-short {
  display: none;
}
@media (max-width: 499px) {
  .registrations__button-text {
    display: none;
  }
  .registrations__button-short {
    display: inline;
  }
}

/* the login-token banner: on this page (no hero image) a narrower box, bottom left, from 600px wide;
   on phones it fills the width as on the other pages */
@media (min-width: 600px) {
  .banner {
    right: auto;
    box-sizing: border-box;
    width: 34rem;
    max-width: calc(100% - 2rem); /* within its 1rem margins */
  }
}

/* "Book group sessions" under the title: opens the Group Sessions popup (#schedule) */
.registrations__header-cta,
.registrations__header-cta:link,
.registrations__header-cta:visited {
  align-self: center; /* (the header stretches its contents) */
  width: auto;
  margin: 3.25rem auto 0;
}
/* and a small link under it: "Book private sessions" (the at 193 page's Private Sessions) */
.registrations__header-link {
  align-self: center;
  margin: 1rem auto 0;
  font-size: var(--small);
}
/* phones: white on the dark title area (bright pink on hover) */
@media (max-width: 959px) {
  .registrations__header-link:link,
  .registrations__header-link:visited {
    color: white;
    text-decoration-color: white;
  }
  .registrations__header-link:hover,
  .registrations__header-link:hover span {
    color: var(--pink-bright);
  }
}

/* "Book sessions" on the thank-you, after buying credits */
.registrations__book-now,
.registrations__book-now:link,
.registrations__book-now:visited {
  width: auto;
  margin: 1rem 0 0;
}

/* under 960px: no space between the dark title area and the page (other pages have 2rem, and 1rem at the
   top of the first section) */
@media (max-width: 959px) {
  .wrapper.wrapper--single > .wrapper__header {
    margin-bottom: 0;
  }
  .wrapper__main > .section:first-child {
    padding-top: 0;
  }
}