/**
 * MIU Premium DS — Phase 6: cart & checkout visual only.
 * Loads last on cart/checkout (after hl-checkout + Montonio). No JS / payment logic.
 */

/* ---- Checkout steps (petrol accents, not HL mustard) ---- */
body#checkout .checkout-step .step-number,
body#checkout section.checkout-step.-reachable.-current .step-number {
  background-color: var(--miu-color-focus) !important;
}

#checkout .checkout-step .step-title i.done,
#checkout .checkout-step.-complete .step-title {
  color: var(--miu-color-focus) !important;
}

body#checkout input[type="radio"]:checked + span.custom-radio,
body#checkout .custom-radio input[type="radio"]:checked + span,
.delivery-option input[type="radio"]:checked + label .custom-radio,
body#checkout .custom-radio i,
body#checkout .custom-radio input[type="radio"]:checked + span::after {
  background-color: var(--miu-color-focus) !important;
}

.custom-radio:hover,
input[type="radio"]:checked + .custom-radio {
  border-color: var(--miu-color-focus) !important;
}

/* Selected carrier / address / payment tiles */
.address-item.selected,
body#checkout section.checkout-step .delivery-options input[type="radio"]:checked + label,
.payment-options .payment-option input[type="radio"]:checked + label,
.payment-option.selected {
  border-color: var(--miu-color-focus) !important;
  background-color: var(--miu-color-surface-subtle) !important;
  box-shadow: 0 0 0 1px var(--miu-color-focus) inset !important;
}

body#checkout section.checkout-step {
  border-color: var(--miu-color-border-subtle) !important;
  border-radius: var(--miu-radius-lg) !important;
  box-shadow: var(--miu-shadow-soft) !important;
}

/* Primary CTAs */
body#checkout .btn-primary,
body#checkout #payment-confirmation .btn-primary,
body#checkout #hl-final-checkout .hl-pay-cta,
body#cart .btn-primary,
body#cart .cart-detailed-actions .btn,
body#cart a.btn-primary {
  background: var(--miu-color-primary-action) !important;
  border-color: var(--miu-color-primary-action) !important;
  border-radius: var(--miu-radius-md) !important;
  font-weight: 700;
}

body#checkout .btn-primary:hover,
body#checkout #payment-confirmation .btn-primary:hover,
body#checkout #hl-final-checkout .hl-pay-cta:hover,
body#cart .btn-primary:hover {
  background: var(--miu-color-primary-action-hover) !important;
  border-color: var(--miu-color-primary-action-hover) !important;
}

body#cart .cart-summary,
body#cart .card.cart-summary {
  border-color: var(--miu-color-border-subtle) !important;
  border-radius: var(--miu-radius-lg) !important;
  box-shadow: var(--miu-shadow-soft) !important;
}

body#cart .cart-summary-line .value,
body#cart .product-price,
body#checkout .cart-summary-line .value {
  color: var(--miu-color-price);
  font-weight: 700;
}

/* Montonio bank tiles — petrol selection ring (layout unchanged) */
body#checkout #montonio-payments-checkout .montonio-bank.montonio-bank-active,
body#checkout #montonio-payments-checkout .montonio-bank.montonio-bank-item--selected,
body#checkout #montonio-payments-checkout .montonio-bank[aria-pressed="true"],
body#checkout #montonio-payments-checkout .montonio-bank[aria-selected="true"],
body#checkout #montonio-payments-checkout .montonio-bank.selected,
body#checkout #montonio-payments-checkout .montonio-bank.is-selected {
  border-color: var(--miu-color-focus) !important;
  background: var(--miu-color-hover) !important;
  background-color: var(--miu-color-hover) !important;
  box-shadow: 0 0 0 1px rgba(93, 162, 176, 0.35) !important;
}

body#checkout #montonio-payments-checkout .montonio-bank.montonio-bank-active:hover,
body#checkout #montonio-payments-checkout .montonio-bank.montonio-bank-item--selected:hover {
  border-color: var(--miu-color-focus) !important;
  background: var(--miu-color-active) !important;
  background-color: var(--miu-color-active) !important;
}

/* DPD search highlights */
body#checkout .miu-dpd-results__item:hover,
body#checkout .miu-dpd-results__item.is-selected {
  background: var(--miu-color-hover) !important;
  background-color: var(--miu-color-hover) !important;
}

body#checkout .miu-dpd-street-wrap--open .miu-dpd-search {
  border-color: var(--miu-color-focus) !important;
}

/* Compact cart toast */
#blockcart-modal .blockcart-modal__price,
#blockcart-modal .product-price {
  color: var(--miu-color-price) !important;
}

#blockcart-modal .hl-bc-btn-checkout,
#blockcart-modal .modal-footer .btn-primary {
  background: var(--miu-color-primary-action) !important;
  border-color: var(--miu-color-primary-action) !important;
}

#blockcart-modal .hl-bc-btn-checkout:hover,
#blockcart-modal .modal-footer .btn-primary:hover {
  background: var(--miu-color-primary-action-hover) !important;
  border-color: var(--miu-color-primary-action-hover) !important;
}

#blockcart-modal .modal-content {
  border-color: var(--miu-color-border-hairline) !important;
  border-radius: var(--miu-radius-lg) !important;
  box-shadow: var(--miu-shadow-panel) !important;
}

/* Checkout minimal header */
.hl-checkout-header__secure {
  color: var(--miu-color-text-muted);
  font-size: var(--miu-text-small);
}

.hl-checkout-header__back,
.hl-checkout-header__login {
  color: var(--miu-color-link);
  font-weight: 600;
}

