/* Customer-facing account area — leans on white + red (Kenyan flag) instead of the
   staff dashboard's dark green, so the two areas read as visually distinct. */

.kyeb-cust-theme.kyeb-dash-body { background: #fbf7f7; }

/* --- Sidebar: white instead of dark green gradient --- */
.kyeb-cust-theme .kyeb-dash-sidebar {
  background: #fff; color: var(--ke-ink); border-right: 1px solid var(--ke-line);
  box-shadow: 2px 0 12px rgba(17, 17, 17, 0.03);
}
.kyeb-cust-theme .kyeb-dash-sidebar::before {
  content: ""; display: block; height: 4px; display: flex;
  background: linear-gradient(90deg, var(--ke-black) 0 33%, var(--ke-red) 33% 66%, var(--ke-green) 66% 100%);
}
.kyeb-cust-theme .kyeb-dash-brand {
  border-bottom: 1px solid var(--ke-line); color: var(--ke-ink);
}
.kyeb-cust-theme .kyeb-dash-brand .mark { background: #fdeaea; }
.kyeb-cust-theme .kyeb-dash-brand small { color: var(--ke-muted); }
.kyeb-cust-theme .kyeb-dash-nav-link { color: #55494a; }
.kyeb-cust-theme .kyeb-dash-nav-link:hover { background: #fdeaea; color: var(--ke-red-dark); }
.kyeb-cust-theme .kyeb-dash-nav-link.active { background: var(--grad-offer); color: #fff; box-shadow: 0 4px 12px rgba(187, 0, 0, .25); }

/* --- Topbar accent --- */
.kyeb-cust-theme .kyeb-dash-topbar { border-bottom: 2px solid var(--ke-red); }

/* --- Buttons / links lean red instead of green in the customer area --- */
.kyeb-cust-theme .btn-primary { background: var(--grad-offer); box-shadow: 0 6px 18px rgba(187, 0, 0, 0.24); }
.kyeb-cust-theme .btn-primary:hover { box-shadow: 0 10px 24px rgba(187, 0, 0, 0.32); }
.kyeb-cust-theme .kyeb-auth-links a { color: var(--ke-red); }
.kyeb-cust-theme .kyeb-backup-toggle summary { color: var(--ke-red); }
.kyeb-cust-theme a.kyeb-dash-nav-link.active i,
.kyeb-cust-theme .kyeb-dash-nav-link.active i { color: #fff; }

/* --- Auth pages (register / login) brand lockup above the card --- */
.kyeb-cust-auth-brand {
  display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 22px;
  font-weight: 700; font-size: 17px; color: var(--ke-ink);
}
.kyeb-cust-auth-brand .mark {
  width: 40px; height: 40px; border-radius: 10px; background: #fdeaea; display: flex; align-items: center; justify-content: center;
}
.kyeb-cust-auth-brand .mark img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.kyeb-cust-auth-brand small { display: block; font-weight: 400; font-size: 11px; color: var(--ke-muted); }
.kyeb-cust-theme .kyeb-form-card {
  border-top: 4px solid var(--ke-red); background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px;
}
.kyeb-cust-auth-hint { font-size: 12.5px; color: var(--ke-muted); margin: -8px 0 18px; line-height: 1.6; }

/* --- Overview page: profile summary + empty-state cards --- */
.kyeb-cust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 22px; }
.kyeb-cust-grid-4 { grid-template-columns: repeat(4, 1fr); }
.kyeb-cust-grid > * { min-width: 0; }
.kyeb-cust-stat {
  background: #fff; border-radius: 14px; padding: 20px; box-shadow: var(--shadow); border-top: 3px solid var(--ke-red);
}
.kyeb-cust-stat .icon-circle {
  width: 40px; height: 40px; border-radius: 50%; background: #fdeaea; color: var(--ke-red);
  display: flex; align-items: center; justify-content: center; font-size: 16px; margin-bottom: 12px;
}
.kyeb-cust-stat .label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ke-muted); margin-bottom: 4px; }
.kyeb-cust-stat .value { font-size: 15px; font-weight: 700; color: var(--ke-ink); word-break: break-word; }

.kyeb-cust-card { background: #fff; border-radius: 14px; padding: 24px; box-shadow: var(--shadow); margin-bottom: 20px; }
.kyeb-cust-card h3 { margin: 0 0 4px; font-size: 16px; }
.kyeb-cust-card .hint { color: var(--ke-muted); font-size: 13px; margin: 0 0 18px; }

.kyeb-cust-empty { text-align: center; padding: 40px 20px; color: var(--ke-muted); }
.kyeb-cust-empty .icon-circle {
  width: 60px; height: 60px; border-radius: 50%; background: #fdeaea; color: var(--ke-red);
  display: flex; align-items: center; justify-content: center; font-size: 24px; margin: 0 auto 16px;
}
.kyeb-cust-empty h4 { color: var(--ke-ink); margin: 0 0 6px; font-size: 15px; }
.kyeb-cust-empty p { margin: 0 0 18px; font-size: 13.5px; }

@media (max-width: 780px) {
  .kyeb-cust-grid, .kyeb-cust-grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .kyeb-cust-grid, .kyeb-cust-grid-4 { grid-template-columns: 1fr; }
}

.kyeb-timeline { position: relative; padding-left: 2px; }
.kyeb-timeline-step { position: relative; display: flex; gap: 16px; padding-bottom: 26px; }
.kyeb-timeline-step:last-child { padding-bottom: 0; }
.kyeb-timeline-step:not(:last-child)::before {
  content: ""; position: absolute; left: 15px; top: 32px; bottom: -6px; width: 2px; background: var(--ke-line);
}
.kyeb-timeline-step.done:not(:last-child)::before { background: var(--ke-red); }
.kyeb-timeline-dot {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: var(--ke-bg); color: var(--ke-muted); border: 2px solid var(--ke-line); font-size: 13px; z-index: 1;
}
.kyeb-timeline-step.done .kyeb-timeline-dot { background: var(--ke-red); border-color: var(--ke-red); color: #fff; }
.kyeb-timeline-step.current .kyeb-timeline-dot { background: #fff; border-color: var(--ke-red); color: var(--ke-red); box-shadow: 0 0 0 4px #fdeaea; }
.kyeb-timeline-step.cancelled .kyeb-timeline-dot { background: var(--ke-red-dark); border-color: var(--ke-red-dark); color: #fff; }
.kyeb-timeline-content { padding-top: 4px; min-width: 0; }
.kyeb-timeline-label { font-weight: 700; font-size: 14px; color: var(--ke-ink); }
.kyeb-timeline-step.upcoming .kyeb-timeline-label { color: var(--ke-muted); }
.kyeb-timeline-time { font-size: 12.5px; color: var(--ke-muted); margin-top: 2px; }
.kyeb-timeline-step.current .kyeb-timeline-time { color: var(--ke-red); font-weight: 600; }