/* =========================================================
   ATIB Design System — "The Elevated Banking Experience"
   Matches Stitch project: ATIB Mobile Banking
   ========================================================= */

/* ---------------------------------------------------------
   1. FONT FACES
   --------------------------------------------------------- */
@font-face {
  font-family: 'Manrope';
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/en/Manrope-Regular.otf') format('opentype');
}
@font-face {
  font-family: 'Manrope';
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/en/Manrope-Medium.otf') format('opentype');
}
@font-face {
  font-family: 'Manrope';
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/en/Manrope-SemiBold.otf') format('opentype');
}
@font-face {
  font-family: 'Manrope';
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/en/Manrope-Bold.otf') format('opentype');
}
@font-face {
  font-family: 'Inter';
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/en/Inter-Regular.otf') format('opentype');
}
@font-face {
  font-family: 'Inter';
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/en/Inter-Medium.otf') format('opentype');
}
@font-face {
  font-family: 'Inter';
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/en/Inter-SemiBold.otf') format('opentype');
}
@font-face {
  font-family: 'Inter';
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/en/Inter-Bold.otf') format('opentype');
}
@font-face {
  font-family: 'Somar';
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ar/Somar-Regular.otf') format('opentype');
}
@font-face {
  font-family: 'Somar';
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ar/Somar-SemiBold.otf') format('opentype');
}
@font-face {
  font-family: 'Somar';
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/ar/Somar-Bold.otf') format('opentype');
}
@font-face {
  font-family: 'Somar';
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/ar/Somar-Black.otf') format('opentype');
}
@font-face {
  font-family: 'AtibArabic';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/ar/newfont.ttf') format('truetype');
}
@font-face {
  font-family: 'AtibArabic';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/ar/newfontBold.ttf') format('truetype');
}

/* ---------------------------------------------------------
   2. DESIGN TOKENS (CSS Custom Properties)
   --------------------------------------------------------- */
:root {
  /* --- Primary palette --- */
  --primary:                #bd001e;
  --primary-container:      #ea0a2a;
  --primary-gradient:       #ea0a2a;
  --on-primary:             #ffffff;
  --primary-fixed:          #ffdad7;
  --primary-fixed-dim:      #ffb3ae;
  --inverse-primary:        #ffb3ae;

  /* --- Secondary palette --- */
  --secondary:              #546067;
  --secondary-container:    #d7e4ec;
  --on-secondary:           #ffffff;
  --on-secondary-container: #5a666d;
  --secondary-fixed:        #d7e4ec;
  --secondary-fixed-dim:    #bbc8d0;

  /* --- Tertiary palette --- */
  --tertiary:               #49606b;
  --tertiary-container:     #617984;
  --on-tertiary:            #ffffff;
  --on-tertiary-container:  #fefeff;

  /* --- Surface hierarchy (tonal layering — NO borders) --- */
  --surface:                     #f9f9f8;
  --surface-dim:                 #dadad9;
  --surface-bright:              #f9f9f8;
  --surface-container-lowest:    #ffffff;
  --surface-container-low:       #f4f4f3;
  --surface-container:           #eeeeed;
  --surface-container-high:      #e8e8e7;
  --surface-container-highest:   #e2e2e2;
  --surface-tint:                #c0001f;
  --surface-variant:             #e2e2e2;
  --on-surface:                  #1a1c1c;
  --on-surface-variant:          #5e3f3d;
  --inverse-surface:             #2f3130;
  --inverse-on-surface:          #f1f1f0;

  /* --- Error states --- */
  --error:            #ba1a1a;
  --error-container:  #ffdad6;
  --on-error:         #ffffff;
  --on-error-container: #93000a;

  /* --- Outline (ghost borders only — felt, not seen) --- */
  --outline:          #936e6b;
  --outline-variant:  #e8bcb9;

  /* --- Background --- */
  --background:       #f9f9f8;
  --on-background:    #1a1c1c;

  /* --- Typography scale --- */
  --font-headline: 'AtibArabic', 'Manrope', 'Somar', sans-serif;
  --font-body:     'AtibArabic', 'Inter', 'Somar', sans-serif;
  --font-label:    'AtibArabic', 'Inter', 'Somar', sans-serif;
  --font-arabic:   'AtibArabic', 'Somar', Tahoma, sans-serif;

  /* --- Type sizes --- */
  --display-lg:   3rem;      /* 48px */
  --display-md:   2.25rem;   /* 36px */
  --display-sm:   1.875rem;  /* 30px */
  --headline-lg:  1.5rem;    /* 24px */
  --headline-md:  1.25rem;   /* 20px */
  --headline-sm:  1.125rem;  /* 18px */
  --title-lg:     1rem;      /* 16px */
  --title-md:     0.9375rem; /* 15px */
  --title-sm:     0.875rem;  /* 14px */
  --body-lg:      1rem;      /* 16px */
  --body-md:      0.875rem;  /* 14px */
  --body-sm:      0.75rem;   /* 12px */
  --label-lg:     0.875rem;  /* 14px */
  --label-md:     0.75rem;   /* 12px */
  --label-sm:     0.6875rem; /* 11px */

  /* --- Spacing scale (8px baseline × 2) --- */
  --spacing-xs:   0.25rem;   /* 4px */
  --spacing-sm:   0.5rem;    /* 8px */
  --spacing-md:   1rem;      /* 16px */
  --spacing-lg:   1.5rem;    /* 24px */
  --spacing-xl:   2rem;      /* 32px */
  --spacing-2xl:  2.5rem;    /* 40px */
  --spacing-3xl:  3rem;      /* 48px */

  /* --- Shape / radii --- */
  --radius-xs:  0.25rem;   /* 4px */
  --radius-sm:  0.5rem;    /* 8px */
  --radius-md:  0.75rem;   /* 12px */
  --radius-lg:  1rem;      /* 16px */
  --radius-xl:  1.5rem;    /* 24px */
  --radius-full: 9999px;

  /* --- Elevation (ambient shadows only) --- */
  --shadow-float: 0 8px 24px 0 rgba(26,28,28,0.04);
  --shadow-modal: 0 16px 48px 0 rgba(26,28,28,0.08);

  /* --- Transitions --- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  /* --- Layout --- */
  --bottom-nav-height: 64px;
  --top-header-height: 60px;
  --page-max-width: 480px;
}

