<%
  var _totals  = locals.totals  || {};
  var _locale  = locals.locale  || 'tr-TR';
  var _currency = _totals.currency || locals.currency || 'TRY';

  function fmt(amount) {
    return Math.abs(amount).toLocaleString(_locale, { style: 'currency', currency: _currency, minimumFractionDigits: 2, maximumFractionDigits: 2 });
  }

  var lines = [];
  lines.push({ label: 'Subtotal', amount: _totals.subtotal || 0 });
  if (_totals.discountTotal && _totals.discountTotal > 0) lines.push({ label: 'Discount',    amount: -_totals.discountTotal, isDiscount: true });
  if (_totals.taxTotal      && _totals.taxTotal      > 0) lines.push({ label: 'Tax',         amount: _totals.taxTotal });
  if (_totals.serviceFee    && _totals.serviceFee    > 0) lines.push({ label: 'Service Fee', amount: _totals.serviceFee });
  if (_totals.shippingTotal && _totals.shippingTotal > 0) lines.push({ label: 'Shipping',    amount: _totals.shippingTotal });
%>
<div class="rounded-lg border border-border bg-surface-raised p-4 space-y-2<%= locals.className ? ' ' + locals.className : '' %>">
  <% lines.forEach(function(line) { %>
  <div class="flex items-center justify-between text-sm">
    <span class="text-text-secondary"><%= line.label %></span>
    <%- include('./PriceDisplay', {
      amount:   Math.abs(line.amount),
      currency: _currency,
      locale:   _locale,
      className: line.isDiscount ? 'text-success-fg' : ''
    }) %>
  </div>
  <% }); %>

  <div class="flex items-center justify-between pt-3 border-t border-border">
    <span class="text-sm font-semibold text-text-primary">Total</span>
    <%- include('./PriceDisplay', {
      amount:   _totals.total || 0,
      currency: _currency,
      locale:   _locale,
      size:     'lg'
    }) %>
  </div>
</div>