/* ==========================================================================
   Aliya's Beauty — the app: public pages and sign-in
   --------------------------------------------------------------------------
   On top of css/app.css. Sign-in, register and password reset; policies; the
   journal; the Lash Guide; consent forms; the academy; "page not found".
   ========================================================================== */

/* 1. SIGN-IN =============================================================== */

/* The form should be in reach without scrolling: a shorter figure than other
   tall heroes. */
.abx-app.alt.ax[data-ax-page="auth"] {
  --ax-figure-h: clamp(5rem, calc(var(--alt-vh) * 17), 11rem);
}

.ax-auth,
.ax-auth .container,
.ax-auth .wrapper {
  display: grid;
  gap: 1.25rem;
  min-width: 0;
}

/* The page's headline is in the hero; the forms' own titles are for the
   booking sheet, which loads the same forms. */
.ax-auth .container-header {
  display: none;
}

.ax-auth .container-view {
  display: block !important;
}

.ax-auth form {
  display: grid;
  gap: 1rem;
}

.ax-auth .container-message {
  display: block;
  padding: 0.85rem 1rem;
  border-radius: 0.9rem;
  background: var(--abx-danger-soft);
  color: var(--abx-danger);
  font-size: 0.92rem;
  line-height: 1.45;
}

.ax-auth .footer {
  display: grid;
  gap: 0.9rem;
  margin-top: 0.4rem;
}

.ax-auth .footer .cta {
  width: 100%;
}

.ax-auth .register-prompt,
.ax-auth .login-prompt {
  margin: 0 !important;
  font-size: 0.95rem;
  text-align: center;
  color: var(--abx-text-muted);
}

/* script.js swaps the log-in and register forms with these classes. */
.ax-auth .container.swipeOut {
  opacity: 0;
  transform: translateX(-1rem);
  transition: opacity 0.3s var(--abx-ease), transform 0.4s var(--abx-ease);
}

.ax-auth .container.swipeIn {
  animation: ax-rise 0.6s var(--ax-ease) both;
}

.ax-auth .marketing-consent .checkbox-wrapper {
  padding: 0.25rem 0;
  border-top: 0;
}

/* 2. POLICIES ============================================================== */

.ax-policy {
  margin-inline: auto;
}

.ax-policy h2 {
  padding-top: 1.25rem;
  border-top: 1px solid var(--abx-border);
}

.ax-policy h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.ax-policy table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.ax-policy th,
.ax-policy td {
  padding: 0.6rem 0.75rem 0.6rem 0;
  border-bottom: 1px solid var(--abx-border);
  text-align: left;
  vertical-align: top;
}

/* The cookie list: a card per cookie on a phone (css/app.css turns the table
   into cards), a table from a tablet up. */
@media (min-width: 46rem) {
  .ax .ax-policy__table {
    padding: 0.35rem 1.1rem;
    border: 1px solid var(--abx-border);
  }

  .ax-policy__table th,
  .ax-policy__table td:nth-child(3),
  .ax-policy__table td:nth-child(4) {
    white-space: nowrap;
  }

  /* The purpose is the sentence: it takes the room that is left, and its
     words stay whole. */
  .ax .ax-policy__table td {
    overflow-wrap: normal;
  }

  .ax-policy__table td:first-child {
    min-width: 9.5rem;
  }

  .ax-policy__table td:nth-child(2) {
    width: 100%;
  }

  .ax-policy__table td:last-child,
  .ax-policy__table th:last-child {
    padding-right: 0;
  }

  .ax-policy__table tbody tr:last-child td {
    border-bottom: 0;
  }
}

/* 3. JOURNAL =============================================================== */

.ax-journal {
  display: grid;
}

.ax-journal__item {
  display: grid;
  gap: 0.6rem;
  padding: 1.6rem 0;
  border-top: 1px solid var(--abx-border);
}

.ax-journal__item:first-child {
  padding-top: 0;
  border-top: 0;
}

.ax-journal__cta {
  gap: 0.6rem;
  justify-items: start;
  padding: 1.5rem 1.25rem;
}

.ax-journal__cta .cta {
  margin-top: 0.5rem;
}

/* 4. CONSENT FORMS ========================================================= */

/* The forms themselves are styled in css/kit.css (the booking sheet shows the
   same ones); here they sit on the page rather than in a sheet. */
.ax .consent-ui--page .consent-form__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.ax .consent-ui--page .consent-form__title {
  padding-right: 0;
}

.ax .consent-ui--page .consent-form__print {
  flex: none;
  min-height: 2.5rem;
  padding: 0 1.1rem;
  font-size: 0.85rem;
}

