@charset "UTF-8";
@import url("tokens.css");

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  overflow-x: hidden;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main,
.content,
#content {
  flex: 1 0 auto;
  min-width: 0;
  max-width: 100%;
}

body > *,
main,
section,
footer,
.auth-shell,
.auth-panel,
.auth-card {
  max-width: 100%;
}

footer {
  margin: 0;
  flex-shrink: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

body.auth-page {
  margin: 0;
  min-height: 100vh;
  font-family: var(--cp-font);
  background:
    radial-gradient(circle at top left, rgba(20, 138, 255, 0.3)2), transparent 32%),
    radial-gradient(circle at bottom right, var(--cp-blue-muted), transparent 28%),
    linear-gradient(135deg, var(--cp-black) 0%, var(--cp-grey-950) 48%, var(--cp-black-elevated) 100%);
  color: var(--cp-white);
}

.auth-shell {
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(280px, 1.05fr) minmax(320px, 0.95fr);
  align-items: stretch;
}

.auth-panel {
  min-height: 100vh;
  padding: 72px 56px 48px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 28px;
}

.auth-brand {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

.auth-brand img {
  width: 180px;
  max-width: 100%;
  display: block;
  margin: 0;
}

.auth-copy {
  max-width: 560px;
}

.auth-kicker {
  margin: 0 0 16px;
  color: var(--cp-cyan);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
}

.auth-copy h1 {
  margin: 0;
  font-size: clamp(2.4rem, 4vw, 4.2rem);
  line-height: 1.15;
}

.auth-lead {
  margin: 20px 0 0;
  max-width: 520px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.05rem;
  line-height: 1.9;
}

.auth-highlights {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  max-width: 420px;
}

.auth-highlights li {
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
}

.auth-card {
  margin: 0;
  padding: 28px;
  min-width: 0;
  border-radius: var(--cp-radius-lg);
  background: linear-gradient(180deg, rgba(24, 24, 24, 0.92), rgba(12, 12, 12, 0.94));
  box-shadow: var(--cp-shadow-md);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.auth-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 8px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
}

.auth-tab {
  border: 0;
  border-radius: 14px;
  padding: 14px 18px;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.auth-tab.is-active {
  background: linear-gradient(90deg, var(--cp-blue), var(--cp-cyan));
  color: var(--cp-white);
  transform: translateY(-1px);
}

.auth-form-wrap {
  position: relative;
  margin-top: 24px;
}

.auth-form {
  display: none;
  animation: authFade 0.25s ease;
}

.auth-form.is-active {
  display: block;
}

.auth-form h2 {
  margin: 0;
  font-size: 1.8rem;
}

.auth-form-text {
  margin: 12px 0 24px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.8;
}

.auth-field {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

.auth-field span {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.86);
}

.auth-field input {
  width: 100%;
  box-sizing: border-box;
  padding: 15px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-field input::placeholder {
  color: rgba(255, 255, 255, 0.38);
}

.auth-field input:focus {
  border-color: rgba(20, 138, 255, 0.9)5);
  background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 4px rgba(20, 138, 255, 0.1)4);
}

.auth-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 12px 0 22px;
}

.auth-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.76);
}

.auth-link,
.auth-home-link {
  color: var(--cp-cyan);
  text-decoration: none;
}

.auth-submit {
  width: 100%;
  border: 0;
  border-radius: var(--cp-radius-md);
  padding: 16px 20px;
  background: linear-gradient(90deg, var(--cp-blue), #65d8ff);
  color: var(--cp-white);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.auth-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(20, 138, 255, 0.2)5);
}

.auth-submit:disabled {
  cursor: wait;
  opacity: 0.76;
  transform: none;
  box-shadow: none;
}

.auth-success-actions {
  margin-top: 18px;
}

.auth-secondary-btn {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--cp-radius-md);
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--cp-white);
  font-size: 0.98rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.auth-secondary-btn:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(20, 138, 255, 0).5);
}

.auth-secondary-btn:disabled {
  cursor: wait;
  opacity: 0.76;
  transform: none;
}

.auth-inline-message {
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.9);
}

.auth-inline-message[data-type="error"] {
  border-color: rgba(255, 122, 89, 0.3);
  background: rgba(255, 122, 89, 0.08);
}

.auth-inline-message[data-type="success"] {
  border-color: rgba(20, 138, 255, 0).3);
  background: rgba(20, 138, 255, 0.0)8);
}

.auth-home-link {
  margin-top: 20px;
  text-align: center;
  font-size: 0.95rem;
}

.auth-notice {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  z-index: 9999;
  pointer-events: none;
}

.auth-notice[hidden] {
  display: none;
}

.auth-notice__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 3, 3, 0.72);
  backdrop-filter: blur(12px);
}

.auth-notice__panel {
  position: relative;
  width: min(100%, 420px);
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(26, 26, 26, 0.96), rgba(10, 10, 10, 0.98));
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.45);
  text-align: center;
  pointer-events: auto;
}

.auth-notice__panel::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, var(--cp-blue), rgba(20, 138, 255, 0.9)2));
}

