
/* ==========================================================
   INCEPTION AUTH V1.8
   CLEAN 2-COLUMN REGISTRATION
   ========================================================== */


/* ==========================================================
   REGISTER CARD
   ========================================================== */

body.inc-register-v18 .inc-auth-card {
  width:
    min(760px, calc(50vw - 36px))
    !important;

  max-width:
    none
    !important;

  max-height:
    calc(100dvh - 28px)
    !important;

  padding:
    28px 30px 25px
    !important;

  overflow-y:
    auto
    !important;

  overflow-x:
    visible
    !important;

  border:
    1px solid rgba(69, 88, 151, .14)
    !important;

  border-radius:
    22px
    !important;

  background:
    linear-gradient(
      155deg,
      #ffffff 0%,
      #f8faff 62%,
      #fff8f6 100%
    )
    !important;

  box-shadow:
    0 22px 54px rgba(33, 40, 73, .16)
    !important;
}


/* ==========================================================
   REGISTER HEADER
   ========================================================== */

body.inc-register-v18 .inc-register-title {
  margin:
    0 0 20px
    !important;

  text-align:
    center;
}


body.inc-register-v18 .inc-register-title::before {
  display:
    none
    !important;
}


body.inc-register-v18 .inc-v18-page-badge {
  width:
    fit-content;

  margin:
    0 auto 8px;

  padding:
    6px 10px;

  display:
    block;

  border:
    1px solid #d6e0f5;

  border-radius:
    999px;

  background:
    #edf3ff;

  color:
    #526db8;

  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    .11em;
}


body.inc-register-v18 .inc-register-title h1 {
  margin:
    0
    !important;

  color:
    #2e3f6d
    !important;

  font-size:
    34px
    !important;

  font-weight:
    650
    !important;

  letter-spacing:
    -.035em
    !important;
}


/* ==========================================================
   TWO COLUMN FORM
   ========================================================== */

body.inc-register-v18 .inc-register-form-v18 {
  display:
    grid
    !important;

  grid-template-columns:
    repeat(2, minmax(0, 1fr))
    !important;

  gap:
    15px 16px
    !important;
}


/* ==========================================================
   FIELD COLORS
   ========================================================== */

body.inc-register-v18 .inc-v18-field {
  --field-bg:
    #edf3ff;

  --field-border:
    #cad8f3;

  --field-accent:
    #5575cc;

  --field-label:
    #4963a3;

  min-width:
    0;

  margin:
    0
    !important;

  display:
    grid
    !important;

  gap:
    7px;

  position:
    relative;
}


body.inc-register-v18 .inc-v18-tone-blue {
  --field-bg:
    #edf3ff;

  --field-border:
    #cad8f3;

  --field-accent:
    #5575cc;

  --field-label:
    #4963a3;
}


body.inc-register-v18 .inc-v18-tone-coral {
  --field-bg:
    #fff1ef;

  --field-border:
    #efcec9;

  --field-accent:
    #dd756c;

  --field-label:
    #ae6059;
}


body.inc-register-v18 .inc-v18-tone-purple {
  --field-bg:
    #f2f2ff;

  --field-border:
    #d5d5ef;

  --field-accent:
    #716fbd;

  --field-label:
    #5e5b99;
}


/* ==========================================================
   LABEL
   ========================================================== */

body.inc-register-v18 .inc-v18-label {
  display:
    flex
    !important;

  align-items:
    center;

  gap:
    7px;

  color:
    var(--field-label)
    !important;

  font-size:
    12px
    !important;

  font-weight:
    600
    !important;

  line-height:
    1.3;
}


body.inc-register-v18 .inc-v18-label::before {
  content:
    "";

  width:
    6px;

  height:
    6px;

  flex:
    0 0 6px;

  border-radius:
    50%;

  background:
    var(--field-accent);
}


/* ==========================================================
   INPUT
   ========================================================== */

body.inc-register-v18
.inc-v18-field > input,

body.inc-register-v18
.inc-v18-field
.inc-search-select > input,

