/* ============================================
   ACCOUNT MODAL — login/register
   ============================================
   Own file, own class prefix (berry-account-modal), separate from the
   simpler berry-auth-modal (the wishlist "please sign in" nudge in
   berry-reference.css) since this hosts real form fields rather than a
   two-button prompt. See inc/account-modal.php for the markup + the
   field/nonce contract this posts against.
   ============================================ */

.berry-account-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  z-index: 700;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.berry-account-modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.berry-account-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  width: min(440px, 92vw);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--clr-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 701;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.94);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.berry-account-modal.open {
  opacity: 1;
  pointer-events: all;
  transform: translate(-50%, -50%) scale(1);
}

.berry-account-modal__header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  background: var(--grad-brand);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.berry-account-modal__header img {
  height: 38px;
  display: block;
}

.berry-account-modal__close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none !important;
  background: rgba(255,255,255,0.25);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  transition: var(--transition);
}

.berry-account-modal__close:hover,
.berry-account-modal__close:focus {
  background: rgba(255,255,255,0.4) !important;
  color: #fff !important;
}

.berry-account-modal__tabs {
  display: flex;
  border-bottom: 1px solid var(--clr-surface-2);
}

.berry-account-modal__tab {
  flex: 1;
  padding: 18px 0 14px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--clr-text-dim) !important;
  background: var(--clr-surface) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -1px;
  transition: var(--transition);
}

.berry-account-modal__tab:hover,
.berry-account-modal__tab:focus {
  color: var(--clr-text-dim) !important;
  background: var(--clr-surface) !important;
}

.berry-account-modal__tab.is-active,
.berry-account-modal__tab.is-active:hover,
.berry-account-modal__tab.is-active:focus {
  color: var(--clr-primary) !important;
  background: var(--clr-surface) !important;
  border-bottom-color: var(--clr-primary) !important;
}

.berry-account-modal__body {
  padding: 28px 28px 32px;
}

.berry-account-modal__panel[hidden] {
  display: none;
}

.berry-account-modal__notices {
  margin-bottom: 18px;
}

.berry-account-modal__notices:empty {
  display: none;
  margin: 0;
}

.berry-account-modal__field {
  margin-bottom: 18px;
}

.berry-account-modal__field label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
  margin-bottom: 8px;
}

.berry-account-modal__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.berry-account-modal__input-wrap svg {
  position: absolute;
  left: 14px;
  color: var(--clr-text-dim);
  pointer-events: none;
}

.berry-account-modal__input-wrap input {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 16px 13px 42px;
  border: 1.5px solid var(--clr-surface-3);
  border-radius: 12px;
  font-size: 14px;
  color: var(--clr-text);
  background: var(--clr-surface);
  transition: var(--transition);
}

.berry-account-modal__input-wrap input:focus {
  outline: none;
  border-color: var(--clr-primary);
}

/* Explicit placeholder color — without this, WebKit's -webkit-text-
   fill-color on :invalid inputs below (needed to neutralize a red
   validation ring) bleeds into placeholder text too, rendering it in the
   same dark color as real typed text instead of a lighter hint. */
.berry-account-modal__input-wrap input::placeholder {
  color: var(--clr-text-dim);
  -webkit-text-fill-color: var(--clr-text-dim);
  opacity: 1;
}

/* Scoped to this modal only — per request, red validation/outline states
   elsewhere on the site are left as-is. Neutralizes the two CSS-level
   causes that could produce a red ring here: the browser's default
   :invalid styling (Firefox in particular draws a red glow on a required
   field) and autofill highlighting — both normally invisible on this
   design's own light, bordered inputs, so overriding them to the same
   neutral border color the field already uses is a safe no-op the rest of
   the time. */
.berry-account-modal input,
.berry-account-modal button {
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  /* Every red element reported here was a <button> (the tabs, the
     password-reveal toggle, the disabled Google/Facebook buttons) and
     never an <input> or <a> — the signature of forced-colors/high-contrast
     mode recoloring native buttons with the OS accent color, which
     overrides a page's own background/border on <button> elements unless
     explicitly opted out here. This is why it showed up site-wide (every
     button on every site gets it) rather than being caused by this
     page's own CSS. */
  forced-color-adjust: none;
}

.berry-account-modal input:invalid,
.berry-account-modal input:-webkit-autofill {
  border-color: var(--clr-surface-3) !important;
  box-shadow: none !important;
  -webkit-text-fill-color: var(--clr-text);
}

