/*
 * EPSA Group — Cognito Hosted UI Custom CSS
 * =========================================
 * Strict subset of the AWS default template.
 * Only properties already present in the default template are modified.
 *
 * HOW TO UPLOAD:
 *   AWS Console → Cognito → User Pools → enoptea-energy-management-{env}
 *   → App Integration → App clients → Edit Hosted UI
 *   → "Upload CSS file" → select this file → Save changes
 *
 * EPSA Colors:
 *   Yellow   #E1B129   Navy   #293647   White   #FCFBFB
 * =========================================
 */

/* ── Logo ─────────────────────────────────────────────── */
.logo-customizable {
  max-width: 52%;
  max-height: 30%;
}

/* ── Banner / logo strip ──────────────────────────────── */
.banner-customizable {
  padding: 44px 0px 40px 0px;
  background-color: #293647;
}

/* ── Form labels ──────────────────────────────────────── */
.label-customizable {
  font-weight: 700;
  color: #FCFBFB;
}

/* ── "Sign in with your …" description ───────────────── */
.textDescription-customizable {
  padding-top: 6px;
  padding-bottom: 18px;
  display: block;
  font-size: 13px;
  color: rgba(252, 251, 251, 0.60);
}

/* ── IdP section heading ──────────────────────────────── */
.idpDescription-customizable {
  padding-top: 10px;
  padding-bottom: 10px;
  display: block;
  font-size: 13px;
  color: rgba(252, 251, 251, 0.55);
}

/* ── Legal / ToS text ─────────────────────────────────── */
.legalText-customizable {
  color: rgba(252, 251, 251, 0.30);
  font-size: 11px;
}

/* ── Primary submit button ────────────────────────────── */
.submitButton-customizable {
  font-size: 14px;
  font-weight: bold;
  margin: 28px 0px 10px 0px;
  height: 52px;
  width: 100%;
  color: #293647;
  background-color: #E1B129;
}

.submitButton-customizable:hover {
  color: #293647;
  background-color: #C49820;
}

/* ── Error message ────────────────────────────────────── */
.errorMessage-customizable {
  padding: 12px 16px;
  font-size: 13px;
  width: 100%;
  background: rgba(220, 53, 69, 0.10);
  border: 2px solid rgba(214, 73, 88, 0.55);
  color: #ffaaaa;
}

/* ── Input fields ─────────────────────────────────────── */
.inputField-customizable {
  width: 100%;
  height: 48px;
  color: #FCFBFB;
  background-color: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(225, 177, 41, 0.32);
}

.inputField-customizable:focus {
  border-color: #E1B129;
  outline: 0;
}

/* ── Social / IdP buttons ─────────────────────────────── */
.idpButton-customizable {
  height: 48px;
  width: 100%;
  text-align: center;
  margin-bottom: 12px;
  color: #FCFBFB;
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
}

.idpButton-customizable:hover {
  color: #E1B129;
  background-color: rgba(225, 177, 41, 0.10);
}

/* ── Social buttons (border-radius only available here) ── */
.socialButton-customizable {
  border-radius: 4px;
  height: 48px;
  margin-bottom: 12px;
  padding: 8px;
  text-align: left;
  width: 100%;
}

/* ── Forgot password / redirect links ────────────────── */
.redirect-customizable {
  text-align: center;
  color: #E1B129;
}

/* ── Password strength checks ─────────────────────────── */
.passwordCheck-notValid-customizable {
  color: #ff9a9a;
}

.passwordCheck-valid-customizable {
  color: #7ddc9d;
}

/* ── Page / card background ───────────────────────────── */
.background-customizable {
  background-color: #293647;
}