/* Nearby Garage Sale — Global Styles */

/* Hide scrollbar but allow scrolling */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Base resets */
html { min-height: 100%; -webkit-tap-highlight-color: transparent; }
body { overscroll-behavior-y: contain; }

/* Material symbols baseline */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

/* Line clamp utility */
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Smooth focus rings */
:focus { outline: none; }
:focus-visible { outline: 2px solid #4287f5; outline-offset: 2px; }

/* Input autofill fix for dark mode */
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 30px white inset !important;
}
.dark input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 30px #1e293b inset !important;
  -webkit-text-fill-color: #f1f5f9 !important;
}

/* Toast/flash style */
.flash {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 9999px;
  padding: 10px 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  font-size: 14px;
  pointer-events: auto;
  animation: slideDown 0.3s ease, fadeOut 0.3s ease 2.7s forwards;
}
.flash.success { border-color: #10b981; color: #065f46; }
.flash.error   { border-color: #ef4444; color: #991b1b; }

@keyframes slideDown { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes fadeOut  { from { opacity: 1; } to { opacity: 0; transform: translateY(-10px); } }

/* Print-friendly */
@media print {
  nav, footer, .no-print { display: none !important; }
  body { background: white !important; color: black !important; }
}

/* Prose styles for about / privacy / terms */
.prose h1 { font-size: 1.875rem; font-weight: 800; margin: 1rem 0; }
.prose h2 { font-size: 1.25rem; font-weight: 700; margin: 1.5rem 0 0.5rem; }
.prose p { margin: 0.75rem 0; line-height: 1.7; }
.prose ul { margin: 0.75rem 0 0.75rem 1.5rem; }
.prose a { color: #4287f5; text-decoration: underline; }
.prose strong { font-weight: 700; }

/* Nice image loading */
img { background-color: #f1f5f9; }
.dark img { background-color: #1e293b; }

/* Rating star buttons highlighted state */
.rating-btn.active { background: #fef3c7; color: #f59e0b; }