/* ====================================================================
   VipRix — Unified button system (Lime accent variant).
   Applies to all interactive elements for visual consistency.
   ==================================================================== */

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: 1.5px solid var(--accent, #00d4ff) !important;
  color: var(--text, #FAFAFA) !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-family: 'DM Sans', 'Inter', system-ui, sans-serif !important;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: color .25s ease, transform .2s ease, box-shadow .3s ease, background .25s 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(
    180deg,
    transparent 0%,
    rgba(0, 212, 255, 0.15) 50%,
    transparent 100%
  );
  background-size: 100% 250%;
  background-position: 0 100%;
  transition: background-position .4s 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 0;
}

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: var(--accent, #00d4ff) !important;
  transform: none !important;
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.12) !important;
}

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

/* Exemptions: keep small UI controls native */
.theme-toggle,
.theme-toggle::before,
.mobile-toggle,
.mobile-toggle::before,
.tab,
.tab::before,
.close,
.close::before,
.btn-icon,
.btn-icon::before,
.modal-close,
.modal-close::before,
button.icon-only,
button.icon-only::before,
.testimonial-dot,
.testimonial-dot::before,
.filter-btn,
.filter-btn::before,
.back-to-top,
.back-to-top::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,
.tab::before,
.close::before,
.btn-icon::before,
.modal-close::before,
button.icon-only::before,
.testimonial-dot::before,
.filter-btn::before,
.back-to-top::before {
  display: none !important;
  content: none !important;
}

