/* ========== Ad Page Layout ========== */
.ad-page-main {
  background: #f4f6f0;
  min-height: 100vh;
  padding: 28px 20px 56px;
}

.ad-page-content {
  display: flex;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: flex-start;
}

/* ========== Left Main Column ========== */
.ad-main {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ========== Gallery ========== */
.ad-gallery {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.07);
  overflow: hidden;
}

.gallery-main-wrap {
  position: relative;
  background: #1a1a1a;
  display: flex;
  align-items: center;
}

.gallery-main {
  flex: 1;
  position: relative;
  min-height: 320px;
  max-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.gallery-img {
  display: none;
  max-width: 100%;
  max-height: 500px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.gallery-img.active {
  display: block;
}

/* Arrow buttons */
.gallery-arrow {
  flex-shrink: 0;
  background: rgba(0,0,0,0.45);
  color: #fff;
  border: none;
  width: 44px;
  height: 60px;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-arrow:hover {
  background: rgba(85,107,47,0.85);
}

/* Thumbnail strip */
.gallery-thumbs {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #c5d3a0 transparent;
  background: #f4f6f0;
}

.gallery-thumb {
  flex-shrink: 0;
  width: 72px;
  height: 56px;
  border: 2px solid #dde8c8;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  background: #fff;
  transition: border-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-thumb.active {
  border-color: #556B2F;
  box-shadow: 0 0 0 2px rgba(85,107,47,0.25);
}

.gallery-thumb:hover:not(.active) {
  border-color: #8a9e5a;
}

.thumb-video-icon {
  font-size: 1.4rem;
  color: #556B2F;
}

/* ========== Ad Info Card ========== */
.ad-info-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.07);
  padding: 22px 24px;
}

.ad-info-card h1 {
  font-size: 1.45rem;
  font-weight: 700;
  color: #1c2b0e;
  margin: 0 0 14px;
  line-height: 1.3;
}

.ad-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.ad-price {
  font-size: 1.6rem;
  font-weight: 700;
  color: #556B2F;
}

.ad-transaction-badge {
  background: #eef4e4;
  color: #3a5220;
  border: 1px solid #c5d3a0;
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 0.85rem;
  font-weight: 600;
}

.ad-status-badge {
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 0.85rem;
  font-weight: 600;
}

.ad-status-reserved {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffd966;
}

.ad-status-sold {
  background: #f8d7da;
  color: #842029;
  border: 1px solid #f5c2c7;
}

.ad-meta-details {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 0.9rem;
  color: #4a5c30;
}

.meta-detail {
  background: #f4f6f0;
  border: 1px solid #e0e8d0;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.85rem;
  color: #3a4a25;
}

/* ========== Section Cards ========== */
.ad-section-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.07);
  padding: 22px 24px;
}

.ad-section-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #1c2b0e;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid #eef4e4;
}

.ad-section-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid #eef4e4;
}

.ad-section-title-row .ad-section-title {
  margin: 0;
  padding: 0;
  border: none;
}

.ad-description {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #2c3e1a;
  white-space: pre-wrap;
}

/* ========== Specs Grid ========== */
.specs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.specs-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.spec-item {
  background: #f9fbf5;
  border: 1px solid #e8f0d8;
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.spec-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b8040;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.spec-value {
  font-size: 0.95rem;
  font-weight: 500;
  color: #1c2b0e;
}

.no-chrono {
  color: #888;
  font-size: 0.9rem;
  font-style: italic;
}

/* ========== Info Icon ========== */
.info-container {
  display: inline-block;
  position: relative;
}

.info-icon {
  background: #556B2F;
  color: #fff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  font-style: italic;
  cursor: pointer;
  font-weight: 700;
}

.info-overlay {
  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;
  pointer-events: none;
}

.info-container:hover .info-overlay {
  display: flex;
}

.info-box {
  background: #fff;
  border: 2px solid #556B2F;
  padding: 20px 28px;
  border-radius: 10px;
  max-width: 320px;
  text-align: center;
  color: #1c2b0e;
  pointer-events: none;
}

/* ========== Right Sidebar ========== */
.ad-right-sidebar {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #c5d3a0 transparent;
}

/* Override contact_section.php aside styles when in right sidebar */
.ad-right-sidebar .ad-sidebar.left-sidebar {
  width: 100%;
  min-width: unset;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.07);
  padding: 20px;
  box-sizing: border-box;
}

