/* Trimmed CSS for portalfhp.html */
:root{
  --gold: #d7ad53;
  --black: #000;
  --white: #fff;
}

html{ scroll-behavior: smooth; margin:0; padding:0; overflow-x:hidden; }
*{ box-sizing: border-box; }
body{ margin:0; font-family: 'Montserrat', sans-serif; color:var(--black); background:var(--white); line-height:1.6; min-height:100vh; display:flex; flex-direction:column; }

/* Header/navigation moved to header.css */

/* Portal login container */
.portal-container{ background-color: var(--gold); border:1px solid black; max-width:480px; margin:3rem auto; padding:3rem; border-radius:8px; text-align:center; }
.portal-container h1{ margin-top:0; }
.portal-container input{ width:90%; padding:0.8rem; margin:0.5rem 0; border-radius:4px; border:1px solid #000; font-size:1rem; }
.portal-container button{ background-color:black; color:#fff; font-weight:600; border:none; padding:1rem; cursor:pointer; border-radius:4px; width:100%; margin-top:0.5rem; transition:background 0.3s ease; }
.portal-container button:hover{ background-color:#b9952c; }
.portal-content h1{text-align:center; margin-top:2rem; padding:1rem; color: var(--gold); }

/* Hidden portal content (shown after login) */
.portal-content{ display:none; text-align:center; margin-top:0; padding:0; }
.portal-content.show{ display:block; }

/* Portal Top Bar with Logout */
.portal-top-bar{ display:flex; justify-content:flex-end; padding:1rem 2rem; background:linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%); border-bottom:2px solid var(--gold); }

.logout-btn{ background:linear-gradient(135deg, #c41e3a 0%, #8b0000 100%); color:white; font-weight:700; border:none; padding:0.8rem 1.8rem; cursor:pointer; border-radius:6px; font-size:1rem; transition:transform 0.2s ease, box-shadow 0.2s ease; box-shadow:0 4px 12px rgba(196, 30, 58, 0.3); }
.logout-btn:hover{ transform:translateY(-3px); box-shadow:0 8px 20px rgba(196, 30, 58, 0.5); }

.adminBtn{ background:linear-gradient(135deg, blue 0%, black 100%); color:white; font-weight:700; border:none; padding:0.8rem 1.8rem; cursor:pointer; border-radius:6px; font-size:1rem; transition:transform 0.2s ease, box-shadow 0.2s ease; box-shadow:0 4px 12px rgba(196, 30, 58, 0.3); }
.adminBtn:hover{ transform:translateY(-3px); box-shadow:0 8px 20px rgba(18, 3, 236, 0.5); }

/* ===== FILTER CONTAINER ===== */
.filter-container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px; /* space between filters */
  padding: 15px 20px;
  background-color: #f9f9f9;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  margin-bottom: 30px;

  justify-content: center; /* center horizontally */
  align-items: flex-end;
}

/* Individual filter styling */
.filter-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.filter-group label {
  margin-bottom: 5px;
  font-weight: 600;
  font-size: 0.9rem;
}

.filter-group select {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 0.9rem;
  min-width: 120px; /* make them consistent */
  cursor: pointer;
  transition: all 0.2s;
}

.filter-group select:hover {
  border-color: var(--gold);
}

/* Reset button styling */
#filterResetBtn {
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  background-color: var(--gold);
  color: white;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.2s;
}

#filterResetBtn:hover {
  background-color: var(--black);
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 768px) {
  .filter-container {
    flex-direction: column; /* stack vertically */
    align-items: center;    /* center items */
    gap: 10px;
    padding: 10px 15px;
  }

  .filter-group {
    width: 80%;   /* make dropdowns narrower */
    max-width: 250px;
  }

  .filter-group select {
    width: 100%;  /* take full group width */
  }

  #filterResetBtn {
    width: 80%;
    max-width: 250px;
    margin-top: 10px;
  }
}



