/* Shared look for the plain HTML pages (log in, register, onboarding survey, password reset, waiver) in both apps.
   Keep this file identical in the coach and client repos. The pages no longer load Bootstrap, so the few layout
   helpers they still use are defined at the end of this file. Colors and fonts follow the shared RWL style sheet. */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800&family=Inter:wght@400;500;600&display=swap');

:root {
  --rwl-purple: #613892;
  --rwl-purple-deep: #3E2360;
  --rwl-lilac: #F1EBF8;
  --rwl-leaf: #3F7A25;
  --rwl-leaf-tint: #EEF7E8;
  --rwl-error: #B42318;
  --rwl-error-tint: #FDECEA;
  --rwl-ink: #2B2433;
  --rwl-muted: #6B6475;
  --rwl-line: #E6E0EC;
  --rwl-ground: #FAF8FC;
}

html body {
  background: var(--rwl-ground) !important;
  font-family: 'Inter', sans-serif !important;
  color: var(--rwl-ink);
  height: auto !important;
  min-height: 100vh;
  font-size: 16px;
}

body h1, body h2, body h3, body h4 {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 800 !important;
  color: var(--rwl-ink) !important;
}

body a {
  color: var(--rwl-purple);
  font-weight: 600;
  text-decoration: none;
}
body a:hover,
body a:focus-visible {
  text-decoration: underline;
}

/* The white card that holds each form */
body [id$="-box"],
body .waiver-box,
body .rwl-auth-card {
  height: auto !important;
  max-width: 480px !important;
  margin: 24px auto 48px !important;
  padding: 24px 20px !important;
  background: #fff !important;
  border: 1px solid var(--rwl-line) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}
body [id$="-box"] > form {
  padding: 0 !important;
}

body label {
  color: var(--rwl-ink) !important;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
}
body a.rwl-text-purple {
  color: var(--rwl-purple) !important;
}
body h3.rwl-text-purple {
  font-size: 24px;
  margin: 0 16px;
}
body label + br {
  display: none;
}

body .form-group {
  display: block !important;
  margin-bottom: 16px;
}
body .text-center {
  text-align: center;
}
body .text-right {
  text-align: right;
}
body .text-center img {
  margin: 0 auto;
}

body .form-control,
body input[type="text"],
body input[type="email"],
body input[type="password"],
body input[type="number"],
body input[type="date"],
body textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #CFC6DA !important;
  border-radius: 10px !important;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: var(--rwl-ink);
  background: #fff;
  box-sizing: border-box;
}
body textarea {
  min-height: 88px;
}
body .form-control:focus,
body input:focus,
body textarea:focus {
  outline: none;
  border-color: var(--rwl-purple) !important;
  box-shadow: 0 0 0 3px var(--rwl-lilac) !important;
}

body input[type="submit"],
body .btn,
body .rwl-btn-info {
  display: block;
  width: 100%;
  min-height: 48px;
  float: none !important;
  margin-top: 8px;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--rwl-purple) !important;
  color: #fff !important;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 16px;
  text-transform: none;
  cursor: pointer;
}
body input[type="submit"]:hover,
body .btn:hover {
  background: var(--rwl-purple-deep) !important;
}

body .error {
  color: var(--rwl-error);
  margin: 8px 0 0;
}

body img[alt="ResoluteWL"] {
  width: 200px;
  display: block;
  margin: 0 auto;
}
body #login-form > a[href*="reset"] {
  display: block !important;
  float: none !important;
  text-align: center;
}
body h3.pt-5,
body h3.mt-5 {
  padding-top: 32px !important;
  margin-top: 0 !important;
}

/* Page basics that Bootstrap used to provide */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html body {
  margin: 0;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}
body p {
  margin: 0 0 16px;
}
body h1, body h3, body h5 {
  margin: 0 0 8px;
  line-height: 1.25;
}
body h1 {
  font-size: 28px;
}
body h3 {
  font-size: 24px;
}
body h5 {
  font-size: 18px;
}
body .container {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 16px;
}
body .waiver-box {
  max-width: 720px !important;
}
body .container:has(.waiver-box) {
  max-width: 760px;
}
body .d-flex {
  display: flex;
}
body .w-100 {
  width: 100%;
}
body .h-100 {
  min-height: 100%;
}
body .mx-auto {
  margin-left: auto;
  margin-right: auto;
}
body .pt-2 {
  padding-top: 8px;
}
body .pt-4 {
  padding-top: 24px;
}
body .pt-5 {
  padding-top: 32px;
}
body .mt-2 {
  margin-top: 8px;
}
body .mt-3 {
  margin-top: 16px;
}
body .mb-0 {
  margin-bottom: 0;
}
body .alert {
  margin: 16px 0 0;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 15px;
}
body .alert-success {
  background: var(--rwl-leaf-tint);
  color: var(--rwl-leaf);
}
body .alert-danger {
  background: var(--rwl-error-tint);
  color: var(--rwl-error);
}

/* Checkboxes (waiver agreement, onboarding "Show password") */
body .form-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 8px 0 0;
}
body .form-check-input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  accent-color: var(--rwl-purple);
}
body .form-check .form-check-label {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
}
body .agree-check {
  margin: 16px 0 20px;
}

/* Waiver page */
body .waiver-text {
  max-height: 50vh;
  overflow-y: auto;
  padding: 16px;
  border: 1px solid var(--rwl-line);
  border-radius: 10px;
  background: var(--rwl-ground);
  font-size: 15px;
  line-height: 1.5;
}
body .scroll-hint {
  font-size: 14px;
  color: var(--rwl-muted);
}
body input[type="submit"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* "Log in" / "Log out" links under a page or card */
body a.log-out {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
}