/* ==========================================================================
   Vietnam Lotto Results — page-specific styles
   Shares CSS custom properties with the main site stylesheet
   (--emerald, --navy, --gold, --cta-green, --bg, --card, --border, --white, --soft).
   Falls back to literal values below so this file also works standalone.
   ========================================================================== */

:root {
  --lotto-emerald: var(--emerald, #00A86B);
  --lotto-navy: var(--navy, #0F172A);
  --lotto-gold: var(--gold, #F4B400);
  --lotto-cta-green: var(--cta-green, #22C55E);
  --lotto-bg: var(--bg, #111827);
  --lotto-card: var(--card, #1F2937);
  --lotto-border: var(--border, #374151);
  --lotto-white: var(--white, #F9FAFB);
  --lotto-soft: var(--soft, #D1D5DB);
  --lotto-radius: var(--radius, 12px);
}

/* ---------------- Toolbar: source attribution + last updated + refresh ---------------- */
.lotto-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 22px;
  padding: 14px 18px;
  background: var(--lotto-card);
  border: 1px solid var(--lotto-border);
  border-radius: var(--lotto-radius);
}
.lotto-toolbar-info {
  font-size: .85rem;
  color: var(--lotto-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}
.lotto-toolbar-info strong { color: var(--lotto-white); font-weight: 600; }
.lotto-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .85rem;
  border: 1px solid var(--lotto-emerald);
  color: var(--lotto-white);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
}
.lotto-refresh-btn:hover { background: rgba(0, 168, 107, .15); }
.lotto-refresh-btn:disabled { opacity: .6; cursor: default; }
.lotto-refresh-icon { display: inline-block; transition: transform .5s ease; }
.lotto-refresh-btn.is-loading .lotto-refresh-icon { animation: lotto-spin 0.8s linear infinite; }
@keyframes lotto-spin { to { transform: rotate(360deg); } }

/* ---------------- State messages (loading / error / empty) ---------------- */
.lotto-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--lotto-soft);
  background: var(--lotto-card);
  border: 1px dashed var(--lotto-border);
  border-radius: var(--lotto-radius);
  font-size: .95rem;
}
.lotto-state.is-error { border-color: var(--lotto-gold); color: var(--lotto-white); }
.lotto-state[hidden] { display: none; }

/* ---------------- Result cards ---------------- */
.lotto-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 880px) { .lotto-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .lotto-cards { grid-template-columns: 1fr; } }

.lotto-card {
  background: var(--lotto-card);
  border: 1px solid var(--lotto-border);
  border-radius: var(--lotto-radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lotto-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.lotto-card-head h3 {
  margin: 0;
  font-size: 1.05rem;
}
.lotto-draw-no {
  font-size: .75rem;
  color: var(--lotto-soft);
  white-space: nowrap;
}
.lotto-draw-date {
  font-size: .82rem;
  color: var(--lotto-soft);
}
.lotto-balls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0;
}
.lotto-ball {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--lotto-navy);
  border: 1px solid var(--lotto-emerald);
  color: var(--lotto-white);
  font-weight: 700;
  font-size: .85rem;
  font-family: var(--font-display, inherit);
}
.lotto-ball.is-bonus {
  border-color: var(--lotto-gold);
  background: rgba(244, 180, 0, .12);
  color: var(--lotto-gold);
}
.lotto-jackpot {
  font-size: .82rem;
  color: var(--lotto-soft);
}
.lotto-jackpot strong { color: var(--lotto-gold); font-family: var(--font-display, inherit); }
.lotto-card-footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--lotto-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: .78rem;
  color: #9CA3AF;
}
.lotto-verify-link {
  color: var(--lotto-emerald);
  font-weight: 600;
  white-space: nowrap;
}
.lotto-card-empty {
  color: var(--lotto-soft);
  font-size: .88rem;
  font-style: italic;
}

/* ---------------- Draw schedule table (reuses table.data-table look) ---------------- */
.lotto-schedule-wrap {
  overflow-x: auto;
}

/* ---------------- Disclaimer / responsible-lottery callouts ---------------- */
.lotto-callout-icon { font-size: 1.6rem; }