.auth-notice__panel[data-type="error"]::before {
  background: linear-gradient(90deg, #ff4f64, #ff8290);
}

.auth-notice__title {
  margin: 0 0 10px;
  font-size: 1.15rem;
  font-weight: 700;
}

.auth-notice__body {
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  line-height: 1.8;
}

@keyframes authFade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 980px) {
  .auth-shell {
    grid-template-columns: 1fr;
  }

  .auth-panel {
    min-height: auto;
    padding: 48px 24px 12px;
    gap: 22px;
  }

  .auth-card {
    margin: 0;
    padding: 22px;
  }
}

@media (max-width: 640px) {
  .auth-copy h1 {
    font-size: 2rem;
  }

  .auth-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .auth-notice {
    padding: 16px;
  }

  .auth-notice__panel {
    padding: 22px 18px;
    border-radius: 16px;
  }
}

.auth-shell--single {
  grid-template-columns: minmax(260px, .9fr) minmax(320px, 560px);
}

@media (max-width: 980px) {
  .auth-shell--single { grid-template-columns: 1fr; }
}

/* Keep auth success and verification messages centered without the hidden form reserving space. */
.auth-card.is-success .auth-tabs,
.auth-card.is-success .auth-form-wrap {
  display: none !important;
}

.auth-card.is-success .auth-success-state {
  padding-top: 0 !important;
}

.auth-card.is-success .auth-inline-message {
  margin-top: 0;
}

/* Cinematic poster wall: Netflix-like depth using the CINEPLUS+ library and palette. */
.auth-poster-backdrop {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: #020914;
}

.auth-poster-wall {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 126vw;
  min-width: 1180px;
  height: 135vh;
  display: grid;
  grid-template-columns: repeat(6, minmax(150px, 1fr));
  grid-auto-rows: minmax(250px, 1fr);
  gap: clamp(10px, 1vw, 18px);
  transform: translate(-50%, -50%) rotate(-5deg) scale(1.04);
  filter: saturate(0.9) contrast(1.06);
}

.auth-poster-wall img {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.58);
}

.auth-poster-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 76% 45%, rgba(20, 138, 255, 0.08), transparent 34%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.76) 0%, rgba(0, 0, 0, 0.64) 42%, rgba(0, 0, 0, 0.78) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.76));
  box-shadow: inset 0 0 180px rgba(0, 0, 0, 0.92);
}

body.auth-page {
  background: #020914;
}

.auth-shell {
  position: relative;
  z-index: 1;
  width: min(100%, 1680px);
  margin-inline: auto !important;
  padding: clamp(24px, 4vw, 68px) !important;
  gap: clamp(30px, 5vw, 90px);
}

.auth-panel {
  min-height: calc(100vh - clamp(48px, 8vw, 136px));
  padding: clamp(20px, 3vw, 46px);
  justify-content: center;
  border-radius: 30px;
  background: linear-gradient(135deg, rgba(6, 6, 8, 0.32), rgba(6, 6, 8, 0.08));
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.95);
}

.auth-brand img {
  width: clamp(170px, 14vw, 230px);
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.7));
}

.auth-copy h1 {
  font-size: clamp(2.5rem, 3.6vw, 4.2rem);
  text-wrap: balance;
}

.auth-card {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, rgba(11, 33, 59, 0.96), rgba(2, 9, 20, 0.98));
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.72), 0 0 0 1px rgba(20, 138, 255, 0).1);
  backdrop-filter: blur(18px);
}

.auth-highlights li {
  border-color: rgba(101, 216, 255, 0.2);
  background: rgba(7, 24, 44, 0.72);
}

@media (min-width: 981px) {
  .auth-panel {
    position: sticky;
    top: 24px;
    align-self: start;
    height: calc(100vh - 48px);
    min-height: 0;
    padding-block: clamp(14px, 2vh, 28px);
    gap: clamp(14px, 2vh, 24px);
  }

  .auth-panel .auth-kicker {
    margin-bottom: 10px;
  }

  .auth-panel .auth-lead {
    margin-top: 14px;
    line-height: 1.7;
  }

  .auth-panel .auth-highlights {
    gap: 10px;
  }

  .auth-panel .auth-highlights li {
    padding: 12px 16px;
  }
}

@media (max-width: 980px) {
  .auth-poster-wall {
    width: 170vw;
    min-width: 900px;
    grid-template-columns: repeat(5, minmax(140px, 1fr));
  }

  .auth-shell {
    padding: 24px !important;
  }

  .auth-panel {
    min-height: auto;
    padding: 32px 24px;
    align-items: center;
    text-align: center;
  }

  .auth-copy,
  .auth-lead,
  .auth-highlights {
    margin-inline: auto;
  }
}

@media (max-width: 640px) {
  .auth-poster-wall {
    width: 250vw;
    opacity: 0.82;
  }

  .auth-poster-backdrop::after {
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.82));
  }

  .auth-shell {
    padding: 14px !important;
    gap: 16px;
  }

  .auth-panel {
    padding: 26px 16px 10px;
    gap: 18px;
  }

  .auth-copy h1 {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  .auth-highlights {
    display: none;
  }
}

