/* ==========================================================================
   Section rules moved from css/style-15.css (CSS-PLAN Step 8 Wave 2).
   PREPENDED so this sheet's own rules keep winning their ties.
   ========================================================================== */
.fa-comment-o { color: rgb(49, 108, 180) !important; margin: -2px 5px !important; }

.o-hed { display: flex; align-items: center; gap: 0.5rem; }

.o-hed img { float: left; width: 32px; margin-right: 15px; border-radius: 50%; }

.o-hed a { font-weight: 600; line-height: 24px; font-size: 16px; }

.objavaMore { text-align: center; }

.objave input { padding: 10px; }

.svidjanja { padding: 8px 0px 16px; border-top: 1px solid var(--lightGrey); display: flex; justify-content: space-between; }

.svidjanja a { font-size: 12px; color: rgb(127, 127, 127); font-family: arial; }

.o-lajk, .o-share { float: left; margin-right: 20px; cursor: pointer; }

.o-lajk { font-size: 12px; color: rgb(127, 127, 127); font-family: arial; font-weight: 700; margin-top: 4px; }

.plavo, .plavo i { color: rgb(64, 128, 255); }

.lajkovi { margin-right: 10px; float: right; }

.objave { width: 100%; }

#pick-item { display: flex; flex-flow: row; align-items: center; gap: 0.75rem; border-bottom: 1px solid var(--kl-border-strong); margin: 0.25rem 0px; padding: 0.5rem 0.25rem; background: var(--kl-surface); }

#pick-item i { font-size: var(--kl-fs-16); }

.pick__sport-icon { display: flex; align-items: flex-start; }

.pick__details { display: flex; flex-direction: row; align-items: center; flex: 1 1 0%; gap: 0.5rem; }

.pick__match { display: flex; flex-direction: row; align-items: center; flex: 1 1 0%; gap: 0.5rem; }

.pick__match-details { display: flex; flex-direction: row; align-items: center; flex: 1 1 0%; }

.pick__match-details-event { font-size: var(--kl-fs-16); flex: 1 1 0%; display: flex; flex-direction: row; align-items: center; gap: 0.5rem; }

.pick__match-details-event a { font-family: "Red Hat Display", serif; font-weight: 500; }

.pick__match-details-time { font-size: var(--kl-fs-14); color: rgb(136, 136, 136); }

.pick__selection { display: flex; flex-flow: row; align-items: center; gap: 0.5rem; }

.pick__selection-details { display: flex; flex-flow: row; gap: 0.25rem; font-size: var(--kl-fs-14); }

.pick__selection-details-tip { font-weight: 500; }

.pick__tipster { display: flex; justify-content: flex-end; font-size: var(--kl-fs-14); width: 13%; }

.toned { color: rgb(136, 136, 136); }

.pick__tipster-details { display: flex; flex-direction: row; }

#objave_posts { display: flex; flex-direction: column; row-gap: 1rem; }

/* ==========================================================================
   Redesign 2026 — Zid / objave (design 11c).
   All values from css/design-tokens.css. Mobile-first; desktop at 1024px.
   ========================================================================== */

.kl-zid {
  max-width: 1360px;
  margin: 0 auto;
  padding: var(--kl-sp-16) var(--kl-sp-16) var(--kl-sp-24);
  background: var(--kl-surface);
  min-height: 60vh;
}



/* Neutralize legacy .objave styling on this page */
.kl-zid-list {
  margin-top: var(--kl-sp-16);
  display: flex;
  flex-direction: column;
  background: transparent;
  padding: 0;
  width: 100%;
}

.kl-zid-list #objave_posts {
  display: flex;
  flex-direction: column;
  gap: var(--kl-sp-12);
}

/* --- Post card ------------------------------------------------------------ */
.kl-obj-card {
  border: 1px solid var(--kl-border);
  border-radius: var(--kl-r-16);
  padding: var(--kl-sp-14) var(--kl-sp-16);
  display: flex;
  flex-direction: column;
  gap: var(--kl-sp-10);
}

