@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&display=swap");

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Manrope", "Segoe UI", system-ui, sans-serif;
  color: #15261c;
  background:
    radial-gradient(circle at 15% 20%, rgba(86, 194, 113, 0.22), transparent 34%),
    radial-gradient(circle at 85% 80%, rgba(240, 226, 207, 0.85), transparent 40%),
    linear-gradient(160deg, #f4f7f4 0%, #e8f3ea 45%, #f0e2cf 100%);
}

.aligncenter {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1.5rem;
}

.login {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.login-btn-wrapper {
  padding: 2.5rem 2.75rem;
  width: min(100%, 420px);
  min-height: 280px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #d3e0d7;
  border-radius: 22px;
  box-shadow: 0 20px 50px rgba(21, 38, 28, 0.12);
  animation: login-rise 480ms ease both;
}

.login-btn-wrapper img {
  display: block;
  margin-bottom: 1.5rem;
  max-width: 220px;
  height: auto;
}

.login-btn-wrapper a,
.login-btn {
  font-weight: 700;
  position: relative;
  z-index: 9;
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
  border-radius: 999px;
  background: linear-gradient(135deg, #56c271, #1e7a3c);
  color: #fff;
  padding: 0.85rem 1.5rem;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(47, 158, 83, 0.3);
}

.login-btn-wrapper a:hover,
.login-btn:hover {
  filter: brightness(1.05);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(47, 158, 83, 0.36);
}

@keyframes login-rise {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.login-loader-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  align-items: center;
  justify-content: center;
  background: rgba(21, 38, 28, 0.28);
}

.login-loader-overlay.is-visible,
.login-loader-overlay:not([hidden]) {
  display: flex;
}

.login-loader-overlay[hidden] {
  display: none !important;
}

.loader-18 {
  width: 110px;
  height: 110px;
  border-radius: 0;
  display: block;
  border: none;
  position: relative;
  z-index: 2001;
  box-sizing: border-box;
  animation: loader-rotation 1s linear infinite;
  background: transparent;
  overflow: visible;
}

.loader-18:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 96px;
  height: 96px;
  margin: -48px 0 0 -48px;
  border-radius: 0;
  background: transparent url("/images/loader-head.png?v=6") center center / contain no-repeat;
  box-shadow: none;
  z-index: 1;
}

.loader-18:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border-top: 4px solid #56c271;
  border-right: 4px solid transparent;
  border-bottom: 4px solid #3b82f6;
  border-left: 4px solid transparent;
  box-sizing: border-box;
  z-index: 2;
  pointer-events: none;
}

@keyframes loader-rotation {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}