/* ============================================================
   Johnflies - account pages (login / create an account)
   Scoped to body#authentication so no other page moves.
   Accent = theme crimson #f0486b.  UI type = Open Sans (loaded
   by the theme); the page title keeps the brand Museo300.
   ============================================================ */

/* --- section shell ------------------------------------------------------- */
body#authentication #center_column .aligned-padding {
  margin: 0 0 34px;
  padding: 28px 28px 32px;
  background: #f9fafb;
  border: 1px solid #eef0f4;
  border-radius: 18px;
}

/* --- page title ---------------------------------------------------------- */
body#authentication #center_column .page-heading {
  margin: 0 0 26px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 27px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #171a1f;
}
body#authentication #center_column .page-heading::after {
  content: "";
  display: block;
  width: 46px;
  height: 3px;
  margin-top: 13px;
  border-radius: 3px;
  background: linear-gradient(90deg, #f0486b 0%, rgba(240, 72, 107, .22) 100%);
}

/* --- two equal-height cards --------------------------------------------- */
body#authentication #center_column .aligned-padding > .row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 26px;
  margin: 0;
}
body#authentication #center_column .aligned-padding > .row > div {
  display: flex;
  float: none;
  width: auto;
  min-width: 0;
  flex: 1 1 320px;
  padding: 0;
}
/* Bootstrap's clearfix psuedo-elements become flex items and eat the gutters */
body#authentication #center_column .aligned-padding > .row::before,
body#authentication #center_column .aligned-padding > .row::after {
  display: none;
}

body#authentication #center_column .box {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 24px 26px 26px;
  background: #fff;
  border: 1px solid #e7eaf0;
  border-radius: 16px;
  box-shadow: 0 26px 48px -34px rgba(23, 26, 31, .42), 0 1px 2px rgba(23, 26, 31, .05);
  overflow: hidden;
  font-family: 'Open Sans', 'Source Sans Pro', Arial, sans-serif;
  font-size: 14px;
  color: #3c424b;
}
body#authentication #center_column .box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #f0486b 0%, rgba(240, 72, 107, .10) 72%);
}

/* --- card heading -------------------------------------------------------- */
body#authentication #center_column .box .page-subheading {
  display: block;
  margin: 0 0 20px;
  padding: 0 0 15px;
  background: none;
  border: 0;
  border-bottom: 1px solid #eef0f4;
  font-family: 'Open Sans', 'Source Sans Pro', Arial, sans-serif;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: #171a1f;
}
body#authentication #center_column .box .page-subheading::before {
  content: "\f023";
  margin-right: 10px;
  font-family: FontAwesome;
  font-weight: 400;
  font-size: 12px;
  color: #f0486b;
}
body#authentication #center_column #create-account_form .page-subheading::before {
  content: "\f234";
}
/* registration form: one icon per section */
body#authentication #center_column #account-creation_form .account_creation:nth-of-type(1) .page-subheading::before {
  content: "\f007";
}
body#authentication #center_column #account-creation_form .account_creation:nth-of-type(2) .page-subheading::before {
  content: "\f015";
}
body#authentication #center_column #account-creation_form .account_creation.dni .page-subheading::before {
  content: "\f0b1";
}

/* --- intro copy ---------------------------------------------------------- */
body#authentication #create-account_form .form_content > p:first-child {
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #6a727e;
}
/* let both cards push their button to the same baseline, and centre the
   create-account field in the space that is left above it */
body#authentication #center_column .box .form_content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
body#authentication #center_column #create-account_form .form_content > .form-group {
  margin-top: auto;
}

/* --- fields -------------------------------------------------------------- */
body#authentication #center_column .box .form-group {
  margin: 0 0 16px;
}
body#authentication #center_column .box label {
  display: block;
  margin: 0 0 7px;
  padding: 0;
  font-family: 'Open Sans', 'Source Sans Pro', Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  color: #40464f;
}
body#authentication #center_column .box label sup {
  position: static;
  top: auto;
  margin-left: 3px;
  font-size: 12px;
  font-weight: 700;
  color: #f0486b;
  vertical-align: baseline;
}
/* radios / checkboxes: sentence case reads far better than tracked caps */
body#authentication #center_column .box .radio-inline,
body#authentication #center_column .box .checkbox {
  margin: 0 20px 6px 0;
  padding: 0;
}
body#authentication #center_column .box .radio-inline label,
body#authentication #center_column .box .checkbox label {
  display: inline-block;
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: #40464f;
}
body#authentication #center_column .box .form-control {
  display: block;
  width: 100%;
  height: 46px;
  padding: 0 14px;
  background: #fff;
  border: 1px solid #e1e5ea;
  border-radius: 10px;
  box-shadow: none;
  font-family: 'Open Sans', 'Source Sans Pro', Arial, sans-serif;
  font-size: 14.5px;
  color: #262b33;
  caret-color: #f0486b;
  transition: border-color .18s ease, box-shadow .18s ease;
}
body#authentication #center_column .box .form-control:hover {
  border-color: #cfd6de;
}
body#authentication #center_column .box .form-control:focus {
  border-color: #f0486b;
  box-shadow: 0 0 0 3px rgba(240, 72, 107, .13);
  outline: 0;
}
body#authentication #center_column .box .form-control::placeholder {
  color: #a6adb8;
}
/* keep the markup's own validity tinting, but keep the field face white */
body#authentication #center_column .box .form-control.form-ok,
body#authentication #center_column .box .form-control.form-error {
  background: #fff;
}
body#authentication #center_column .box .form-control:-webkit-autofill,
body#authentication #center_column .box .form-control:-webkit-autofill:hover,
body#authentication #center_column .box .form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: #262b33;
  -webkit-box-shadow: 0 0 0 60px #fff inset;
  border-color: #e1e5ea;
}

