/* ============================================================
   ของเหลือ (Khong Luea) v4
   Color: Fresh Green #00b14f  |  UX-First Design
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700;800&display=swap');

:root {
  /* Brand */
  --g:        #00a046;   /* primary green — darker for contrast */
  --g-d:      #009941;   /* dark hover */
  --g-l:      #e6f7ee;   /* light bg */
  --g-m:      #b3e6cb;   /* mid */
  --orange:   #ff6b35;   /* CTA accent */
  --orange-l: #fff3ee;
  --red:      #e53935;
  --yellow:   #ffb300;
  --blue:     #2196f3;

  /* Neutral */
  --bg:       #f5f7f5;
  --surface:  #ffffff;
  --border:   #e0e7e0;
  --text:     #1a2e1a;
  --muted:    #4a5e4a;
  --disabled: #b0bdb0;

  /* Shape */
  --r:        8px;
  --r-lg:     14px;
  --r-xl:     20px;
  --shadow-s: 0 1px 4px rgba(0,0,0,.08);
  --shadow-m: 0 4px 16px rgba(0,0,0,.10);
  --shadow-l: 0 8px 32px rgba(0,177,79,.14);

  /* Bootstrap overrides */
  --bs-primary:     #00b14f;
  --bs-primary-rgb: 0,177,79;
}

