/* =============================================================================
   MOCKUPS.CSS — Interior styles for each Product Section mockup
   Keeps product-specific UI separated from layout code.
   ============================================================================= */

/* ─── 1. Transaction List Mockup ─── */
.tx-list-mock .tx-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.tx-row:last-child { border-bottom: none; }

.tx-row-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.tx-row-info   { flex: 1; }
.tx-row-name   { font-size: 0.85rem; font-weight: 600; }
.tx-row-meta   { font-size: 0.72rem; color: var(--text-muted); }
.tx-row-amount { font-weight: 700;   font-size: 0.9rem; }


/* ─── 2. Receipt Scanner Mockup ─── */
.receipt-mock {
  text-align: center;
}

.receipt-scanner-frame {
  width: 200px;
  height: 260px;
  margin: 0 auto 20px;
  border-radius: 16px;
  border: 2px dashed var(--purple);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(124, 58, 237, 0.03);
}

.scanner-line {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 2px;
  background: var(--purple);
  box-shadow: 0 0 12px var(--purple);
  animation: scan-line 3s ease-in-out infinite;
}

@keyframes scan-line {
  0%   { top: 20px; }
  50%  { top: calc(100% - 20px); }
  100% { top: 20px; }
}

.receipt-icon { font-size: 2.5rem; opacity: 0.4; }

.receipt-results {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.receipt-results .res-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--bg-primary);
  font-size: 0.82rem;
}

.res-label { color: var(--text-muted); }
.res-val   { font-weight: 600; }


/* ─── 3. Tax Return Mockup ─── */
.tax-mock .tax-form {
  background: var(--bg-primary);
  border-radius: 12px;
  padding: 20px;
  border: 1px solid var(--border);
}

.tax-form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.tax-form-title { font-size: 0.9rem; font-weight: 700; }

.tax-form-badge {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  background: rgba(79, 227, 191, 0.15);
  color: var(--success);
}

.tax-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--border);
}

.tax-row:last-child { border-bottom: none; }
.tax-row .label     { color: var(--text-secondary); }
.tax-row .value     { font-weight: 600; }
.tax-row.highlight .value { color: var(--success); font-weight: 700; }

.tax-savings {
  margin-top: 16px;
  padding: 16px;
  border-radius: 12px;
  background: rgba(124, 58, 237, 0.06);
  text-align: center;
}

.tax-savings .big { font-size: 1.8rem; font-weight: 800; color: var(--purple); }
.tax-savings .sub { font-size: 0.78rem; color: var(--text-muted); margin-top: 4px; }


/* ─── 4. Bank Linking Mockup ─── */
.banks-mock .bank-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.bank-chip {
  padding: 16px 12px;
  border-radius: 12px;
  text-align: center;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  font-size: 0.78rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

.bank-chip .bank-icon { font-size: 1.4rem; margin-bottom: 6px; }

.bank-chip.connected {
  border-color: var(--purple);
  background: rgba(124, 58, 237, 0.05);
}

.bank-chip.connected::after {
  content: ' ✓';
  color: var(--purple);
  font-weight: 700;
}

.bank-stats { display: flex; gap: 12px; }

.bank-stat {
  flex: 1;
  padding: 14px;
  border-radius: 12px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  text-align: center;
}

.bank-stat .stat-val   { font-size: 1.1rem; font-weight: 800; color: var(--purple); }
.bank-stat .stat-label { font-size: 0.7rem; color: var(--text-muted); margin-top: 2px; }


/* ─── 5. Analytics Mockup ─── */
.analytics-mock .chart-placeholder {
  height: 160px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: var(--bg-primary);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 16px;
  gap: 8px;
}

.chart-bar {
  flex: 1;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, var(--purple), var(--purple-light));
  transition: height 0.5s ease;
}

.analytics-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.kpi-card {
  padding: 16px;
  border-radius: 12px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
}

.kpi-card .kpi-val    { font-size: 1.1rem;  font-weight: 800; }
.kpi-card .kpi-label  { font-size: 0.7rem;  color: var(--text-muted); margin-top: 2px; }
.kpi-card .kpi-change { font-size: 0.72rem; font-weight: 600; color: var(--success); }


/* ─── 6. Fraud Detection Mockup ─── */
.fraud-mock .shield-visual {
  text-align: center;
  margin-bottom: 20px;
}

.shield-icon {
  font-size: 3.5rem;
  display: inline-block;
  filter: drop-shadow(0 0 20px rgba(124, 58, 237, 0.3));
}

.shield-status {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--success);
  margin-top: 8px;
}

.fraud-feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fraud-event {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--bg-primary);
  border-left: 3px solid var(--success);
  font-size: 0.82rem;
}

.fraud-event.flagged { border-left-color: var(--danger); }

.fraud-event .fe-icon  { font-size: 1rem; }
.fraud-event .fe-info  { flex: 1; }
.fraud-event .fe-title { font-weight: 600; }
.fraud-event .fe-time  { font-size: 0.7rem; color: var(--text-muted); }

.fraud-event .fe-score         { font-weight: 700; font-size: 0.78rem; }
.fraud-event .fe-score.safe    { color: var(--success); }
.fraud-event .fe-score.warn    { color: var(--gold); }
.fraud-event .fe-score.danger  { color: var(--danger); }