/* =============================================================================
   Access Africa design system
   Deep green + navy primary, warm gold accent, clean light surfaces.
   ============================================================================= */
:root {
  --aa-primary: #0b4d3b;
  --aa-primary-600: #0e5f48;
  --aa-primary-700: #084638;
  --aa-navy: #0f2340;
  --aa-navy-700: #0a1a30;
  --aa-gold: #c99a3e;
  --aa-gold-600: #b98a2e;
  --aa-gold-light: #f6ecd6;
  --aa-ink: #101f1a;
  --aa-body: #3d4a46;
  --aa-muted: #6b7671;
  --aa-bg: #faf9f5;
  --aa-surface: #ffffff;
  --aa-surface-alt: #f2f6f3;
  --aa-border: #e3e2d8;
  --aa-border-strong: #cfceC2;
  --aa-success: #1f8a57;
  --aa-success-bg: #e9f6ef;
  --aa-warning: #b7791f;
  --aa-warning-bg: #fbf1de;
  --aa-danger: #c0392b;
  --aa-danger-bg: #fbeae8;
  --aa-info: #2563aa;
  --aa-info-bg: #e9f1fb;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(16, 36, 29, 0.07);
  --shadow-md: 0 8px 24px rgba(16, 36, 29, 0.10);
  --shadow-lg: 0 24px 56px rgba(16, 36, 29, 0.18);

  --font-sans: "Segoe UI", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --focus-ring: 0 0 0 3px rgba(201, 154, 62, 0.55);
}

* { box-sizing: border-box; }

html, body {
  font-family: var(--font-sans);
  background: var(--aa-bg);
  color: var(--aa-body);
  -webkit-font-smoothing: antialiased;
}

body { margin: 0; }

h1, h2, h3, h4, h5 {
  color: var(--aa-ink);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 0.5em;
}

a { color: var(--aa-primary-600); text-decoration: none; }
a:hover { text-decoration: underline; }
a.aa-link-plain, a.aa-link-plain:hover { text-decoration: none; }

/* ---- Focus visibility (WCAG AA) -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--aa-gold);
  outline-offset: 2px;
  border-radius: 4px;
}
.btn:focus, .form-control:focus, .form-select:focus, .form-check-input:focus {
  box-shadow: var(--focus-ring);
  border-color: var(--aa-gold);
}

/* ---- Buttons ---------------------------------------------------------------------------------------------- */
.btn { border-radius: var(--radius-sm); font-weight: 600; padding: 0.6rem 1.2rem; border: 1px solid transparent; }
.btn-lg { padding: 0.85rem 1.7rem; font-size: 1.05rem; border-radius: var(--radius-md); }
.btn-primary { color: #fff; background-color: var(--aa-primary); border-color: var(--aa-primary); }
.btn-primary:hover, .btn-primary:focus { background-color: var(--aa-primary-600); border-color: var(--aa-primary-600); color: #fff; }
.btn-primary:disabled { background-color: var(--aa-primary); opacity: 0.5; }
.btn-gold { color: var(--aa-navy-700); background-color: var(--aa-gold); border-color: var(--aa-gold); font-weight: 700; }
.btn-gold:hover, .btn-gold:focus { background-color: var(--aa-gold-600); border-color: var(--aa-gold-600); color: var(--aa-navy-700); }
.btn-outline-light-line { color: #fff; background: transparent; border-color: rgba(255,255,255,0.55); }
.btn-outline-light-line:hover { background: rgba(255,255,255,0.12); color: #fff; }
.btn-outline-primary { color: var(--aa-primary); border-color: var(--aa-primary); background: transparent; }
.btn-outline-primary:hover { background: var(--aa-primary); color: #fff; }
.btn-link { color: var(--aa-primary-600); }
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: var(--focus-ring);
}

/* ---- Cards / surfaces --------------------------------------------------------------------------------------- */
.aa-card {
  background: var(--aa-surface);
  border: 1px solid var(--aa-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.aa-card-pad { padding: 1.5rem; }
.aa-card-hover { transition: box-shadow .18s ease, transform .18s ease; }
.aa-card-hover:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* ---- Forms -------------------------------------------------------------------------------------------------- */
.form-control, .form-select {
  border-radius: var(--radius-sm);
  border-color: var(--aa-border-strong);
  padding: 0.6rem 0.85rem;
}
.form-label { font-weight: 600; color: var(--aa-ink); margin-bottom: 0.35rem; }
.form-text { color: var(--aa-muted); }
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--aa-success); }
.invalid { outline: 1px solid var(--aa-danger); border-color: var(--aa-danger); }
.validation-message { color: var(--aa-danger); font-size: 0.875rem; display: block; margin-top: 0.25rem; }

/* ---- Money / ZAR amount ----------------------------------------------------------------------------------- */
.aa-zar-amount { font-weight: 800; color: var(--aa-ink); }
.aa-zar-amount-lg { font-size: 1.6rem; }
.aa-zar-amount-unavailable { color: var(--aa-muted); font-style: italic; font-size: 0.88rem; }

/* ---- Status badges (label + icon, never color alone) --------------------------------------------------------- */
.aa-badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.75rem; border-radius: var(--radius-pill); font-size: 0.82rem; font-weight: 700; border: 1px solid transparent; white-space: nowrap; }
.aa-badge-success { background: var(--aa-success-bg); color: var(--aa-success); border-color: rgba(31,138,87,0.25); }
.aa-badge-warning { background: var(--aa-warning-bg); color: var(--aa-warning); border-color: rgba(183,121,31,0.25); }
.aa-badge-danger { background: var(--aa-danger-bg); color: var(--aa-danger); border-color: rgba(192,57,43,0.25); }
.aa-badge-info { background: var(--aa-info-bg); color: var(--aa-info); border-color: rgba(37,99,170,0.25); }
.aa-badge-neutral { background: var(--aa-surface-alt); color: var(--aa-muted); border-color: var(--aa-border); }

/* ---- Tables ------------------------------------------------------------------------------------------------- */
.aa-table-wrap { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--aa-border); background: var(--aa-surface); }
.aa-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.aa-table th { text-align: left; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--aa-muted); padding: 0.85rem 1rem; background: var(--aa-surface-alt); border-bottom: 1px solid var(--aa-border); }
.aa-table td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--aa-border); vertical-align: middle; }
.aa-table tr:last-child td { border-bottom: none; }
.aa-table tbody tr:hover { background: var(--aa-surface-alt); }

