/* =====================================================================
   KayScience — Auth pages CSS (Login + Sign Up chooser)
   Page-specific only. Design tokens, header, footer and .ks-btn base
   all come from ks-common.css — nothing here repeats them.
   ===================================================================== */

/* ---------- Shared full-page gradient stage (matches PDF) ---------- */
.ks-auth {
  position: relative;
  /* Fill the whole viewport (background shows under the floating menu bar, like
     the homepage). Top padding reserves the header space so the card sits below
     the menu bar; the total still fits one screen with no scroll. */
  min-height: 100dvh;
  padding: 104px 24px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Brand geometric gradient artwork (matches the PDF backdrop; curves at top) */
  background-color: #bcd6e6;
  background-image: url('../images/auth-bg.jpg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.ks-auth > * { position: relative; z-index: 1; }

/* =====================================================================
   LOGIN CARD
   ===================================================================== */
.ks-auth-card {
  width: 100%;
  max-width: 500px;
  padding: clamp(26px, 3.4vw, 44px) clamp(24px, 3.4vw, 46px);
  border-radius: var(--ks-radius-lg);
  /* Very transparent glass — the geometric artwork shows clearly through the box,
     with a bright highlight in the top-left corner (like the PDF). Minimal blur so
     the background curves stay visible rather than milky. */
  background:
    linear-gradient(140deg, rgba(255,255,255,.46) 0%, rgba(255,255,255,.16) 42%, rgba(255,255,255,.07) 100%);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: var(--ks-shadow-lg);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.ks-auth-brand {
  text-align: center;
  margin-bottom: clamp(16px, 2.6vh, 26px);
}
.ks-auth-brand img {
  width: 300px;
  max-width: 82%;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
}

/* social sign-in row */
.ks-auth-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: clamp(14px, 2.4vh, 24px);
}
.ks-auth-social a {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  box-shadow: var(--ks-shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
.ks-auth-social a:hover { transform: translateY(-2px); box-shadow: var(--ks-shadow-md); }
.ks-auth-social img { width: 26px; height: 26px; object-fit: contain; }

/* form fields */
.ks-auth-form .ks-field { position: relative; margin-bottom: clamp(10px, 1.5vh, 16px); }
.ks-auth-form label.ks-field__label {
  position: absolute;
  top: 50%;
  left: 24px;
  transform: translateY(-50%);
  font-size: 15px;
  color: var(--ks-muted);
  pointer-events: none;
  transition: all .15s ease;
  background: transparent;
}
.ks-auth-form .ks-input {
  width: 100%;
  height: clamp(52px, 7vh, 60px);
  padding: 20px 24px 8px;
  font-family: var(--ks-font);
  font-size: 15px;
  color: var(--ks-navy);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.55));
  box-shadow: inset 0 1px 2px rgba(255,255,255,.6), var(--ks-shadow-sm);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ks-auth-form .ks-input:focus {
  border-color: rgba(92,196,183,.7);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.6), 0 0 0 3px rgba(92,196,183,.18);
}
/* floating label: hide the resting label once filled/focused */
.ks-auth-form .ks-input:focus + label.ks-field__label,
.ks-auth-form .ks-input:not(:placeholder-shown) + label.ks-field__label {
  top: 14px;
  transform: none;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ks-teal);
}

/* stay logged in */
.ks-auth-remember {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 clamp(12px, 2vh, 20px);
  font-size: 15px;
  color: var(--ks-navy);
  cursor: pointer;
  user-select: none;
}
.ks-auth-remember input { position: absolute; opacity: 0; width: 0; height: 0; }
.ks-auth-remember .ks-check {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(72,72,168,.2);
  box-shadow: var(--ks-shadow-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: background .15s ease, border-color .15s ease;
}
.ks-auth-remember .ks-check svg { width: 15px; height: 15px; stroke: #fff; opacity: 0; }
.ks-auth-remember input:checked + .ks-check {
  background: var(--ks-teal);
  border-color: var(--ks-teal);
}
.ks-auth-remember input:checked + .ks-check svg { opacity: 1; }

/* login / signup action buttons */
.ks-auth-actions { display: flex; flex-direction: column; gap: clamp(10px, 1.6vh, 14px); }
.ks-auth-btn {
  width: 100%;
  border: 0;
  cursor: pointer;
  font-family: var(--ks-font);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 14px;
  padding: clamp(15px, 2.1vh, 19px);
  border-radius: 40px;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.ks-auth-btn--light {
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.7));
  color: var(--ks-navy);
  box-shadow: var(--ks-shadow-md);
}
.ks-auth-btn--light:hover { transform: translateY(-2px); box-shadow: var(--ks-shadow-lg); }
.ks-auth-btn--grad {
  background: var(--ks-grad-btn);
  color: #fff;
  box-shadow: 0 12px 28px rgba(122, 108, 214, .32);
}
.ks-auth-btn--grad:hover { transform: translateY(-2px); filter: brightness(1.03); box-shadow: 0 16px 34px rgba(122, 108, 214, .42); }

.ks-auth-forgot {
  display: block;
  text-align: center;
  margin-top: clamp(12px, 2vh, 20px);
  font-size: 14px;
  color: var(--ks-navy-soft);
}
.ks-auth-forgot:hover { color: var(--ks-purple); }

.ks-auth-error {
  display: block;
  min-height: 0;
  margin-bottom: 10px;
  color: #d9534f;
  font-size: 14px;
  text-align: center;
}
.ks-auth-error:empty { margin: 0; }

/* =====================================================================
   SIGN UP — account-type chooser
   ===================================================================== */
.ks-signup {
  width: 100%;
  max-width: 900px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.ks-signup-card {
  position: relative;
  padding: 44px 40px 46px;
  border-radius: var(--ks-radius-lg);
  background: linear-gradient(160deg, rgba(255,255,255,.74) 0%, rgba(255,255,255,.44) 100%);
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: var(--ks-shadow-lg);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease;
}
.ks-signup-card:hover { transform: translateY(-4px); box-shadow: var(--ks-shadow-lg), 0 30px 60px rgba(72,72,168,.14); }

.ks-signup-badge {
  width: 92px;
  height: 92px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.55));
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: var(--ks-shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ks-signup-badge img { width: 52px; height: 52px; object-fit: contain; }

.ks-signup-card h2 {
  font-weight: 600;
  font-size: 27px;
  color: var(--ks-navy);
  margin: 0 0 6px;
}
.ks-signup-card h3 {
  font-weight: 400;
  font-size: 16px;
  color: var(--ks-navy-soft);
  margin: 0 0 26px;
}

.ks-signup-trial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--ks-navy);
  padding: 16px 34px;
  border-radius: 40px;
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.6));
  border: 1.5px solid rgba(143,134,214,.5);
  box-shadow: var(--ks-shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
.ks-signup-trial:hover { transform: translateY(-2px); box-shadow: var(--ks-shadow-md); }

.ks-signup-includes {
  margin-top: 30px;
  text-align: left;
}
.ks-signup-includes h4 {
  font-weight: 600;
  font-size: 16px;
  color: var(--ks-navy);
  margin: 0 0 16px;
}
.ks-signup-includes ul { list-style: none; margin: 0; padding: 0; }
.ks-signup-includes li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--ks-navy-soft);
  margin-bottom: 14px;
}
.ks-signup-includes li img.ks-tick {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

/* =====================================================================
   FORGOT-PASSWORD MODAL (self-contained — no Bootstrap dependency)
   ===================================================================== */
.ks-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(48, 44, 96, .45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.ks-modal.is-open { display: flex; }
.ks-modal__dialog {
  width: 100%;
  max-width: 440px;
  padding: 40px 40px 34px;
  border-radius: var(--ks-radius-lg);
  background: linear-gradient(160deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.9) 100%);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: var(--ks-shadow-lg);
  position: relative;
}
.ks-modal__close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: none;
  border: 0;
  font-size: 26px;
  line-height: 1;
  color: var(--ks-muted);
  cursor: pointer;
}
.ks-modal__brand { text-align: center; margin-bottom: 18px; }
.ks-modal__brand img { width: 54px; height: 54px; margin: 0 auto; }
.ks-modal h4 {
  text-align: center;
  font-weight: 600;
  font-size: 20px;
  color: var(--ks-navy);
  margin: 8px 0 4px;
}
.ks-modal p {
  text-align: center;
  font-size: 14px;
  color: var(--ks-navy-soft);
  margin: 0 0 22px;
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 820px) {
  /* stacked chooser cards can exceed the viewport — let the stage grow & scroll */
  .ks-signup { grid-template-columns: 1fr; max-width: 460px; gap: 28px; }
  .ks-auth { min-height: auto; padding: 104px 20px 40px; }
}
@media (max-width: 540px) {
  .ks-auth { padding: 92px 16px 32px; }
  .ks-signup-card { padding: 36px 26px 38px; }
}

/* Very short viewports (small laptops / landscape phones): keep the login box
   fully visible without scrolling by tightening the rhythm further. */
@media (min-width: 821px) and (max-height: 700px) {
  .ks-auth { min-height: 100dvh; padding: 88px 24px 20px; }
  .ks-auth-social { margin-bottom: 12px; }
  .ks-auth-social a { width: 44px; height: 44px; }
  .ks-auth-brand { margin-bottom: 12px; }
  .ks-auth-brand img { width: 260px; }
}