/* Search Box Section */
/* Container for the search input */
.search-box { 
  flex: 1; 
  min-width: 240px; 
}

/* Search Input Field */
.search-box input {
  width: 100%;
  padding: .8rem 1rem .8rem 2.5rem; 
  border: 1.5px solid var(--border);

  /* Gradient Background */
  background: linear-gradient(180deg, rgba(0,0,0,0.02), transparent);
  
  border-radius: var(--radius-sm);
  font-size: 1rem;
  color: var(--text);
  
  /* Transitions smoothly when hovering/focusing */
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
  outline: none;
  
  /* Embeds the search icon as a background image */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: .7rem 50%;
}

/* Search Box when Clicked */
.search-box input:focus { 
  border-color: var(--primary); 
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 28%, transparent); 
}

/* Filter Button Section */
/* Container for the filter buttons */
.filter-group { 
  display: flex; 
  gap: .5rem; 
  flex-wrap: wrap; 
}

/* Individual Filter Buttons */
.filter-button {
  padding: .55rem 1rem;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 999px;
  cursor: pointer;
  font-size: .92rem;
  transition: border-color .2s ease, color .2s ease, background .2s ease, transform .12s ease;
}

/* Filter Button when Hovered */
.filter-button:hover { 
  border-color: var(--accent); 
  color: var(--accent); 
  transform: translateY(-1px); 
}

/* Filter Button when Clicked */
.filter-button.active { 
  background: var(--primary); 
  color: #fff; 
  border-color: var(--primary); 
}

/* Post Listing Button Section */

/* Post Listing Button */
.post-button {
  background: var(--primary);
  color: #fff;
  border: 1.5px solid var(--primary-600);
  padding: .75rem 1.15rem;
  border-radius: var(--radius-sm);
  font-size: .98rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform .12s ease, filter .2s ease;
}

/* Post Button when Hovered */
.post-button:hover { 
  filter: brightness(1.03); 
  transform: translateY(-1px); 
}

/* Displays an outline when navigated by keyboard */
.post-button:focus-visible { 
  outline: 2px solid var(--primary); 
  outline-offset: 2px; 
}


/* Main Page Section */

/* Page Layout Container */
.layout {
  max-width: 1400px; 
  margin: 0 auto; 
  padding: 1.5rem var(--page-pad-x) 2rem;
  
  /* Displays the sidebar on the left and the main listings on the right */
  display: grid;
  grid-template-columns: 280px 1fr; 
  gap: 1.5rem; 
}


/* Sidebar Section */
.sidebar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: 0 8px 20px var(--shadow);
  
  /* Sticks the sidebar to the top during scrolling */
  position: sticky;
  top: 1rem;
  align-self: start;
  height: fit-content; 
}

/* Individual Sections in the Sidebar */
.sidebar-section { 
  margin-bottom: 1rem; 
}

/* Removes margin from last section to avoid extra space */
.sidebar-section:last-child { 
  margin-bottom: 0; 
}

/* Section Headings in Sidebar */
.sidebar h3 { 
  margin: 0 0 .6rem; 
  font-size: .95rem; 
  color: var(--muted); 
  font-weight: 700; 
}