.hl-checkout-header__back:hover,
.hl-checkout-header__login:hover {
  color: var(--miu-color-link-hover);
}

/* ---- HL OPC (hlcheckout.css loads at priority 200 — these must win) ---- */
body#checkout #checkout-personal-information-step > .step__title::before,
body#checkout #checkout-delivery-step > .step__title::before,
body#checkout #checkout-payment-step > .step__title::before {
  color: #fff !important;
  background: var(--miu-color-focus) !important;
}

body#checkout .hl-pay-cta,
body#checkout #payment-confirmation button.btn-primary {
  background: var(--miu-color-primary-action) !important;
  border-radius: var(--miu-radius-md) !important;
}

body#checkout .hl-pay-cta:hover:not(.disabled):not(:disabled),
body#checkout #payment-confirmation button.btn-primary:hover:not(.disabled):not(:disabled) {
  background: var(--miu-color-primary-action-hover) !important;
}

body#checkout #checkout-payment-step .form-check-input:checked,
body#checkout #checkout-delivery-step .form-check-input:checked,
body#checkout .delivery-options input[type="radio"]:checked,
body#checkout .hl-final-checkout__terms .form-check-input:checked {
  background-color: var(--miu-color-focus) !important;
  border-color: var(--miu-color-focus) !important;
}

body#checkout .payment-option:has(input:checked) .payment-option__label,
body#checkout .payment-option input:checked + .payment-option__label,
body#checkout .payment-option input:checked + label {
  border-color: var(--miu-color-focus) !important;
  background: var(--miu-color-hover) !important;
}

body#checkout .hl-final-checkout__terms .form-check-label a,
body#checkout .hl-final-checkout__terms .form-check-label .js-terms {
  color: var(--miu-color-link) !important;
}

body#checkout #montonio-payments-checkout button[aria-pressed="true"],
body#checkout #montonio-payments-checkout button[aria-selected="true"],
body#checkout #montonio-payments-checkout .montonio-bank-item--selected,
body#checkout #montonio-payments-checkout .montonio-bank.montonio-bank-active,
body#checkout #montonio-payments-checkout .montonio-bank.montonio-bank-item--selected {
  border-color: var(--miu-color-focus) !important;
  background-color: var(--miu-color-hover) !important;
  box-shadow: 0 0 0 1px rgba(93, 162, 176, 0.35) !important;
}

body#checkout .hl-free-ship__icon .material-icons,
body#checkout .hl-free-ship__remain {
  color: var(--miu-color-focus) !important;
}

body#checkout .hl-free-ship__fill {
  background: linear-gradient(
    90deg,
    var(--miu-color-primary-action-hover) 0%,
    var(--miu-color-focus) 50%,
    var(--miu-color-primary-action-hover) 100%
  ) !important;
  box-shadow: 0 0 10px rgba(93, 162, 176, 0.35) !important;
}

/* ---- OPC cart offer + carrier cubes (after hlcheckout.css) ---- */
body#checkout #hl-opc-cart-offer {
  border-top: 1px solid #e4ddd2;
  background: #faf9f6;
  padding: 12px 28px 14px;
}

body#checkout #hl-opc-cart-offer[hidden] {
  display: none !important;
}

body#checkout #hl-opc-cart-offer .miu-eta-jump {
  margin-top: 0;
}

body#checkout.hl-phone-missing #checkout-delivery-step,
body#checkout.hl-phone-missing #js-delivery {
  opacity: 1 !important;
  pointer-events: auto !important;
  filter: none !important;
}

body#checkout .hl-extra-ship-slot {
  width: 100%;
  margin: 14px 0 0;
}

body#checkout.hl-opc #js-delivery .delivery-options__list {
  display: grid !important;
  grid-template-columns: repeat(var(--miu-carrier-cols, 3), minmax(0, 1fr)) !important;
  grid-template-rows: auto auto !important;
  align-items: start !important;
  gap: 12px 8px !important;
}

body#checkout.hl-opc #js-delivery .delivery-options__list > .delivery-option__item:not(.miu-courier-folded) {
  display: contents !important;
}

body#checkout.hl-opc #js-delivery .delivery-option__item.miu-courier-folded {
  display: none !important;
}

body#checkout.hl-opc #js-delivery .delivery-option__label.miu-ship-dressed {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 108px !important;
  height: 108px !important;
  max-height: 108px !important;
  margin: 0 !important;
  padding: 8px !important;
  border: 1px solid #e1e7e8 !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
  text-align: center !important;
  gap: 0 !important;
}

body#checkout.hl-opc #js-delivery .delivery-option__item:has(input:checked) .delivery-option__label.miu-ship-dressed,
body#checkout.hl-opc #js-delivery .delivery-option__label.miu-ship-dressed:has(+ input:checked) {
  border-color: #5da2b0 !important;
  background: #f0f7f8 !important;
}

body#checkout.hl-opc #js-delivery .delivery-option__item:has(input:checked) .delivery-option__label.miu-ship-dressed {
  border-color: #5da2b0 !important;
  background: #f0f7f8 !important;
}

body#checkout.hl-opc #js-delivery .delivery-option__extra {
  grid-column: 1 / -1 !important;
  margin: 0 !important;
}

@media (max-width: 599.98px) {
  body#checkout #hl-opc-cart-offer {
    padding: 12px 16px 14px;
  }

  body#checkout.hl-opc #js-delivery .delivery-options__list {
    grid-template-columns: repeat(var(--miu-carrier-cols, 3), minmax(0, 1fr)) !important;
  }
}