/*
*
* 2.12 Forms
* --------------------------------------------------
*/

//== Forms variables
//

$input-height: 60px;
$input-height-sm: 50px;

$form-wrap-offset: 20px;

$textarea-default-height: 150px;

$input-color: $gray-darker;
$input-color-placeholder: $gray-light;

$input-bg: $gray-lighter;

$input-border: $gray-lighter;
$input-border-radius: 35px;

$input-border-obj: 0px solid $input-bg;

$input-font-size: 18px;
$input-line-height: 24px;
$input-font-weight: 300;

$input-padding-horizontal: 25px;
$input-padding-vertical: round(($input-height - $input-line-height) / 2);
$input-padding: $input-padding-vertical $input-padding-horizontal;

@if ($input-border-obj != none) {
  $input-padding-vertical: round(($input-height - $input-line-height - (nth($input-border-obj, 1) * 2)) / 2);
  $input-padding: $input-padding-vertical $input-padding-horizontal;
}

$error-color: #d9534f;
$success-color: #5cb85c;

@mixin setTextAreaHeight($height: 200px) {
  height: $height;
  min-height: $height * 0.8;
  max-height: $height * 1.7;
}

.rd-mailform {
  position: relative;
  text-align: left;

  @media (max-width: 479px) {
    .recaptcha {
      transform-origin: 0 50%;
      transform: scale(.9);
    }
  }
}

input:-webkit-autofill ~ label,
input:-webkit-autofill ~ .form-validation {
  color: $black !important;
}

// Form input
// -------------------------

.form-input {
  display: block;
  width: 100%;
  min-height: $input-height;
  padding: $input-padding-vertical $input-padding-horizontal;
  font-weight: $input-font-weight;
  line-height: $input-line-height;
  color: $input-color;
  background-color: $input-bg;
  background-image: none;
  border: $input-border-obj;
  border-radius: $input-border-radius;
  -webkit-appearance: none;

  &:focus {
    outline: 0;
  }
   
  @include media-breakpoint-up(xxl) {
    font-size: $input-font-size;
  }
}

textarea.form-input {
  @include setTextAreaHeight($textarea-default-height);
  resize: vertical;

  &.form-input-lg {
    @include setTextAreaHeight(200px);
  }
}

// Form wrapper
// -------------------------

.form-wrap {
  position: relative;
}

.form-wrap + .form-wrap {
  margin-top: $form-wrap-offset;
}

.form-wrap-inline + .form-wrap-inline {
  margin-top: 10px;
}

* + .button.form-button,
* + .form-button {
  margin-top: $form-wrap-offset;
}

// Form labels
// -------------------------
.form-label,
.form-label-outside {
  font-weight: $input-font-weight;
  line-height: $input-line-height;
  color: $input-color-placeholder;
  @include media-breakpoint-up(xxl) {
    font-size: $input-font-size;
  }
}

.form-label {
  position: absolute;
  top: $input-height / 2;
  left: $input-padding-horizontal;
  z-index: 9;
  transition: .3s;
  transform: translateY(-50%);
  pointer-events: none;

  &.focus {
    opacity: 0;
  }

  &.auto-fill {
    color: $input-color;
  }

  [data-x-mode="true"] & {
    pointer-events: auto;
  }
}

.form-label-outside {
  padding-left: round($input-border-radius / 2) + 3px;
  margin-bottom: 3px;
  font-size: 12px;
  letter-spacing: .02em;
  color: $gray-light;
  pointer-events: auto;
  cursor: pointer;

  &,
  &.focus,
  &.auto-fill {
    opacity: 1;
    transform: none;
  }

  & + .form-input + .form-validation {
    top: 36px;
  }
}

// Form validation
// -------------------------

.form-validation {
  position: absolute;
  right: round($input-border-radius / 2) + 3px;
  top: 3px;
  font-size: 10px;
  line-height: 11px;
  font-weight: 400;
  color: $error-color;
  transition: .3s;
  z-index: 11;
}

.form-validation-left {
  .form-validation {
    right: auto;
    top: 100%;
    left: 0;
  }
}

// Form output
// -------------------------

#form-output-global {
  position: fixed;
  bottom: 0;
  visibility: hidden;
  transform: translateY(calc(100% + 30px));
  transition: .3s all ease;
  z-index: 9999999;
  margin: 15px;

  &.active {
    transform: translateY(0);
    visibility: visible;
  }

  @include media-breakpoint-up(md) {
    margin: 30px;
  }
}

.form-output {
  position: absolute;
  top: 100%;
  left: 0;
  font-size: 14px;
  line-height: 1.5;
  margin-top: 2px;
  transition: .3s;
  opacity: 0;
  visibility: hidden;

  &.active {
    opacity: 1;
    visibility: visible;
  }

  &.error {
    color: $error-color;
  }

  &.success {
    color: $success-color;
  }
}