/* Light mode adjustments for sidebar text */
[data-theme="light"] .sidebar h3 { color: #000; }
[data-theme="light"] .sidebar .filter-button { color: #000; }
[data-theme="light"] .sidebar .search-box input { color: #000; }
[data-theme="light"] #sortSelect { color: #000; }

/* Search Box Adjustments for Sidebar */
.sidebar .search-box { 
  min-width: auto; 
}

/* Vertically stacks filter buttons in the sidebar */
.sidebar .filter-group { 
  display: flex; 
  flex-direction: column; 
  gap: .4rem; 
}

/* Filter Buttons in Full-Width for Sidebar */
.sidebar .filter-button { 
  width: 100%; 
  text-align: left; 
}

/* Post Buttons in Full-Width for Sidebar */
.sidebar .post-button { 
  width: 100%; 
}

/* Main Content Section */
.main { 
  min-height: 60vh;
}

/* Card Grid Section */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.4rem;
  margin-top: 0;
}


/* Listing Card Section */

/* Individual Listing Card */
.listing-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden; 
  box-shadow: 0 10px 24px var(--shadow);
  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
  cursor: pointer;
}

/* Card when Hovered */
.listing-card:hover { 
  transform: translateY(-3px); 
  box-shadow: 0 16px 36px var(--shadow); 
  border-color: color-mix(in oklab, var(--primary) 16%, var(--border)); 
}

/* Image in Card */
.card-image { 
  width: 100%; 
  height: 190px; 
  object-fit: cover; 
  display: block; 
  background: #e5e7eb; 
  transition: transform .3s ease; 
}

/* Card Image when Hovered */
.listing-card:hover .card-image { 
  transform: scale(1.03); 
}

/* Card Content Section */
.card-content { 
  padding: 1rem 1rem 1.1rem; 
}

/* Title in Card */
.card-title { 
  font-weight: 700; 
  font-size: 1.4rem; 
  line-height: 1.25; 
  margin-bottom: .35rem; 
}

/* Price in Card */
.card-price { 
  color: var(--primary); 
  font-weight: 750; 
  margin-bottom: .55rem; 
}

/* Price in Dark Mode */
[data-theme="dark"] .card-price { 
  color: var(--accent); 
}

/* Seller Name and Item Status in Card Section */
.card-meta { 
  display: flex; 
  justify-content: space-between;
  align-items: center; 
  gap: .8rem; 
}

/* Seller Name */
.card-seller { 
  color: var(--muted); 
  font-size: .9rem; 
}

/* Item Status */
.status-badge { 
  font-size: .78rem; 
  padding: .28rem .55rem; 
  border-radius: 999px; 
  border: 1px solid var(--border); 
  background: linear-gradient(180deg, rgba(0,0,0,0.02), transparent); 
}

.status-available { 
  color: var(--success); 
  border-color: color-mix(in oklab, var(--success) 40%, var(--border)); 
}

.status-sold { 
  color: var(--neutral-900); 
  border-color: color-mix(in oklab, var(--neutral-900) 20%, var(--border)); 
}

.status-pending { 
  color: var(--accent); 
  border-color: color-mix(in oklab, var(--accent) 40%, var(--border)); 
}

/* Popup Section */

/* Modal Overlay */
.modal { 
  position: fixed; 
  inset: 0; 
  display: none;
  align-items: center; 
  justify-content: center; 
  background: color-mix(in srgb, #000 50%, transparent); 
  backdrop-filter: blur(6px); 
  padding: 1rem; 
  z-index: 50; 
  overflow: auto; 
}

/* Modal when Active */
.modal.active { 
  display: flex; 
}

/* Modal Content Box */
.modal-content { 
  background: var(--surface); 
  color: var(--text); 
  width: 100%; 
  max-width: 1120px; 
  min-height: 560px; 
  height: 90vh; 
  max-height: 90vh; 
  overflow: hidden; 
  border-radius: var(--radius); 
  box-shadow: 0 20px 50px var(--shadow); 
  border: 1px solid var(--border); 
  
  /* Displays image on left, details on right */
  display: grid; 
  grid-template-columns: 1.15fr 1fr; 
  align-items: stretch; 
  gap: 0; 
  position: relative; 
}

/* Single Column Post Modal */
#postModal .modal-content { 
  grid-template-columns: 1fr; 
  max-width: 640px; 
  /* Darken the popup background so form cards pop */
  background: color-mix(in oklab, var(--surface) 97%, #000);
}

#postModal .modal-body { 
  padding: 1.25rem 1.25rem 1.5rem; 
}

#postModal h2 { 
  margin: 0.25rem 0 0.75rem; 
}

/* Post Form layout improvements */
#postForm {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

#postModal .form-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.85rem;
  box-shadow: 0 6px 14px var(--shadow);
}

