/* =========================================
   Global + layout
========================================= */

:root {
  /* 👈 Tweak this to control spacing between ALL input boxes */
  --field-gap: 0px;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  background: #111111;
  color: #f5f5f5;

  /* Stack card + footer vertically */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

/* Hide header on auth screen */
header {
  display: none;
}

/* =========================================
   Main card
========================================= */

#main-center {
  background: #1f1f1f;
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75);
  padding: 3rem 2.5rem 2.5rem;
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;

  /* gap above footer */
  margin-bottom: 1.5rem;
}

/* =========================================
   Footer (outside card)
========================================= */

footer {
  color: #9a9a9a;
  font-size: 0.85rem;
  text-align: center;
  margin-top: 0;
}

footer a {
  color: inherit;
  text-decoration: none;
}

/* =========================================
   Logos
========================================= */

.app-logo {
  width: 96px;
  height: 96px;
  border-radius: 24px;
  margin-bottom: 1.5rem;
  display: block;
  object-fit: cover;
}

/* Center logo on auth screens */
#firebaseui-auth-container .app-logo {
  margin: 0 auto 1.5rem;
}

/* =========================================
   FirebaseUI container + base overrides
========================================= */

#firebaseui-auth-container {
  width: 100%;
  margin: 0 0 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#firebaseui-auth-container .firebaseui-container,
#firebaseui-auth-container .mdl-card,
#firebaseui-auth-container .firebaseui-card-content,
#firebaseui-auth-container .firebaseui-card-actions {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#firebaseui-auth-container,
#firebaseui-auth-container * {
  box-sizing: border-box;
}

/* Titles (Sign in, Create account, Recover password, etc.) */
#firebaseui-auth-container .firebaseui-title,
#firebaseui-auth-container h1,
#firebaseui-auth-container h2 {
  color: #ffffff !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  text-align: center !important;
  margin: 0 0 1.75rem !important;
}

/* Loader text */
#loader {
  text-align: center;
  color: #b0b0b0;
}

/* Entire form column */
#firebaseui-auth-container .firebaseui-form {
  width: 100%;
  margin: 0;
}

/* =========================================
   FIELD SPACING (main control)
========================================= */

/* Zero out random margins FirebaseUI/MDL add */
#firebaseui-auth-container .firebaseui-email,
#firebaseui-auth-container .firebaseui-password,
#firebaseui-auth-container .firebaseui-name,
#firebaseui-auth-container .firebaseui-idp-password {
  margin: 0 !important;
  padding: 0 !important;
}

/* 🔧 Actual vertical gap between input boxes */
#firebaseui-auth-container .firebaseui-textfield.mdl-textfield,
#firebaseui-auth-container .mdl-textfield,
#firebaseui-auth-container .firebaseui-input {
  width: 100% !important;
  margin: 0 0 var(--field-gap) 0 !important;
  padding: 0 !important;
}

/* =========================================
   Unified size for input + primary button
========================================= */

#firebaseui-auth-container .mdl-textfield__input,
#firebaseui-auth-container .firebaseui-button,
#firebaseui-auth-container button.mdl-button--raised.mdl-button--colored {
  width: 100% !important;
  min-width: 0 !important;
  height: 48px !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  font-size: 1rem !important;
}

/* ---------- Input styling (dark theme) ---------- */

#firebaseui-auth-container .firebaseui-textfield.mdl-textfield {
  position: relative; /* for password eye icon */
}

#firebaseui-auth-container .mdl-textfield__input {
  background: #333333 !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: none !important;
  text-align: left;
}

/* No blue outline on focus */
#firebaseui-auth-container .mdl-textfield__input:focus {
  outline: none !important;
}

/* Hide floating label visually */
#firebaseui-auth-container .mdl-textfield__label {
  display: none !important;
}

/* Kill MDL underline */
#firebaseui-auth-container .mdl-textfield__label::after {
  background: transparent !important;
}

/* Placeholder color */
#firebaseui-auth-container .mdl-textfield__input::placeholder {
  color: #b8b8b8 !important;
  opacity: 1 !important;
}

/* =========================================
   Primary button styling
========================================= */

#firebaseui-auth-container .firebaseui-button,
#firebaseui-auth-container button.mdl-button--raised.mdl-button--colored {
  background: #7d1dff !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  text-transform: none !important;
  border: none !important;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  margin: 0 !important;
}

#firebaseui-auth-container .firebaseui-button:hover {
  filter: brightness(1.1);
}

/* Links (e.g. "Forgot password?", "Trouble signing in?") */
#firebaseui-auth-container .firebaseui-link {
  color: #bbbbbb !important;
}

/* Helper text (Recover password instructions) */
#firebaseui-auth-container .firebaseui-text {
  color: #b0b0b0 !important;
}

/* =========================================
   Actions area
========================================= */

#firebaseui-auth-container .firebaseui-form-actions {
  width: 100% !important;
  display: flex !important;
  flex-direction: column-reverse !important; /* link first in DOM, button visually on top */
  align-items: stretch !important;
  gap: 0.5rem !important;
}