body.inc-register-v18
.inc-v18-field
.inc-password-shell > input {
  width:
    100%
    !important;

  height:
    50px
    !important;

  min-height:
    50px
    !important;

  padding:
    0 15px
    !important;

  border:
    1px solid var(--field-border)
    !important;

  border-radius:
    11px
    !important;

  outline:
    none
    !important;

  background:
    var(--field-bg)
    !important;

  color:
    #33415d
    !important;

  font-size:
    14px
    !important;

  font-weight:
    500
    !important;

  box-shadow:
    none
    !important;

  transition:
    .15s ease
    !important;
}


body.inc-register-v18
.inc-v18-field
.inc-search-select > input {
  padding-right:
    45px
    !important;
}


body.inc-register-v18
.inc-v18-field
.inc-password-shell > input {
  padding-right:
    47px
    !important;
}


body.inc-register-v18
.inc-v18-field > input:focus,

body.inc-register-v18
.inc-v18-field
.inc-search-select > input:focus,

body.inc-register-v18
.inc-v18-field
.inc-password-shell > input:focus {
  border-color:
    var(--field-accent)
    !important;

  background:
    #ffffff
    !important;

  box-shadow:
    0 0 0 3px rgba(78, 105, 190, .10)
    !important;
}


/* ==========================================================
   PLACEHOLDER
   ========================================================== */

body.inc-register-v18 input::placeholder {
  color:
    #919bae
    !important;

  font-size:
    13px
    !important;

  font-weight:
    450
    !important;

  opacity:
    1;
}


/* ==========================================================
   DISABLED SELECT
   ========================================================== */

body.inc-register-v18
.inc-search-select.is-disabled {
  opacity:
    1
    !important;
}


body.inc-register-v18
.inc-search-select.is-disabled > input {
  border-color:
    #dfe4ed
    !important;

  background:
    #f5f6f8
    !important;

  color:
    #9da5b3
    !important;
}


/* ==========================================================
   HELPERS
   ========================================================== */

body.inc-register-v18 .inc-v18-helper {
  margin:
    -1px 2px 0;

  display:
    flex;

  align-items:
    center;

  gap:
    5px;

  color:
    #758198;

  font-size:
    10px;

  font-weight:
    500;

  line-height:
    1.4;
}


body.inc-register-v18 .inc-v18-helper::before {
  content:
    "";

  width:
    5px;

  height:
    5px;

  flex:
    0 0 5px;

  border-radius:
    50%;

  background:
    var(--field-accent);
}


/* ==========================================================
   SEARCH
   ========================================================== */

body.inc-register-v18 .inc-search-select {
  position:
    relative;

  z-index:
    5;
}


body.inc-register-v18 .inc-search-select:focus-within {
  z-index:
    80;
}


body.inc-register-v18 .inc-search-toggle {
  right:
    7px
    !important;

  width:
    35px
    !important;

  height:
    35px
    !important;

  background:
    rgba(255, 255, 255, .55)
    !important;

  color:
    var(--field-accent)
    !important;
}


body.inc-register-v18 .inc-search-menu {
  max-height:
    230px;

  padding:
    6px
    !important;

  border:
    1px solid #d1daed
    !important;

  border-radius:
    11px
    !important;

  background:
    #ffffff
    !important;

  box-shadow:
    0 15px 34px rgba(36, 49, 84, .15)
    !important;
}


body.inc-register-v18 .inc-search-option {
  min-height:
    40px
    !important;

  padding:
    9px 11px
    !important;

  border-radius:
    8px
    !important;

  color:
    #43516c
    !important;

  font-size:
    11px
    !important;

  font-weight:
    500
    !important;
}


body.inc-register-v18 .inc-search-option:hover {
  background:
    linear-gradient(
      90deg,
      #edf3ff,
      #fff2f0
    )
    !important;

  color:
    #4563b2
    !important;
}


/* ==========================================================
   SCHOOL FULL ROW
   ========================================================== */