/* Product list */
.product-list{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; padding:1rem 0; }
.product-card{ background:linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%); border-radius:8px; box-shadow:0 4px 15px rgba(0,0,0,0.1); width:260px; text-align:center; padding:1rem; min-width:220px; max-width:90vw; flex-shrink:0; margin:0 1rem; cursor:pointer; transition:transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease; border:2px solid transparent; position:relative; overflow:hidden; }
.product-card::before { content:''; position:absolute; top:0; left:0; right:0; height:5px; background:linear-gradient(90deg, var(--gold), #b9952c); }
.product-card img{ width:100%; height:220px; object-fit:cover; border-radius:4px; display:block; border:3px solid var(--gold); margin-bottom:0.5rem; }
.product-card h3{ margin:0.5rem 0 0.5rem; font-size:1.15rem; color:var(--black); font-weight:700; }
.product-card p{ font-size:0.95rem; margin:0.3rem 0; color:#333; }
.product-card:hover{ transform:translateY(-8px); box-shadow:0 15px 40px rgba(209, 173, 83, 0.25); border:2px solid var(--gold); }

.status {
  display: inline-block;
  padding: 4px 8px;
  margin-top: 4px;
  border-radius: 4px;
  font-weight: 600;
  color: #fff;
  font-size: 0.9rem;
}
.available {
  background-color: #2ecc71; /* green */
}
.arriving {
  background-color: #f1c40f; /* yellow */
  color: #000; /* better contrast on yellow */
}

.frame-color, .glass-color {
  display: inline-block;
  font-size: 0.9rem;
  color: #666;
  margin: 0.3rem 0;
  background: rgba(209, 173, 83, 0.1);
  padding: 0.4rem 0.8rem;
  border-radius: 20px;
  border-left: 3px solid var(--gold);
}

/* Footer */
footer{ display:flex; justify-content:space-between; align-items:center; background:var(--black); color:var(--white); padding:2rem; flex-wrap:wrap; gap:2rem; text-align:center; }
.footer-left, .footer-center, .footer-nav{ display:flex; flex-direction:column; gap:0.75rem; }
.footer-left p{ margin:0; font-size:0.9rem; text-align:left; }
.footer-center{ align-items: center; }
.footer-center .logo{ max-width:150px; height:auto; margin-bottom:1rem; }
.social-links { display: flex; gap: 1rem; }
.social-links a { color: var(--white); transition: color 0.3s ease; display: inline-flex; }
.social-links a:hover, .social-links a:focus { color: var(--gold); outline: none; }
.social-links svg { width: 24px; height: 24px; fill: none; stroke: currentColor;}

.footer-nav ul{ list-style:none; padding:0; margin:0; display:flex; gap:1rem; flex-wrap:wrap; justify-content:flex-end; }
.footer-nav ul li a{ color:var(--white); text-decoration:none; font-weight:600; font-size:1rem; transition: color 0.3s ease; }
.footer-nav ul li a:hover, .footer-nav ul li a:focus{ color:var(--gold); outline:none; }

footer p{ margin:0.5rem 0; }

/* Small screens */
@media (max-width:768px){
  /* header/nav responsive rules moved to header.css */
}

/* Hide footer nav on small screens and center footer content to match fhp.html */
@media (max-width:768px){
  .footer-nav{ display:none; }
  footer{ flex-direction:column; align-items:center; text-align:center; gap:1rem; }
  .footer-left p{ text-align:center; }
  .footer-center{ align-items:center; }
}

/* Small animation for cards */
@keyframes fadeInUp{ from{ opacity:0; transform:translateY(30px);} to{ opacity:1; transform:translateY(0);} }
.product-card{ animation: fadeInUp 0.5s ease-out; animation-fill-mode:both; }

/* End trimmed portal CSS */

/* Contact modal & generic popup (moved from inline page styles) */
.contact-popup { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); justify-content: center; align-items: center; z-index: 2000; }
.contact-popup.show { display: flex; }
.contact-popup .contact-panel { background-color: var(--gold); border: 1px solid black; width: 90vw; max-width: 700px; margin: 0 1rem; text-align: center; padding: 2rem; border-radius: 12px; position: relative; }
.contact-popup .contact-panel form { display: flex; flex-direction: column; }
.contact-popup .contact-panel input, .contact-popup .contact-panel textarea { margin-bottom: 1rem; padding: 0.8rem; border: 1px solid black; border-radius: 4px; font-family: 'Montserrat', sans-serif; font-size: 1rem; }
.contact-popup .contact-panel select { margin-bottom: 1rem; padding: 0.8rem; border: 1px solid black; border-radius: 4px; font-family: 'Montserrat', sans-serif; font-size: 1rem; background: var(--white); }
.contact-close { position: absolute; top: 8px; right: 10px; background: transparent; border: none; font-size: 1.8rem; cursor: pointer; }
.contact-row { display: flex; gap: 1rem; align-items: center; justify-content: center; flex-wrap: wrap; margin-bottom: 1rem; }
.popup { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); justify-content: center; align-items: center; z-index: 1000; opacity: 0; transition: opacity 0.3s ease; }
.popup.show { display: flex; opacity: 1; }
.popup-content { background: #fff; padding: 2rem; border-radius: 8px; text-align: center; max-width: 400px; position: relative; z-index: 1001; }
.popup-content button { margin-top: 1rem; }
.contact-popup .contact-panel button[type="submit"] { background-color: #000; color: #fff; font-weight: 600; border: none; padding: 1rem; cursor: pointer; border-radius: 4px; transition: background 0.3s ease; }
.contact-popup .contact-panel button[type="submit"]:hover { background-color: #b9952c; color: #000; }

/* Small utility class moved from inline */
.muted { margin-top:1rem; font-size:0.9rem; color:#555; }

.table-container {
  width: 100%;
  overflow-x: auto;
}

#adminProductsTable {
  width: 100%;
  min-width: 1200px;
  border-collapse: collapse;
}

#adminProductsTable th,
#adminProductsTable td {
  padding: 8px;
  border: 1px solid #ddd;
  text-align: left;
}