.cart-user-form-wrapper {
   .custom-checkbox-lg {
      font-size: 20px;

      .custom-control-indicator {
         top: 4px;
      }
   }

   @media screen and (min-width: $lg) {
      .row {
         margin: 0 -10px;

         .col-md-6,
         .col-xxs-12 {
            padding: 0 10px;
         }
      }

      .personal-data .zip-group {
         > div:last-child {
            margin-left: 20px;
         }
      }
   }

   @media screen and (max-width: $sm - 1) {
      .custom-checkbox-lg {
         font-size: 16px;
      }
   }
}

.cart-user {
   .col-md-6,
   .col-lg-6 {
      width: 50%;
   }

   .col-xxs-12 {
      padding-left: 5px;
      padding-right: 5px;
   }

   @media screen and (max-width: $lg - 1) {
      .col-lg-6 {
         width: 100%;
      }
   }

   @media screen and (max-width: $md - 1) {
      .col-md-6 {
         width: 100%;
      }
   }

   .title-default {
      font-size: $font-size-larger;
      font-weight: $font-weight-bold;
   }

   .personal-data {
      margin-top: $spacer;
      margin-bottom: $spacer;
   }

   .invoice-data-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
   }

   .custom-checkbox-firm {
      margin-bottom: 20px;

      &.disabled {
         opacity: 1;

         > span {
            opacity: .5;
         }
      }

      .custom-control-indicator {
         top: calc(50% - 8px);
      }

      small {
         @include underline-default;

         display: block;
         color: $text-muted;
         line-height: 1;
         pointer-events: auto;
      }
   }

   .firm-address-row {
      margin-bottom: 1rem;

      .btn {
         width: 100%;
         padding-left: 0;
         padding-right: 0;

         &.loading {
            position: relative;

            &::before {
               content: "";
               display: block;
               position: absolute;
               left: -2px;
               right: -2px;
               top: -2px;
               bottom: -2px;
               z-index: 1;
               background: $brand-primary;
            }

            &::after {
               animation: add-to-cart-loader 1.25s infinite linear;
               border: 3px solid $white;
               border-radius: 50%;
               border-right-color: transparent;
               content: "";
               display: block;
               position: absolute;
               left: calc(50% - 15px);
               top: calc(50% - 15px);
               width: 30px;
               height: 30px;
               z-index: 2;
            }
         }
      }
   }

   .cart-country-link {
      @include underline-default;

      position: absolute;
      right: 0;
   }

   .form-group-note {
      margin-top: 30px;
   }

   select.form-control {
      padding-top: 16px;
   }

   .form-group.has-error {
      input:not(:focus) {
         border-color: $state-error;

         ~ .help-block {
            color: $state-error;
            border-color: $state-error;

            &::before {
               border-bottom-color: $state-error;
            }
         }
      }
   }

   @media screen and (min-width: $md) {
      .zip-group {
         display: flex;

         > div:first-child {
            flex-grow: 1;
            width: calc(100% - (#{$input-border-width * 2 + $input-padding-x} + 2rem + 6ch + #{$grid-gutter-width}));
         }

         > div:last-child {
            flex-shrink: 0;
            margin-left: $grid-gutter-width;
            width: calc(#{$input-border-width * 2 + $input-padding-x} + 2rem + 6ch); // extra space in case of foreign zip

            input {
               padding-right: 1.75rem;
            }

            .form-control-feedback {
               text-align: left;
               width: 1.75rem;
            }
         }
      }
   }
}

@media screen and (max-width: $sm - 1) {
   .cart-user {
      .title-default {
         font-size: $font-size-h6;
      }
   }
}

@media screen and (max-width: $xs - 1) {
   .cart-user {
      .invoice-data-header {
         flex-wrap: wrap;

         .title-default {
            width: 100%;
         }
      }
   }
}

@import "@css/page/order/_step-user.mailcheck";

@keyframes add-to-cart-loader {
   0% {
      transform: rotate(0);
   }

   100% {
      transform: rotate(360deg);
   }
}