/* ---------------------------------------------------------
   3. RESET & BASE
   --------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--body-lg);
  color: var(--on-surface);
  background-color: var(--surface);
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Arabic body font */
[lang="ar"] body,
[dir="rtl"] body {
  font-family: var(--font-arabic);
  font-size: 1.1rem;
}

a {
  color: var(--primary);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

img, svg { display: block; max-width: 100%; }

ul, ol { list-style: none; }

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

/* ---------------------------------------------------------
   4. LAYOUT SHELL
   --------------------------------------------------------- */
.ds-app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--surface);
}

.ds-page {
  flex: 1;
  padding-bottom: var(--bottom-nav-height);
  max-width: var(--page-max-width);
  margin-inline: auto;
  width: 100%;
}

/* Desktop: wider max-width, no bottom nav padding */
@media (min-width: 768px) {
  .ds-page {
    max-width: 960px;
    padding-bottom: var(--spacing-2xl);
  }
}

.ds-page-inner {
  padding: var(--spacing-md);
}

@media (min-width: 768px) {
  .ds-page-inner {
    padding: var(--spacing-xl) var(--spacing-2xl);
  }
}

/* ---------------------------------------------------------
   5. TOP HEADER
   --------------------------------------------------------- */
.ds-top-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  height: var(--top-header-height);
  display: flex;
  align-items: center;
  padding-inline: var(--spacing-md);
  gap: var(--spacing-sm);
  box-shadow: var(--shadow-float);
}

.ds-top-header__back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  color: var(--on-surface);
  transition: background var(--transition-fast);
  border: none;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}
.ds-top-header__back:hover { background: var(--surface-container-low); }

[dir="rtl"] .ds-top-header__back svg { transform: scaleX(-1); }

.ds-top-header__title {
  flex: 1;
  font-family: var(--font-headline);
  font-size: var(--title-lg);
  font-weight: 600;
  color: var(--on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-top-header__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  flex-shrink: 0;
}

/* Logo variant (used on home page) */
.ds-top-header--home {
  background: var(--surface-container-lowest);
  justify-content: space-between;
}
.ds-top-header__logo {
  height: 32px;
  width: auto;
}
.ds-top-header__icon-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--on-surface);
  transition: background var(--transition-fast);
}
.ds-top-header__icon-btn:hover { background: var(--surface-container-low); }

/* ---------------------------------------------------------
   6. BOTTOM NAVIGATION
   --------------------------------------------------------- */
.ds-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--bottom-nav-height);
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: stretch;
  z-index: 200;
  box-shadow: 0 -1px 0 var(--surface-container-high);
}

