body {
  margin: 0;
  font-family: 'Segoe UI';
  background: #12273F;
  height: 100%;
  margin: 0;
  /* optional safety to kill any accidental horizontal bar */
  overflow-x: hidden;
  overflow-y: hidden;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90vh;
  padding: 2rem;
  max-width: 1200px;        /* ⬅ control width */
  padding-top: 6rem; 
  margin: 0 auto 0 -3%;      /* ⬅ shift it to the left */
}

.left {
  flex: 1;
  padding-right: 4rem;
}

.left .logo {
  font-size: 3rem;
  font-family: 'Segoe UI';
  color: #10b981;
  margin-top: -20rem;
}

.left p {
  font-size: 1.2rem;
  color: #cbd5e1;
  max-width: 400px;
  font-family: 'Segoe UI';
}

.left .center-header{
  margin-top: -440px;              /* tweak the value */
  margin-right: -1340px;
}

.right {
  flex: 1;
  max-width: 520px;
}

.login-box {
  width: 100%;               /* fill the right column */
  min-height: 380px;         /* ← increase height */
  padding: 2.25rem 2.5rem;   /* a bit more inner space */
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;               /* spacing between fields */
}

.login-box input {
  padding: 1rem;
  margin-bottom: 1rem;
  font-size: 1rem;
  border: 1px solid #ddd;
  border-radius: 6px;
}

.login-btn {
  background: #005EA4;
  color: white;
  border: none;
  padding: 1rem;
  font-size: 1rem;
  font-family: 'Segoe UI';
  font-weight: bold;
  border-radius: 6px;
  cursor: pointer;
}

.login-btn:hover {
  background: #64A4DE;
}

.forgot {
  text-align: center;
  margin: 1rem 0;
  font-size: 0.9rem;
  color: #10857B;
  text-decoration: none;
  font-family: 'Segoe UI';
}

hr {
  border: none;
  border-top: 1px solid #ddd;
  margin: 1rem 0;
}

.signup-btn {
  background: #005EA4;
  color: white;
  border: none;
  padding: 2rem;
  font-size: 1rem;
  font-weight: bold;
  font-family: 'Segoe UI';
  border-radius: 6px;
  cursor: pointer;
}

.signup-btn:hover {
  background: #64A4DE;
}

.create-page {
  text-align: center;
  font-size: 0.85rem;
  margin-top: 1rem;
  color: #cbd5e1;
  font-family: 'Segoe UI';
  
}

.flashes {
  margin-bottom: 1rem;
  color: red;
  list-style: none;
  padding-left: 0;
  font-size: 0.9rem;
  text-align: left;
  text-align: center;
}

.logo-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px; /* space between icon and text */
}

.logo-title img.header-logo {
  width: 46px;
  height: 46px;
}

.logo-title img.header-logo {
  width: 76%;
  height: 76px;
}

.center-header {
  text-align: center;
  margin-top: 0px;
  color: white;
  display:flex;
  flex-direction:column;
  align-items:center; 
}

.promo {
  background: linear-gradient(90deg, #0f766e, #14b8a6);
  padding: 2rem;
  text-align: center;
  color: white;
}

header {
  padding: 2rem;
  text-align: center;
  background: #12273F;
}

header h1 {
  font-size: 3rem;
  margin: 0;
  color: white;
}

header p {
  font-size: 1.2rem;
  color: white;
  margin-top: 0.5rem;
}

.flash-inline{
  margin: 6px 0 14px;
  padding: 10px 12px;
  background: #fee2e2;       /* light red */
  color: #b91c1c;            /* red text */
  border: 1px solid #f87171; /* red border */
  border-radius: 6px;
  text-align: center;
  font-weight: 600;
}

.form-error{
  height: 44px;                  /* reserve space */
  margin: 8px 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 14px/1 "Segoe UI", sans-serif;
  color: #b42318;
  background: #fdeaea;
  border: 1px solid #f4c2c2;
  border-radius: 6px;
  box-sizing: border-box;
  transition: opacity .15s ease;
}

/* hide visually but keep the space so the box doesn't grow/shrink */
.form-error.is-hidden{
  opacity: 0;
  visibility: hidden;
  /* optional: make it look like empty space */
  background: transparent;
  border-color: transparent;
}

.bottom-row{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:nowrap;       /* <-- important so it won't drop to next line */
  width:100%;
  margin-top:14px;
}

/* button as a link */
.signup-btn{
  display:inline-block;
  padding:15px 20px;
  border-radius:6px;
  text-decoration:none;
  white-space:nowrap;     /* keep text on one line */
  flex:0 0 auto;          /* don't grow/shrink */
  background: #005EA4;
  color: white;
  border: none;
  padding: 1rem;
  font-size: 1rem;
  font-weight: bold;
  font-family: 'Segoe UI';
  border-radius: 6px;
  cursor: pointer;
}

/* the error box lives to the right and keeps space even when hidden */
.inline-error{
  flex:1 1 auto;                  /* take remaining space on the row */
  min-height:44px;                /* fixes layout jumping */
  display:flex;
  align-items:center;
  justify-content:center;       /* text aligned to the right edge */
  box-sizing:border-box;

  color:#b42318;
  background:#fdeaea;
  border:1px solid #f4c2c2;
  border-radius:6px;
  font:600 14px/1 "Segoe UI", sans-serif;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* keep space but hide visually when there's no error */
.inline-error.is-hidden{
  opacity:0;
  visibility:hidden;
  background:transparent;
  border-color:transparent;
}

.inline-error--left  { justify-content:flex-start; text-align:left;  }
.inline-error--right { justify-content:flex-end;   text-align:right; }

.inline-alert{
  min-height:44px;
  padding:.75rem 2rem;
  display:flex; align-items:center; justify-content:flex-end;
  border-radius:6px; box-sizing:border-box;
  font:600 14px/1 "Segoe UI", sans-serif;
}

/* hidden but keeps space to avoid jumping */
.inline-alert.is-hidden{ opacity:0; visibility:hidden; background:transparent; border-color:transparent; }

/* error (red) */
.inline-alert.is-error{
  color:#b42318; background:#fdeaea; border:1px solid #f4c2c2;
}

/* success (green) */
.inline-alert.is-success{
  color:#0f5132; background:#d1e7dd; border:1px solid #badbcc;
}