@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600&display=swap');

:root {
  --primary: #1a1a1a;
  --secondary: #fff;
  --success: #4bbf73;
  --info: #1f9bcf;
  --warning: #f0ad4e;
  --danger: #d9534f;
  --light: #fff;
  --dark: #343a40;
  --body-color: #55595c;
  --gray: #919aa1;
}

body {
  font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.875rem;
  color: #55595c;
  background-color: #fff;
}

main { min-height: 80vh; padding-top: 1rem; padding-bottom: 1rem; }

h1 { font-size: 1.8rem; padding: 1rem 0; }
h2 { font-size: 1.4rem; padding: 0.5rem 0; }
h3 { padding: 1rem 0; }

/* ====== Navbar ====== */
.navbar { background-color: #343a40 !important; }
.navbar-brand { color: #fff !important; font-size: 1.25rem; font-weight: 600; }
.navbar .nav-link { color: rgba(255,255,255,0.5) !important; }
.navbar .nav-link:hover { color: #fff !important; }
.navbar .dropdown-menu { background-color: #fff; border: 1px solid rgba(0,0,0,0.15); }
.navbar .dropdown-item { color: #55595c; }
.navbar .dropdown-item:hover { background-color: #f8f9fa; }

/* ====== Buttons ====== */
.btn-primary { background-color: #1a1a1a; border-color: #1a1a1a; color: #fff; }
.btn-primary:hover { background-color: #333; border-color: #333; }
.btn-dark { background-color: #343a40; border-color: #343a40; color: #fff; }
.btn-dark:hover { background-color: #23272b; border-color: #1d2124; }
.btn-danger { background-color: #d9534f; border-color: #d9534f; }
.btn-light { color: #1a1a1a; background-color: #fff; border-color: #ddd; }
.btn-outline-secondary { color: #55595c; border-color: #ccc; }
.btn-outline-secondary:hover { background-color: #6c757d; border-color: #6c757d; color: #fff; }

/* ====== Cards ====== */
.card { border: 1px solid rgba(0,0,0,0.125); margin-bottom: 15px; }
.card-title { margin-bottom: 0.75rem; }
.info-card { transition: transform 0.2s, box-shadow 0.2s; border: 1px solid rgba(0,0,0,0.125); margin-bottom: 1.5rem; }
.info-card:hover { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(0,0,0,0.15); }
.info-card .card-img-top { height: 200px; object-fit: cover; }
.info-card .card-body { padding: 1rem; }
.info-card .card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 1rem; font-weight: 600; color: #1a1a1a; }
.info-card .card-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.8rem; color: #919aa1; }

/* ====== Nav Pills (categories) ====== */
.nav-pills .nav-link { color: #55595c; border-radius: 50px; margin: 0 4px; padding: 0.375rem 1rem; }
.nav-pills .nav-link.active { color: #fff; background-color: #1a1a1a; }
.nav-pills .nav-link:hover:not(.active) { background-color: #e9ecef; }

/* ====== List Group ====== */
.list-group-item { padding: 0.75rem 1.25rem; border: 1px solid rgba(0,0,0,0.125); }

/* ====== Table ====== */
.table { color: #55595c; }
.table-striped > tbody > tr:nth-of-type(odd) { background-color: rgba(0,0,0,0.02); }

/* ====== Product page ====== */
.product-image { max-height: 350px; object-fit: contain; width: 100%; }
.product-price { font-size: 2rem; font-weight: bold; color: #d9534f; }

/* ====== QR code modal ====== */
.qr-container { text-align: center; }
.qr-container canvas, .qr-container img { margin: 0 auto; }

/* ====== Form container (centered) ====== */
.form-container { max-width: 500px; margin: 0 auto; }

/* ====== Footer ====== */
footer { background-color: #f8f9fa; padding: 1.5rem 0; margin-top: auto; }
footer a { color: #919aa1; text-decoration: none; }
footer a:hover { color: #1a1a1a; }

/* ====== Pagination ====== */
.pagination { margin-bottom: 0; }
.pagination .page-link { color: #1a1a1a; }
.pagination .page-item.active .page-link { background-color: #1a1a1a; border-color: #1a1a1a; color: #fff; }

/* ====== Alerts ====== */
.alert-danger { color: #fff; background-color: #d9534f; border-color: #d43f3a; }
.alert-success { color: #fff; background-color: #4bbf73; border-color: #3d9b5f; }
.alert-warning { color: #fff; background-color: #f0ad4e; border-color: #eea236; }
.alert-info { color: #fff; background-color: #1f9bcf; border-color: #1a87b5; }

/* ====== Search ====== */
.search-section { background: #f8f9fa; border-radius: 8px; padding: 2rem 1rem; margin-bottom: 1.5rem; }

/* ====== Payment status badge ====== */
.pay-status-badge { background-color: #00C800; color: #fff; padding: 0.25rem 0.75rem; border-radius: 4px; font-weight: 600; }

/* ====== Misc ====== */
.text-muted { color: #919aa1 !important; }
.card-header { background-color: #fff; border-bottom: 1px solid rgba(0,0,0,0.125); }
.modal-content { border: 1px solid rgba(0,0,0,0.2); }