.ds-bottom-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-decoration: none;
  color: var(--on-surface-variant);
  font-family: var(--font-label);
  font-size: var(--label-sm);
  font-weight: 500;
  transition: color var(--transition-fast);
  padding-bottom: env(safe-area-inset-bottom);
}
.ds-bottom-nav__item:hover { text-decoration: none; color: var(--primary); }
.ds-bottom-nav__item.active { color: var(--primary); }
[dir="rtl"] .ds-bottom-nav__item { font-family: var(--font-arabic); }

.ds-bottom-nav__item svg,
.ds-bottom-nav__item .material-icon {
  font-size: 22px;
  width: 22px;
  height: 22px;
}

/* Hide on desktop */
@media (min-width: 768px) {
  .ds-bottom-nav { display: none; }
}

/* ---------------------------------------------------------
   7. CARDS
   --------------------------------------------------------- */
.ds-card {
  background: var(--surface-container-lowest);
  border-radius: var(--radius-xl);
  padding: var(--spacing-lg);
  box-shadow: none; /* tonal only */
}

.ds-card--surface {
  background: var(--surface-container-low);
}

.ds-card--elevated {
  box-shadow: var(--shadow-float);
}

.ds-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-md);
}

.ds-card__title {
  font-family: var(--font-headline);
  font-size: var(--headline-sm);
  font-weight: 700;
  color: var(--on-surface);
}

.ds-card__subtitle {
  font-size: var(--body-sm);
  color: var(--secondary);
}

/* ---------------------------------------------------------
   8. STATUS CHIPS
   --------------------------------------------------------- */
.ds-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-family: var(--font-label);
  font-size: var(--label-md);
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}

.ds-chip--pending {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
}
.ds-chip--processing {
  background: var(--primary-fixed);
  color: #410004;
}
.ds-chip--completed {
  background: #d8f3dc;
  color: #1a4d2e;
}
.ds-chip--rejected {
  background: var(--error-container);
  color: var(--on-error-container);
}
.ds-chip--cancelled {
  background: var(--surface-container-high);
  color: var(--on-surface-variant);
}
.ds-chip--awaiting {
  background: #fff3cd;
  color: #7d4e00;
}
.ds-chip--approved {
  background: #d8f3dc;
  color: #1a4d2e;
}

.ds-chip__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* ---------------------------------------------------------
   9. BUTTONS
   --------------------------------------------------------- */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: 14px var(--spacing-lg);
  border-radius: var(--radius-xl);
  font-family: var(--font-label);
  font-size: var(--title-sm);
  font-weight: 600;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.ds-btn:hover { text-decoration: none; transform: translateY(-1px); }
.ds-btn:active { transform: translateY(0); }
.ds-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.ds-btn--primary {
  background: var(--primary-gradient);
  color: var(--on-primary);
}
.ds-btn--primary:hover { color: var(--on-primary); }

.ds-btn--secondary {
  background: var(--secondary-container);
  color: var(--secondary);
}
.ds-btn--secondary:hover { background: var(--secondary-fixed-dim); color: var(--secondary); }

.ds-btn--outline-dark {
  background: transparent;
  color: var(--on-surface);
  border: 1px solid var(--on-surface);
}
.ds-btn--outline-dark:hover {
  background: rgba(26, 28, 28, 0.05);
  color: var(--on-surface);
}

.ds-btn--ghost {
  background: transparent;
  color: var(--primary);
  padding-inline: var(--spacing-sm);
}
.ds-btn--ghost:hover { background: rgba(189,0,30,0.05); color: var(--primary); }

.ds-btn--danger {
  background: var(--error);
  color: var(--on-error);
}

.ds-btn--full { width: 100%; }

.ds-btn--sm {
  padding: 8px var(--spacing-md);
  font-size: var(--label-md);
}

/* Sticky CTA bar */
.ds-sticky-cta {
  position: sticky;
  bottom: calc(var(--bottom-nav-height) + var(--spacing-sm));
  padding: var(--spacing-md);
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--radius-xl);
  margin-inline: var(--spacing-md);
  box-shadow: var(--shadow-float);
  z-index: 50;
}

@media (min-width: 768px) {
  .ds-sticky-cta { position: static; background: transparent; backdrop-filter: none; box-shadow: none; margin: 0; padding: 0; }
}

/* ---------------------------------------------------------
   10. FORM INPUTS (soft box style)
   --------------------------------------------------------- */
.ds-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
}