/* Last-resort safety net: any <button> in this modal that doesn't have its
   own more-specific hover/focus override (each real one above does, using
   its own intended colors) falls back to its PARENT's background/color on
   hover/focus instead of the parent theme's #c36 leak — same fallback
   pattern already established site-wide in berry-reference.css, just
   reinforced with !important here since that site-wide version alone
   wasn't enough to protect every button in this modal (see the two gaps
   fixed above, both found only after this modal had already shipped). */
.berry-account-modal button:hover,
.berry-account-modal button:focus {
  background-color: inherit !important;
  color: inherit !important;
}

.berry-account-modal__toggle {
  position: absolute;
  right: 12px;
  color: var(--clr-text-dim);
  display: flex;
  align-items: center;
  background: transparent !important;
  border: none !important;
}

.berry-account-modal__toggle:hover,
.berry-account-modal__toggle:focus {
  color: var(--clr-text-muted) !important;
  background: transparent !important;
  border: none !important;
}

.berry-account-modal__strength {
  height: 4px;
  border-radius: 2px;
  background: var(--clr-surface-2);
  margin-top: 10px;
  overflow: hidden;
}

.berry-account-modal__strength-fill {
  height: 100%;
  width: 0%;
  border-radius: 2px;
  background: var(--clr-surface-3);
  transition: width 0.2s ease, background 0.2s ease;
}

.berry-account-modal__mismatch {
  display: none;
  font-size: 12px;
  color: #d33;
  margin: -10px 0 18px;
}

.berry-account-modal__mismatch.is-visible {
  display: block;
}

.berry-account-modal__row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: -6px 0 18px;
}

.berry-account-modal__submit {
  display: block;
  width: 100%;
  padding: 14px 20px;
  border: 0 !important;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--grad-brand);
  cursor: pointer;
  transition: var(--transition);
}

.berry-account-modal__submit:hover,
.berry-account-modal__submit:focus {
  background: var(--grad-brand) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(156,80,255,0.35);
}

/* .berry-social-login__btn's real styling (border/background/pill shape/
   hover) lives in my-account-theme.css, scoped to `body.woocommerce-account`
   and only enqueued on the My Account page (see functions.php's
   is_account_page() gate) — this modal renders on every page via wp_footer,
   so none of that ever reaches it there. Self-contained equivalent below,
   scoped to .berry-account-modal only so the real My Account page keeps
   using its own existing version unchanged. Also extends the hover fix to
   the disabled <button> variant (unconfigured Google/Facebook), which
   never had one even on the original page — button:hover/:focus still
   applies to a disabled button visually, even though it can't be clicked,
   so it was just as exposed to the parent theme's #c36 bug. */
.berry-account-modal .berry-social-login {
  margin-top: 18px;
}

.berry-account-modal .berry-social-login__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 16px;
  color: var(--clr-text-dim);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.berry-account-modal .berry-social-login__divider::before,
.berry-account-modal .berry-social-login__divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--clr-border-2);
}

.berry-account-modal .berry-social-login__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 11px 20px;
  margin-bottom: 10px;
  border-radius: 50px;
  border: 1.5px solid var(--clr-border-2) !important;
  background: var(--clr-surface) !important;
  color: var(--clr-text) !important;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.berry-account-modal a.berry-social-login__btn:hover {
  border-color: var(--clr-primary) !important;
  background: #f6f0ff !important;
  color: var(--clr-text) !important;
  transform: translateY(-1px);
}
/* The disabled <button> variant (unconfigured Google/Facebook — see
   inc/social-login.php) never got this same protection: only the <a>
   selector above was written despite this file's own comment saying
   otherwise. button:hover/:focus still applies to a disabled button
   visually, so without this it was still exposed to the parent theme's
   #c36 leak on hover/keyboard-focus. */
.berry-account-modal button.berry-social-login__btn:hover,
.berry-account-modal button.berry-social-login__btn:focus {
  border-color: var(--clr-border-2) !important;
  background: var(--clr-surface) !important;
  color: var(--clr-text) !important;
}
.berry-account-modal .berry-social-login__btn svg {
  flex: 0 0 auto;
}
.berry-account-modal .berry-social-login__btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.berry-account-modal .berry-social-login__notice {
  font-size: 12px;
  color: var(--clr-text-dim);
  text-align: center;
  margin-top: 4px;
}

.berry-account-modal__switch {
  text-align: center;
  font-size: 13px;
  color: var(--clr-text-muted);
  margin: 18px 0 0;
}

.berry-account-modal__switch a {
  color: var(--clr-primary);
  font-weight: 700;
}

.berry-account-modal__forgot {
  font-size: 13px;
  color: var(--clr-text-muted);
  text-decoration: underline;
}