/* --- "forgot password" --------------------------------------------------- */
body#authentication #login_form .lost_password {
  margin: -2px 0 20px;
  padding: 0;
  text-align: right;
}
body#authentication #login_form .lost_password a {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: #f0486b;
  text-decoration: none;
  border-bottom: 1px solid rgba(240, 72, 107, .28);
  transition: color .18s ease, border-color .18s ease;
}
body#authentication #login_form .lost_password a:hover,
body#authentication #login_form .lost_password a:focus {
  color: #d92f56;
  border-color: #d92f56;
}

/* --- buttons ------------------------------------------------------------- */
body#authentication #center_column .box .submit {
  margin: auto 0 0;
  padding: 16px 0 0;
}
body#authentication #center_column .box .submit .btn,
body#authentication #center_column .box button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 0 20px;
  background: #f0486b;
  border: 1px solid #f0486b;
  border-radius: 9px;
  box-shadow: 0 14px 26px -16px rgba(240, 72, 107, 1);
  font-family: 'Open Sans', 'Source Sans Pro', Arial, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  transition: background .18s ease, border-color .18s ease,
              box-shadow .18s ease, transform .18s ease;
}
body#authentication #center_column .box .submit .btn:hover,
body#authentication #center_column .box .submit .btn:focus,
body#authentication #center_column .box button[type="submit"]:hover,
body#authentication #center_column .box button[type="submit"]:focus {
  background: #e83056;
  border-color: #e83056;
  color: #fff;
  box-shadow: 0 18px 30px -16px rgba(240, 72, 107, 1);
  transform: translateY(-1px);
}
body#authentication #center_column .box .submit .btn:active,
body#authentication #center_column .box button[type="submit"]:active {
  transform: translateY(0);
  box-shadow: 0 10px 20px -16px rgba(240, 72, 107, 1);
}
body#authentication #center_column .box .submit .btn:focus-visible,
body#authentication #center_column .box button[type="submit"]:focus-visible {
  outline: 2px solid rgba(240, 72, 107, .45);
  outline-offset: 3px;
}
/* text-only buttons read cleaner on a card */
body#authentication #center_column .box .submit .btn i.fa {
  display: none;
}
body#authentication #center_column .box .submit .btn span {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

/* --- registration form: label + field on one clean line ------------------- */
body#authentication #center_column #account-creation_form .form-group:has(> .control-label) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
body#authentication #center_column #account-creation_form .form-group > .control-label {
  margin: 0;
  padding-right: 18px;
}
body#authentication #center_column #account-creation_form .form-group > .col-sm-6 {
  flex: 1 1 auto;
  width: auto;
  max-width: none;
}
/* rows whose field is taller than one line: keep the label on the first line */
body#authentication #center_column #account-creation_form .password.form-group,
body#authentication #center_column #account-creation_form .textarea.form-group {
  align-items: flex-start;
}
body#authentication #center_column #account-creation_form .password.form-group > .control-label,
body#authentication #center_column #account-creation_form .textarea.form-group > .control-label {
  padding-top: 14px;
}
body#authentication #center_column #account-creation_form textarea.form-control {
  height: 92px;
  padding: 12px 14px;
  resize: vertical;
}

/* --- helper text --------------------------------------------------------- */
body#authentication #center_column .box p.required,
body#authentication #center_column .box .inline-infos,
body#authentication #center_column .box .help-block {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.55;
  color: #7b8390;
}
body#authentication #center_column .box p.required sup {
  color: #f0486b;
  font-weight: 700;
}
body#authentication #center_column .box .password .inline-infos,
body#authentication #center_column .box .form-group + .inline-infos {
  margin: 6px 0 0;
}
body#authentication #center_column .box .form_info {
  display: inline-block;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #7b8390;
}

/* --- alerts -------------------------------------------------------------- */
body#authentication #center_column .alert {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.55;
}
body#authentication #center_column .alert-danger {
  background: #fdf3f5;
  border: 1px solid #f7ccd5;
  color: #a3243c;
}
body#authentication #center_column .alert-success {
  background: #f2f9f4;
  border: 1px solid #cfe6d8;
  color: #2f7d4f;
}

/* --- small screens ------------------------------------------------------- */
@media (max-width: 767px) {
  body#authentication #center_column .aligned-padding {
    padding: 20px 14px 22px;
    border-radius: 14px;
  }
  body#authentication #center_column .page-heading {
    font-size: 21px;
    margin-bottom: 20px;
  }
  body#authentication #center_column .aligned-padding > .row {
    gap: 18px;
  }
  body#authentication #center_column .box {
    padding: 20px 18px 22px;
    border-radius: 14px;
  }
}