/* Font Import */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');


html, body {
  height: 100%;
  overflow: hidden !important;
  margin: 0;
  padding: 0;
  scrollbar-width: none; /* Firefox only, not supported in Chrome < 121, Safari, Samsung Internet */
  }
  
  /* Hide scrollbar for Chrome, Safari and Opera */
   body::-webkit-scrollbar {
    display: none; /* WebKit browsers */
  }
  
  /* Hide scrollbar for IE, Edge and Firefox */
  body {
    -ms-overflow-style: none;  /* IE and Edge */

    &::-webkit-scrollbar {
      display: none;
    }
  }
  .glass-surface {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity 0.26s ease-out;
}

.glass-surface__filter {
  width: 100%;
  height: 100%;
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: -1;
}

.glass-surface__content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border-radius: inherit;
  position: relative;
  z-index: 1;
}

.glass-surface--svg {
  background: light-dark(hsl(0 0% 100% / var(--glass-frost, 0)), hsl(0 0% 0% / var(--glass-frost, 0)));
  backdrop-filter: var(--filter-id, url(#glass-filter)) saturate(var(--glass-saturation, 1));
  box-shadow:
    0 0 2px 1px light-dark(color-mix(in oklch, black, transparent 85%), color-mix(in oklch, white, transparent 65%))
      inset,
    0 0 10px 4px light-dark(color-mix(in oklch, black, transparent 90%), color-mix(in oklch, white, transparent 85%))
      inset,
    0px 4px 16px rgba(17, 17, 26, 0.05),
    0px 8px 24px rgba(17, 17, 26, 0.05),
    0px 16px 56px rgba(17, 17, 26, 0.05),
    0px 4px 16px rgba(17, 17, 26, 0.05) inset,
    0px 8px 24px rgba(17, 17, 26, 0.05) inset,
    0px 16px 56px rgba(17, 17, 26, 0.05) inset;
}

.glass-surface--fallback {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px) saturate(1.8) brightness(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.8) brightness(1.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 8px 32px 0 rgba(31, 38, 135, 0.2),
    0 2px 16px 0 rgba(31, 38, 135, 0.1),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.2);
}

@media (prefers-color-scheme: dark) {
  .glass-surface--fallback {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px) saturate(1.8) brightness(1.2);
    -webkit-backdrop-filter: blur(12px) saturate(1.8) brightness(1.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow:
      inset 0 1px 0 0 rgba(255, 255, 255, 0.2),
      inset 0 -1px 0 0 rgba(255, 255, 255, 0.1);
  }
}

@supports not (backdrop-filter: blur(10px)) {
  .glass-surface--fallback {
    background: rgba(255, 255, 255, 0.4);
    box-shadow:
      inset 0 1px 0 0 rgba(255, 255, 255, 0.5),
      inset 0 -1px 0 0 rgba(255, 255, 255, 0.3);
  }

  .glass-surface--fallback::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.15);
    border-radius: inherit;
    z-index: -1;
  }
}

@supports not (backdrop-filter: blur(10px)) {
  @media (prefers-color-scheme: dark) {
    .glass-surface--fallback {
      background: rgba(0, 0, 0, 0.4);
    }

    .glass-surface--fallback::before {
      background: rgba(255, 255, 255, 0.05);
    }
  }
}

.glass-surface:focus-visible {
  outline: 2px solid light-dark(#007aff, #0a84ff);
  outline-offset: 2px;
}



body.dark-theme input, body.dark-theme textarea {
  background: #1e1e1e;
  color: #fff;
  border: 1px solid #444;
}
body.dark-theme .custom-alert.success {
  background: #009966;
}
body.dark-theme .custom-alert.error {
  background: #cc0000;
}

/* Light Theme */
body.light-theme {
  background: #f6f6f6;
  color: #222;
}
body.light-theme input, body.light-theme textarea {
  background: #fff;
  color: #000;
  border: 1px solid #ccc;
}
body.light-theme .custom-alert.success {
  background: #00cc88;
}
body.light-theme .custom-alert.error {
  background: #ff4444;
}

/* For WebKit (Chrome, Edge, Safari) */
body::-webkit-scrollbar {
  display: none;
}
/* Reset Styles */
/* This resets the default styles for all elements to ensure consistency across browsers */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* font-family: 'Montserrat', sans-serif; */
}

