html { font-size: 14px; position: relative; min-height: 100%; }
@media (min-width: 768px){ html { font-size: 16px; } }
body { margin-bottom: 60px; font-family: 'Kanit', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans Thai', 'Tahoma', sans-serif; }

/* ธีมสีน้ำเงินสอดคล้องกับ Seller.UI */
:root {
  --bs-primary: #0B3C91; /* match Seller.UI primary */
  --buyer-primary: var(--bs-primary);
}
.bg-primary { background-color: var(--bs-primary) !important; }
.text-primary { color: var(--bs-primary) !important; }
.btn-primary { background-color: var(--bs-primary); border-color: var(--bs-primary); }
.btn-outline-primary { color: var(--bs-primary); border-color: var(--bs-primary); }
.btn-outline-primary:hover { background-color: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }

/* โฟกัสองค์ประกอบตามโทนสีน้ำเงิน */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--buyer-primary);
}

/* Navbar ปรับระยะห่างและโทนสี */
.navbar-brand strong { letter-spacing: .2px; }
.nav-link { font-weight: 400; }
.nav-link.active, .nav-link:focus, .nav-link:hover { color: #fff; }

/* ฟอร์ม placeholder ให้ดูอ่านง่าย */
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; }

/* Utilities สำหรับการ์ด/แกลเลอรี */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.gallery-item { position: relative; overflow: hidden; border-radius: 8px; background: #f8f9fa; }
.gallery-item img { width: 100%; height: 180px; object-fit: cover; display: block; }
.gallery-item .actions { position: absolute; inset: auto 8px 8px auto; display: flex; gap: 6px; }
.gallery-item .badge { position: absolute; top: 8px; left: 8px; }

/* Lightbox พื้นฐาน */
.lightbox-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.8); display: none; align-items: center; justify-content: center; z-index: 1050; }
.lightbox-backdrop.show { display: flex; }
.lightbox-content { max-width: 92vw; max-height: 88vh; }
.lightbox-content img { width: 100%; height: auto; }