/* =========================================================
   CK PAY - AUTH PAGES LIGHTWEIGHT CENTER CARD CSS
   Used by: Login + Forgot Password
   ========================================================= */

:root {
  --ck-blue: #0969ff;
  --ck-cyan: #23c7df;
  --ck-green: #19a957;
  --ck-dark: #071a3d;
  --ck-text: #0b1f44;
  --ck-muted: #6f7f99;
  --ck-border: #d7e6ff;
  --ck-field: #eef5ff;
  --ck-bg: #ffffff;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  background: #ffffff !important;
  font-family: Inter, Arial, sans-serif !important;
}

body.container-width {
  width: 100% !important;
  max-width: none !important;
  min-width: 100% !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  color: var(--ck-text) !important;
  background: #ffffff !important;

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

body.container-width::before,
body.container-width::after {
  display: none !important;
}

/* =========================================================
   Layout
   ========================================================= */

.wrap {
  position: relative;
  z-index: 2;
  width: 100% !important;
  max-width: none !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 16px !important;

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

  overflow: visible !important;
  background: transparent !important;
}

.tf-container {
  width: 100% !important;
  max-width: 420px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}

/* =========================================================
   Main Rounded Login Card
   ========================================================= */

.from-login {
  position: relative;
  width: 100% !important;
  max-width: 420px !important;
  margin: 0 auto !important;

  padding: 24px 20px 22px !important;

  background: #ffffff !important;
  border: 1px solid #dfe9ff !important;
  border-radius: 30px !important;

  box-shadow:
    0 15px 40px rgba(7, 26, 61, 0.08),
    0 2px 10px rgba(7, 26, 61, 0.04) !important;

  overflow: visible !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.from-login::before {
  display: none !important;
}

.from-login > * {
  position: relative;
  z-index: 2;
}

/* =========================================================
   Logo
   ========================================================= */

.from-login > div:first-of-type {
  text-align: center !important;
  margin-bottom: 14px !important;
}

.from-login > div:first-of-type img {
  width: 106px !important;
  height: auto !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* =========================================================
   Title
   ========================================================= */

.top-from {
  text-align: center !important;
  margin-top: 0 !important;
  margin-bottom: 18px !important;
}

.top-from .title {
  margin-bottom: 7px !important;
  color: var(--ck-dark) !important;
  font-family: Inter, Arial, sans-serif !important;
  font-size: 21px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.3px !important;
}

.top-from .sub-title {
  max-width: 270px !important;
  margin: 0 auto !important;
  color: var(--ck-muted) !important;
  font-family: Inter, Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}

/* =========================================================
   Fields
   ========================================================= */

.middle-from {
  width: 100% !important;
  margin-top: 0 !important;
  overflow: visible !important;
}

.tf-field,
fieldset.tf-field,
fieldset.icon-absolute {
  position: relative !important;
  width: 100% !important;
  height: 46px !important;
  min-height: 46px !important;
  border-radius: 14px !important;
  overflow: visible !important;
  border: 1px solid var(--ck-border) !important;
  background: var(--ck-field) !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.tf-field:focus-within,
fieldset.tf-field:focus-within,
fieldset.icon-absolute:focus-within {
  border-color: rgba(9, 105, 255, 0.65) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(9, 105, 255, 0.08) !important;
}

.tf-field input,
fieldset.icon-absolute input {
  width: 100% !important;
  height: 44px !important;
  line-height: 44px !important;
  color: var(--ck-text) !important;
  font-family: Inter, Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

.tf-field input::placeholder,
fieldset.icon-absolute input::placeholder {
  color: #96a3b8 !important;
  font-weight: 500 !important;
}

#mobileInput,
#password,
#new-password,
#confirmed-password,
#blazeAccountId {
  height: 46px !important;
  min-height: 46px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font-size: 15px !important;
}

.box-auth-pass {
  margin-top: 9px !important;
}

/* =========================================================
   intl-tel-input
   ========================================================= */

.iti {
  width: 100% !important;
  display: block !important;
  position: relative !important;
  overflow: visible !important;
  z-index: 30 !important;
}

.iti__tel-input,
.iti input[type="tel"],
.iti input[type="text"] {
  width: 100% !important;
}

.iti__selected-country,
.iti__selected-country-container,
.iti__flag-container {
  height: 44px !important;
  z-index: 3 !important;
}

.iti__dropdown-content {
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border: 1px solid var(--ck-border) !important;
  box-shadow: 0 12px 28px rgba(7, 26, 61, 0.10) !important;
}

.iti__search-input {
  width: 100% !important;
  height: 46px !important;
  box-sizing: border-box !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  border: 1px solid var(--ck-border) !important;
  outline: none !important;
  font-size: 14px !important;
}

.iti__country-list {
  width: 100% !important;
  max-height: 240px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: #ffffff !important;
}

.iti__country {
  min-height: 44px !important;
  padding: 9px 14px !important;
  font-size: 14px !important;
  white-space: normal !important;
  transition: background-color 0.18s ease;
}

.iti__country:hover,
.iti__country.iti__highlight {
  background: rgba(9, 105, 255, 0.08) !important;
}

.iti--container {
  position: fixed !important;
  right: auto !important;
  max-width: calc(100vw - 28px) !important;
  transform: none !important;
  z-index: 999999999 !important;
}

.iti--container .iti__dropdown-content {
  position: static !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.iti--container .iti__country-list {
  width: 100% !important;
  max-height: 250px !important;
}

.iti-dropdown-open-field {
  margin-bottom: 0 !important;
}

/* =========================================================
   Forgot Password
   ========================================================= */

.forgot-wrap {
  margin-top: 10px !important;
  margin-bottom: 14px !important;
}

.forgot-link-underline {
  color: var(--ck-blue) !important;
  font-family: Inter, Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

/* =========================================================
   Button
   ========================================================= */

.tf-btn.primary {
  position: relative !important;
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  margin-top: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: linear-gradient(90deg, var(--ck-blue) 0%, var(--ck-cyan) 100%) !important;
  color: #ffffff !important;
  font-family: Inter, Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 18px rgba(9, 105, 255, 0.16) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.tf-btn.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(9, 105, 255, 0.20) !important;
}

.tf-btn.primary:active {
  transform: scale(0.98);
}

/* =========================================================
   Bottom Text
   ========================================================= */

.text-bottom {
  margin-top: 13px !important;
  text-align: center !important;
  color: var(--ck-text) !important;
  font-family: Inter, Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.text-bottom a {
  color: var(--ck-blue) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

/* =========================================================
   Status Text
   ========================================================= */

.field-error-text {
  color: #dc2626 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.field-ok-text {
  color: #16a34a !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

/* =========================================================
   Preloader
   ========================================================= */

.preload.preload-container {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  background: #ffffff !important;
}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 576px) {
  body.container-width {
    min-height: 100svh !important;
  }

  .wrap {
    min-height: 100svh !important;
    padding: 12px !important;
  }

  .tf-container {
    width: 100% !important;
    max-width: 420px !important;
  }

  .from-login {
    width: 100% !important;
    max-width: 420px !important;
    padding: 22px 16px 20px !important;
    border-radius: 24px !important;
  }

  .from-login > div:first-of-type {
    margin-bottom: 13px !important;
  }

  .from-login > div:first-of-type img {
    width: 98px !important;
  }

  .top-from {
    margin-bottom: 16px !important;
  }

  .top-from .title {
    font-size: 20px !important;
  }

  .top-from .sub-title {
    font-size: 13px !important;
    max-width: 250px !important;
  }

  .tf-field,
  fieldset.tf-field,
  fieldset.icon-absolute {
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 13px !important;
  }

  .tf-field input,
  fieldset.icon-absolute input {
    height: 42px !important;
    line-height: 42px !important;
    font-size: 14px !important;
  }

  #mobileInput,
  #password,
  #new-password,
  #confirmed-password,
  #blazeAccountId {
    height: 44px !important;
    min-height: 44px !important;
    font-size: 14px !important;
  }

  .iti__selected-country,
  .iti__selected-country-container,
  .iti__flag-container {
    height: 42px !important;
  }

  .forgot-wrap {
    margin-top: 9px !important;
    margin-bottom: 13px !important;
  }

  .tf-btn.primary {
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 13px !important;
    font-size: 14px !important;
  }

  .text-bottom {
    margin-top: 12px !important;
    font-size: 13px !important;
  }

  .iti--container {
    max-width: calc(100vw - 24px) !important;
  }

  .iti--container .iti__country-list {
    max-height: 38vh !important;
  }
}

@media (max-width: 380px) {
  .wrap {
    padding: 10px !important;
  }

  .from-login {
    padding: 20px 14px 18px !important;
    border-radius: 22px !important;
  }

  .from-login > div:first-of-type img {
    width: 92px !important;
  }

  .top-from .title {
    font-size: 19px !important;
  }

  .top-from .sub-title {
    font-size: 12px !important;
  }

  .tf-field,
  fieldset.tf-field,
  fieldset.icon-absolute {
    height: 42px !important;
    min-height: 42px !important;
  }

  #mobileInput,
  #password,
  #new-password,
  #confirmed-password,
  #blazeAccountId {
    height: 42px !important;
    min-height: 42px !important;
  }

  .tf-btn.primary {
    height: 40px !important;
    min-height: 40px !important;
  }
}

@supports (-webkit-touch-callout: none) {
  body.container-width,
  .wrap {
    min-height: -webkit-fill-available;
  }
}