/* Import your fonts if not already in the main app */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Roboto:wght@300;400;500&display=swap');

/* Variables to match main theme */
:root {
  --neon-pink: #ff00ff;
  --neon-blue: #00ffff;
  --neon-purple: #b967ff;
  --neon-green: #00ff9f;
  --dark-bg: #0b0b1a;
  --darker-bg: #050514;
  --grid-color: rgba(121, 0, 255, 0.2);
  --header-font: 'Orbitron', sans-serif;
  --body-font: 'Roboto', sans-serif;
}

#okta-sign-in {
  margin-top: 10px;
}

/* Okta Container */
div.okta-widget-theme-vaporwave #okta-sign-in.auth-container {
  background-color: transparent !important;
  border: none !important;
  /*border: 1px solid var(--neon-purple) !important;*/
  border-radius: 0 !important;
  /*box-shadow: 0 0 15px rgba(185, 103, 255, 0.5) !important;*/
  font-family: var(--body-font) !important;
  max-width: 500px !important;
  margin: 0 auto !important;
  position: relative !important;
  overflow: hidden !important;
}

div.okta-widget-theme-vaporwave #okta-sign-in.auth-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*
  background-image: 
    linear-gradient(0deg, var(--grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
  background-size: 25px 25px;
  */
  z-index: -1;
  opacity: 0.3;
}

#okta-sign-in h3, #okta-sign-in h2 {
  text-transform: initial;
  letter-spacing: normal;
}

/* Okta Header */
div.okta-widget-theme-vaporwave #okta-sign-in .auth-header {
  /*
  display:none;
  visibility:hidden;
  */
  /*
  background-color: var(--darker-bg) !important;
  */
  border-bottom: 2px solid var(--neon-blue) !important;
}

div.okta-widget-theme-vaporwave #okta-sign-in .auth-org-logo {
  -webkit-filter: drop-shadow(2px 3px 3px rgba(255, 0, 255, 0.8));
  filter: drop-shadow(2px 3px 3px rgba(255, 0, 255, 0.8));
  max-width: 200px !important;
  max-height: 60px !important;
  margin: 0 auto !important;
}

/* Okta Form Elements */
div.okta-widget-theme-vaporwave #okta-sign-in .o-form-head {
  font-family: var(--header-font) !important;
  color: white !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  text-shadow: 
    0 0 5px var(--neon-blue) !important,
    0 0 10px var(--neon-blue) !important;
  text-align: center !important;
  margin-bottom: 20px !important;

}

div.okta-widget-theme-vaporwave #okta-sign-in .o-form-fieldset {
  border: none !important;
}

div.okta-widget-theme-vaporwave #okta-sign-in .o-form-label {
  color: white !important;
  font-weight: 500 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  font-size: 0.8rem !important;
}

div.okta-widget-theme-vaporwave #okta-sign-in .o-form-input {
  /*background-color: rgba(5, 5, 20, 0.8) !important;*/
  border: none !important;
  border-radius: 0 !important;
  color: white !important;
  padding: 0 !important;
  transition: all 0.3s ease !important;
}

div.okta-widget-theme-vaporwave #okta-sign-in .o-form-input:focus {
  border-color: var(--neon-blue) !important;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.5) !important;
  outline: none !important;
}

/* Okta Buttons */
div.okta-widget-theme-vaporwave #okta-sign-in .button,
div.okta-widget-theme-vaporwave #okta-sign-in .button-primary {
  background: transparent !important;
  border: 2px solid var(--neon-blue) !important;
  color: white !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  font-weight: bold !important;
  padding: 10px 20px !important;
  border-radius: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  z-index: 1 !important;
  transition: all 0.3s ease !important;
}

div.okta-widget-theme-vaporwave #okta-sign-in .button-primary:hover {
  color: white !important;
  background-color: rgba(0, 255, 255, 0.2) !important;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.5) !important;
}

div.okta-widget-theme-vaporwave #okta-sign-in .button.link-button {
  border: none !important;
  color: var(--neon-pink) !important;
  background: none !important;
  text-shadow: 0 0 5px var(--neon-pink) !important;
}

div.okta-widget-theme-vaporwave #okta-sign-in .button.link-button:hover {
  text-shadow: 0 0 8px var(--neon-pink) !important;
  background: none !important;
}

/* Okta Error Messages */
div.okta-widget-theme-vaporwave #okta-sign-in .o-form-error-container .o-form-error {
  background-color: rgba(255, 0, 255, 0.1) !important;
  border: 1px solid var(--neon-pink) !important;
  border-radius: 0 !important;
  color: white !important;
}

/* Okta Footer */
div.okta-widget-theme-vaporwave #okta-sign-in .auth-footer {
  /*background-color: var(--darker-bg) !important;*/
  border-top: 2px solid var(--neon-blue) !important;
  padding: 10px !important;
}

