/* Bagful responsive tweaks for VP One Page Checkout */

@media (max-width: 1440px) {
  .proopc-finalpage.bagful-opc {
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .proopc-finalpage.bagful-opc .bagful-opc-main {
    grid-template-columns: minmax(260px, 290px) minmax(260px, 290px) minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 18px;
  }

  .proopc-finalpage.bagful-opc .bagful-opc-col--left .bagful-opc-card,
  .proopc-finalpage.bagful-opc .bagful-opc-col--middle .bagful-opc-card {
    max-width: 100%;
  }
}

@media (max-width: 1199px) {
  .proopc-finalpage.bagful-opc .bagful-opc-main {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .proopc-finalpage.bagful-opc .bagful-opc-col--right {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

@media (max-width: 991px) {
  .proopc-finalpage.bagful-opc .bagful-opc-main {
    grid-template-columns: minmax(0, 1fr);
  }

  .proopc-finalpage.bagful-opc .bagful-opc-col--right {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 991px) {
  .proopc-finalpage.bagful-opc {
    padding: 18px 16px 24px;
    border-radius: 24px;
  }

  .proopc-finalpage.bagful-opc .bagful-opc-topbar {
    padding: 0;
  }

  .proopc-finalpage.bagful-opc .bagful-opc-topbar,
  .proopc-finalpage.bagful-opc .bagful-opc-topbar-left,
  .proopc-finalpage.bagful-opc .bagful-opc-topbar-right {
    display: block;
  }

  .proopc-finalpage.bagful-opc .bagful-opc-topbar-right > * + * {
    margin-top: 10px;
  }

  .proopc-finalpage.bagful-opc .bagful-opc-card-body {
    padding: 18px;
  }

  .proopc-finalpage.bagful-opc .bagful-opc-title,
  .proopc-finalpage.bagful-opc h3.proopc-process-title {
    padding: 16px 18px;
  }
}

@media (max-width: 640px) {
  .proopc-finalpage.bagful-opc .bagful-opc-main {
    gap: 16px;
  }

  .proopc-finalpage.bagful-opc .bagful-opc-card {
    border-radius: 22px;
  }

  .proopc-finalpage.bagful-opc .bagful-opc-title,
  .proopc-finalpage.bagful-opc h3.proopc-process-title {
    font-size: 16px;
  }

  .proopc-finalpage.bagful-opc .bagful-opc-step,
  .proopc-finalpage.bagful-opc .proopc-step {
    min-width: 30px;
    width: 30px;
    height: 30px;
    line-height: 30px !important;
    font-size: 13px !important;
  }

  .proopc-finalpage.bagful-opc input[type="text"],
  .proopc-finalpage.bagful-opc input[type="email"],
  .proopc-finalpage.bagful-opc input[type="tel"],
  .proopc-finalpage.bagful-opc input[type="number"],
  .proopc-finalpage.bagful-opc input[type="password"],
  .proopc-finalpage.bagful-opc select,
  .proopc-finalpage.bagful-opc textarea,
  .proopc-finalpage.bagful-opc .chzn-container-single .chzn-single,
  .proopc-finalpage.bagful-opc .chosen-container-single .chosen-single,
  .proopc-finalpage.bagful-opc .vm-chzn-select,
  .proopc-finalpage.bagful-opc .inputbox {
    min-height: 52px;
    padding: 14px 16px;
    font-size: 15px;
  }

  .proopc-finalpage.bagful-opc .proopc-btn,
  .proopc-finalpage.bagful-opc button,
  .proopc-finalpage.bagful-opc input[type="submit"],
  .proopc-finalpage.bagful-opc input[type="button"],
  .proopc-finalpage.bagful-opc .btn,
  .proopc-finalpage.bagful-opc .button {
    width: 100%;
    font-size: 17px;
  }
}


@media (max-width: 1399px) {
  .proopc-finalpage.bagful-opc .bagful-opc-main {
    grid-template-columns: 1fr 1fr;
  }

  .proopc-finalpage.bagful-opc .bagful-opc-col--right {
    grid-column: 1 / -1;
    margin-left: 0;
  }
}

@media (max-width: 991px) {
  .proopc-finalpage.bagful-opc .bagful-opc-main {
    grid-template-columns: 1fr;
  }
}


@media (max-width: 767px) {
  .proopc-finalpage.bagful-opc .proopc-coupon .proopc-input-append {
    flex-wrap: wrap;
  }

  .proopc-finalpage.bagful-opc .proopc-coupon #proopc-coupon-code,
  .proopc-finalpage.bagful-opc .proopc-coupon #proopc-task-savecoupon {
    max-width: 100%;
    width: 100%;
  }
}