/* Full-width primary action button (Sign In, Save, Send, etc.) */
#firebaseui-auth-container .firebaseui-form-actions .firebaseui-button,
#firebaseui-auth-container .firebaseui-form-actions .firebaseui-id-submit {
  width: 100% !important;
  margin: 0 !important;
}

/* "Trouble signing in?" row – left aligned like original */
#firebaseui-auth-container .firebaseui-form-links {
  width: 100% !important;
  text-align: left !important;
  margin-top: 0.35rem !important;
}

#firebaseui-auth-container .firebaseui-form-links .firebaseui-link {
  color: #bbbbbb !important;
  font-size: 0.95rem !important;
  padding-left: 4px;
}

/* Make FirebaseUI "Cancel" behave like Sign out link */
#firebaseui-auth-container .firebaseui-id-secondary-link,
#firebaseui-auth-container .firebaseui-id-cancel {
  background: none !important;
  color: #ffffff !important;
  font-weight: 400 !important;
  text-align: center !important;
  padding: 0.5rem 0 !important;
  height: auto !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  margin-top: 0.5rem !important;
}

#firebaseui-auth-container .firebaseui-id-secondary-link:hover,
#firebaseui-auth-container .firebaseui-id-cancel:hover {
  opacity: 0.7 !important;
}



/* =========================================
   Error message alignment / spacing
========================================= */

#firebaseui-auth-container .firebaseui-error-wrapper {
  margin-top: 1.1rem !important;
  margin-bottom: 1 !important;
  padding: 0 !important;
}

#firebaseui-auth-container .firebaseui-error {
  display: block;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #ff5c5c;
}

/* =========================================
   Account view (after login)
========================================= */

main {
  display: none; /* JS shows this after sign-in */
  width: 100%;
}

main * {
  text-align: center;
}

/* -----------------------------------------
   Subscribe card + plan buttons
----------------------------------------- */

#subscribe {
  display: none; /* JS toggles */
}

#subscribe-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#subscribe-logo {
  width: 96px;
  height: 96px;
  border-radius: 24px;
  margin-bottom: 1.5rem;
}

#subscribe h2 {
  margin: 0 0 1.5rem;
}

#plans {
  width: 100%;
  margin-top: 0.75rem;
}

/* Plan buttons (annual / monthly) */
.plan-button {
  display: block;
  width: 100%;
  cursor: pointer;
  border-radius: 10px;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25rem;
  margin: 0.4rem 0;
  padding: 0.85rem 1rem;
  border: none;
}

.plan-button-primary {
  background: #7d1dff;
  color: #ffffff;
}

.plan-button-primary:hover {
  filter: brightness(1.1);
}

.plan-button-secondary {
  background: #3a3a3a;
  color: #ffffff;
}

.plan-button-secondary:hover {
  filter: brightness(1.05);
}

/* Link-style button (Sign out) */
.link-button {
  margin-top: 1rem;
  background: none;
  border: none;
  color: #f5f5f5;
  font-size: 0.95rem;
  cursor: pointer;
  padding: 0.4rem 0;
}

.link-button:hover {
  text-decoration: underline;
}

/* -----------------------------------------
   My subscription / account section
----------------------------------------- */

#my-subscription {
  display: none; /* JS toggles */
  margin-top: 1rem;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

#my-subscription h2 {
  margin-top: 0;
}

#my-subscription .app-logo {
  display: block;
  margin: 0 auto 1rem;
  width: 96px;
  height: 96px;
}

#my-subscription button:not(.link-button) {
  display: block;
  width: 100%;
  cursor: pointer;
  background: #7d1dff;
  border: none;
  border-radius: 10px;
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25rem;
  margin: 0.6rem 0;
  padding: 0.85rem 1rem;
}

#my-subscription button:not(.link-button):hover {
  filter: brightness(1.1);
}

button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Link-app button hidden by default; JS toggles */
#link-app {
  display: none;
}


/* =========================================
   Password eye icon – brute-force centering
   (covers all FirebaseUI toggle variants)
========================================= */

/* make sure the field wrapper is the positioning context */
#firebaseui-auth-container .firebaseui-textfield.mdl-textfield,
#firebaseui-auth-container .firebaseui-password {
  position: relative !important;
}

/* give the password input room so text doesn't run under the icon */
#firebaseui-auth-container .firebaseui-password .mdl-textfield__input {
  padding-right: 40px !important;
}

/* this is the actual toggle <a> element */
#firebaseui-auth-container .firebaseui-input-floating-button {
  position: absolute !important;
  right: 12px !important;
  bottom: auto !important;

  /* vertical centering – tweak the -50% if you want it nudged */
  top: 50% !important;
  transform: translateY(-65%) !important;

  width: 48px !important;
  height: 48px !important;
  padding: 0 !important;
  margin: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background-position: center center !important;
  background-repeat: no-repeat !important;
  line-height: 0 !important;
}