/* ---- Layout helpers ------------------------------------------------------------------------------------------ */
.aa-container { max-width: 1180px; margin: 0 auto; padding: 0 1.25rem; }
.aa-section { padding: 4rem 0; }
.aa-eyebrow { color: var(--aa-primary-600); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.8rem; }
.aa-muted { color: var(--aa-muted); }
.aa-skip-link { position: absolute; left: -999px; top: 0; background: var(--aa-navy); color: #fff; padding: 0.75rem 1.25rem; z-index: 2000; border-radius: 0 0 var(--radius-sm) 0; }
.aa-skip-link:focus { left: 0; }

/* ---- Loading skeleton shimmer -------------------------------------------------------------------------------- */
.aa-skeleton { background: linear-gradient(90deg, var(--aa-surface-alt) 25%, #e9e7dc 37%, var(--aa-surface-alt) 63%); background-size: 400% 100%; animation: aa-shimmer 1.4s ease infinite; border-radius: var(--radius-sm); }
@keyframes aa-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .aa-skeleton { animation: none; } }

/* ---- Framework chrome (kept from template) --------------------------------------------------------------------- */
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}
.blazor-error-boundary::after { content: "An error has occurred."; }

/* =============================================================================
   Public marketing site
   ============================================================================= */
.aa-public-header { position: sticky; top: 0; z-index: 1000; background: rgba(250,249,245,0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--aa-border); }
.aa-public-header .aa-container { display: flex; align-items: center; justify-content: space-between; height: 4.25rem; }
.aa-brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 800; font-size: 1.15rem; color: var(--aa-ink); }
.aa-brand-mark { width: 2.1rem; height: 2.1rem; border-radius: 9px; background: linear-gradient(135deg, var(--aa-primary), var(--aa-navy)); display: flex; align-items: center; justify-content: center; color: var(--aa-gold-light); font-weight: 800; }
.aa-public-nav { display: flex; align-items: center; gap: 1.6rem; }
.aa-public-nav a { color: var(--aa-body); font-weight: 600; font-size: 0.95rem; }
.aa-public-nav a:hover { color: var(--aa-primary-600); text-decoration: none; }
.aa-header-actions { display: flex; align-items: center; gap: 0.75rem; }
.aa-nav-toggle { display: none; }

