/* ============================================================
   components.css — Reusable UI building blocks
   ============================================================ */

/* ---- Cards ---- */
.card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.card + .card { margin-top: 12px; }

/* ---- Forms ---- */
.form-group { margin-bottom: 16px; }
.form-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.form-input {
  width: 100%; height: 48px; padding: 0 14px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); transition: border-color .15s, box-shadow .15s;
  font-size: 14px;
}
.form-input:focus { border-color: var(--primary); box-shadow: var(--focus-ring); }
.form-input::placeholder { color: var(--text-3); }
.form-input.error { border-color: var(--error); }
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%239CA3AF' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left 14px center;
}
.form-textarea { height: auto; min-height: 80px; padding: 12px 14px; resize: vertical; }
.form-hint { font-size: 11px; color: var(--text-3); margin-top: 4px; }
.form-error { font-size: 11px; color: var(--error); margin-top: 4px; }
.form-row { display: flex; gap: 12px; }
.form-row .form-group { flex: 1; }

/* ---- Buttons ---- */
.btn {
  height: 48px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 600; font-size: 14px; padding: 0 24px; transition: transform .15s, opacity .15s;
  width: 100%;
}
.btn:active { transform: scale(.97); opacity: .85; }
.btn:disabled { opacity: .5; transform: none; pointer-events: none; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-outline { border: 1.5px solid var(--primary); color: var(--primary); background: var(--surface); }
.btn-danger { background: var(--error); color: #fff; }
.btn-ghost { color: var(--primary); background: transparent; }
.btn-sm { height: 36px; font-size: 12px; padding: 0 16px; border-radius: var(--radius-xs); }
.btn-xs { height: 28px; font-size: 11px; padding: 0 10px; border-radius: 6px; }

/* ---- FAB ---- */
.fab {
  position: fixed; bottom: calc(var(--nav-h) + var(--safe-b) + 16px);
  width: 56px; height: 56px; border-radius: 16px;
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg); z-index: 25; transition: transform .2s;
}
.fab:active { transform: scale(.9); }

/* ---- Chips ---- */
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; }
.chip-green { background: var(--success-bg); color: var(--success); }
.chip-amber { background: var(--accent-pale); color: var(--accent); }
.chip-red   { background: var(--error-bg); color: var(--error); }
.chip-gray  { background: var(--surface-2); color: var(--text-2); }
.chip-primary { background: var(--primary-pale); color: var(--primary); }

/* ---- Tabs ---- */
.tabs {
  display: flex; border-bottom: 2px solid var(--divider);
  overflow-x: auto; padding: 0 16px; background: var(--surface);
  position: sticky; top: calc(var(--header-h) + var(--safe-t)); z-index: 15;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: 12px 16px; font-size: 13px; font-weight: 500; color: var(--text-3);
  white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color .15s;
}
.tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 700; }

