/* custom-login.css
   Pixel-matched to your HTML login design (380px card, rounded, shadow, inputs, social, divider)
   Uses Inter font
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

html,body{height:100%}
body.login {
  background: #f5f7fa !important;
  font-family: "Inter", sans-serif;
}

/* Center and card size to match your HTML */
#login {
  width: 380px;
  margin: 60px auto;
  padding: 0;
  box-sizing: border-box;
}

/* Create a custom inner card so we match spacing */
.crf-card {
  background: #fff;
  border-radius: 20px;
  padding: 40px 30px;
  box-shadow: 0px 8px 24px rgba(0,0,0,0.08);
  text-align: center;
}

/* Replace WP logo area with your image & remove text */
#login h1 { margin: 0 0 10px; }
#login h1 a {
  display: block;
  width: 70px;
  height: 70px;
  margin: 0 auto 20px;
  text-indent: -9999px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

/* Title & subtitle */
.crf-title { font-size:22px; font-weight:600; margin-bottom:5px; color:#111; }
.crf-sub { font-size:14px; color:#666; margin-bottom:25px; }

/* Social row */
.crf-social { display:flex; justify-content:space-between; gap:12px; margin-bottom:20px; }
.crf-social a {
  flex:1;
  margin:0 6px;
  height:42px;
  border:1px solid #ddd;
  border-radius:10px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:#000;
  font-size:18px;
}
.crf-social a img { display:block; }

/* Divider */
.crf-divider { display:flex; align-items:center; color:#999; font-size:13px; margin:15px 0 25px; }
.crf-divider::before, .crf-divider::after { content:""; flex:1; height:1px; background:#e2e2e2; }
.crf-divider span { margin:0 10px; }

/* Inputs and focus */
#loginform .input, #user_login, #user_pass {
  width:100%;
  padding:12px;
  margin-bottom:15px;
  border:1px solid #ddd;
  border-radius:10px;
  font-size:14px;
  outline:none;
  box-sizing:border-box;
}
#loginform .input:focus, #user_login:focus, #user_pass:focus { border-color:#007bff; }

/* Options row */
.crf-options { display:flex; justify-content:space-between; align-items:center; font-size:13px; margin-bottom:20px; }
.crf-options a { color:#007bff; text-decoration:none; }

/* Primary button */
.wp-core-ui .button-primary {
  width:100% !important;
  padding:13px !important;
  border-radius:10px !important;
  background: linear-gradient(to bottom, #222, #000) !important;
  color:#fff !important;
  font-size:15px !important;
  font-weight:600 !important;
  border:none !important;
  box-shadow:none !important;
  cursor:pointer;
}

/* Signup link */
.crf-signup { font-size:13px; color:#555; margin-top:12px; }
.crf-signup a { color:#007bff; font-weight:700; text-decoration:none; }

/* Move WP default message styles to match look */
.login .message, .login .success, .login .error {
  margin: 12px 0 16px;
  font-size:14px;
  color:#666;
  text-align:center;
}

/* Hide extra WP logo bar margins and center everything */
.login #nav, .privacy-policy-page-link {
  margin-top: 12px;
}

/* Responsive small */
@media (max-width:480px) {
  #login { width: calc(100% - 40px); margin:32px auto; }
  .crf-card { padding:28px; }
}