.ds-field label,
.ds-label {
  font-family: var(--font-label);
  font-size: var(--label-lg);
  font-weight: 500;
  color: var(--on-surface-variant);
}

.ds-input {
  width: 100%;
  padding: 12px var(--spacing-md);
  background: var(--surface-container-low);
  border: none;
  border-bottom: 1.5px solid var(--outline-variant);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  color: var(--on-surface);
  font-size: var(--body-lg);
  font-family: var(--font-body);
  transition: border-color var(--transition-fast), background var(--transition-fast);
  outline: none;
  -webkit-appearance: none;
}
.ds-input:focus {
  border-bottom-color: var(--primary);
  background: var(--surface-container);
}
.ds-input::placeholder { color: var(--on-surface-variant); opacity: 0.6; }

.ds-input--error {
  border-bottom-color: var(--error);
  background: rgba(186,26,26,0.05);
}

.ds-field__error {
  font-size: var(--label-md);
  color: var(--error);
  display: flex;
  align-items: center;
  gap: 4px;
}

.ds-field__hint {
  font-size: var(--label-md);
  color: var(--on-surface-variant);
}

/* Select / dropdown */
.ds-select {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235e3f3d' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: calc(100% - 12px) center;
  cursor: pointer;
}
[dir="rtl"] .ds-select {
  background-position: 12px center;
}

/* Textarea */
.ds-textarea {
  resize: vertical;
  min-height: 100px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--outline-variant);
  border-bottom-width: 2px;
}
.ds-textarea:focus { border-color: var(--primary); }

/* File input */
.ds-file-input {
  position: relative;
  cursor: pointer;
}
.ds-file-input input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.ds-file-input__label {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: var(--surface-container-low);
  border: 1.5px dashed var(--outline-variant);
  border-radius: var(--radius-md);
  color: var(--on-surface-variant);
  font-size: var(--body-md);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.ds-file-input:hover .ds-file-input__label {
  border-color: var(--primary);
  background: var(--primary-fixed);
  color: #410004;
}

/* ---------------------------------------------------------
   10b. OPTION CARD (package/tenor selector)
   --------------------------------------------------------- */
.ds-option-card {
  width: 100%;
  border: 1.5px solid var(--outline-variant);
  background: var(--surface-container-lowest);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
  font-family: inherit;
  font-size: var(--body-sm);
}
.ds-option-card:hover {
  border-color: var(--primary);
}
.ds-option-card--active {
  border-color: var(--primary);
  background: var(--primary-fixed);
}

/* ---------------------------------------------------------
   11. INFO LIST (key-value display)
   --------------------------------------------------------- */
.ds-info-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.ds-info-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-md);
}

.ds-info-item__label {
  font-size: var(--body-sm);
  color: var(--secondary);
  font-weight: 400;
  flex-shrink: 0;
  min-width: 40%;
}

.ds-info-item__value {
  font-size: var(--body-md);
  color: var(--on-surface);
  font-weight: 600;
  text-align: end;
  word-break: break-word;
}

/* ---------------------------------------------------------
   12. TIMELINE (status progression)
   --------------------------------------------------------- */
.ds-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ds-timeline__item {
  display: flex;
  gap: var(--spacing-md);
  align-items: flex-start;
  position: relative;
}

.ds-timeline__track {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 24px;
}

.ds-timeline__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--surface-container-highest);
  border: 2px solid var(--surface-container-highest);
  flex-shrink: 0;
  margin-top: 4px;
  transition: all var(--transition-base);
}

.ds-timeline__dot--active {
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-fixed);
}

.ds-timeline__dot--done {
  background: #2d6a4f;
  border-color: #2d6a4f;
}

.ds-timeline__line {
  width: 2px;
  flex: 1;
  min-height: 24px;
  background: var(--surface-container-highest);
  margin-block: 4px;
}

.ds-timeline__line--done {
  background: #2d6a4f;
}

.ds-timeline__content {
  flex: 1;
  padding-bottom: var(--spacing-lg);
}

.ds-timeline__step-label {
  font-size: var(--body-md);
  font-weight: 600;
  color: var(--on-surface);
  margin-bottom: 2px;
}

.ds-timeline__step-desc {
  font-size: var(--body-sm);
  color: var(--secondary);
}

.ds-timeline__step-time {
  font-size: var(--label-sm);
  color: var(--on-surface-variant);
  margin-top: 4px;
}

/* ---------------------------------------------------------
   13. FILE TILES
   --------------------------------------------------------- */
