/**
 * Signup page — match React SignUp.js layout & field look.
 * Loaded only on the signup page (see functions.php).
 */

body.page-signup {
  background: #fff !important;
  overflow-x: hidden !important;
}

body.page-signup footer .login-bg {
  width: 75% !important;
  position: fixed !important;
  bottom: 0 !important;
  right: -13px !important;
  z-index: 0 !important;
  pointer-events: none;
}

/* Full-viewport shell like React .login-page */
section.register_signup.signup-react {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  max-width: 100vw;
  min-height: 100vh;
  margin: 0 !important;
  margin-top: 0 !important;
  padding: 1rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
  background: transparent;
}

/*
 * Logo left + form right, same flex row.
 * margin-right: auto on left pushes logo left and form right
 * while align-items: center keeps vertical alignment (no absolute).
 */
section.register_signup.signup-react .signup-wrap {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  max-width: min(1400px, 100%);
  /* Mild left shift of whole logo+form block */
  margin: 0 auto;
  transform: translateX(clamp(-40px, -3vw, -16px));
  padding: 0 clamp(40px, 6vw, 100px);
  gap: 0;
}

/* Left branding — stays in flow, pulled to the left */
section.register_signup.signup-react .signup-left {
  position: static;
  flex: 0 0 auto;
  margin-right: auto;
  /* keeps a safe minimum gap before the form */
  padding-right: clamp(48px, 8vw, 160px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transform: translateY(-2%);
}

section.register_signup.signup-react .signup-left .login-logo {
  display: block;
  width: clamp(165px, 11.6vw, 222px);
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

section.register_signup.signup-react .signup-tagline {
  margin: 1.5rem 0 0;
  color: #606060;
  font-size: clamp(18px, 1.4vw, 24px);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

section.register_signup.signup-react .signup-tagline span {
  color: #5cc7c1;
}

/* Right form — fixed width, never shrinks/misaligns */
section.register_signup.signup-react .signup-right {
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  flex: 0 0 440px;
  flex-shrink: 0;
  width: 440px;
  max-width: 440px;
  min-width: 440px;
  padding: 0;
}

section.register_signup.signup-react .register_form,
section.register_signup.signup-react .register_form .form_login_block {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 440px !important;
  float: none !important;
  margin: 0 !important;
}

section.register_signup.signup-react .signup-heading {
  margin: 0 0 clamp(16px, 2vw, 28px) !important;
  color: #a4a4a4;
  font-size: 2rem !important;
  font-weight: 600;
  line-height: 1.2;
}

/* Field rows */
section.register_signup.signup-react .form-column-block {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start;
  gap: 12px;
  width: 100% !important;
  float: none !important;
  margin: 0 0 clamp(10px, 1.2vw, 14px) !important;
  clear: both;
}

section.register_signup.signup-react .form-group {
  position: relative !important;
  box-sizing: border-box !important;
  float: none !important;
  width: 100% !important;
  margin: 0 0 clamp(10px, 1.2vw, 14px) !important;
  clear: none !important;
}

section.register_signup.signup-react .form-column-block > .form-group {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: auto !important;
  margin-bottom: 0 !important;
}

section.register_signup.signup-react .form-group.full {
  width: 100% !important;
  float: none !important;
}

section.register_signup.signup-react .form-col:nth-child(odd) {
  margin-right: 0 !important;
}

/* 44px controls — beat legacy 58px / 75% phone widths */
section.register_signup.signup-react .register_form input.form-control.input_text,
section.register_signup.signup-react .register_form select.form-control,
section.register_signup.signup-react .register_form input.phone_no,
section.register_signup.signup-react .register_form .pc_toggle {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  margin: 0 !important;
  margin-right: 0 !important;
  padding: 8px 12px !important;
  float: none !important;
  border: 1px solid #d9d9d9 !important;
  border-radius: 5px !important;
  background-color: #fff !important;
  box-shadow: none !important;
  color: #2a2a2a !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  outline: none !important;
}

section.register_signup.signup-react .register_form input.form-control.input_text:focus,
section.register_signup.signup-react .register_form select.form-control:focus,
section.register_signup.signup-react .register_form input.phone_no:focus,
section.register_signup.signup-react .register_form .pc_toggle:focus {
  border-color: #5cc7c1 !important;
}

section.register_signup.signup-react .register_form input.form-control.input_text:not(:placeholder-shown),
section.register_signup.signup-react .select-float.has-value select,
section.register_signup.signup-react .phone_code_block.has-value .pc_toggle {
  border-color: #5cc7c1 !important;
}

/* Floating labels */
section.register_signup.signup-react .label {
  position: absolute !important;
  top: 50% !important;
  left: 12px !important;
  z-index: 2;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #a4a4a4 !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  background: transparent !important;
  pointer-events: none;
  white-space: nowrap;
  transition: 0.2s ease;
}

section.register_signup.signup-react .label .req {
  color: #5cc7c1;
}

section.register_signup.signup-react .label.up,
section.register_signup.signup-react input.form-control.input_text:focus ~ .label,
section.register_signup.signup-react input.form-control.input_text:not(:placeholder-shown) ~ .label,
section.register_signup.signup-react .select-float.has-value > .label,
section.register_signup.signup-react .select-float select:focus ~ .label,
section.register_signup.signup-react .phone_code_block.has-value > .label,
section.register_signup.signup-react .phone_no_block input:focus ~ .label,
section.register_signup.signup-react .phone_no_block input:not(:placeholder-shown) ~ .label {
  top: 0 !important;
  left: 10px !important;
  transform: translateY(-50%) !important;
  padding: 0 4px !important;
  font-size: 12px !important;
  color: #5cc7c1 !important;
  background: #fff !important;
}

section.register_signup.signup-react .website_login {
  position: absolute !important;
  top: 50% !important;
  right: 12px !important;
  left: auto !important;
  transform: translateY(-50%) !important;
  color: #5cc7c1 !important;
  font-size: 14px !important;
  pointer-events: none;
  z-index: 2;
}

section.register_signup.signup-react .form-group.full .store_name {
  padding-right: 100px !important;
}

/* Password eye */
section.register_signup.signup-react .pass-eye-field {
  position: relative !important;
}

section.register_signup.signup-react .pass-eye-field .password {
  padding-right: 42px !important;
}

section.register_signup.signup-react .pass-eye-btn {
  position: absolute !important;
  top: 22px !important;
  right: 12px !important;
  left: auto !important;
  transform: translateY(-50%) !important;
  z-index: 4;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #a4a4a4;
  cursor: pointer;
}

section.register_signup.signup-react .pass-eye-btn svg {
  display: block;
  width: 18px;
  height: 18px;
}

/* Country 50% | Code + Phone 50% */
section.register_signup.signup-react .country-phone-row .phone-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 8px !important;
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
}

section.register_signup.signup-react .phone_code_block {
  position: relative !important;
  flex: 0 0 100px !important;
  width: 100px !important;
  min-width: 100px !important;
  max-width: 100px !important;
  height: 44px !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

section.register_signup.signup-react .phone_no_block {
  position: relative !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  float: none !important;
  margin: 0 !important;
}

section.register_signup.signup-react .phone_code_block select.phone_code {
  display: none !important;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  border: 0 !important;
}

/* Wrapper only — no border (border lives on .pc_toggle) */
section.register_signup.signup-react .register_form .pc_combo {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 44px !important;
  margin: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
  float: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

section.register_signup.signup-react .register_form .pc_toggle {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  margin: 0 !important;
  padding: 0 22px 0 10px !important;
  float: none !important;
  border: 1px solid #d9d9d9 !important;
  border-radius: 5px !important;
  text-align: left !important;
  cursor: pointer;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%232a2a2a' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-size: 10px 6px !important;
  box-shadow: none !important;
  color: #2a2a2a !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
}

section.register_signup.signup-react .register_form .pc_toggle:focus {
  border-color: #5cc7c1 !important;
}

section.register_signup.signup-react .pc_toggle.is-empty {
  color: transparent !important;
}

/* "Code" label sits over the toggle, same as other fields */
section.register_signup.signup-react .phone_code_block > .label {
  z-index: 3;
  pointer-events: none;
}

section.register_signup.signup-react .pc_panel {
  top: 46px !important;
  left: 0 !important;
  width: 280px !important;
  z-index: 40;
}

section.register_signup.signup-react select.country,
section.register_signup.signup-react select.default_currency {
  appearance: none !important;
  -webkit-appearance: none !important;
  padding-right: 28px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%232a2a2a' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 10px 6px !important;
}

section.register_signup.signup-react .warning_message {
  clear: both;
  float: none !important;
  display: block;
  position: relative;
  z-index: 1;
  width: 100% !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  color: #dc3545 !important;
  font-size: 12px !important;
  line-height: 1.25;
  white-space: normal;
}

section.register_signup.signup-react .phone_no_block .warning_message {
  position: static !important;
}

section.register_signup.signup-react .signup-terms {
  position: relative;
  z-index: 1;
  margin: 4px 0 12px;
}

section.register_signup.signup-react .signup-terms-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #606060;
  font-size: 14px;
  cursor: pointer;
}

section.register_signup.signup-react .signup-terms-label a {
  color: #5cc7c1;
  font-weight: 600;
  text-decoration: none;
}

section.register_signup.signup-react .signup-terms-check {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #5cc7c1;
  flex-shrink: 0;
}

section.register_signup.signup-react .h-captcha {
  position: relative;
  z-index: 1;
  margin: 8px 0 4px;
  overflow: visible;
  transform: scale(0.95);
  transform-origin: left top;
}

section.register_signup.signup-react button.btn.login_button {
  width: 100% !important;
  height: 48px !important;
  margin-top: 16px !important;
  margin-bottom: 24px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: #5cc7c1 !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

section.register_signup.signup-react .login-page-right-col-form-foot {
  margin-top: 0 !important;
  color: #606060;
  font-size: 14px;
}

section.register_signup.signup-react .login-page-right-col-form-foot a {
  color: #5cc7c1 !important;
  font-weight: 600;
  text-decoration: none !important;
}

@media (max-width: 1200px) {
  section.register_signup.signup-react .signup-wrap {
    max-width: 100%;
    padding: 0 clamp(24px, 4vw, 48px);
  }

  section.register_signup.signup-react .signup-left {
    padding-right: clamp(32px, 5vw, 80px);
  }
}

@media (max-width: 960px) {
  section.register_signup.signup-react {
    min-height: auto;
    padding: 24px 0 40px;
  }

  section.register_signup.signup-react .signup-wrap {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    max-width: 100%;
    margin: 0 auto;
    transform: none;
    padding: 0 16px;
  }

  section.register_signup.signup-react .signup-left {
    flex: none;
    width: 100%;
    margin-right: 0;
    padding-right: 0;
    transform: none;
  }

  section.register_signup.signup-react .signup-left .login-logo {
    width: 120px;
  }

  section.register_signup.signup-react .signup-tagline {
    white-space: normal;
  }

  section.register_signup.signup-react .signup-right {
    flex: none;
    width: 100%;
    min-width: 0;
    max-width: 440px;
  }

  section.register_signup.signup-react .register_form,
  section.register_signup.signup-react .register_form .form_login_block {
    width: 100% !important;
    max-width: 440px !important;
  }

  section.register_signup.signup-react .form-column-block {
    flex-wrap: wrap !important;
  }

  section.register_signup.signup-react .form-column-block > .form-group {
    flex: 1 1 100% !important;
  }

  section.register_signup.signup-react .h-captcha {
    transform: none;
  }
}