/* =====================================================
   CROAKI AUTH.CSS
   Modern Croaki style for Login / Register / User forms
   File: /content/themes/croaki/css/auth.css
===================================================== */

:root {
  --croaki-primary: #8CCC01;
  --croaki-primary-dark: #2e7501;
  --croaki-soft: #f8faf5;
  --croaki-border: #edf1e8;
  --croaki-text: #111827;
  --croaki-muted: #475467;
}

/* Page background */
body.croaki-theme .user-page,
body.croaki-theme main.user-page,
body.croaki-theme .login-page,
body.croaki-theme .register-page {
  background: #ffffff !important;
  background-image: none !important;
  padding: 34px 0 64px !important;
}

/* Main auth card */
body.croaki-theme .user-page .section,
body.croaki-theme .login-page .section,
body.croaki-theme .register-page .section {
  max-width: 560px !important;
  margin: 34px auto 70px !important;
  padding: 36px !important;
  border-radius: 32px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,245,.96)) !important;
  border: 1px solid var(--croaki-border) !important;
  box-shadow:
    0 20px 50px rgba(16, 24, 40, 0.08),
    0 0 0 6px rgba(140, 204, 1, 0.025) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Soft Croaki glow */
body.croaki-theme .user-page .section::before,
body.croaki-theme .login-page .section::before,
body.croaki-theme .register-page .section::before {
  content: "" !important;
  position: absolute !important;
  width: 180px !important;
  height: 180px !important;
  right: -70px !important;
  top: -70px !important;
  border-radius: 50% !important;
  background: rgba(140, 204, 1, 0.14) !important;
  pointer-events: none !important;
}

