/* ====================================================================
   VipRix unified cyan "Create Account" button style.
   Applies to all <button>, .btn, .btn-submit, .btn-primary, .btn-login,
   .btn-logout, .btn-secondary, input[type=submit] across the app.
   ==================================================================== */

button,
.btn,
.btn-submit,
.btn-primary,
.btn-secondary,
.btn-login,
.btn-logout,
.btn-cancel,
.btn-save,
.btn-action,
input[type="submit"],
input[type="button"],
a.btn,
a.btn-primary {
  background: transparent !important;
  border: 2px solid #00d4ff !important;
  color: #fff !important;
  border-radius: 40px !important;
  font-weight: 700 !important;
  font-family: 'Poppins','Inter',sans-serif !important;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: color .3s ease, transform .2s ease, box-shadow .3s ease;
  box-shadow: none !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

button::before,
.btn::before,
.btn-submit::before,
.btn-primary::before,
.btn-secondary::before,
.btn-login::before,
.btn-logout::before,
.btn-cancel::before,
.btn-save::before,
.btn-action::before,
input[type="submit"]::before,
input[type="button"]::before,
a.btn::before,
a.btn-primary::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(#0d0d1a, #00d4ff, #0d0d1a, #00d4ff);
  background-size: 100% 300%;
  background-position: 0 0;
  transition: background-position .5s ease;
  z-index: -1;
  border-radius: inherit;
}

button:hover::before,
.btn:hover::before,
.btn-submit:hover::before,
.btn-primary:hover::before,
.btn-secondary:hover::before,
.btn-login:hover::before,
.btn-logout:hover::before,
.btn-cancel:hover::before,
.btn-save:hover::before,
.btn-action:hover::before,
input[type="submit"]:hover::before,
input[type="button"]:hover::before,
a.btn:hover::before,
a.btn-primary:hover::before {
  background-position: 0 100%;
}

button:hover,
.btn:hover,
.btn-submit:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-login:hover,
.btn-logout:hover,
.btn-cancel:hover,
.btn-save:hover,
.btn-action:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
a.btn:hover,
a.btn-primary:hover {
  color: #fff !important;
  transform: none !important;
}

button:disabled,
.btn:disabled,
.btn-submit:disabled,
input[type="submit"]:disabled,
input[type="button"]:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* Exemptions: keep small UI controls native — toggles, icon-only, tabs, mobile menu */
.theme-toggle,
.theme-toggle::before,
.mobile-toggle,
.mobile-toggle::before,
.auth-tab,
.auth-tab::before,
.tab,
.tab::before,
.close,
.close::before,
.btn-icon,
.btn-icon::before,
.modal-close,
.modal-close::before,
button.icon-only,
button.icon-only::before {
  background: transparent !important;
  border: none !important;
  border-radius: inherit !important;
  color: inherit !important;
  font-weight: inherit !important;
  box-shadow: none !important;
  position: relative !important;
  inset: auto !important;
}
.theme-toggle::before,
.mobile-toggle::before,
.auth-tab::before,
.tab::before,
.close::before,
.btn-icon::before,
.modal-close::before,
button.icon-only::before {
  display: none !important;
  content: none !important;
}
/* Restore the active auth-tab cyan fill */
.auth-tab.active {
  background: linear-gradient(45deg,#00d4ff,#00b8d4) !important;
  color: #fff !important;
  font-weight: 700 !important;
}
.auth-tab { color: #fff !important; font-weight: 700 !important; }
.auth-tab:hover:not(.active) { color: #00d4ff !important; }
/* All buttons + nav links bold */
button, .btn, a.btn, .btn-submit, .btn-primary, .btn-login, .nav-links a, input[type="submit"], input[type="button"], .nav-cta { font-weight: 700 !important; }
/* Restore the theme-toggle pill background (handled by its own rules) */
.theme-toggle {
  background: rgba(99,91,255,.12) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 40px !important;
}
html[data-theme="dark"] .theme-toggle {
  background: rgba(0,212,255,.22) !important;
  border-color: rgba(0,212,255,.5) !important;
}

/* ===========================================================
   ALL FORMS — match customer-auth.html aesthetic in BOTH modes.
   Dark navy card, cyan border + glow, white text, cyan accents.
   =========================================================== */
.auth-card,
.login-card,
#login-screen .login-card,
.card,
.form-card,
.reset-card,
.contact-form-wrap,
.modal-content {
  background: #0d0d1a !important;
  border: 2px solid #00d4ff !important;
  box-shadow: 0 0 25px #00d4ff !important;
  border-radius: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  color: #fff !important;
}

/* Diagonal cyan-tinted shimmer (same as auth-card::before) */
.auth-card::before,
.login-card::before,
#login-screen .login-card::before,
.card::before,
.form-card::before,
.reset-card::before,
.contact-form-wrap::before,
.modal-content::before {
  content: '';
  position: absolute;
  right: -40%;
  top: -40%;
  width: 140%;
  height: 140%;
  background: linear-gradient(45deg, #0d0d1a 40%, rgba(0,212,255,.15) 55%, transparent 70%);
  transform: rotate(10deg);
  pointer-events: none;
  z-index: 0;
}
.auth-card > *,
.login-card > *,
#login-screen .login-card > *,
.card > *,
.form-card > *,
.reset-card > *,
.contact-form-wrap > *,
.modal-content > * { position: relative; z-index: 1; }

/* Headings, paragraphs, labels — white in all forms */
.auth-card h2, .auth-card h3, .auth-card h4, .auth-card p, .auth-card label, .auth-card span,
.login-card h2, .login-card h3, .login-card h4, .login-card p, .login-card label, .login-card span,
.card h2, .card h3, .card h4, .card p, .card label, .card span,
.contact-form-wrap h2, .contact-form-wrap h3, .contact-form-wrap h4, .contact-form-wrap p, .contact-form-wrap label, .contact-form-wrap span { color: #fff !important; }
.auth-card .auth-form > p,
.login-card > p,
.card p.sub,
.contact-form-wrap p { color: rgba(255,255,255,.65) !important; }

/* Floating-label / underline inputs — transparent w/ cyan underline */
.auth-card input, .auth-card textarea, .auth-card select,
.login-card input, .login-card textarea, .login-card select,
.card input, .card textarea, .card select,
.contact-form-wrap input, .contact-form-wrap textarea, .contact-form-wrap select {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid rgba(255,255,255,.4) !important;
  border-radius: 0 !important;
  color: #fff !important;
  padding: .65rem 0 !important;
  font-weight: 500;
}
.auth-card input:focus, .auth-card input:valid, .auth-card textarea:focus,
.login-card input:focus, .login-card input:valid, .login-card textarea:focus,
.card input:focus, .card input:valid, .card textarea:focus,
.contact-form-wrap input:focus, .contact-form-wrap input:valid, .contact-form-wrap textarea:focus { border-bottom-color: #00d4ff !important; }
.auth-card input::placeholder, .auth-card textarea::placeholder,
.login-card input::placeholder, .login-card textarea::placeholder,
.card input::placeholder, .card textarea::placeholder,
.contact-form-wrap input::placeholder, .contact-form-wrap textarea::placeholder { color: rgba(255,255,255,.35) !important; }
.auth-card .field input.field-error,
.login-card .field input.field-error { border-bottom-color: #ff5e78 !important; }
.auth-card .field-warn { color: #ff5e78 !important; }

/* Submit / login buttons inside cards — cyan border + gradient sweep */
.auth-card .btn-submit,
.login-card .btn-login,
.login-card .btn-submit,
.card .btn,
.contact-form-wrap .submit-btn,
.contact-form-wrap button[type="submit"] {
  background: transparent !important;
  border: 2px solid #00d4ff !important;
  color: #fff !important;
  border-radius: 40px !important;
  font-weight: 700 !important;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* Auth tabs — keep customer-auth styling everywhere */
.auth-tabs { border: 1px solid rgba(0,212,255,.35) !important; background: transparent !important; border-radius: 40px !important; overflow: hidden !important; padding: 4px !important; gap: 4px !important; }

/* Links inside forms (e.g. forgot password) */
.auth-card .auth-links a,
.login-card a,
.card .back { color: #00d4ff !important; }

/* Forgot section divider */
.auth-card .forgot-section { border-top-color: rgba(0,212,255,.25) !important; }
.auth-card .password-hint { color: rgba(255,255,255,.5) !important; }

/* Match Create Account radius (40px) on Sign Up nav button, Sign In button, theme toggle */
.nav-cta,
a.nav-cta,
.btn.btn-primary.nav-cta,
#login-btn,
#signup-btn,
.btn-login,
.btn-submit,
.theme-toggle {
  border-radius: 40px !important;
}