/* Dark mode colors for Login and Sign Up pages only */

/* Keyframes for animated gradients in dark mode */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Main colors - applies to Login and Sign Up pages */
body.dark.login-page h1:not(.page-title),
body.dark.login-page h2,
body.dark.login-page h3,
body.dark.login-page h4,
body.dark.login-page p,
body.dark.login-page a,
body.dark.login-page label,
body.dark.login-page span,
body.dark.login-page div,
body.dark.signup-page h1:not(.page-title),
body.dark.signup-page h2,
body.dark.signup-page h3,
body.dark.signup-page h4,
body.dark.signup-page p,
body.dark.signup-page a,
body.dark.signup-page label,
body.dark.signup-page span,
body.dark.signup-page div {
  text-shadow: none;
  -webkit-text-stroke: 0;
  font-weight: normal;
}

/* Main heading */
body.dark.login-page h1:not(.page-title),
body.dark.signup-page h1:not(.page-title) {
  color: #e9c788; /* Gold */
}

/* Section headings */
body.dark.login-page h2,
body.dark.signup-page h2 {
  color: #ffffff; /* White */
}

/* Sub-headings */
body.dark.login-page h3,
body.dark.signup-page h3 {
  color: #35a79c; /* Teal */
}

/* Smaller headings */
body.dark.login-page h4,
body.dark.signup-page h4 {
  color: #c0c0dd; /* Lavender */
}

/* Paragraphs and general text */
body.dark.login-page p,
body.dark.signup-page p {
  color: #e0e0e0; /* Light gray */
}

/* Links */
body.dark.login-page a:not(.btn),
body.dark.signup-page a:not(.btn) {
  color: #35a79c; /* Teal */
}

/* Links on hover */
body.dark.login-page a:hover:not(.btn),
body.dark.signup-page a:hover:not(.btn) {
  color: #4ecdc4; /* Lighter teal */
  text-decoration: underline;
}

/* Form labels */
body.dark.login-page label,
body.dark.signup-page label {
  color: #c0c0dd; /* Lavender */
}

/* Form inputs */
body.dark.login-page input,
body.dark.login-page textarea,
body.dark.login-page select,
body.dark.signup-page input,
body.dark.signup-page textarea,
body.dark.signup-page select {
  background-color: #252525;
  color: #e0e0e0;
  border: 1px solid #4e1a4a;
}

/* Placeholder text */
body.dark.login-page ::placeholder,
body.dark.signup-page ::placeholder {
  color: #777777;
}

/* Buttons - primary */
body.dark.login-page .btn-primary,
body.dark.signup-page .btn-primary {
  background-color: #209cb3;
  border-color: #1e4a69;
}

/* Buttons - secondary */
body.dark.login-page .btn-secondary,
body.dark.signup-page .btn-secondary {
  background-color: #4e1a4a;
  border-color: #3b1438;
}

/* Badges and notifications */
body.dark.login-page .badge,
body.dark.signup-page .badge {
  background-color: #4e1a4a;
  color: #ffffff;
}

/* Special Input focus */
body.dark.login-page input:focus,
body.dark.signup-page input:focus {
  border-color: #35a79c;
  box-shadow: 0 0 0 3px rgba(53, 167, 156, 0.2);
}

