/* custom-login.css */

/* 1) Import Arabic Cairo font */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600&display=swap&subset=arabic');

/* 2) Fullscreen background + dark overlay */
html body.login {
  font-family: 'Cairo', sans-serif !important;
  margin: 0;
  min-height: 100vh;
  background: url('/wp-content/uploads/2025/05/Untitled-design.webp') center/cover no-repeat fixed !important;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
html body.login::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1;
}

/* 3) Frosted-glass login card */
html body.login #login {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 420px;
  padding: 40px 30px !important;
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: blur(8px);
  border-radius: 16px !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.2) !important;
  box-sizing: border-box;
}

/* 4) Logo styling */
html body.login h1 {
  margin: 0 0 30px !important;
  text-align: center;
}
html body.login h1 a {
  
  background-image: url('/wp-content/uploads/2025/05/logo.webp') !important;
  background-size: contain !important;
  width: 300px !important;
  height: 80px !important;
}

/* 5) Input styling */
html body.login form .input,
html body.login form input[type="text"],
html body.login form input[type="password"] {
  width: 100% !important;
  padding: 14px 10px !important;
  margin-bottom: 24px !important;
  border: none !important;
  border-bottom: 2px solid #ddd !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #333 !important;
  font-size: 1rem !important;
  transition: border-color .3s, box-shadow .3s !important;
}
html body.login form .input:focus,
html body.login form input[type="text"]:focus,
html body.login form input[type="password"]:focus {
  border-bottom-color: #52b035 !important;
  box-shadow: 0 2px 10px rgba(82,176,53,0.3) !important;
  outline: none !important;
}

/* 6) Submit button */
html body.login form #wp-submit {
  width: 100% !important;
  padding: 14px !important;
  background-color: #52b035 !important;
  color: #ffffff !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 50px !important;
  cursor: pointer !important;
  transition: background-color .3s, transform .3s !important;
  margin-bottom: 16px !important;
}
html body.login form #wp-submit:hover {
  background-color: #439e3c !important;
  transform: translateY(-2px) !important;
}

/* 7) Remember + Lost password */
#loginform p.forgetmenot,
#loginform .forgetmenot {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px !important;
}
#loginform p.forgetmenot input {
  margin-left: 8px !important;
}
#loginform a {
  font-size: .9rem !important;
  color: #555 !important;
  text-decoration: none !important;
  transition: color .3s !important;
}
#loginform a:hover {
  color: #52b035 !important;
}

/* 8) Hide language switchers */
body.login .wpml-ls-item,
body.login .wpml-ls-legacy-list-horizontal,
body.login .pll-switcher,
body.login #lang_switcher,
body.login .language-switcher {
  display: none !important;
}

/* 9) Notification messages */
#login .message,
#login .success,
#login .error {
  border: none !important;
  background: rgba(255,255,255,0.9) !important;
  color: #333 !important;
  padding: 12px !important;
  margin-bottom: 24px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
  border-left: 4px solid #52b035 !important;
  border-radius: 4px !important;
}
#login .error {
  border-left-color: #ff5c5c !important;
  background: rgba(255,230,230,0.9) !important;
}
#login .success {
  border-left-color: #4caf50 !important;
  background: rgba(230,248,230,0.9) !important;
}