/* =============================================================
   OPC (One-Page Checkout) — design-aligned card headers & confirm
   Scoped under .opc-base so it only affects the checkout page.
   Pure CSS restyle of existing markup; no JS hooks are touched.
   Design reference: muban/pages/One-Page Checkout.html
   ============================================================= */

/* ---- Section cards: clip the header to full width ---- */
.opc-base #checkoutOneBillto,
.opc-base #checkoutOneShipto,
.opc-base #checkoutShippingMethod,
.opc-base #checkoutPaymentMethod {
  overflow: hidden;
  margin-bottom: 16px;
}

/* ---- Convert each section <h2> into the design's card header bar ---- */
.opc-base #checkoutOneBillto > h2,
.opc-base #checkoutOneShipto > h2,
.opc-base #checkoutShippingMethod > h2,
.opc-base #checkoutPaymentMethod > h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  /* pull the header to the card edges (cancel the p-5 padding) + 20px gap */
  margin: -20px -20px 20px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  background: transparent;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

/* ---- Icon chip (design: 36x36, radius 10, brand-light bg) ---- */
.opc-base #checkoutOneBillto > h2::before,
.opc-base #checkoutOneShipto > h2::before,
.opc-base #checkoutShippingMethod > h2::before,
.opc-base #checkoutPaymentMethod > h2::before {
  content: '';
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background-color: var(--brand-light);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
}

/* per-section lucide icon (stroke = brand #B82B5E) */
.opc-base #checkoutOneBillto > h2::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23B82B5E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}
.opc-base #checkoutOneShipto > h2::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23B82B5E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/%3E%3Cpath d='M15 18H9'/%3E%3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.62l-3.48-4.35A1 1 0 0 0 17.52 8H14'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3C/svg%3E");
}
.opc-base #checkoutShippingMethod > h2::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23B82B5E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7.5 4.27 9 5.15'/%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E");
}
.opc-base #checkoutPaymentMethod > h2::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23B82B5E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='5' rx='2'/%3E%3Cline x1='2' x2='22' y1='10' y2='10'/%3E%3Cline x1='6' x2='6' y1='14' y2='14'/%3E%3C/svg%3E");
}

/* ---- Order summary header already has an inline icon; ensure the divider matches ---- */
.opc-base #checkoutOneShoppingCart > div:first-child {
  border-bottom: 1px solid var(--line);
}

/* ---- Confirm / Review buttons -> design .btn-confirm ---- */
.opc-base #opc-order-confirm button,
.opc-base #opc-order-review button {
  border-radius: var(--r-lg);
  font-weight: 600;
  padding: 16px 28px;
  box-shadow: var(--shadow-2);
  transition: background .2s, transform .2s, box-shadow .2s;
}
.opc-base #opc-order-confirm button:hover,
.opc-base #opc-order-review button:hover {
  background: var(--brand-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}

/* ---- Confirmation-email + secure note (design) ---- */
.opc-base #checkoutOneEmail {
  font-size: 12.5px;
  color: var(--ink-3);
  text-align: left;
}
.opc-base #checkoutOneSubmit::after {
  content: ' Secure encrypted checkout';
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--ink-3);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23A8A3AA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 14px 14px;
  padding-left: 20px;
  width: max-content;
  margin-left: auto;
  margin-right: auto;
}

/* ---- Mobile specifics: single column already via grid; tighten gaps ---- */
@media (max-width: 767px) {
  .opc-base .grid.grid-cols-1.lg\:grid-cols-\[1\.17fr_1fr\] {
    gap: 16px;
  }
  .opc-base #checkoutOneLeft,
  .opc-base #checkoutOneRight {
    gap: 16px;
  }
  /* full-width confirm on phones */
  .opc-base #opc-order-confirm button,
  .opc-base #opc-order-review button {
    max-width: 100%;
  }
}