/* ==========================================================================
   TWC-branded auth pages (login, register, forgot password, reset password).
   Stefan 2026/08/20 - shared so all four screens stay consistent.
   Loaded after auth.css; the logo sits ABOVE the card on the dark background
   so a white-on-transparent logo stays visible.
   ========================================================================== */

body.login-page,
body.register-page {
  background: #181514 !important;
  font-family: 'Karla', Arial, Helvetica, sans-serif;
  min-height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.login-box,
.register-box {
  width: 100%;
  max-width: 400px;
  margin: 0;
}

/* Logo above the card, on the dark page background */
.login-logo,
.register-logo {
  text-align: center;
  margin: 0 0 22px;
}
.login-logo img,
.register-logo img {
  max-height: 48px;
  width: auto;
}
/* text fallback if there is no logo image */
.login-logo a,
.register-logo a {
  color: #F2EAE4;
  font-family: 'Karla', Arial, sans-serif;
  font-weight: 800;
  font-size: 22px;
  text-decoration: none;
}

/* The card */
.login-box-body,
.register-box-body {
  background: #F8F4EE;
  border-radius: 18px;
  border: none;
  padding: 36px 32px 30px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .45);
}

.login-box-msg,
.register-box-msg {
  color: #181514;
  font-family: 'Karla', Arial, sans-serif;
  font-weight: 800;
  font-size: 22px;
  text-align: center;
  margin: 0 0 20px;
  padding: 0;
}
.login-box-msg h3,
.register-box-msg h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: #181514;
}

/* "Welcome" style script flourish (login) */
.twc-login-flourish {
  font-family: var(--twc-script, 'Maison Galliard Script', cursive);
  font-style: normal;
  font-weight: 400;
  color: #A47865;
  font-size: 30px;
}
.twc-login-sub {
  color: #8a7969;
  font-size: 14px;
  text-align: center;
  margin: 0 0 24px;
}

/* Inputs */
.login-box-body .form-control,
.register-box-body .form-control {
  border: 1px solid #e8ddd2;
  border-radius: 12px;
  height: auto;
  padding: 12px 15px;
  font-family: 'Karla', Arial, sans-serif;
  font-size: 14.5px;
  color: #47342b;
  box-shadow: none;
  background: #fff;
}
.login-box-body .form-control:focus,
.register-box-body .form-control:focus {
  border-color: #A47865;
  box-shadow: none;
}
.login-box-body .form-control-feedback,
.register-box-body .form-control-feedback {
  color: #b7a99b;
  line-height: 46px;
}
.login-box-body label,
.register-box-body label {
  color: #181514;
  font-family: 'Karla', Arial, sans-serif;
  font-weight: 700;
  font-size: 13px;
}

/* Buttons */
.login-box-body .btn-primary,
.register-box-body .btn-primary {
  background: #181514 !important;
  border: none !important;
  color: #F8F4EE !important;
  border-radius: 999px;
  padding: 13px 18px;
  font-family: 'Karla', Arial, sans-serif;
  font-weight: 700;
  font-size: 14.5px;
  box-shadow: none;
  margin-top: 4px;
}
.login-box-body .btn-primary:hover,
.register-box-body .btn-primary:hover {
  background: #A47865 !important;
}
.login-box-body .btn-default,
.register-box-body .btn-default {
  background: transparent;
  border: 1px solid #e8ddd2;
  color: #8a7969;
  border-radius: 999px;
  padding: 11px 18px;
  font-family: 'Karla', Arial, sans-serif;
  font-weight: 700;
  font-size: 13.5px;
}
.login-box-body .btn-default:hover,
.register-box-body .btn-default:hover {
  border-color: #A47865;
  color: #A47865;
  background: transparent;
}

.login-box-body .checkbox label,
.login-box-body .icheck label,
.register-box-body .checkbox label {
  color: #47342b;
  font-weight: 400;
  font-size: 13.5px;
}
.login-box-body a,
.register-box-body a {
  color: #A47865;
}

/* Message callouts inside the card */
.login-box-body .callout,
.register-box-body .callout,
.login-box-body .message-alert .callout,
.register-box-body .message-alert .callout {
  border: none;
  border-radius: 12px;
  padding: 12px 15px;
}
.login-box-body .callout-error,
.login-box-body .callout-danger,
.login-box-body .callout-warning,
.register-box-body .callout-error,
.register-box-body .callout-danger,
.register-box-body .callout-warning {
  background: #47342b;
  color: #F8F4EE;
}
.login-box-body .callout-success,
.register-box-body .callout-success {
  background: #1f7a44;
  color: #fff;
}
.login-box-body .callout h4,
.register-box-body .callout h4 {
  color: #F8F4EE;
  font-size: 15px;
  margin-top: 0;
}