/* Landing page helpers (separate from theme.css/app.css) */

.es-card {
  border-radius: 1rem;
}

/* Slight frame for embedded video to match theme */
.es-video-frame {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* YouTube player wrapper (prevents white flash) + overlay controls */
.es-yt-wrap {
  background: #000; /* prevents white flash before iframe loads */
}

/* ---------------------------------------------------------
   Announcement marquee
   --------------------------------------------------------- */
.es-marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.es-marquee-track {
  display: inline-flex;
  gap: 2.25rem;
  padding-left: 100%;
  animation: es-marquee-scroll 60s linear infinite;
}

.es-marquee-item {
  display: inline-flex;
  align-items: center;
}

@keyframes es-marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  .es-marquee-track {
    animation: none;
    padding-left: 0;
  }
}

/* ---------------------------------------------------------
   Latest Winners (auto-scroll)
   --------------------------------------------------------- */

.winners-container {
  max-height: 320px;     /* increased height */
  overflow: hidden;      /* JS scrolls */
  border-radius: .75rem;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
}

/* Keep the table edge-to-edge inside the rounded container */
.winners-container table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
}

/* Sticky header with primary theme */
.winners-container thead th {
  position: sticky;
  top: 0;
  z-index: 2;

  background: var(--bs-primary);
  color: #fff;

  font-weight: 700;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

/* Row separators */
.winners-container tbody td {
  border-bottom: 1px solid var(--bs-border-color);
}

/* Center-align all cells by default */
.winners-container tbody td {
  text-align: center;
}

/* Right-align Prize column (3rd) */
.winners-container tbody td:nth-child(3) {
  text-align: right;
}

/* Center-align Won at column (4th) explicitly */
.winners-container thead th:nth-child(4),
.winners-container tbody td:nth-child(4) {
  text-align: center;
}

/* ---------------------------------------------------------
   News cards
   --------------------------------------------------------- */
.es-news-card {
  border-radius: 1rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.es-news-card:hover {
  transform: translateY(-1px);
}

.es-news-thumb {
  height: 100%;
  min-height: 88px;
  background-size: cover;
  background-position: center;
}

/* =========================================================
   Password show / hide toggle
   (Bootstrap input-group suffix style)
   ========================================================= */

.es-password-toggle {
  background: var(--bs-body-bg);
  color: var(--bs-secondary-color);

  border: 1px solid var(--bs-border-color);
  border-left: 0; /* remove inner seam */

  padding: 0 .85rem;

  display: flex;
  align-items: center;
  justify-content: center;

  border-top-right-radius: .5rem;
  border-bottom-right-radius: .5rem;
}

/* Remove double rounding on the input */
.input-group > .form-control {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Hover + focus behavior */
.es-password-toggle:hover {
  background: var(--bs-secondary-bg);
  color: var(--bs-body-color);
}

.es-password-toggle:focus,
.es-password-toggle:active {
  box-shadow: none;
  outline: none;
}

/* Sync border color when input is focused */
.input-group:focus-within .es-password-toggle {
  border-color: var(--bs-primary);
}

/* Bootstrap Icons sizing */
.es-password-toggle .bi {
  font-size: 1.05rem;
  line-height: 1;
}