/* Component: utilities - shared tokens and small utilities */

:root {
  --accent: #FF6B35;
  --accent-2: #4ECDC4;
  --muted-white: rgb(245 245 245 / 70%);
}

/* Section titles */
.section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  color: #f5f5f5;
  font-weight: 600;
  font-size: 0.9rem;
  flex-wrap: wrap;
  padding: 0 0.6rem;
}

.section-title .dot {
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgb(255 107 53 / 15%);
  flex-shrink: 0;
}

.results-count-inline {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: rgb(245 245 245 / 50%);
  font-size: clamp(0.75rem, 1.5vw, 0.85rem);
  font-weight: 500;
}

/* Pills */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.65rem;
  border-radius: 10px;
  background: rgb(255 255 255 / 8%);
  border: 1px solid rgb(255 255 255 / 8%);
  font-size: 0.8rem;
  color: #f5f5f5;
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .pill {
    padding: 0.25rem 0.5rem;
    font-size: 0.7rem;
  }
} 

/* Text CTAs */
.text-cta {
  text-decoration: none;
  color: rgb(255 255 255 / 92%);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.15rem 0.4rem;
  border-radius: 6px;
} 

.text-cta-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), #FF8B5A);
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgb(255 107 53 / 12%);
} 
.text-cta-primary:hover { background: linear-gradient(135deg, #FF7A4A, #FF9B6A); }

.text-cta-secondary {
  color: rgb(255 255 255 / 75%);
} 

/* Price line baseline */
.price-line {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.35rem;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 0.4rem 0.6rem; /* slightly larger for clarity */
  background: linear-gradient(135deg, rgb(255 255 255 / 4%), rgb(255 255 255 / 9%));
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 10px;
}

.price-line > .price,
.price-line > .discount,
.price-line > .price-old {
  flex: 0 0 auto;
} 

.price-line > .price-cta {
  flex: 0 0 auto;
  margin-left: 0.5rem;
}

/* Move votes to the end of the price line on desktop/tablet */
.price-line > .vote-inline {
  margin-left: auto;
  flex: 0 0 auto;
  align-items: center;
}

.price-line > .price {
  font-size: 1rem;
} 
/* Nav actions (authoritative) */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.25rem;
}

@media (max-width: 1024px) {
  .nav-actions { gap: 0.35rem; }
}

@media (max-width: 768px) {
  .nav-actions { gap: 0.25rem; }
}

@media (max-width: 480px) {
  .nav-actions { gap: 0.25rem; }
}