/* Gradient buttons */
body.dark.login-page .login-btn,
body.dark.signup-page .signup-btn {
  background: linear-gradient(120deg, #35a79c, #209cb3, #1e4a69);
  background-size: 200% 200%;
  animation: gradientShift 5s ease infinite;
}

/* Card styling */
body.dark.login-page .card,
body.dark.signup-page .card {
  border: 1px solid #4e1a4a;
}

/* Fix for white background areas */
body.dark.login-page .address-display,
body.dark.login-page #shippingAddressDisplay,
body.dark.login-page .empty-display,
body.dark.login-page div[style*="background: #fff"],
body.dark.login-page div[style*="background:#fff"],
body.dark.login-page div[style*="background-color: #fff"],
body.dark.login-page div[style*="background-color:#fff"],
body.dark.signup-page .address-display,
body.dark.signup-page #shippingAddressDisplay,
body.dark.signup-page .empty-display,
body.dark.signup-page div[style*="background: #fff"],
body.dark.signup-page div[style*="background:#fff"],
body.dark.signup-page div[style*="background-color: #fff"],
body.dark.signup-page div[style*="background-color:#fff"] {
  background-color: rgba(0, 0, 0, 0.4);
  color: #ffffff;
  border: 1px solid rgba(78, 26, 74, 0.3);
}

/* Make sure text in these sections is visible */
body.dark.login-page .address-display p,
body.dark.login-page #shippingAddressDisplay p,
body.dark.login-page .empty-display p,
body.dark.login-page div[style*="background: #fff"] p,
body.dark.login-page div[style*="background:#fff"] p,
body.dark.login-page div[style*="background-color: #fff"] p,
body.dark.login-page div[style*="background-color:#fff"] p,
body.dark.signup-page .address-display p,
body.dark.signup-page #shippingAddressDisplay p,
body.dark.signup-page .empty-display p,
body.dark.signup-page div[style*="background: #fff"] p,
body.dark.signup-page div[style*="background:#fff"] p,
body.dark.signup-page div[style*="background-color: #fff"] p,
body.dark.signup-page div[style*="background-color:#fff"] p {
  color: #ffffff;
}

/* Specifically fix shipping addresses and payment methods */
body.dark.login-page #shippingAddressDisplay,
body.dark.login-page .no-address-message,
body.dark.login-page .no-payment-message,
body.dark.signup-page #shippingAddressDisplay,
body.dark.signup-page .no-address-message,
body.dark.signup-page .no-payment-message {
  background-color: rgba(30, 30, 50, 0.7);
  color: #ffffff;
  border: 1px solid rgba(78, 26, 74, 0.3);
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 10px;
}

/* Sidebar menu links */
body.dark.login-page .sidebar_menu .menu ul li a,
body.dark.signup-page .sidebar_menu .menu ul li a {
  color: #35a79c; /* Keep the teal/green color in dark mode */
}

/* Sidebar active link */
body.dark.login-page .sidebar_menu .menu ul li a.active,
body.dark.signup-page .sidebar_menu .menu ul li a.active {
  color: #e9c788; /* Gold color for active item */
  font-weight: bold;
}

/* Animated gradient for sidebar menu icons and other icons in dark mode */
body.dark .sidebar_menu .menu ul li a i::before,
body.dark .nav-header .fa::before,
body.dark .fa-shopping-cart::before,
body.dark .fa-user::before,
body.dark .fa-user-plus::before,
body.dark .fa-bars::before {
  background: linear-gradient(120deg, #209cb3, #1e4a69, #35a79c, #209cb3);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 3s linear infinite;
  color: transparent;
  font-weight: bold;
}

/* Login and Sign up specific styles */
body.dark.login-page .login-container,
body.dark.signup-page .signup-container {
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(78, 26, 74, 0.3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

body.dark.login-page .login-form,
body.dark.signup-page .signup-form {
  background-color: rgba(30, 30, 50, 0.7);
  border: 1px solid rgba(78, 26, 74, 0.3);
}

/* Form buttons in login/signup */
body.dark.login-page [class*="add-address"],
body.dark.login-page [class*="add-payment"],
body.dark.login-page [id*="add-address"],
body.dark.login-page [id*="add-payment"],
body.dark.login-page [class*="AddAddress"],
body.dark.login-page [class*="AddPayment"],
body.dark.login-page [id*="AddAddress"],
body.dark.login-page [id*="AddPayment"],
body.dark.signup-page [class*="add-address"],
body.dark.signup-page [class*="add-payment"],
body.dark.signup-page [id*="add-address"],
body.dark.signup-page [id*="add-payment"] {
  background-color: #35a79c;
  color: white;
  border-color: #209cb3;
}

body.dark.login-page,
body.dark.signup-page {
  color: #f0f0f0;
  background-color: #121212;
}

/* Dark mode cosmic login gradient - Generalized for login/signup pages */
body.dark.login-page .login-section,
body.dark.signup-page .login-section,
body.dark.login-page .signup-section,
body.dark.signup-page .signup-section {
  background-color: rgba(18, 18, 18, 0.7);
  border: 1px solid rgba(78, 26, 74, 0.3);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Text colors - dark mode */
body.dark.login-page h1, 
body.dark.signup-page h1 {
  color: #e9c788; /* Gold */
}

body.dark.login-page h2, 
body.dark.signup-page h2,
body.dark.login-page h3,
body.dark.signup-page h3 {
  color: #c0c0dd; /* Lavender */
}

body.dark.login-page p,
body.dark.signup-page p, 
body.dark.login-page label,
body.dark.signup-page label {
  color: #e0e0e0; /* Light gray */
}

/* Form elements - dark mode */
body.dark.login-page input[type="text"],
body.dark.signup-page input[type="text"],
body.dark.login-page input[type="email"],
body.dark.signup-page input[type="email"],
body.dark.login-page input[type="password"],
body.dark.signup-page input[type="password"] {
  background-color: #252525;
  color: #e0e0e0;
  border: 1px solid #4e1a4a;
}

/* Placeholder text */
body.dark.login-page ::placeholder,
body.dark.signup-page ::placeholder {
  color: #777777;
}

/* Input focus state */
body.dark.login-page input:focus,
body.dark.signup-page input:focus {
  border-color: #35a79c;
  box-shadow: 0 0 0 3px rgba(53, 167, 156, 0.2);
}

/* Button styling - Sign in/up buttons */
body.dark.login-page .login-button,
body.dark.signup-page .login-button,
body.dark.login-page .signup-button,
body.dark.signup-page .signup-button {
  background: linear-gradient(135deg, #35a79c, #209cb3, #1e4a69);
  background-size: 200% 200%;
  animation: gradientShift 5s ease infinite;
  color: #ffffff;
  border: none;
}

/* Social login buttons */
body.dark.login-page .social-button,
body.dark.signup-page .social-button {
  background-color: #4e1a4a;
  color: #ffffff;
  border: 1px solid #3b1438;
}

/* Links */
body.dark.login-page a:not(.social-button):not(.login-button):not(.signup-button),
body.dark.signup-page a:not(.social-button):not(.login-button):not(.signup-button) {
  color: #35a79c;
}

/* Link hover */
body.dark.login-page a:hover:not(.social-button):not(.login-button):not(.signup-button),
body.dark.signup-page a:hover:not(.social-button):not(.login-button):not(.signup-button) {
  color: #4ecdc4;
  text-decoration: underline;
}

/* Tab styling */
body.dark.login-page .tab,
body.dark.signup-page .tab {
  color: #777777;
}

body.dark.login-page .tab.active,
body.dark.signup-page .tab.active,
body.dark.login-page .tab:hover,
body.dark.signup-page .tab:hover {
  color: #35a79c;
  border-bottom-color: #35a79c;
}

/* Error messages */
body.dark.login-page .error-message,
body.dark.signup-page .error-message {
  color: #ff6b6b;
}

/* Animated gradient for cosmic logo in dark mode */
body.dark.login-page .logo a,
body.dark.signup-page .logo a {
  background: linear-gradient(270deg, #35a79c, #209cb3, #1e4a69, #35a79c);
  background-size: 800% 800%;
  animation: cosmic-gradient 8s ease infinite;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}