/* =====================================================================
 * WooCommerce My Account — Smart Login Design (v6.0.6)
 *
 * Password toggle strategy:
 *  - We DON'T create our own button.
 *  - We STYLE WooCommerce's native `.show-password-input` as an SVG
 *    eye icon. WC's JS handles click + icon swap via `.display-password`.
 * ===================================================================== */

/* ---------- Card ---------- */
.woocommerce-account .woocommerce form.login{
  max-width:520px;
  margin:30px auto 20px;
  padding:36px 32px;
  border:1px solid #e2e8f0;
  border-radius:16px;
  box-shadow:0 20px 50px -12px rgba(0,0,0,.12), 0 4px 12px -4px rgba(0,0,0,.05);
  background:#fff;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:#0f172a;
  position:relative;
}

/* ---------- Form rows ---------- */
.woocommerce-account .woocommerce form.login .form-row{
  margin-bottom:18px;
  padding:0;
}
.woocommerce-account .woocommerce form.login label{
  display:block;
  font-weight:600;
  font-size:14px;
  margin-bottom:8px;
  color:#0f172a;
}
.woocommerce-account .woocommerce form.login label .required{
  color:#dc2626;
  text-decoration:none;
  font-weight:400;
}

/* ---------- Inputs ---------- */
.woocommerce-account .woocommerce form.login input.input-text{
  width:100%;
  height:48px;
  border-radius:10px;
  border:1px solid #cbd5e1;
  padding:0 14px;
  background:#fff;
  color:#0f172a;
  font-size:15px;
  font-family:inherit;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
  box-sizing:border-box;
}
.woocommerce-account .woocommerce form.login input.input-text:hover{ border-color:#94a3b8; }
.woocommerce-account .woocommerce form.login input.input-text:focus{
  outline:0;
  border-color:#111827;
  box-shadow:0 0 0 4px rgba(17,24,39,.09);
}

/* =====================================================================
 * PASSWORD WRAPPER — position relative for absolute toggle
 * ===================================================================== */
.woocommerce-account .woocommerce form.login .password-input{
  position:relative !important;
  display:block !important;
  width:100% !important;
}
.woocommerce-account .woocommerce form.login input[name="password"]{
  padding-right:52px !important;
}

/* =====================================================================
 * STYLE WOOCOMMERCE'S NATIVE TOGGLE AS SVG EYE
 * ===================================================================== */
.woocommerce-account .woocommerce form.login .password-input .show-password-input{
  position:absolute !important;
  right:6px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:36px !important;
  height:36px !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:8px !important;
  cursor:pointer !important;
  z-index:2 !important;
  display:inline-block !important;
  visibility:visible !important;
  opacity:1 !important;
  background-color:transparent !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:20px 20px !important;
  /* Show eye (password hidden) */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") !important;
  /* Kill WC's ::after icon font */
  font-family:inherit !important;
  font-size:0 !important;
  color:transparent !important;
  text-indent:-9999px !important;
  overflow:hidden !important;
}
.woocommerce-account .woocommerce form.login .password-input .show-password-input::after,
.woocommerce-account .woocommerce form.login .password-input .show-password-input::before{
  content:none !important;
  display:none !important;
}
.woocommerce-account .woocommerce form.login .password-input .show-password-input:hover{
  background-color:#f1f5f9 !important;
}
.woocommerce-account .woocommerce form.login .password-input .show-password-input:focus-visible{
  outline:2px solid #111827 !important;
  outline-offset:2px !important;
}

/* When password is shown (WC adds .display-password) → hide eye */
.woocommerce-account .woocommerce form.login .password-input .show-password-input.display-password{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E") !important;
}

/* =====================================================================
 * HIDE LEGACY / DUPLICATE TOGGLES
 * ===================================================================== */
.woocommerce-account .woocommerce form.login .jcs-pw-toggle,
.woocommerce-account .woocommerce form.login .password-input .jcs-pw-toggle,
.woocommerce-account .woocommerce form.login span.jcs-pw-toggle-text{
  display:none !important;
  visibility:hidden !important;
  width:0 !important;
  height:0 !important;
  overflow:hidden !important;
}
.woocommerce-account .woocommerce form.login .password-input .show-password-input ~ .show-password-input{
  display:none !important;
}

/* ---------- Caps Lock warning ---------- */
.woocommerce-account .woocommerce form.login .jcs-caps-warning{
  display:none;
  align-items:center;
  gap:6px;
  margin-top:8px;
  padding:8px 12px;
  background:#fffbeb;
  border:1px solid #fde68a;
  border-radius:8px;
  color:#92400e;
  font-size:12.5px;
  font-weight:600;
}
.woocommerce-account .woocommerce form.login .jcs-caps-warning.is-active{
  display:inline-flex;
  animation:jcs-caps-in .2s ease-out both;
}
@keyframes jcs-caps-in{
  from{ opacity:0; transform:translateY(-4px); }
  to{ opacity:1; transform:none; }
}

/* ---------- Remember me + Lost password ---------- */
.woocommerce-account .woocommerce form.login .woocommerce-form-login__rememberme{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:500;
  cursor:pointer;
  color:#475569;
  margin:0;
}
.woocommerce-account .woocommerce form.login .woocommerce-form-login__rememberme input[type="checkbox"]{
  width:16px;
  height:16px;
  accent-color:#111827;
  margin:0;
}
.woocommerce-account .woocommerce form.login .lost_password{
  margin:0;
  text-align:right;
}
.woocommerce-account .woocommerce form.login .lost_password a{
  color:#64748b;
  font-size:13px;
  text-decoration:underline;
  text-underline-offset:2px;
}
.woocommerce-account .woocommerce form.login .lost_password a:hover{
  color:#111827;
}

/* ---------- Submit button ---------- */
.woocommerce-account .woocommerce form.login button.woocommerce-button,
.woocommerce-account .woocommerce form.login [type="submit"].woocommerce-form-login__submit{
  width:100%;
  height:50px;
  border-radius:10px;
  font-weight:700;
  font-size:15px;
  font-family:inherit;
  background:#111827;
  color:#fff;
  border:0;
  cursor:pointer;
  transition:background .18s ease, transform .08s ease, box-shadow .18s ease;
  box-shadow:0 8px 18px -6px rgba(17,24,39,.35);
  position:relative;
  overflow:hidden;
}
.woocommerce-account .woocommerce form.login button.woocommerce-button:hover,
.woocommerce-account .woocommerce form.login [type="submit"].woocommerce-form-login__submit:hover{
  background:#030712;
  box-shadow:0 10px 22px -6px rgba(17,24,39,.45);
}
.woocommerce-account .woocommerce form.login button.woocommerce-button:active,
.woocommerce-account .woocommerce form.login [type="submit"].woocommerce-form-login__submit:active{
  transform:translateY(1px);
}
.woocommerce-account .woocommerce form.login button.woocommerce-button:focus-visible,
.woocommerce-account .woocommerce form.login [type="submit"].woocommerce-form-login__submit:focus-visible{
  outline:3px solid #c7d2fe;
  outline-offset:2px;
}
.woocommerce-account .woocommerce form.login button.woocommerce-button.is-loading,
.woocommerce-account .woocommerce form.login [type="submit"].woocommerce-form-login__submit.is-loading{
  opacity:.85;
  cursor:wait;
  padding-right:44px;
  pointer-events:none;
}
.woocommerce-account .woocommerce form.login button.woocommerce-button.is-loading::after,
.woocommerce-account .woocommerce form.login [type="submit"].woocommerce-form-login__submit.is-loading::after{
  content:"";
  position:absolute;
  right:16px;
  top:50%;
  width:16px;
  height:16px;
  margin-top:-8px;
  border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff;
  border-radius:50%;
  animation:jcs-login-spin .7s linear infinite;
}
@keyframes jcs-login-spin{ to{ transform:rotate(360deg); } }

/* ---------- Error notice ---------- */
.woocommerce-account .woocommerce > .woocommerce-error,
.woocommerce-account .woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-account .woocommerce form.login ~ .woocommerce-error{
  max-width:520px;
  margin:0 auto 16px;
  padding:14px 18px;
  border-radius:12px;
  background:#fef2f2;
  border:1px solid #fecaca;
  color:#991b1b;
  font-size:14px;
  line-height:1.55;
  list-style:none;
}
.woocommerce-account .woocommerce-notices-wrapper .woocommerce-error li{
  margin:0;
  padding:0;
  list-style:none;
}
.woocommerce-account .woocommerce-notices-wrapper .woocommerce-error li + li{
  margin-top:6px;
}

/* ---------- "Create Account" switch ---------- */
.woocommerce-account .jcs-login-switch{
  max-width:520px;
  margin:16px auto 32px;
  text-align:center;
  padding:16px;
  border-radius:12px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  font-size:14px;
  color:#64748b;
}
.woocommerce-account .jcs-login-switch a{
  font-weight:700;
  text-decoration:underline;
  color:#111827;
  text-underline-offset:2px;
}

/* ---------- Responsive ---------- */
@media (max-width:600px){
  .woocommerce-account .woocommerce form.login{
    padding:26px 20px;
    margin-left:12px;
    margin-right:12px;
    border-radius:14px;
  }
  .woocommerce-account .jcs-login-switch{
    margin-left:12px;
    margin-right:12px;
  }
}

/* ---------- Dark mode ---------- */
@media (prefers-color-scheme:dark){
  .woocommerce-account .woocommerce form.login{
    background:#0f172a;
    border-color:#1e293b;
    box-shadow:0 20px 50px -12px rgba(0,0,0,.5);
    color:#f1f5f9;
  }
  .woocommerce-account .woocommerce form.login label,
  .woocommerce-account .woocommerce form.login .woocommerce-form-login__rememberme{
    color:#f1f5f9;
  }
  .woocommerce-account .woocommerce form.login input.input-text{
    background:#1e293b;
    border-color:#334155;
    color:#f1f5f9;
  }
  .woocommerce-account .woocommerce form.login input.input-text:hover{
    border-color:#475569;
  }
  .woocommerce-account .woocommerce form.login input.input-text:focus{
    border-color:#94a3b8;
    box-shadow:0 0 0 3px rgba(148,163,184,.2);
  }
  .woocommerce-account .woocommerce form.login .password-input .show-password-input{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") !important;
  }
  .woocommerce-account .woocommerce form.login .password-input .show-password-input.display-password{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E") !important;
  }
  .woocommerce-account .woocommerce form.login .password-input .show-password-input:hover{
    background-color:#334155 !important;
  }
  .woocommerce-account .woocommerce form.login .jcs-caps-warning{
    background:#422006;
    border-color:#78350f;
    color:#fcd34d;
  }
  .woocommerce-account .woocommerce form.login button.woocommerce-button,
  .woocommerce-account .woocommerce form.login [type="submit"].woocommerce-form-login__submit{
    background:#f1f5f9;
    color:#0f172a;
  }
  .woocommerce-account .woocommerce form.login button.woocommerce-button:hover,
  .woocommerce-account .woocommerce form.login [type="submit"].woocommerce-form-login__submit:hover{
    background:#e2e8f0;
  }
  .woocommerce-account .woocommerce form.login button.woocommerce-button.is-loading::after,
  .woocommerce-account .woocommerce form.login [type="submit"].woocommerce-form-login__submit.is-loading::after{
    border-color:rgba(15,23,42,.3);
    border-top-color:#0f172a;
  }
  .woocommerce-account .woocommerce > .woocommerce-error,
  .woocommerce-account .woocommerce-notices-wrapper .woocommerce-error{
    background:#3f1d1d;
    border-color:#7f1d1d;
    color:#fecaca;
  }
  .woocommerce-account .jcs-login-switch{
    background:#1e293b;
    border-color:#334155;
    color:#94a3b8;
  }
  .woocommerce-account .jcs-login-switch a{
    color:#f1f5f9;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .woocommerce-account .woocommerce form.login *,
  .woocommerce-account .woocommerce form.login *::before,
  .woocommerce-account .woocommerce form.login *::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
  }
}

/* v6.1.1 — Shared visual system with the Jannah popup login */
.woocommerce-account .woocommerce form.login{
  max-width:440px;
  padding:36px 32px;
  border-radius:16px;
}
.woocommerce-account .woocommerce form.login .form-row:last-of-type:not(.lost_password){
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.woocommerce-account .woocommerce form.login .woocommerce-form-login__rememberme{
  flex:1 1 auto;
  min-width:0;
}
.woocommerce-account .woocommerce form.login button.woocommerce-button,
.woocommerce-account .woocommerce form.login [type="submit"].woocommerce-form-login__submit{
  width:auto;
  min-width:110px;
  height:48px;
  padding:0 28px;
  flex:0 0 auto;
}
@media(max-width:600px){
  .woocommerce-account .woocommerce form.login{padding:26px 20px;}
}
/* Keep the approved white/navy design consistent regardless of OS theme. */
@media(prefers-color-scheme:dark){
  .woocommerce-account .woocommerce form.login{background:#fff;border-color:#e2e8f0;color:#0f172a;}
  .woocommerce-account .woocommerce form.login label,
  .woocommerce-account .woocommerce form.login .woocommerce-form-login__rememberme{color:#475569;}
  .woocommerce-account .woocommerce form.login input.input-text{background:#fff;border-color:#cbd5e1;color:#0f172a;}
  .woocommerce-account .woocommerce form.login button.woocommerce-button,
  .woocommerce-account .woocommerce form.login [type="submit"].woocommerce-form-login__submit{background:#111827;color:#fff;}
  .woocommerce-account .jcs-login-switch{background:#f8fafc;border-color:#e2e8f0;color:#64748b;}
  .woocommerce-account .jcs-login-switch a{color:#111827;}
}