/* kafeLayehe: base, components, layout. Tokens live in tokens.css. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--kl-font); background: var(--kl-cream-50); color: var(--kl-ink); line-height: 1.85; overflow-x: hidden; }
h1, h2, h3, h4, h5, h6 { font-weight: 800; color: var(--kl-navy); line-height: 1.5; }
a { text-underline-offset: .25em; }
img { max-width: 100%; height: auto; }
.ltr { direction: ltr; unicode-bidi: isolate; text-align: left; }
.nowrap { white-space: nowrap; }
.text-muted-kl { color: var(--kl-muted); }
.visually-hidden-focusable:focus { z-index: 2000; }

:focus-visible { outline: 3px solid var(--kl-amber); outline-offset: 2px; border-radius: 4px; }
.btn:focus-visible, .form-control:focus, .form-select:focus { box-shadow: var(--kl-focus); outline: none; }

.skip-link { position: absolute; top: -4rem; inset-inline-start: 1rem; background: var(--kl-navy); color: var(--kl-cream); padding: .6rem 1rem; border-radius: var(--kl-radius-sm); z-index: 3000; transition: top .15s; }
.skip-link:focus { top: .75rem; color: var(--kl-cream); }

/* ---------- Buttons ---------- */
.btn { font-weight: 700; border-radius: var(--kl-radius-pill); padding: .6rem 1.4rem; transition: transform .18s var(--kl-ease), box-shadow .18s var(--kl-ease), background-color .18s; }
.btn:active { transform: translateY(1px); }
.btn-kl { background: var(--kl-navy); color: var(--kl-cream); border: 2px solid var(--kl-navy); }
.btn-kl:hover { background: var(--kl-navy-700); border-color: var(--kl-navy-700); color: #fff; transform: translateY(-2px); box-shadow: var(--kl-shadow); }
.btn-amber { background: var(--kl-amber); color: var(--kl-navy-900); border: 2px solid var(--kl-amber); }
.btn-amber:hover { background: var(--kl-amber-600); border-color: var(--kl-amber-600); color: var(--kl-navy-900); transform: translateY(-2px); box-shadow: var(--kl-shadow); }
.btn-outline-kl { background: transparent; color: var(--kl-navy); border: 2px solid var(--kl-navy); }
.btn-outline-kl:hover { background: var(--kl-navy); color: var(--kl-cream); transform: translateY(-2px); }
.btn-lg-kl { padding: .85rem 1.9rem; font-size: 1.05rem; }
.btn[disabled], .btn.disabled { opacity: .6; transform: none; box-shadow: none; }

/* ---------- Forms ---------- */
.form-label { font-weight: 700; color: var(--kl-navy); }
.form-control, .form-select { border-radius: var(--kl-radius-sm); border: 1.5px solid #cfc3ad; padding: .65rem .9rem; background-color: #fff; }
.form-control:focus, .form-select:focus { border-color: var(--kl-navy); }
.form-text-kl { color: var(--kl-muted); font-size: .88rem; }
.field-error { color: var(--kl-danger); font-size: .88rem; margin-top: .3rem; }
.form-control.invalid, .form-control.is-invalid { border-color: var(--kl-danger); }
.valid.modified:not([type=checkbox]) { outline: none; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--kl-ease), transform .7s var(--kl-ease); transition-delay: calc(var(--d, 0) * 90ms); will-change: opacity, transform; }
.reveal.reveal-fade { transform: none; }
.reveal.reveal-scale { transform: scale(.94); }
.reveal.in { opacity: 1; transform: none; will-change: auto; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---------- Spinner / skeleton / empty state ---------- */
.kl-spinner { display: inline-block; width: 1.4rem; height: 1.4rem; border: .22rem solid rgba(27, 37, 69, .18); border-top-color: var(--kl-navy); border-radius: 50%; animation: kl-spin .8s linear infinite; vertical-align: middle; }
.kl-spinner.lg { width: 2.6rem; height: 2.6rem; border-width: .3rem; }
.kl-spinner.on-dark { border-color: rgba(255, 255, 255, .3); border-top-color: #fff; }
@keyframes kl-spin { to { transform: rotate(360deg); } }
.kl-skeleton { display: block; background: linear-gradient(90deg, #eadfca 25%, #f6eddc 50%, #eadfca 75%); background-size: 200% 100%; animation: kl-shimmer 1.4s linear infinite; border-radius: var(--kl-radius-sm); min-height: 1rem; }
@keyframes kl-shimmer { to { background-position: -200% 0; } }
.kl-empty { text-align: center; padding: var(--kl-space-7) var(--kl-space-4); }
.kl-empty img { width: min(260px, 70%); height: auto; margin-bottom: var(--kl-space-4); }
.kl-empty h3 { font-size: 1.2rem; }
.kl-empty p { color: var(--kl-muted); max-width: 32rem; margin-inline: auto; }

/* ---------- Toasts ---------- */
.kl-toasts { position: fixed; z-index: 2500; inset-inline: 1rem; bottom: 1rem; display: flex; flex-direction: column; gap: .6rem; align-items: center; pointer-events: none; }
.kl-toast { pointer-events: auto; display: flex; gap: .7rem; align-items: flex-start; width: min(26rem, 100%); background: var(--kl-navy); color: var(--kl-cream); padding: .8rem 1rem; border-radius: var(--kl-radius); box-shadow: var(--kl-shadow-lg); animation: kl-toast-in .35s var(--kl-ease); border-inline-start: .35rem solid var(--kl-amber); }
.kl-toast.success { border-color: #5fd29a; }
.kl-toast.error { border-color: #ff8a80; }
.kl-toast.warning { border-color: var(--kl-amber); }
.kl-toast .kl-toast-body { flex: 1; font-size: .95rem; }
.kl-toast .kl-toast-title { font-weight: 800; display: block; }
.kl-toast button { background: none; border: 0; color: inherit; opacity: .8; padding: 0 .2rem; font-size: 1.1rem; line-height: 1; }
.kl-toast button:hover { opacity: 1; }
@keyframes kl-toast-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

/* ---------- Modal ---------- */
.kl-modal-backdrop { position: fixed; inset: 0; background: rgba(18, 26, 51, .55); backdrop-filter: blur(2px); z-index: 2200; display: grid; place-items: center; padding: 1rem; animation: kl-fade .2s ease; }
.kl-modal { background: #fff; border-radius: var(--kl-radius-lg); box-shadow: var(--kl-shadow-lg); width: min(34rem, 100%); max-height: calc(100vh - 2rem); overflow: auto; animation: kl-pop .3s var(--kl-ease); }
.kl-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--kl-line); }
.kl-modal-head h2 { font-size: 1.15rem; margin: 0; }
.kl-modal-body { padding: 1.25rem; }
.kl-modal-foot { padding: .9rem 1.25rem; border-top: 1px solid var(--kl-line); display: flex; gap: .6rem; justify-content: flex-start; flex-wrap: wrap; }
.kl-icon-btn { background: transparent; border: 0; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: inline-grid; place-items: center; color: var(--kl-navy); font-size: 1.25rem; transition: background-color .15s; }
.kl-icon-btn:hover { background: rgba(27, 37, 69, .08); }
@keyframes kl-fade { from { opacity: 0; } }
@keyframes kl-pop { from { opacity: 0; transform: translateY(16px) scale(.96); } }

/* ---------- Header ---------- */
.kl-header { position: sticky; top: 0; z-index: 1030; background: rgba(252, 248, 241, .92); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid transparent; transition: box-shadow .2s, border-color .2s; }
.kl-header.scrolled { box-shadow: var(--kl-shadow-sm); border-color: var(--kl-line); }
.kl-header-inner { display: flex; align-items: center; gap: 1rem; min-height: var(--kl-header-h); }
.kl-brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--kl-navy); font-weight: 800; font-size: 1.25rem; }
.kl-brand img { width: 2.6rem; height: 2.6rem; border-radius: .7rem; }
.kl-brand:hover { color: var(--kl-navy); }
.kl-nav { display: none; align-items: center; gap: .15rem; margin-inline-start: 1.25rem; }
.kl-nav a { color: var(--kl-ink); text-decoration: none; font-weight: 500; padding: .45rem .85rem; border-radius: var(--kl-radius-pill); transition: background-color .15s, color .15s; }
.kl-nav a:hover { background: rgba(27, 37, 69, .07); color: var(--kl-navy); }
.kl-nav a.active { background: var(--kl-navy); color: var(--kl-cream); }
.kl-header-actions { margin-inline-start: auto; display: flex; align-items: center; gap: .5rem; }
.kl-wallet-badge { display: inline-flex; align-items: center; gap: .4rem; background: #fff; border: 1.5px solid var(--kl-line); color: var(--kl-navy); border-radius: var(--kl-radius-pill); padding: .3rem .8rem; font-weight: 700; font-size: .9rem; text-decoration: none; }
.kl-wallet-badge:hover { border-color: var(--kl-amber); color: var(--kl-navy); }
.kl-wallet-badge i { color: var(--kl-caramel-text); }
.kl-menu-btn { display: inline-grid; }
@media (min-width: 992px) { .kl-nav { display: flex; } .kl-menu-btn { display: none; } }

.kl-user { position: relative; }
.kl-user-btn { display: inline-flex; align-items: center; gap: .5rem; background: #fff; border: 1.5px solid var(--kl-line); border-radius: var(--kl-radius-pill); padding: .3rem .8rem .3rem .6rem; color: var(--kl-navy); font-weight: 700; }
.kl-user-btn:hover { border-color: var(--kl-amber); }
.kl-user-menu { position: absolute; inset-inline-end: 0; top: calc(100% + .5rem); min-width: 13rem; background: #fff; border: 1px solid var(--kl-line); border-radius: var(--kl-radius); box-shadow: var(--kl-shadow-lg); padding: .4rem; z-index: 1040; animation: kl-pop .2s var(--kl-ease); }
.kl-user-menu a, .kl-user-menu button { display: flex; align-items: center; gap: .6rem; width: 100%; text-align: start; background: none; border: 0; padding: .55rem .75rem; border-radius: var(--kl-radius-sm); color: var(--kl-ink); text-decoration: none; font-weight: 500; }
.kl-user-menu a:hover, .kl-user-menu button:hover { background: var(--kl-cream); color: var(--kl-navy); }
.kl-user-menu hr { margin: .3rem 0; border-color: var(--kl-line); opacity: 1; }
.kl-user-menu .head { padding: .5rem .75rem; font-size: .85rem; color: var(--kl-muted); }
.kl-click-away { position: fixed; inset: 0; z-index: 1035; background: transparent; border: 0; cursor: default; }

/* off-canvas mobile menu */
.kl-offcanvas-scrim { position: fixed; inset: 0; background: rgba(18, 26, 51, .5); z-index: 2100; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.kl-offcanvas-scrim.open { opacity: 1; visibility: visible; }
.kl-offcanvas { position: fixed; top: 0; bottom: 0; inset-inline-start: 0; width: min(20rem, 86vw); background: var(--kl-cream-50); z-index: 2110; transform: translateX(100%); transition: transform .35s var(--kl-ease), visibility .35s; visibility: hidden; display: flex; flex-direction: column; box-shadow: var(--kl-shadow-lg); }
.kl-offcanvas.open { transform: none; visibility: visible; }
.kl-offcanvas-head { display: flex; align-items: center; justify-content: space-between; padding: .8rem 1rem; border-bottom: 1px solid var(--kl-line); }
.kl-offcanvas nav { padding: .8rem; display: flex; flex-direction: column; gap: .2rem; overflow: auto; }
.kl-offcanvas nav a { display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem; border-radius: var(--kl-radius); color: var(--kl-ink); text-decoration: none; font-weight: 700; opacity: 0; transform: translateX(24px); }
.kl-offcanvas.open nav a { animation: kl-slide-in .45s var(--kl-ease) forwards; animation-delay: calc(var(--i, 0) * 55ms + 120ms); }
.kl-offcanvas nav a:hover, .kl-offcanvas nav a.active { background: var(--kl-navy); color: var(--kl-cream); }
.kl-offcanvas nav a i { color: var(--kl-caramel-text); font-size: 1.15rem; }
.kl-offcanvas nav a:hover i, .kl-offcanvas nav a.active i { color: var(--kl-amber); }
.kl-offcanvas-foot { margin-top: auto; padding: 1rem; border-top: 1px solid var(--kl-line); }
@keyframes kl-slide-in { to { opacity: 1; transform: none; } }

/* ---------- Footer ---------- */
.kl-footer { background: var(--kl-navy-900); color: #d7dbe8; margin-top: var(--kl-space-8); padding-top: var(--kl-space-7); }
.kl-footer h2 { color: var(--kl-amber); font-size: 1.05rem; }
.kl-footer a { color: #e9ecf5; text-decoration: none; }
.kl-footer a:hover { color: var(--kl-amber); text-decoration: underline; }
.kl-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.kl-footer .kl-brand { color: #fff; }
.kl-footer address { font-style: normal; display: flex; gap: .6rem; align-items: flex-start; }
.kl-footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: var(--kl-space-6); padding: 1.1rem 0; font-size: .92rem; text-align: center; }
.kl-footer-bottom a { color: var(--kl-amber); font-weight: 700; }

/* ---------- Layout helpers ---------- */
main#main { min-height: 60vh; outline: none; }
.kl-section { padding-block: var(--kl-space-8); }
.kl-section-alt { background: var(--kl-cream); }
.kl-section-head { text-align: center; max-width: 42rem; margin: 0 auto var(--kl-space-6); }
.kl-section-head .eyebrow { display: inline-block; color: var(--kl-teal-text); font-weight: 800; letter-spacing: 0; font-size: .95rem; margin-bottom: .3rem; }
.kl-section-head h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem); }
.kl-section-head p { color: var(--kl-muted); }

/* page splash while WASM boots */
#app > .kl-boot { display: grid; place-items: center; min-height: 100vh; background: var(--kl-cream-50); gap: 1rem; align-content: center; }
.kl-boot img { width: 5rem; height: 5rem; border-radius: 1.2rem; animation: kl-pulse 1.4s ease-in-out infinite; }
@keyframes kl-pulse { 50% { transform: scale(1.08); } }

#blazor-error-ui { background: #fff3cd; color: #5c4400; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, .2); display: none; left: 0; padding: .6rem 1.25rem .7rem 1.25rem; position: fixed; width: 100%; z-index: 3000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

.kl-error-box { max-width: 36rem; margin: var(--kl-space-8) auto; text-align: center; padding: var(--kl-space-6); background: #fff; border-radius: var(--kl-radius-lg); box-shadow: var(--kl-shadow); }
.kl-alert { border-radius: var(--kl-radius); padding: .8rem 1rem; display: flex; gap: .6rem; align-items: flex-start; border: 1px solid; font-size: .95rem; }
.kl-alert.error { background: #fdecea; border-color: #f2b8b5; color: #7a1712; }
.kl-alert.info { background: #eaf4f3; border-color: #b6d8d5; color: #1d4f4b; }

.kl-brand span, .kl-header-actions .btn { white-space: nowrap; }
.kl-header-actions .btn { padding: .45rem 1rem; }
@media (max-width: 575.98px) { .kl-header-inner { gap: .4rem; } .kl-brand { font-size: 1.1rem; } .kl-brand img { width: 2.2rem; height: 2.2rem; } }
html, body { max-width: 100%; overflow-x: clip; }