/* =========================================================
   CK PAY - REGISTRATION PAGE CLEAN CENTER CARD CSS
   ========================================================= */

: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 {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

body.container-width {
  width: 100% !important;
  max-width: 100vw !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;

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

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

  color: var(--ck-text) !important;
  background: #ffffff !important;
}

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

/* =========================================================
   WRAP
   ========================================================= */

.wrap {
  position: relative;
  z-index: 2;

  width: 100% !important;
  max-width: 100vw !important;
  min-height: 100dvh !important;

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

  padding: 16px 12px !important;
  margin: 0 auto !important;

  overflow-x: hidden !important;
  background: transparent !important;
}

/* =========================================================
   CONTAINER
   ========================================================= */

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

/* =========================================================
   REGISTRATION CARD
   ========================================================= */

.from-login.sign-up {
  position: relative;

  width: 100% !important;
  max-width: 420px !important;
  min-width: 0 !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;

  animation: none !important;
}

.from-login.sign-up::before,
.from-login.sign-up::after {
  display: none !important;
}

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

/* =========================================================
   LOGO
   ========================================================= */

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

.from-login.sign-up > 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;

  animation: none !important;
}

/* =========================================================
   TITLE
   ========================================================= */

.top-from {
  text-align: center !important;

  margin-top: 0 !important;
  margin-bottom: 18px !important;

  animation: none !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;
}

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

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

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

.middle-from fieldset,
.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 !important;
}

.middle-from fieldset:focus-within,
.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;
  transform: none !important;
}

.middle-from input,
.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;
}

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

#mobileInput,
#password,
#new-password,
#confirmed-password,
#blazeAccountId,
#emailId,
#email,
#firstName,
#lastName,
#name {
  height: 46px !important;
  min-height: 46px !important;

  padding-top: 0 !important;
  padding-bottom: 0 !important;

  font-size: 15px !important;
}

.tf-field-label {
  color: #96a3b8 !important;
}

/* field gap */
.middle-from fieldset + fieldset,
.box-auth-pass {
  margin-top: 9px !important;
}

/* =========================================================
   PASSWORD VALIDATION BOX
   ========================================================= */

#pwdRulesBox {
  margin-top: 10px !important;
  padding: 12px !important;

  border-radius: 14px !important;

  background: #f8fbff !important;
  border: 1px solid var(--ck-border) !important;

  box-shadow: none !important;
}

#pwdRulesBox,
#pwdRulesBox * {
  font-family: Inter, Arial, sans-serif !important;
  font-size: 12px !important;
}

/* =========================================================
   TERMS TEXT
   ========================================================= */

.middle-from p.color-grayscale-500 {
  margin-top: 13px !important;

  color: var(--ck-muted) !important;

  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}

.middle-from p.color-grayscale-500 a {
  color: var(--ck-blue) !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 !important;
}

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

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

/* =========================================================
   BOTTOM TEXT
   ========================================================= */

.fixed-bottom-btn {
  position: static !important;
  margin-top: 13px !important;
}

.text-bottom {
  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;
}

/* =========================================================
   VALIDATION COLORS
   ========================================================= */

.field-error-text {
  margin-top: 5px !important;

  color: #dc2626 !important;

  font-size: 12px !important;
  font-weight: 700 !important;
}

.field-msg-text,
.field-ok-text {
  margin-top: 5px !important;

  color: #16a34a !important;

  font-size: 12px !important;
  font-weight: 700 !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__selected-flag {
  transition: none !important;
}

.iti__selected-flag:hover {
  transform: none !important;
}

/* =========================================================
   COUNTRY DROPDOWN
   ========================================================= */

.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;

  margin-top: 0 !important;

  background: #ffffff !important;

  border: none !important;
  border-radius: 0 !important;

  box-shadow: none !important;

  animation: none !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 !important;
}

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

.iti-dropdown-open-field {
  margin-bottom: 0 !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;

  border-radius: 14px !important;

  overflow: hidden !important;
}

.iti--container .iti__search-input {
  width: 100% !important;
  box-sizing: border-box !important;
}

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

  overflow-y: auto !important;
}

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

.modal-top-up-success .modal-content,
.wg-top-up-success {
  border-radius: 24px !important;

  border: 1px solid #dfe9ff !important;

  box-shadow:
    0 14px 38px rgba(7, 26, 61, 0.10),
    0 2px 8px rgba(7, 26, 61, 0.04) !important;
}

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

.digit-group {
  display: flex !important;

  justify-content: center !important;

  gap: 8px !important;
}

.digit-group input {
  width: 46px !important;
  height: 48px !important;

  border-radius: 14px !important;

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

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

  text-align: center !important;

  font-size: 20px !important;
  font-weight: 800 !important;

  color: var(--ck-text) !important;

  box-shadow: none !important;
}

.digit-group input:focus {
  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;
  outline: none !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.sign-up {
    width: 100% !important;
    max-width: 420px !important;

    padding: 22px 16px 20px !important;

    border-radius: 24px !important;
  }

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

  .from-login.sign-up > 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 {
    max-width: 250px !important;

    font-size: 13px !important;
  }

  .middle-from fieldset,
  .tf-field,
  fieldset.tf-field,
  fieldset.icon-absolute {
    height: 44px !important;
    min-height: 44px !important;

    border-radius: 13px !important;
  }

  .middle-from input,
  .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,
  #emailId,
  #email,
  #firstName,
  #lastName,
  #name {
    height: 44px !important;
    min-height: 44px !important;

    font-size: 14px !important;
  }

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

  #pwdRulesBox {
    padding: 10px !important;
    border-radius: 13px !important;
  }

  .middle-from p.color-grayscale-500 {
    margin-top: 12px !important;
    font-size: 11.5px !important;
  }

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

    border-radius: 13px !important;

    font-size: 14px !important;
  }

  .fixed-bottom-btn {
    margin-top: 12px !important;
  }

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

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

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

  .digit-group {
    gap: 7px !important;
  }

  .digit-group input {
    width: 42px !important;
    height: 46px !important;

    font-size: 19px !important;
  }
}

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

  .from-login.sign-up {
    padding: 20px 14px 18px !important;

    border-radius: 22px !important;
  }

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

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

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

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

  #mobileInput,
  #password,
  #new-password,
  #confirmed-password,
  #blazeAccountId,
  #emailId,
  #email,
  #firstName,
  #lastName,
  #name {
    height: 42px !important;
    min-height: 42px !important;
  }

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

  .digit-group input {
    width: 38px !important;
    height: 44px !important;
  }
}

/* =========================================================
   IOS FIX
   ========================================================= */

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

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}