.aa-hero { position: relative; overflow: hidden; background: radial-gradient(120% 140% at 15% 0%, #123f2f 0%, var(--aa-navy) 55%, var(--aa-navy-700) 100%); color: #fff; }
.aa-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 3rem; align-items: center; padding: 5rem 0 4.5rem; position: relative; z-index: 1; }
.aa-hero-glow { position: absolute; inset: 0; background: radial-gradient(45% 60% at 85% 20%, rgba(201,154,62,0.35), transparent 70%); pointer-events: none; }
.aa-hero-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(201,154,62,0.16); border: 1px solid rgba(201,154,62,0.4); color: var(--aa-gold-light); padding: 0.4rem 0.9rem; border-radius: var(--radius-pill); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.03em; margin-bottom: 1.25rem; }
.aa-hero h1 { color: #fff; font-size: clamp(2.1rem, 4vw, 3.1rem); margin-bottom: 1rem; }
.aa-hero-lead { color: rgba(255,255,255,0.82); font-size: 1.15rem; max-width: 34rem; margin-bottom: 2rem; }
.aa-hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-bottom: 2.25rem; }
.aa-hero-trust { display: flex; flex-wrap: wrap; gap: 1.5rem; color: rgba(255,255,255,0.72); font-size: 0.88rem; }
.aa-hero-trust span { display: flex; align-items: center; gap: 0.5rem; }

.aa-hero-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius-lg); padding: 1.75rem; backdrop-filter: blur(6px); box-shadow: var(--shadow-lg); }
.aa-hero-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; }
.aa-hero-card-header h3 { color: #fff; font-size: 1.05rem; margin: 0; }
.aa-hero-product { display: flex; justify-content: space-between; align-items: center; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-md); padding: 0.9rem 1.1rem; margin-bottom: 0.7rem; }
.aa-hero-product:last-child { margin-bottom: 0; }
.aa-hero-product-name { color: #fff; font-weight: 600; font-size: 0.92rem; }
.aa-hero-product-meta { color: rgba(255,255,255,0.6); font-size: 0.8rem; }
.aa-hero-product-price { color: var(--aa-gold-light); font-weight: 800; }

.aa-stat-strip { background: var(--aa-primary-700); color: #fff; }
.aa-stat-strip .aa-container { display: flex; flex-wrap: wrap; gap: 2.5rem; justify-content: space-between; padding: 1.75rem 1.25rem; }
.aa-stat-strip .aa-stat { text-align: left; }
.aa-stat-strip .aa-stat strong { display: block; font-size: 1.05rem; color: var(--aa-gold-light); }
.aa-stat-strip .aa-stat span { color: rgba(255,255,255,0.75); font-size: 0.85rem; }

.aa-section-head { max-width: 40rem; margin: 0 auto 2.75rem; text-align: center; }
.aa-section-head h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }

.aa-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.aa-feature-card { padding: 1.75rem; }
.aa-feature-icon { width: 3rem; height: 3rem; border-radius: var(--radius-md); background: var(--aa-primary-light, #e8f3ee); display: flex; align-items: center; justify-content: center; margin-bottom: 1.1rem; color: var(--aa-primary); font-size: 1.35rem; }
.aa-feature-card h3 { font-size: 1.08rem; }
.aa-feature-card p { margin: 0; color: var(--aa-muted); font-size: 0.95rem; }

.aa-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; counter-reset: aa-step; }
.aa-step { position: relative; padding: 1.6rem 1.4rem 1.4rem; }
.aa-step-number { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--aa-navy); color: var(--aa-gold-light); font-weight: 800; margin-bottom: 1rem; }
.aa-step h3 { font-size: 1rem; margin-bottom: 0.35rem; }
.aa-step p { margin: 0; color: var(--aa-muted); font-size: 0.9rem; }

.aa-security-panel { background: linear-gradient(135deg, var(--aa-surface) 0%, var(--aa-surface-alt) 100%); border-radius: var(--radius-lg); border: 1px solid var(--aa-border); padding: 2.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; }
.aa-security-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.aa-security-list li { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.95rem; }
.aa-security-list .aa-check { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--aa-success-bg); color: var(--aa-success); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 800; }