body.inc-register-v18 .inc-v18-school-row {
  grid-column:
    1 / -1;

  padding:
    14px;

  display:
    grid;

  gap:
    10px;

  border:
    1px solid #dcdcf0;

  border-radius:
    13px;

  background:
    linear-gradient(
      105deg,
      #f4f5ff,
      #fff7f5
    );
}


/* ==========================================================
   MANUAL SCHOOL
   ========================================================== */

body.inc-register-v18 .inc-v18-manual-school {
  min-height:
    54px;

  padding:
    9px 12px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    15px;

  border:
    1px solid #efd0ca;

  border-left:
    4px solid #df756d;

  border-radius:
    10px;

  background:
    #fff0ee;

  text-align:
    left;

  cursor:
    pointer;
}


body.inc-register-v18
.inc-v18-manual-school:hover {
  background:
    #ffe9e6;
}


body.inc-register-v18
.inc-v18-manual-school > span {
  min-width:
    0;

  display:
    grid;

  gap:
    3px;
}


body.inc-register-v18
.inc-v18-manual-school strong {
  color:
    #985951;

  font-size:
    11px;

  font-weight:
    600;
}


body.inc-register-v18
.inc-v18-manual-school small {
  color:
    #897570;

  font-size:
    10px;
}


body.inc-register-v18
.inc-v18-manual-school b {
  flex:
    0 0 auto;

  padding:
    8px 11px;

  border-radius:
    8px;

  background:
    #df756d;

  color:
    #ffffff;

  font-size:
    10px;

  font-weight:
    650;

  white-space:
    nowrap;
}


body.inc-register-v18
.inc-v18-manual-box {
  display:
    grid;

  gap:
    9px;
}


body.inc-register-v18
.inc-v18-back-school {
  width:
    fit-content;

  padding:
    0;

  border:
    0;

  background:
    transparent;

  color:
    #6367aa;

  font-size:
    10px;

  font-weight:
    600;

  cursor:
    pointer;
}


/* ==========================================================
   PASSWORD
   ========================================================== */

body.inc-register-v18 .inc-password-shell {
  position:
    relative;
}


body.inc-register-v18 .inc-password-eye {
  width:
    35px
    !important;

  height:
    35px
    !important;

  right:
    7px
    !important;

  color:
    var(--field-accent)
    !important;

  background:
    rgba(255, 255, 255, .55)
    !important;
}


body.inc-register-v18
.inc-password-match {
  width:
    fit-content;

  margin-top:
    -1px;

  padding:
    4px 7px;

  border-radius:
    6px;

  font-size:
    9px;

  font-weight:
    600;
}


body.inc-register-v18
.inc-password-match.is-ok {
  background:
    #e9f7ed;

  color:
    #397c53;
}


body.inc-register-v18
.inc-password-match.is-error {
  background:
    #fff0ee;

  color:
    #b6554f;
}


/* ==========================================================
   SUBMIT
   ========================================================== */

body.inc-register-v18
.inc-v18-submit-row {
  grid-column:
    1 / -1;

  margin-top:
    2px;

  display:
    grid;

  gap:
    8px;
}


body.inc-register-v18
.inc-register-submit {
  min-height:
    50px
    !important;

  border-radius:
    11px
    !important;

  background:
    linear-gradient(
      90deg,
      #4d6fd0,
      #777ac6 49%,
      #d86c67
    )
    !important;

  color:
    #ffffff
    !important;

  font-size:
    12px
    !important;

  font-weight:
    650
    !important;
}


body.inc-register-v18
.inc-register-footer {
  margin:
    0
    !important;

  color:
    #7c879b
    !important;

  font-size:
    10px
    !important;

  text-align:
    center;
}


/* ==========================================================
   OTP
   ========================================================== */

body.inc-register-v18
.inc-v18-otp-copy {
  max-width:
    400px;

  margin:
    9px auto 0;

  color:
    #727f96;

  font-size:
    11px;

  line-height:
    1.5;
}


