$layout-padding: ru(1.5);
$mobile-layout-padding: ru(1);
$checkout-header-height: rem-calc(77);

.checkout {
  width: 100%;
  min-height: 100vh;
  background-color: color('primary-2');
  display: flex;

  &-layout {
    width: 100%;
    flex-direction: column;
    flex-wrap: nowrap;
  }
}

.head {
  z-index: 1;
  background-color: color('primary-2');
  color: color('primary-3');
  flex-basis: auto;

  &-main,
  &-body,
  &-foot {
    display: flex;
    align-items: center;
  }

  &-body {
    justify-content: center;
  }

  &-foot {
    justify-content: flex-end;
    padding: 0 $layout-padding;
  }
}

.logo {
  &-wrapper {
    align-items: center;
    display: flex;
    justify-content: space-between;
  }

  &-text {
    @include typography-a-9-bold;
  }
}

.main {
  background-color: color('neutral-5');
  z-index: 0;

  &-layout {
    display: flex;
    justify-content: space-between;
  }
}


// Layout Partials
.cost {
  @include typography-a-7-bold;
  line-height: $layout-padding;

  &-title {
    display: flex;
    align-items: center;

    div {
      margin-left: ru(0.25);
    }
  }

  &-price {
    display: none;
  }
}

.secure-logo {
  width: calc(100% - 2px);
  max-width: ru(3.75);
  height: ru(1.5);
}

.icon {
  width: ru(.75);
  height: ru(.75);

  path {
    fill: color('primary-3');
  }
}

.user-alert-mobile {
  display: none;
}

.sticky-wrapper {
  z-index: 1;
}

.logo-icon-wrapper {
  display: flex;
  flex-grow: 1;
}

@media #{$small-only} {
  .main-layout {
    padding-top: 0;
    padding-bottom: ru(2);
  }

  .contact-card {
    display: none;
  }

  .head-main {
    border-bottom: 1px solid color('neutral-5');
  }

  .logo {
    &-wrapper {
      padding: ru(.5) $mobile-layout-padding;
      width: 100%;
    }

    &-pg {
      max-width: ru(5);
      max-height: ru(1);
    }

    &-chat {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      font-weight: bold;
      cursor: pointer;
    }

    &-text {
      margin-left: ru(0.25);
      cursor: pointer;
    }
  }

  .cost {
    background: color('primary-2');
    box-shadow: 0 ru(1) ru(1.5) ru(-0.5) rgba(77, 77, 77, 0.25);
    width: 100%;
    padding: ru(.75) $mobile-layout-padding;

    &-price {
      display: block;
      text-align: right;
    }

    &-title {
      padding: 0;
    }
  }

  .secure-logo { display: none; }

  .user-alert { display: none; }

  .user-alert-mobile { display: block; }
}

@media #{$medium-up} {
  .head-layout,
  .main-layout {
    max-width: $page-max-width;
  }

  .head-body-wrapper {
    display: flex;
    justify-content: center;
  }

  .main-layout {
    padding: ru(2) $layout-padding ru(6);
  }

  .head-foot {
    padding-right: ru(1.25);
  }

  .logo {
    &-wrapper {
      width: 100%;
      padding: 0 $layout-padding;
    }

    &-pg {
      width: calc(100% - 2px);
      max-width: ru(6.5);
    }

    &-chat { display: none; }
  }


/* stylelint-disable declaration-no-important */
  .sticky {
    @include sticky-disable;

    height: $checkout-header-height !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
/* stylelint-enable declaration-no-important */