/* Order Summary - Enhanced with Collapsible Feature */

/* ============================================
   SUMMARY CONTAINER
   ============================================ */
.cod-summary {
  background: var(--cod-surface-secondary, #f9fafb);
  border: 2px solid var(--cod-border-default, #e5e7eb);
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
}

/* ============================================
   SUMMARY HEADER (TOGGLE)
   ============================================ */
.summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg, 16px) var(--spacing-xl, 20px);
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s ease;
}

.summary-header:hover {
  background: var(--cod-surface-hover, #f3f4f6);
}

.summary-title {
  font-size: var(--font-size-base, 15px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--cod-text, #052f1b);
}

.summary-toggle-icon {
  width: 20px;
  height: 20px;
  color: var(--cod-text-secondary, #374151);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

/* Rotate icon when collapsed */
.cod-summary.collapsed .summary-toggle-icon {
  transform: rotate(-180deg);
}

/* ============================================
   SUMMARY CONTENT (COLLAPSIBLE)
   ============================================ */
.summary-content {
  padding: 0 var(--spacing-xl, 20px) var(--spacing-xl, 20px);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md, 12px);
  max-height: 500px;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;
  opacity: 1;
}

/* Collapsed state */
.cod-summary.collapsed .summary-content {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
}

/* ============================================
   SUMMARY ROWS
   ============================================ */
.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-size-base, 15px);
  color: var(--cod-text-secondary, #374151);
  line-height: var(--line-height-normal, 1.5);
}

.summary-row span:first-child {
  font-weight: var(--font-weight-medium, 500);
}

.summary-row span:last-child {
  font-weight: var(--font-weight-semibold, 600);
  color: var(--cod-text, #052f1b);
}

/* ============================================
   TOTAL ROW (EMPHASIZED)
   ============================================ */
.summary-row.total-row {
  padding-top: var(--spacing-md, 12px);
  border-top: 2px solid var(--cod-border-default, #e5e7eb);
  font-size: var(--font-size-lg, 16px);
}

.summary-row.total-row span:first-child {
  font-weight: var(--font-weight-semibold, 600);
  color: var(--cod-text, #052f1b);
}

.summary-row.total-row strong {
  font-size: var(--font-size-2xl, 20px);
  font-weight: var(--font-weight-bold, 700);
  color: var(--cod-primary, #0adb62);
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 768px) {
  .summary-header {
    padding: var(--spacing-md, 12px) var(--spacing-lg, 16px);
  }

  .summary-content {
    padding: 0 var(--spacing-lg, 16px) var(--spacing-lg, 16px);
  }

  .summary-row {
    font-size: var(--font-size-sm, 14px);
  }

  .summary-row.total-row {
    font-size: var(--font-size-base, 15px);
  }

  .summary-row.total-row strong {
    font-size: var(--font-size-xl, 18px);
  }
}

@media (max-width: 480px) {
  .summary-content {
    gap: var(--spacing-sm, 8px);
  }
}