/* Sign-up and sign-in, dressed in the Open Book identity.

   The forms are Booknetic SaaS's and are never edited (§0.1), so every
   selector below targets a class Booknetic actually renders. Those class names
   were read off the live pages, not guessed, and two of them are worth
   knowing: sign-up buttons carry .bookneticsaas_btn_primary while sign-in
   buttons carry .booknetic_btn_primary — no "saas" — so both spellings appear
   here and dropping either silently unstyles one of the two pages.

   Booknetic prints its own styles inline, which land after this file in the
   cascade. Where that fights us the fix is specificity through .csga, the
   wrapper AuthPagesController adds; !important is used only for the theme
   chrome, which is a different stylesheet's problem entirely. */

.csga {
  --brand: #7b39fc;
  --brand-hi: #8f55fd;
  --dark: #2b2344;
  --night: #100c1c;
  --night-2: #17102b;
  --night-3: #0b0814;
  --paper: #f7f6fb;
  --rule: #e6e3ef;
  --ink: #171717;
  --mut: #5b5470;
  --lilac: #b9a4ef;

  /* The front page's two families, spelled the same way. These pages are the
     step after the homepage's button; different type here and a salon owner
     is left wondering whether they are still on the same site.

     One weight, no italic in the display face — hence font-synthesis: none
     below, which stops a browser drawing a fake bold that comes out smeared. */
  --display: "FSP DEMO - PODIUM Sharp 4.11", "Arial Black", Impact, "Helvetica Neue", system-ui, sans-serif;
  --ui: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --action: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --body: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "brand" "form" "tail";
  min-height: 100vh;
  font-family: var(--body);
  font-synthesis: none;
  color: var(--ink);
  background: var(--paper);
}
.csga *, .csga *::before, .csga *::after { box-sizing: border-box; }

/* ---- the panel beside the form ------------------------------------- */
.csga-brand {
  background:
    radial-gradient(64% 48% at 18% 12%, rgba(123, 57, 252, .45) 0%, rgba(123, 57, 252, 0) 70%),
    radial-gradient(52% 40% at 88% 30%, rgba(226, 178, 138, .18) 0%, rgba(226, 178, 138, 0) 72%),
    linear-gradient(168deg, var(--night-2) 0%, var(--night) 55%, var(--night-3) 100%);
  grid-area: brand;
  color: #fff;
  padding: 40px 28px 36px;
}

/* Same ground as the head, so on a wide screen the two read as one panel with
   the form beside them, and on a phone they read as a frame around it. */
