/* Reusable component styles for the mockup */

/* Trust badge — appears on verified vendors and insured products */
.trust-badge { display: inline-flex; align-items: center; gap: 4px;
  background: var(--brand-trust-soft); color: var(--brand-trust);
  padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 500; }

/* Duty disclosure — yellow band under price for cross-border items */
.duty-disclosure { background: var(--brand-alert-soft); border-left: 3px solid var(--brand-alert);
  padding: 8px 12px; border-radius: var(--radius-sm); font-size: 13px; color: var(--brand-ink); }

/* Status timeline — vertical step list for tracking, KYC, payouts */
.status-timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.status-timeline li { position: relative; padding: 0 0 20px 28px; }
.status-timeline li::before { content: ''; position: absolute; left: 8px; top: 4px;
  width: 12px; height: 12px; border-radius: 50%; background: var(--brand-border); }
.status-timeline li.done::before { background: var(--brand-trust); }
.status-timeline li.active::before { background: var(--brand-red); box-shadow: 0 0 0 4px rgba(200,16,46,.18); }
.status-timeline li:not(:last-child)::after { content: ''; position: absolute; left: 13px; top: 16px;
  bottom: 0; width: 2px; background: var(--brand-border); }
.status-timeline li.done:not(:last-child)::after { background: var(--brand-trust); }

/* Card surface */
.surface { background: var(--brand-card); border: 1px solid var(--brand-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-card); }

/* Phone frame (postmaster screens) */
.phone-frame { width: 375px; height: 812px; background: white; border-radius: 36px;
  border: 12px solid #1F2937; margin: 24px auto; overflow: hidden; box-shadow: var(--shadow-pop); position: relative; }
.phone-frame .notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 140px; height: 26px; background: #1F2937; border-radius: 0 0 16px 16px; z-index: 5; }

/* Empty state */
.empty-state { text-align: center; padding: 48px 24px; color: var(--brand-ink-soft); }
.empty-state svg { margin: 0 auto 16px; opacity: .55; }

/* Wallet tile — PDF delta */
.wallet-tile { background: linear-gradient(135deg, var(--brand-ink), #111827); color: white;
  padding: 18px; border-radius: var(--radius-md); position: relative; overflow: hidden; }
.wallet-tile .balance { font-size: 28px; font-weight: 700; font-family: var(--font-display); }
.wallet-tile .label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; opacity: .7; }

/* Coupon pill — PDF delta */
.coupon-pill { display: inline-flex; align-items: center; gap: 6px; border: 1px dashed var(--brand-trust);
  color: var(--brand-trust); background: var(--brand-trust-soft); padding: 4px 10px;
  border-radius: var(--radius-sm); font-size: 12px; font-family: monospace; font-weight: 600; }

/* Report flag — PDF delta */
.report-flag { background: transparent; border: 0; cursor: pointer; color: var(--brand-muted);
  padding: 4px; border-radius: 4px; }
.report-flag:hover { color: var(--brand-red); background: rgba(200,16,46,.06); }

/* Cookie consent strip — PDF delta */
.cookie-consent { position: fixed; bottom: 0; left: 0; right: 0; background: var(--brand-ink);
  color: white; padding: 14px 20px; display: flex; align-items: center; gap: 16px;
  font-size: 13px; z-index: 100; box-shadow: 0 -4px 12px rgba(0,0,0,.15); }
.cookie-consent button { background: var(--brand-red); color: white; border: 0;
  padding: 6px 14px; border-radius: var(--radius-sm); font-size: 13px; cursor: pointer; }
.cookie-consent .ghost { background: transparent; border: 1px solid rgba(255, 255, 255, 0.3); }

/* Sidebar section grouping — used to separate categories in admin/vendor sidebars */
.sidebar-group-header {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgb(255 255 255 / 0.3);
  padding: 0 0.5rem 0.25rem;
  margin-top: 0.25rem;
}
.sidebar-group-divider {
  border-top: 1px solid rgb(255 255 255 / 0.1);
  margin: 0.5rem 0;
}