/* Restore filter button styles */
.filter-btn {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
  border-radius: 99px !important;
  font-weight: 600 !important;
}
.filter-btn:hover {
  border-color: var(--border-strong) !important;
  color: var(--text) !important;
}
.filter-btn.active {
  background: var(--accent, #00d4ff) !important;
  border-color: var(--accent, #00d4ff) !important;
  color: #0d0d1a !important;
}

/* Restore back-to-top */
.back-to-top {
  background: var(--accent, #00d4ff) !important;
  border: none !important;
  color: #0d0d1a !important;
  border-radius: 50% !important;
}

/* Restore testimonial dots */
.testimonial-dot {
  background: var(--surface-2, #1C1C1F) !important;
  border: none !important;
  border-radius: 50% !important;
}
.testimonial-dot.active {
  background: var(--accent, #00d4ff) !important;
  border-radius: 99px !important;
}

/* Auth-tab styling is handled in the "Auth tabs" section below */

/* Restore theme-toggle styling */
.theme-toggle {
  background: var(--surface-2, #1C1C1F) !important;
  border: 1px solid var(--border, rgba(255,255,255,0.07)) !important;
  border-radius: 99px !important;
}
.theme-toggle:hover {
  border-color: var(--accent-border, rgba(0,212,255,0.22)) !important;
}
html[data-theme="dark"] .theme-toggle {
  background: var(--surface-2, #1C1C1F) !important;
  border-color: var(--accent-border, rgba(0,212,255,0.22)) !important;
}

/* Bold nav links + buttons */
.nav-links a { font-weight: 500 !important; }
.nav-cta { font-weight: 600 !important; }

/* =========================================================
   ALL FORMS — consistent dark card with accent border/glow
   ========================================================= */
.auth-card,
.login-card,
#login-screen .login-card,
.card,
.form-card,
.reset-card,
.contact-form-wrap,
.modal-content {
  background: var(--surface, #141416) !important;
  border: 1.5px solid var(--accent, #00d4ff) !important;
  box-shadow: 0 0 30px rgba(0, 212, 255, 0.08) !important;
  border-radius: var(--radius-xl, 24px) !important;
  position: relative !important;
  overflow: hidden !important;
  color: var(--text, #FAFAFA) !important;
}

/* Shimmer overlay */
.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, var(--surface, #141416) 40%, rgba(0, 212, 255, 0.06) 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; }

/* Form text colors */
.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: var(--text, #FAFAFA) !important;
}
.auth-card .auth-form > p,
.login-card > p,
.card p.sub,
.contact-form-wrap p { color: var(--text-muted, #A1A1AA) !important; }

/* Form inputs — rounded for auth cards, underline for others */
.auth-card input, .auth-card select {
  background: transparent !important;
  border: 2px solid #2c4766 !important;
  border-radius: 40px !important;
  color: #fff !important;
  padding: 0 20px !important;
  height: 50px !important;
  font-weight: 500;
  font-family: 'Poppins', 'Inter', sans-serif !important;
}
.auth-card textarea {
  background: transparent !important;
  border: 2px solid #2c4766 !important;
  border-radius: 20px !important;
  color: #fff !important;
  padding: 16px 20px !important;
  font-weight: 500;
  font-family: 'Poppins', 'Inter', sans-serif !important;
}
.auth-card input:focus, .auth-card select:focus, .auth-card textarea:focus {
  border-color: #0ef !important;
}
.auth-card .field input.field-error {
  border-color: #ff5e78 !important;
}
.auth-card .field-warn { color: #ff5e78 !important; }

/* Login card inputs — underline style (dashboard/employee) */
.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: 1.5px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 0 !important;
  color: var(--text, #FAFAFA) !important;
  padding: .65rem 0 !important;
  font-weight: 500;
}
.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: var(--accent, #00d4ff) !important;
}
.login-card .field input.field-error { border-bottom-color: #ff5e78 !important; }

/* Submit buttons inside cards — match nav-cta Sign Up style */
.auth-card .btn-submit,
.login-card .btn-login,
.login-card .btn-submit,
.card .btn,
.card .btn-submit,
.contact-form-wrap .submit-btn,
.contact-form-wrap button[type="submit"] {
  background: transparent !important;
  border: 1.5px solid var(--accent, #00d4ff) !important;
  color: var(--text, #FAFAFA) !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  width: 100%;
  padding: .95rem 1.5rem !important;
  font-size: .95rem !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: color .25s ease, transform .2s ease, box-shadow .3s ease, background .25s ease;
}
.auth-card .btn-submit:hover,
.login-card .btn-login:hover,
.login-card .btn-submit:hover,
.card .btn:hover,
.card .btn-submit:hover,
.contact-form-wrap .submit-btn:hover,
.contact-form-wrap button[type="submit"]:hover {
  color: var(--accent, #00d4ff) !important;
  transform: none !important;
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.12) !important;
}

/* Auth tabs — match nav-cta Sign Up style */
.auth-tabs {
  border: none !important;
  background: transparent !important;
  border-radius: 10px !important;
  overflow: visible !important;
  padding: 0 !important;
  gap: 10px !important;
  display: flex !important;
}
.auth-tab {
  border-radius: 10px !important;
  background: transparent !important;
  border: 1.5px solid var(--accent, #00d4ff) !important;
  color: var(--text, #FAFAFA) !important;
  font-weight: 600 !important;
  padding: .65rem 1.5rem !important;
  position: relative;
  overflow: hidden;
}
.auth-tab::before {
  content: '' !important;
  position: absolute !important;
  inset: -2px !important;
  background: linear-gradient(180deg, transparent 0%, rgba(0,212,255,.15) 50%, transparent 100%) !important;
  background-size: 100% 250% !important;
  background-position: 0 100% !important;
  transition: background-position .4s ease !important;
  z-index: -1 !important;
  border-radius: inherit !important;
}
.auth-tab:hover::before {
  background-position: 0 0 !important;
}
.auth-tab.active {
  background: transparent !important;
  border-color: var(--accent, #00d4ff) !important;
  color: var(--accent, #00d4ff) !important;
  font-weight: 700 !important;
  box-shadow: 0 0 20px rgba(0,212,255,.12) !important;
}
.auth-tab:hover:not(.active) {
  color: var(--accent, #00d4ff) !important;
  transform: none !important;
  box-shadow: 0 0 20px rgba(0,212,255,.12) !important;
}

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

/* Form dividers */
.auth-card .forgot-section { border-top-color: rgba(0, 212, 255, 0.15) !important; }
.auth-card .password-hint { color: var(--text-subtle, #71717A) !important; }

/* Light mode form adjustments — auth pages keep dark aesthetic */
html:not([data-theme="dark"]) .login-card,
html:not([data-theme="dark"]) .card,
html:not([data-theme="dark"]) .form-card,
html:not([data-theme="dark"]) .reset-card,
html:not([data-theme="dark"]) .contact-form-wrap,
html:not([data-theme="dark"]) .modal-content {
  background: var(--surface, #FFFFFF) !important;
  border-color: var(--accent, #0097b2) !important;
  box-shadow: 0 0 30px rgba(0, 151, 178, 0.08) !important;
}
html:not([data-theme="dark"]) .login-card input,
html:not([data-theme="dark"]) .contact-form-wrap input,
html:not([data-theme="dark"]) .contact-form-wrap textarea {
  color: var(--text, #18181B) !important;
  border-bottom-color: rgba(0, 0, 0, 0.15) !important;
}
html:not([data-theme="dark"]) .contact-form-wrap input:focus,
html:not([data-theme="dark"]) .contact-form-wrap textarea:focus {
  border-bottom-color: var(--accent, #0097b2) !important;
}
html:not([data-theme="dark"]) .contact-form-wrap label,
html:not([data-theme="dark"]) .contact-form-wrap h2,
html:not([data-theme="dark"]) .contact-form-wrap h3 {
  color: var(--text, #18181B) !important;
}

/* Light mode buttons — transparent bg, accent border, dark text */
html:not([data-theme="dark"]) .auth-card .btn-submit,
html:not([data-theme="dark"]) .login-card .btn-login,
html:not([data-theme="dark"]) .login-card .btn-submit,
html:not([data-theme="dark"]) .card .btn-submit,
html:not([data-theme="dark"]) .contact-form-wrap .submit-btn,
html:not([data-theme="dark"]) .contact-form-wrap button[type="submit"] {
  background: transparent !important;
  border-color: var(--accent, #0097b2) !important;
  color: var(--text, #18181B) !important;
}
html:not([data-theme="dark"]) .auth-card .btn-submit:hover,
html:not([data-theme="dark"]) .login-card .btn-login:hover,
html:not([data-theme="dark"]) .login-card .btn-submit:hover,
html:not([data-theme="dark"]) .card .btn-submit:hover,
html:not([data-theme="dark"]) .contact-form-wrap .submit-btn:hover,
html:not([data-theme="dark"]) .contact-form-wrap button[type="submit"]:hover {
  color: var(--accent, #0097b2) !important;
  box-shadow: 0 0 20px rgba(0, 151, 178, 0.12) !important;
}