/* ============================================================
   Checkout Page Templates — ADDITIVE, DESIGN-ONLY.
   Every checkout field, validation rule, payment method, shipping
   calculation and the order-placement logic are completely
   untouched by this file. This file only changes spacing, colors,
   borders, radii and (for "modern-split") the left/right column
   order of the checkout page, purely with CSS.

   Controlled by the `data-checkout-template="<id>"` attribute that
   is set on three existing elements in the Checkout page based on
   Settings > Checkout > "Checkout Page Template". The id is one of:
   default | modern-split | compact-cards | elegant-outline

   TO REVERT INSTANTLY: pick "Default" in Settings > Checkout, or
   delete the single <link> line in dist/index.html that loads this
   file, or delete this file. Nothing else needs to change.
   ============================================================ */

/* ---------------------------------------------------------------
   Modern Split — order summary visually on the left, form on the
   right, soft primary-tinted page background, rounder cards with a
   colored top accent on the order-summary card.
   --------------------------------------------------------------- */
@media (min-width: 1024px) {
  form[data-checkout-template="modern-split"] {
    direction: rtl;
  }
  form[data-checkout-template="modern-split"] > div {
    direction: ltr;
  }
}
div[data-checkout-template="modern-split"].container {
  background-image: linear-gradient(180deg, hsl(var(--primary) / 0.05) 0%, transparent 260px);
}
form[data-checkout-template="modern-split"] > div:nth-child(1) > div,
form[data-checkout-template="modern-split"] > div:nth-child(2) > div {
  border-radius: 20px !important;
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.07) !important;
}
form[data-checkout-template="modern-split"] > div:nth-child(2) > div:nth-child(1) {
  border-width: 0 !important;
  border-top: 4px solid hsl(var(--primary)) !important;
}
div[data-checkout-template="modern-split"] .fixed.bottom-0 {
  border-top-width: 2px !important;
  border-top-color: hsl(var(--primary) / 0.35) !important;
}

/* ---------------------------------------------------------------
   Compact Cards — numbered step badges on every section heading,
   sharper corners, tighter card shadow.
   --------------------------------------------------------------- */
form[data-checkout-template="compact-cards"] {
  counter-reset: chk-step;
}
form[data-checkout-template="compact-cards"] > div > div {
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.09), 0 1px 2px rgba(15, 23, 42, 0.05) !important;
}
form[data-checkout-template="compact-cards"] > div:nth-child(1) > div:nth-child(1) h2,
form[data-checkout-template="compact-cards"] > div:nth-child(1) > div:nth-child(2) h2,
form[data-checkout-template="compact-cards"] > div:nth-child(2) > div:nth-child(1) h2,
form[data-checkout-template="compact-cards"] > div:nth-child(2) > div:nth-child(2) h2 {
  position: relative;
  padding-left: 36px;
}
form[data-checkout-template="compact-cards"] > div:nth-child(1) > div:nth-child(1) h2::before,
form[data-checkout-template="compact-cards"] > div:nth-child(1) > div:nth-child(2) h2::before,
form[data-checkout-template="compact-cards"] > div:nth-child(2) > div:nth-child(1) h2::before,
form[data-checkout-template="compact-cards"] > div:nth-child(2) > div:nth-child(2) h2::before {
  counter-increment: chk-step;
  content: counter(chk-step);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
form[data-checkout-template="compact-cards"] > div:nth-child(2) > div:nth-child(3) button[type="submit"] {
  border-radius: 10px !important;
}

/* Order Summary: show the cart products as a vertical list instead
   of the default horizontal scroller. Same items, same buttons
   (remove / qty +/- / image), just rearranged as rows. */
form[data-checkout-template="compact-cards"] .checkout-compact-products {
  display: flex !important;
  flex-direction: column !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  max-width: 100% !important;
  gap: 8px !important;
  padding-right: 0 !important;
}
form[data-checkout-template="compact-cards"] .checkout-compact-products > div {
  width: 100% !important;
  min-width: 100% !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px !important;
  border-radius: 8px !important;
}
/* the small "x{qty}" corner badge is redundant once the qty stepper
   is visible inline in the row, so hide it in list mode */
form[data-checkout-template="compact-cards"] .checkout-compact-products > div > span:nth-child(2) {
  display: none !important;
}
/* product image: fixed small square on the left */
form[data-checkout-template="compact-cards"] .checkout-compact-products > div > button:nth-child(3) {
  width: 56px !important;
  height: 56px !important;
  flex: 0 0 56px !important;
  margin-bottom: 0 !important;
  order: 1;
}
/* product name: grows to fill the middle of the row */
form[data-checkout-template="compact-cards"] .checkout-compact-products > div > button:nth-child(4) {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  text-align: left !important;
  order: 2;
}
form[data-checkout-template="compact-cards"] .checkout-compact-products > div > button:nth-child(4) p {
  min-height: 0 !important;
}
/* quantity +/- stepper: sits right after the name */
form[data-checkout-template="compact-cards"] .checkout-compact-products > div > div:nth-child(5) {
  order: 3;
  flex: 0 0 auto !important;
  margin-bottom: 0 !important;
}
/* price: pinned to the right edge of the row */
form[data-checkout-template="compact-cards"] .checkout-compact-products > div > p:nth-child(6) {
  order: 4;
  flex: 0 0 auto !important;
  min-width: 60px;
  text-align: right !important;
}

/* ---------------------------------------------------------------
   Elegant Outline — minimal, no shadows, bordered cards in the
   theme's primary color, larger uppercase headings and button.
   --------------------------------------------------------------- */
form[data-checkout-template="elegant-outline"] > div > div {
  border-radius: 6px !important;
  border-width: 2px !important;
  border-color: hsl(var(--primary) / 0.35) !important;
  box-shadow: none !important;
}
div[data-checkout-template="elegant-outline"].container {
  background-color: hsl(var(--primary) / 0.03);
}
form[data-checkout-template="elegant-outline"] h2 {
  font-size: 1.3rem !important;
  letter-spacing: 0.01em;
}
form[data-checkout-template="elegant-outline"] > div:nth-child(2) > div:nth-child(3) button[type="submit"] {
  border-radius: 4px !important;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 800 !important;
}
div[data-checkout-template="elegant-outline"] .fixed.bottom-0 button[type="button"]:last-child {
  border-radius: 4px !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}