/* ============================================
   On+ Play — LOGIN (v2: sober premium)
   The mosaic is the star. The card stays clean.
   Loaded AFTER netflix-login.css and overrides it.
   ============================================ */

/* ── Kill the netflix poster mosaic background entirely ──── */
#loginScreen::after {
  background: none !important;
  filter: none !important;
  transform: none !important;
}
/* mosaic-bg / mosaic-overlay (from onplay-mosaic.css) handle the bg now */
#loginScreen::before { background: none !important; }

/* ── Hide the floating top-left logo (we put it inside the card) ─ */
#loginScreen .login-header { display: none !important; }

/* ── Hide the fake corporate footer (its links go to #) ────── */
#loginScreen .site-footer { display: none !important; }

/* ── Body layout ─────────────────────────────────────────── */
.login-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px !important;
  min-height: 100vh;
  position: relative;
  z-index: 3;
}

/* ── Card: solid premium dark surface ─────────────────────── */
.login-content {
  background: rgba(10, 10, 18, 0.92) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  padding: 36px 36px 28px !important;
  width: 400px !important;
  max-width: 100% !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 28px 80px rgba(0,0,0,0.65),
    0 8px 24px rgba(0,0,0,0.4) !important;
  animation: onplay-card-in 0.5s var(--ease-out) both !important;
}
@keyframes onplay-card-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* Kill the gimmicky gradient ring border from v1 */
.login-content::before { display: none !important; }

/* ── Brand mark inside the card ──────────────────────────── */
/* The --brand-logo-url variable is set at runtime by onplay-branding.js
   from /api/branding. Falls back to logo.svg if the API isn't reachable. */
.login-content::after {
  content: "";
  display: block;
  width: 200px;
  height: 80px;
  margin: 0 auto 14px;
  background: var(--brand-logo-url, url("logo.svg")) center / contain no-repeat;
  /* Layer 1: cinematic entry (runs once)
     Layer 2: breathing pulse (idle, looped, starts after entry finishes) */
  animation:
    onplay-logo-enter 900ms cubic-bezier(.34, 1.56, .64, 1) 100ms both,
    onplay-logo-pulse 3.2s cubic-bezier(.65, 0, .35, 1) 1100ms infinite;
  transform-origin: center center;
  will-change: transform, filter;
}

/* Hover: a quick wake-up — scale slightly + intensify glow */
.login-content:hover::after {
  animation-play-state: paused;
  transform: scale(1.04) translateY(-2px);
  filter:
    drop-shadow(0 8px 26px rgba(255, 138, 28, 0.75))
    drop-shadow(0 0 40px rgba(255, 138, 28, 0.45))
    drop-shadow(0 0 60px rgba(139, 63, 184, 0.30));
  transition: transform 280ms cubic-bezier(.34, 1.56, .64, 1),
              filter    280ms cubic-bezier(.2, .6, .2, 1);
}

/* Entry: fade + scale-up with glow burst */
@keyframes onplay-logo-enter {
  0% {
    opacity: 0;
    transform: scale(0.55) translateY(8px);
    filter: blur(10px)
            drop-shadow(0 0 0 rgba(255,138,28,0));
  }
  55% {
    opacity: 1;
    transform: scale(1.10) translateY(-3px);
    filter: blur(0)
            drop-shadow(0 8px 32px rgba(255,138,28,0.85))
            drop-shadow(0 0 60px rgba(255,138,28,0.55));
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0)
            drop-shadow(0 4px 14px rgba(255,138,28,0.40))
            drop-shadow(0 0 20px rgba(255,138,28,0.18));
  }
}

/* Idle pulse: subtle breathe of the glow + a barely-perceptible float */
@keyframes onplay-logo-pulse {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter:
      drop-shadow(0 4px 14px rgba(255,138,28,0.40))
      drop-shadow(0 0 18px rgba(255,138,28,0.18));
  }
  50% {
    transform: translateY(-2px) scale(1.015);
    filter:
      drop-shadow(0 8px 24px rgba(255,138,28,0.65))
      drop-shadow(0 0 38px rgba(255,138,28,0.40))
      drop-shadow(0 0 60px rgba(139,63,184,0.18));
  }
}

/* Honor reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .login-content::after {
    animation: none !important;
  }
}

/* ── Title / subtitle ────────────────────────────────────── */
.login-title {
  color: #FFFFFF !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.2px !important;
  text-align: center !important;
  margin: 0 0 4px !important;
  /* nuke the v1 gradient text */
  background: none !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
.login-subtitle {
  color: var(--text-tertiary) !important;
  font-size: 13px;
  text-align: center;
  margin-bottom: 24px !important;
}

/* ── Form spacing ────────────────────────────────────────── */
.login-form {
  margin-top: 22px;
  gap: 12px !important;
}

/* Hide "Tipo de Playlist" field — always m3u_plus.
   The <select> stays in the DOM (default value = m3u_plus), so main.js
   still reads it correctly via this.playlistTypeInput.value. */
#loginScreen .input-container:has(#playlistType) {
  display: none !important;
}
/* Fallback for browsers without :has() support */
#loginScreen #playlistType,
#loginScreen label[for="playlistType"] {
  display: none !important;
}