body {

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 100vh;
  color: #fff;
}
body {
  background: linear-gradient(120deg, #111, #222, #333, #444, #555, #666, #555, #444, #333, #222, #111);
  background-size: 2000% 2000%;
  animation: gradientShift 60s ease-in-out infinite;
}

/* Advanced, smooth gradient animation */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  25% {
    background-position: 50% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  75% {
    background-position: 50% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}


.container {
  background-color: #1e1e1e;
  border-radius: 30px;
  box-shadow: 0 5px 25px rgba(255, 255, 255, 0.05);
  position: relative;
  overflow: hidden;
  width: 768px;
  max-width: 100%;
  min-height: 480px;
  border: 1px solid #000000;
  margin: 4%;
}

.container p,
.container span,
.container a {
  color: #ccc;
}

.container a {
  text-decoration: none;
  margin: 15px 0 10px;
}

.container button {
  background-color: #fff;
  color: #000;
  font-size: 12px;
  padding: 10px 45px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-top: 10px;
  cursor: pointer;
  transition: 0.3s ease;
}

.container button:hover {
  background-color: #ccc;
  color: #000;
}

.container button.hidden {
  background-color: transparent;
  border-color: #fff;
  color: #fff;
}

.container form {
  background-color: #1e1e1e;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 40px;
  height: 100%;
}

.container input {
  background-color: #2c2c2c;
  color: #fff;
  border: none;
  margin: 8px 0;
  padding: 10px 15px;
  font-size: 13px;
  border-radius: 8px;
  width: 100%;
  outline: none;
}

.form-container {
  position: absolute;
  top: 0;
  height: 100%;
  transition: all 0.6s ease-in-out;
}

.sign-in {
  left: 0;
  width: 50%;
  z-index: 2;
}

.container.active .sign-in {
  transform: translateX(100%);
}

.sign-up {
  left: 0;
  width: 50%;
  opacity: 0;
  z-index: 1;
}

.container.active .sign-up {
  transform: translateX(100%);
  opacity: 1;
  z-index: 5;
  animation: move 0.6s;
}

@keyframes move {
  0%, 49.99% {
    opacity: 0;
    z-index: 1;
  }
  50%, 100% {
    opacity: 1;
    z-index: 5;
  }
}

.social-icons {
  margin: 20px 0;
}

.social-icons a {
  border: 1px solid #555;
  border-radius: 20%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0 3px;
  width: 40px;
  height: 40px;
  position: relative;
}

.toggle-container {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  overflow: hidden;
  transition: all 0.6s ease-in-out;
  border-radius: 150px 0 0 100px;
  z-index: 1000;
}

.container.active .toggle-container {
  transform: translateX(-100%);
  border-radius: 0 150px 100px 0;
}

.toggle {
  background: linear-gradient(to right, #333, #111);
  height: 100%;
  color: #fff;
  position: relative;
  left: -100%;
  width: 200%;
  transform: translateX(0);
  transition: all 0.6s ease-in-out;
}

.container.active .toggle {
  transform: translateX(50%);
  
}

.toggle-panel {
  position: absolute;
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 30px;
  text-align: center;
  top: 0;
  transition: all 0.6s ease-in-out;
}

.toggle-left {
  transform: translateX(-200%);
}

.container.active .toggle-left {
  transform: translateX(0);
}

.toggle-right {
  right: 0;
  transform: translateX(0);
}

.container.active .toggle-right {
  transform: translateX(200%);
}

.social-icons a img {
  width: 24px;
  height: 24px;
}

.home {
  position: absolute;
  top: 20px;
  left: 20px;
  text-decoration: none;
  color: #ccc;
  font-size: 18px;
  font-weight: bold;
}

/* Gradient Background Animation */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Continue customizing forgot-container, alerts, etc. */
/* FORGOT PASSWORD MODAL STYLING FIX */
.forgot-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  padding: 30px;
  background: linear-gradient(135deg, #222, #111);
  border-radius: 20px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.6);
  z-index: 1000;
  display: none; /* hidden by default */
}

.forgot-container h2 {
  margin-bottom: 15px;
  color: #fff;
  text-align: center;
}

.forgot-container input {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  background: #2a2a2a;
  border: 1px solid #444;
  color: #fff;
  border-radius: 8px;
}

.forgot-container input::placeholder {
  color: #aaa;
}

.forgot-container button {
  width: 100%;
  padding: 10px;
  background: #fff;
  color: #000;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s;
}

.forgot-container button:hover {
  background: #ddd;
}

.forgot-container .tips {
  margin-top: 15px;
  color: #ccc;
  font-size: 0.9em;
}

.forgot-container .tips ul {
  padding-left: 20px;
}

/* To show it: add .show class via JS */
.forgot-container.show {
  display: block;
}
.forgot-container {
  cursor: grab;
}
.forgot-container:active {
  cursor: grabbing;
}

 



/* Update inputs and buttons inside it similarly */
.forgot-container input {
  background-color: #333;
  color: #fff;
}

.forgot-container input:hover {
  background: #444;
}

.forgot-container button {
  background-color: #fff;
  color: #000;
}

.forgot-container button:hover {
  background-color: #ccc;
  color: #000;
}

.custom-alert {
  background: linear-gradient(135deg, #222, #000);
  color: #fff;
}

.dp-dropdown {
  background: #1a1a1a;
}

.dp-dropdown a {
  color: #fff;
}

.dp-dropdown a:hover {
  background: #333;
}

/* Keep your responsive styles, just ensure the colors match */


.container {
  background-color: #1e1e1e;
  border-radius: 30px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6);
  position: relative;
  overflow: hidden;
  width: 768px;
  max-width: 100%;
  min-height: 480px;
  border: 1px solid #444;
  margin: 4%;
  color: #fff;
}

.container p,
.container span,
.container a {
  color: #ccc;
}

.container a {
  color: #aaa;
}

.container button {
  background-color: #333;
  color: #fff;
  border: 1px solid #555;
}

.container button.hidden {
  background-color: transparent;
  border-color: #fff;
}

.container input {
  background-color: #2c2c2c;
  color: #fff;
  border: 1px solid #444;
}

.container input::placeholder {
  color: #aaa;
}
.icon {
  margin-right: 8px;
 
}

.social-icons a {
  border: 1px solid #555;
position: sticky;  
}

.toggle {
  background: linear-gradient(to right, #222, #444);
  color: #fff;
}

.toggle-panel {
  color: #eee;
}

.forgot-container {
  background: linear-gradient(-45deg, #333, #555);
  color: #fff;
}

.forgot-container input {
  background-color: #2a2a2a;
  color: #fff;
}

.forgot-container button {
  background-color: #fff;
  color: #222;
}

.custom-alert {
  background: linear-gradient(135deg, #222, #111);
  color: #fff;
}

.custom-alert button {
  background: #fff;
  color: #000;
}

.dp-dropdown {
  background: #222;
  color: white;
}

.dp-dropdown a {
  color: white;
}

.dp-dropdown a:hover {
  background: #444;
}

/* Gradient animation */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Responsive media queries adjusted for dark theme where needed */
@media (max-width: 768px) {
  .container {
    width: 90%;
  }

  .forgot-container {
    width: 90%;
  }

  .dp-dropdown {
    right: 10px;
  }
}

@media (max-width: 480px) {
  .container {
    width: 95%;
  }

  .forgot-container {
    width: 95%;
  }
}
/* ==========================
   Alert Box Styles
========================== */
#customAlert {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) scale(0.9);
  background: linear-gradient(135deg, #00ff99, #111);
  color: white;
  padding: 15px 25px;
  border-radius: 10px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
  font-size: 16px;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: all 0.4s ease;
}
#customAlert.show {
  opacity: 1;
  transform: translateX(-50%) scale(1);
  pointer-events: auto;
}

/* ==========================
   Forgot Password Box Styles
========================== */
/* ===== Forgot Password Modal ===== */
#forgotBox {
  position: absolute;
  top: 120px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #2b2b2b, #000000); /* dark gradient */
  color: #fff;
  padding: 25px 30px;
  border-radius: 20px;
  width: 400px;
  max-width: 90%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  z-index: 9999999999;
  display: none;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

#forgotBox h2 {
  margin-top: 0;
  font-size: 22px;
  text-align: center;
  color: #ffffff;
  font-weight: 600;
}

#forgotBox input {
  width: 100%;
  padding: 12px;
  margin: 10px 0;
  border-radius: 10px;
  border: none;
  font-size: 14px;
  background: #323232;
  color: #fff;
  transition: background 0.3s ease;
}

#forgotBox input:focus {
  background: #303030;
  outline: none;
}

#forgotBox input::placeholder {
  color: #aaa;
}

