/* ==========================================================
   PEPLABS — My Account login/register card
   Scoped under .plp-auth-card. Deep teal palette derived from
   #074858, pill tabs instead of a sliding indicator, softer
   corner radii — matches PepLabs' site-wide brand color.
   ========================================================== */

.plp-auth-card{
  --plp-bg-deep:#052E38;
  --plp-accent:#0E93AC;
  --plp-accent-soft:rgba(14,147,172,.16);
  --plp-neutral:#F4FAFB;
  --plp-grey:#C7D6DA;
  --plp-grey-dim:#7C99A0;
  --plp-border:rgba(255,255,255,.09);
  --plp-border-strong:rgba(255,255,255,.16);

  max-width:520px;
  margin:60px auto;
  padding:40px 36px 34px;
  border-radius:18px;
  border:1px solid var(--plp-border-strong);
  background:linear-gradient(160deg, #0A3F4D, #0A3F4D);
  box-shadow:0 24px 70px -18px rgba(2,15,19,.55);
  color:var(--plp-neutral);
}

/* Hello Elementor Child applies global heading/paragraph color and
   typography settings very broadly (Site Settings → Global Colors),
   which was overriding this card's h2/p text to near-invisible
   dark-on-dark. Scoped to headings/paragraphs only — NOT span/label/a,
   since those carry intentional accent colors elsewhere in this file
   that a broader blanket rule would incorrectly override too. */
.plp-auth-card h1, .plp-auth-card h2, .plp-auth-card h3, .plp-auth-card p{
  color: var(--plp-neutral) !important;
}

.plp-card-label{
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--plp-accent) !important;
}
.plp-card-title{
  margin:10px 0 0;
  font-size:27px;
  font-weight:800;
  color:var(--plp-neutral) !important;
}
.plp-card-desc{
  margin-top:8px;
  font-size:14px;
  line-height:1.55;
  color:var(--plp-grey) !important;
}

/* Tabs — pill-shaped, individually highlighted rather than a single
   sliding indicator, so this reads as a distinct interaction pattern
   rather than a recolored copy of the BODYLAB tab bar. */
.plp-auth-card .plp-tabs{
  display:flex;
  gap:6px;
  margin-top:20px;
  padding:4px;
  border-radius:100px;
  background:rgba(0,0,0,.28) !important;
  border:1px solid var(--plp-border);
}
.plp-auth-card .plp-tab-btn{
  flex:1;
  border:none !important;
  background:transparent !important;
  padding:10px 0;
  margin:0;
  box-shadow:none !important;
  font-size:13px;
  font-weight:600;
  color:var(--plp-grey-dim) !important;
  cursor:pointer;
  border-radius:100px;
  font-family:inherit;
  text-transform:none;
  transition:background 180ms, color 180ms;
}
.plp-auth-card .plp-tab-btn[aria-selected="true"]{
  background:var(--plp-accent) !important;
  color:#052E38 !important;
  box-shadow:0 4px 14px -4px rgba(14,147,172,.55) !important;
}
.plp-auth-card .plp-tab-btn:hover:not([aria-selected="true"]){ color:var(--plp-neutral) !important; }

/* No sliding indicator element needed for the pill-tab pattern, but
   keep it harmlessly hidden in case the shared JS still targets it. */
.plp-tab-indicator{ display:none !important; }

/* Defensive: Cloudflare's Turnstile script can sometimes render its
   widget even inside an ancestor with the `hidden` attribute, if it
   initializes before checking visibility. This guarantees it's never
   visible outside the Access Code panel regardless of that timing. */
.plp-panel[hidden] .cf-turnstile{
  display:none !important;
}

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

.plp-field{ margin:0 0 15px !important; padding:0 !important; }
.plp-field label{
  display:block;
  font-size:12px;
  font-weight:600;
  color:var(--plp-grey) !important;
  margin-bottom:6px;
}
.plp-field .required{ color:var(--plp-accent) !important; }