/* ---- List items ---- */
.list-item { display: flex; align-items: center; padding: 14px 16px; gap: 12px; border-bottom: 1px solid var(--divider); transition: background .1s; width: 100%; text-align: right; }
.list-item:active { background: var(--surface-2); }
.list-item:last-child { border-bottom: none; }
.list-item .icon-wrap { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.list-item .info { flex: 1; min-width: 0; }
.list-item .info .name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-item .info .sub { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-item .end { flex-shrink: 0; text-align: left; }

/* ---- Empty state ---- */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; text-align: center; }
.empty-state .material-icons-round { font-size: 64px; color: var(--text-3); margin-bottom: 16px; }
.empty-state .title { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.empty-state .desc { font-size: 13px; color: var(--text-3); max-width: 260px; }

/* ---- Toasts ---- */
.toast-container { position: fixed; top: calc(16px + var(--safe-t)); left: 16px; right: 16px; z-index: 100; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { padding: 14px 16px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; box-shadow: var(--shadow-lg); animation: toastIn .3s ease; pointer-events: auto; display: flex; align-items: center; gap: 8px; }
.toast-error   { background: #1F2937; color: #FCA5A5; }
.toast-success { background: #065F46; color: #A7F3D0; }
.toast-warn    { background: #78350F; color: #FDE68A; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } }

/* ---- Modal (bottom sheet) ---- */
.modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .4); z-index: 50; display: flex; align-items: flex-end; justify-content: center; animation: fadeIn .2s; }
.modal-sheet { background: var(--surface); border-radius: var(--radius) var(--radius) 0 0; width: 100%; max-width: var(--shell-max); max-height: 85dvh; overflow-y: auto; padding: 24px; padding-top: 20px; animation: sheetUp .3s ease; position: relative; }
.modal-sheet .handle { width: 36px; height: 4px; border-radius: 2px; background: var(--border); margin: 0 auto 20px; }
.modal-sheet .sheet-close { position: absolute; top: 14px; left: 14px; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-3); background: var(--surface-2); }
.modal-sheet .sheet-close:active { background: var(--border); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ---- Spinner ---- */
.spinner { width: 24px; height: 24px; border: 3px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-overlay { position: fixed; inset: 0; background: rgba(255, 255, 255, .7); z-index: 40; display: flex; align-items: center; justify-content: center; }

/* ---- Splash ---- */
.splash { position: fixed; inset: 0; background: var(--primary); z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; transition: opacity .5s; }
.splash.hide { opacity: 0; pointer-events: none; }
.splash .logo { width: 80px; height: 80px; background: rgba(255, 255, 255, .15); border-radius: 24px; display: flex; align-items: center; justify-content: center; }
.splash .logo .material-icons-round { font-size: 40px; color: #fff; }
.splash h1 { color: #fff; font-size: 22px; font-weight: 800; }
.splash p { color: rgba(255, 255, 255, .6); font-size: 13px; }
.splash .splash-spinner { border-color: rgba(255, 255, 255, .3); border-top-color: #fff; }

/* ---- Stat grid ---- */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px; }
.stat-card { background: var(--surface); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-sm); }
.stat-card .val { font-size: 24px; font-weight: 800; color: var(--primary); }
.stat-card .lbl { font-size: 11px; color: var(--text-3); margin-top: 2px; }

/* ---- OTP ---- */
.otp-row { display: flex; gap: 8px; direction: ltr; justify-content: center; }
.otp-input { width: 48px; height: 56px; text-align: center; font-size: 24px; font-weight: 700; border: 2px solid var(--border); border-radius: var(--radius-sm); transition: border-color .15s, box-shadow .15s; }
.otp-input:focus { border-color: var(--primary); box-shadow: var(--focus-ring); }

/* ---- Switch ---- */
.switch { position: relative; width: 44px; height: 24px; cursor: pointer; display: inline-block; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; inset: 0; background: var(--border); border-radius: 12px; transition: background .2s; }
.switch .slider::before { content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; background: #fff; top: 2px; right: 2px; transition: transform .2s; box-shadow: var(--shadow-sm); }
.switch input:checked + .slider { background: var(--primary); }
.switch input:checked + .slider::before { transform: translateX(-20px); }
.switch input:focus-visible + .slider { box-shadow: var(--focus-ring); }

/* ---- Radio group ---- */
.radio-group { display: flex; flex-wrap: wrap; gap: 8px; }
.radio-btn { padding: 8px 16px; border: 1.5px solid var(--border); border-radius: var(--radius-xs); font-size: 13px; font-weight: 500; transition: border-color .15s, background .15s, color .15s; color: var(--text-2); background: var(--surface); }
.radio-btn.active { border-color: var(--primary); background: var(--primary-pale); color: var(--primary); }
.radio-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---- Stepper ---- */
.stepper { display: flex; align-items: center; justify-content: center; gap: 0; padding: 20px 16px; }
.step-dot { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; border: 2px solid var(--border); color: var(--text-3); transition: .2s; flex-shrink: 0; }
.step-dot.active { border-color: var(--primary); background: var(--primary); color: #fff; }
.step-dot.done { border-color: var(--success); background: var(--success); color: #fff; }
.step-line { width: 32px; height: 2px; background: var(--border); transition: background .2s; }
.step-line.done { background: var(--success); }

/* ---- Number / money isolation in RTL ---- */
.money { font-variant-numeric: tabular-nums; direction: ltr; display: inline-block; }