.ax .consent-ui--page .consent-form__footer {
  bottom: calc(var(--ax-tabs-h) + var(--ax-safe-b));
  margin: 0 calc(var(--ax-gutter) * -1);
  padding: 0.9rem var(--ax-gutter);
  background: rgba(244, 241, 235, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.ax .consent-ui--page .consent-form__footer--links {
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}

@media print {
  .ax .alt-skip,
  .ax .alt-bar,
  .ax .ax-hero,
  .ax .ax-tabs,
  .ax .ax-foot,
  .ax .ax-footer,
  .ax .ax-toolbar,
  .ax .ax-stage,
  .ax .alt-cookie,
  .ax .consent-form__footer,
  .ax .consent-form__print {
    display: none !important;
  }

  .ax .ax-sheet {
    margin: 0;
    box-shadow: none;
    animation: none;
  }
}

/* 5. THE LASH GUIDE ======================================================== */

.ax-guide__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.8rem;
}

.ax-guide__price b {
  font-family: var(--alt-serif);
  font-size: clamp(2.2rem, 10vw, 3rem);
  font-weight: 400;
  line-height: 1;
}

.ax-guide__price s {
  font-size: 1.05rem;
  color: var(--abx-text-subtle);
}

.ax-guide__price span {
  flex: 1 0 100%;
  font-size: 0.86rem;
  color: var(--abx-text-muted);
}

.ax-guide__about {
  font-size: 1.05rem;
  color: var(--abx-text);
}

.ax .ebook-product-rating {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--abx-font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--abx-text-muted);
}

.ax .ebook-product-rating .stars {
  display: flex;
  gap: 0.15rem;
}

.ax .ebook-product-rating .star {
  width: 1rem;
  height: 1rem;
  background: var(--abx-ink-900);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.ax-guide__buy {
  gap: 1.25rem;
  padding: 1.35rem 1.15rem;
}

.ax-guide__buy form {
  display: grid;
  gap: 1rem;
}

.ax-guide__buy .checkbox-wrapper {
  padding: 0.25rem 0;
  border-top: 0;
}

.ax .ebook-buy-btn .btn-icon {
  display: none;
}

.ax .ebook-buy-btn.loading,
.ax .ebook-buy-btn:disabled {
  opacity: 0.6;
}

.ax .ebook-guarantees {
  gap: 0.5rem;
  font-size: 0.92rem;
  color: var(--abx-text-muted);
}

.ax .ebook-payment-widget .payment-container {
  padding-top: 0.25rem;
}

.ax-chapters {
  display: grid;
  border-top: 1px solid var(--abx-border-strong);
}

.ax-chapters li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--abx-border);
}

.ax-chapters .chapter-number {
  padding-top: 0.2rem;
  font-family: var(--abx-font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--abx-text-muted);
}

.ax-chapters h3 {
  font-family: var(--alt-serif);
  font-size: 1.45rem;
  line-height: 1.08;
}

.ax-chapters p {
  margin-top: 0.3rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--abx-text-muted);
}

.ax .author-card .ax-split {
  justify-content: flex-start;
}

.ax .author-info {
  display: grid;
  gap: 0.25rem;
}

.ax-guide__cta {
  gap: 0.7rem;
  justify-items: start;
  padding: 1.6rem 1.25rem;
}

.ax-guide__cta .cta {
  margin-top: 0.5rem;
}

/* What happens, in order: a line with a dot at each step. */
.ax-timeline {
  display: grid;
  gap: 0;
  margin-left: 0.4rem;
  border-left: 1px solid var(--abx-border-strong);
}

.ax-timeline li {
  position: relative;
  display: grid;
  gap: 0.15rem;
  padding: 0 0 1.25rem 1.5rem;
  line-height: 1.45;
}

.ax-timeline li:last-child {
  padding-bottom: 0;
}

.ax-timeline li::before {
  content: '';
  position: absolute;
  top: 0.3rem;
  left: -0.4rem;
  width: 0.75rem;
  height: 0.75rem;
  border: 1.5px solid var(--abx-ink-900);
  border-radius: 50%;
  background: var(--ax-sheet);
}

.ax-timeline li.is-done::before {
  background: var(--abx-ink-900);
}

.ax-timeline strong {
  font-family: var(--abx-font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ax-timeline p {
  color: var(--abx-text-muted);
}

/* 6. ACADEMY =============================================================== */

/* The Founding Cohort application (academy/apply/): each step is a fieldset
   whose legend reads as the section's eyebrow. */
.ax .ap-form fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.ax .ap-form legend {
  margin-bottom: 0.9rem;
  padding: 0;
}

.ax .ap-form .checkbox-wrapper + .checkbox-wrapper {
  margin-top: 0.75rem;
}