.plp-auth-card input.input-text{
  width:100%;
  padding:12px 14px;
  background:rgba(255,255,255,.05) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  border-radius:8px;
  color:var(--plp-neutral) !important;
  font-size:14px;
  font-family:inherit;
  transition:border-color 180ms, box-shadow 180ms, background 180ms;
}
.plp-auth-card input.input-text::placeholder{ color:var(--plp-grey-dim) !important; }
.plp-auth-card input.input-text:focus{
  outline:none;
  border-color:var(--plp-accent);
  background:rgba(0,0,0,.4);
  box-shadow:0 0 0 4px var(--plp-accent-soft);
}

/* WooCommerce's auto-injected password toggle — same Dashicons-font
   gap as BODYLAB's build, same inline-SVG fix, recolored to match. */
.plp-field .password-input{
  position:relative;
  display:block;
  width:100%;
}
.plp-field .password-input .input-text{ padding-right:42px; }
.plp-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;
}
.plp-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='%237C99A0' 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");
}
.plp-field .show-password-input .dashicons-hidden,
.plp-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='%230E93AC' 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");
}

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

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

.plp-helper-text{
  font-size:12.5px;
  color:var(--plp-grey-dim) !important;
  margin:0 0 15px;
}

/* Buttons — solid rounded-pill to match the tab language, rather than
   BODYLAB's rounded-rectangle treatment. */
.plp-btn.plp-btn-primary{
  display:block !important;
  width:100%;
  padding:13px 20px !important;
  border-radius:100px !important;
  border:none !important;
  background:var(--plp-accent) !important;
  color:#052E38 !important;
  font-size:14px;
  font-weight:700 !important;
  font-family:inherit;
  cursor:pointer;
  box-shadow:0 10px 24px -8px rgba(14,147,172,.5);
  transition:transform 180ms, box-shadow 180ms;
}
.plp-btn.plp-btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px -8px rgba(14,147,172,.65);
  color:#052E38 !important;
}
.plp-btn.plp-btn-primary.plp-btn-small{
  padding:9px 18px !important;
  font-size:12px;
  box-shadow:none;
  opacity:.9;
}
.plp-btn.plp-btn-primary.plp-btn-small:hover{ opacity:1; }

@media (max-width:600px){
  .plp-auth-card{ margin:28px 16px; padding:30px 22px 26px; }
}

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

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

/* ==========================================================
   Unify every WooCommerce button site-wide to the same teal
   pill treatment — Add to Cart, Buy Now, cart/checkout, My
   Account actions, quantity steppers.
   ========================================================== */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .single_add_to_cart_button,
.woocommerce a.added_to_cart,
.woocommerce #place_order,
.woocommerce .checkout-button,
.woocommerce .wc-proceed-to-checkout .button,
.woocommerce-cart .button,
.woocommerce-checkout .button,
.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-MyAccount-navigation .button,
a[class*="buy-now"],
button[class*="buy-now"]{
  background-color:#0E93AC !important;
  border-color:#0E93AC !important;
  color:#052E38 !important;
  font-weight:700 !important;
  border-radius:100px !important;
  box-shadow:none !important;
  transition:transform 180ms, opacity 180ms !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce a.added_to_cart:hover,
.woocommerce #place_order:hover,
.woocommerce .checkout-button:hover,
.woocommerce .wc-proceed-to-checkout .button:hover,
.woocommerce-cart .button:hover,
.woocommerce-checkout .button:hover,
.woocommerce-account .woocommerce-MyAccount-content .button:hover,
.woocommerce-account .woocommerce-MyAccount-navigation .button:hover,
a[class*="buy-now"]:hover,
button[class*="buy-now"]:hover{
  background-color:#0E93AC !important;
  color:#052E38 !important;
  opacity:.88;
  transform:translateY(-2px);
}

/* Quantity stepper (plus/minus) */
.woocommerce .quantity .plus,
.woocommerce .quantity .minus,
.woocommerce .quantity-nav .plus,
.woocommerce .quantity-nav .minus{
  background-color:transparent !important;
  border-color:#C7D6DA !important;
  color:#052E38 !important;
}
.woocommerce .quantity .plus:hover,
.woocommerce .quantity .minus:hover,
.woocommerce .quantity-nav .plus:hover,
.woocommerce .quantity-nav .minus:hover{
  background-color:#0E93AC !important;
  border-color:#0E93AC !important;
  color:#052E38 !important;
}