/* ============================================================
   BRUMOB – Brussels Mobility Keycloak Theme
   Based on Brussels Mobility design system
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600;700;900&display=swap');

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  --brumob-blue:          #2F3E8B;
  --brumob-blue-deep:     #100B69;
  --brumob-blue-mid:      #2b3a8b;
  --brumob-blue-light:    #EBEBF5;
  --brumob-blue-muted:    #E0E0EF;
  --brumob-text:          #4d4d4d;
  --brumob-text-light:    #6c757d;
  --brumob-white:         #ffffff;
  --brumob-border-radius: 30px;
  --brumob-radius-btn:    40px;
  --brumob-shadow:        0 0 30px rgba(77,77,77,.18);
  --brumob-shadow-hover:  0 8px 32px rgba(43,58,139,.22);
  --brumob-font:          'Source Sans Pro', Helvetica, Arial, sans-serif;
}

/* ── Reset & Base ───────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: var(--brumob-font);
  font-size: 16px;
  color: var(--brumob-text);
  background: var(--brumob-blue-light);
}

/* ── Page Layout ────────────────────────────────────────────── */
.brumob-theme #kc-header,
.brumob-theme .login-pf-header {
  display: none !important;
}

.login-pf body,
.brumob-theme body {
  background: linear-gradient(145deg, #EBEBF5 0%, #E0E0EF 60%, #d4d4ea 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ── Centered card wrapper ─────────────────────────────────── */
.login-pf-page,
#kc-container,
.container-fluid {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: transparent;
}

/* ── Login Card ─────────────────────────────────────────────── */
#kc-content,
.card-pf,
.login-pf-page .card-pf {
  background: var(--brumob-white);
  border-radius: var(--brumob-border-radius);
  box-shadow: var(--brumob-shadow);
  padding: 48px 52px 52px;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border: none;
  position: relative;
  overflow: visible;
}

#kc-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--brumob-blue) 0%, var(--brumob-blue-deep) 100%);
  border-radius: var(--brumob-border-radius) var(--brumob-border-radius) 0 0;
}

/* ── Logo Header ─────────────────────────────────────────────── */
.brumob-logo-header {
  text-align: center;
  margin-bottom: 36px;
}

.brumob-logo-header img,
.brumob-logo-header svg {
  height: 52px;
  width: auto;
}

/* ── Page Title ─────────────────────────────────────────────── */
#kc-page-title,
.login-pf-page h1,
h1#kc-page-title {
  font-family: var(--brumob-font);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--brumob-blue);
  text-align: center;
  margin-bottom: 28px;
  margin-top: 0;
  line-height: 1.3;
}

/* ── Form Labels ─────────────────────────────────────────────── */
.control-label,
label {
  font-family: var(--brumob-font);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--brumob-text);
  display: block;
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}

/* ── Form Inputs ─────────────────────────────────────────────── */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
select,
textarea {
  font-family: var(--brumob-font);
  font-size: 1rem;
  color: var(--brumob-text);
  background: var(--brumob-white);
  border: 2px solid #d0d4e8;
  border-radius: 12px;
  padding: 11px 16px;
  width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  line-height: 1.5;
  display: block;
}

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  border-color: var(--brumob-blue);
  box-shadow: 0 0 0 3px rgba(47,62,139,0.12);
  outline: none;
}

.form-control::placeholder,
input::placeholder {
  color: #aab0c8;
  font-weight: 400;
}

/* ── Form Groups ─────────────────────────────────────────────── */
.form-group {
  margin-bottom: 20px;
}

/* ── Password wrapper ────────────────────────────────────────── */
.password-wrapper,
#password-wrapper,
.input-group {
  position: relative;
}

.input-group .form-control {
  border-radius: 12px !important;
}

/* ── Primary Button ──────────────────────────────────────────── */
.btn,
button,
input[type="submit"] {
  font-family: var(--brumob-font);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.15s;
  border-radius: var(--brumob-radius-btn);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.btn-primary,
input[type="submit"],
#kc-login,
#kc-register,
.btn.btn-block,
button[type="submit"] {
  background-color: var(--brumob-blue);
  border: 2px solid var(--brumob-blue);
  color: var(--brumob-white);
  padding: 12px 28px;
  width: 100%;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: var(--brumob-radius-btn);
  box-shadow: 0 4px 14px rgba(47,62,139,0.18);
}

.btn-primary:hover,
input[type="submit"]:hover,
#kc-login:hover,
#kc-register:hover,
button[type="submit"]:hover {
  background-color: var(--brumob-blue-deep);
  border-color: var(--brumob-blue-deep);
  color: var(--brumob-white);
  box-shadow: var(--brumob-shadow-hover);
  transform: translateY(-1px);
}

.btn-primary:active,
input[type="submit"]:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(47,62,139,0.14);
}

/* ── Secondary / Default Button ─────────────────────────────── */
.btn-default,
.btn-secondary {
  background-color: var(--brumob-white);
  border: 2px solid var(--brumob-blue);
  color: var(--brumob-blue);
  padding: 10px 24px;
  font-weight: 600;
  border-radius: var(--brumob-radius-btn);
}

