/* ==========================================================
   BODYLAB — My Account login/register card
   Scoped under .blp-auth-card so it can't leak into other
   WoodMart form styling elsewhere on the site.
   ========================================================== */

.blp-auth-card{
  --blp-bg:#062E39;
  --blp-bg-deep:#04222B;
  --blp-accent:#0EA5E9;
  --blp-accent-soft:rgba(14,165,233,.16);
  --blp-neutral:#F8FAFC;
  --blp-grey:#CBD5E1;
  --blp-grey-dim:#7E97A0;
  --blp-border:rgba(255,255,255,.08);
  --blp-border-strong:rgba(255,255,255,.14);

  max-width:520px;
  margin:60px auto;
  padding:44px 40px 38px;
  border-radius:24px;
  border:1px solid var(--blp-border-strong);
  background:linear-gradient(165deg, #0A3D4A, #062E39);
  box-shadow:0 30px 80px -20px rgba(1,10,13,.5);
  color:var(--blp-neutral);
}

.blp-card-label{
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--blp-accent);
}
.blp-card-title{
  margin:12px 0 0;
  font-size:28px;
  font-weight:800;
  color:var(--blp-neutral);
}
.blp-card-desc{
  margin-top:9px;
  font-size:14.5px;
  line-height:1.55;
  color:var(--blp-grey);
}

/* Tabs
   NOTE: WoodMart's own theme stylesheet gives generic buttons a white
   background + dark text and can load after ours depending on enqueue
   order, so these are pinned with !important to guarantee they win. */
.blp-auth-card .blp-tabs{
  position:relative;
  display:grid;
  grid-template-columns:repeat(var(--blp-tab-count, 2), 1fr);
  margin-top:22px;
  padding:4px;
  border-radius:12px;
  background:rgba(4,34,43,.55) !important;
  border:1px solid var(--blp-border);
}
.blp-auth-card .blp-tabs-3{ --blp-tab-count:3; }
.blp-auth-card .blp-tab-indicator{
  position:absolute;
  top:4px; left:4px;
  width:calc((100% / var(--blp-tab-count, 2)) - (8px / var(--blp-tab-count, 2)));
  height:calc(100% - 8px);
  border-radius:9px;
  background:var(--blp-accent) !important;
  box-shadow:0 4px 16px -4px rgba(14,165,233,.6);
  transition:transform 420ms cubic-bezier(.16,1,.3,1);
  z-index:0;
}
.blp-auth-card .blp-tab-btn{
  position:relative;
  z-index:1;
  border:none !important;
  background:transparent !important;
  padding:11px 0;
  margin:0;
  width:100%;
  box-shadow:none !important;
  font-size:13.5px;
  font-weight:600;
  color:var(--blp-grey-dim) !important;
  cursor:pointer;
  border-radius:9px;
  font-family:inherit;
  text-transform:none;
}
.blp-auth-card .blp-tab-btn[aria-selected="true"]{ color:#04222B !important; }
.blp-auth-card .blp-tab-btn:hover:not([aria-selected="true"]){ color:var(--blp-neutral) !important; }

/* Panels */
.blp-panel{ margin-top:26px; }
.blp-panel[hidden]{ display:none; }

.blp-field{ margin:0 0 16px !important; padding:0 !important; }
.blp-field label{
  display:block;
  font-size:12.5px;
  font-weight:600;
  color:var(--blp-grey);
  margin-bottom:7px;
}
.blp-field .required{ color:var(--blp-accent); }

.blp-auth-card input.input-text{
  width:100%;
  padding:12.5px 14px;
  background:rgba(4,34,43,.45);
  border:1px solid var(--blp-border);
  border-radius:10px;
  color:var(--blp-neutral);
  font-size:14.5px;
  font-family:inherit;
  transition:border-color 180ms, box-shadow 180ms, background 180ms;
}
.blp-auth-card input.input-text::placeholder{ color:var(--blp-grey-dim); }
.blp-auth-card input.input-text:focus{
  outline:none;
  border-color:var(--blp-accent);
  background:rgba(4,34,43,.7);
  box-shadow:0 0 0 4px var(--blp-accent-soft);
}

/* WooCommerce auto-wraps password fields in <span class="password-input">
   and injects a .show-password-input toggle button that relies on the
   Dashicons font. Dashicons usually isn't loaded on the frontend, which
   is why it was rendering as a blank white square — this replaces the
   glyph with an inline SVG eye icon instead of depending on that font. */
.blp-field .password-input{
  position:relative;
  display:block;
  width:100%;
}
.blp-field .password-input .input-text{
  padding-right:42px;
}
.blp-field .show-password-input{
  position:absolute !important;
  top:50%;
  right:6px;
  transform:translateY(-50%);
  width:30px;
  height:30px;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.blp-field .show-password-input .dashicons{
  width:17px;
  height:17px;
  font-size:0;
  background-repeat:no-repeat;
  background-position:center;
  background-size:17px 17px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237E97A0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
.blp-field .show-password-input .dashicons-hidden,
.blp-field .show-password-input .dashicons-no{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230EA5E9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M10.6 10.6a2 2 0 0 0 2.8 2.8'/%3E%3Cpath d='M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 7 11 7a13.16 13.16 0 0 1-1.67 2.68M6.1 6.1C3.73 7.71 2 10 1 12c0 0 4 7 11 7a9.27 9.27 0 0 0 4.34-1.04'/%3E%3C/svg%3E");
}

.blp-form-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:-2px 0 18px !important;
}
.blp-remember{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--blp-grey);
  cursor:pointer;
}
.blp-forgot-link{
  font-size:13px;
  font-weight:500;
  color:var(--blp-accent);
  text-decoration:none;
}
.blp-forgot-link:hover{ text-decoration:underline; }

.blp-policy-check{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:12.5px;
  line-height:1.55;
  color:var(--blp-grey-dim);
  cursor:pointer;
  margin:2px 0 20px;
}
.blp-policy-check input{ margin-top:2px; flex-shrink:0; }

.blp-helper-text{
  font-size:13px;
  color:var(--blp-grey-dim);
  margin:0 0 16px;
}

.blp-btn.blp-btn-primary{
  display:block !important;
  width:100%;
  padding:13.5px 20px !important;
  border-radius:10px !important;
  border:none !important;
  background:var(--blp-accent) !important;
  color:#04222B !important;
  font-size:14.5px;
  font-weight:700 !important;
  font-family:inherit;
  cursor:pointer;
  box-shadow:0 12px 28px -10px rgba(14,165,233,.55);
  transition:transform 180ms, box-shadow 180ms;
}
.blp-btn.blp-btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 34px -10px rgba(14,165,233,.7);
  color:#04222B !important;
}
.blp-btn.blp-btn-primary.blp-btn-small{
  padding:10px 18px !important;
  font-size:12.5px;
  box-shadow:none;
  opacity:.9;
}
.blp-btn.blp-btn-primary.blp-btn-small:hover{ opacity:1; }

