/* Replaces GHL's video.js player and the popup runtime. Everything else is GHL's own CSS. */
.cf-video { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.cf-video-frame { position: absolute; inset: 0; background: #000; }
.cf-video video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }

.cf-sound {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px;
  background: rgba(0, 0, 0, .65); color: #fff;
  font: 600 13px/1 Inter, sans-serif; cursor: pointer;
}
.cf-hero.has-sound .cf-sound { display: none; }

.cf-pip-close {
  display: none; position: absolute; top: -12px; right: -12px; z-index: 3;
  width: 28px; height: 28px; border: 0; border-radius: 50%;
  background: #000; color: #fff; font: 20px/28px Inter, sans-serif; cursor: pointer;
}
.cf-hero.is-pip .cf-video-frame {
  position: fixed; inset: auto 16px 16px auto; z-index: 1000;
  width: min(320px, calc(100vw - 32px)); aspect-ratio: 16 / 9; height: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.cf-hero.is-pip .cf-pip-close { display: block; }

/* Checkout: read-only stand-in for Stripe's Payment Element (checkout is retired). */
.cf-pay { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 4px 0 8px; font-family: Inter, sans-serif; }
.cf-pay-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 14px; color: #30313d; }
.cf-pay-full { grid-column: 1 / -1; }
.cf-pay-input {
  display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 44px;
  border: 1px solid #e6e6e6; border-radius: 5px; background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .03), 0 3px 6px rgba(0, 0, 0, .02);
}
.cf-pay-input input, .cf-pay-input select {
  flex: 1; width: 100%; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent;
  font: 16px Inter, sans-serif; color: #30313d; cursor: default; appearance: none;
}
.cf-card-brands { display: flex; flex-shrink: 0; gap: 4px; }
@media (max-width: 480px) { .cf-card-brand:nth-child(n+3) { display: none; } }
.cf-card-brand {
  padding: 2px 4px; border: 1px solid #e6e6e6; border-radius: 3px;
  font: 700 9px/1.2 Inter, sans-serif; color: #6b7280; letter-spacing: .02em;
}

/* Label-style "buttons" opened GHL's order popup; without it they are only labels. */
.c-button button { cursor: default; }
.c-button button.cf-cta { cursor: pointer; }