/* ── Inputs: clean dark with subtle borders ──────────────── */
.netflix-input {
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 10px !important;
  height: 54px !important;
  font-size: 15px !important;
  color: #FFFFFF !important;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color     var(--dur-fast) var(--ease-out),
    box-shadow       var(--dur-fast) var(--ease-out) !important;
}
.netflix-input:hover {
  background: rgba(255, 255, 255, 0.055) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}
.netflix-input:focus {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: var(--brand-purple-500) !important;
  box-shadow: 0 0 0 3px rgba(139, 63, 184, 0.22) !important;
}

/* Floating label: subtle, sentence case, no uppercase tracking */
.netflix-label,
.netflix-label-static {
  color: rgba(255, 255, 255, 0.55) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.netflix-input:focus ~ .netflix-label,
.netflix-input:not(:placeholder-shown) ~ .netflix-label,
.netflix-input[data-has-value="true"] ~ .netflix-label,
.netflix-label-static {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.45) !important;
}

.netflix-input.has-error {
  border-color: var(--brand-orange-600) !important;
  box-shadow: 0 0 0 3px rgba(255, 138, 28, 0.20) !important;
}

/* Select dropdown caret */
select.netflix-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23FFFFFF' fill-opacity='.55' d='M6 8 0 0h12z'/%3E%3C/svg%3E") !important;
}
select.netflix-input option {
  background: #15151D !important;
  color: #FFFFFF !important;
}

/* ── CTA: brand gradient, restrained shadow ──────────────── */
.btn-login {
  background: var(--brand-gradient) !important;
  background-size: 200% 100% !important;
  background-position: 0% 50% !important;
  border-radius: 10px !important;
  height: 50px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
  margin-top: 14px !important;
  box-shadow: 0 6px 20px rgba(107, 45, 143, 0.35) !important;
  transition:
    transform           var(--dur-fast) var(--ease-out),
    box-shadow          var(--dur-fast) var(--ease-out),
    background-position var(--dur-base) var(--ease-out) !important;
  position: relative;
  overflow: hidden;
}
.btn-login::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.16) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: transform 600ms var(--ease-out);
}
.btn-login:hover {
  transform: translateY(-1px) !important;
  background-position: 100% 50% !important;
  box-shadow: 0 10px 28px rgba(139, 63, 184, 0.45) !important;
}
.btn-login:hover::after { transform: translateX(100%); }
.btn-login:active { transform: translateY(0) !important; }
.btn-login:disabled {
  background: linear-gradient(135deg, #2A2A38 0%, #34344A 100%) !important;
  box-shadow: none !important;
  transform: none !important;
  color: rgba(255,255,255,0.5) !important;
}

/* ── Help row + footer text ──────────────────────────────── */
.login-help {
  margin-top: 10px !important;
  font-size: 12.5px !important;
  color: var(--text-tertiary) !important;
}
.remember-me input[type="checkbox"] { accent-color: var(--brand-purple-600) !important; }
.help-link        { color: var(--text-tertiary) !important; }
.help-link:hover  { color: var(--brand-purple-400) !important; }
.signup-link      { color: var(--brand-orange-500) !important; }
.signup-link:hover{ color: var(--brand-orange-400) !important; text-decoration: underline; }

.login-footer-text {
  margin-top: 18px !important;
  color: var(--text-tertiary) !important;
  font-size: 13px;
  text-align: center;
}
.login-footer-text p { margin: 4px 0 !important; }

/* ── Error message ───────────────────────────────────────── */
.error-message {
  background: linear-gradient(90deg, rgba(255,138,28,0.16), rgba(255,138,28,0.06)) !important;
  border: 1px solid rgba(255,138,28,0.35) !important;
  color: #FFC07A !important;
  border-radius: 10px !important;
  margin-top: 12px !important;
  font-size: 13px !important;
  padding: 10px 14px !important;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 740px) {
  .login-body    { padding: 32px 16px !important; }
  .login-content { padding: 30px 26px 24px !important; width: 92% !important; }
  .login-content::after { width: 170px; height: 68px; margin-bottom: 12px; }
  .login-title   { font-size: 20px !important; }
}
@media (max-width: 480px) {
  .login-content { padding: 26px 20px 22px !important; border-radius: 14px !important; }
  .login-content::after { width: 150px; height: 60px; }
}