/* ============================================================
   Vizard Lost Password – style.css  v3.0
   Pixel-perfect: Image 3 layout + OTP icon fix
   ============================================================ */

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

.vlp-page-bg *,
.vlp-page-bg *::before,
.vlp-page-bg *::after { box-sizing: border-box; }

/* ── Page background ── */
.vlp-page-bg {
  font-family: 'Inter', -apple-system, sans-serif;
  background: #f0f2f7;
  padding: 36px 16px 56px;
  min-height: 50vh;
}

/* ══ MAIN CARD ══ */
.vlp-card-wrap {
  display: flex;
  flex-wrap: wrap;
  border-radius: 18px;
  box-shadow: 0 2px 24px rgba(60,80,180,.10);
  max-width: 960px;
  margin: 0 auto 24px;
  overflow: hidden;
  animation: vlpFadeUp .45s ease both;
  border: 1px solid #e2e6f3;
}

@keyframes vlpFadeUp {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ══ LEFT PANEL ══ */
.vlp-left {
  flex: 0 0 40%;
  background: #edf0f8;
  padding: 52px 32px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ── Illustration ── */
.vlp-illustration {
  position: relative;
  width: 210px;
  height: 180px;
  margin-bottom: 22px;
}

/* Large envelope body */
.vlp-env-body {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 108px;
  background: #fff;
  border-radius: 3px 3px 10px 10px;
  border: 2px solid #b8c6e8;
  overflow: hidden;
  z-index: 1;
}

/* Open dark-blue flap — two solid triangles forming a V */
.vlp-env-flap {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 62px;
  z-index: 2;
}
.vlp-env-flap::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 0;
  border-left: 80px solid #3d5be0;
  border-bottom: 60px solid transparent;
}
.vlp-env-flap::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 0; height: 0;
  border-right: 80px solid #3d5be0;
  border-bottom: 60px solid transparent;
}

/* Lines inside envelope */
.vlp-env-lines {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  z-index: 3;
}
.vlp-env-lines span {
  display: block;
  height: 5px;
  border-radius: 4px;
  background: #c8d3f0;
}
.vlp-env-lines span:nth-child(1) { width: 90px; }
.vlp-env-lines span:nth-child(2) { width: 70px; }
.vlp-env-lines span:nth-child(3) { width: 80px; }

/* Lock badge */
.vlp-lock-icon {
  position: absolute;
  top: 0;
  right: 14px;
  width: 56px;
  height: 56px;
  background: #4a72f5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border: 4px solid #edf0f8;
  box-shadow: 0 5px 20px rgba(74,114,245,.45);
  z-index: 10;
}
.vlp-lock-icon svg { width: 24px; height: 24px; }

/* Leaf emojis */
.vlp-leaf {
  position: absolute;
  font-size: 30px;
  bottom: 2px;
  line-height: 1;
  z-index: 5;
}
.vlp-leaf-left  { left: 2px;  transform: scaleX(-1); }
.vlp-leaf-right { right: 2px; }

/* Dots */
.vlp-dot {
  position: absolute;
  border-radius: 50%;
  background: #5a78e8;
  opacity: .28;
  animation: vlpFloat 3s ease-in-out infinite;
}
.vlp-dot-1 { width:8px; height:8px; top:10px; left:22px; }
.vlp-dot-2 { width:5px; height:5px; top:6px;  right:56px; animation-delay:.6s; }
.vlp-dot-3 { width:5px; height:5px; top:70px; left:6px;   animation-delay:1.2s; }
.vlp-dot-4 { width:4px; height:4px; bottom:32px; right:14px; animation-delay:.4s; }

@keyframes vlpFloat {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-8px); }
}

/* Left text */
.vlp-left-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #1a2255;
  margin: 0 0 10px;
  letter-spacing: -.2px;
}
.vlp-left-desc {
  font-size: .84rem;
  color: #5a6694;
  line-height: 1.68;
  margin: 0 0 28px;
  max-width: 250px;
}

/* Badges */
.vlp-badges {
  display: flex;
  gap: 28px;
  justify-content: center;
}
.vlp-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  font-size: .77rem;
  font-weight: 600;
  color: #3a4a8a;
}
.vlp-badge-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(74,114,245,.16);
  color: #4a72f5;
}
.vlp-badge-icon svg { width: 18px; height: 18px; }

/* ══ RIGHT PANEL ══ */
.vlp-right {
  flex: 0 0 60%;
  padding: 52px 52px 50px;
  background: #fff;
}

.vlp-form-title {
  font-size: 1.65rem;
  font-weight: 800;
  color: #1a2255;
  margin: 0 0 10px;
  letter-spacing: -.3px;
}
.vlp-form-subtitle {
  font-size: .875rem;
  color: #6a7499;
  line-height: 1.7;
  margin: 0 0 26px;
}

/* ── WooCommerce form wrappers ── */
.vlp-form-inner .woocommerce-form-row,
.vlp-form-inner p { margin-bottom: 16px !important; }

.vlp-form-inner label {
  font-size: .83rem !important;
  font-weight: 700 !important;
  color: #1a2255 !important;
  margin-bottom: 8px !important;
  display: block !important;
}