@media (max-width:600px){
  .blp-auth-card{ margin:30px 16px; padding:32px 24px 28px; }
}

/* One-time access code panel */
.blp-otp-label{
  font-size:13px;
  color:var(--blp-grey);
  margin:0 0 10px;
}
.blp-otp-code-input{
  letter-spacing:.5em;
  text-align:center;
  font-size:20px !important;
  font-weight:700;
}
#blpOtpMsg,#blpOtpVerifyMsg{
  min-height:18px;
  margin-top:10px !important;
  margin-bottom:0;
}
#blpOtpMsg.is-error,#blpOtpVerifyMsg.is-error{ color:#F87171; }
#blpOtpMsg.is-success,#blpOtpVerifyMsg.is-success{ color:var(--blp-accent); }

.blp-btn.blp-btn-primary[disabled]{
  opacity:.6;
  cursor:not-allowed;
  transform:none !important;
}

/* ==========================================================
   Unify every other WooCommerce button across the My Account
   area (Orders, Downloads, Addresses, Account details, Pay,
   Cancel, Logout, etc.) to the same blue background / dark
   navy text used on the auth card, instead of WoodMart's
   default light button styling.
   ========================================================== */
.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-MyAccount-content button.button,
.woocommerce-account .woocommerce-MyAccount-content input.button,
.woocommerce-account .woocommerce-MyAccount-content a.button,
.woocommerce-account .woocommerce-MyAccount-navigation .button{
  background-color:#0EA5E9 !important;
  border-color:#0EA5E9 !important;
  color:#04222B !important;
  font-weight:700 !important;
  border-radius:10px !important;
  box-shadow:none !important;
  transition:transform 180ms, opacity 180ms !important;
}
.woocommerce-account .woocommerce-MyAccount-content .button:hover,
.woocommerce-account .woocommerce-MyAccount-content button.button:hover,
.woocommerce-account .woocommerce-MyAccount-content input.button:hover,
.woocommerce-account .woocommerce-MyAccount-content a.button:hover{
  background-color:#0EA5E9 !important;
  color:#04222B !important;
  opacity:.88;
  transform:translateY(-2px);
}