/* Base and existing styles (kept previously) */
body { font-family: Arial, sans-serif; margin: 0; padding: 0; background:#f8f8f8; }
header { background:#333; color:#fff; padding:10px; }
header nav a { color:#fff; margin-right:10px; text-decoration:none; }
main { padding:20px; max-width:1000px; margin:0 auto; background:#fff; min-height:70vh; box-sizing:border-box; }
form input, form textarea, form select { display:block; margin-bottom:10px; padding:8px; width:100%; max-width:500px; box-sizing:border-box; }
.business { border-bottom:1px solid #ddd; padding:10px 0; }
img.thumb, img.review-thumb, img.my-thumb { display:block; margin-top:10px; }
.admin-badge { color: #fff; background:#e74c3c; padding:2px 6px; border-radius:3px; font-size:12px; }

/* Business list grid */
.business-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.business-card { border: 1px solid #ddd; padding: 12px; background: #fff; border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,0.03); }
.business-card h2 { margin: 0 0 8px 0; font-size: 1.1rem; }
.business-card .meta { color: #666; font-size: 0.9rem; margin-bottom: 8px; display:flex; gap:10px; flex-wrap:wrap; }
.rating-summary { font-weight: bold; color: #333; }

/* stars and average */
.stars { color: #f5b301; margin-left: 6px; font-size: 0.95rem; }
.avg { background:#efefef; padding:2px 6px; border-radius:4px; margin-right:6px; }

/* pagination */
.pagination { margin-top: 18px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.pagination a, .pagination span { padding:6px 8px; border:1px solid #ddd; border-radius:4px; text-decoration:none; color:#333; }
.pagination .current { background:#333; color:#fff; border-color:#333; }
.pagination .disabled { color:#999; border-color:#eee; }

/* search form smaller and inline on larger screens */
.search-form { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; align-items:center; }
.search-form input[type="text"] { flex:1; min-width:200px; }
.search-form select { width:auto; }

/* Responsive tweaks */
@media (max-width: 600px) {
  main { padding: 12px; }
  .business-list { grid-template-columns: 1fr; }
  .search-form { flex-direction: column; align-items: stretch; }
}

/* Item / rating page styles */
.item-detail h1 { margin-top: 0; }
.item-meta { color:#666; margin-bottom:12px; }
.item-stats { margin-bottom:18px; }
.avg-box { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.avg-number { font-size:1.6rem; font-weight:bold; background:#f3f3f3; padding:8px 12px; border-radius:6px; }
.breakdown { margin-top:8px; }
.break-row { display:flex; gap:8px; align-items:center; margin:6px 0; }
.break-row progress { width:160px; height:8px; }

/* reviews */
.rating-list .review { display:flex; gap:12px; padding:12px 0; border-bottom:1px solid #eee; }
.review-left { width:160px; }
.review-thumb { max-width:100%; border-radius:4px; }
.review-right { flex:1; }
.review-head { display:flex; gap:10px; align-items:center; margin-bottom:6px; }
.review-comment { color:#333; }

/* my ratings - updated for left thumbnail / right review layout */
.my-rating {
  display: flex;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
  align-items: flex-start;
}

/* fixed left column for thumbnail */
.my-rating .left {
  width: 200px;
  flex: 0 0 200px;
}

/* thumbnail: force 200x200 and crop with object-fit for consistent display */
.my-thumb {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
  background: #f3f3f3;
}

/* placeholder block if no image */
.my-thumb.placeholder {
  width: 200px;
  height: 200px;
  background: #f3f3f3;
  border: 1px dashed #ddd;
  border-radius: 4px;
}

/* right side contains review content */
.my-rating .right {
  flex: 1 1 auto;
  min-width: 0; /* allow content to shrink properly */
}

/* head (title links and meta) */
.my-rating .head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.my-rating .title-links a {
  color: #3a3a9a;
  font-weight: bold;
  text-decoration: underline;
}

.my-rating .meta {
  color: #666;
  font-size: 0.95rem;
  white-space: nowrap;
}

/* rating stars/date grouping on right */
.my-rating .meta .rating { margin-right: 10px; color: #f5b301; }

/* comment area - allow long text to wrap nicely */
.my-rating .comment {
  color: #333;
  line-height: 1.4;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Responsive: stack on narrow screens */
@media (max-width: 700px) {
  .my-rating {
    flex-direction: column;
  }
  .my-rating .left {
    width: 100%;
    flex: 0 0 auto;
  }
  .my-thumb {
    width: 100%;
    height: auto;
    max-height: 300px;
    object-fit: cover;
  }
  .my-rating .head { flex-direction: column; align-items: flex-start; gap: 6px; }
}