/* KNEVA Community — storefront styles.
   Consumes the kneva.co theme's design tokens (CSS custom properties, which are
   already on the page when App Proxy renders this inside the theme) so it matches
   the store's brand automatically. Brand-accurate fallbacks keep it on-brand when
   rendered standalone (e.g. the local preview). Because colors come from the theme,
   it also follows the theme's light/dark scheme — no hardcoded dark-mode block. */

#kneva-community {
  max-width: 640px; margin: 0 auto; padding: 1rem;
  color: var(--color-foreground, #2b2926);
  font-family: var(--font-body-family, inherit);
}
#kneva-community * { box-sizing: border-box; }

.kc-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; gap: 1rem; }
.kc-title {
  font-size: 2rem; margin: 0; letter-spacing: -0.01em; font-weight: 400;
  font-family: var(--font-heading-family, "Libre Baskerville", Georgia, serif);
  color: var(--color-foreground-heading, #6b5139);
}

.kc-btn {
  background: var(--color-primary-button-background, #283e36);
  color: var(--color-primary-button-text, #f1f3f3);
  border: 1px solid var(--color-primary-button-border, #283e36);
  border-radius: 8px; padding: 0.65rem 1.1rem; font-size: 0.95rem; cursor: pointer;
  font-family: inherit; transition: background 0.15s ease;
}
.kc-btn:hover { background: var(--color-primary-button-hover-background, #347f66); border-color: var(--color-primary-button-hover-background, #347f66); }
.kc-btn:disabled { opacity: 0.6; cursor: default; }
.kc-btn-small { padding: 0.4rem 0.7rem; font-size: 0.85rem; }

.kc-feed { display: flex; flex-direction: column; gap: 1.5rem; }

.kc-card {
  border: 1px solid rgb(var(--color-foreground-rgb, 43 41 38) / 0.12);
  border-radius: 12px; overflow: hidden;
  background: var(--color-input-background, #fffdf9);
}
.kc-card-head { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; }
.kc-author { font-weight: 600; }
.kc-time { color: rgb(var(--color-foreground-rgb, 43 41 38) / 0.55); font-size: 0.85rem; }
.kc-img { width: 100%; display: block; aspect-ratio: 1 / 1; object-fit: cover; background: rgb(var(--color-foreground-rgb, 43 41 38) / 0.05); }
.kc-caption { padding: 0.75rem 1rem 0; margin: 0; white-space: pre-wrap; word-break: break-word; }
.kc-card-foot { display: flex; gap: 0.5rem; align-items: center; padding: 0.75rem 1rem; }

.kc-action {
  background: none; border: 1px solid rgb(var(--color-foreground-rgb, 43 41 38) / 0.2); border-radius: 999px;
  padding: 0.35rem 0.75rem; cursor: pointer; font-size: 0.9rem; color: var(--color-foreground, #2b2926); font-family: inherit;
}
.kc-action:hover { background: rgb(var(--color-foreground-rgb, 43 41 38) / 0.06); }
.kc-liked { color: #c0392b; border-color: rgb(192 57 43 / 0.4); }
.kc-report { margin-left: auto; }

.kc-comments { padding: 0 1rem 1rem; }
.kc-comment-list { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.6rem; }
.kc-comment { font-size: 0.9rem; }
.kc-comment-author { font-weight: 600; margin-right: 0.4rem; }
.kc-comment-body { word-break: break-word; }
.kc-comment-form { display: flex; gap: 0.5rem; }
.kc-comment-input {
  flex: 1; padding: 0.45rem 0.6rem; border-radius: 8px;
  border: 1px solid var(--color-input-border, rgb(40 62 54 / 0.4));
  background: var(--color-input-background, #fff); color: var(--color-input-text, #111); font-family: inherit;
}

.kc-empty { text-align: center; color: rgb(var(--color-foreground-rgb, 43 41 38) / 0.55); padding: 2rem 0; }

.kc-modal { position: fixed; inset: 0; background: rgb(0 0 0 / 0.5); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 9999; }
.kc-modal-body { background: var(--color-background, #f5ebe0); color: var(--color-foreground, #2b2926); border-radius: 12px; padding: 1.5rem; width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: 0.75rem; }
.kc-modal-body h2 { margin: 0; font-weight: 400; font-family: var(--font-heading-family, "Libre Baskerville", Georgia, serif); color: var(--color-foreground-heading, #6b5139); }
.kc-composer-caption { min-height: 80px; padding: 0.5rem; border-radius: 8px; border: 1px solid var(--color-input-border, rgb(40 62 54 / 0.4)); background: var(--color-input-background, #fff); color: var(--color-input-text, #111); font-family: inherit; resize: vertical; }
.kc-composer-preview { width: 100%; max-height: 320px; object-fit: contain; border-radius: 8px; background: rgb(var(--color-foreground-rgb, 43 41 38) / 0.05); }

.kc-toast { position: fixed; left: 50%; bottom: -60px; transform: translateX(-50%); background: var(--color-foreground, #2b2926); color: var(--color-background, #f5ebe0); padding: 0.7rem 1.1rem; border-radius: 8px; transition: bottom 0.25s ease; z-index: 10000; }
.kc-toast-error { background: #b3261e; color: #fff; }
.kc-toast.kc-show { bottom: 24px; }

.kc-verified { color: var(--color-primary-button-hover-background, #347f66); font-weight: 700; }

.kc-banner { border-radius: 12px; padding: 0.9rem 1rem; margin-bottom: 1.25rem; }
.kc-reward { background: rgb(var(--color-primary-rgb, 107 81 57) / 0.1); border: 1px solid rgb(var(--color-primary-rgb, 107 81 57) / 0.35); }
.kc-code { background: var(--color-foreground, #2b2926); color: var(--color-background, #f5ebe0); padding: 0.1rem 0.4rem; border-radius: 6px; font-family: ui-monospace, monospace; }

.kc-featured-banner { border: 1px solid rgb(var(--color-primary-rgb, 107 81 57) / 0.4); background: rgb(var(--color-primary-rgb, 107 81 57) / 0.06); overflow: hidden; padding: 0; }
.kc-badge { display: block; background: var(--color-foreground-heading, #6b5139); color: #fff; padding: 0.5rem 1rem; font-weight: 600; }
.kc-featured-img { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
.kc-featured-meta { padding: 0.75rem 1rem; }
.kc-featured-meta strong { font-family: var(--font-heading-family, "Libre Baskerville", Georgia, serif); font-weight: 400; color: var(--color-foreground-heading, #6b5139); }
.kc-featured-meta p { margin: 0.25rem 0 0; }