/* ============================================================
   Wizard cards — multi-step confirmation flows (web channel).
   Used for: block_card, transfer, bill_payment, move_internal.
   Backend builder: app/services/wizards.py.
   Frontend renderer: components/cards/wizard.js.
   ============================================================ */

.wizard-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 18px 14px;
  background: var(--paper);
  border: 1px solid var(--ink-300);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(26, 31, 46, 0.04);
  max-width: 460px;
}
.wizard-card.tone-danger {
  border-color: var(--red);
  background: linear-gradient(180deg, var(--red-soft) 0%, var(--paper) 60%);
}
.wizard-card.tone-warning {
  border-color: var(--gold-400);
  background: linear-gradient(180deg, var(--gold-50) 0%, var(--paper) 60%);
}

/* Header */
.wizard-header { display: flex; flex-direction: column; gap: 6px; }
.wizard-title-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.wizard-title {
  font-size: 16px; font-weight: 700; color: var(--ink-900); letter-spacing: -0.01em;
}
.wizard-progress {
  font-size: 11.5px; color: var(--ink-500); font-variant-numeric: tabular-nums;
}
.wizard-subtitle { font-size: 12.5px; color: var(--ink-700); line-height: 1.45; }
.wizard-dots { display: flex; gap: 6px; padding-top: 6px; }
.wizard-dot {
  width: 16px; height: 4px; border-radius: 2px;
  background: var(--ink-300); transition: background 0.15s;
}
.wizard-dot.done { background: var(--gold-400); }
.wizard-dot.active { background: var(--gold-700); }

/* Body / step */
.wizard-body { display: flex; flex-direction: column; gap: 10px; }
.wizard-step-title { font-size: 14.5px; font-weight: 600; color: var(--ink-900); }
.wizard-step-subtitle {
  font-size: 12.5px; color: var(--ink-500); line-height: 1.4; margin-top: -4px;
}

/* Widget container */
.wizard-widget { display: flex; flex-direction: column; gap: 8px; }

/* radio_cards (tiles) */
.wizard-radio-cards { display: flex; flex-direction: column; gap: 6px; }
.wizard-tile {
  display: grid;
  grid-template-columns: 32px 1fr 20px;
  gap: 12px;
  align-items: center;
  padding: 12px;
  background: var(--paper);
  border: 1.5px solid var(--ink-300);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--ink-900);
  transition: border-color 0.12s, background 0.12s;
}
.wizard-tile:hover:not(.disabled) {
  border-color: var(--gold-400); background: var(--gold-50);
}
.wizard-tile.selected {
  border-color: var(--gold-700); background: var(--gold-50);
}
.wizard-tile.disabled { opacity: 0.5; cursor: not-allowed; }
.wizard-tile-icon {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  color: var(--ink-700);
}
.wizard-tile-icon svg { width: 22px; height: 22px; }
.wizard-tile-text {
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
.wizard-tile-label { font-size: 13.5px; font-weight: 600; color: var(--ink-900); }
.wizard-tile-sublabel { font-size: 11.5px; color: var(--ink-500); }
.wizard-tile-disabled-reason {
  font-size: 11px; color: var(--red); margin-top: 2px;
}
.wizard-tile-check {
  font-size: 14px; color: var(--gold-700);
  opacity: 0; transform: scale(0.6);
  transition: opacity 0.12s, transform 0.12s;
}
.wizard-tile.selected .wizard-tile-check { opacity: 1; transform: scale(1); }

/* radio (compact) */
.wizard-radio { display: flex; flex-direction: column; gap: 4px; }
.wizard-radio-row {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: var(--paper);
  border: 1.5px solid var(--ink-300);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--ink-900);
}
.wizard-radio-row:hover {
  border-color: var(--gold-400); background: var(--gold-50);
}
.wizard-radio-row.selected {
  border-color: var(--gold-700); background: var(--gold-50);
}
.wizard-radio-bullet {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--ink-400); background: var(--paper);
  position: relative;
}
.wizard-radio-row.selected .wizard-radio-bullet { border-color: var(--gold-700); }
.wizard-radio-row.selected .wizard-radio-bullet::after {
  content: ""; position: absolute; inset: 3px;
  border-radius: 50%; background: var(--gold-700);
}
.wizard-radio-label { font-size: 13.5px; font-weight: 600; color: var(--ink-900); }
.wizard-radio-sublabel { font-size: 11.5px; color: var(--ink-500); margin-top: 1px; }

/* pin */
.wizard-pin { display: flex; gap: 8px; padding: 4px 0 2px; }
.wizard-pin-input {
  width: 44px; height: 52px;
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  border: 1.5px solid var(--ink-300);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink-900);
  outline: none;
  font-variant-numeric: tabular-nums;
}
.wizard-pin-input:focus {
  border-color: var(--gold-700);
  box-shadow: 0 0 0 3px var(--gold-50);
}

/* currency */
.wizard-currency { display: flex; align-items: center; gap: 0; padding: 4px 0 2px; }
.wizard-currency-symbol {
  font-size: 13px;
  color: var(--ink-500);
  padding: 12px 10px;
  background: var(--paper-soft);
  border: 1.5px solid var(--ink-300);
  border-right: 0;
  border-radius: 10px 0 0 10px;
  font-weight: 600;
}
.wizard-currency-input {
  flex: 1;
  height: 48px;
  padding: 0 14px;
  font-size: 18px;
  font-weight: 600;
  border: 1.5px solid var(--ink-300);
  border-radius: 0 10px 10px 0;
  background: var(--paper);
  color: var(--ink-900);
  outline: none;
  font-variant-numeric: tabular-nums;
  min-width: 0;
}
.wizard-currency-input:focus {
  border-color: var(--gold-700);
  box-shadow: 0 0 0 3px var(--gold-50);
}