#postModal .form-grid.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

@media (max-width: 560px) {
  #postModal .form-grid.two {
    grid-template-columns: 1fr;
  }
}

#postModal .form-field label {
  display: block;
  margin: .4rem 0 .35rem;
  font-weight: 650;
}

#postModal .form-hint {
  margin-top: 0.35rem;
  font-size: 0.85rem;
  color: var(--muted);
}

#postModal #images {
  padding: .6rem .8rem;
}

#postModal #imagePreview { 
  margin-top: 0.6rem; 
}

#postModal .form-actions {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid var(--border);
  margin-top: 0.75rem;
  padding-top: 0.75rem;
}

/* Dark mode readability improvements (Post Modal) */
[data-theme="dark"] #postModal .modal-content {
  /* Slightly lighter than page surface to separate form from backdrop */
  background: color-mix(in oklab, var(--surface) 99%, #ffffff);
}

[data-theme="dark"] #postModal .form-section {
  /* Lighten cards a bit for contrast against container */
  background: color-mix(in oklab, var(--surface) 90%, #a0a0a0);
  border-color: color-mix(in oklab, var(--border) 70%, #ffffff);
}

[data-theme="dark"] #postModal .form-field label {
  color: #f3f4f6; /* ensure strong label contrast */
}

[data-theme="dark"] #postModal .form-hint {
  color: color-mix(in oklab, #ffffff 65%, var(--muted));
}

[data-theme="dark"] #postModal input,
[data-theme="dark"] #postModal select,
[data-theme="dark"] #postModal textarea {
  background: color-mix(in oklab, var(--surface) 60%, #ffffff);
  border-color: color-mix(in oklab, var(--border) 45%, #ffffff);
  color: #f9fafb;
}

[data-theme="dark"] #postModal input::placeholder,
[data-theme="dark"] #postModal textarea::placeholder {
  color: color-mix(in oklab, #ffffff 55%, var(--muted));
}

[data-theme="dark"] #postModal #imagePreview img {
  border-color: rgba(255,255,255,0.22);
}

#postModal .contact-button { 
  background: var(--primary); 
  color: #fff; 
}

#postModal .contact-button:hover { 
  background: var(--primary-600); 
}

/* Form Input for Post Modal Section */
#postModal input:focus, 
#postModal select:focus, 
#postModal textarea:focus { 
  border-color: var(--primary); 
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 24%, transparent); 
}

#postModal #imagePreview .remove-image:hover { 
  background: var(--primary); 
}

/* Close Button Section */
.close-button { 
  position: absolute; 
  right: 1rem; 
  top: 1rem; 
  background: rgba(0,0,0,.06); 
  color: var(--text); 
  border: 1px solid var(--border); 
  width: 36px; 
  height: 36px; 
  border-radius: 10px; 
  cursor: pointer; 
  display: grid; 
  place-items: center; 
  z-index: 30; 
}

.close-button:hover { 
  background: rgba(0,0,0,.1); 
}

/* Large Product Image */
.modal-image { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  display: block; 
}

/* Text Content */
.modal-body { 
  padding: 1.2rem 1.2rem 1.5rem; 
  position: relative; 
  overflow: auto; 
  max-height: 100%; 
}

/* Title */
.modal-title { 
  font-size: 2.25rem; 
  line-height: 1.2; 
  margin-bottom: .6rem; 
}

/* Price */
.modal-price { 
  font-size: 1.25rem; 
  color: var(--primary); 
  font-weight: 750; 
  margin-bottom: 1.25rem; 
}

/* Price in Dark Mode */
[data-theme="dark"] .modal-price { 
  color: var(--accent); 
}

/* Seller Info and Description Section */
.seller-info, 
.modal-section { 
  margin-top: 1.5rem; 
}

/* Section Headings */
.seller-info h3, 
.modal-section h3 { 
  font-size: 1rem; 
  margin: 0 0 .45rem; 
  color: var(--muted); 
}