/* ── Reset & Base ──────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: 'Sarabun', 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; }
a { color: var(--g); text-decoration: none; }
a:hover { color: var(--g-d); }

/* ── Bootstrap primary overrides ──────────── */
.btn-primary { background:var(--g); border-color:var(--g); font-weight:600; letter-spacing:.01em; }
.btn-primary:hover,.btn-primary:focus { background:var(--g-d); border-color:var(--g-d); box-shadow:0 4px 12px rgba(0,177,79,.3); }
.btn-primary:active { background:#008838; border-color:#008838; }
.btn-outline-primary { color:var(--g); border-color:var(--g); font-weight:600; }
.btn-outline-primary:hover { background:var(--g); border-color:var(--g); }
.bg-primary  { background-color:var(--g) !important; }
.text-primary { color:var(--g) !important; }
.border-primary { border-color:var(--g) !important; }
.badge.bg-primary { background-color:var(--g) !important; }
.form-control:focus,.form-select:focus {
  border-color: var(--g);
  box-shadow: 0 0 0 3px rgba(0,177,79,.15);
  outline: none;
}
.form-check-input:checked { background-color:var(--g); border-color:var(--g); }

/* ── Sticky Navbar ─────────────────────────── */
.kl-navbar {
  background: #008c3a !important;
  position: sticky; top: 0; z-index: 1040;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  padding: 0;
}
.kl-navbar .navbar-brand {
  color: #fff !important;
  font-weight: 800;
  font-size: 1.25rem;
  text-shadow: 0 1px 2px rgba(0,0,0,.15);
  padding: .65rem 0;
  gap: 9px;
  display: flex; align-items: center;
}
.kl-navbar .brand-logo {
  width: 36px; height: 36px;
  background: transparent;
  border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.kl-navbar .brand-th { line-height: 1.15; }
.kl-navbar .brand-th span { display:block; font-size:.68rem; opacity:1; letter-spacing:1px; font-weight:500; color:rgba(255,255,255,.92); }

.kl-navbar .nav-link {
  color: #fff !important;
  font-weight: 600; padding: .65rem .75rem !important;
  border-radius: 7px; transition: background .15s;
}
.kl-navbar .nav-link:hover { background:rgba(255,255,255,.15); color:#fff !important; }

/* Search bar */
.kl-navbar .kl-search { position:relative; }
.kl-navbar .kl-search .form-control {
  border: none; border-radius: 22px;
  background: rgba(255,255,255,.18); color: #fff;
  font-size: .88rem; height: 38px; padding: 0 42px 0 16px;
  transition: background .2s, width .3s;
  width: 260px;
}
.kl-navbar .kl-search .form-control::placeholder { color:rgba(255,255,255,.65); }
.kl-navbar .kl-search .form-control:focus {
  background: rgba(255,255,255,.95); color:var(--text);
  box-shadow: none; width: 320px;
}
.kl-navbar .kl-search .form-control:focus::placeholder { color: var(--muted); }
.kl-navbar .kl-search .btn-search {
  position:absolute; right:4px; top:4px;
  background:transparent; border:none; color:rgba(255,255,255,.8);
  width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  padding:0; transition:.15s;
}
.kl-navbar .kl-search .form-control:focus + .btn-search { color:var(--g); }

/* Post button */
.kl-navbar .btn-post {
  background: var(--orange); color: #fff;
  font-weight: 700; border-radius: 22px;
  padding: .4rem 1.1rem; border: none;
  font-size: .88rem; white-space: nowrap;
  transition: background .15s, transform .1s;
  display: flex; align-items: center; gap: 5px;
}
.kl-navbar .btn-post:hover { background:#e85a25; color:#fff; transform:translateY(-1px); }

/* Dropdown */
.kl-navbar .dropdown-menu {
  border:none; box-shadow: var(--shadow-m);
  border-radius: var(--r-lg); min-width: 210px;
  padding: .4rem;
}
.kl-navbar .dropdown-item {
  border-radius: 7px; padding: .5rem .75rem;
  font-size: .88rem; color: var(--text);
}
.kl-navbar .dropdown-item:hover { background:var(--g-l); color:var(--g-d); }

/* Notification dot */
.kl-notif-dot {
  position:absolute; top:6px; right:4px;
  width:8px; height:8px; border-radius:50%;
  background:var(--orange); border:2px solid var(--g);
}

/* ── Category Scrollbar ────────────────────── */
.kl-catbar {
  background: #fff;
  border-bottom: 1px solid var(--border);
  overflow-x: auto; white-space: nowrap;
  scrollbar-width: none;
}
.kl-catbar::-webkit-scrollbar { display:none; }
.kl-catbar-inner {
  display: inline-flex; gap: 2px;
  padding: 6px 12px;
}
.kl-catbar a {
  color: #3a5a3a; font-size: .82rem; font-weight: 600;
  padding: .38rem 1rem; display: inline-flex; align-items: center; gap: 5px;
  text-decoration: none; border-radius: 20px;
  border: 1.5px solid transparent;
  transition: all .15s; white-space: nowrap;
}
.kl-catbar a:hover { background:var(--g-l); color:var(--g); border-color:var(--g-m); }
.kl-catbar a.active {
  background:var(--g); color:#fff; border-color:var(--g);
  box-shadow: 0 2px 8px rgba(0,177,79,.25);
}

/* ── Hero Banner ───────────────────────────── */
.kl-hero {
  background: linear-gradient(135deg, #00b14f 0%, #009141 55%, #007a38 100%);
  color: #fff; padding: 2.8rem 0 2.2rem;
  position: relative; overflow: hidden;
}
.kl-hero::before {
  content:''; position:absolute;
  width:500px; height:500px; border-radius:50%;
  background:rgba(255,255,255,.05);
  top:-200px; right:-100px; pointer-events:none;
}
.kl-hero::after {
  content:''; position:absolute;
  width:300px; height:300px; border-radius:50%;
  background:rgba(255,255,255,.04);
  bottom:-150px; left:-80px; pointer-events:none;
}
.kl-hero-inner { position:relative; z-index:1; }
.kl-hero h1 { font-size:2rem; font-weight:800; margin-bottom:.35rem; line-height:1.25; }
.kl-hero .tagline { font-size:.95rem; opacity:1; color:rgba(255,255,255,.96); margin-bottom:1.4rem; font-weight:500; }
.kl-hero .hero-search {
  display:flex; max-width:520px;
  background:#fff; border-radius:12px;
  padding:5px; gap:5px;
  box-shadow: 0 4px 24px rgba(0,0,0,.15);
}
.kl-hero .hero-search input {
  border:none; outline:none; flex:1;
  font-size:.95rem; padding:0 .75rem; color:var(--text);
  background:transparent; font-family:inherit;
}
.kl-hero .hero-search input::placeholder { color:var(--muted); }
.kl-hero .hero-search .btn-search {
  background:var(--g); color:#fff; border:none;
  border-radius:9px; padding:.55rem 1.3rem;
  font-weight:700; font-size:.9rem; white-space:nowrap;
  display:flex; align-items:center; gap:5px;
}
.kl-hero .hero-search .btn-search:hover { background:var(--g-d); }
.kl-hero .hero-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:1rem; }
.kl-hero .hero-chips a {
  background:rgba(255,255,255,.18); color:#fff;
  border:1px solid rgba(255,255,255,.3);
  border-radius:20px; padding:.28rem .85rem;
  font-size:.8rem; transition:.15s;
}
.kl-hero .hero-chips a:hover { background:rgba(255,255,255,.3); color:#fff; }
.kl-hero .hero-stats {
  display:flex; gap:2rem; margin-top:1.5rem;
  font-size:.82rem; opacity:1;
}
.kl-hero .hero-stats span { display:flex; align-items:center; gap:5px; }

/* ── Section heading ───────────────────────── */
.kl-section { padding: 1.75rem 0 1.25rem; }
.kl-section-head {
  display:flex; align-items:center;
  justify-content:space-between; margin-bottom:1rem;
}
.kl-section-head h4 {
  font-weight:700; margin:0; font-size:1.05rem;
  display:flex; align-items:center; gap:8px;
}
.kl-section-head h4 .sec-bar {
  width:4px; height:18px; background:var(--g);
  border-radius:3px; display:inline-block;
}
.kl-section-head .see-all {
  font-size:.82rem; color:var(--g);
  font-weight:600; display:flex; align-items:center; gap:3px;
}
.kl-section-head .see-all:hover { color:var(--g-d); }

/* ── Category Cards ────────────────────────── */
.kl-cat-card {
  text-align:center; padding:.9rem .4rem;
  border-radius:var(--r-lg); background:var(--surface);
  border:1.5px solid var(--border); text-decoration:none;
  color:var(--text); display:block; transition:all .18s;
}
.kl-cat-card:hover {
  border-color:var(--g); background:var(--g-l);
  color:var(--g-d); transform:translateY(-3px);
  box-shadow:var(--shadow-l);
}
.kl-cat-card .cat-icon {
  width:46px; height:46px; background:var(--g-l);
  border-radius:12px; display:flex; align-items:center;
  justify-content:center; margin:0 auto .5rem;
  font-size:21px; color:var(--g); transition:.18s;
}
.kl-cat-card:hover .cat-icon { background:var(--g); color:#fff; }
.kl-cat-card .cat-name { font-size:.76rem; font-weight:700; line-height:1.2; }

/* ── Item Card ─────────────────────────────── */
.kl-item-card {
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:var(--r-lg);
  overflow:hidden;
  transition:transform .18s, box-shadow .18s, border-color .18s;
  display:flex; flex-direction:column;
  position:relative;
}
.kl-item-card:hover {
  transform:translateY(-4px);
  box-shadow:var(--shadow-m);
  border-color:var(--g-m);
}
.kl-item-card.is-highlighted { border-color:var(--yellow); border-width:2px; }

/* Image area */
.kl-item-card .card-img-wrap {
  position:relative; overflow:hidden;
  background:#f0f3f0; aspect-ratio:4/3;
}
.kl-item-card .card-img-wrap img {
  width:100%; height:100%;
  object-fit:cover; transition:transform .35s ease;
  display:block;
}
.kl-item-card:hover .card-img-wrap img { transform:scale(1.06); }

/* Badges */
.kl-item-card .img-badges {
  position:absolute; top:8px; left:8px;
  display:flex; flex-direction:column; gap:4px;
  z-index:2;
}
.badge-free {
  background:var(--g); color:#fff;
  font-size:.7rem; font-weight:700;
  padding:3px 9px; border-radius:6px;
  letter-spacing:.02em;
}
.badge-bump {
  background:var(--orange); color:#fff;
  font-size:.7rem; font-weight:700;
  padding:3px 9px; border-radius:6px;
}
.badge-sold {
  position:absolute; inset:0;
  background:rgba(0,0,0,.48);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.05rem; font-weight:800;
  letter-spacing:.05em; z-index:2;
}

/* Favorite button */
.kl-item-card .btn-fav {
  position:absolute; top:8px; right:8px;
  background:rgba(255,255,255,.92);
  border:none; border-radius:50%;
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; color:var(--disabled);
  cursor:pointer; padding:0; z-index:2;
  transition:all .18s; box-shadow:var(--shadow-s);
}
.kl-item-card .btn-fav:hover,
.kl-item-card .btn-fav.active { color:var(--red); transform:scale(1.12); }

/* Card body */
.kl-item-card .card-body {
  padding:.75rem;
  flex-grow:1; display:flex; flex-direction:column; gap:4px;
}
.kl-item-card .item-title {
  font-size:.87rem; font-weight:700; color:#1a2e1a;
  display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
  line-height:1.4; text-decoration:none;
}
.kl-item-card .item-title:hover { color:var(--g); }

.item-condition {
  display:inline-block; font-size:.68rem; font-weight:700;
  padding:2px 8px; border-radius:5px;
}

.kl-item-card .item-price {
  font-size:1.05rem; font-weight:800;
  color:var(--g); margin-top:auto;
}
.kl-item-card .item-price.is-free span {
  background:var(--g); color:#fff;
  padding:2px 10px; border-radius:6px; font-size:.78rem; font-weight:700;
}
.kl-item-card .item-location {
  font-size:.75rem; color:var(--muted);
  margin-bottom:.25rem;
  display:flex; align-items:center;
}
.kl-item-card .item-meta {
  display:flex; align-items:center;
  justify-content:space-between;
  font-size:.73rem; color:#555e55; font-weight:500;
  padding-top:.4rem;
  border-top:1px solid var(--border);
  margin-top:4px;
}

/* ── Filter Sidebar ────────────────────────── */
.kl-filter-card {
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:var(--r-lg); overflow:hidden;
  position:sticky; top:72px;
}
.kl-filter-head {
  background:var(--g); color:#fff;
  padding:.65rem 1rem; font-weight:700;
  font-size:.88rem; display:flex; align-items:center; gap:7px;
}
.kl-filter-body { padding:.9rem 1rem; }
.kl-filter-section { padding:.6rem 0; }
.kl-filter-section+.kl-filter-section { border-top:1px solid var(--border); }
.kl-filter-label {
  font-size:.7rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.06em;
  color:#3a5a3a; margin-bottom:.5rem;
}

/* ── Card utility ──────────────────────────── */
.kl-card {
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:var(--r-lg);
}
.kl-card-head {
  background:var(--g); color:#fff;
  padding:.65rem 1rem; font-weight:700;
  font-size:.88rem;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
}

/* ── Auth forms ────────────────────────────── */
.kl-auth-card {
  background:var(--surface);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-m);
  padding:2rem 1.75rem;
  border:none;
}
.kl-auth-card .form-control {
  border-radius:9px; padding:.6rem .9rem;
  border:1.5px solid var(--border);
  font-size:.95rem; transition:.2s;
}
.kl-auth-card .btn-primary {
  border-radius:9px; height:44px;
  font-size:1rem; letter-spacing:.02em;
}

/* ── Chat ──────────────────────────────────── */
.kl-chat-wrap { border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-m); }
.kl-chat-header {
  background:var(--g); color:#fff;
  padding:.85rem 1.1rem;
  display:flex; align-items:center; gap:.75rem;
}
.kl-chat-messages {
  background:#f5f7f5; padding:1rem;
  overflow-y:auto; height:420px;
}
.chat-bubble-mine {
  background:var(--g); color:#fff;
  border-radius:16px 16px 4px 16px;
  box-shadow:0 2px 8px rgba(0,177,79,.2);
}
.chat-bubble-other {
  background:#fff; color:var(--text);
  border:1.5px solid var(--border);
  border-radius:16px 16px 16px 4px;
}
.kl-chat-input {
  background:#fff; padding:.75rem;
  border-top:1.5px solid var(--border);
  display:flex; gap:.5rem;
}
.kl-chat-input textarea {
  border:1.5px solid var(--border);
  border-radius:10px; resize:none;
  flex:1; padding:.6rem .85rem;
  font-family:inherit; font-size:.9rem;
}
.kl-chat-input textarea:focus { border-color:var(--g); box-shadow:0 0 0 3px rgba(0,177,79,.12); outline:none; }
.kl-chat-input .btn-send {
  background:var(--g); color:#fff; border:none;
  border-radius:10px; width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; flex-shrink:0; transition:.15s;
}
.kl-chat-input .btn-send:hover { background:var(--g-d); transform:scale(1.05); }

/* Conversation list item */
.kl-conv-item {
  display:flex; gap:.9rem; padding:.9rem 1rem;
  text-decoration:none; color:var(--text);
  border-bottom:1px solid var(--border);
  transition:background .15s;
}
.kl-conv-item:hover { background:var(--g-l); }
.kl-conv-item.unread { background:#f0faf4; }
.kl-conv-item:last-child { border-bottom:none; }

/* ── CTA Banner ────────────────────────────── */
.kl-cta {
  background:linear-gradient(135deg, #00b14f 0%, #009141 100%);
  color:#fff; padding:3rem 1rem; text-align:center;
}
.kl-cta h3 { font-weight:800; margin-bottom:.4rem; }
.kl-cta .btn-cta {
  background:#fff; color:var(--g);
  font-weight:800; font-size:1rem;
  padding:.7rem 2rem; border-radius:24px;
  border:none; display:inline-flex; align-items:center; gap:6px;
  box-shadow:0 4px 16px rgba(0,0,0,.15);
  transition:.18s;
}
.kl-cta .btn-cta:hover { transform:translateY(-2px); box-shadow:0 6px 24px rgba(0,0,0,.2); }

/* ── Featured badge strip ──────────────────── */
.kl-featured-bg {
  background:linear-gradient(180deg, #f0faf4 0%, var(--bg) 100%);
  padding:1.5rem 0;
}

/* ── Premium packages ──────────────────────── */
.kl-pkg-card {
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:var(--r-xl); overflow:hidden;
  transition:.18s;
}
.kl-pkg-card:hover { border-color:var(--g-m); box-shadow:var(--shadow-m); }
.kl-pkg-card.popular { border-color:var(--g); border-width:2px; }
.kl-pkg-badge {
  background:var(--g); color:#fff;
  text-align:center; padding:.4rem;
  font-size:.75rem; font-weight:700; letter-spacing:.04em;
}
.kl-pkg-body { padding:1.5rem 1.25rem; }
.kl-pkg-price { font-size:2rem; font-weight:800; color:var(--g); line-height:1; }

/* ── Footer ────────────────────────────────── */
.kl-footer { background:#1a2e1a; color:rgba(255,255,255,.7); padding:3rem 0 1.5rem; }
.kl-footer h5,.kl-footer h6 { color:#fff; font-weight:700; }
.kl-footer a { color:rgba(255,255,255,.55); }
.kl-footer a:hover { color:var(--g-m); }
.kl-footer .footer-brand { color:#fff; font-size:1.2rem; font-weight:800; }
.kl-footer hr { border-color:rgba(255,255,255,.1); }
.kl-footer .footer-btm { font-size:.78rem; color:rgba(255,255,255,.35); }

/* ── Pagination ────────────────────────────── */
.pagination .page-link { color:var(--g); border-color:var(--border); border-radius:7px !important; margin:0 2px; }
.pagination .page-item.active .page-link { background:var(--g); border-color:var(--g); }

/* ── Toast / Alert ─────────────────────────── */
.alert-success { background:#f0faf4; border:1.5px solid var(--g-m); color:#1a5c32; border-left:4px solid var(--g); }
.alert-danger  { background:#fff5f5; border:1.5px solid #fcc; color:#9b1c1c; border-left:4px solid var(--red); }
.alert-info    { background:#eff6ff; border:1.5px solid #bfdbfe; color:#1e40af; border-left:4px solid #3b82f6; }

/* ── Utilities ─────────────────────────────── */
.text-green  { color:var(--g) !important; }
.bg-green-l  { background:var(--g-l) !important; }
.fw-800      { font-weight:800 !important; }
.fs-7        { font-size:.75rem !important; }
.rounded-pill-sm { border-radius:20px !important; }

/* ── Empty states ──────────────────────────── */
.kl-empty { text-align:center; padding:3rem 1rem; color:var(--muted); }
.kl-empty i { font-size:3rem; opacity:.4; display:block; margin-bottom:.75rem; }
.kl-empty h6 { font-weight:700; color:var(--text); margin-bottom:.35rem; }

/* ── Responsive ────────────────────────────── */
@media (max-width:768px) {
  .kl-hero h1 { font-size:1.5rem; }
  .kl-hero { padding:2rem 0 1.5rem; }
  .kl-item-card .card-img-wrap { aspect-ratio:1/1; }
}
@media (max-width:576px) {
  .kl-hero h1 { font-size:1.3rem; }
  .kl-hero .hero-stats { display:none; }
  .kl-catbar-inner { padding:5px 8px; }
  .kl-catbar a { font-size:.78rem; padding:.32rem .75rem; }
}

/* ── Scrollbar ─────────────────────────────── */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--g-m); border-radius:10px; }
::-webkit-scrollbar-thumb:hover { background:var(--g); }