/*
 * Kitali customer account UI kit (ka-*).
 * Self-contained so new account pages do not depend on which Tailwind
 * utilities happen to be in the precompiled storefront CSS.
 */
:root {
    --ka-green: #075b3b;
    --ka-green-soft: #ecf7f1;
    --ka-orange: #b87900;
    --ka-ink: #10251e;
    --ka-muted: #6b7a73;
    --ka-line: #e2e8e4;
    --ka-bg: #f6f8f7;
    --ka-red: #b42318;
    --ka-radius: 14px;
}

.ka-main { display: flex; flex-direction: column; gap: 16px; flex: 1; min-width: 0; width: 100%; }
@media (min-width: 768px) { .ka-main { width: 60%; } }
@media (min-width: 1024px) { .ka-main { width: 75%; } }

.ka-card { background: #fff; border: 1px solid var(--ka-line); border-radius: var(--ka-radius); padding: 18px; }
@media (min-width: 768px) { .ka-card { padding: 24px 28px; } }
.ka-h1 { margin: 0; font-size: 22px; line-height: 1.25; font-weight: 700; color: var(--ka-ink); }
.ka-h2 { margin: 0; font-size: 17px; font-weight: 700; color: var(--ka-ink); }
.ka-sub { margin: 4px 0 0; font-size: 14px; color: var(--ka-muted); }
.ka-muted { color: var(--ka-muted); font-size: 13px; }
.ka-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ka-stack { display: flex; flex-direction: column; gap: 10px; }
.ka-stack > * { margin: 0; }
.ka-mt { margin-top: 16px; }
.ka-grid-2 { display: grid; gap: 12px; }
@media (min-width: 640px) { .ka-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ka-grid-3 { display: grid; gap: 12px; }
@media (min-width: 640px) { .ka-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ka-list { border: 1px solid var(--ka-line); border-radius: 12px; overflow: hidden; }
.ka-list > * + * { border-top: 1px solid var(--ka-line); }
.ka-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; padding: 14px 16px; }
.ka-row__main { min-width: 0; flex: 1 1 220px; }
.ka-row__title { margin: 0; font-weight: 600; color: var(--ka-ink); font-size: 15px; }
.ka-row__meta { margin: 2px 0 0; color: var(--ka-muted); font-size: 13px; }
a.ka-row { color: inherit; text-decoration: none; }
a.ka-row:hover { background: #fafcfb; }

.ka-label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: #34463e; }
.ka-input, .ka-select, .ka-textarea { width: 100%; min-height: 46px; border: 1px solid #cfd8d3; border-radius: 10px; padding: 10px 12px; font-size: 15px; background: #fff; color: var(--ka-ink); }
.ka-textarea { min-height: 96px; resize: vertical; }
.ka-input:focus, .ka-select:focus, .ka-textarea:focus { outline: none; border-color: var(--ka-green); box-shadow: 0 0 0 3px rgba(7, 91, 59, .14); }

.ka-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid var(--ka-green); border-radius: 10px; background: var(--ka-green); color: #fff !important; font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap; }
.ka-btn:hover { filter: brightness(1.08); }
.ka-btn--ghost { background: #fff; color: var(--ka-green) !important; }
.ka-btn--danger { background: #fff; color: var(--ka-red) !important; border-color: #f3c3be; }
.ka-btn--block { width: 100%; }
.ka-btn--sm { min-height: 36px; padding: 0 12px; font-size: 13px; }
.ka-btn[disabled] { opacity: .55; cursor: not-allowed; }
@media (max-width: 639px) { .ka-btn--mobile-block { width: 100%; } }

.ka-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #eef2f0; color: #34463e; white-space: nowrap; }
.ka-badge--green { background: var(--ka-green-soft); color: var(--ka-green); }
.ka-badge--orange { background: #fff3dc; color: #b87900; }
.ka-badge--red { background: #fef1f0; color: var(--ka-red); }

.ka-choice { display: flex; align-items: flex-start; gap: 10px; padding: 14px; border: 1px solid var(--ka-line); border-radius: 12px; cursor: pointer; }
.ka-choice input { margin-top: 3px; accent-color: var(--ka-green); }
.ka-choice:has(input:checked) { border-color: var(--ka-green); background: var(--ka-green-soft); }
.ka-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--ka-line); border-radius: 999px; font-size: 13px; cursor: pointer; background: #fff; color: var(--ka-ink); text-decoration: none; }
.ka-chip input { accent-color: var(--ka-green); width: 16px; height: 16px; }
.ka-chip:has(input:checked), .ka-chip.is-active { border-color: var(--ka-green); background: var(--ka-green-soft); color: var(--ka-green); font-weight: 600; }
.ka-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ka-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.ka-tabs::-webkit-scrollbar { display: none; }

.ka-stat { border-radius: 12px; padding: 16px; background: var(--ka-bg); }
.ka-stat--accent { background: linear-gradient(135deg, #075b3b, #0b7a50); color: #fff; }
.ka-stat__label { margin: 0; font-size: 13px; opacity: .8; }
.ka-stat__value { margin: 4px 0 0; font-size: 28px; font-weight: 800; line-height: 1.1; }

.ka-bubble { max-width: 88%; padding: 10px 12px; border-radius: 12px; font-size: 14px; line-height: 1.45; background: #f1f4f2; }
.ka-bubble--me { margin-left: auto; background: var(--ka-green-soft); }
.ka-bubble__meta { display: block; margin-bottom: 2px; font-size: 11px; color: var(--ka-muted); font-weight: 600; }
.ka-empty { padding: 26px 16px; text-align: center; color: var(--ka-muted); font-size: 14px; }
.ka-empty i { display: block; margin-bottom: 8px; font-size: 26px; color: #a8b8b0; }
.ka-thumb { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; background: var(--ka-bg); flex: 0 0 52px; }
.ka-inline-form { display: flex; gap: 8px; flex-wrap: wrap; }
.ka-inline-form .ka-input { flex: 1 1 200px; }
.ka-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; font-weight: 700; letter-spacing: .06em; padding: 6px 10px; border: 1px dashed var(--ka-green); border-radius: 8px; color: var(--ka-green); background: #fff; }