/* public/css/login.css */



/* =========================
   GLOBAL buttons ayarlari
   ========================= */

.login-header button{
  width:40px;
  height: 40px;
  padding:5px;
}

button,
a,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
  padding:0;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible) {
  outline: none;
}

button{
  background:var(--bg-menubutton);
  color:var(--text-main);
}

button:active {
  transform: none;
  background:var(--bg-button-active) !important;
  color:var(--text-button-active) !important;
}

.button-has-set-icon {
  border: 0 !important;
  border-radius: 999px;
  background:transparent;
}

.button-has-set-icon:hover{
  background: var(--bg-button-hover);
}




/* =========================
   BASE
   ========================= */


::-webkit-scrollbar {
  width: 0 !important;
  background: transparent;
}

input,
button,
textarea,
select {
  font-family: inherit;
}

input:focus {
  border-color: var(--border-strong);
}



/* =========================
   PAGE LAYOUT
   ========================= */

#loginCont {
  width: 100%;
  height: var(--app1-viewport-height);
  min-height: var(--app1-viewport-height);

  position: fixed;
  inset: 0;

  overflow-x: hidden;
  overflow-y: auto;

  padding-right: var(--app1-device-safe-right);
  padding-bottom: var(--app1-device-safe-bottom);
  padding-left: var(--app1-device-safe-left);

  display: flex;
  align-items: flex-start;
  justify-content: flex-start;

      background: radial-gradient(circle at 20% 0%, rgba(120, 198, 213, 0.12), transparent 32rem), linear-gradient(180deg, var(--bg-header) 0%, var(--bg-main) 42%, var(--bg-surface) 100%);
}

.login-header {
  width: 100%;

  height:
    calc(
      80px +
      var(--app1-device-safe-top)
    );

  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;

  padding:
    var(--app1-device-safe-top)
    calc(var(--app1-device-safe-right) + 10px)
    0
    calc(var(--app1-device-safe-left) + 10px);

  background: var(--bg-header);
      box-shadow: var(--shadow-button);

  display: flex;
  align-items: center;
  justify-content: space-between;
  background:var(--bg-header);
  box-shadow: var(--shadow-button);
}

#coverLogin {
  width: 400px;
  min-height:550px;
  

  margin:
    calc(
      125px +
      var(--app1-device-safe-top)
    )
    auto
    var(--app1-device-safe-bottom);
  position: relative;
  font-weight: 300;
}

#coverSwitch {
  width: 100%;
  min-height: 36px;
  
  margin-top:10px;
}

/* =========================
   HEADER BUTTONS / LOGO
   ========================= */



.logo-wrap img {
  width: 150px;
  display: block;
  filter: var(--png-bg);
}

/* =========================
   FORM
   ========================= */

#auth-form {
  width: 100%;
  margin: auto;

  transition:
    transform 0.28s ease,
    opacity 0.28s ease;

  transform-origin: center;

  padding: 23px;
   
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-heavy);
}

#auth-form.form-close {
  transform: scaleX(0);
  opacity: 0.2;
}

.form-row {
  margin-bottom: 10px;
}

.inputLabels {
  color: var(--text-label);
  font-size: 14px;
  font-weight: 300;
}

.logInputs {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;

  display: block;
  box-sizing: border-box;

  border: 1px solid var(--border-soft);
  border-radius: 1rem;

  background: var(--bg-forminput) !important;
  color: var(--text-main) !important;

  font-size: 20px;
  font-weight: 300;

  outline: none;
  caret-color: var(--text-main);
}

.logInputs:focus {
  background: var(--bg-forminput) !important;
  color: var(--text-main) !important;
  border-color: var(--border-strong);
}

.logInputs::placeholder {
  color: var(--text-muted, var(--text-label));
  opacity: 0.75;
}

.input-group {
  position: relative;
  width: 100%;
}

.input-group .logInputs {
  padding-right: 48px;
}

/* =========================
   PASSWORD EYE ICON
   ========================= */

.eyeIcon {
  position: absolute;
  right: 10px;
  top: 13px;

  width: 22px;
  height: 22px;

  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
}

.eyeIcon svg {
  width: 100%;
  height: 100%;
}

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

