/* Customer accounts: sign-in and registration cards, My bookings, and account details. */

/* ---------- Sign in, register, password and email pages ---------- */

.auth {
  display: grid;
  justify-items: center;
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) var(--section);
}

.auth__card {
  width: 100%;
  max-width: 28rem;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-top: 3px solid var(--eucalypt);
  border-radius: var(--radius);
  background: var(--paper);
}

.auth__card--wide {
  max-width: 36rem;
}

.auth__title {
  font-size: var(--text-2xl);
}

.auth__lede {
  margin-top: var(--space-3);
  color: var(--slate);
}

.auth .notice {
  margin-top: var(--space-5);
}

.auth__form {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.auth__form > .notice:empty,
.auth__form .validation-summary-valid {
  display: none;
}

.auth__form > .notice {
  margin-top: 0;
}

.auth .auth__error {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--error);
  font-size: var(--text-sm);
}

.auth__error ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.auth__forgot {
  justify-self: end;
  margin-top: calc(var(--space-2) * -1);
  font-size: var(--text-sm);
}

.auth__label-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
}

.auth__small {
  font-size: var(--text-xs);
}

.auth__submit {
  justify-self: stretch;
  margin-top: var(--space-2);
}

a.auth__submit {
  display: flex;
  justify-content: center;
  margin-top: var(--space-5);
}

.auth__switch {
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--slate);
}

.auth__switch + .auth__switch {
  margin-top: var(--space-2);
}

/* ---------- Account pages ---------- */

.account {
  padding-block: clamp(2rem, 1.25rem + 3vw, 4rem) var(--section);
}

.account__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-4);
}

.account__eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
}

.account__title {
  margin-top: var(--space-1);
  font-size: var(--text-2xl);
}

.account__title:focus {
  outline: none;
}

.account__signout-button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}

.account-nav {
  margin-top: var(--space-5);
  border-bottom: 1px solid var(--rule);
}

.account-nav ul {
  display: flex;
  gap: var(--space-5);
}

.account-nav a {
  display: inline-block;
  padding-block: var(--space-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-weight: 600;
  text-decoration: none;
  color: var(--slate);
}

.account-nav a:hover {
  color: var(--ink);
}

.account-nav a[aria-current="page"] {
  border-bottom-color: var(--eucalypt);
  color: var(--ink);
}

.account > .notice {
  margin-top: var(--space-6);
}

.account-section {
  margin-top: var(--space-7);
}

.account-section__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}

.account-section__title {
  font-size: var(--text-xl);
}

/* Verify email */

.verify-panel {
  margin-top: var(--space-6);
  padding: var(--space-5) var(--space-5) var(--space-5) calc(var(--space-5) - 3px);
  border-left: 3px solid var(--eucalypt);
  border-radius: var(--radius);
  background: var(--sage-soft);
  max-width: 46rem;
}

.verify-panel__title {
  font-size: var(--text-lg);
}

.verify-panel p {
  margin-top: var(--space-3);
}

.verify-panel__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-5);
}

/* Upcoming bookings */

.booking-cards {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.booking-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
}

.booking-card__date {
  display: grid;
  justify-items: center;
  min-width: 3.75rem;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  background: var(--sage-soft);
  line-height: 1.1;
}

.booking-card__weekday,
.booking-card__month {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--slate);
}

.booking-card__day {
  font-family: var(--font-serif);
  font-size: 1.625rem;
  font-variant-numeric: tabular-nums;
}

.booking-card__title {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: 0;
}

.booking-card__title a {
  text-decoration: none;
}

.booking-card__title a:hover {
  text-decoration: underline;
}

.booking-card__when {
  margin-top: var(--space-1);
}

.booking-card__body > .status {
  margin-top: var(--space-2);
}

.booking-card__meta {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--slate);
}

.booking-card__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.booking-card__actions .button {
  min-height: 2.5rem;
  padding: 0.4rem 1rem;
}

.empty-card {
  margin-top: var(--space-5);
  padding: var(--space-5);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius);
  color: var(--slate);
}

.empty-card__title {
  font-weight: 600;
  color: var(--ink);
}

.empty-card p + p {
  margin-top: var(--space-2);
}

/* Past bookings */

.past-list {
  margin-top: var(--space-4);
  border-top: 1px solid var(--rule);
}

.past-list__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--rule);
}

.past-list__link {
  display: grid;
  gap: 0.125rem;
  min-width: 0;
  text-decoration: none;
}

.past-list__link:hover .past-list__what {
  text-decoration: underline;
}

.past-list__when {
  font-size: var(--text-sm);
  color: var(--slate);
}

.past-list__what {
  font-weight: 600;
}

/* Account details */

.account-forms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: var(--space-6);
  margin-top: var(--space-6);
  align-items: start;
}

.account-panel {
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  border-radius: var(--radius);
  background: var(--paper);
}

.account-panel__lede {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--slate);
}

.account-panel__value {
  font-weight: 600;
}

/* Booking with an account (booking flow step 4) */

.account-booker {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius);
  background: var(--sage-soft);
}

.account-booker__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate);
}

.account-booker__name {
  margin-top: var(--space-1);
  font-weight: 600;
}

.account-booker__email {
  font-size: var(--text-sm);
  color: var(--slate);
}

.booking-notes {
  margin-top: var(--space-5);
}

.booking-notes p {
  margin-top: var(--space-2);
  color: var(--slate);
  white-space: pre-line;
}

@media (max-width: 40rem) {
  .booking-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .booking-card__actions {
    grid-column: 1 / -1;
    justify-content: space-between;
  }

  .past-list__item {
    align-items: flex-start;
  }
}