.ds-file-tile {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--surface-container-low);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--on-surface);
  transition: background var(--transition-fast);
}
.ds-file-tile:hover { background: var(--surface-container); color: var(--on-surface); text-decoration: none; }

.ds-file-tile__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--primary-fixed);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #410004;
  flex-shrink: 0;
}

.ds-file-tile__info { flex: 1; min-width: 0; }

.ds-file-tile__name {
  font-size: var(--body-md);
  font-weight: 600;
  color: var(--on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-file-tile__meta {
  font-size: var(--label-md);
  color: var(--secondary);
}

/* ---------------------------------------------------------
   14. WIZARD STEPPER (progress segment bar)
   --------------------------------------------------------- */
.ds-wizard-stepper {
  display: flex;
  gap: 4px;
  padding-inline: var(--spacing-md);
  padding-block: var(--spacing-sm);
}

.ds-wizard-stepper__segment {
  height: 3px;
  flex: 1;
  border-radius: var(--radius-full);
  background: var(--surface-container-highest);
  transition: background var(--transition-base);
}

.ds-wizard-stepper__segment--active {
  background: var(--primary);
}

.ds-wizard-stepper__segment--done {
  background: var(--primary-fixed-dim);
}

/* Step labels (shown below bar) */
.ds-wizard-steps {
  display: flex;
  justify-content: space-between;
  padding-inline: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}
.ds-wizard-steps__label {
  font-size: var(--label-sm);
  color: var(--secondary);
  flex: 1;
  text-align: center;
}
.ds-wizard-steps__label--active { color: var(--primary); font-weight: 600; }

/* ---------------------------------------------------------
   15. ALERTS & MESSAGES
   --------------------------------------------------------- */
.ds-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  font-size: var(--body-md);
}

.ds-alert--info {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
}
.ds-alert--success {
  background: #d8f3dc;
  color: #1a4d2e;
}
.ds-alert--warning {
  background: #fff3cd;
  color: #7d4e00;
}
.ds-alert--error {
  background: var(--error-container);
  color: var(--on-error-container);
}

/* ---------------------------------------------------------
   16. LIST ITEMS (for transfer/loan cards in lists)
   --------------------------------------------------------- */
.ds-list-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--surface-container-lowest);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--on-surface);
  transition: background var(--transition-fast), transform var(--transition-fast);
  margin-bottom: var(--spacing-sm);
}
.ds-list-item:hover { background: var(--surface-container-low); transform: translateY(-1px); color: var(--on-surface); text-decoration: none; }

.ds-list-item__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--primary-fixed);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #410004;
  flex-shrink: 0;
}

.ds-list-item__body { flex: 1; min-width: 0; }

.ds-list-item__title {
  font-size: var(--body-md);
  font-weight: 600;
  color: var(--on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-list-item__meta {
  font-size: var(--label-md);
  color: var(--secondary);
  margin-top: 2px;
}

.ds-list-item__end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.ds-list-item__amount {
  font-size: var(--body-md);
  font-weight: 700;
  color: var(--on-surface);
}

/* ---------------------------------------------------------
   17. SECTION HEADERS
   --------------------------------------------------------- */
.ds-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
}

.ds-section-title {
  font-family: var(--font-headline);
  font-size: var(--headline-sm);
  font-weight: 700;
  color: var(--on-surface);
}

.ds-section-link {
  font-size: var(--body-sm);
  color: var(--primary);
  font-weight: 500;
}

/* ---------------------------------------------------------
   18. QUICK ACTIONS GRID
   --------------------------------------------------------- */
.ds-quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
}

.ds-quick-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  text-decoration: none;
  color: var(--on-surface);
  transition: transform var(--transition-fast);
}
.ds-quick-action:hover { transform: scale(1.05); text-decoration: none; color: var(--on-surface); }

.ds-quick-action__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  background: var(--surface-container-lowest);
  box-shadow: var(--shadow-float);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}

.ds-quick-action__label {
  font-size: var(--label-sm);
  font-weight: 500;
  color: var(--on-surface-variant);
  text-align: center;
  line-height: 1.3;
}

/* ---------------------------------------------------------
   19. GREETING BANNER
   --------------------------------------------------------- */
.ds-greeting {
  padding: var(--spacing-lg) var(--spacing-md) var(--spacing-md);
}
.ds-greeting__welcome {
  font-size: var(--body-md);
  color: var(--secondary);
  margin-bottom: 2px;
}
.ds-greeting__name {
  font-family: var(--font-headline);
  font-size: var(--headline-lg);
  font-weight: 700;
  color: var(--on-surface);
}