.submitcover {
  width: 100%;

  display: flex;
  flex-direction: column;
}

.auth-submit-btn {
  width: 100%;
  padding: 16px 20px;
  margin: 25px auto 0;

  border: none;
  border-radius:1rem;

  background: var(--bg-button);
  color: var(--text-main);

  cursor: pointer;
  font-size: 14px;
}



.auth-submit-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* =========================
   MESSAGE
   ========================= */

#auth-message {
  width: 100%;
  max-width: 1200px;
  min-height: 22px;

  margin: 35px auto 0;

  color: var(--text-main);
  text-align: center;
  font-weight: 300;
}

/* =========================
   NAV SWITCH
   ========================= */

#switchLoginDiv {
  width: 100%;
  position: relative;

  margin-bottom: 40px;

  text-align: right;
  font-size: 14px;
}

.navItem {
  cursor: pointer;
  padding: 0 6px 8px;
  transition: color 0.2s ease;
  color:var(--text-muted);
  font-weight: 600
}



.navItem.active,
.navItem.active:hover {
  color: var(--text-main) !important;
  
}

.divider {
  color: #5d5e5f;
}

#navUnderline {
  position: absolute;
  bottom: -8px;
  left: 0;

  width: 0;
  height: 1px;

  background: var(--text-main);
}

/* =========================
   MINI BACK / LOCKED FLOW
   ========================= */

.mini-back {
  padding: 0;

  border: none;
  background: transparent;

  cursor: pointer;

  display: block;
}



.hidden {
  display: none !important;
}

/* =========================
   ACTION OVERLAY
   ========================= */

#actionOverlay {
  width: 100%;
  height: var(--app1-viewport-height);

  display: none;
  position: fixed;
  inset: 0;

  padding:
    var(--app1-device-safe-top)
    var(--app1-device-safe-right)
    var(--app1-device-safe-bottom)
    var(--app1-device-safe-left);
  z-index: 9999;

  background: var(--bg-main);
}

#actionMessage {
  width: 400px;
  padding: 10px;
  margin: 200px auto;

  text-align: center;
  font-weight: 300;
}

.overlay-loader {
  width: 34px;
  height: 34px;

  margin: 0 auto 18px;

  border: 3px solid var(--bg-main-transparent);
  border-top-color: var(--text-main);
  border-radius: 50%;

  animation: overlaySpin 0.8s linear infinite;
}

@keyframes overlaySpin {
  to {
    transform: rotate(360deg);
  }
}

/* =========================
   OTP ACTION BUTTONS
   ========================= */

#otpbuttonwrap {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.cancelAuthBtn,
.resendOtpBtn {
  padding: 8px 22px;

  border: none;
  border-radius: 4px;

  cursor: pointer;
  font-weight: 300;

  color: var(--text-main);
  overflow: unset;

  transition:
    transform 0.16s ease,
    opacity 0.16s ease;
}

.cancelAuthBtn {
  background: var(--bg-danger);
}

.resendOtpBtn {
  background: var(--bg-success);
}



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

.otpBoxWrap {
  display: flex;
  gap: 8px;
  margin: 8px 0;
}

.otpBox {
  width: 100%;
  height: 48px;

  border: 1px solid var(--border-soft);
  border-radius: 4px;

  background: var(--bg-forminput) !important;
  color: var(--text-main) !important;

  text-align: center;
  font-size: 22px;

  outline: none;
  box-sizing: border-box;
  caret-color: var(--text-main);
}

.otpBox:focus {
  border-color: var(--border-strong);
}

/* =========================
   AUTOFILL FIX
   ========================= */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--text-main) !important;
  caret-color: var(--text-main) !important;

  font-family: var(--font-main) !important;
  font-size: 18px !important;

  box-shadow: 0 0 0 1000px var(--bg-forminput) inset !important;
  -webkit-box-shadow: 0 0 0 1000px var(--bg-forminput) inset !important;

  transition: background-color 9999s ease-in-out 0s;
}

input:-webkit-autofill::first-line {
  font-family: var(--font-main) !important;
  font-size: 18px !important;
}

/* =========================
   SOCIAL AUTH
   ========================= */

