:root {
  /* Surfaces */
  --bg-page: #ffffff;
  --bg-elev-1: #ffffff;
  --bg-topnav: #EEF5FF;

  /* Text */
  --text-primary: #111827; /* gray-900 */
  --text-muted: #374151;   /* gray-700 */

  /* Borders & lines */
  --line-soft: #e5e7eb;    /* gray-200 */

  /* Accents / states */
  --accent: #2563eb;       /* blue-600 */
  --accent-strong: #1e40af;/* blue-800 */
  --accent-soft: #dbeafe;  /* blue-100 */

  /* Gradients */
  --accent-gradient: linear-gradient(to right, #eff6ff, #dbeafe); /* blue-50 → blue-100 */

  /* Shadows */
  --shadow-1: 0 2px 4px rgba(0,0,0,0.04);
}

/* Dark mode overrides */
[data-theme="dark"] {
  --bg-page: #0E162A;
  --bg-elev-1: #121a2f;
  --bg-topnav: #0E162A;

  --text-primary: #f5f7fb;
  --text-muted: #d1d5db;

  --line-soft: #2b3347;

  --accent: #8ab4ff;        /* softer blue in dark */
  --accent-strong: #b3ccff;
  --accent-soft: rgba(138,180,255,0.18);

  --accent-gradient: linear-gradient(to right, #121a2f, #0E162A); /* dark blues */

  --shadow-1: 0 2px 6px rgba(0,0,0,0.35);
}

html, body {
  background: var(--bg-page);
  color: var(--text-primary);
  overflow-x: hidden;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

/*-- Vote Banner --*/

/* VOTE SECTION INSIDE KO-FI BANNER */
.vote-section {
  background: linear-gradient(to bottom, #f0f8ff, #ffffff);
  border-radius: 8px;
  padding: 15px;
  margin-top: 1rem;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.05);
}

.vote-section .banner-header {
  text-align: center;
  font-weight: bold;
  font-size: 18px;
  color: #1d4ed8; /* Tailwind's blue-700 */
  margin-bottom: 10px;
}

.vote-section .banner-content {
  text-align: center;
}

.vote-section .banner-message {
  font-size: 14px;
  color: #374151; /* Tailwind's gray-700 */
  margin-bottom: 15px;
}

.vote-section .vote-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vote-section .vote-submit {
  background-color: #10b981; /* Tailwind's green-500 */
  color: white;
  border: none;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
  width: 100%;
  text-align: center;
  position: relative;
}

.vote-section .vote-submit:hover {
  background-color: #059669; /* Darker green */
}

/* Sparkle effect */
.vote-section .vote-submit::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 60%);
  animation: sparkle-animation 3s linear infinite;
  pointer-events: none;
  opacity: 0.5;
}

@keyframes sparkle-animation {
  0%   { transform: translate(-100%, -100%); }
  50%  { transform: translate(50%, 50%); }
  100% { transform: translate(200%, 200%); }
}


/*-- Lot Cards --*/
.lot-card {
  transition: all 0.3s ease-in-out;
}

.lot-card:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.lot-card.hide {
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
}

.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;

    /* Standard */
    line-clamp: 1;
    box-orient: vertical;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;

    /* Standard */
    line-clamp: 2;
    box-orient: vertical;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;

    /* Standard */
    line-clamp: 3;
    box-orient: vertical;
}