/* EnginesDIY checkout shipping and payment cards */
html.route-checkout-checkout .checkout-section.shipping-payment {
  display: grid !important;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) !important;
  gap: 24px !important;
  padding: 28px !important;
  margin-bottom: 24px !important;
  background: #f3f5f6 !important;
  border: 1px solid #e2e7ea !important;
  border-radius: 10px !important;
}

html.route-checkout-checkout .shipping-payment .section-shipping,
html.route-checkout-checkout .shipping-payment .section-payment {
  min-width: 0 !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

html.route-checkout-checkout .shipping-payment .section-title {
  margin: 0 0 16px !important;
  padding: 0 !important;
  color: #172633 !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  background: transparent !important;
  border: 0 !important;
}

html.route-checkout-checkout .shipping-payment .section-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
}

html.route-checkout-checkout .shipping-payment .section-body > div,
html.route-checkout-checkout .shipping-payment .shippings,
html.route-checkout-checkout .shipping-payment .ship-wrapper,
html.route-checkout-checkout .shipping-payment .radio {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

html.route-checkout-checkout .shipping-payment .ship-wrapper > p {
  display: none !important;
}

html.route-checkout-checkout .shipping-payment .radio > label {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 68px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 13px 16px !important;
  color: #172633 !important;
  background: #fff !important;
  border: 1px solid #d6dfe4 !important;
  border-radius: 9px !important;
  box-shadow: 0 1px 2px rgba(23,38,51,.03) !important;
  cursor: pointer !important;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background-color .2s ease !important;
}

html.route-checkout-checkout .shipping-payment .radio > label:hover {
  border-color: #c66a32 !important;
  box-shadow: 0 8px 22px rgba(74,54,39,.10) !important;
  transform: translateY(-1px) !important;
}

html.route-checkout-checkout .shipping-payment .radio > label:has(input:checked) {
  background: #fffaf6 !important;
  border-color: #c66a32 !important;
  box-shadow: 0 0 0 2px rgba(198,106,50,.12) !important;
}

html.route-checkout-checkout .shipping-payment input[type="radio"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: grid !important;
  place-content: center !important;
  width: 19px !important;
  height: 19px !important;
  margin: 0 !important;
  border: 1.5px solid #84939d !important;
  border-radius: 50% !important;
  background: #fff !important;
}

html.route-checkout-checkout .shipping-payment input[type="radio"]::before {
  content: "" !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  background: #c66a32 !important;
  transform: scale(0) !important;
  transition: transform .15s ease !important;
}

html.route-checkout-checkout .shipping-payment input[type="radio"]:checked {
  border-color: #c66a32 !important;
}

html.route-checkout-checkout .shipping-payment input[type="radio"]:checked::before {
  transform: scale(1) !important;
}

html.route-checkout-checkout .shipping-payment label > span {
  display: block !important;
  min-width: 0 !important;
  color: #172633 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

html.route-checkout-checkout .shipping-payment .shipping-quote-title {
  padding-right: 4px !important;
}

html.route-checkout-checkout .shipping-payment .section-shipping label > span::after,
html.route-checkout-checkout .shipping-payment .section-payment label > span::after {
  display: block !important;
  margin-top: 3px !important;
  color: #6b7b86 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
}

/* Shipping card: radio | carrier mark | title/description and live price */
html.route-checkout-checkout .shipping-payment .section-shipping .radio > label:has(input[value="flat.flat"]) {
  grid-template-columns: 24px 86px minmax(0, 1fr) !important;
  gap: 12px !important;
}

html.route-checkout-checkout .shipping-payment .section-shipping .radio > label:has(input[value="flat.flat"])::before {
  content: "" !important;
  align-self: stretch !important;
  display: block !important;
  min-height: 34px !important;
  padding-right: 12px !important;
  background: url('../image/enginesdiy-payments/fedex.svg') center / contain no-repeat !important;
  border-right: 1px solid #e2e7ea !important;
}

html.route-checkout-checkout .shipping-payment input[value="flat.flat"] + span {
  font-size: 0 !important;
}

html.route-checkout-checkout .shipping-payment input[value="flat.flat"] + span::before {
  content: "FedEx" !important;
  display: block !important;
  color: #172633 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

html.route-checkout-checkout .shipping-payment input[value="free.free"] + span::after {
  content: "Standard tracked delivery with no shipping fee" !important;
}

html.route-checkout-checkout .shipping-payment input[value="flat.flat"] + span::after {
  content: "FedEx tracked delivery · $8.00" !important;
}

html.route-checkout-checkout .shipping-payment input[value="paypal"] + span::after {
  content: "Pay securely with PayPal or an eligible card" !important;
}

html.route-checkout-checkout .shipping-payment input[value="paypal_googlepay"] + span::after {
  content: "Fast checkout with your Google account" !important;
}

html.route-checkout-checkout .shipping-payment input[value="stripe"] + span::after {
  content: "Secure credit or debit card payment" !important;
}

html.route-checkout-checkout .shipping-payment input[value="paypal_paylater"] + span::after {
  content: "Buy now and pay over time where eligible" !important;
}

html.route-checkout-checkout .shipping-payment .section-payment label img {
  display: block !important;
  max-width: 100px !important;
  max-height: 28px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Payment card: radio | official brand mark | title and description */
html.route-checkout-checkout .shipping-payment .section-payment .radio > label {
  grid-template-columns: 24px 112px minmax(0, 1fr) !important;
  gap: 12px !important;
}

html.route-checkout-checkout .shipping-payment .section-payment .radio > label::before {
  content: "" !important;
  align-self: stretch !important;
  display: block !important;
  min-height: 36px !important;
  padding-right: 12px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  border-right: 1px solid #e2e7ea !important;
}

html.route-checkout-checkout .shipping-payment .section-payment .radio > label:has(input[value="stripe"])::before {
  background-image: url('../image/enginesdiy-payments/stripe.svg') !important;
}

html.route-checkout-checkout .shipping-payment .section-payment .radio > label:has(input[value="paypal"])::before {
  background-image: url('../image/enginesdiy-payments/paypal.svg') !important;
}

html.route-checkout-checkout .shipping-payment .section-payment .radio > label:has(input[value="paypal_googlepay"])::before {
  background-image: url('../image/enginesdiy-payments/google-pay.svg') !important;
}

html.route-checkout-checkout .shipping-payment .section-payment .radio > label:has(input[value="paypal_paylater"])::before {
  background-image: url('../image/enginesdiy-payments/paypal-pay-later.svg') !important;
}

html.route-checkout-checkout .shipping-payment .section-payment label > span {
  font-size: 0 !important;
}

html.route-checkout-checkout .shipping-payment .section-payment label > span > img,
html.route-checkout-checkout .shipping-payment .section-payment .paypal-message {
  display: none !important;
}

html.route-checkout-checkout .shipping-payment .section-payment label > span::before {
  display: block !important;
  color: #172633 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

html.route-checkout-checkout .shipping-payment input[value="stripe"] + span::before {
  content: "Credit or debit card" !important;
}

html.route-checkout-checkout .shipping-payment input[value="paypal"] + span::before {
  content: "PayPal" !important;
}

html.route-checkout-checkout .shipping-payment input[value="paypal_googlepay"] + span::before {
  content: "Google Pay" !important;
}

html.route-checkout-checkout .shipping-payment input[value="paypal_paylater"] + span::before {
  content: "PayPal Pay Later" !important;
}

html.route-checkout-checkout .shipping-payment .paypal-message,
html.route-checkout-checkout .shipping-payment .paypal-message-container {
  max-width: 100% !important;
  overflow: hidden !important;
}

@media (max-width: 767px) {
  html.route-checkout-checkout .checkout-section.shipping-payment {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
    padding: 18px !important;
  }

  html.route-checkout-checkout .shipping-payment .radio > label {
    min-height: 64px !important;
    padding: 12px 14px !important;
  }

  html.route-checkout-checkout .shipping-payment .section-payment .radio > label {
    grid-template-columns: 22px 86px minmax(0, 1fr) !important;
    gap: 10px !important;
  }
}

@media (max-width: 390px) {
  html.route-checkout-checkout .shipping-payment .section-payment .radio > label {
    grid-template-columns: 20px 68px minmax(0, 1fr) !important;
    padding: 11px 10px !important;
    gap: 8px !important;
  }
}

/* v2 exact reference layout: shipping/payment selector board */
html.route-checkout-checkout .checkout-section.shipping-payment {
  grid-template-columns: minmax(300px, 338px) minmax(440px, 1fr) !important;
  align-items: start !important;
  gap: 16px !important;
  max-width: 928px !important;
  margin: 0 auto 24px !important;
  padding: 28px 30px 40px !important;
  background: #f0f2f3 !important;
  border: 0 !important;
  border-radius: 4px !important;
}

html.route-checkout-checkout .shipping-payment .section-title {
  margin-bottom: 22px !important;
  color: #122538 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}

html.route-checkout-checkout .shipping-payment .section-body {
  gap: 12px !important;
}

html.route-checkout-checkout .shipping-payment .radio > label {
  min-height: 64px !important;
  padding: 10px 14px !important;
  background: #fff !important;
  border: 1px solid #d5dde4 !important;
  border-radius: 9px !important;
  box-shadow: 0 1px 2px rgba(20,37,53,.04) !important;
  transform: none !important;
}

html.route-checkout-checkout .shipping-payment .radio > label:hover {
  border-color: #8bb8ff !important;
  box-shadow: 0 3px 10px rgba(29,107,255,.08) !important;
}

html.route-checkout-checkout .shipping-payment .radio > label:has(input:checked) {
  background: #fff !important;
  border-color: #287dff !important;
  box-shadow: 0 0 0 1px rgba(40,125,255,.12) !important;
}

html.route-checkout-checkout .shipping-payment input[type="radio"] {
  width: 18px !important;
  height: 18px !important;
  border-color: #7d8993 !important;
}

html.route-checkout-checkout .shipping-payment input[type="radio"]::before {
  width: 10px !important;
  height: 10px !important;
  background: #287dff !important;
}

html.route-checkout-checkout .shipping-payment input[type="radio"]:checked {
  border-color: #287dff !important;
}

/* Shipping: radio | icon/logo | title & description | live price */
html.route-checkout-checkout .shipping-payment .section-shipping .radio > label,
html.route-checkout-checkout .shipping-payment .section-shipping .radio > label:has(input[value="flat.flat"]) {
  grid-template-columns: 24px 74px minmax(0, 1fr) 52px !important;
  gap: 8px !important;
}

html.route-checkout-checkout .shipping-payment .section-shipping .radio > label > input[type="radio"] {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

html.route-checkout-checkout .shipping-payment .section-shipping .radio > label::before {
  content: "" !important;
  align-self: stretch !important;
  display: block !important;
  min-height: 34px !important;
  padding-right: 10px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  border-right: 1px solid #e2e7ea !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
}

html.route-checkout-checkout .shipping-payment .section-shipping .radio > label:has(input[value="free.free"])::before {
  background-image: url('../image/enginesdiy-payments/shipping-truck.svg') !important;
}

html.route-checkout-checkout .shipping-payment .section-shipping .radio > label:has(input[value="flat.flat"])::before {
  background-image: url('../image/enginesdiy-payments/fedex.svg') !important;
}

html.route-checkout-checkout .shipping-payment .section-shipping label > span {
  font-size: 0 !important;
  grid-column: 3 !important;
  grid-row: 1 !important;
}

html.route-checkout-checkout .shipping-payment .section-shipping label > span::before {
  display: block !important;
  color: #122538 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

html.route-checkout-checkout .shipping-payment input[value="free.free"] + span::before {
  content: "Free Shipping" !important;
}

html.route-checkout-checkout .shipping-payment input[value="flat.flat"] + span::before {
  content: "FedEx" !important;
}

html.route-checkout-checkout .shipping-payment input[value="free.free"] + span::after {
  content: "Standard delivery with no shipping fee" !important;
}

html.route-checkout-checkout .shipping-payment input[value="flat.flat"] + span::after {
  content: "Tracked delivery service" !important;
}

html.route-checkout-checkout .shipping-payment .section-shipping .radio > label::after {
  justify-self: end !important;
  color: #122538 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  grid-column: 4 !important;
  grid-row: 1 !important;
}

html.route-checkout-checkout .shipping-payment .section-shipping .radio > label:has(input[value="free.free"])::after {
  content: attr(data-shipping-price) !important;
}

html.route-checkout-checkout .shipping-payment .section-shipping .radio > label:has(input[value="flat.flat"])::after {
  content: attr(data-shipping-price) !important;
}

/* Payment: radio | official mark | title and description */
html.route-checkout-checkout .shipping-payment .section-payment .radio > label {
  grid-template-columns: 24px 112px minmax(0, 1fr) !important;
  gap: 12px !important;
}

html.route-checkout-checkout .shipping-payment .section-payment .radio > label > input[type="radio"] {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

html.route-checkout-checkout .shipping-payment .section-payment .radio > label::before {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 112px !important;
  background-size: 96px auto !important;
}

html.route-checkout-checkout .shipping-payment .section-payment .radio > label > span {
  grid-column: 3 !important;
  grid-row: 1 !important;
}

@media (max-width: 900px) {
  html.route-checkout-checkout .checkout-section.shipping-payment {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 560px !important;
    gap: 26px !important;
    padding: 22px !important;
  }
}

@media (max-width: 480px) {
  html.route-checkout-checkout .checkout-section.shipping-payment {
    padding: 16px !important;
  }

  html.route-checkout-checkout .shipping-payment .section-shipping .radio > label,
  html.route-checkout-checkout .shipping-payment .section-shipping .radio > label:has(input[value="flat.flat"]) {
    grid-template-columns: 20px 58px minmax(0, 1fr) 44px !important;
    gap: 7px !important;
    padding: 10px !important;
  }

  html.route-checkout-checkout .shipping-payment .section-payment .radio > label {
    grid-template-columns: 20px 74px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  html.route-checkout-checkout .shipping-payment .section-payment .radio > label::before {
    min-width: 74px !important;
    background-size: 68px auto !important;
  }
}