#googleLoginWrap {
  display: none !important;
  justify-content: center;
}

.nsm7Bb-HzV7m-LgbsSe {
  border: none !important;
  outline: none !important;
}

.social-login-container {
  display: flex;
  justify-content: center;
  gap: 14px;
 
  margin-top: 20px;
}

.social-icon-btn {
  width: 42px;
  height: 42px;

  border: 1px solid var(--border-soft);
  border-radius: 50%;

  background: var(--bg-button);
  color: var(--text-main);

  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  transition:
    transform 0.16s ease,
    opacity 0.16s ease;
}

.social-icon-btn img {
  width: 22px;
  height: 22px;
}








/* =========================
   RESPONSIVE
   ========================= */

@media screen and (max-width: 750px) {
  #coverLogin {
    width: 320px;
  }

  .logo-wrap img {
    width: 130px;
  }

  #actionMessage {
    width: 280px;
  }

  .nsm7Bb-HzV7m-LgbsSe {
    width: 280px !important;
  }
}

/* =========================
   CHROME AUTOFILL HARD FIX
   ========================= */

#loginCont input.logInputs,
#loginCont input.otpBox {
  background: var(--bg-forminput) !important;
  background-color: var(--bg-forminput) !important;
  color: var(--text-main) !important;
  -webkit-text-fill-color: var(--text-main) !important;
  caret-color: var(--text-main) !important;
  box-shadow: 0 0 0 1000px var(--bg-forminput) inset !important;
  -webkit-box-shadow: 0 0 0 1000px var(--bg-forminput) inset !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

#loginCont input.logInputs:focus,
#loginCont input.otpBox:focus {
  background: var(--bg-forminput) !important;
  background-color: var(--bg-forminput) !important;
  color: var(--text-main) !important;
  -webkit-text-fill-color: var(--text-main) !important;
  box-shadow: 0 0 0 1000px var(--bg-forminput) inset !important;
  -webkit-box-shadow: 0 0 0 1000px var(--bg-forminput) inset !important;
}

#loginCont input.logInputs:-webkit-autofill,
#loginCont input.logInputs:-webkit-autofill:hover,
#loginCont input.logInputs:-webkit-autofill:focus,
#loginCont input.logInputs:-webkit-autofill:active,
#loginCont input.otpBox:-webkit-autofill,
#loginCont input.otpBox:-webkit-autofill:hover,
#loginCont input.otpBox:-webkit-autofill:focus,
#loginCont input.otpBox:-webkit-autofill:active {
  -webkit-text-fill-color: var(--text-main) !important;
  caret-color: var(--text-main) !important;

  background: var(--bg-forminput) !important;
  background-color: var(--bg-forminput) !important;

  box-shadow: 0 0 0 1000px var(--bg-forminput) inset !important;
  -webkit-box-shadow: 0 0 0 1000px var(--bg-forminput) inset !important;

  transition: background-color 999999s ease-in-out 0s !important;
}


#appleLoginBtn{
  display:none !important;
}

/* =========================
   LOGIN + SITE FOOTER LAYOUT
   ========================= */

#loginCont {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;

  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
}

#coverLogin {
  width:
    min(
      400px,
      calc(
        100% -
        32px -
        var(--app1-device-safe-right) -
        var(--app1-device-safe-left)
      )
    );

  flex: 0 0 auto;

  margin:
    calc(
      125px +
      var(--app1-device-safe-top)
    )
    auto
    72px;
}

#siteFooterRoot {
  width: 100%;

  flex: 0 0 auto;

  margin-top: auto;

 background:var(--bg-header);
 

}

/* =========================
   LOGIN FOOTER RESPONSIVE
   ========================= */

@media screen and (max-width: 750px) {
  #coverLogin {
    width:
      min(
        320px,
        calc(
          100% -
          32px -
          var(--app1-device-safe-right) -
          var(--app1-device-safe-left)
        )
      );

    margin-bottom: 56px;
  }
}

@media screen and (max-width: 380px) {
  #coverLogin {
    width:
      calc(
        100% -
        24px -
        var(--app1-device-safe-right) -
        var(--app1-device-safe-left)
      );

    margin-bottom: 48px;
  }
}