.btn-default:hover,
.btn-secondary:hover {
  background-color: var(--brumob-blue);
  color: var(--brumob-white);
}

/* ── Social / IDP Buttons ────────────────────────────────────── */
.social-section .zocial,
.login-pf-social .zocial {
  border-radius: 12px !important;
  border: 2px solid var(--brumob-blue-muted) !important;
  background: var(--brumob-white) !important;
  color: var(--brumob-blue) !important;
  font-family: var(--brumob-font) !important;
  font-weight: 600 !important;
  padding: 10px 16px !important;
  transition: all 0.2s !important;
  margin-bottom: 8px !important;
}

.social-section .zocial:hover {
  background: var(--brumob-blue-light) !important;
  border-color: var(--brumob-blue) !important;
}

/* ── Divider ─────────────────────────────────────────────────── */
#kc-form-options,
.login-pf-signup,
.login-pf-social-section {
  text-align: center;
  margin-top: 20px;
}

/* ── Links ───────────────────────────────────────────────────── */
a {
  color: var(--brumob-blue);
  font-weight: 600;
  text-decoration: underline;
  transition: color 0.2s;
}

a:hover {
  color: var(--brumob-blue-deep);
  text-decoration: none;
}

#kc-form-options a,
.login-pf-signup a {
  font-size: 0.95rem;
}

/* ── Remember Me checkbox ────────────────────────────────────── */
#kc-form-options .checkbox,
#rememberMe + label {
  font-size: 0.9rem;
  color: var(--brumob-text-light);
  user-select: none;
}

input[type="checkbox"] {
  accent-color: var(--brumob-blue);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* ── Alert / Error Messages ──────────────────────────────────── */
.alert,
.pf-m-error,
#kc-error-message,
.alert-error {
  background: #fff0f1;
  border: 2px solid #e00011;
  border-radius: 12px;
  color: #c0000e;
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 0.92rem;
  font-weight: 500;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.alert-warning {
  background: #fff8e6;
  border-color: #ffc43d;
  color: #7a5a00;
}

.alert-success {
  background: #eef8f8;
  border-color: #215f5d;
  color: #215f5d;
}

.alert-info {
  background: var(--brumob-blue-light);
  border-color: var(--brumob-blue);
  color: var(--brumob-blue);
}

/* ── Field-level error ───────────────────────────────────────── */
.has-error .form-control {
  border-color: #e00011;
}

.has-error .help-block,
.pf-m-error {
  color: #c0000e;
  font-size: 0.84rem;
  margin-top: 4px;
  font-weight: 500;
}

/* ── Info text / sub-text ────────────────────────────────────── */
.instruction,
#kc-info-message p {
  font-size: 0.95rem;
  color: var(--brumob-text-light);
  text-align: center;
  margin-bottom: 20px;
  line-height: 1.55;
}

/* ── Divider between form and social ────────────────────────── */
.login-pf-social-separator,
.separator-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0;
  color: var(--brumob-text-light);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.login-pf-social-separator::before,
.login-pf-social-separator::after,
.separator-or::before,
.separator-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #d0d4e8;
}

/* ── Required field asterisk ─────────────────────────────────── */
.required::after {
  content: ' *';
  color: #e00011;
}

/* ── Back-to-login link ──────────────────────────────────────── */
#back-to-login {
  display: block;
  text-align: center;
  margin-top: 18px;
  font-size: 0.9rem;
}

/* ── OTP / code input ────────────────────────────────────────── */
input[type="text"].otp-input,
#otp {
  letter-spacing: 0.3em;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 700;
  padding: 14px;
}

/* ── Registration: Two-column name row ──────────────────────── */
.name-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* ── Password strength indicator ────────────────────────────── */
#kc-password-strength {
  height: 4px;
  border-radius: 4px;
  background: #d0d4e8;
  margin-top: 8px;
  overflow: hidden;
}

/* ── Footer note ─────────────────────────────────────────────── */
.brumob-footer-note {
  text-align: center;
  margin-top: 32px;
  font-size: 0.82rem;
  color: var(--brumob-text-light);
}

.brumob-footer-note a {
  color: var(--brumob-blue);
  font-weight: 600;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 560px) {
  #kc-content,
  .card-pf {
    padding: 36px 24px 40px;
    border-radius: 20px;
  }

  #kc-page-title,
  h1#kc-page-title {
    font-size: 1.35rem;
  }

  .name-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* ── Focus outline accessibility ─────────────────────────────── */
a:focus,
button:focus,
input:focus,
select:focus {
  outline: 3px dotted var(--brumob-blue);
  outline-offset: 2px;
}

/* ── Keycloak-specific overrides ─────────────────────────────── */
#kc-header-wrapper {
  display: none;
}

.login-pf-page #kc-content-wrapper {
  width: 100%;
}

#kc-form-login,
#kc-register-form {
  margin-top: 8px;
}

#kc-form {
  margin: 0;
}

/* Column layout guard */
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  float: none;
  width: 100%;
  padding: 0;
}

.row {
  margin: 0;
}

/* Hide Keycloak's default logo area */
#kc-logo {
  display: none;
}

/* Terms & conditions checkbox row */
.pf-v5-c-form__group--no-top-margin {
  margin-top: 0;
}