/* summary */
.wizard-summary { display: flex; flex-direction: column; gap: 10px; }
.wizard-summary-list {
  display: flex; flex-direction: column; gap: 1px;
  background: var(--paper-soft);
  border: 1px solid var(--ink-300);
  border-radius: 10px;
  overflow: hidden;
}
.wizard-summary-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--paper);
  border-bottom: 1px solid var(--ink-300);
  font-size: 12.5px;
}
.wizard-summary-row:last-child { border-bottom: 0; }
.wizard-summary-label { color: var(--ink-500); font-weight: 500; flex-shrink: 0; }
.wizard-summary-value { color: var(--ink-900); font-weight: 600; text-align: right; }
.wizard-consent {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 12px;
  background: var(--gold-50);
  border: 1px solid var(--gold-400);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--ink-900);
  cursor: pointer;
}
.wizard-consent-box { margin-top: 2px; }

/* Footer */
.wizard-footer {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--ink-300);
}
.wizard-footer-left, .wizard-footer-right { display: flex; gap: 8px; }
.wizard-footer .ui-btn { font-size: 12.5px; padding: 8px 14px; }
.wizard-footer .wizard-back[disabled] { opacity: 0.4; cursor: not-allowed; }
.wizard-footer .ui-btn::after { content: none; }
.wizard-footer .wizard-next::after,
.wizard-footer .wizard-submit::after { content: " →"; font-family: inherit; }

/* States */
.wizard-error {
  font-size: 12px;
  color: var(--red);
  background: var(--red-soft);
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--red);
}
.wizard-pending, .wizard-done, .wizard-cancelled, .wizard-error-state {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 28px 20px;
  text-align: center;
}
.wizard-pending .spinner {
  width: 28px; height: 28px;
  border: 3px solid var(--gold-100);
  border-top-color: var(--gold-700);
  border-radius: 50%;
  animation: wizard-spin 0.8s linear infinite;
}
@keyframes wizard-spin { to { transform: rotate(360deg); } }
.wizard-done-icon {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: var(--green-soft); color: var(--green);
  border-radius: 50%; font-size: 18px; font-weight: 700;
}
.wizard-done-text, .wizard-cancelled-text, .wizard-pending-text {
  font-size: 13.5px; color: var(--ink-700);
}
.wizard-error-state .wizard-error-text { font-size: 13px; color: var(--red); }

/* RTL polish */
body[dir="rtl"] .wizard-currency-symbol {
  border-radius: 0 10px 10px 0; border-right: 1.5px solid var(--ink-300); border-left: 0;
}
body[dir="rtl"] .wizard-currency-input {
  border-radius: 10px 0 0 10px;
}
body[dir="rtl"] .wizard-footer .wizard-next::after,
body[dir="rtl"] .wizard-footer .wizard-submit::after { content: " ←"; }


/* ============================================================
   Collapsible card groups (accordion shell around multi-row data
   cards: transactions, recurring, insights, bills, loans,
   investments, cases, uae_services). Wrapper lives in
   frontend/static/components/cards/index.js (`_wrapInAccordion`).
   Uses native <details><summary> so it works without JS, is
   keyboard-accessible, and degrades gracefully.
   ============================================================ */

.ui-accordion.card-accordion {
  border: 1px solid var(--ink-300);
  border-radius: 12px;
  background: var(--paper);
  overflow: hidden;
  margin: 4px 0;
}
.ui-accordion.card-accordion + .ui-accordion.card-accordion {
  margin-top: 6px;
}
.ui-accordion-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-size: 13px;
  color: var(--ink-900);
  background: var(--paper);
  transition: background 0.12s;
}
.ui-accordion-head:hover { background: var(--gold-50); }
.ui-accordion-head::-webkit-details-marker { display: none; }
.ui-accordion-head::marker { content: ""; }
.ui-accordion-icon {
  font-size: 14px;
  line-height: 1;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}
.ui-accordion-title {
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink-900);
}
.ui-accordion-summary {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ui-accordion-chevron {
  flex-shrink: 0;
  color: var(--ink-500);
  transition: transform 0.15s ease;
}
.ui-accordion[open] > .ui-accordion-head .ui-accordion-chevron {
  transform: rotate(180deg);
}
.ui-accordion-body {
  border-top: 1px solid var(--ink-300);
  padding: 6px 0 0 0;
  background: var(--paper-soft);
}

/* The inner card is rendered as-is — strip its outer card chrome
   (margin / border / shadow) when it sits inside an accordion so it
   doesn'''t look like a card-in-a-card. Hide any duplicate inner
   header (e.g. .rec-header in recurring.js) that would otherwise
   restate what the accordion summary already says. */
.in-accordion {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  background: transparent;
}
.in-accordion.recurring .rec-header,
.in-accordion.insights .insights-total {
  display: none;
}

/* RTL polish: chevron flips with the writing direction. */
body[dir="rtl"] .ui-accordion-summary { margin-left: 0; margin-right: auto; }


/* Accounts grouped under a single accordion (see renderCardsGrouped in
   cards/index.js): stack the individual .card.account rows tightly
   with subtle separators instead of letting each one render as a free-
   floating tile (which was the unstructured wall the user flagged). */
.accordion-accounts-body .in-accordion.account {
  padding: 8px 14px;
  border-top: 1px solid var(--ink-200, var(--ink-300));
  display: flex;
  align-items: center;
  gap: 12px;
}
.accordion-accounts-body .in-accordion.account:first-child {
  border-top: 0;
}