#forgotBox button {
  width: 100%;
  padding: 12px;
  background-color: #3a3a3a;
  border: 1px solid #555;
  border-radius: 10px;
  color: white;
  font-size: 15px;
  font-weight: 600;
  margin-top: 15px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

#forgotBox button:hover {
  background-color: #505050;
  transform: scale(1.02);
}

/* Style for the Verify button specifically */
#verifyBtn {
  background-color: #4c4c4c;
}

#verifyBtn:hover {
  background-color: #626262;
}



#forgotBox .tips {
  margin-top: 16px;
  font-size: 13px;
  color: #ccc;
  line-height: 1.5;
}

#forgotBox .tips ul {
  margin: 0;
  padding-left: 20px;
}

#forgotBox p#forgotMsg {
  margin-top: 15px;
  font-weight: 500;
  font-size: 14px;
  text-align: center;
  color: #e0e0e0;
}


/* ===== Custom Alert ===== */
#customAlert {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #676767, #111);
  color: white;
  padding: 14px 22px;
  border-radius: 8px;
  z-index: 9999;
  display: none;
  font-size: 15px;
  align-items: center;
  gap: 10px;
  animation: fadeInDown 0.3s ease;
}

#customAlert.show {
  display: flex;
}

#customAlert button {
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
  padding: 6px 12px;
  margin-left: 12px;
  border-radius: 6px;
  cursor: pointer;
}