/* ---------------------------------------------------------
   20. EMPTY STATE
   --------------------------------------------------------- */
.ds-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-3xl) var(--spacing-xl);
  text-align: center;
  gap: var(--spacing-md);
  color: var(--secondary);
}
.ds-empty__icon {
  width: 64px;
  height: 64px;
  opacity: 0.35;
}
.ds-empty__title {
  font-family: var(--font-headline);
  font-size: var(--headline-sm);
  font-weight: 600;
  color: var(--on-surface);
}
.ds-empty__text { font-size: var(--body-md); }

/* ---------------------------------------------------------
   21. AMOUNT DISPLAY
   --------------------------------------------------------- */
.ds-amount-display {
  text-align: center;
  padding: var(--spacing-lg) var(--spacing-md);
}
.ds-amount-display__label {
  font-size: var(--body-sm);
  color: var(--secondary);
  margin-bottom: var(--spacing-xs);
}
.ds-amount-display__value {
  font-family: var(--font-headline);
  font-size: var(--display-md);
  font-weight: 700;
  color: var(--on-surface);
  line-height: 1.1;
}
.ds-amount-display__currency {
  font-size: var(--headline-sm);
  color: var(--secondary);
  font-weight: 500;
}

/* ---------------------------------------------------------
   22. DIVIDER (tonal — no visible lines)
   --------------------------------------------------------- */
.ds-divider {
  height: var(--spacing-sm);
  background: var(--surface-container-low);
  margin-inline: calc(-1 * var(--spacing-md));
}

/* ---------------------------------------------------------
   23. LOGIN PAGE SPECIFIC
   --------------------------------------------------------- */
.ds-auth-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
}

.ds-auth-hero {
  background: var(--primary-gradient);
  padding: var(--spacing-3xl) var(--spacing-xl) var(--spacing-2xl);
  position: relative;
  overflow: hidden;
}
/*.ds-auth-hero::after {*/
/*  content: '';*/
/*  position: absolute;*/
/*  bottom: -40px;*/
/*  left: 0;*/
/*  right: 0;*/
/*  height: 80px;*/
/*  background: var(--surface);*/
/*  border-radius: 50% 50% 0 0 / 80px 80px 0 0;*/
/*}*/

.ds-auth-hero__logo {
  height: 60px;
  margin-bottom: var(--spacing-xl);
}

.ds-auth-hero__title {
  font-family: var(--font-headline);
  font-size: var(--headline-lg);
  font-weight: 700;
  color: var(--on-primary);
  margin-bottom: var(--spacing-xs);
}
.ds-auth-hero__subtitle {
  font-size: var(--body-md);
  color: rgba(255,255,255,0.8);
}

.ds-auth-body {
  flex: 1;
  padding: var(--spacing-xl) var(--spacing-lg);
  max-width: 480px;
  margin-inline: auto;
  width: 100%;
}

.ds-auth-security-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-md);
  font-size: var(--label-md);
  color: var(--secondary);
}

/* ---------------------------------------------------------
   24. PROFILE PAGE
   --------------------------------------------------------- */
.ds-profile-avatar {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  background: var(--primary-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-headline);
  font-size: var(--headline-lg);
  font-weight: 700;
  color: var(--on-primary);
  position: relative;
  flex-shrink: 0;
}

.ds-profile-avatar__badge {
  position: absolute;
  bottom: 0;
  inset-inline-end: 0;
  width: 20px;
  height: 20px;
  background: #2d6a4f;
  border: 2px solid var(--surface-container-lowest);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10px;
}

.ds-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md);
  gap: var(--spacing-md);
  background: var(--surface-container-lowest);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-sm);
  text-decoration: none;
  color: var(--on-surface);
  transition: background var(--transition-fast);
}
.ds-settings-row:hover { background: var(--surface-container-low); color: var(--on-surface); text-decoration: none; }

.ds-settings-row__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--surface-container-low);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  flex-shrink: 0;
}

.ds-settings-row__info { flex: 1; }

.ds-settings-row__label {
  font-size: var(--body-md);
  font-weight: 500;
  color: var(--on-surface);
}

.ds-settings-row__sub {
  font-size: var(--label-md);
  color: var(--secondary);
}

