/* ============================================================
   Order Confirmation Page Templates — ADDITIVE, DESIGN-ONLY.
   Order data, Google Ads / Facebook / GA conversion tracking,
   order-status sync, IP capture, and the "Track Your Order" /
   "Continue Shopping" actions are completely untouched by this
   file. This file only changes spacing, colors, borders, radii
   and the visual arrangement of the confirmation card, purely
   with CSS.

   Controlled by the `data-confirmation-template="<id>"` attribute
   set on the page's outer container div, based on
   Settings > Checkout > "Order Confirmation Page Template". The id
   is one of: default | timeline | receipt | celebration

   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.
   ============================================================ */

/* ---------------------------------------------------------------
   Timeline — a numbered step-rail down the details section, a
   soft glow ring behind the success icon, numbered/outlined
   product rows.
   --------------------------------------------------------------- */
div[data-confirmation-template="timeline"] .rounded-2xl {
  border-radius: 20px !important;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.1) !important;
  border-top: 4px solid hsl(var(--primary)) !important;
}
div[data-confirmation-template="timeline"] .rounded-2xl > div > div:nth-child(1) {
  box-shadow: 0 0 0 10px hsl(var(--primary) / 0.08);
  border-radius: 999px;
}
div[data-confirmation-template="timeline"] .rounded-2xl > div > div:nth-child(6) {
  counter-reset: conf-step;
}
div[data-confirmation-template="timeline"] .rounded-2xl > div > div:nth-child(6) > h2 {
  text-align: left !important;
  padding-left: 0 !important;
  border-bottom-width: 2px !important;
  border-bottom-color: hsl(var(--primary) / 0.3) !important;
}
div[data-confirmation-template="timeline"] .rounded-2xl > div > div:nth-child(6) > *:nth-child(n + 2) {
  position: relative;
  padding-left: 24px !important;
  border-left: 2px solid hsl(var(--primary) / 0.25);
  margin-left: 7px;
  padding-bottom: 16px;
}
div[data-confirmation-template="timeline"] .rounded-2xl > div > div:nth-child(6) > *:nth-child(n + 2):last-child {
  border-left-color: transparent;
}
div[data-confirmation-template="timeline"] .rounded-2xl > div > div:nth-child(6) > *:nth-child(n + 2)::before {
  counter-increment: conf-step;
  content: counter(conf-step);
  position: absolute;
  left: -10px;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
div[data-confirmation-template="timeline"] .rounded-2xl > div > div:nth-child(6) .rounded-lg.border {
  border-color: hsl(var(--primary) / 0.2) !important;
  background: transparent !important;
  border-radius: 12px !important;
}
div[data-confirmation-template="timeline"] .mt-5 button {
  border-radius: 999px !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 800 !important;
}

/* ---------------------------------------------------------------
   Receipt — flat, minimal, printed-invoice look: dashed
   separators, squared corners, no shadows, single-column info,
   line-item style product rows.
   --------------------------------------------------------------- */
div[data-confirmation-template="receipt"] .rounded-2xl {
  border-radius: 6px !important;
  box-shadow: none !important;
  border: none !important;
  border-top: 3px double hsl(var(--foreground) / 0.4) !important;
  border-bottom: 3px double hsl(var(--foreground) / 0.4) !important;
}
div[data-confirmation-template="receipt"] .rounded-2xl > div > div:nth-child(1) {
  transform: scale(0.75);
}
div[data-confirmation-template="receipt"] .rounded-2xl > div > h1 {
  font-size: 1.15rem !important;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
div[data-confirmation-template="receipt"] .mb-5.grid-cols-3.gap-2.rounded-xl.border.p-3 {
  border-radius: 0 !important;
  border-style: dashed !important;
  background: transparent !important;
  box-shadow: none !important;
}
div[data-confirmation-template="receipt"] .rounded-2xl > div > div:nth-child(6) > h2 {
  border-bottom-style: dashed !important;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.95rem !important;
  letter-spacing: 0.08em;
}
div[data-confirmation-template="receipt"] .rounded-2xl > div > div:nth-child(6) .rounded-lg.border {
  border: none !important;
  border-bottom: 1px dashed hsl(var(--border)) !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
div[data-confirmation-template="receipt"] .rounded-2xl > div > div:nth-child(6) .rounded-lg.border img {
  width: 34px !important;
  height: 34px !important;
  border-radius: 4px !important;
}
div[data-confirmation-template="receipt"] .space-y-2.border-b.border-t {
  border-style: dashed !important;
}
div[data-confirmation-template="receipt"] .rounded-2xl > div > div:nth-child(6) > div:nth-child(4) {
  background: transparent !important;
  border-top: 2px double hsl(var(--foreground) / 0.4) !important;
  border-bottom: 2px double hsl(var(--foreground) / 0.4) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 0;
}
div[data-confirmation-template="receipt"] .mt-4.grid.gap-4.py-4.md\:grid-cols-2 {
  grid-template-columns: 1fr !important;
}
div[data-confirmation-template="receipt"] .rounded-2xl > div > div:nth-child(6) > div:nth-child(5) > div {
  border-radius: 0 !important;
  border-style: dashed !important;
  background: transparent !important;
}
div[data-confirmation-template="receipt"] .mt-3.rounded-xl.border.p-3 {
  border-radius: 0 !important;
  border-style: dashed !important;
  background: transparent !important;
  border-color: hsl(var(--border)) !important;
}
div[data-confirmation-template="receipt"] .mt-3.rounded-xl.border.p-3 * {
  color: hsl(var(--muted-foreground)) !important;
}
div[data-confirmation-template="receipt"] .mt-5 button {
  border-radius: 3px !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  box-shadow: none !important;
}

/* ---------------------------------------------------------------
   Celebration — bold, colorful and rounded: a glowing success
   icon, chip-style info cards, elevated product cards and a
   gradient total bar.
   --------------------------------------------------------------- */
div[data-confirmation-template="celebration"] .rounded-2xl {
  border-radius: 28px !important;
  box-shadow: 0 14px 40px hsl(var(--primary) / 0.18) !important;
  border: none !important;
}
div[data-confirmation-template="celebration"] .rounded-2xl > div > div:nth-child(1) {
  box-shadow: 0 0 0 14px hsl(var(--primary) / 0.1), 0 0 0 28px hsl(var(--primary) / 0.05);
  border-radius: 999px;
  padding: 6px;
}
div[data-confirmation-template="celebration"] .rounded-2xl > div > h1 {
  font-size: 1.9rem !important;
  letter-spacing: -0.01em;
}
div[data-confirmation-template="celebration"] .mb-5.grid-cols-3.gap-2.rounded-xl.border.p-3 {
  background: transparent !important;
  border: none !important;
  gap: 10px !important;
}
div[data-confirmation-template="celebration"] .mb-5.grid-cols-3.gap-2.rounded-xl.border.p-3 > div {
  background: hsl(var(--primary) / 0.06) !important;
  border-radius: 16px !important;
  padding: 12px 6px !important;
}
div[data-confirmation-template="celebration"] .rounded-2xl > div > div:nth-child(6) .rounded-lg.border {
  border: none !important;
  border-radius: 18px !important;
  background: hsl(var(--muted)) !important;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.06) !important;
  padding: 12px !important;
}
div[data-confirmation-template="celebration"] .rounded-2xl > div > div:nth-child(6) .rounded-lg.border img {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
}
div[data-confirmation-template="celebration"] .mb-4.space-y-2 {
  gap: 10px;
  display: flex;
  flex-direction: column;
}
div[data-confirmation-template="celebration"] .rounded-2xl > div > div:nth-child(6) > div:nth-child(4) {
  border-radius: 18px !important;
  background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--primary) / 0.75) 100%) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 16px !important;
}
div[data-confirmation-template="celebration"] .rounded-2xl > div > div:nth-child(6) > div:nth-child(4) * {
  color: hsl(var(--primary-foreground)) !important;
}
div[data-confirmation-template="celebration"] .rounded-2xl > div > div:nth-child(6) > div:nth-child(5) > div {
  border: none !important;
  border-radius: 18px !important;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.06) !important;
}
div[data-confirmation-template="celebration"] .mt-3.rounded-xl.border.p-3 {
  border: none !important;
  border-radius: 16px !important;
}
div[data-confirmation-template="celebration"] .mt-5 button {
  border-radius: 999px !important;
  font-weight: 800 !important;
  padding-left: 2.5rem !important;
  padding-right: 2.5rem !important;
  box-shadow: 0 8px 20px hsl(var(--primary) / 0.35) !important;
}