/* Global Reset */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:"Segoe UI", Arial, sans-serif; background:var(--background-color); color:#333; }

/* Header */
header {
  background:var(--header-color);
  color:white;
  padding:15px 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  box-shadow:0 2px 6px rgba(0,0,0,0.15);
}
header img { height:40px; margin-right:10px; }
header h1 { font-size:22px; }

/* Navigation Bar */
.navbar {
  background:#444;
  padding:12px 0;
  width:100%;
}
.nav-links {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  justify-content:center;   /* center horizontally */
  align-items:center;
  gap:30px;                 /* space between links */
}
.nav-links li { display:inline-block; }
.nav-links li a {
  color:#fff;
  text-decoration:none;
  font-weight:bold;
  font-size:15px;
  padding:6px 12px;
  transition:color 0.2s;
}
.nav-links li a:hover { color:#ffd700; }
.nav-links li a.active { color:#ffd700; } /* highlight active page */

/* Search bar (index.php only) */
.search-bar {
  background:white;
  padding:12px;
  box-shadow:0 2px 6px rgba(0,0,0,0.1);
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
}
.search-bar input,
.search-bar select {
  padding:8px;
  border:1px solid #ccc;
  border-radius:6px;
  width:180px;
}
.search-bar button {
  padding:8px 14px;
  background:var(--button-color);
  border:none;
  border-radius:6px;
  color:white;
  cursor:pointer;
  font-weight:bold;
}

/* Page Content (FAQ, About, etc.) */
.page-content {
  max-width:800px;
  margin:20px auto;
  padding:20px;
  background:#fff;
  border-radius:10px;
  box-shadow:0 2px 6px rgba(0,0,0,0.12);
  font-size:15px;
  line-height:1.6;
  text-align:center;
}
.page-content h2 {
  margin-bottom:15px;
  font-size:20px;
}

/* Product grid (index.php) */
.container {
  max-width:1200px;
  margin:20px auto;
  padding:0 15px;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:20px;
}
.product {
  background:white;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 2px 6px rgba(0,0,0,0.12);
  transition:0.3s;
  display:flex;
  flex-direction:column;
}
.product:hover {
  transform:translateY(-5px);
  box-shadow:0 6px 15px rgba(0,0,0,0.18);
}
.product img { width:100%; height:240px; object-fit:cover; }
.product-content {
  padding:12px;
  flex:1;
  display:flex;
  flex-direction:column;
}
.title { font-size:16px; font-weight:bold; margin-bottom:5px; }
.price { font-size:15px; font-weight:bold; color:#e74c3c; margin-bottom:5px; }
.category { font-size:13px; color:#777; margin-bottom:8px; }
.desc { font-size:13px; color:#555; flex-grow:1; margin-bottom:10px; }
.btn {
  display:inline-block;
  padding:6px 12px;
  border-radius:6px;
  background:var(--button-color);
  color:white;
  text-decoration:none;
  font-weight:bold;
  font-size:13px;
  align-self:flex-start;
}

/* Pagination */
.pagination { text-align:center; margin:20px 0; }
.pagination a {
  display:inline-block;
  padding:6px 12px;
  margin:2px;
  border-radius:6px;
  background:#eee;
  color:#333;
  text-decoration:none;
  font-weight:bold;
}
.pagination a.active {
  background:var(--button-color);
  color:#fff;
}

/* Floating Button */
.floating-btn {
  position:fixed;
  bottom:20px;
  right:20px;
  background:var(--button-color);
  color:#fff;
  border:none;
  border-radius:50%;
  width:55px;
  height:55px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  cursor:pointer;
  box-shadow:0 4px 8px rgba(0,0,0,0.2);
  z-index:999;
  transition:0.3s;
}
.floating-btn:hover { opacity:0.9; }
@media(min-width:768px){ .floating-btn { display:none; } }

/* Footer */
footer {
  text-align:center;
  padding:15px;
  background:#f1f1f1;
  font-size:14px;
  color:#555;
  margin-top:20px;
}

/* Responsive */
@media(max-width:600px){
  .search-bar input,
  .search-bar select { width:100%; }
  header h1 { font-size:18px; }
  .product img { height:150px; }
}
@media(min-width:601px) and (max-width:1024px) {
  .product img { width:100%; height:300px; object-fit:cover; }
}
@media(max-width:600px) {
  .product img { width:100%; height:300px; object-fit:cover; }
}

/* Page content */
.page-content {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  font-size: 15px;
  line-height: 1.6;
  text-align: justify;
}

/* Responsive Fixes */
@media(max-width:600px){
  header h1 { font-size:18px; }
  header img { height:30px; }
  .page-content { padding: 15px; font-size:14px; }
  nav ul.nav-links { flex-direction: column; gap:10px; } /* ✅ nav becomes stacked on mobile */
}

@media(min-width:601px) and (max-width:1024px){
  .page-content { max-width: 90%; font-size:15px; }
}