.aa-cta-band { background: linear-gradient(120deg, var(--aa-primary) 0%, var(--aa-primary-700) 100%); color: #fff; border-radius: var(--radius-lg); padding: 3rem; display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; }
.aa-cta-band h2 { color: #fff; margin-bottom: 0.4rem; }
.aa-cta-band p { color: rgba(255,255,255,0.85); margin: 0; }

.aa-faq-item { border-bottom: 1px solid var(--aa-border); padding: 1.1rem 0; }
.aa-faq-item summary { cursor: pointer; font-weight: 700; color: var(--aa-ink); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.aa-faq-item summary::-webkit-details-marker { display: none; }
.aa-faq-item p { margin: 0.75rem 0 0; color: var(--aa-muted); }

.aa-public-footer { background: var(--aa-navy-700); color: rgba(255,255,255,0.75); padding: 3.5rem 0 2rem; }
.aa-public-footer h4 { color: #fff; font-size: 0.95rem; margin-bottom: 1rem; }
.aa-public-footer a { color: rgba(255,255,255,0.72); }
.aa-public-footer a:hover { color: #fff; }
.aa-footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem; padding-bottom: 2.25rem; border-bottom: 1px solid rgba(255,255,255,0.12); }
.aa-footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; font-size: 0.9rem; }
.aa-footer-bottom { display: flex; justify-content: space-between; padding-top: 1.5rem; font-size: 0.82rem; flex-wrap: wrap; gap: 0.75rem; }

@media (max-width: 960px) {
  .aa-hero-grid { grid-template-columns: 1fr; padding-top: 3rem; }
  .aa-feature-grid { grid-template-columns: 1fr 1fr; }
  .aa-steps { grid-template-columns: 1fr 1fr; }
  .aa-security-panel { grid-template-columns: 1fr; }
  .aa-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .aa-public-nav, .aa-header-actions .btn-outline-primary { display: none; }
  .aa-nav-toggle { display: inline-flex; }
  .aa-feature-grid, .aa-steps { grid-template-columns: 1fr; }
  .aa-footer-grid { grid-template-columns: 1fr; }
  .aa-cta-band { flex-direction: column; text-align: center; }
}

/* =============================================================================
   Customer portal shell (mobile bottom nav / desktop sidebar)
   ============================================================================= */
.aa-app-shell { display: flex; min-height: 100vh; background: var(--aa-bg); }
.aa-app-sidebar { width: 15.5rem; flex: none; background: var(--aa-navy-700); color: rgba(255,255,255,0.85); padding: 1.5rem 1rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.aa-app-sidebar .aa-brand { color: #fff; padding: 0 0.5rem 1.5rem; }
.aa-app-nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; }
.aa-app-nav a { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0.85rem; border-radius: var(--radius-sm); color: rgba(255,255,255,0.72); font-weight: 600; font-size: 0.92rem; }
.aa-app-nav a:hover { background: rgba(255,255,255,0.06); color: #fff; text-decoration: none; }
.aa-app-nav a.active, .aa-app-nav a[aria-current="page"] { background: var(--aa-primary); color: #fff; }
.aa-app-main { flex: 1; min-width: 0; }
.aa-app-topbar { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; background: var(--aa-surface); border-bottom: 1px solid var(--aa-border); position: sticky; top: 0; z-index: 20; }
.aa-app-content { padding: 1.5rem; max-width: 1180px; }
.aa-bottom-nav { display: none; }

@media (max-width: 900px) {
  .aa-app-sidebar { display: none; }
  .aa-app-content { padding: 1rem 1rem 5.5rem; }
  .aa-bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: var(--aa-surface); border-top: 1px solid var(--aa-border); z-index: 30; padding: 0.4rem 0.25rem calc(0.4rem + env(safe-area-inset-bottom)); box-shadow: 0 -6px 20px rgba(16,36,29,0.08); }
  .aa-bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding: 0.4rem 0.1rem; color: var(--aa-muted); font-size: 0.68rem; font-weight: 700; border-radius: var(--radius-sm); }
  .aa-bottom-nav a.active, .aa-bottom-nav a[aria-current="page"] { color: var(--aa-primary); }
  .aa-bottom-nav .aa-bottom-nav-icon { font-size: 1.2rem; }
}

/* =============================================================================
   Admin portal shell
   ============================================================================= */
.aa-admin-shell { display: flex; min-height: 100vh; background: var(--aa-surface-alt); }
.aa-admin-sidebar { width: 16.5rem; flex: none; background: #101c14; color: rgba(255,255,255,0.82); padding: 1.35rem 0.9rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.aa-admin-sidebar .aa-brand { color: #fff; padding: 0 0.5rem 1.25rem; }
.aa-admin-nav-group { margin-bottom: 0.9rem; }
.aa-admin-nav-group h6 { color: rgba(255,255,255,0.4); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.5rem 0.85rem 0.35rem; margin: 0; }
.aa-admin-nav-group a { display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 0.85rem; border-radius: var(--radius-sm); color: rgba(255,255,255,0.72); font-size: 0.88rem; font-weight: 600; }
.aa-admin-nav-group a:hover { background: rgba(255,255,255,0.07); color: #fff; text-decoration: none; }
.aa-admin-nav-group a.active, .aa-admin-nav-group a[aria-current="page"] { background: var(--aa-gold); color: #101c14; }
.aa-admin-main { flex: 1; min-width: 0; }
.aa-admin-topbar { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.75rem; background: var(--aa-surface); border-bottom: 1px solid var(--aa-border); position: sticky; top: 0; z-index: 20; }
.aa-admin-content { padding: 1.75rem; max-width: 1400px; }
.aa-admin-sidebar-toggle { display: none; }

@media (max-width: 900px) {
  .aa-admin-sidebar { position: fixed; left: -18rem; top: 0; z-index: 60; transition: left .2s ease; box-shadow: var(--shadow-lg); }
  .aa-admin-sidebar.open { left: 0; }
  .aa-admin-content { padding: 1rem; }
  .aa-admin-sidebar-toggle { display: inline-flex; }
}

.aa-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.1rem; }
.aa-metric-card { padding: 1.35rem; }
.aa-metric-card .aa-metric-label { color: var(--aa-muted); font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.aa-metric-card .aa-metric-value { font-size: 1.7rem; font-weight: 800; color: var(--aa-ink); margin-top: 0.35rem; }
.aa-metric-card .aa-metric-sub { color: var(--aa-muted); font-size: 0.82rem; margin-top: 0.35rem; }

.aa-page-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.aa-page-header h1 { font-size: 1.5rem; margin-bottom: 0.25rem; }

.aa-empty-state { text-align: center; padding: 3rem 1.5rem; color: var(--aa-muted); }
.aa-empty-state .aa-empty-icon { font-size: 2.2rem; margin-bottom: 0.75rem; }

.aa-form-floating-check { display: flex; align-items: center; gap: 0.5rem; }

/* ---- Catalogue ------------------------------------------------------------------------------------------- */
.aa-product-card { padding: 1.4rem; height: 100%; display: flex; flex-direction: column; }
.aa-bundle-details { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.35rem; font-size: 0.85rem; color: var(--aa-body); }
.aa-bundle-details li { display: flex; align-items: center; gap: 0.5rem; }
.aa-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.1rem; }

/* ---- Checkout ---------------------------------------------------------------------------------------------- */
.aa-summary-list { display: grid; grid-template-columns: 9rem 1fr; gap: 0.6rem 1rem; margin: 1rem 0 0; }
.aa-summary-list dt { color: var(--aa-muted); font-weight: 600; font-size: 0.88rem; }
.aa-summary-list dd { margin: 0; font-weight: 600; color: var(--aa-ink); }
.aa-checkout-steps { display: flex; gap: 0.75rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.aa-checkout-step { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 700; color: var(--aa-muted); }
.aa-checkout-step.active { color: var(--aa-primary); }
.aa-checkout-step .aa-step-dot { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--aa-surface-alt); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; }
.aa-checkout-step.active .aa-step-dot { background: var(--aa-primary); color: #fff; }
.aa-payment-method { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--aa-border); border-radius: var(--radius-md); padding: 1rem; margin-bottom: 0.6rem; }
.aa-payment-method.selected { border-color: var(--aa-primary); background: var(--aa-primary-light, #e8f3ee); }
.aa-payment-method.disabled { opacity: 0.55; }

/* ---- Order timeline ----------------------------------------------------------------------------------------- */
.aa-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.aa-timeline-step { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; font-size: 0.9rem; color: var(--aa-muted); position: relative; }
.aa-timeline-step .aa-timeline-dot { width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 2px solid var(--aa-border-strong); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; flex: none; background: var(--aa-surface); }
.aa-timeline-step.done { color: var(--aa-ink); font-weight: 600; }
.aa-timeline-step.done .aa-timeline-dot { border-color: var(--aa-success); background: var(--aa-success-bg); color: var(--aa-success); }
.aa-timeline-step.current { color: var(--aa-ink); font-weight: 600; }
.aa-timeline-step.current .aa-timeline-dot { border-color: var(--aa-info); background: var(--aa-info-bg); color: var(--aa-info); }
.aa-timeline-step.failed { color: var(--aa-danger); font-weight: 600; }
.aa-timeline-step.failed .aa-timeline-dot { border-color: var(--aa-danger); background: var(--aa-danger-bg); color: var(--aa-danger); }

/* ---- Confirm dialog ------------------------------------------------------------------------------------------ */
.aa-dialog-backdrop { position: fixed; inset: 0; background: rgba(16,31,26,0.55); display: flex; align-items: center; justify-content: center; z-index: 1050; padding: 1rem; }
.aa-dialog { background: var(--aa-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 1.75rem; width: 100%; max-width: 26rem; }
.aa-dialog-actions { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1.25rem; }