body.inc-register-v18
.inc-v18-otp-input {
  height:
    61px
    !important;

  font-size:
    26px
    !important;

  font-weight:
    700
    !important;

  letter-spacing:
    .3em
    !important;

  text-align:
    center
    !important;
}


/* ==========================================================
   LOGIN COLOR + SIZE
   ========================================================== */

body.inc-auth-login .inc-auth-card {
  width:
    min(440px, calc(50vw - 52px))
    !important;

  padding:
    36px 35px 31px
    !important;

  border:
    1px solid rgba(65, 86, 150, .14)
    !important;

  border-radius:
    22px
    !important;

  background:
    linear-gradient(
      155deg,
      #ffffff,
      #f8faff 63%,
      #fff7f5
    )
    !important;

  box-shadow:
    0 22px 52px rgba(33, 40, 73, .16)
    !important;
}


body.inc-auth-login
.inc-auth-card p:empty {
  display:
    none
    !important;
}


body.inc-auth-login
.inc-auth-card h1,
body.inc-auth-login
.inc-auth-card h2,
body.inc-auth-login
.inc-auth-card h3 {
  margin-bottom:
    27px
    !important;

  color:
    #2e3f6d
    !important;

  font-size:
    34px
    !important;

  font-weight:
    650
    !important;
}


body.inc-auth-login
.inc-auth-card label {
  color:
    #4b63a0
    !important;

  font-size:
    12px
    !important;

  font-weight:
    600
    !important;
}


/* Email blue */

body.inc-auth-login
.inc-auth-card input[type="email"] {
  height:
    51px
    !important;

  border:
    1px solid #cad8f3
    !important;

  border-radius:
    11px
    !important;

  background:
    #edf3ff
    !important;

  color:
    #33415d
    !important;

  font-size:
    14px
    !important;
}


/* Password coral */

body.inc-auth-login
.inc-auth-card input[type="password"] {
  height:
    51px
    !important;

  border:
    1px solid #efcec9
    !important;

  border-radius:
    11px
    !important;

  background:
    #fff1ef
    !important;

  color:
    #33415d
    !important;

  font-size:
    14px
    !important;
}


body.inc-auth-login
.inc-auth-card input:focus {
  border-color:
    #607dce
    !important;

  background:
    #ffffff
    !important;

  box-shadow:
    0 0 0 3px rgba(80, 108, 194, .10)
    !important;
}


body.inc-auth-login
.inc-auth-forgot-v14 {
  color:
    #cf6a63
    !important;

  font-size:
    10px
    !important;

  font-weight:
    600
    !important;
}


body.inc-auth-login
.inc-auth-card button[type="submit"] {
  min-height:
    51px
    !important;

  background:
    linear-gradient(
      90deg,
      #4d6fd0,
      #777ac6 49%,
      #d86c67
    )
    !important;

  font-size:
    12px
    !important;

  font-weight:
    650
    !important;
}


/* ==========================================================
   MEDIUM WIDTH
   ========================================================== */

@media (max-width: 1180px) {

  body.inc-register-v18
  .inc-auth-card {
    width:
      min(520px, calc(50vw - 24px))
      !important;
  }


  body.inc-register-v18
  .inc-register-form-v18 {
    grid-template-columns:
      1fr
      !important;
  }


  body.inc-register-v18
  .inc-v18-school-row,
  body.inc-register-v18
  .inc-v18-submit-row {
    grid-column:
      auto;
  }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 720px) {

  body.inc-register-v18
  .inc-auth-card {
    width:
      calc(100vw - 24px)
      !important;

    padding:
      25px 20px 23px
      !important;
  }


  body.inc-register-v18
  .inc-register-title h1 {
    font-size:
      29px
      !important;
  }


  body.inc-register-v18
  .inc-register-form-v18 {
    grid-template-columns:
      1fr
      !important;

    gap:
      13px
      !important;
  }


  body.inc-auth-login
  .inc-auth-card {
    width:
      calc(100vw - 28px)
      !important;
  }

}