/* Okta Social Auth (if used) */
div.okta-widget-theme-vaporwave #okta-sign-in .social-auth-button {
  background: transparent !important;
  border: 2px solid var(--neon-purple) !important;
  color: white !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  margin-bottom: 10px !important;
  border-radius: 0 !important;
  transition: all 0.3s ease !important;
}

div.okta-widget-theme-vaporwave #okta-sign-in .social-auth-button:hover {
  background-color: rgba(185, 103, 255, 0.2) !important;
  box-shadow: 0 0 15px rgba(185, 103, 255, 0.5) !important;
}

/* Okta MFA Challenge (if used) */
div.okta-widget-theme-vaporwave #okta-sign-in .mfa-verify {
  background-color: transparent !important;
  /*
  background-color: rgba(11, 11, 26, 0.7) !important;
  */
}

div.okta-widget-theme-vaporwave #okta-sign-in .mfa-heading {
  font-family: var(--header-font) !important;
  color: white !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  text-shadow: 0 0 5px var(--neon-purple) !important;
}

/* Animation for sign-in widget appearance */
div.okta-widget-theme-vaporwave #okta-sign-in.auth-container {
  animation: glow-enter 1s ease-out forwards !important;
}

@keyframes glow-enter {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Additional Form Styling */
div.okta-widget-theme-vaporwave #okta-sign-in input[type="checkbox"] {
  border: 1px solid var(--neon-blue) !important;
  background-color: var(--darker-bg) !important;
}

div.okta-widget-theme-vaporwave #okta-sign-in input[type="checkbox"]:checked {
  background-color: var(--neon-blue) !important;
}

/* Password toggle button */
div.okta-widget-theme-vaporwave #okta-sign-in .password-toggle {
  color: var(--neon-green) !important;
}

/* Spinner Animation */
div.okta-widget-theme-vaporwave #okta-sign-in .spinner {
  border-color: var(--neon-blue) !important;
  border-top-color: var(--neon-pink) !important;
}

/* Separation lines 
div.okta-widget-theme-vaporwave #okta-sign-in .separation-line {

  height: 2px !important;
  margin: 20px 0 !important;
  border: none !important;
}
*/

/* Okta Factor List */
div.okta-widget-theme-vaporwave #okta-sign-in .factors-dropdown {
  background-color: rgba(5, 5, 20, 0.8) !important;
  border: 1px solid var(--neon-purple) !important;
  border-radius: 0 !important;
}

div.okta-widget-theme-vaporwave #okta-sign-in .dropdown-list-option {
  border-bottom: 1px solid var(--neon-purple) !important;
  color: white !important;
}

div.okta-widget-theme-vaporwave #okta-sign-in .dropdown-list-option:hover {
  background-color: rgba(185, 103, 255, 0.2) !important;
}

/* Registration form (if used) */
div.okta-widget-theme-vaporwave #okta-sign-in .registration-container {
  border-top: 2px solid var(--neon-pink) !important;
  margin-top: 20px !important;
  padding-top: 20px !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  div.okta-widget-theme-vaporwave #okta-sign-in.auth-container {
    width: 90% !important;
    margin: 0 auto !important;
  }
  
  div.okta-widget-theme-vaporwave #okta-sign-in .o-form-head {
    font-size: 1.2rem !important;
  }
}

/* Additional overrides for transparent background */
div.okta-widget-theme-vaporwave #okta-sign-in .auth-content {
  background-color: transparent !important;
}

div.okta-widget-theme-vaporwave #okta-sign-in h3, 
div.okta-widget-theme-vaporwave #okta-sign-in h2, 
div.okta-widget-theme-vaporwave #okta-sign-in h1 {
  letter-spacing: inherit !important;
  text-transform: inherit !important;
}
div.okta-widget-theme-vaporwave #okta-sign-in .auth-content-inner {
  background: none !important;
  /* background-color: rgba(11, 11, 26, 0.7) !important; */
}

/* Override any Okta default background colors */
div.okta-widget-theme-vaporwave #okta-sign-in div, 
div.okta-widget-theme-vaporwave #okta-sign-in section,
div.okta-widget-theme-vaporwave #okta-sign-in form,
div.okta-widget-theme-vaporwave #okta-sign-in .o-form-content {
  background-color: transparent !important;
}

/* Fix for "or" text with white background */
div.okta-widget-theme-vaporwave #okta-sign-in .auth-divider {
  background-color: transparent !important;
}

div.okta-widget-theme-vaporwave #okta-sign-in .auth-divider .auth-divider-text {
  background-color: transparent !important;
  color: white !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

/* Additional selectors to ensure complete coverage for removing borders and rounded corners */
div.okta-widget-theme-vaporwave #okta-sign-in .o-form-fieldset-container,
div.okta-widget-theme-vaporwave #okta-sign-in .text-input,
div.okta-widget-theme-vaporwave #okta-sign-in .chzn-container-single .chzn-single,
div.okta-widget-theme-vaporwave #okta-sign-in .footer-container,
div.okta-widget-theme-vaporwave #okta-sign-in .body-container {
  border-radius: 0 !important;
  border: none !important;
}