.csga-tail {
  grid-area: tail;
  background: var(--night-3);
  color: #fff;
  padding: 32px 28px 44px;
}
.csga-logo {
  display: inline-flex; align-items: center; margin-bottom: 36px;
  color: #fff; text-decoration: none; line-height: 1;
  font-family: var(--display); font-weight: 400;
  font-size: 1.5rem; letter-spacing: .06em; text-transform: uppercase;
}
.csga-logo:hover { opacity: .8; color: #fff; }
.csga-title {
  font-family: var(--display); font-weight: 400;
  font-size: 2.4rem; line-height: 1.05; letter-spacing: -.02em;
  text-transform: uppercase;
  text-wrap: balance; margin: 0 0 14px; color: #fff;
}
.csga-lede { margin: 0; font-size: 1.02rem; line-height: 1.6; color: rgba(255, 255, 255, .7); max-width: 42ch; }

/* Numbered because it is a real sequence: the account is step one of three,
   and a bare form gives no hint that the other two exist. */
.csga-steps { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 18px; max-width: 44ch; }
.csga-steps li { display: flex; gap: 14px; align-items: flex-start; }
.csga-steps b {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255, 255, 255, .12); color: var(--lilac);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ui); font-size: .85rem; font-weight: 600;
}
.csga-steps span { display: block; font-size: .93rem; line-height: 1.55; color: rgba(255, 255, 255, .62); }
.csga-steps strong { display: block; font-family: var(--ui); font-weight: 600; color: #fff; font-size: .98rem; margin-bottom: 2px; }

.csga-note { margin: 32px 0 0; font-family: var(--action); font-size: .88rem; color: rgba(255, 255, 255, .45); }
.csga-spam {
  margin-top: 26px; padding: 12px 14px; border-radius: 8px;
  background: rgba(255, 255, 255, .06); border-left: 3px solid var(--lilac);
  color: rgba(255, 255, 255, .68); line-height: 1.55;
}
.csga-spam b { color: #fff; font-weight: 600; }
.csga-switch { margin: 10px 0 0; font-size: .92rem; color: rgba(255, 255, 255, .55); }
.csga-switch a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.csga-switch a:hover { color: var(--lilac); }

/* ---- the form side -------------------------------------------------- */
.csga-form { grid-area: form; display: flex; align-items: center; justify-content: center; padding: 36px 20px 48px; }

/* Booknetic's own wrappers become the card. Giving the card to these rather
   than to .csga-form keeps it hugging the form at every step of the two-step
   signup instead of stretching to the column. */
.csga .bookneticsaas_signup,
.csga .bookneticsaas_login {
  width: 100%; max-width: 440px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 36px 32px 32px;
  box-shadow: 0 30px 70px -40px rgba(43, 35, 68, .45);
}

/* "Sign Up", "Sign In" — and on step two, "Congratulations!". That last one is
   why Booknetic's header is restyled rather than hidden in favour of our own:
   hiding it would have taken the success state's heading with it. */
.csga .bookneticsaas_header {
  font-family: var(--display) !important;
  font-weight: 400 !important;
  font-size: 2rem !important;
  line-height: 1.1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--ink) !important;
  text-align: left !important;
  margin: 0 0 26px !important;
}

.csga .bookneticsaas_form_element { margin-bottom: 18px; }
.csga .bookneticsaas_form_element label {
  display: block;
  font-family: var(--ui);
  font-size: .84rem;
  font-weight: 600;
  color: var(--mut);
  margin-bottom: 7px;
  letter-spacing: .01em;
}
.csga .bookneticsaas_form input[type="text"],
.csga .bookneticsaas_form input[type="email"],
.csga .bookneticsaas_form input[type="password"],
.csga .bookneticsaas_form input[type="tel"],
.csga .bookneticsaas_form select {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  font-family: var(--body);
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 10px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.csga .bookneticsaas_form input:focus,
.csga .bookneticsaas_form select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(123, 57, 252, .16);
}
.csga .bookneticsaas_form input::placeholder { color: #a7a2b8; }

/* The eye toggle sits inside the password field's box. */
.csga .bkntc-password-input { position: relative; }
.csga .bkntc-toggle-password-visibility {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; padding: 8px; color: var(--mut);
  display: flex; align-items: center;
}
.csga .bkntc-toggle-password-visibility:hover { color: var(--brand); }

/* Both spellings: sign-up renders bookneticsaas_btn_primary, sign-in renders
   booknetic_btn_primary. Dropping either unstyles one whole page. */
.csga .bookneticsaas_btn_primary,
.csga .booknetic_btn_primary,
.csga .bookneticsaas_signup_btn,
.csga .bookneticsaas_login_btn {
  width: 100%;
  min-height: 50px;
  margin-top: 6px;
  background: var(--brand) !important;
  color: #fff !important;
  border: 0;
  border-radius: 10px;
  font-family: var(--action) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  letter-spacing: .01em;
  text-transform: none;
  cursor: pointer;
  box-shadow: 0 10px 30px -12px rgba(123, 57, 252, .9);
  transition: background-color .15s;
}
.csga .bookneticsaas_btn_primary:hover,
.csga .booknetic_btn_primary:hover,
.csga .bookneticsaas_signup_btn:hover,
.csga .bookneticsaas_login_btn:hover { background: var(--brand-hi) !important; }

.csga .bookneticsaas_footer,
.csga .bookneticsaas_forgot_password { margin-top: 18px; font-size: .92rem; color: var(--mut); text-align: left; }
.csga .bookneticsaas_footer a,
.csga .bookneticsaas_forgot_password a { color: var(--brand); text-decoration: none; font-weight: 500; }
/* Booknetic puts a question-mark icon inside the forgot-password link. */
.csga .bookneticsaas_forgot_password a { display: inline-flex; align-items: center; gap: 6px; }
.csga .bookneticsaas_forgot_password img { width: 14px; height: 14px; opacity: .65; }
.csga .bookneticsaas_footer a:hover,
.csga .bookneticsaas_forgot_password a:hover { text-decoration: underline; }

/* The "check your email" state after step one — the moment a new owner is most
   likely to think nothing happened, so it gets the same care as the form. */
.csga .bookneticsaas_check_your_email,
.csga .bookneticsaas_email_success { text-align: center; }
.csga .bookneticsaas_check_your_email { font-family: var(--ui); font-weight: 600; color: var(--ink); }
.csga .bookneticsaas_resend_activation { margin-top: 12px; font-size: .92rem; color: var(--mut); }
.csga .bookneticsaas_resend_activation_link { color: var(--brand); cursor: pointer; font-weight: 500; }

/* ---- wider screens: the two columns ---------------------------------- */
@media (min-width: 900px) {
  /* The form spans both rows on the right; brand and tail stack on the left,
     which is how the phone ordering and the desktop panel come from one set of
     markup instead of two. */
  .csga {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "brand form" "tail form";
    /* Two equal rows so the dark field fills the column top to bottom; the
       content is centred by pushing the head down to the boundary and the tail
       up to it, rather than by centring the rows and leaving paper above and
       below the panel. */
    grid-template-rows: 1fr 1fr;
  }
  .csga-brand { padding: 56px 48px 0; display: flex; flex-direction: column; justify-content: flex-end; }
  .csga-tail { padding: 24px 48px 56px; background: transparent; }
  .csga-title { font-size: 3rem; }
  .csga-form { padding: 56px 40px; }

  /* The left column is one continuous dark field behind both rows. */
  .csga::before {
    content: "";
    grid-area: brand / brand / tail / tail;
    background:
      radial-gradient(64% 40% at 18% 10%, rgba(123, 57, 252, .45) 0%, rgba(123, 57, 252, 0) 70%),
      radial-gradient(52% 34% at 88% 26%, rgba(226, 178, 138, .18) 0%, rgba(226, 178, 138, 0) 72%),
      linear-gradient(168deg, var(--night-2) 0%, var(--night) 55%, var(--night-3) 100%);
  }
  .csga-brand, .csga-tail { background: none; position: relative; }
}

@media (min-width: 1200px) {
  .csga { grid-template-columns: 1.05fr .95fr; }
  .csga-brand { padding: 64px 72px 0; }
  .csga-tail { padding: 24px 72px 64px; }
  .csga-title { font-size: 3.4rem; }
}

/* ---- host theme chrome -----------------------------------------------
   This stylesheet is enqueued only on the two auth pages, which is what makes
   these unscoped selectors safe: the elements are ancestors of .csga and no
   descendant selector can reach them.

   The theme prints the page title above the content, pads it top and bottom,
   and closes with its stock footer of demo links. The panel already carries
   the heading and the brand, so the theme's title would be a second one; the
   padding would stop the dark panel reaching the top of the screen; and its
   nav offers "Create your booking page" on the page that already is it. */
.wp-block-post-title { display: none; }
header.wp-block-template-part { display: none; }
footer.wp-block-template-part { display: none; }
main.wp-block-group { margin-top: 0 !important; margin-bottom: 0 !important; }
main .wp-block-group.has-global-padding,
main .wp-block-post-content.has-global-padding,
main .entry-content { padding-top: 0 !important; padding-bottom: 0 !important; }
main .wp-block-post-content > .csga,
main .entry-content > .csga { max-width: none !important; }