@font-face { font-family: AvenirNext LT; src: url('../webfonts/AvenirNextLTPro-Regular.otf') format('opentype'); }
body { font-family: AvenirNext LT !important; color: rgba(185,185,185,0.92); }
.login-page .container { align-content: center; }
.login-page .login-brand { margin-bottom: 8px; }
.login-page .login-logo  { width: 240px; max-width: 80vw; height: auto; }
.login-page .login-card  { max-width: 440px; }
.login-page .login-card .card-body { padding: 22px; }
.login-page .login-copy     { margin-bottom: 14px; }
.login-page .login-title    { margin: 0 0 6px; color: #f9fafb; font-size: 22px; font-weight: 800; letter-spacing: .2px; }
.login-page .login-subtitle { margin: 0; color: rgba(243,244,246,0.70); font-size: 13px; line-height: 1.35; }
.login-page .login-help     { margin-top: 10px; font-size: 12px; color: rgba(243,244,246,0.65); }
.login-page .login-help a   { color: #6c9bff; }

/* ── Floating label field (Shopify checkout style) ── */
.float-field {
  position: relative;
  margin-bottom: 1.2rem;
}
.float-field .float-input {
  width: 100%;
  height: 52px;
  padding: 18px 14px 6px;
  border-radius: 13px !important;
  font-size: 15px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.float-field label {
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  font-size: 15px;
  color: rgba(243,244,246,0.50);
  pointer-events: none;
  transition: top .15s ease, font-size .15s ease, color .15s ease, transform .15s ease;
  margin: 0;
  line-height: 1;
}
/* floated state: when input has content OR is focused */
.float-field .float-input:focus + label,
.float-field .float-input:not(:placeholder-shown) + label {
  top: 10px;
  transform: none;
  font-size: 11px;
  color: rgba(108,155,255,0.90);
  font-weight: 600;
  letter-spacing: .3px;
}
.float-field .float-input:focus {
  border-color: rgba(108,155,255,0.75) !important;
  box-shadow: 0 0 0 3px rgba(108,155,255,0.22) !important;
  outline: none;
}
.login_btn { border-radius: 13px; font-weight: 700; width: 100%; height: 44px; padding: 10px 14px; color: #ffffff !important; background: rgba(76,140,255,0.32) !important; border: 1px solid rgba(76,140,255,0.55) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), 0 4px 18px rgba(76,140,255,0.28) !important; transition: background .15s ease, box-shadow .15s ease, transform .10s ease !important; }
.login_btn:hover { background: rgba(76,140,255,0.46) !important; border-color: rgba(76,140,255,0.72) !important; color: #ffffff !important; transform: translateY(-1px) !important; }
.login_btn:active { transform: translateY(0) !important; }
.links { color: white; font-weight: 700; } .links a { margin-left: 4px; }
.remember { color: white; } .remember input { width: 20px; height: 20px; margin-left: 15px; margin-right: 5px; }
.social_icon span { font-size: 60px; margin-left: 10px; color: #6c9bff; } .social_icon span:hover { color: white; cursor: pointer; } .social_icon { position: absolute; right: 20px; top: -45px; }
.card-header h3 { color: white; } .card-footer a { color: #FFFFFF; }
@media (max-width: 420px) { .login-page .login-card .card-body { padding: 18px; } .login-page .input-group-prepend span { width: 46px; } }