@import 'variables';

.view-checkout-page {
  @import "view_checkout_cart";
  .block-confirm {
    .jc-bs3-container {
      width: 100%;
      .jc-bs3-row {
        margin: auto;
        width: 100%;
        .jconfirm-box-container {
          width: 30%;
          left: 50%;
          transform: translateX(-50%)!important;
          .jconfirm-title {
            color: red;
            font-weight: @font-weight-bold;
          }
          @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) {
            width: 100%;
            margin: auto;
          }
          @media (min-width: @screen-xxs-min)  and (max-width: @screen-xxs-max) {
            width: 100%;
            margin: auto;
          }
          @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
            width: 100%;
            margin: auto;
          }
          @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
            width: 50%;
          }
        }
      }
    }
  }
  .wrapper-button {
    margin-bottom: 30px;
  }
  .form-payment {
    background-color: @text-color-p6;

    form {
      padding: 25px 10px 10px 20px;

      .title {
        font-weight: @font-weight-bold;
        line-height: 25px;
        text-transform: capitalize;
        color: @text-color-p7;
      }
      label.error {
        font-size: @font-size-base;
        color: red;
        font-style: italic;
        margin-top: 5px;
      }
      .field-paymentsimage {
        ul.list-payment {
          @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) { // 0 ~ 409
            grid-template-columns: 1fr 1fr 1fr;
          }

          @media (min-width: @screen-xxs-min)  and (max-width: @screen-xxs-max) { // 409 ~ 600
            grid-template-columns: 1fr 1fr 1fr;
          }

          @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
            grid-template-columns: 1fr 1fr 1fr;
          }

          @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
            grid-template-columns: 1fr 1fr 1fr;
          }
          li {
            .wrapper-payment {
              .payment-image {
                margin-left: 30px;
                @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) { // 0 ~ 409
                  margin-left: 20px;
                }

                @media (min-width: @screen-xxs-min)  and (max-width: @screen-xxs-max) { // 409 ~ 600
                  margin-left: 20px;
                }

                @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
                  margin-left: 20px;
                }

                @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
                  margin-left: 20px;
                }
              }
            }
          }
        }
      }
      label#location_id-lbl {
        @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) { // 0 ~ 409
          margin-top: 15px;
        }

        @media (min-width: @screen-xxs-min)  and (max-width: @screen-xxs-max) { // 409 ~ 600
          margin-top: 15px;
        }

        @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
          margin-top: 15px;
        }
      }
      .field-location {
        .select2-container--default {
          .selection {
            .select2-selection--single {
              height: 35px;
              .select2-selection__rendered {
                line-height: 35px;
              }
              .select2-selection__arrow {
                height: 35px;
              }
            }
          }
        }
      }
      textarea {
        height: 195px;
      }
      .cart-totals{
        .detail-cart{
          h3{
            font-weight: @font-weight-bold;
            margin-bottom: 15px;
          }
          .block-payment-total, .block-shipping,.order_total_price {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 5px 0 17px;
            p {
              font-weight: @font-weight-semibold;
              color: @text-color-1;
            }
          }
          .block-payment-total {
            margin-bottom: 10px;
          }
          .order_total_price {
            padding: 5px 5px 5px 17px;
            background-color: @background-color-pink;
            margin-top: 20px;
            p {
              color: @text-color-4;
            }
          }
        }
        .checkout-cart{
          float: right;
          margin-top: 20px;
        }
      }
      .paynow{
        margin: 30px 0px 20px 0px;
      }

    }
  }
}