/* Important overrides for any Okta styling that might use !important themselves */
div.okta-widget-theme-vaporwave #okta-sign-in *[class*="border-radius"],
div.okta-widget-theme-vaporwave #okta-sign-in *[style*="border-radius"] {
  border-radius: 0 !important;
}

div.okta-widget-theme-vaporwave #okta-sign-in *[class*="border"],
div.okta-widget-theme-vaporwave #okta-sign-in *[style*="border"] {
  border: none !important;
}

/* Additional rules to ensure text inputs have no rounded corners or borders */
div.okta-widget-theme-vaporwave #okta-sign-in input[type="text"],
div.okta-widget-theme-vaporwave #okta-sign-in input[type="password"],
div.okta-widget-theme-vaporwave #okta-sign-in input[type="email"],
div.okta-widget-theme-vaporwave #okta-sign-in input[type="tel"],
div.okta-widget-theme-vaporwave #okta-sign-in select,
div.okta-widget-theme-vaporwave #okta-sign-in textarea,
div.okta-widget-theme-vaporwave #okta-sign-in .custom-checkbox,
div.okta-widget-theme-vaporwave #okta-sign-in .o-form-input-name-username input,
div.okta-widget-theme-vaporwave #okta-sign-in .o-form-input-name-password input {
  /*
  border: var(--neon-blue) 1px solid  !important;
  */
  border: linear-gradient(90deg, 
    transparent 0%, 
    var(--neon-pink) 20%, 
    var(--neon-blue) 50%, 
    var(--neon-purple) 80%, 
    transparent 100%) 1px solid !important;
  border-radius: 0 !important;
  /*background-color: rgba(5, 5, 20, 0.8) !important;*/
  color: white !important;
}

/* Ensure input containers don't have borders or rounded corners */
div.okta-widget-theme-vaporwave #okta-sign-in .input-container,
div.okta-widget-theme-vaporwave #okta-sign-in .okta-form-input-field,
div.okta-widget-theme-vaporwave #okta-sign-in .input-icon-container {
  border: none !important;
  border-radius: 0 !important;
}

/* Fix for any background colors on input boxes */
div.okta-widget-theme-vaporwave #okta-sign-in .input-fix,
div.okta-widget-theme-vaporwave #okta-sign-in .input-tooltip,
div.okta-widget-theme-vaporwave #okta-sign-in .input-wrapper,
div.okta-widget-theme-vaporwave #okta-sign-in .o-form-control {
  border-radius: 0 !important;
  border: none !important;
  background-color: rgba(5, 5, 20, 0.8) !important;
}

/* Fix padding for specific input fields */
div.okta-widget-theme-vaporwave #okta-sign-in .okta-form-input-field input, 
div.okta-widget-theme-vaporwave #okta-sign-in .o-form-input-name-username input, 
div.okta-widget-theme-vaporwave #okta-sign-in .o-form-input-name-password input,
div.okta-widget-theme-vaporwave #okta-sign-in input[type="text"],
div.okta-widget-theme-vaporwave #okta-sign-in input[type="password"],
div.okta-widget-theme-vaporwave #okta-sign-in input[type="email"] {
  padding: 8px 10px !important;
}
div.okta-widget-theme-vaporwave #okta-sign-in div.separation-line::before {
  border: none !important;

  background: linear-gradient(90deg, 
    transparent 0%, 
    var(--neon-pink) 20%, 
    var(--neon-blue) 50%, 
    var(--neon-purple) 80%, 
    transparent 100%) !important;
    height: 1px;
  
    /*border-top: 1px solid #ddd;*/
/*  
      border-top: 2px;
      border-left: 0;
    border-right: 0;
    border-bottom: 0;
  
  font-size: 13px;
    content: "";
    margin: 0 auto;
    position: absolute;
    top: 16px !important;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
*/
  
}
div.okta-widget-theme-vaporwave #okta-sign-in .separation-line span {
  background-color: var(--darker-bg) !important;
  border: 1px solid #8d8d8d !important;
  border-top: none !important;
  border-bottom: none !important;
  color: #ffffff !important;
}

div.okta-widget-theme-vaporwave {
  min-height: 585px;
}

div.okta-widget-theme-vaporwave #okta-sign-in .authenticator-verify-list .authenticator-description>di {
  margin: 0;
}
div.okta-widget-theme-vaporwave #okta-sign-in .button {
  padding: 0 !important;
  letter-spacing: normal !important;
}
div.okta-widget-theme-vaporwave #okta-sign-in .button.link-button {
  display: inherit;  
}
div.okta-widget-theme-vaporwave #okta-sign-in.auth-container .button {
  box-shadow: none;  
}
div.okta-widget-theme-vaporwave #okta-sign-in .piv-button.link-button {
  background-color: black;
  border: 2px solid var(--neon-pink);
  color: var(--neon-pink);
  border-radius: 0;
}