.kl-obj-head {
  display: flex;
  align-items: center;
  gap: var(--kl-sp-10);
}

.kl-obj-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--kl-surface-4);
  flex-shrink: 0;
}

.kl-obj-id {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.kl-obj-author {
  font: 700 var(--kl-fs-13) var(--kl-font-display);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kl-obj-author a {
  color: var(--kl-ink);
  text-decoration: none;
}

.kl-obj-author a:hover { text-decoration: underline; }

.kl-obj-arrow { color: var(--kl-text-disabled); }

.kl-obj-time {
  font: 400 var(--kl-fs-11) var(--kl-font-ui);
  color: var(--kl-text-4);
  text-decoration: none;
}

.kl-obj-body {
  font: 400 var(--kl-fs-14) var(--kl-font-ui);
  color: var(--kl-text);
  line-height: 1.55;
  overflow-wrap: break-word;
}

.kl-obj-body a { color: var(--kl-blue); }

/* --- Actions --------------------------------------------------------------- */
.kl-obj-actions {
  display: flex;
  align-items: center;
  gap: var(--kl-sp-14);
  border-top: 1px solid var(--kl-divider);
  padding-top: var(--kl-sp-10);
}

.kl-obj-like,
.kl-obj-share {
  display: inline-flex;
  align-items: center;
  gap: var(--kl-sp-6);
  font: 600 var(--kl-fs-12) var(--kl-font-ui);
  color: var(--kl-text-2);
  cursor: pointer;
  text-decoration: none;
  /* rendered as a <button> for native share — strip the UA button chrome */
  background: none;
  border: 0;
  padding: 0;
}

.kl-obj-like:hover,
.kl-obj-share:hover { color: var(--kl-ink); }

/* Legacy like-state class carries the "liked" tint */
.kl-obj-like.plavo { color: var(--kl-blue); font-weight: 700; }

/* Like count sits directly next to the like button (no auto-margin push). */
.kl-obj-likecount {
  font: 600 var(--kl-fs-12) var(--kl-font-ui);
}

.kl-obj-likecount a { color: var(--kl-text-4); text-decoration: none; }

/* --- Comment composer: wrapper just holds the shared .kl-composer component -- */
.kl-obj-comment-form {
  display: block;
}

/* Re-assert the shared composer's surface at (0,2,0). The card is also rendered
   inside korisnik.php's isolated .tt-page, whose scoped reset
   (`.tt-page *` — same 0,1,0 specificity as `.kl-composer`, but loaded later)
   was flattening the composer to a transparent, padding-less bar with an
   invisible send button. These rules restate the global.css values so the
   composer looks identical on /objave and on a tipster wall.

   DO NOT DELETE because the values match global.css — that is the point, and it
   is exactly what makes this look redundant. CSS-AUDIT-REST §7.2 proposed
   deleting it as "the cleanest deletion in the plan"; measured 2026-08-13 with
   the rule removed, on a tipster wall that actually has posts
   (/tipster/kladionica-eu, /tipster/admin): background rgb(244,245,247) -> transparent,
   padding 6px 6px 6px 12px -> 0, height 48px -> 36px. /objave is unaffected
   because it has no .tt-page, which is why the deletion looks safe until you
   test a populated wall. Verdict: REFUTED, rule kept. */
.kl-obj-comment-form .kl-composer {
  display: flex;
  align-items: flex-end;
  gap: var(--kl-sp-8);
  background: var(--chat-surface-2);
  border-radius: var(--kl-r-14);
  padding: 6px 6px 6px 12px;
}
.kl-obj-comment-form .kl-composer-input {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  background: transparent;
  padding: 8px 0;
  font: 400 var(--kl-fs-14) var(--kl-font-ui);
  line-height: 20px;
  color: var(--kl-ink);
  max-height: 120px;
  overflow-y: auto;
  resize: none;
}
.kl-obj-comment-form .kl-composer-send {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: var(--kl-r-10);
  background: var(--chat-primary);
  color: var(--kl-on-dark);
}
.kl-obj-comment-form .kl-composer-send:disabled { background: var(--kl-border-strong); }

.kl-obj-comment-input {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  height: 42px;
  min-height: 42px;
  max-height: 120px;
  padding: 11px 16px;
  background: var(--kl-surface-3);
  border: 0;
  border-radius: 21px;
  font: 400 var(--kl-fs-13) var(--kl-font-ui);
  line-height: 20px;
  color: var(--kl-ink);
  resize: none;
}
.kl-obj-comment-input::placeholder { color: var(--kl-text-4); }
.kl-obj-comment-input:focus { outline: none; }
/* Keep the comment box at 16px on phones so iOS Safari doesn't zoom the page
   in on focus (any input under 16px triggers it). */
@media (max-width: 767px) {
  .kl-obj-comment-input { font-size: 16px; }
}

/* .kl-obj-comment-send lived here (44px round blue send button, + :hover).
   No template, script or DB field emits the class -- the comment form renders
   the shared component's .kl-composer-send instead. Deleted CSS-REST Step 7. */

.kl-obj-login {
  align-self: flex-start;
  font: 600 var(--kl-fs-12) var(--kl-font-ui);
  color: var(--kl-blue);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.kl-obj-note {
  font: 400 var(--kl-fs-12) var(--kl-font-ui);
  color: var(--kl-text-3);
  margin: 0;
}

/* --- Comments ---------------------------------------------------------------- */
.kl-obj-comments {
  display: flex;
  flex-direction: column;
  gap: var(--kl-sp-8);
}

.kl-obj-comments:empty { display: none; }

.kl-obj-komentar {
  font: 400 var(--kl-fs-13) var(--kl-font-ui);
  color: var(--kl-text);
  line-height: 1.5;
  background: var(--kl-surface-2);
  border-radius: var(--kl-r-10);
  padding: var(--kl-sp-8) var(--kl-sp-12);
  overflow-wrap: break-word;
}

.kl-obj-komentar a { color: var(--kl-ink); text-decoration: none; }
.kl-obj-komentar time { display: block; font-size: var(--kl-fs-11); color: var(--kl-text-4); margin-top: 2px; }
.kl-obj-komentar.o-komentar a.show-all-comments { color: var(--kl-blue); font-weight: 600; }

/* --- Load more (chat-style text button; identical on first + subsequent loads) */
.kl-zid .kl-zid-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--kl-sp-8);
  padding: var(--kl-sp-12) 0;
}
.kl-zid .kl-zid-more-btn {
  background: none;
  border: 0;
  padding: var(--kl-sp-8) var(--kl-sp-12);
  font: 600 var(--kl-fs-13) var(--kl-font-ui);
  color: var(--kl-text-2);
  cursor: pointer;
  transition: color var(--kl-dur-short) var(--kl-ease);
}
.kl-zid .kl-zid-more-btn:hover,
.kl-zid .kl-zid-more-btn:focus-visible { color: var(--kl-blue); }
.kl-zid .kl-zid-more .loding { font: 500 var(--kl-fs-12) var(--kl-font-ui); color: var(--kl-text-4); }

/* --- Desktop ------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .kl-zid { padding: var(--kl-sp-28) var(--kl-sp-40) var(--kl-sp-48) var(--kl-sp-40); }
  .kl-zid .kl-page-title { font-size: 28px; }

  /* Full-width on desktop (owner 2026-08-02) — no 720px reading column. */
  .kl-zid-list { margin-top: var(--kl-sp-16); }
}

/* ── Mobile rule migrated from responsive-11.css (CSS-PLAN Step 6): no-op
   guard today (zero iframes in wall posts — audit Appendix D §6); parked
   with the wall styles. ── */
@media (max-width: 1024px) {
    .objave iframe {
        display: none;
    }
    
}