/* ============================================================
   Car Show Voting — Shared Styles
   Mobile-first, dark-accent theme
   ============================================================ */

:root {
  --red:        #c0392b;
  --red-dark:   #922b21;
  --navy:       #1a1a2e;
  --navy-light: #16213e;
  --gold:       #f0a500;
  --text:       #1a1a1a;
  --muted:      #666;
  --border:     #e0e0e0;
  --bg:         #f7f7f7;
  --white:      #ffffff;
  --radius:     10px;
  --shadow:     0 2px 12px rgba(0,0,0,.10);
  --font:       -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  background:  var(--bg);
  color:       var(--text);
  min-height:  100vh;
  padding-bottom: 40px;
}

/* ── Shared page header (register, results, setup) ── */
.page-header {
  background:   var(--navy);
  position:     sticky;
  top:          0;
  z-index:      20;
  padding:      0 16px;
}
.page-header-inner {
  max-width:    900px;
  margin:       0 auto;
  padding:      14px 0;
  display:      flex;
  align-items:  center;
  justify-content: space-between;
  gap:          12px;
}
.page-header h1 {
  color:          var(--gold);
  font-size:      1.2rem;
  font-weight:    800;
  margin:         0;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.page-header-home {
  display:      inline-flex;
  align-items:  center;
  gap:          5px;
  padding:      7px 14px;
  background:   transparent;
  color:        var(--gold);
  border:       1px solid rgba(240,165,0,.4);
  border-radius: 6px;
  font-size:    .82rem;
  font-weight:  600;
  text-decoration: none;
  white-space:  nowrap;
  flex-shrink:  0;
  transition:   background .15s;
}
.page-header-home:hover { background: rgba(240,165,0,.1); }

/* Ensure content on pages with .page-header has consistent left padding */
.wrap      { max-width: 520px; margin: 0 auto; padding: 16px 16px 48px; }
.form-wrap { max-width: 560px; margin: 0 auto; padding: 16px; }


  background:  var(--navy);
  color:       var(--white);
  text-align:  center;
  padding:     18px 16px 14px;
  position:    sticky;
  top:         0;
  z-index:     10;
  box-shadow:  0 2px 6px rgba(0,0,0,.3);
}
.event-header h1 {
  font-size:   1.35rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  color:       var(--gold);
}
.event-header .event-sub {
  font-size:  .78rem;
  color:      #aaa;
  margin-top: 3px;
}

/* ── Card ── */
.card {
  background:    var(--white);
  border-radius: var(--radius);
  box-shadow:    var(--shadow);
  overflow:      hidden;
  margin:        16px;
}

/* ── Vehicle image ── */
.vehicle-image {
  width:      100%;
  max-height: 280px;
  object-fit: cover;
  display:    block;
}
.vehicle-image-placeholder {
  width:           100%;
  height:          200px;
  background:      var(--navy-light);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           #555;
  font-size:       2.5rem;
}

/* ── Vehicle info ── */
.vehicle-info {
  padding: 16px 18px;
}
.owner-block {
  margin-bottom: 12px;
}
.owner-name {
  font-size:   1.1rem;
  font-weight: 700;
  line-height: 1.3;
}
.owner-meta {
  font-size:  .88rem;
  color:      var(--muted);
  margin-top: 3px;
  line-height: 1.5;
}
.owner-meta a {
  color: var(--red);
  text-decoration: none;
}
.vehicle-block {
  border-top:  1px solid var(--border);
  padding-top: 12px;
  margin-top:  4px;
}
.vehicle-title {
  font-size:   1.05rem;
  font-weight: 700;
  line-height: 1.3;
}
.vehicle-club {
  font-size:  .85rem;
  color:      var(--muted);
  margin-top: 2px;
}
.vehicle-desc {
  font-size:   .88rem;
  color:       #444;
  margin-top:  8px;
  line-height: 1.55;
}

/* ── Vote button ── */
.vote-btn {
  display:         block;
  width:           calc(100% - 32px);
  margin:          0 16px 16px;
  padding:         16px;
  background:      var(--red);
  color:           var(--white);
  font-size:       1.05rem;
  font-weight:     700;
  text-align:      center;
  border:          none;
  border-radius:   var(--radius);
  cursor:          pointer;
  letter-spacing:  .02em;
  transition:      background .15s, transform .1s;
  -webkit-appearance: none;
}
.vote-btn:hover  { background: var(--red-dark); }
.vote-btn:active { transform: scale(.98); }
.vote-btn:disabled {
  background: #bbb;
  cursor:     not-allowed;
  transform:  none;
}