/**
* Radio and Checkbox Custom
*/

/**
* Base Styles
*/

.radio, .radio-inline,
.checkbox, .checkbox-inline {
  position: relative;
  font-weight: $input-font-weight;
  color: $input-color-placeholder;
  cursor: pointer;
  
  a {
    font-weight: inherit;
  }
}

.radio .radio-custom,
.radio-inline .radio-custom,
.checkbox .checkbox-custom,
.checkbox-inline .checkbox-custom {
  opacity: 0;

  &, &-dummy {
    position: absolute;
    width: 14px;
    height: 14px;
    margin-top: 5px;
    outline: none;
    cursor: pointer;
  }

  &-dummy {
    pointer-events: none;
    background: $white;
    border: 1px solid #dedfe8;

    &:after {
      position: absolute;
      opacity: 0;
    }
  }

  &:focus {
    outline: none;
  }
}

.checkbox,
.radio,
.checkbox-inline,
.radio-inline {
  a {
    display: inline;
    padding: 0 .2em;
  }
}

// Custom Radio Styles
//

.radio,
.radio-inline {
  padding-left: 36px;
  color: $gray-light;
  font-weight: 300;
  .radio-custom-dummy {
    top: -5px;
    left: 0;
    width: 26px;
    height: 26px;
    box-shadow: inset 0 0 0 0 $secondary-6;
    border-radius: 50%;
    transition: .22s;
  }

  .radio-custom:checked + .radio-custom-dummy {
    box-shadow: inset 0 0 0 7px $primary;
  }

  @include media-breakpoint-up(md) {
    padding-left: 40px;

    .radio-custom-dummy {
      right: -3px;
    }
  }
}

// Custom Checkbox Styles
//

.checkbox,
.checkbox-inline {
  padding-left: 38px;
  .checkbox-custom-dummy {
    left: 0;
    width: 26px;
    height: 26px;
    margin-top: 0;
    margin-left: 0;
    pointer-events: none;
    border-radius: 5px;
    transition: .22s;

    &:after {
      content: '\f222';
      font-family: "Material Design Icons";
      font-size: 14px;
      line-height: 10px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotateY(180deg);
      color: $white;
      opacity: 0;
      transition: .22s;
    }
  }

  .checkbox-custom:checked + .checkbox-custom-dummy {
    background: $primary;
    border-color: $primary;

    &::after {
      opacity: 1;
      transform: translate(-50%, -50%) rotateY(0deg);
    }
  }

  @include media-breakpoint-up(lg) {
    .checkbox-custom-dummy {
      margin-top: 1px;
    }
  }

  // Mods
  &.checkbox-material {
    padding-left: 60px;
    .checkbox-custom-dummy {
      margin-top: -1px;
      width: 50px;
      height: 28px;
      border-radius: 22px;

      &::after {
        content: '';
        width: 20px;
        height: 20px;
        left: 0;
        background: $secondary-6;
        transform: translate(3px, -50%);
        border-radius: 50%;
        opacity: 1;
      }
    }

    .checkbox-custom:checked + .checkbox-custom-dummy {
      background: $white;

      &::after {
        background: $primary;
        transform: translate(25px, -50%);
      }
    }
  }
}

.radio-group {
  > li + li {
    margin-top: 16px;
  }
}

// Mailform custom
.rd-mailform-inline {
  $offset: 15px;
  //width: calc(100% + #{$input-border-radius});
  //margin-left: $input-border-radius;
 
  .rd-mailform-inline-inner {
    position: relative;
    z-index: 1;
    @include display-flex;
    @include flex-direction(row);
    @include flex-wrap(wrap);
    @include align-items(center);
    @include justify-content(center);
    width: 100%;
    transform: translateY(-$offset);
    margin-bottom: -$offset;

    &::before {
      content: '';
      position: absolute;
      top: $offset;
      height: $input-height;
      left: 0;
      right: 0;
      background: $input-bg;
      z-index: -1;
      border-radius: $input-border-radius;
    }

    > * { margin-top: $offset; }
  }

  .form-wrap {
    @include flex-grow(1);
  }

  .form-input {
    padding-right: 18px;
    min-width: 150px;
    color: $gray-darker;
  }
  
  .form-label {
  }
  
  .form-button {
    min-width: 130px;
    @include flex-shrink(0);
  }

  .form-validation {
    left: round($input-border-radius / 1.4);
    top: 1px;
  }

  &.rd-mailform-sm {
    .rd-mailform-inline-inner::before {
      height: $input-height-sm;
    }
  }
}