/* Toggle switch */
.ds-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.ds-toggle input { opacity: 0; width: 0; height: 0; }
.ds-toggle__slider {
  position: absolute;
  inset: 0;
  background: var(--surface-container-high);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.ds-toggle__slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: var(--surface-container-lowest);
  border-radius: 50%;
  transition: transform var(--transition-fast);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.ds-toggle input:checked + .ds-toggle__slider { background: var(--primary); }
.ds-toggle input:checked + .ds-toggle__slider::before { transform: translateX(20px); }

/* ---------------------------------------------------------
   25. LANGUAGE SWITCHER
   --------------------------------------------------------- */
.ds-lang-switcher {
  display: flex;
  gap: var(--spacing-xs);
  align-items: center;
}
.ds-lang-btn {
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: var(--label-md);
  font-weight: 500;
  text-decoration: none;
  color: var(--secondary);
  background: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  border: 1.5px solid transparent;
}
.ds-lang-btn:hover { background: var(--surface-container-low); color: var(--on-surface); text-decoration: none; }
.ds-lang-btn--active {
  background: var(--primary-fixed);
  color: #410004;
  border-color: var(--primary-fixed-dim);
}

/* ---------------------------------------------------------
   26. FORM LOADING SPINNER
   --------------------------------------------------------- */
.ds-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ds-spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes ds-spin {
  to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------
   27. PAGINATION
   --------------------------------------------------------- */
.ds-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg) 0;
}
.ds-pagination__btn {
  padding: 8px 16px;
  border-radius: var(--radius-md);
  background: var(--surface-container-low);
  color: var(--on-surface);
  font-size: var(--body-sm);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-fast);
}
.ds-pagination__btn:hover { background: var(--surface-container); color: var(--on-surface); text-decoration: none; }
.ds-pagination__btn--active { background: var(--primary); color: var(--on-primary); }

/* ---------------------------------------------------------
   28. UTILITY CLASSES
   --------------------------------------------------------- */
.ds-text-primary { color: var(--primary); }
.ds-text-secondary { color: var(--secondary); }
.ds-text-muted { color: var(--on-surface-variant); }
.ds-text-error { color: var(--error); }

.ds-font-headline { font-family: var(--font-headline); }
.ds-font-body { font-family: var(--font-body); }

.ds-weight-400 { font-weight: 400; }
.ds-weight-500 { font-weight: 500; }
.ds-weight-600 { font-weight: 600; }
.ds-weight-700 { font-weight: 700; }

.ds-text-sm { font-size: var(--body-sm); }
.ds-text-md { font-size: var(--body-md); }
.ds-text-lg { font-size: var(--body-lg); }

.ds-mb-sm { margin-bottom: var(--spacing-sm); }
.ds-mb-md { margin-bottom: var(--spacing-md); }
.ds-mb-lg { margin-bottom: var(--spacing-lg); }

.ds-mt-md { margin-top: var(--spacing-md); }
.ds-mt-lg { margin-top: var(--spacing-lg); }

.ds-gap-sm { gap: var(--spacing-sm); }
.ds-gap-md { gap: var(--spacing-md); }

.ds-flex { display: flex; }
.ds-flex-col { flex-direction: column; }
.ds-items-center { align-items: center; }
.ds-justify-between { justify-content: space-between; }
.ds-flex-1 { flex: 1; }

.ds-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-md); }
.ds-grid-2 > * { min-width: 0; }
.ds-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--spacing-md); }
.ds-grid-3 > * { min-width: 0; }

.ds-w-full { width: 100%; }
.ds-text-center { text-align: center; }
.ds-text-end { text-align: end; }

/* ---------------------------------------------------------
   29. RESPONSIVE DESKTOP ADDITIONS
   --------------------------------------------------------- */
@media (min-width: 768px) {
  .ds-desktop-sidebar {
    width: 260px;
    flex-shrink: 0;
    background: var(--surface-container-lowest);
    min-height: 100vh;
    padding: var(--spacing-xl) var(--spacing-md);
    position: sticky;
    top: 0;
  }

  .ds-desktop-layout {
    display: flex;
    min-height: 100vh;
  }

  .ds-desktop-content {
    flex: 1;
    overflow: auto;
  }

  .ds-hide-desktop { display: none !important; }
}

.ds-hide-mobile { display: none; }
@media (min-width: 768px) {
  .ds-hide-mobile { display: unset; }
}

/* ---------------------------------------------------------
   30. BOOTSTRAP COMPATIBILITY SHIM
       Map Bootstrap classes to design system equivalents.
       Keeps crispy-form-generated HTML styled correctly.
   --------------------------------------------------------- */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: 12px var(--spacing-lg);
  border-radius: var(--radius-xl);
  font-family: var(--font-label);
  font-size: var(--title-sm);
  font-weight: 600;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
  white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-primary {
  background: var(--primary-gradient);
  color: var(--on-primary) !important;
}
.btn-primary:hover { color: var(--on-primary) !important; }