/* ── Status banners ── */
.status-banner {
  margin:        16px;
  padding:       14px 16px;
  border-radius: var(--radius);
  font-size:     .9rem;
  line-height:   1.5;
  text-align:    center;
}
.status-banner.info    { background: #e8f4fd; color: #1565c0; border: 1px solid #90caf9; }
.status-banner.success { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
.status-banner.warning { background: #fff8e1; color: #e65100; border: 1px solid #ffe082; }
.status-banner.error   { background: #fce4ec; color: #b71c1c; border: 1px solid #f48fb1; }

.status-banner .icon   { font-size: 1.6rem; display: block; margin-bottom: 6px; }
.status-banner strong  { display: block; font-size: 1rem; margin-bottom: 4px; }

/* ── Voted confirmation ── */
.voted-check {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  margin:          0 16px 16px;
  padding:         14px;
  background:      #e8f5e9;
  border:          1px solid #a5d6a7;
  border-radius:   var(--radius);
  color:           #2e7d32;
  font-weight:     700;
  font-size:       .95rem;
}
.voted-check .checkmark { font-size: 1.4rem; }

/* ── My Votes link ── */
.my-votes-link {
  display:    block;
  text-align: center;
  margin:     4px 16px 16px;
  color:      var(--muted);
  font-size:  .82rem;
  text-decoration: none;
}
.my-votes-link:hover { color: var(--red); text-decoration: underline; }

/* ── Spinner ── */
.spinner {
  display:    flex;
  justify-content: center;
  padding:    40px;
}
.spinner::after {
  content:       '';
  width:         36px;
  height:        36px;
  border:        4px solid var(--border);
  border-top-color: var(--red);
  border-radius: 50%;
  animation:     spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── My Votes list ── */
.my-votes-list { padding: 8px 16px; }

.vote-item {
  display:       flex;
  gap:           12px;
  align-items:   center;
  padding:       12px 0;
  border-bottom: 1px solid var(--border);
}
.vote-item:last-child { border-bottom: none; }

.vote-thumb {
  width:         60px;
  height:        48px;
  object-fit:    cover;
  border-radius: 6px;
  flex-shrink:   0;
  background:    var(--navy-light);
}
.vote-thumb-placeholder {
  width:           60px;
  height:          48px;
  border-radius:   6px;
  flex-shrink:     0;
  background:      var(--navy-light);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       1.3rem;
}
.vote-detail { flex: 1; min-width: 0; }
.vote-vehicle { font-size: .9rem; font-weight: 700; }
.vote-owner   { font-size: .8rem; color: var(--muted); margin-top: 2px; }

/* ── Admin / results table ── */
.admin-header {
  background:  var(--navy);
  padding:     20px 20px 16px;
  color:       var(--white);
}
.admin-header h1 { font-size: 1.2rem; color: var(--gold); }
.admin-header p  { font-size: .82rem; color: #aaa; margin-top: 4px; }

.results-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       .88rem;
}
.results-table th {
  background:  var(--navy);
  color:       var(--gold);
  padding:     10px 12px;
  text-align:  left;
  font-size:   .78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}
.results-table td {
  padding:     10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.results-table tr:last-child td { border-bottom: none; }
.results-table tr:hover td { background: #f9f9f9; }

.rank-badge {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           28px;
  height:          28px;
  border-radius:   50%;
  font-weight:     800;
  font-size:       .82rem;
}
.rank-1 { background: #ffd700; color: #333; }
.rank-2 { background: #c0c0c0; color: #333; }
.rank-3 { background: #cd7f32; color: #fff; }
.rank-other { background: var(--border); color: var(--text); }

/* ── Utility ── */
.section-label {
  font-size:      .72rem;
  color:          var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin:         20px 16px 6px;
  font-weight:    700;
}
.pill {
  display:       inline-block;
  padding:       2px 8px;
  border-radius: 99px;
  font-size:     .75rem;
  font-weight:   600;
  background:    var(--border);
  color:         var(--muted);
}
.empty-state {
  text-align: center;
  padding:    40px 20px;
  color:      var(--muted);
}
.empty-state .icon { font-size: 2.5rem; display: block; margin-bottom: 10px; }

/* ── Admin form ── */
.admin-form { padding: 16px; }
.admin-form label {
  display:     block;
  font-size:   .82rem;
  font-weight: 600;
  color:       var(--muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.admin-form input,
.admin-form select {
  display:       block;
  width:         100%;
  padding:       10px 12px;
  border:        1px solid var(--border);
  border-radius: 6px;
  font-size:     .95rem;
  margin-bottom: 14px;
  background:    var(--white);
  color:         var(--text);
  -webkit-appearance: none;
}
.admin-form input:focus,
.admin-form select:focus {
  outline:      none;
  border-color: var(--red);
  box-shadow:   0 0 0 2px rgba(192,57,43,.15);
}
.admin-btn {
  display:      block;
  width:        100%;
  padding:      13px;
  background:   var(--navy);
  color:        var(--white);
  border:       none;
  border-radius: var(--radius);
  font-size:    1rem;
  font-weight:  700;
  cursor:       pointer;
  margin-top:   4px;
  -webkit-appearance: none;
}
.admin-btn:hover { background: var(--navy-light); }

.download-btn {
  display:      inline-flex;
  align-items:  center;
  gap:          6px;
  padding:      9px 16px;
  background:   var(--white);
  color:        var(--navy);
  border:       1px solid var(--border);
  border-radius: 6px;
  font-size:    .85rem;
  font-weight:  600;
  cursor:       pointer;
  text-decoration: none;
}
.download-btn:hover { background: var(--bg); }

/* ── Countdown ── */
.countdown {
  font-size:   2rem;
  font-weight: 800;
  color:       var(--red);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}

/* ── Responsive tweaks for larger screens ── */
@media (min-width: 480px) {
  .card { margin: 20px auto; max-width: 440px; }
  .vote-btn { max-width: 440px; margin-left: auto; margin-right: auto; }
  .status-banner { max-width: 440px; margin-left: auto; margin-right: auto; }
  .voted-check   { max-width: 440px; margin-left: auto; margin-right: auto; }
  .my-votes-link { max-width: 440px; margin-left: auto; margin-right: auto; }
}