/* Owner-supplied official CinePlus+ artwork. */
.auth-brand img{width:138px;height:138px;border-radius:22px;object-fit:contain}

.auth-language{position:fixed;top:18px;inset-inline-end:22px;z-index:80}.flag-picker-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important}.flag-dropdown{position:relative}.flag-dropdown__trigger{height:42px;min-width:58px;padding:0 11px;display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid rgba(255,255,255,.25);border-radius:12px;background:#0b1728;color:#ffffff}.flag-dropdown img{width:26px;height:18px;object-fit:cover;border-radius:3px}.flag-dropdown__menu{position:absolute;top:50px;inset-inline-end:0;width:178px;padding:7px;background:#0b1728;border:1px solid rgba(255,255,255,.2);border-radius:13px;box-shadow:0 18px 50px #000a}.flag-dropdown__menu[hidden]{display:none}.flag-dropdown__menu button{width:100%;min-height:44px;padding:8px 10px;display:flex;align-items:center;gap:12px;border:0;border-radius:8px;background:transparent;color:#ffffff;text-align:start}.flag-dropdown__menu button:hover,.flag-dropdown__menu button[aria-current="true"]{background:#123c68}.auth-footer{position:relative;z-index:10;padding:28px clamp(20px,5vw,70px);display:flex;align-items:center;justify-content:space-between;gap:22px;background:#020914;border-top:1px solid rgba(255,255,255,.12);color:#9db0c4}.auth-footer img{width:86px;height:86px;border-radius:16px;object-fit:contain}.auth-footer div{display:flex;flex-wrap:wrap;gap:20px}.auth-footer a{color:inherit;text-decoration:none}@media(max-width:640px){.auth-footer{flex-direction:column;text-align:center}.auth-language{top:10px;inset-inline-end:10px}}

/* Equal-size, centered auth tabs and responsive forms in RTL and LTR. */
.auth-tabs { width:100%; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; gap:12px; }
.auth-tab { width:100%; min-width:0; min-height:56px; padding:12px clamp(8px,2vw,18px); display:flex; align-items:center; justify-content:center; text-align:center; line-height:1.35; white-space:normal; overflow-wrap:anywhere; transform:none; font-size:clamp(.86rem,1.3vw,1rem); }
.auth-tab.is-active { transform:none; }
.auth-card,.auth-form-wrap,.auth-form { min-width:0; }
.auth-field input,.auth-submit,.auth-secondary-btn { min-height:50px; }
.auth-field input { padding:13px 15px; }
.auth-row { flex-wrap:wrap; }
@media(max-width:420px){.auth-shell{padding:14px!important;gap:16px}.auth-card{padding:16px!important;border-radius:18px}.auth-tabs{gap:8px;padding:6px}.auth-tab{min-height:54px;padding:10px 6px;font-size:.88rem}}

.flag-dropdown__chevron{width:14px;height:14px;display:grid;place-items:center;color:#c8d8e8;line-height:0;transition:transform .18s ease}
.flag-dropdown__chevron svg{display:block;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.flag-dropdown.is-open .flag-dropdown__chevron{transform:rotate(180deg)}

.auth-password-wrap{position:relative;min-width:0}
.auth-password-wrap input{padding-inline-end:86px}
.auth-password-toggle{position:absolute;inset-inline-end:9px;top:50%;min-width:58px;min-height:34px;padding:5px 9px;transform:translateY(-50%);border:1px solid rgba(101,216,255,.22);border-radius:9px;background:rgba(7,24,44,.94);color:#a9dcff;font-size:.82rem;font-weight:700;cursor:pointer}
.auth-password-toggle:focus-visible{outline:2px solid var(--cp-cyan);outline-offset:2px}
.auth-password-toggle[aria-pressed="true"]{background:rgba(20,138,255,.2);color:#fff}
.auth-inline-message[data-type="error"]{border-color:rgba(101,216,255,.34);background:rgba(7,24,44,.82)}
.auth-inline-message[data-type="success"]{border-color:rgba(101,216,255,.34);background:rgba(20,138,255,.12)}
.auth-submit:disabled{cursor:wait;opacity:.78}

/* Keep the language picker in its own layout row above the auth card. */
.auth-card-stack {
  align-self: center;
  justify-self: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: 24px;
  width: min(100%, 560px);
  min-width: 0;
}

.auth-card-stack .auth-language {
  position: relative;
  inset: auto;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  width: 100%;
  min-width: 0;
  margin: 0;
}

.auth-card-stack .flag-dropdown {
  display: grid;
  justify-items: end;
  min-width: 0;
}

.auth-card-stack .flag-dropdown__menu {
  position: static;
  inset: auto;
  width: min(220px, calc(100vw - 48px));
  margin: 8px 0 0;
  box-sizing: border-box;
}

@media (max-width: 980px) {
  .auth-card-stack {
    align-self: start;
    width: min(100%, 560px);
  }
}

@media (max-width: 640px) {
  .auth-card-stack {
    gap: 24px;
    width: 100%;
  }
}