/* =============================================================================
   Vlotube Studio - Auth pages (login / register)
   Full-screen background (image or looping video) + porcelain glass card with
   tally-orange focus states and entrance animations.
   ============================================================================= */

.vt-auth-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #0a0b11; }
.vt-auth-bg img,
.vt-auth-bg video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; border: 0;
}
.vt-auth-bg video { opacity: 0; transition: opacity 1.2s ease; }
.vt-auth-bg video.vt-ready { opacity: 1; }
.vt-auth-overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 75% 15%, rgba(255, 90, 31, .16), transparent 55%),
    linear-gradient(180deg, rgba(8, 9, 15, .55), rgba(8, 9, 15, .72) 60%, rgba(8, 9, 15, .86));
}

.login_page {
  position: relative; z-index: 1;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  padding: 88px 16px 48px;
}
.login_page:before, .login_page:after { display: none; }

.login_page .login-page {
  background: rgba(18, 20, 29, .82);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 24px;
  box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .7);
  color: #edeef4;
  animation: vtAuthCardIn .65s cubic-bezier(.2, .8, .25, 1) both;
}
@keyframes vtAuthCardIn {
  from { opacity: 0; transform: translateY(26px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.login_page .login-page h4,
.login_page .login-page .pp_mat_input,
.login_page .login-page .forgot_password,
.login_page .login-page .pt_vdo_cstm_radio,
.login_page .login-page .recaptcha,
.login_page .login-page .login_signup_combo,
.login_page .login-page .terms,
.login_page .login-page .login-icons,
.login_page .login-page .signup__ { animation: vtAuthRise .5s ease both; }
.login_page .login-page .pp_mat_input:nth-of-type(1) { animation-delay: .12s; }
.login_page .login-page .pp_mat_input:nth-of-type(2) { animation-delay: .18s; }
.login_page .login-page .pp_mat_input:nth-of-type(3) { animation-delay: .24s; }
.login_page .login-page .pp_mat_input:nth-of-type(4) { animation-delay: .30s; }
.login_page .login-page .pp_mat_input:nth-of-type(5) { animation-delay: .36s; }
.login_page .login-page .pp_mat_input:nth-of-type(6) { animation-delay: .42s; }
@keyframes vtAuthRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.vt-auth-brand { text-align: center; margin: 0 0 22px; }
.vt-auth-brand img {
  max-width: 200px; max-height: 64px; width: auto; height: auto; object-fit: contain;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .45));
  animation: vtAuthLogoIn .8s cubic-bezier(.2, .8, .25, 1) both;
}
@keyframes vtAuthLogoIn {
  from { opacity: 0; transform: scale(.8) translateY(-8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.login_page .login-page h4 { color: #ffffff; text-align: center; }
.login_page .login-page .pp_mat_input input,
.login_page .login-page .pp_mat_input select {
  background: rgba(255, 255, 255, .07) !important;
  border-color: rgba(255, 255, 255, .16);
  color: #ffffff;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.login_page .login-page .pp_mat_input input:focus,
.login_page .login-page .pp_mat_input select:focus {
  background: rgba(255, 255, 255, .11) !important;
  border-color: #ff5a1f;
  box-shadow: 0 0 0 3px rgba(255, 90, 31, .25);
  outline: none;
}
.login_page .login-page .pp_mat_input label { color: #9096a8; }
.login_page .login-page .pp_mat_input input::placeholder { color: transparent; }
.login_page .login-page select option { color: #111; }

.login_page .login-page .errors { color: #ff7a66; }
.login_page .login-page .errors.success { color: #3ee08a !important; }

.login_page .forgot_password a,
.login_page .signup__ a { color: #ff8a5c; }
.login_page .signup__ { color: #b8bdcc; text-align: center; }
.login_page .terms label { color: #b8bdcc; }
.login_page .terms label a { color: #ff8a5c; }
.login_page hr { border-color: rgba(255, 255, 255, .12); }
.login_page .login-icons { color: #b8bdcc; text-align: center; }

.login_page .login_signup_combo .btn { position: relative; overflow: hidden; }
.login_page .login_signup_combo .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(255, 90, 31, .35);
}
.login_page .login_signup_combo .btn:active { transform: translateY(0); }
.login_page .login_signup_combo .btn.vt-loading { pointer-events: none; opacity: .85; }
.login_page .login_signup_combo .btn.vt-loading:after {
  content: '';
  display: inline-block;
  width: 16px; height: 16px;
  margin-left: 8px; vertical-align: -3px;
  border: 2px solid rgba(255, 255, 255, .4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: vtAuthSpin .7s linear infinite;
}
@keyframes vtAuthSpin { to { transform: rotate(360deg); } }

.login_page .login-page.vt-shake { animation: vtAuthShake .45s ease; }
@keyframes vtAuthShake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}

@media (max-width: 620px) {
  .login_page { padding: 76px 10px 32px; }
  .login_page .login-page { border-radius: 18px; }
  .vt-auth-brand img { max-width: 160px; max-height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .login_page .login-page,
  .login_page .login-page *,
  .vt-auth-brand img { animation: none !important; transition: none !important; }
}