.seller-profile-pic {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto 10px;
  border: 3px solid #eef4e4;
}

.profile-link {
  color: #1c2b0e;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 700;
}

.profile-link:hover {
  color: #556B2F;
  text-decoration: underline;
}

.ad-sidebar.left-sidebar h2 {
  text-align: center;
  font-size: 1rem;
  margin-bottom: 12px;
  color: #1c2b0e;
}

.ad-sidebar.left-sidebar p {
  font-size: 0.88rem;
  margin-bottom: 8px;
  color: #3a4a25;
}

.reveal {
  color: #556B2F;
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.88rem;
}

.reveal:hover {
  color: #3a5220;
}

#map {
  border-radius: 8px;
  overflow: hidden;
  margin-top: 12px;
}

/* ========== Latest Ads Card ========== */
.latest-ads-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.07);
  padding: 18px 20px;
}

.sidebar-section-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1c2b0e;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #eef4e4;
}

.sidebar-ad-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f4e8;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
  border-radius: 6px;
}

.sidebar-ad-item:last-child {
  border-bottom: none;
}

.sidebar-ad-item:hover {
  background: #f4f6f0;
}

.sidebar-ad-item img {
  width: 60px;
  height: 52px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}

.sidebar-ad-info {
  min-width: 0;
}

.sidebar-ad-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: #1c2b0e;
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.sidebar-ad-price {
  font-size: 0.9rem;
  font-weight: 700;
  color: #556B2F;
  margin: 0 0 1px;
}

.sidebar-ad-trans {
  font-size: 0.78rem;
  color: #7a8c5a;
  margin: 0;
}

/* ========== Responsive ========== */
@media (max-width: 900px) {
  .ad-page-content {
    flex-direction: column;
  }

  .ad-right-sidebar {
    flex: none;
    width: 100%;
    position: static;
    max-height: none;
    overflow-y: visible;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .ad-right-sidebar .ad-sidebar.left-sidebar,
  .latest-ads-card {
    flex: 1 1 260px;
  }
}

@media (max-width: 600px) {
  .ad-page-main {
    padding: 16px 12px 40px;
  }

  .gallery-main {
    min-height: 220px;
  }

  .gallery-img {
    max-height: 280px;
  }

  .gallery-thumb {
    width: 56px;
    height: 44px;
  }

  .specs-grid,
  .specs-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .ad-right-sidebar {
    flex-direction: column;
  }
}

/* ── Report modal buttons ── */
#reportModal .modal-content { max-width: 480px; }

#reportModal .modal-actions { display: flex; gap: 10px; margin-top: 4px; }

#reportModal .btn-submit {
  padding: 9px 20px;
  background: #556B2F;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
#reportModal .btn-submit:hover { background: #3f5222; }

#reportModal .btn-dismiss {
  padding: 9px 20px;
  background: none;
  color: #6b7280;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, color 0.15s;
}
#reportModal .btn-dismiss:hover { border-color: #9ca3af; color: #374151; }

/* ── Report Ad ── */
.ad-report-wrap {
  padding: 0 0 12px;
}

.btn-report-ad {
  background: none;
  border: 1px solid #b91c1c;
  border-radius: 4px;
  padding: 8px 14px;
  font-size: 0.85rem;
  color: #b91c1c;
  cursor: pointer;
  width: 100%;
  margin-top: 8px;
  transition: background 0.15s, color 0.15s;
}

.btn-report-ad:hover {
  background: #b91c1c;
  color: #fff;
}