/* Titles */
body.croaki-theme .user-page .single-title,
body.croaki-theme .user-page .page-title,
body.croaki-theme .login-page .single-title,
body.croaki-theme .register-page .single-title,
body.croaki-theme .section .page-title {
  margin: 0 0 22px !important;
  color: var(--croaki-text) !important;
  font-size: 36px !important;
  line-height: 1.05 !important;
  font-weight: 950 !important;
  letter-spacing: -0.045em !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Small badge before title */
body.croaki-theme .user-page .single-title::before,
body.croaki-theme .user-page .page-title::before,
body.croaki-theme .login-page .single-title::before,
body.croaki-theme .register-page .single-title::before {
  content: "🐸 Croaki Account" !important;
  display: inline-flex !important;
  width: fit-content !important;
  margin: 0 0 14px !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: var(--croaki-primary-dark) !important;
  border: 1px solid rgba(140, 204, 1, 0.28) !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

/* Forms */
body.croaki-theme .user-page form,
body.croaki-theme .login-page form,
body.croaki-theme .register-page form {
  position: relative !important;
  z-index: 1 !important;
}

body.croaki-theme .user-page label,
body.croaki-theme .login-page label,
body.croaki-theme .register-page label {
  color: var(--croaki-text) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  margin-bottom: 8px !important;
}

body.croaki-theme .user-page .form-group,
body.croaki-theme .login-page .form-group,
body.croaki-theme .register-page .form-group,
body.croaki-theme .user-page .mb-3,
body.croaki-theme .login-page .mb-3,
body.croaki-theme .register-page .mb-3 {
  margin-bottom: 18px !important;
}

/* Inputs */
body.croaki-theme .user-page input[type="text"],
body.croaki-theme .user-page input[type="email"],
body.croaki-theme .user-page input[type="password"],
body.croaki-theme .user-page input[type="number"],
body.croaki-theme .user-page textarea,
body.croaki-theme .user-page select,
body.croaki-theme .login-page input[type="text"],
body.croaki-theme .login-page input[type="email"],
body.croaki-theme .login-page input[type="password"],
body.croaki-theme .register-page input[type="text"],
body.croaki-theme .register-page input[type="email"],
body.croaki-theme .register-page input[type="password"],
body.croaki-theme .user-page .form-control,
body.croaki-theme .login-page .form-control,
body.croaki-theme .register-page .form-control {
  width: 100% !important;
  min-height: 50px !important;
  padding: 12px 16px !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  color: var(--croaki-text) !important;
  border: 1px solid rgba(140, 204, 1, 0.28) !important;
  box-shadow: 0 8px 18px rgba(16, 24, 40, 0.045) !important;
  outline: none !important;
}

body.croaki-theme .user-page .form-control:focus,
body.croaki-theme .login-page .form-control:focus,
body.croaki-theme .register-page .form-control:focus,
body.croaki-theme .user-page input:focus,
body.croaki-theme .login-page input:focus,
body.croaki-theme .register-page input:focus {
  border-color: var(--croaki-primary) !important;
  box-shadow:
    0 0 0 4px rgba(140, 204, 1, 0.16),
    0 10px 22px rgba(16, 24, 40, 0.06) !important;
}

/* Placeholder */
body.croaki-theme .user-page input::placeholder,
body.croaki-theme .login-page input::placeholder,
body.croaki-theme .register-page input::placeholder {
  color: #98a2b3 !important;
}

/* Buttons */
body.croaki-theme .user-page .btn,
body.croaki-theme .login-page .btn,
body.croaki-theme .register-page .btn {
  min-height: 48px !important;
  padding: 0 24px !important;
  border-radius: 999px !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  text-decoration: none !important;
}

body.croaki-theme .user-page .btn-primary,
body.croaki-theme .login-page .btn-primary,
body.croaki-theme .register-page .btn-primary,
body.croaki-theme .user-page button[type="submit"],
body.croaki-theme .login-page button[type="submit"],
body.croaki-theme .register-page button[type="submit"],
body.croaki-theme .user-page input[type="submit"],
body.croaki-theme .login-page input[type="submit"],
body.croaki-theme .register-page input[type="submit"] {
  background: linear-gradient(135deg, #a8e923, var(--croaki-primary)) !important;
  color: #ffffff !important;
  border: 1px solid var(--croaki-primary) !important;
  box-shadow: 0 12px 28px rgba(140, 204, 1, 0.28) !important;
}

body.croaki-theme .user-page .btn-primary:hover,
body.croaki-theme .login-page .btn-primary:hover,
body.croaki-theme .register-page .btn-primary:hover,
body.croaki-theme .user-page button[type="submit"]:hover,
body.croaki-theme .login-page button[type="submit"]:hover,
body.croaki-theme .register-page button[type="submit"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 34px rgba(140, 204, 1, 0.34) !important;
}

/* Secondary links / create account / forgot password */
body.croaki-theme .user-page a,
body.croaki-theme .login-page a,
body.croaki-theme .register-page a {
  color: var(--croaki-primary-dark) !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}

body.croaki-theme .user-page a:hover,
body.croaki-theme .login-page a:hover,
body.croaki-theme .register-page a:hover {
  color: var(--croaki-primary) !important;
}

/* Alerts */
body.croaki-theme .user-page .alert,
body.croaki-theme .login-page .alert,
body.croaki-theme .register-page .alert {
  border-radius: 20px !important;
  border: 1px solid var(--croaki-border) !important;
  box-shadow: 0 8px 20px rgba(16, 24, 40, 0.045) !important;
  font-weight: 700 !important;
}

/* Checkbox / remember me */
body.croaki-theme .user-page input[type="checkbox"],
body.croaki-theme .login-page input[type="checkbox"],
body.croaki-theme .register-page input[type="checkbox"] {
  accent-color: var(--croaki-primary) !important;
}

/* Login required block on game/comment pages */
body.croaki-theme .comment-require-login-wrapper .comment-alert,
body.croaki-theme .login-required,
body.croaki-theme .require-login {
  border-radius: 22px !important;
  background: linear-gradient(135deg, #f8faf5, #ffffff) !important;
  border: 1px solid var(--croaki-border) !important;
  color: var(--croaki-muted) !important;
  font-weight: 800 !important;
}

/* Mobile */
@media (max-width: 575px) {
  body.croaki-theme .user-page,
  body.croaki-theme main.user-page,
  body.croaki-theme .login-page,
  body.croaki-theme .register-page {
    padding: 20px 12px 46px !important;
  }

  body.croaki-theme .user-page .section,
  body.croaki-theme .login-page .section,
  body.croaki-theme .register-page .section {
    margin: 22px auto 46px !important;
    padding: 26px 20px !important;
    border-radius: 26px !important;
  }

  body.croaki-theme .user-page .single-title,
  body.croaki-theme .user-page .page-title,
  body.croaki-theme .login-page .single-title,
  body.croaki-theme .register-page .single-title,
  body.croaki-theme .section .page-title {
    font-size: 30px !important;
  }

  body.croaki-theme .user-page .btn,
  body.croaki-theme .login-page .btn,
  body.croaki-theme .register-page .btn,
  body.croaki-theme .user-page button[type="submit"],
  body.croaki-theme .login-page button[type="submit"],
  body.croaki-theme .register-page button[type="submit"] {
    width: 100% !important;
  }
}