.btn-secondary, .btn-light {
  background: var(--secondary-container);
  color: var(--secondary) !important;
}
.btn-secondary:hover, .btn-light:hover { background: var(--secondary-fixed-dim); color: var(--secondary) !important; }

.btn-danger, .btn-outline-danger {
  background: var(--error);
  color: var(--on-error) !important;
}

.btn-outline-primary {
  background: transparent;
  color: var(--primary) !important;
  border: 1.5px solid var(--primary);
}
.btn-outline-primary:hover { background: var(--primary); color: var(--on-primary) !important; }

.btn-block, .w-100.btn { width: 100%; }

.btn-sm { padding: 8px 14px; font-size: var(--label-md); }

/* Grid compat */
.row { display: flex; flex-wrap: wrap; gap: var(--spacing-md) 0; }
.col-md-6 { width: 100%; padding-inline: var(--spacing-sm); }
@media (min-width: 768px) { .col-md-6 { width: 50%; } }
.col-md-12, .col-12 { width: 100%; padding-inline: var(--spacing-sm); }
@media (min-width: 992px) { .col-lg-4 { width: 33.333%; } .col-lg-6 { width: 50%; } .col-lg-8 { width: 66.666%; } }

/* CRISPY FORM OVERRIDES (compatibility shim) */
.form-group {
  margin-bottom: var(--spacing-md);
}
.form-control,
.form-select {
  width: 100%;
  padding: 12px var(--spacing-md);
  background: var(--surface-container-low);
  border: none;
  border-bottom: 1.5px solid var(--outline-variant);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  color: var(--on-surface);
  font-size: var(--body-lg);
  font-family: var(--font-body);
  transition: border-color var(--transition-fast), background var(--transition-fast);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  line-height: 1.5;
}
.form-control:focus,
.form-select:focus {
  border-bottom-color: var(--primary);
  background: var(--surface-container);
  box-shadow: none;
}
.form-control.is-invalid,
.form-select.is-invalid {
  border-bottom-color: var(--error);
  background: rgba(186,26,26,0.05);
}

/* Dropdown arrow for select elements */
select.form-control,
select.form-select,
.form-select {
  padding-inline-end: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23546067%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M6%209l6%206%206-6%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: calc(100% - 12px) center;
  cursor: pointer;
}
[dir="rtl"] select.form-control,
[dir="rtl"] select.form-select,
[dir="rtl"] .form-select {
  background-position: 12px center;
}

/* File input design */
.ds-file-input {
  position: relative;
}
.ds-file-input input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.ds-file-input__label {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 12px var(--spacing-md);
  background: var(--surface-container-low);
  border: 1.5px dashed var(--outline-variant);
  border-radius: var(--radius-sm);
  color: var(--secondary);
  font-size: var(--body-md);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
  min-height: 48px;
}
.ds-file-input:hover .ds-file-input__label,
.ds-file-input input[type="file"]:focus + .ds-file-input__label {
  border-color: var(--primary);
  background: var(--surface-container);
  color: var(--primary);
}
.ds-file-input__label svg {
  flex-shrink: 0;
}
.ds-file-input__text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Style raw file inputs (crispy-rendered, no .ds-file-input wrapper) */
input[type="file"].form-control {
  padding: 10px var(--spacing-md);
  cursor: pointer;
  line-height: 1.4;
  display: flex;
  align-items: center;
}
input[type="file"].form-control::file-selector-button {
  padding: 6px 14px;
  background: var(--primary-gradient);
  color: var(--on-primary);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--label-md);
  font-weight: 500;
  margin-inline-end: var(--spacing-md);
}
input[type="file"].form-control::-webkit-file-upload-button {
  padding: 6px 14px;
  background: var(--primary-gradient);
  color: var(--on-primary);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--label-md);
  font-weight: 500;
  margin-inline-end: var(--spacing-md);
}

.invalid-feedback {
  font-size: var(--label-md);
  color: var(--error);
  margin-top: 4px;
  display: block;
}
.form-label,
label {
  font-family: var(--font-label);
  font-size: var(--label-lg);
  font-weight: 500;
  color: var(--on-surface-variant);
  display: block;
  margin-bottom: 6px;
}
.asteriskField { color: var(--error); margin-inline-start: 2px; }