.auth-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
  overflow: hidden;
  margin: 0;
}

/* Add floating fashion elements */
.auth-wrapper::before,
.auth-wrapper::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.1;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M21.6 18.2L13 11.75v-.91a3.496 3.496 0 0 0-.18-6.75A3.51 3.51 0 0 0 8.5 7.5v3.34L2.4 18.2a1 1 0 0 0-.4.8v2a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1v-2a1 1 0 0 0-.4-.8zM12 5.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5.67-1.5 1.5-1.5z"/></svg>'),
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M18.5 2h-13A2.5 2.5 0 0 0 3 4.5v15A2.5 2.5 0 0 0 5.5 22h13a2.5 2.5 0 0 0 2.5-2.5v-15A2.5 2.5 0 0 0 18.5 2zm-7 15.5a5.5 5.5 0 1 1 0-11 5.5 5.5 0 0 1 0 11z"/></svg>'),
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M19 6h-2c0-2.76-2.24-5-5-5S7 3.24 7 6H5c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-7-3c1.66 0 3 1.34 3 3H9c0-1.66 1.34-3 3-3zm7 17H5V8h14v12z"/></svg>');
  background-repeat: space;
  animation: floatingIcons 20s linear infinite;
}

.auth-wrapper::after {
  animation-direction: reverse;
  animation-duration: 15s;
  opacity: 0.05;
}

@keyframes floatingIcons {
  0% {
    transform: translateY(0) rotate(0deg);
  }

  100% {
    transform: translateY(-100%) rotate(360deg);
  }
}

/* Update auth-box styling */
.auth-box {
  background: rgba(255, 255, 255, 0.95);
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 450px;
  backdrop-filter: blur(8px);
  position: relative;
  z-index: 1;
}

/* Add fashion-related decorative elements */
.auth-box::before {
  content: '';
  position: absolute;
  top: -15px;
  left: -15px;
  right: -15px;
  bottom: -15px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 25px;
  z-index: -1;
}

/* Add shopping bag icon to form titles */
.auth-box h2::before {
  content: '🛍️';
  margin-right: 10px;
  font-size: 1.2em;
}

/* Style form inputs with fashion-related hover effects */
.form-control {
  border-radius: 8px;
  padding: 12px;
  border: 1px solid #ddd;
  transition: all 0.3s ease;
}

.form-control:hover {
  border-color: #764ba2;
  transform: translateY(-2px);
}

.form-control:focus {
  border-color: #764ba2;
  box-shadow: 0 0 0 0.2rem rgba(118, 75, 162, 0.25);
  transform: translateY(-2px);
}

/* Style buttons with gradient and hover animation */
.btn-primary {
  background: linear-gradient(45deg, #667eea, #764ba2);
  border: none;
  padding: 12px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background: linear-gradient(45deg, #764ba2, #667eea);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(118, 75, 162, 0.3);
}

/* Add fashion-related loading animation for buttons */
.btn-primary:active {
  transform: translateY(1px);
}

/* Style Google sign-in button container */
.google-btn-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  position: relative;
}

.google-btn-container::before {
  content: 'or';
  position: absolute;
  top: -15px;
  background: white;
  padding: 0 10px;
  color: #666;
  font-size: 0.9em;
}

/* Remove container margins */
body,
html {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.container {
  margin: 0;
  padding: 0;
  max-width: 100%;
}

.nav-pills .nav-link.active {
  background-color: #667eea;
}

.nav-pills .nav-link {
  color: #667eea;
}

.otp-input-group {
  margin-top: 15px;
}

/* Responsive Styles */
@media (max-width: 576px) {
  .auth-box {
    padding: 20px;
  }
}