/* How-to-play page styles (page-specific) */

/* Video frame (match landing feel without pulling landing.css) */
.es-video-frame {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.es-yt-wrap {
  background: #000; /* prevents white flash before iframe loads */
}

/* Steps */
.es-step {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .75rem;
  border-radius: .75rem;
  border: 1px solid rgba(var(--bs-body-color-rgb), .12);
  background: var(--bs-body-bg);
}

[data-bs-theme="dark"] .es-step {
  background: var(--bs-tertiary-bg);
  border-color: rgba(255, 255, 255, .12);
}

.es-step-icon {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: .65rem;
  background: rgba(var(--bs-primary-rgb), .10);
  color: var(--bs-primary);
  flex: 0 0 auto;
}

.es-step-icon i {
  font-size: 1.25rem;
}

/* Social pills (footer-consistent icon behavior) */
.es-social-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 500;
  transition: transform .15s ease;
}

.es-social-pill:hover {
  transform: translateY(-1px);
}

/* Base icon */
.es-social-icon {
  width: 20px;
  height: 20px;
  display: block;
  transition: filter .15s ease;
}

/* Only invert in dark mode */
[data-bs-theme="dark"] .es-social-icon {
  filter: brightness(0) invert(1);
}

/* Brand hover colors (same filter logic as footer) */
.es-social-pill:has(img[alt="Facebook"]):hover .es-social-icon {
  filter: invert(29%) sepia(91%) saturate(746%) hue-rotate(187deg) brightness(92%) contrast(92%);
}

.es-social-pill:has(img[alt="TikTok"]):hover .es-social-icon {
  filter: invert(88%) sepia(13%) saturate(7495%) hue-rotate(315deg) brightness(95%) contrast(105%);
}

.es-social-pill:has(img[alt="Instagram"]):hover .es-social-icon {
  filter: invert(33%) sepia(95%) saturate(1922%) hue-rotate(328deg) brightness(97%) contrast(94%);
}

.es-social-pill:has(img[alt="YouTube"]):hover .es-social-icon {
  filter: invert(16%) sepia(87%) saturate(6067%) hue-rotate(356deg) brightness(93%) contrast(110%);
}