/* ─── ThaiTown Custom Styles ──────────────────────────────────────────────── */
:root {
  --navy:   #0d1b4b;
  --gold:   #e5a800;
  --red:    #c8102e;
  --light-bg: #f5f6fa;
}

* { box-sizing: border-box; }

body {
  font-family: 'Sarabun', sans-serif;
  background: var(--light-bg);
  color: #2d2d2d;
  line-height: 1.7;
}

/* ── Top bar ── */
.topbar { background: #070f2b; font-size: .82rem; }

/* ── Navbar ── */
.bg-navy { background: var(--navy) !important; }

.navbar-brand .brand-flag { font-size: 1.6rem; }
.navbar-brand .brand-text {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .5px;
  background: linear-gradient(90deg, #fff, var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.nav-section { display:flex; align-items:center; gap:.45rem; font-size:.92rem; padding:.4rem .6rem !important; }
.nav-section .nav-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:6px; font-size:.75rem; color:#fff;
}
.nav-section:hover .nav-icon { opacity:.85; }

/* ── Buttons ── */
.btn-gold {
  background: var(--gold); color: #fff; border: none; font-weight: 600;
}
.btn-gold:hover { background: #cc9200; color: #fff; }
.border-gold { border-color: var(--gold) !important; }

/* ── Hero ── */
.hero-section {
  background: linear-gradient(135deg, var(--navy) 0%, #1a3a8c 60%, #c8102e 100%);
  padding: 3.5rem 0;
  position: relative;
  overflow: hidden;
}
.hero-section::before {
  content: '🇹🇭';
  position: absolute; right: -2rem; top: -1rem;
  font-size: 14rem; opacity: .06;
  pointer-events: none;
}

/* ── Section header strip ── */
.section-header {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem 1rem; border-radius: 10px;
  margin-bottom: 1.25rem;
}
.section-header .section-icon {
  width:42px; height:42px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.25rem; color:#fff; flex-shrink:0;
}
.section-header h5 { margin:0; font-weight:700; font-size:1.1rem; }
.section-header small { color:#888; font-size:.82rem; }

/* ── Post Card ── */
.post-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #eee;
  transition: transform .18s, box-shadow .18s;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.post-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0,0,0,.1);
}
.post-card .card-img-wrap {
  position: relative;
  height: 185px;
  overflow: hidden;
  background: #f0f0f0;
}
.post-card .card-img-wrap img {
  width:100%; height:100%; object-fit:cover;
  transition: transform .3s;
}
.post-card:hover .card-img-wrap img { transform: scale(1.04); }
.post-card .card-body { padding: 1rem; flex:1; display:flex; flex-direction:column; }
.post-card .card-title { font-weight:600; font-size:.98rem; margin-bottom:.4rem; }
.post-card .card-title a { text-decoration:none; color:#1a1a1a; }
.post-card .card-title a:hover { color: var(--navy); }
.post-card .card-meta { font-size:.8rem; color:#888; }
.post-card .price-tag {
  font-size: 1.15rem; font-weight: 700; color: var(--red);
}

/* priority badge */
.priority-badge {
  position:absolute; top:.6rem; left:.6rem;
  background: var(--gold); color:#fff;
  font-size:.7rem; font-weight:700;
  padding:.2rem .55rem; border-radius:20px;
  display:flex; align-items:center; gap:.25rem;
}

/* ── Listing page layout ── */
.listing-sidebar { position: sticky; top: 80px; }

/* ── Filter card ── */
.filter-card {
  background: #fff; border-radius: 14px; border: 1px solid #eee; padding: 1.25rem;
}
.filter-card .form-label { font-weight: 600; font-size: .88rem; margin-bottom:.3rem; }

/* ── View page ── */
.post-gallery img {
  width:100%; border-radius:12px; cursor:pointer;
  border:1px solid #eee; transition: opacity .2s;
}
.post-gallery img:hover { opacity:.9; }
.post-detail-box {
  background:#fff; border-radius:14px; border:1px solid #eee; padding:1.5rem;
}

/* ── Auth pages ── */
.auth-card {
  background: #fff; border-radius: 18px; box-shadow: 0 8px 40px rgba(0,0,0,.1);
  padding: 2.5rem; max-width: 440px; margin: 0 auto;
}
.auth-card .auth-logo { font-size: 2.5rem; margin-bottom: .5rem; }

/* ── Admin ── */
.admin-sidebar .nav-link {
  color: #495057; border-radius: 8px; padding: .55rem 1rem; margin-bottom:.2rem;
  display: flex; align-items: center; gap: .6rem;
}
.admin-sidebar .nav-link:hover,
.admin-sidebar .nav-link.active { background: var(--navy); color: #fff; }
.admin-sidebar .nav-link i { width:20px; text-align:center; }

.stat-card {
  background: #fff; border-radius: 14px; border: 1px solid #eee;
  padding: 1.5rem; display: flex; align-items: center; gap: 1rem;
}
.stat-card .stat-icon {
  width: 56px; height: 56px; border-radius: 14px;
  display: flex; align-items: center; justify-content:center;
  font-size: 1.6rem; flex-shrink:0;
}
.stat-card .stat-val { font-size: 1.8rem; font-weight: 800; line-height:1; }
.stat-card .stat-label { color:#888; font-size:.85rem; }

/* ── Footer ── */
.site-footer { background: var(--navy); }
.footer-link { color: rgba(255,255,255,.55); text-decoration:none; font-size:.88rem; }
.footer-link:hover { color: var(--gold); }
.footer-state-badge { font-size:.72rem; font-weight:500; }

/* ── Form improvements ── */
.form-control, .form-select {
  border-radius: 8px;
  border-color: #dee2e6;
  font-family: 'Sarabun', sans-serif;
}
.form-control:focus, .form-select:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 .2rem rgba(13,27,75,.15);
}

/* ── Photo upload preview ── */
.photo-preview-wrap { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.5rem; }
.photo-preview-wrap img {
  width:90px; height:90px; object-fit:cover; border-radius:8px; border:2px solid #dee2e6;
}

/* ── Badges ── */
.badge-cat { font-size:.75rem; font-weight:600; padding:.3rem .65rem; border-radius:20px; }

/* ── Pagination ── */
.pagination .page-link { border-radius:8px !important; margin:0 2px; font-family:'Sarabun',sans-serif; }

/* ── Utilities ── */
.rounded-14 { border-radius: 14px !important; }
.text-navy { color: var(--navy) !important; }
.bg-navy-light { background: rgba(13,27,75,.07) !important; }
.divider { border-top: 2px solid #f0f0f0; margin: 1.5rem 0; }

/* ── Mobile nav offcanvas (right drawer, < lg) ── */
@media (max-width: 991.98px) {
  #navMenu .dropdown-menu {
    position: static !important;
    border: none !important;
    box-shadow: none !important;
    background: rgba(255,255,255,.08) !important;
    border-radius: 8px !important;
    padding: .4rem .5rem !important;
  }
  #navMenu .dropdown-item { color: rgba(255,255,255,.85) !important; border-radius: 6px; }
  #navMenu .dropdown-item:hover { background: rgba(255,255,255,.12) !important; color: #fff !important; }
  #navMenu .dropdown-divider { border-color: rgba(255,255,255,.15) !important; }
}

/* ── Responsive ── */
@media(max-width:767px) {
  .post-card .card-img-wrap { height:150px; }
  .hero-section { padding: 2rem 0; }
  .auth-card { padding:1.5rem; }
}