/* ==========================================================================
   FlagsExpo redesign V1 (no Figma frame supplied) — Order Confirmation page
   (CompleteOrder.aspx / Controls/OrderDetailsControl.ascx). Adapts styling
   only — the control's C#-generated markup (.data/.red/.number classes)
   is left untouched, just restyled.
   ========================================================================== */

.v2-oc, .v2-oc * { box-sizing: border-box; font-family: var(--v2-font); }

.v2-oc-title { font-family: var(--v2-font-display); font-weight: 500; font-size: 40px; color: #021433; margin: 0 0 32px; }

.v2-oc-grid { display: flex; gap: 24px; margin-bottom: 24px; flex-wrap: wrap; }
.v2-oc-card { flex: 1 1 300px; background: #fff; border: 1px solid #efefef; }
.v2-oc-card-title { background: var(--v2-navy); color: #fff; padding: 12px 20px; font-family: var(--v2-font-display); font-weight: 500; font-size: 16px; }
.v2-oc-card-body { padding: 20px; font-size: 14px; line-height: 1.7; color: #021433; }
.v2-oc-card-body .data { margin-bottom: 4px; }
.v2-oc-card-body .data span { font-weight: 600; color: #021433; margin-right: 4px; }
.v2-oc-card-body a { color: var(--v2-navy); }

.v2-oc-contact { display: flex; flex-direction: column; gap: 4px; }
.v2-oc-logo { width: 160px; height: auto; margin-bottom: 12px; }

.v2-oc-orderdetails { margin-bottom: 24px; }
.v2-oc-items { width: 100%; border-collapse: collapse; }
.v2-oc-items th { text-align: left; font-size: 13px; font-weight: 600; color: #888a8f; text-transform: uppercase; letter-spacing: 0.4px; padding: 0 12px 12px; border-bottom: 1px solid #efefef; }
.v2-oc-items th.number { text-align: right; }
.v2-oc-items td { padding: 16px 12px; border-bottom: 1px solid #efefef; font-size: 14px; color: #021433; vertical-align: middle; }
.v2-oc-items td.number { text-align: right; }
.v2-oc-items img { width: 64px; height: 64px; object-fit: contain; background: #f9f9f9; }
.v2-oc-items .red { font-weight: 600; color: #b90600; }

.v2-oc-totals .data { display: flex; align-items: center; justify-content: flex-end; gap: 16px; padding: 6px 12px; font-size: 14px; }
.v2-oc-totals .data span { font-weight: 500; color: #888a8f; margin: 0; }
.v2-oc-totals .data label { font-weight: 700; color: #021433; min-width: 100px; text-align: right; }

@media (max-width: 1023px) {
  .v2-oc-grid { flex-direction: column; }
}

@media (max-width: 640px) {
  .v2-oc-title { font-size: 28px; }
  .v2-oc-items th:first-child, .v2-oc-items td:first-child { display: none; }
  .v2-oc-totals .data { justify-content: space-between; }
}