/* Contact Button */
.contact-button { 
  background: var(--primary); 
  color: #fff; 
  border: none; 
  padding: .8rem 1.1rem; 
  border-radius: var(--radius-sm); 
  cursor: pointer; 
  font-weight: 650; 
  transition: transform .12s ease, filter .2s ease; 
}

.contact-button:hover { 
  background: var(--primary-600); 
  transform: translateY(-1px); 
}

/* Container for Edit/Delete Buttons */
.seller-actions { 
  display: flex; 
  gap: 0.5rem; 
}

/* Edit/Delete buttons */
.seller-action-button { 
  flex: 1; 
  background: transparent; 
  color: #000; 
  border: 1px solid #000; 
  padding: 0.75rem 1rem; 
  border-radius: 8px; 
  cursor: pointer; 
  font-weight: 600; 
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .12s ease; 
}

.seller-action-button:hover { 
  transform: translateY(-1px); 
}

/* Edit Button when Hovered */
.seller-action-button.edit:hover { 
  background: var(--accent); 
  color: #fff; 
  border-color: var(--accent-600); 
}

/* Delete button when Hovered */
.seller-action-button.delete:hover { 
  background: #e74c3c; 
  color: #fff; 
  border-color: #c0392b; 
}

/* Dark mode Adjustments for Dark Mode */
[data-theme="dark"] .seller-action-button { 
  background: rgba(255,255,255,0.03); 
  color: #e5e7eb; 
  border-color: rgba(229,231,235,0.5); 
}

[data-theme="dark"] .seller-action-button:hover { 
  border-color: rgba(229,231,235,0.7); 
}

[data-theme="dark"] .seller-action-button.edit:hover { 
  background: var(--accent); 
  color: #0b1220; 
  border-color: var(--accent-600); 
}

[data-theme="dark"] .seller-action-button.delete:hover { 
  background: #e74c3c; 
  color: #fff; 
  border-color: #c0392b; 
}

/* Form Section */

/* Form Labels */
label { 
  display: block; 
  margin: .6rem 0 .35rem; 
  font-weight: 600; 
}

/* Form Inputs */
input, 
select, 
textarea { 
  width: 100%; 
  padding: .7rem .9rem; 
  border-radius: var(--radius-sm); 
  border: 1.5px solid var(--border); 
  background: var(--surface); 
  color: var(--text); 
  outline: none; 
  transition: border-color .2s ease, box-shadow .2s ease; 
}

/* Form Input when Focused */
input:focus, 
select:focus, 
textarea:focus { 
  border-color: var(--primary); 
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 24%, transparent); 
}


/* Image Upload/Preview Section */

/* Container for Image Previews */
#imagePreview { 
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); 
  gap: 0.5rem; 
  margin-top: 0.75rem; 
}

/* Preview Thumbnail Images */
#imagePreview img { 
  width: 100%; 
  height: 100px; 
  object-fit: cover; 
  border-radius: var(--radius-sm); 
  border: 2px solid var(--border); 
}

/* Individual Preview Item */
#imagePreview .preview-item { 
  position: relative; 
}

/* Remove Button for each Preview Image */
#imagePreview .remove-image { 
  position: absolute; 
  top: 4px; 
  right: 4px; 
  background: rgba(0,0,0,0.7); 
  color: white; 
  border: none; 
  border-radius: 50%; 
  width: 24px; 
  height: 24px; 
  cursor: pointer; 
  font-size: 14px; 
  line-height: 1; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  transition: background 0.2s ease; 
}

#imagePreview .remove-image:hover { 
  background: var(--accent); 
}

/* Image Gallery Section */

/* Container for Gallery */
.image-gallery { 
  position: relative; 
  width: 100%; 
  height: 100%; 
  min-height: 0; 
  background: #000;
  border-radius: var(--radius) var(--radius) 0 0; 
  overflow: hidden; 
  display: grid; 
  place-items: center; 
}

