/* ==========================================================================
   FlagsExpo redesign V1 (no Figma frame supplied) — Order Review /
   Process Confirm page. Reuses the shopping-cart / customer-information
   visual language. Adapts styling only — no functional changes.
   ========================================================================== */

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

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

.v2-pc-error { background: #fdecea; border: 1px solid #b90600; color: #b90600; padding: 20px 24px; margin: 0 0 24px; }
.v2-pc-error h2 { font-family: var(--v2-font-display); font-weight: 500; font-size: 18px; margin: 0 0 8px; }
.v2-pc-error p { margin: 0; font-size: 14px; }

.v2-pc-infoboxes { display: flex; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; }
.v2-pc-infobox { flex: 1 1 260px; background: #fff; border: 1px solid #efefef; }
.v2-pc-infobox-title { background: var(--v2-navy); color: #fff; padding: 12px 20px; font-family: var(--v2-font-display); font-weight: 500; font-size: 16px; }
.v2-pc-infobox-body { padding: 20px; font-size: 14px; line-height: 1.7; color: #021433; }

.v2-pc-head { background: var(--v2-navy); color: #fff; display: flex; align-items: center; gap: 8px; padding: 16px 16px 16px 32px; font-family: var(--v2-font-display); font-weight: 500; font-size: 18px; border: 1px solid #efefef; }
.v2-pc-head-product { flex: 1 1 0; }
.v2-pc-head-meta { display: flex; gap: 40px; flex: 0 0 auto; }
.v2-pc-head-meta span:nth-child(1) { width: 90px; }
.v2-pc-head-meta span:nth-child(2) { width: 96px; }
.v2-pc-head-meta span:nth-child(3) { width: 83px; text-align: right; }

/* Same structure as shoppingcart.css's .v2-cart-row: two top-level blocks
   (product / meta) mirroring .v2-pc-head's own two-part layout exactly —
   .v2-pc-row-meta uses the identical fixed 90/96/83 widths + 40px gap as
   .v2-pc-head-meta, so the columns stay lined up at any viewport width
   instead of drifting apart. */
.v2-pc-row { background: #fff; border: 1px solid #efefef; border-top: none; display: flex; align-items: center; gap: 8px; padding: 20px 16px 20px 0; }
.v2-pc-row-product { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 24px; padding-left: 32px; }

/* Sized to the image, not a fixed box — same fix as .v2-cart-row-media. */
.v2-pc-row-media { background: #f9f9f9; flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 10px; }
.v2-pc-row-media img { max-width: 76px; max-height: 76px; width: auto; height: auto; object-fit: contain; }

.v2-pc-row-name { flex: 1 1 0; min-width: 0; font-family: var(--v2-font-display); font-weight: 500; font-size: 16px; color: #021433; }

.v2-pc-row-meta { flex: 0 0 auto; display: flex; align-items: center; gap: 40px; }
.v2-pc-row-qty { width: 90px; flex-shrink: 0; font-size: 14px; color: #021433; }
.v2-pc-row-price { width: 96px; flex-shrink: 0; font-size: 14px; color: #021433; }
.v2-pc-row-total { width: 83px; flex-shrink: 0; text-align: right; font-weight: 500; font-size: 16px; color: #021433; }

.v2-pc-summary-row { background: #fff; border: 1px solid #efefef; border-top: none; display: flex; align-items: center; justify-content: flex-end; gap: 32px; padding: 14px 32px; font-size: 14px; }
.v2-pc-summary-row span:first-child { color: #888a8f; }
.v2-pc-summary-row span:last-child { color: #021433; font-weight: 500; min-width: 100px; text-align: right; }
.v2-pc-summary-row.is-total { background: #f9f9f9; }
.v2-pc-summary-row.is-total span { font-weight: 700; font-size: 18px; color: #021433; }

.v2-pc-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; gap: 16px; flex-wrap: wrap; }
.v2-pc-back-btn {
  background: #f0f0f0 !important; border: none !important; color: #021433 !important; padding: 16px 32px !important;
  font-family: var(--v2-font) !important; font-weight: 600 !important; font-size: 16px !important; cursor: pointer;
}
.v2-pc-back-btn:hover { background: #e4e4e4 !important; }
.v2-pc-place-btn {
  background: var(--v2-navy) !important; border: none !important; color: #fff !important; padding: 16px 40px !important;
  font-family: var(--v2-font) !important; font-weight: 600 !important; font-size: 16px !important; cursor: pointer;
}
.v2-pc-place-btn:hover { background: var(--v2-navy-dark) !important; }

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

  /* Same breakpoint/pattern as shoppingcart.css's .v2-cart-row: product and
     meta stack instead of sitting side by side once the row can't fit both
     at full width. */
  .v2-pc-row { flex-wrap: wrap; }
  .v2-pc-row-product { flex: 1 1 100%; }
  .v2-pc-row-meta { flex: 1 1 100%; padding-left: 32px; margin-top: 16px; }
}

@media (max-width: 640px) {
  .v2-pc-title { font-size: 28px; }
  .v2-pc-summary-row { justify-content: space-between; }
  .v2-pc-actions { flex-direction: column-reverse; align-items: stretch; }
  .v2-pc-back-btn, .v2-pc-place-btn { width: 100%; text-align: center; }

  .v2-pc-row-media { padding: 6px; }
  .v2-pc-row-media img { max-width: 60px; max-height: 60px; }

  /* Same fix as shoppingcart.css: the fixed-width head bar (Quantity / Unit
     Price / Total) doesn't fit next to "Product" on a phone, so hide it and
     label each value inline instead once the row wraps. */
  .v2-pc-head { display: none; }
  .v2-pc-row-meta { flex-direction: column; align-items: flex-start; gap: 12px; }
  .v2-pc-row-qty, .v2-pc-row-price, .v2-pc-row-total {
    width: auto; text-align: left; display: flex; align-items: center; gap: 6px;
  }
  .v2-pc-row-qty::before, .v2-pc-row-price::before, .v2-pc-row-total::before {
    content: 'Qty'; font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.04em; color: #888a8f;
  }
  .v2-pc-row-price::before { content: 'Unit Price'; }
  .v2-pc-row-total::before { content: 'Total'; }
}