.rd-mailform-inline-modern {
  $offset: 15px;

  .rd-mailform-inline-inner::before {
    top: $offset;
    height: $input-height + 10px;
  }
  
  .rd-mailform-inline-inner {
    padding: 6px 5px 5px;
    transform: translateY(-$offset);
    margin-bottom: -$offset;

    > * { margin-top: $offset; }
  }

  &.rd-mailform-sm {
    .rd-mailform-inline-inner::before {
      height: $input-height-sm + 12px;
    }
  }
}

.rd-mailform-sm {
  .form-input,
  .form-label {
    color: $gray-darker;
  }
  .form-input,
  .button {
    min-height: $input-height-sm;
  }

  .form-input {
    padding-top: $input-padding-vertical - floor($input-height - $input-height-sm) / 2 - 1px;
    padding-bottom: $input-padding-vertical - floor($input-height - $input-height-sm) / 2 - 1px;
  }

  .form-label {
    top: $input-height-sm / 2;
  }
}

// Form input width icon
.form-wrap-icon {

  &:before {
    position: absolute;
    top: 9px;
    left: 15px;
    content: "" ;
    display: inline-block !important;
    font-family: 'Material Design Icons';
    font-size: 24px;
    color: $gray-darker;
  }
  .form-label {
    left: 50px;
  }
  .form-input {
    padding-left: 50px;
  }
}

.rd-mailform-small {
  max-width: 370px;
  
  .text-center & {
    margin-left: auto;
    margin-right: auto;
  }
}

// Form request
.form-request {
  padding: 30px 15px;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  
  border-radius: 8px;
  background-color: $white;
  color: $gray-darker;

  .select2-container--bootstrap .select2-selection--single .select2-selection__rendered,
  .form-input,
  .form-label {
    color: $gray-light;
  }
  
  @include media-breakpoint-up(xl) {
    padding: 30px 40px;
  }
  
  &-modern {
    max-width: 566px;
    background-color: $gray-lighter;
    .select2-container--bootstrap .select2-selection,
    .form-input {
      background-color: $white;
    }
    .select2-container--bootstrap .select2-selection--single .select2-selection__rendered,
    .form-input,
    .form-label {
      color: $gray-darker;
    }
  }

  * + p { margin-top: 8px; }
}


// Form Flex inline
.form-flex-inline {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: flex-end;
  margin-left: -8px;
  margin-right: -8px;
  margin-bottom: -15px;
  transform: translateY(-15px);
  &-item {
    flex-shrink: 1;
    flex-grow: 1;
    padding-left: 8px;
    padding-right: 8px;
    margin-top: 15px;
    &-static {
      width: 100%;
      @include media-breakpoint-up(md) {
        width: 27%;
      }
      @include media-breakpoint-up(lg) {
        width: 19%;
        max-width: 185px;
      }
      @include media-breakpoint-up(xl) {
        max-width: 239px;
        width: 14.1%;
  
      }
    }
    &-custom {
      margin-top: 30px;
      display: flex;
      align-items: flex-end;
      justify-content: center;
    }
  }
  .form-button {
   .button {
     min-width: 190px;
   }
  }
}

@include media-breakpoint-up(md) {
  .form-flex-inline {
    flex-direction: row;
  }
}

@include media-breakpoint-up(lg) {
  .form-flex-inline {
    flex-wrap: nowrap;
    &-item {
      &-custom {
        flex-grow: 0;
        justify-content: flex-start;
        margin-top: 15px;
      }
    }
  }
}
.form-request-modern {
  margin-top: 30px;
  margin-bottom: 30px;
  * + .rd-mailform { margin-top: 10px; }
  * + .form-button { margin-top: 30px; }
  @include media-breakpoint-up(xl) {
    margin-top: 0;
    margin-bottom: 0;
  }
  @include media-breakpoint-up(xxl) {
    * + .form-button { margin-top: 40px; }
  }
}

// Form Find
.form-find {
  box-shadow: 0 4px 29px 0 rgba(#6e7b9d, .29);
  background-color: $white;
  border-radius: $border-sm;
  text-align: left;
  overflow: hidden;
  &.form-find-white {
    .form-input { background-color: $gray-lighter; }
    
    .form-input,
    .form-label {
      letter-spacing: $spacing-sm;
      color: $gray-darker;
    }
  }
}

.form-find-header {
  padding: .9em 2.2em;
  color: $white;
  background-color: $primary;
  > * {
    color: inherit;
  }
}

.form-find-body {
  //padding: .9em 2.2em;
  padding: 20px 20px 30px;
  &.rd-mailform {
    margin-top: 0;
  }
 @include media-breakpoint-up(sm) {
   padding: 37px 47px 50px;
 }
  
}

.bg-default {
  .form-find {
    background-color: $white;
    .form-label,
    .form-input {
      color: $gray-darker;
    }
  }
}