:root{
  --auth-primary: var(--primary, #2563eb);
  --auth-primary-2: var(--primary-600, #1d4ed8);
  --auth-navy: #060b1a;
}

/* background wrapper (bg color) */
.right-col{
  background:
    radial-gradient(1000px 520px at 75% 10%, color-mix(in srgb, var(--auth-primary) 35%, transparent), transparent 60%),
    radial-gradient(900px 520px at 20% 85%, color-mix(in srgb, var(--auth-primary-2) 28%, transparent), transparent 62%),
    linear-gradient(135deg, var(--auth-navy) 0%, color-mix(in srgb, var(--auth-primary) 18%, var(--auth-navy)) 55%, var(--auth-navy) 100%);

  min-height: 100vh;
}

/* login card */
.col-md-4 > div.tw-bg-white{
  /* glass/transparent */
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.35) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* texts in the card */
.col-md-4 > div.tw-bg-white h1{
  color: #fff !important;
}
.col-md-4 > div.tw-bg-white h2{
  color: rgba(255,255,255,.72) !important;
}
.col-md-4 > div.tw-bg-white .tw-text-black{
  color: #fff !important;
}
.col-md-4 > div.tw-bg-white .tw-text-gray-500{
  color: rgba(255,255,255,.72) !important;
}

/* inputs */
.col-md-4 > div.tw-bg-white input{
  border-color: rgba(255,255,255,.16) !important;
  color: #fff !important;
}
.col-md-4 > div.tw-bg-white input[type="text"]و
.col-md-4 > div.tw-bg-white input[type="password"]{
  background: rgba(255,255,255,.10) !important;
}

/* focused fields */
.col-md-4 > div.tw-bg-white input:focus{
  border-color: rgba(99,102,241,.65) !important;
  box-shadow: 0 0 0 4px rgba(99,102,241,.20) !important;
}

/* Checkbox label */
.col-md-4 > div.tw-bg-white .tw-dw-checkbox + span{
  color: rgba(255,255,255,.92) !important;
}

/* forgot password link */
.col-md-4 > div.tw-bg-white a:hover{
  color: var(--auth-primary-2) !important;
}

/* autofill background (fix white color) */
.col-md-4 > div.tw-bg-white input:-webkit-autofill,
.col-md-4 > div.tw-bg-white input:-webkit-autofill:hover,
.col-md-4 > div.tw-bg-white input:-webkit-autofill:focus,
.col-md-4 > div.tw-bg-white input:-webkit-autofill:active{
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff !important;
  -webkit-box-shadow: 0 0 0px 1000px rgba(255,255,255,.10) inset !important;
  box-shadow: 0 0 0px 1000px rgba(255,255,255,.10) inset !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  transition: background-color 9999s ease-in-out 0s;
}

/* eye icon */
.col-md-4 > div.tw-bg-white #show_hide_icon.show_hide_icon{
  color: rgba(255,255,255,.90) !important;
}
.col-md-4 > div.tw-bg-white #show_hide_icon svg{
  stroke: currentColor !important;
}

/* error msg */
.col-md-4 > div.tw-bg-white .alert-danger{
  background: rgba(239,68,68,.10) !important;
  border-color: rgba(239,68,68,.18) !important;
  color: rgba(255,220,220,.95) !important;
}

/* glass bg for the logo */
.logo-glass{
  width: 64px;
  height: 64px;
  margin: 0 auto 24px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;

  /* glass effect */
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}

.logo-glass img{
  width: 50px;
  height: 50px;
  object-fit: contain;
}

/* new lang button */
.lang-toggle{
  direction: ltr;
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 8px 12px;
  border-radius: 999px;

  color: rgba(255,255,255,.92);
  font-weight: 600;
  font-size: 14px;

  background: rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  transition: transform .15s ease, background .15s ease;
}

.lang-toggle:hover{
  background: rgba(255,255,255,.14);
  transform: translateY(-1px);
  color: #fff;
}

.lang-toggle__icon{
  width: 18px;
  height: 18px;
  display: inline-flex;
  opacity: .9;
}