/* Svíčkománie3D – moderní rekapitulace objednávky pro Shoptet.
   Nahrazuje původní order-summary.css. HTML a data-testid ponechte beze změn. */

#summary-box {
  --sv3d-green: #21845b;
  --sv3d-green-dark: #146643;
  --sv3d-ink: #24332b;
  --sv3d-muted: #61716a;
  --sv3d-line: #dce7df;
  --sv3d-soft: #f0faf4;
  background: #fff;
  border: 1px solid #e4ebe6;
  border-radius: 18px;
  box-shadow: 0 8px 30px rgba(30, 62, 42, .055);
  padding: clamp(17px, 2.8vw, 26px);
  color: var(--sv3d-ink);
  font-size: 14px;
  line-height: 1.5;
}

#summary-box > h2,
#summary-box > h2.h4 {
  font-size: clamp(19px, 2vw, 23px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.025em;
  color: var(--sv3d-ink);
  margin: 0 0 8px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--sv3d-line);
}

#summary-box .order-summary-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  margin: 0;
  padding: 15px 0;
  border: 0;
  border-bottom: 1px solid #edf1ee;
  background: transparent;
  color: var(--sv3d-ink);
  font-size: 14px;
}

#summary-box .order-summary-item > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

#summary-box .order-summary-item > div[data-testid="recapItemPrice"],
#summary-box .order-summary-item > div[data-testid="recapItemTotalPrice"] {
  flex: 0 0 auto;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
  color: var(--sv3d-ink);
}

#summary-box .order-summary-item a {
  color: var(--sv3d-ink);
  text-decoration: none;
  font-weight: 750;
  line-height: 1.4;
}

#summary-box .order-summary-item a:hover,
#summary-box .order-summary-item a:focus-visible {
  color: var(--sv3d-green-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

#summary-box [data-testid="recapItemAmount"] {
  display: inline-block;
  margin-right: 3px;
  padding: 2px 6px;
  background: var(--sv3d-soft);
  border-radius: 6px;
  color: var(--sv3d-green-dark);
  font-size: 12px;
  font-weight: 800;
}

#summary-box [data-testid="recapDeliveryMethod"],
#summary-box .order-summary-item [data-testid="recapItemName"] {
  font-weight: 700;
}

/* Product subtotal gets a gentle visual distinction. */
#summary-box .order-summary-item.helper {
  padding: 12px 0;
  color: var(--sv3d-muted);
  font-size: 13px;
}

#summary-box .order-summary-item.helper strong {
  color: var(--sv3d-muted);
  font-weight: 650;
}

/* Overall amount is the clear final action-oriented summary. */
#summary-box .order-summary-item.price {
  display: block;
  padding: 17px 16px;
  margin-top: 16px;
  border: 1px solid #cce7d6;
  border-radius: 13px;
  background: linear-gradient(130deg, #effaf3, #f8fdf9);
}

#summary-box .order-summary-item.price .price-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 0;
}

#summary-box .order-summary-item.price .price-label,
#summary-box .order-summary-item.price .price-primary {
  color: var(--sv3d-green-dark);
  font-weight: 800;
}

#summary-box .order-summary-item.price .price-label {
  font-size: 15px;
  line-height: 1.3;
}

#summary-box .order-summary-item.price strong.price {
  margin: 0;
  font-size: clamp(22px, 2.6vw, 27px);
  letter-spacing: -.03em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

/* Shoptet can populate this placeholder dynamically – retain its visibility. */
#summary-box #shipping-billing-summary:not(:empty) {
  padding-top: 6px;
}

#summary-box .recapitulation-shipping-billing {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  font-size: 13px;
  color: var(--sv3d-muted);
}

#summary-box .recapitulation-shipping-billing-info {
  color: var(--sv3d-ink);
  font-weight: 700;
  text-align: right;
}

@media (max-width: 600px) {
  #summary-box { padding: 16px 13px; border-radius: 14px; }
  #summary-box .order-summary-item { gap: 9px; padding: 13px 0; font-size: 13px; }
  #summary-box .order-summary-item.price { padding: 15px 13px; }
  #summary-box .order-summary-item.price .price-label { font-size: 13px; }
  #summary-box .order-summary-item.price strong.price { font-size: 22px; }
}