:root{
   
--blue:#062b69;
--purple:#6c38fff0;

/*--blue:#04144c;*/
--blue-2:var(--purple);

--red:#6c38fff0;
--def-font: system-ui;

  }

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, 'Segoe UI', sans-serif;
  background: #eef1f5;
}

/* ===== WRAPPER ===== */
.auth-box {
  max-width: 1100px;
  margin: 50px auto;
  display: flex;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 25px 60px rgba(0,0,0,0.08);
  min-height: 612px;
}

/* ===== LEFT ===== */
.auth-left {
  width: 50%;
  padding: 50px;
}

/* LOGO */
.logo {
  /*font-size: 22px;*/
  /*font-weight: 700;*/
  margin-bottom: 25px;
  /*letter-spacing: 3px;*/
}

/* TITLES */
.title {
  font-size: 28px;
  font-weight: 700;
}

.subtitle {
  font-size: 14px;
  color: #666;
  margin: 10px 0 25px;
}

/* GOOGLE BTN */
.google-btn {
  width: 100%;
  padding: 13px;
  border: 1px solid #ddd;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  margin-bottom: 15px;
}

/* DIVIDER */
.divider {
  text-align: center;
  font-size: 12px;
  color: #aaa;
  margin: 15px 0;
}

/* FIELD WRAPPER */
.field {
  position: relative;
  margin-bottom: 12px;
}

/* INPUT */
.input {
  width: 100%;
  padding: 14px 40px 14px 42px;
  border-radius: 12px;
  border: 1px solid #ddd;
  font-size: 14px;
  transition: all 0.2s ease;
}

.gicon{
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

/* LEFT ICON */
.field i.left {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
}

/* RIGHT ICON (PASSWORD) */
.field i.right {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #888;
}

/* FOCUS STYLE */
.input:focus {
  outline: 0;
  border: 1px solid var(--blue-2);

  box-shadow:
    0 0 0 3px rgba(108 56 255, 0.15),
    0 2px 6px rgba(6 43 105, 0.75);
}

/* BUTTON */
.btn {
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    border: none;
    background: var(--purple);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    margin-top: 10px;
}

a.btn{
  text-decoration: none;
  display: block;
  margin: auto;
}

.btn[disabled]{
    background-color: #e9e9e9;
    color: #767171;
}

.mx-150{
  max-width: 150px;
}

.mx-250{
  max-width: 250px;
}


/* LINKS */
.links {
  margin-top: 15px;
  font-size: 13px;
}

.links span {
    color: #000000;
    cursor: pointer;
    font-weight: 600;
    /*text-decoration: underline;*/
}

.links a{
    text-decoration: none;
    color: #212121;
    font-weight: 500;
}

.links a:hover{
  text-decoration: underline;
}

/* ===== RIGHT IMAGE ===== */
.auth-right {
  width: 50%;
  position: relative;
}

.auth-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.auth-right::after {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(
    to top,
    rgba(0,0,0,0.7) 0%,
    rgba(0,0,0,0.4) 30%,
    rgba(0,0,0,0.1) 60%,
    transparent 80%
  );

  z-index: 1; /* BELOW text */
}

/* OVERLAY */
.overlay {
  position: absolute;
  bottom: 30px;
  left: 30px;
  right: 30px;
  color: #fff;
  z-index: 2;
}

.overlay h3 {
  font-size: 22px;
  margin-bottom: 10px;
}

.overlay p {
  font-size: 16px;
  opacity: 0.9;
}

/* FORMS */
.form {
  display: none;
}

.form.active {
  display: block;
}

.mca-gradient {
    background: linear-gradient(
  135deg,
  var(--blue) 0%,
  var(--blue-2) 68%
);
    color: white;
    /*font-weight: 700;*/
}

.ajax_msg{
    color: red;
    font-weight: 500;
}

.ajax_msg.green{
  color: #00c500;
}


/* RESPONSIVE */
@media(max-width:900px){
  .auth-box {
    flex-direction: column;
    margin: 20px;
  }

  .auth-right {
    display: none;
  }

  .auth-left {
    width: 100%;
    padding: 30px;
  }
}




/*========= PASS VALIDATION ==========*/
.pass-rules {
  font-size: 14px;
  margin-top: 10px;
  text-align: left;
  display: none;
}

.rule {
  margin: 4px 0;
  color: #b2b0b0; /* red */
  font-weight: 500;
}

.rule.valid {
  color: #28a745; /* green */
}

.rule.valid::before {
  content: "✔ ";
}

.rule.invalid::before {
  content: "✖ ";
}