/* Shared authentication container/card */
.auth-container {
    max-width: 430px;
    margin: 4rem auto;
    background: #fff;
    padding: 1.1rem 1rem 0.7rem 1rem;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.10);
    text-align: center;
}

.auth-container img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 1.2rem auto;
    max-height: 150px;
}

/* Shared authentication form layout */
.auth-form {
    margin-top: 1rem;
    text-align: left;
}

.auth-form label {
    font-size: 1rem;
    color: #203062;
    margin-top: 0rem;
    margin-bottom: 0rem;
    display: block;
    font-weight: 500;
}

.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="text"],
.auth-form select {
    width: 100%;
    padding: 0.55rem;
    border: 1px solid #bbe4fa;
    border-radius: 8px;
    font-size: 1rem;
    margin-bottom: 0.7rem;
    background: #f8fbff;
    box-sizing: border-box;
	vertical-align: middle;
}
.auth-form select {
    height: auto;
    min-height: unset;
    line-height: .9;    /* tweak this up/down if needed */
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
    /* Remove outline if it's showing extra border on some browsers */
}
.auth-form button {
    width: 100%;
    margin-top: 0.5rem;
    background: #012169;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.65rem 0;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.auth-form button:hover {
    background: #0a2c5a;
}

.auth-links {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.97rem;
}

.auth-error,
.auth-success {
    padding: 0.75rem 1rem;
    border-radius: 7px;
    margin-bottom: 1.2rem;
    font-weight: 500;
    text-align: center;
}
.auth-error {
    background: #ffd6d6;
    color: #8a1f1f;
    border: 1px solid #f5a4a4;
}
.auth-success {
    background: #e0fdd8;
    color: #27641e;
    border: 1px solid #acebaa;
}

/* Password visibility toggle (eye icon) */
.password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.password-wrapper input[type="password"],
.password-wrapper input[type="text"] {
    width: 100%;
    padding-right: 2.5rem;
    box-sizing: border-box;
}

.password-wrapper i {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    color: #666;
    font-size: 1.1rem;
    line-height: 1;
    height: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    cursor: pointer;
}

/* Layout for main row: image + form */
.main-flex-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  align-items: flex-start;
}

.img-col {
  flex: 0 0 280px;
  text-align: center;
}

.main-image {
  max-width: 100%;
  height: auto;
}

.form-col {
  flex: 1 1 400px;
  min-width: 300px;
}

.address-row select,
.address-row {
  display: flex;
  gap: .3rem;
  margin-bottom: 0rem;
  align-items: center;
}

.col-flex {
  display: flex;
  flex-direction: column;
}

.user-info-row-mt {
  margin-top: .25rem;
}

.pronouns-flex {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.custom-title-input {
  display: none;
  margin-top: 0.5rem;
  width: 100%;
}

.custom-pronouns-input {
  display: none;
  flex: 1;
  min-width: 160px;
}

.auth-logo {
  display: block;
  max-width: 160px;  /* Or adjust as you wish */
  height: auto;
  margin: 0 auto .5rem auto; /* Centered, with bottom margin for spacing */
}

/* Only affects signup or pages that need extra width */
.wide-auth-container {
  max-width: 750px;    /* Try 700-900px for a register page */
  width: 100%;
  margin: 1rem auto;
}

.wide-card {
  padding: 2.2rem 2.2rem 1.6rem 2.2rem;  /* a bit more padding for wide */
}

/* Form Grid Layout Helpers */

.row-names {
  display: flex;
  gap: 1rem;
}
.row-names > .col-title { flex: 1.2; min-width: 100px; }
.row-names > .col-fname { flex: 2; min-width: 120px; }
.row-names > .col-lname { flex: 2; min-width: 120px; }

.pronouns-row {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 1rem;
}
.pronouns-row > .col-pronouns {
  flex: 2;
  min-width: 120px;
  max-width: 200px;
}

.user-info-row {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
  margin-bottom: 0rem; /* was 1rem */
}
.user-info-col {
  flex: 1 1 180px;
  min-width: 140px;
  display: flex;
  flex-direction: column;
}
.user-pronouns-col {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.6rem !important;
  min-width: 320px;
}
#user_pronouns {
  flex: none;
  min-width: 140px;
}
#user_pronouns_custom {
  display: none;
  flex: 1;
  min-width: 160px;
  height: calc(100% - 0.96rem);
}
#custom_title_wrap,
#custom_pronouns_wrap {
  margin-top: 0.6rem;
}
#client_state {
  width: 100% !important;
  max-width: 120px;
}
.form-group,
.user-info-group {
    border: 1.5px solid #16326e;        /* Gentle navy blue (adjust color to match your palette) */
    border-radius: 12px;                /* Nicely rounded corners */
    
    box-sizing: border-box;
    /* Remove harsh box-shadows or outlines if present */
}
.form-group:not(:last-child) {
    margin-bottom: 18px;
}
.user-info-group legend {
  font-size: 1em;
  font-weight: bold;
  margin-bottom: 8px;
  color: #1b2945;
}
.form-field {
  margin-bottom: 0rem;
}

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center; /* Center contents horizontally */
  background: #fff;
  color: #12336a;
  border: 1.7px solid #a8dfff;
  border-radius: 9px;
  font-weight: 600;
  font-size: 0.95em;
  padding: 0.15em 0.8em 0.15em 0.56em;
  box-shadow: 0 1px 3px rgba(14,22,80,0.07);
  transition: border 0.13s, box-shadow 0.13s;
  cursor: pointer;
  height: 28px;
  min-width: 94px;
  min-height: 28px;
  gap: 0.42em;
}

.icon-btn:active,
.icon-btn:focus {
  border: 1.7px solid #4db8ff;
  box-shadow: 0 2px 8px rgba(78,184,255,0.10);
}

.icon-btn-img {
  height: 16px;
  width: 16px;
  margin-right: 0.3em;
}

.icon-btn-danger {
  border-color: #ff4d4d;
  color: #bb1f1f;
  background: #fff;
}

.icon-btn-danger:disabled {
  border-color: #ecc1c1;
  color: #bbb;
  background: #f6f6f6;
  cursor: not-allowed;
  opacity: 0.76;
}
.icon-btn-actions {
  display: flex;
  gap: 0.7rem;
  margin-top: 1.1rem;
}