/* ── ALL inputs: clean base, NO icon, NO background-image ── */
.vlp-form-inner input[type="text"],
.vlp-form-inner input[type="email"],
.vlp-form-inner input[type="number"],
.vlp-form-inner input[type="tel"],
.vlp-form-inner input[type="password"] {
  width: 100% !important;
  padding: 13px 16px !important;
  border: 1.5px solid #d4daf5 !important;
  border-radius: 10px !important;
  font-size: .92rem !important;
  font-family: 'Inter', sans-serif !important;
  color: #1a2255 !important;
  background: #fff !important;
  background-image: none !important;
  -webkit-appearance: none !important;
  transition: border-color .2s, box-shadow .2s !important;
  outline: none !important;
  box-shadow: none !important;
}
.vlp-form-inner input[type="text"]:focus,
.vlp-form-inner input[type="email"]:focus,
.vlp-form-inner input[type="number"]:focus,
.vlp-form-inner input[type="tel"]:focus,
.vlp-form-inner input[type="password"]:focus {
  border-color: #4a72f5 !important;
  box-shadow: 0 0 0 3px rgba(74,114,245,.10) !important;
}
.vlp-form-inner input::placeholder { color: #b0b8d8 !important; }

/* ── ONLY user_login field gets envelope icon ── */
.vlp-form-inner input#user_login,
.vlp-form-inner input[name="user_login"] {
  padding-left: 46px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a72f5' stroke-width='2'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 14px center !important;
  background-size: 18px !important;
}

/* ══ OTP INPUTS — completely clean ══
   Targets every possible OTP input selector
   Uses !important on background-image: none to override
   any other rule that might set an icon
   ══════════════════════════════════════════ */
.vlp-form-inner input[maxlength="1"],
.vlp-form-inner .otp-input,
.vlp-form-inner input[name^="otp"],
.vlp-form-inner input[id^="otp"],
.vlp-form-inner .otp-field input,
.vlp-form-inner .digit-group input,
.vlp-form-inner .wc-otp input,
input.vlp-otp-box {
  width: 54px !important;
  max-width: 54px !important;
  min-width: 0 !important;
  padding: 12px 4px !important;
  text-align: center !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  border-radius: 10px !important;
  border: 1.5px solid #d4daf5 !important;
  background: #fff !important;
  background-image: none !important;
  color: #1a2255 !important;
  -webkit-text-security: none !important;
}
.vlp-form-inner input[maxlength="1"]:focus,
.vlp-form-inner .otp-input:focus {
  border-color: #4a72f5 !important;
  box-shadow: 0 0 0 3px rgba(74,114,245,.10) !important;
  background-image: none !important;
}

/* Submit button */
.vlp-form-inner button[type="submit"],
.vlp-form-inner input[type="submit"],
.vlp-form-inner .woocommerce-Button,
.vlp-form-inner .button {
  width: 100% !important;
  background: #4a72f5 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 14px !important;
  font-size: .98rem !important;
  font-weight: 700 !important;
  font-family: 'Inter', sans-serif !important;
  cursor: pointer !important;
  transition: background .2s, transform .15s, box-shadow .2s !important;
  box-shadow: 0 4px 18px rgba(74,114,245,.30) !important;
  letter-spacing: .2px !important;
}
.vlp-form-inner button[type="submit"]:hover,
.vlp-form-inner input[type="submit"]:hover {
  background: #3559e0 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 22px rgba(74,114,245,.40) !important;
}

/* Back to login */
.vlp-back-login {
  text-align: center;
  margin-top: 20px;
}
.vlp-back-login a {
  font-size: .875rem !important;
  color: #4a72f5 !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}
.vlp-back-login a:hover { text-decoration: underline !important; }

/* WooCommerce notices */
.vlp-form-inner .woocommerce-error,
.vlp-form-inner .woocommerce-message,
.vlp-form-inner .woocommerce-info {
  border-radius: 10px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: .85rem !important;
}

/* ══ STEPS BAR ══ */
.vlp-steps {
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  border-radius: 14px;
  border: 1px solid #e2e6f3;
  box-shadow: 0 2px 16px rgba(60,80,180,.07);
  max-width: 960px;
  margin: 0 auto;
  overflow: hidden;
  animation: vlpFadeUp .55s ease .15s both;
}
.vlp-step {
  flex: 1 1 200px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 26px;
  border-right: 1px solid #eef0fa;
}
.vlp-step:last-child { border-right: none; }
.vlp-step-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  background: #eef2ff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4a72f5;
}
.vlp-step-icon svg { width: 20px; height: 20px; }
.vlp-step strong {
  display: block;
  font-size: .875rem;
  font-weight: 700;
  color: #1a2255;
  margin-bottom: 5px;
}
.vlp-step p {
  font-size: .78rem;
  color: #6a7499;
  margin: 0;
  line-height: 1.55;
}

/* ══ RESPONSIVE ══ */
@media (max-width: 680px) {
  .vlp-left  { flex: 0 0 100%; }
  .vlp-right { flex: 0 0 100%; padding: 30px 22px 36px; }
  .vlp-step  { border-right: none; border-bottom: 1px solid #eef0fa; }
  .vlp-step:last-child { border-bottom: none; }
}