/* Farida IPTV in the browser, on top of mobile.css and ios.css. Sizes in the app's TV-sized page (1080 px tall). */

/* A channel that plays in the iPhone's own player (web-late.js): one big button over the picture */
#webOut { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(6, 11, 25, .78); }
#webOut[hidden] { display: none; }
#webOut .wo-card { display: flex; flex-direction: column; align-items: center; max-width: 820px; padding: 0 40px; text-align: center; }
#webOutGo { display: flex; align-items: center; gap: 22px; height: 150px; padding: 0 70px; border: 0; border-radius: 75px;
  background: linear-gradient(135deg, #7c3aed, #a855f7); color: #fff; font: inherit; font-size: 56px; font-weight: 700; }
#webOutGo svg { width: 64px; height: 64px; fill: #fff; }
#webOutGo:active { filter: brightness(1.15); }
#webOut p { margin: 40px 0 0; color: rgba(255, 255, 255, .82); font-size: 34px; line-height: 1.55; }
#player.web-out #spinner { display: none !important; }

/* Safari, not yet on the Home Screen: how to add it */
#webHint[hidden] { display: none; }
#webHint { position: fixed; left: 24px; right: 24px; bottom: 60px; z-index: 900; display: flex; align-items: center; gap: 20px;
  padding: 26px 30px; border-radius: 30px; background: #1d1640; border: 2px solid rgba(168, 85, 247, .55); color: #fff;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5); }
#webHint p { flex: 1; margin: 0; font-size: 32px; line-height: 1.55; }
#webHint b { color: #e9d5ff; }
#webHint svg { width: 38px; height: 38px; fill: #c4b5fd; vertical-align: -8px; }
#webHint button { flex: none; width: 76px; height: 76px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: 46px; line-height: 1; }