/*
 * 91Club / Atro25win - Emerald Ocean Premium Login Theme (v1.0)
 * A CSS-only enhancement for the existing compiled Vue login screen.
 * Backend, Vue components, handlers and form validation remain unchanged.
 * Keep all overrides under .login__container so admin / games are unaffected.
 */

.login__container {
  /* EDIT THESE TOKENS TO ADJUST THE THEME WITHOUT CHANGING VUE/JS */
  --premium-emerald: var(--theme-c087f5b,#087F5B);
  --premium-jade: var(--theme-c14be91,#14BE91);
  --premium-cyan: var(--theme-c22b8d1,#22B8D1);
  --premium-sapphire: var(--theme-c296be8,#296BE8);
  --premium-ink: var(--theme-c102d49,#102D49);
  --premium-muted: var(--theme-c536b83,#536B83);
  --premium-line: var(--theme-cdce7f2,#DCE7F2);
  --premium-surface: var(--theme-cfbfdff,#FBFDFF);

  /* Existing app variables, scoped to the login page only. */
  --main-color: var(--premium-emerald);
  --main_gradient-color: var(--premium-gradient);
  --main_gradient-color2: linear-gradient(150deg, var(--theme-c43c8a7,#43C8A7) 0%, var(--theme-c53b7de,#53B7DE) 52%, var(--theme-c6596e6,#6596E6) 100%);
  --light-main_gradient-color: var(--premium-gradient);

  background: var(--theme-cffffff,#FFFFFF);
  color: var(--premium-ink);
}

/* Top bar and welcome block: polished shades of the SAME green -> blue palette */
.login__container > .main,
.login__container .van-nav-bar.main,
.login__container .van-nav-bar {
  background: var(--premium-gradient) !important;
  border: 0 !important;
  box-shadow: none !important;
}
.login__container .van-nav-bar::after {
  border-bottom: 0 !important;
}
.login__container .van-nav-bar .van-nav-bar__text,
.login__container .van-nav-bar .van-icon,
.login__container .van-nav-bar .van-nav-bar__right,
.login__container .van-nav-bar .van-nav-bar__left,
.login__container .van-nav-bar .van-nav-bar__title {
  color: var(--theme-on_accent,#FFFFFF) !important;
}

.login__container-heading {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--premium-gradient) !important;
  border-radius: 0 0 24px 24px;
  box-shadow: 0 13px 25px -18px rgba(30, 107, 204, .46);
}
.login__container-heading::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 78% 4%, rgba(255, 255, 255, .20) 0%, transparent 47%),
              radial-gradient(ellipse at 12% 95%, rgba(0, 84, 105, .10) 0%, transparent 60%);
}
.login__container-heading__title {
  color: var(--theme-on_accent,#FFFFFF) !important;
  font-weight: 800 !important;
  letter-spacing: -.02em;
  text-shadow: 0 1px 1px rgba(0, 35, 85, .10);
}
.login__container-heading__subTitle {
  color: rgba(255, 255, 255, .96) !important;
  line-height: 1.55;
  text-shadow: 0 1px 2px rgba(8, 58, 112, .09);
}

/* Phone / Email selector */
.login__container .login_container-tab {
  margin-top: .20rem;
}
.login__container .login_container-tab .tab {
  color: var(--theme-c405f7e,#405F7E) !important;
  font-weight: 650 !important;
  border-bottom-color: var(--theme-ce3ebf3,#E3EBF3) !important;
  transition: color .2s ease, border-color .2s ease;
}
.login__container .login_container-tab .tab svg {
  color: inherit;
}
.login__container .login_container-tab .tab.active {
  color: var(--premium-emerald) !important;
  border-bottom: 2px solid var(--premium-emerald) !important;
}

/* Form labels */
.login__container .phoneInput__container-label,
.login__container .passwordInput__container-label,
.login__container .emailinput__container-label,
.login__container .verifyInput__container-label {
  color: var(--premium-ink) !important;
  font-weight: 650;
}
.login__container .phoneInput__container-label svg,
.login__container .emailinput__container-label svg,
.login__container .verifyInput__container-label svg {
  color: var(--premium-emerald) !important;
}

/* Controls: subtle blue-grey strokes instead of flat white rounded rectangles */
.login__container .phoneInput__container-input input,
.login__container .passwordInput__container-input input,
.login__container .emailinput__container-input input,
.login__container .verifyInput__container-input input {
  background: var(--premium-surface) !important;
  border: 1px solid var(--premium-line) !important;
  border-radius: 15px !important;
  color: var(--premium-ink) !important;
  box-shadow: 0 3px 13px rgba(24, 70, 123, .035);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.login__container .phoneInput__container-input input::placeholder,
.login__container .passwordInput__container-input input::placeholder,
.login__container .emailinput__container-input input::placeholder,
.login__container .verifyInput__container-input input::placeholder {
  color: var(--theme-c62768a,#62768A) !important;
  opacity: 1;
}
.login__container .phoneInput__container-input input:focus,
.login__container .passwordInput__container-input input:focus,
.login__container .emailinput__container-input input:focus,
.login__container .verifyInput__container-input input:focus {
  background: var(--theme-cffffff,#FFFFFF) !important;
  border-color: var(--theme-c26b8b0,#26B8B0) !important;
  box-shadow: 0 0 0 3px rgba(29, 185, 161, .12), 0 4px 13px rgba(24, 70, 123, .045) !important;
  outline: none;
}

/* Login submit: preserve the app's existing enabled/disabled states. */
.login__container .signIn__container-button button:not(.register) {
  border-radius: 100px !important;
  box-shadow: none;
  transition: filter .2s ease, box-shadow .2s ease, transform .2s ease;
}
.login__container .signIn__container-button button.active:not(.register) {
  color: var(--theme-on_accent,#FFFFFF) !important;
  background: var(--premium-gradient) !important;
  box-shadow: 0 9px 20px -13px rgba(28, 126, 191, .60), inset 0 1px 0 rgba(255, 255, 255, .15) !important;
}
.login__container .signIn__container-button button.active:not(.register):active {
  transform: translateY(1px);
  filter: brightness(.97);
}
.login__container .signIn__container-button button.register {
  color: var(--theme-c087f5b,#087F5B) !important;
  border: 1.5px solid var(--theme-c10b27e,#10B27E) !important;
  border-radius: 100px !important;
  background: var(--theme-cffffff,#FFFFFF) !important;
  box-shadow: 0 3px 14px rgba(16, 169, 122, .055) !important;
  transition: background-color .2s ease, box-shadow .2s ease;
}
.login__container .signIn__container-button button.register:active {
  background: var(--theme-cf0fcf8,#F0FCF8) !important;
}
.login__container .signIn__container-button button:focus-visible,
.login__container .login_container-tab .tab:focus-visible {
  outline: 3px solid rgba(32, 143, 232, .40);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .login__container *,
  .login__container *::before,
  .login__container *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}