/* Gallery Images */
.image-gallery img { 
  max-width: 100%; 
  max-height: 100%; 
  width: auto; 
  height: auto; 
  object-fit: contain; /* Keeps full image visible */
  display: none; /* Hidden by default */
  transition: opacity 0.3s ease; 
  margin: 0 auto; 
}

/* Currently Displayed Image */
.image-gallery img.active { 
  display: block; 
}

/* Previous/Next Navigation Buttons */
.gallery-navigation { 
  position: absolute; 
  top: 50%; 
  transform: translateY(-50%); 
  background: rgba(0,0,0,0.5); 
  color: white; 
  border: none; 
  width: 40px; 
  height: 40px; 
  border-radius: 50%; 
  cursor: pointer; 
  font-size: 20px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  backdrop-filter: blur(4px); 
  transition: background 0.2s ease, transform 0.15s ease; 
  z-index: 10; 
}

.gallery-navigation:hover { 
  background: rgba(0,0,0,0.7); 
  transform: translateY(-50%) scale(1.1); 
}

/* Previous/Next Button */
.gallery-navigation.previous { 
  left: 10px; 
}

.gallery-navigation.next { 
  right: 10px; 
}

/* Container for Navigation Dots */
.gallery-dots { 
  position: absolute; 
  bottom: 15px; 
  left: 50%; 
  transform: translateX(-50%); 
  display: flex; 
  gap: 8px; 
  z-index: 10; 
}

/* Individual Navigation Dots */
.gallery-dot { 
  width: 8px; 
  height: 8px; 
  border-radius: 50%; 
  background: rgba(255,255,255,0.5); 
  cursor: pointer; 
  border: none; 
  padding: 0; 
  transition: all 0.3s ease; 
}

.gallery-dot:hover { 
  background: rgba(255,255,255,0.8); 
  transform: scale(1.2); 
}

/* Navigation Dot when Activated */
.gallery-dot.active { 
  background: white; 
  width: 24px; 
  border-radius: 4px; 
}

/* Responsive Design Section */

/* Tablets/Smaller Laptops */
@media (max-width: 1024px) {
  :root { 
    --page-pad-x: 1rem; 
  }
  
  /* Single Column Modal */
  .modal-content { 
    grid-template-columns: 1fr; 
    min-height: auto; 
  }
  
  .modal-image { 
    max-height: 45vh; 
  }
  
  .image-gallery { 
    height: 400px; 
    min-height: 400px; 
  }
  
  /* Stacks sidebar on top */
  .layout { 
    grid-template-columns: 1fr; 
    padding: 1rem var(--page-pad-x); 
  }
  
  /* Removes sticky aspect of sidebar */
  .sidebar { 
    position: static; 
  }
}

/* Mobile phones */
@media (max-width: 768px) {
  .layout { 
    padding: 1rem var(--page-pad-x); 
  }
  
  /* Horizontal Layout for Filter Buttons */
  .sidebar .filter-group { 
    flex-direction: row; 
    flex-wrap: wrap; 
  }
  
  .sidebar .filter-button { 
    width: auto; 
  }
  
  /* Scales card size for smaller device */
  .card-grid { 
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); 
    gap: 1rem; 
  }
  
  .image-gallery { 
    height: 320px; 
    min-height: 320px; 
  }
  
  /* Smaller image previews */
  #imagePreview { 
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); 
  }
}

/* Even Smaller Mobile Devices */
@media (max-width: 480px) {
  .header h1 { 
    font-size: 1.5rem; 
  }
  
  .image-gallery { 
    height: 250px; 
    min-height: 250px; 
  }
  
  /* Smaller navigation buttons */
  .gallery-navigation { 
    width: 32px; 
    height: 32px; 
    font-size: 16px; 
  }
  
  .modal-title { 
    font-size: 1.8rem; 
  }
  
  .modal-price { 
    font-size: 1.1rem; 
  }
}

/* Active Filter Section */
.sidebar .filter-button.active,
.filter-group .filter-button.active {
  color: #000 !important;
  background: #F7B478; 
  border-color: #E2A467; 
}