@keyframes fadeInDown {
  from {
    transform: translate(-50%, -30px);
    opacity: 0;
  }
  to {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}

/* ===== Mobile Responsiveness ===== */
@media (max-width: 480px) {
  #forgotBox {
    padding: 18px;
    font-size: 14px;
  }

  #forgotBox input,
  #forgotBox button {
    font-size: 13px;
  }

  #customAlert {
    font-size: 13px;
    padding: 10px 14px;
  }
}
#forgotBox {
  opacity: 0;
  transform: scale(0.95);
  transition: all 0.3s ease;
}

#forgotBox.show {
  display: block;
  opacity: 1;
  transform: scale(1);
}

/* Overlay for Forgot Password modal */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
  z-index: 900;
}
.overlay.show {
  opacity: 1;
  pointer-events: auto;
}

#forgotBox .close-btn {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(180deg, #2e2e2e, #1c1c1c);
  border: 1px solid #555;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
  z-index: 1;
}
#forgotBox .close-btn i { font-size: 16px; }
#forgotBox .close-btn:hover {
  background: linear-gradient(180deg, #3a3a3a, #202020);
  transform: scale(1.06);
  box-shadow: 0 10px 24px rgba(0,0,0,0.3);
}
#forgotBox .close-btn:active {
  transform: scale(0.98);
}
#forgotBox .close-btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px #888, 0 8px 20px rgba(0,0,0,0.25);
}
#forgotBox .close-btn:hover { background: #444; transform: scale(1.06); }

#forgotBox .tips {
  margin-top: 16px;
  font-size: 13px;
  color: #ccc;
  line-height: 1.5;
}

#forgotBox .tips ul {
  margin: 0;
  padding-left: 20px;
}

#forgotBox p#forgotMsg {
  margin-top: 15px;
  font-weight: 500;
  font-size: 14px;
  text-align: center;
  color: #e0e0e0;
}


/* ===== Custom Alert ===== */
#customAlert {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #676767, #111);
  color: white;
  padding: 14px 22px;
  border-radius: 8px;
  z-index: 9999;
  display: none;
  font-size: 15px;
  align-items: center;
  gap: 10px;
  animation: fadeInDown 0.3s ease;
}

#customAlert.show {
  display: flex;
}

#customAlert button {
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
  padding: 6px 12px;
  margin-left: 12px;
  border-radius: 6px;
  cursor: pointer;
}

@keyframes fadeInDown {
  from {
    transform: translate(-50%, -30px);
    opacity: 0;
  }
  to {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}

/* ===== Mobile Responsiveness ===== */
@media (max-width: 480px) {
  #forgotBox {
    padding: 18px;
    font-size: 14px;
  }

  #forgotBox input,
  #forgotBox button {
    font-size: 13px;
  }

  #customAlert {
    font-size: 13px;
    padding: 10px 14px;
  }
}




.loader-circle-25 {
    height: 16px;
    width: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.loader-circle-25:after,
.loader-circle-25:before {
    content: "";
    display: inline-block;
    position: relative;
    border-radius: 50%;
    border: 2px solid #0000;
    border-left: 2px solid #bbb;
    border-right: 2px solid #bbb;
}
.loader-circle-25:before {
    height: 16px;
    width: 16px;
    animation: spin1 2s infinite;
}
.loader-circle-25:after {
    height: 12px;
    width: 12px;
    top: 2px;
    left: 2px;
    animation: spin2 2s infinite;
    position: absolute;
}
@keyframes spin1 {
    50% {
        transform: rotate(360deg);
    }
}
@keyframes spin2 {
    50% {
        transform: rotate(-360deg);
    }
}