/* Car row flex layout */
.car-row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 16px 8px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  margin-bottom: 18px;
  background: #fafbfc;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.car-row-image {
  flex: 0 0 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  min-height: 80px;
}
.car-row-info {
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.car-row-title {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 2px;
}
@media (max-width: 600px) {
  .car-row {
    flex-direction: column;
    align-items: stretch;
  }
  .car-row-image {
    margin-bottom: 10px;
    min-width: 0;
    min-height: 0;
  }
}
/* Styles for voting app: stars and image modal */

body {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.4;
  padding: 16px;
  max-width: 600px;
  margin: 0 auto;
}

.car-image {
  max-width: 200px;
  display: block;
  margin-top: 8px;
  cursor: pointer;
  border: 1px solid #ddd;
  border-radius: 4px;
  transition: opacity 150ms ease, transform 150ms ease;
}
.car-image:hover {
  opacity: 0.9;
  transform: scale(1.02);
}

.star {
  color: #cfcfcf;
  font-size: 24px;
  transition: color 120ms ease, transform 120ms ease;
  display: inline-block;
  line-height: 1;
}
.star:hover { transform: translateY(-2px); }
.star.filled { color: #28a745; } 

/* When the row is marked as voted, use a stronger, colored style to show the saved vote */
.stars.voted .star { color: #ddd; }
.stars.voted .star.filled { color: #28a745; }

/* Modal overlay for full-size image */
.image-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.75);
  z-index: 9999;
}
.image-modal[aria-hidden="false"] {
  display: flex;
}
.image-modal img {
  max-width: 95%;
  max-height: 95%;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  border-radius: 6px;
}

/* Login button */
.login-container {
  margin: 24px 0;
}
.btn-signin {
  display: inline-block;
  padding: 10px 20px;
  background: #1e8025;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 500;
  font-size: 15px;
  transition: background 150ms ease;
  /* border: 1px solid #374151; */
  cursor: pointer;
}
.btn-signin:hover {
  background: #2cb735;
}
.btn-signin:active {
  background: #2cb735;
}

/* Top 12 list styling */
.top12-list {
  list-style: none;
  padding: 0;
  margin: 16px auto;
  max-width: 400px;
}
.top12-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin-bottom: 0px;
  background: #f5f5f5;
  font-size: 14px;
}
.top12-rank {
  font-weight: bold;
  min-width: 24px;
  text-align: center;
  color: #999;
}
.top12-name {
  flex: 1;
  font-weight: 500;
}
.top12-score {
  color: #666;
}
.kandidati {
    text-align: center;
}

/* Small responsive tweaks */
@media (max-width: 480px) {
  .car-image { max-width: 140px; }
  .star { font-size: 20px; }
}