/* Moldura do modal de inscrição da Ticket Sports (o miolo é deles, em iframe). Usado por /js/ts-checkout.js.
   Cada página define as cores: --co-bg1, --co-bg2, --co-ink, --co-muted, --co-accent, --co-line, --co-ring,
   --co-overlay, --co-title, --co-ui, --co-dot. Os seletores levam "html body" e !important porque o script deles
   grava estilo inline e injeta o próprio <style> depois do nosso. */
html body #overlayapi { opacity: 1 !important; background: var(--co-overlay, rgba(0, 0, 0, 0.78)) !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
html body #modalboxapi {
  width: min(1120px, calc(100vw - 40px)) !important;
  height: calc(100vh - 48px) !important; height: calc(100dvh - 48px) !important;
  top: 24px !important; left: 50% !important; transform: translateX(-50%);
  padding: 66px 0 0 !important; border: 0 !important; border-radius: 18px !important; overflow: hidden;
  background: linear-gradient(180deg, var(--co-bg1, #222) 0%, var(--co-bg2, #111) 100%) !important;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--co-ring, rgba(255, 255, 255, 0.3)) !important;
}
html body #modalboxapi #frameAPP { position: relative; z-index: 1; display: block; height: 100% !important; background: transparent; border-radius: 0 0 18px 18px; }
html body #closeapi {
  top: 12px !important; right: 12px !important; z-index: 2;
  width: 40px; height: 40px; padding: 0 !important; border-radius: 50% !important;
  background: var(--co-bg1, #222) !important; color: var(--co-ink, #fff) !important; border: 1px solid var(--co-ring, rgba(255, 255, 255, 0.4)) !important;
  font-size: 0 !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important;
}
html body #closeapi::before, html body #closeapi::after { content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px; border-radius: 2px; background: currentColor; transform: rotate(45deg); }
html body #closeapi::after { transform: rotate(-45deg); }
html body #c-view { display: none !important; }
.ts-co-head { position: absolute; left: 0; right: 0; top: 0; height: 66px; display: flex; align-items: center; gap: 14px; padding: 0 72px 0 16px; border-bottom: 1px solid var(--co-line, rgba(255, 255, 255, 0.15)); color: var(--co-ink, #fff); font-family: var(--co-ui, system-ui, sans-serif); }
.ts-co-logo { width: auto; height: 46px; flex: none; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45)); }
.ts-co-title { display: grid; line-height: 1.25; min-width: 0; }
.ts-co-title b { font-family: var(--co-title, inherit); font-weight: 600; font-size: 17px; color: var(--co-ink, #fff); }
.ts-co-title span { font-size: 12.5px; color: var(--co-muted, rgba(255, 255, 255, 0.7)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-co-trust { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--co-accent, #fff); white-space: nowrap; }
.ts-co-ic { display: inline-block; width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.14em; }
.ts-co-out { flex: none; padding: 8px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--co-ring, rgba(255, 255, 255, 0.4)); color: var(--co-ink, #fff); font-size: 12.5px; text-decoration: none; white-space: nowrap; transition: box-shadow 0.3s, background 0.3s; }
.ts-co-out:hover { background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px var(--co-accent, #fff); }
.ts-co-loading { position: absolute; z-index: 0; inset: 66px 0 0; display: grid; place-content: center; justify-items: center; gap: 16px; color: var(--co-muted, rgba(255, 255, 255, 0.7)); font: 14px var(--co-ui, system-ui, sans-serif); }
.ts-co-loading span { width: 46px; height: 46px; border-radius: 50%; background: var(--co-dot, #fff); box-shadow: 0 0 34px var(--co-accent, rgba(255, 255, 255, 0.5)); animation: ts-co-pulse 1.2s ease-in-out infinite; }
@keyframes ts-co-pulse { 50% { transform: scale(0.8); opacity: 0.7; } }
@media (max-width: 1100px) { .ts-co-trust { display: none; } .ts-co-out { margin-left: auto; } }
@media (prefers-reduced-motion: reduce) { .ts-co-loading span { animation: none; } }