/* Redesign: Registration form (forms/registration)
   Matches the site redesign palette and adds faint background icons
   on the left side of text inputs.
*/

/*============================================
            01 -- Page / layout
==============================================*/
body.redesign-ui#page_registration {
  background: linear-gradient(180deg, #f5eef8 0%, #ffffff 45%);
}

body.redesign-ui#page_registration .loan-form-area .section-title .title {
  color: var(--c-ink);
}

body.redesign-ui#page_registration .loan-form-area .section-title p {
  color: var(--c-text);
}

/* Form card */
body.redesign-ui#page_registration .loan-form {
  border: 1px solid var(--c-border);
  border-radius: 22px;
  background: #ffffff;
  box-shadow: var(--sh-card);
}

/*============================================
            02 -- Inputs + background icons
==============================================*/
body.redesign-ui#page_registration .loan-form form .form-group {
  position: relative;
}

body.redesign-ui#page_registration .loan-form form .form-group .form-control {
  border: 1px solid var(--c-border);
  border-radius: 12px;
  background: var(--c-surface);
  padding-left: 46px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

body.redesign-ui#page_registration .loan-form form .form-group .form-control:focus {
  border-color: var(--c-primary);
  background: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(68, 6, 91, 0.12) !important;
}

/* Faint field icon, left of the input start */
body.redesign-ui#page_registration .loan-form form .name .form-group::before,
body.redesign-ui#page_registration .loan-form form .surname .form-group::before,
body.redesign-ui#page_registration .loan-form form .patron .form-group::before,
body.redesign-ui#page_registration .loan-form form .bday .form-group::before,
body.redesign-ui#page_registration .loan-form form .phone .form-group::before,
body.redesign-ui#page_registration .loan-form form .email .form-group::before {
  font-family: "remixicon";
  position: absolute;
  left: 15px;
  bottom: 0;
  height: 50px;
  line-height: 50px;
  font-size: 19px;
  color: rgba(68, 6, 91, 0.32);
  pointer-events: none;
  z-index: 2;
  transition: color 0.25s ease;
}

body.redesign-ui#page_registration .loan-form form .name .form-group:focus-within::before,
body.redesign-ui#page_registration .loan-form form .surname .form-group:focus-within::before,
body.redesign-ui#page_registration .loan-form form .patron .form-group:focus-within::before,
body.redesign-ui#page_registration .loan-form form .bday .form-group:focus-within::before,
body.redesign-ui#page_registration .loan-form form .phone .form-group:focus-within::before,
body.redesign-ui#page_registration .loan-form form .email .form-group:focus-within::before {
  color: var(--c-primary);
}

body.redesign-ui#page_registration .loan-form form .name .form-group::before {
  content: "\f264"; /* ri-user-line */
}

body.redesign-ui#page_registration .loan-form form .surname .form-group::before {
  content: "\f254"; /* ri-user-2-line */
}

body.redesign-ui#page_registration .loan-form form .patron .form-group::before {
  content: "\f256"; /* ri-user-3-line */
}

body.redesign-ui#page_registration .loan-form form .bday .form-group::before {
  content: "\eb19"; /* ri-cake-2-line */
}

body.redesign-ui#page_registration .loan-form form .phone .form-group::before {
  content: "\f15a"; /* ri-smartphone-line */
}

body.redesign-ui#page_registration .loan-form form .email .form-group::before {
  content: "\eef6"; /* ri-mail-line */
}

/* The "+5%" tag accent */
body.redesign-ui#page_registration .loan-form form .form-group label:after {
  color: var(--c-primary);
}

/*============================================
            03 -- Sum range slider
==============================================*/
body.redesign-ui#page_registration .range_label .label_title {
  color: var(--c-ink);
  font-weight: 600;
}

body.redesign-ui#page_registration #reg_sum_value {
  color: var(--c-primary-dark);
  font-weight: 700;
}

body.redesign-ui#page_registration .rangeslider__fill {
  background: var(--c-grad) !important;
  background-color: var(--c-primary) !important;
}

body.redesign-ui#page_registration .rangeslider__handle {
  border: 2px solid var(--c-primary);
  box-shadow: 0 0 10px rgba(68, 6, 91, 0.35);
}

/*============================================
            04 -- Checkboxes
==============================================*/
body.redesign-ui#page_registration .form-checkbox .checkmark {
  border-radius: 10px;
  border:1px solid #7a268b42;
}

body.redesign-ui#page_registration .form-checkbox input:checked ~ .checkmark {
  background: var(--c-grad);
  background-color: var(--c-primary);
}

body.redesign-ui#page_registration .form-checkbox a,
body.redesign-ui#page_registration .policy_conditions {
  color: var(--c-primary) !important;
}

body.redesign-ui#page_registration .field-desc {
  color: var(--c-text);
}

/*============================================
            05 -- Timer + submit button
==============================================*/
body.redesign-ui#page_registration .count_down_timer {
  color: var(--c-ink);
}

body.redesign-ui#page_registration .registration_actions .default-btn {
  min-width: 240px;
  height: 52px;
  border-radius: 14px;
}

@media only screen and (max-width: 600px) {
  body.redesign-ui#page_registration .sticky_reg_button button {
    border-radius: 16px !important;
  }
}