/* =========================================================
   Login Portal — FINAL STYLING (Forgot Password Black)
   ========================================================= */

/* Wrapper */
.esp-lp-wrap{
  width: min(420px, 92vw);
  margin: 28px auto;
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  color: #ffffff !important;
}

/* Main card */
.esp-lp-card{
  width: 100%;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  overflow: hidden;
  position: relative;
  background: #99897e !important;
}

/* Hide tabs */
.esp-lp-tabs{ display:none; }

/* Panes */
.esp-lp-pane{ display:none; }
.esp-lp-pane.is-active{ display:block; }

/* Hero */
.esp-lp-hero{
  padding: 22px 22px 14px;
  text-align: center;
}

/* Logo */
.esp-lp-logo{
  width: 84px;
  height: 84px;
  margin: 0 auto 10px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.25);
  box-shadow: 0 14px 40px rgba(0,0,0,0.35);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.esp-lp-logo img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
}

/* Text */
.esp-lp-note,
.esp-lp-hero-title,
.esp-lp-hero-sub{
  color: #ffffff !important;
  font-family: 'Montserrat', sans-serif !important;
}

/* Body */
.esp-lp-body{
  padding: 14px 22px 18px;
}

/* Forms */
.esp-lp-form,
.esp-lp-form *{
  font-family: 'Montserrat', sans-serif !important;
  color: #ffffff !important;
}

.esp-lp-form label{
  font-size:12px;
  font-weight:800;
  margin-bottom:6px;
}

/* Input wrapper */
.esp-lp-inputwrap{ position: relative; }

.esp-lp-inputwrap:before{
  content:"";
  position:absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  opacity: .8;
  background-size: 18px;
  background-repeat: no-repeat;
}

/* Icons */
.esp-lp-ico-user:before{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='white' fill='none' viewBox='0 0 24 24'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
.esp-lp-ico-mail:before{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='white' fill='none' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16v16H4z'/%3E%3Cpath d='m22 6-10 7L2 6'/%3E%3C/svg%3E");
}
.esp-lp-ico-lock:before{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='white' fill='none' viewBox='0 0 24 24'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}

/* Inputs */
.esp-lp-form input{
  width:100%;
  padding: 12px 14px 12px 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.22);
  color: #ffffff !important;
  font-weight: 700;
}

/* Placeholder */
.esp-lp-form input::placeholder{
  color: #cccccc !important;
}

/* Focus */
.esp-lp-form input:focus{
  border-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.18);
}

/* Forgot password (BLACK TEXT) */
.esp-lp-forgot{
  text-align: right;
  margin-bottom: 14px;
}

.esp-lp-forgot a,
.esp-lp-forgot-btn{
  font-size: 12px;
  font-weight: 800;
  color: #000000 !important;
  text-decoration: none;
}

.esp-lp-forgot a:hover,
.esp-lp-forgot-btn:hover{
  text-decoration: underline;
}

/* Buttons */
.esp-btn,
.esp-lp-form button,
.esp-lp-form input[type="submit"]{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #000000;
  background: #000000 !important;
  color: #ffffff !important;
  font-weight: 800;
  font-family: 'Montserrat', sans-serif !important;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.esp-btn:hover{
  transform: scale(1.05);
  box-shadow: 0 10px 24px rgba(0,0,0,0.3);
}

/* Alerts */
.esp-lp-alert{
  border-radius: 12px;
  padding: 10px;
  font-weight: 800;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.2);
}

/* Bottom */
.esp-lp-bottom{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.12);
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  color: #ffffff !important;
}

.esp-lp-bottom-link{
  background: transparent;
  color: #ffffff !important;
  cursor:pointer;
}

.esp-lp-bottom-link:hover{
  text-decoration: underline;
}

/* Banner */
.esp-lp-banner{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.15);
  padding: 10px;
  margin-bottom: 12px;
  color: #ffffff !important;
}

/* Honeypot */
.esp-lp-hp{
  position:absolute !important;
  left:-9999px !important;
}

/* Mobile */
@media (max-width: 520px){
  .esp-lp-wrap{
    width: min(420px, 90vw);
  }
}

/* Prevent overflow */
.esp-lp-card *{
  box-sizing: border-box;
}