/* =============================================================================
   Passport — Modal Stylesheet  v1.3.9
   Design system uses --pwp-* custom properties scoped to plugin elements.
   No theme inherits; all values are explicit to ensure cross-site consistency.
   ============================================================================= */

/* ── Design tokens ────────────────────────────────────────────────────────── */
.pwp-modal,
.pwp-page-wrap {
  /* Card */
  --pwp-card-bg:          #eef0f8;
  --pwp-card-radius:      20px;
  --pwp-card-shadow:      0 8px 16px rgba(40, 70, 68, .15),
                             0 32px 64px rgba(40, 70, 68, .12);
  --pwp-card-padding:     36px 40px 32px;

  /* Typography */
  --pwp-font:             'Poppins', 'Segoe UI', Arial, sans-serif;
  --pwp-color-text:       #1a1a2e;
  --pwp-color-subtle:     #4a5e5c;

  /* Inputs */
  --pwp-input-bg:         rgba(255,255,255,.72);
  --pwp-input-border:     rgba(92, 122, 118, .30);
  --pwp-input-radius:     12px;
  --pwp-input-height:     44px;
  --pwp-input-focus-ring: rgba(92, 122, 118, .22);
  --pwp-input-focus-border: rgba(92, 122, 118, .80);

  /* Primary button */
  --pwp-btn-bg:           #5c7a76;
  --pwp-btn-bg-hover:     #4a6460;
  --pwp-btn-color:        #ffffff;
  --pwp-btn-radius:       14px;
  --pwp-btn-shadow:       0 4px 16px rgba(92, 122, 118, .30);

  /* Tabs */
  --pwp-tab-bg:           rgba(92, 122, 118, .12);
  --pwp-tab-color:        #4a6460;
  --pwp-tab-active-bg:    #5c7a76;
  --pwp-tab-active-color: #ffffff;
  --pwp-tab-radius:       8px;

  /* OTP boxes */
  --pwp-otp-bg:           rgba(255,255,255,.8);
  --pwp-otp-border:       rgba(92, 122, 118, .25);
  --pwp-otp-radius:       14px;
  /* Slightly stronger shadow so OTP boxes feel "pressable" */
  --pwp-otp-shadow:       0 6px 16px rgba(40, 70, 68, .16);

  /* Messages */
  --pwp-color-error:      #c0392b;
  --pwp-color-success:    #1e7e34;

  /* Links */
  --pwp-link-color:       #4a6460;

  /* Secondary button */
  --pwp-secondary-bg:     rgba(255,255,255,.55);
  --pwp-secondary-border: rgba(92, 122, 118, .30);
  --pwp-secondary-color:  #1a1a2e;
  --pwp-secondary-radius: 12px;

  /* Phone field */
  --pwp-dial-code-width:  128px;
}

/* ── Backdrop ─────────────────────────────────────────────────────────────── */
.pwp-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 20, 20, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  padding: 16px;
  box-sizing: border-box;
}
.pwp-backdrop.is-open { display: flex; }

/* ── Modal card ───────────────────────────────────────────────────────────── */
.pwp-modal {
  box-sizing: border-box;
  width: min(480px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  /*
    Mobile browsers with dynamic address bars make 100vh unreliable.
    We prefer a JS-updated --pwp-vh (based on window.innerHeight) and
    fall back to modern viewport units when available.
  */
  max-height: calc(var(--pwp-vh, 1vh) * 100 - 32px);
  overflow: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  font-family: var(--pwp-font);
  font-size: 15px;
  color: var(--pwp-color-text);
  /*
    Theme/WooCommerce templates often apply broad container rules.
    Lock the modal container visuals to the Style tab variables.
  */
  background: var(--pwp-card-bg) !important;
  border-radius: var(--pwp-card-radius) !important;
  box-shadow: var(--pwp-card-shadow) !important;
  padding: var(--pwp-card-padding) !important;
  position: relative;
}

/* Prefer modern dynamic viewport units when supported */
@supports (height: 100dvh) {
  .pwp-modal { max-height: calc(100dvh - 32px); }
}

/* Every descendant gets the plugin font — no theme bleed */
.pwp-modal * {
  font-family: var(--pwp-font);
  box-sizing: border-box;
  pointer-events: auto;
}

/*
  Theme hardening
  Many themes (and WooCommerce checkout templates) apply broad button/input rules
  such as text-transform, font-size, padding, line-height, border-radius, etc.
  We explicitly reset the most common bleed-through inside the modal so the
  checkout modal matches the regular modal.
*/
.pwp-modal button,
.pwp-modal input,
.pwp-modal select,
.pwp-modal textarea {
  font-family: var(--pwp-font) !important;
  text-transform: none;
  letter-spacing: normal;
  line-height: normal;
  border-radius: 0;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

/* ── Close button ─────────────────────────────────────────────────────────── */
.pwp-dismiss {
  position: absolute;
  top: 12px;
  right: 14px;
  /* Size explicitly so border-radius:50% makes a true circle */
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50% !important;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: var(--pwp-color-subtle);
  transition: background .15s, color .15s;
  z-index: 10;
  text-decoration: none;
}
.pwp-dismiss:hover {
  background: rgba(92, 122, 118, .14);
  color: var(--pwp-color-text);
  text-decoration: none;
}

/* Checkout gate: modal is mandatory — hide the dismiss link as a CSS backstop.
   Only applied when JS has confirmed the gate is active (class added by openModal). */
#pwp-modal-backdrop.pwp-gate-active .pwp-dismiss {
  display: none !important;
}

/* ── Checkout gate notice ──────────────────────────────────────────────────── */
.pwp-gate-notice {
  display: none;
  margin: 0;
  padding: 0 0 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--pwp-color-subtle);
  text-align: center;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.pwp-header {
  text-align: center;
  padding-right: 0;
  margin-bottom: 24px;
}

.pwp-logo-wrap {
  display: flex;
  justify-content: center;
  margin: 0 0 16px;
}
.pwp-logo {
  max-width: min(90%, var(--pwp-logo-max-width, 240px));
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Tabs (Login / Register) */
.pwp-modal.pwp-view-otp-verify .pwp-tabs,
.pwp-page-wrap .pwp-modal.pwp-view-otp-verify .pwp-tabs,
.pwp-modal.pwp-view-otp-channel-select .pwp-tabs,
.pwp-modal.pwp-view-otp-sms-request .pwp-tabs,
.pwp-modal.pwp-view-otp-sms-verify .pwp-tabs {
  display: none;
}

/* Optional: show Login/Register tabs on the OTP channel selector screen ("Choose verification method"). */
.pwp-modal.pwp-show-tabs-on-otp-choose.pwp-view-otp-channel-select .pwp-tabs {
  display: flex;
}

.pwp-tabs {
  display: flex;
  gap: 4px;
  background: var(--pwp-tab-bg) !important;
  border-radius: var(--pwp-tab-radius) !important;
  padding: 4px;
  margin-bottom: 20px;
}
.pwp-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  border: none;
  background: transparent;
  padding: 9px 16px;
  margin: 0;
  border-radius: var(--pwp-tab-radius) !important;
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  font-family: var(--pwp-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--pwp-tab-color) !important;
  transition: background .18s, color .18s, box-shadow .18s;
  white-space: nowrap;
}
.pwp-tab.is-active {
  background: var(--pwp-tab-active-bg) !important;
  color: var(--pwp-tab-active-color) !important;
  box-shadow: 0 2px 8px rgba(92, 122, 118, .28);
}

/* Unified mode: heading replaces tabs when registration form is off but OTP auto-creates */
.pwp-heading-unified {
  font-family: var(--pwp-font);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .02em;
  text-align: center;
  color: var(--pwp-text) !important;
  background: none !important;
  padding: 4px 0 0 0;
  margin: 0 0 16px 0;
}
/* In unified mode, the heading replaces the title for the main OTP flow.
   Show the dynamic title again for secondary views (forgot, reset, verify, phone). */
.pwp-unified-mode .pwp-title { display: none; }
.pwp-unified-mode.pwp-view-forgot .pwp-title,
.pwp-unified-mode.pwp-view-resetpass .pwp-title,
.pwp-unified-mode.pwp-view-otp-verify .pwp-title,
.pwp-unified-mode.pwp-view-otp-sms-request .pwp-title,
.pwp-unified-mode.pwp-view-otp-sms-verify .pwp-title,
.pwp-unified-mode.pwp-view-phone-prompt-request .pwp-title,
.pwp-unified-mode.pwp-view-phone-prompt-verify .pwp-title { display: block; }
/* Hide the unified heading on secondary views where the dynamic title takes over */
.pwp-unified-mode.pwp-view-forgot .pwp-heading-unified,
.pwp-unified-mode.pwp-view-resetpass .pwp-heading-unified,
.pwp-unified-mode.pwp-view-otp-verify .pwp-heading-unified,
.pwp-unified-mode.pwp-view-otp-sms-request .pwp-heading-unified,
.pwp-unified-mode.pwp-view-otp-sms-verify .pwp-heading-unified,
.pwp-unified-mode.pwp-view-phone-prompt-request .pwp-heading-unified,
.pwp-unified-mode.pwp-view-phone-prompt-verify .pwp-heading-unified { display: none; }

/* Title */
.pwp-title {
  margin: 0 0 6px;
  font-family: var(--pwp-font);
  font-size: 22px;
  font-weight: 700;
  color: var(--pwp-color-text);
  letter-spacing: -.01em;
}

/* OTP-specific subtitle */
.pwp-subtitle {
  margin: 4px 0 0;
  font-family: var(--pwp-font);
  font-size: 14px;
  color: var(--pwp-color-subtle);
  line-height: 1.5;
}

/* SMS "didn't arrive" callout (2.8.17) — distinct from subtitle so it
   doesn't read as part of the primary instruction. Amber tint signals
   "useful info, not an error." Left border anchors the eye. */
.pwp-sms-help {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 6px;
  padding: 10px 12px;
  background: rgba(245, 158, 11, .08);
  border-left: 3px solid #f59e0b;
  border-radius: 6px;
  font-family: var(--pwp-font);
  font-size: 13px;
  line-height: 1.45;
  color: var(--pwp-color-text);
}
.pwp-sms-help-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  fill: #b45309;
}
.pwp-sms-help strong { font-weight: 600; }
.pwp-sms-help em { font-style: normal; font-weight: 600; color: var(--pwp-btn-bg); }

.pwp-center{ text-align:center; }

/* Hide Login/Register tabs during post-login phone prompt */
.pwp-modal.pwp-view-phone-prompt-request .pwp-tabs,
.pwp-modal.pwp-view-phone-prompt-verify .pwp-tabs,
.pwp-modal.pwp-view-resetpass .pwp-tabs{ display:none; }

/* Status message */
.pwp-message {
  min-height: 20px;
  font-family: var(--pwp-font);
  font-size: 13px;
  font-weight: 500;
  color: var(--pwp-color-error);
  margin: 8px 0 0;
  text-align: center;
  transition: color .2s ease;
}
.pwp-message.is-ok {
  color: var(--pwp-color-success);
  font-size: 14px;
  font-weight: 600;
}
.pwp-message.is-pending {
  font-size: 15px;
  font-weight: 600;
  color: var(--pwp-btn-bg);
  letter-spacing: .01em;
  animation: pwp-pulse 1.2s ease-in-out infinite;
}
@keyframes pwp-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .5; }
}

/* Success state shown after OTP verification while auth cookies/redirect finalize */
.pwp-success-activating {
  margin: 14px 0 0;
  text-align: center;
  font-family: var(--pwp-font);
  font-size: 15px;
  font-weight: 600;
  color: var(--pwp-color-success);
  line-height: 1.35;
}

/* ── Body / forms ─────────────────────────────────────────────────────────── */
.pwp-body { display: block; }

.pwp-form {
  display: none;
  gap: 12px;
  width: 100%;
  min-width: 0;
}
.pwp-form label,
.pwp-form input,
.pwp-form textarea,
.pwp-form select { min-width: 0; }

/* Progressive enhancement */
html:not(.pwp-js) .pwp-form[data-default="1"] { display: grid; }
html.pwp-js .pwp-form                          { display: none; }
html.pwp-js .pwp-form.is-active                { display: grid; }
.pwp-form.is-active                               { display: grid; }

/* Labels */
.pwp-form label {
  display: grid;
  gap: 6px;
  font-family: var(--pwp-font);
  font-size: 13px;
  font-weight: 600;
  color: var(--pwp-color-subtle);
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* Text / email / password inputs */
.pwp-form input[type="text"],
.pwp-form input[type="email"],
.pwp-form input[type="password"] {
  width: 100%;
  max-width: 100% !important;
  /* Checkout/theme CSS often forces input heights; lock ours to match modal design */
  height: var(--pwp-input-height) !important;
  min-height: var(--pwp-input-height) !important;
  line-height: calc(var(--pwp-input-height) - 2px) !important;
  padding: 0 .85em !important;
  margin-top: 4px;
  font-family: var(--pwp-font);
  font-size: 16px;
  font-weight: 400;
  color: var(--pwp-color-text);
  background: var(--pwp-input-bg);
  border: 1.5px solid var(--pwp-input-border);
  border-radius: var(--pwp-input-radius);
  outline: none;
  transition: border-color .18s, box-shadow .18s;
  -webkit-user-select: text;
  user-select: text;
  touch-action: manipulation;
  box-sizing: border-box;
}
.pwp-form input[type="text"]:focus,
.pwp-form input[type="email"]:focus,
.pwp-form input[type="password"]:focus {
  border-color: var(--pwp-input-focus-border);
  box-shadow: 0 0 0 3px var(--pwp-input-focus-ring);
}

/* ── Phone field: country-code select + tel input composite ───────────────── */
.pwp-phone-field {
  display: flex;
  align-items: stretch;
  margin-top: 4px;
  background: var(--pwp-input-bg);
  border: 1.5px solid var(--pwp-input-border);
  border-radius: var(--pwp-input-radius);
  overflow: hidden;
  transition: border-color .18s, box-shadow .18s;
}

/* ── Phone field (v1.6.3): country code select OUTSIDE the input ─────────── */
.pwp-phone-wrap {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-top: 4px;
}
.pwp-phone-wrap .pwp-dial-code {
  width: var(--pwp-dial-code-width, 128px);
  max-width: 200px;
  padding: 0 8px 0 10px;
  font-family: var(--pwp-font);
  font-size: 15px;
  font-weight: 500;
  color: var(--pwp-color-text);
  background: var(--pwp-input-bg);
  border: 1.5px solid var(--pwp-input-border);
  border-radius: var(--pwp-input-radius);
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%234a5e5c' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 24px;
}
.pwp-phone-wrap .pwp-phone-input {
  flex: 1;
  min-width: 0;
  height: var(--pwp-input-height) !important;
  min-height: var(--pwp-input-height) !important;
  line-height: calc(var(--pwp-input-height) - 2px) !important;
  padding: 0 .85em !important;
  font-family: var(--pwp-font);
  font-size: 16px;
  font-weight: 400;
  color: var(--pwp-color-text);
  background: var(--pwp-input-bg);
  border: 1.5px solid var(--pwp-input-border);
  border-radius: var(--pwp-input-radius);
  outline: none;
  -webkit-user-select: text;
  user-select: text;
  touch-action: manipulation;
  box-sizing: border-box;
}
.pwp-phone-wrap:focus-within .pwp-dial-code,
.pwp-phone-wrap:focus-within .pwp-phone-input {
  border-color: var(--pwp-input-focus-border);
  box-shadow: 0 0 0 3px var(--pwp-input-focus-ring);
}
.pwp-phone-field:focus-within {
  border-color: var(--pwp-input-focus-border);
  box-shadow: 0 0 0 3px var(--pwp-input-focus-ring);
}
.pwp-dial-code {
  flex-shrink: 0;
  height: var(--pwp-input-height) !important;
  min-height: var(--pwp-input-height) !important;
  line-height: calc(var(--pwp-input-height) - 2px) !important;
  padding: 0 6px 0 10px;
  font-family: var(--pwp-font);
  font-size: 15px;
  font-weight: 500;
  color: var(--pwp-color-text);
  background: transparent;
  border: none;
  border-right: 1.5px solid var(--pwp-input-border);
  border-radius: 0;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  /* Subtle dropdown arrow */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%234a5e5c' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 24px;
}
.pwp-dial-code:focus { outline: none; }
.pwp-phone-field input[type="tel"] {
  flex: 1;
  min-width: 0;
  height: var(--pwp-input-height) !important;
  min-height: var(--pwp-input-height) !important;
  line-height: calc(var(--pwp-input-height) - 2px) !important;
  padding: 0 .85em !important;
  font-family: var(--pwp-font);
  font-size: 16px;
  font-weight: 400;
  color: var(--pwp-color-text);
  background: transparent;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-user-select: text;
  user-select: text;
  touch-action: manipulation;
  box-sizing: border-box;
}

/* Checkbox */
.pwp-checkbox {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 2px;
  user-select: none;
  font-family: var(--pwp-font);
  font-size: 14px;
  font-weight: 400;
  color: var(--pwp-color-subtle);
  text-transform: none;
  letter-spacing: 0;
}
.pwp-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--pwp-btn-bg);
  cursor: pointer;
  flex-shrink: 0;
  /* Theme hardening: some themes hide checkboxes with !important rules */
  display: inline-block !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: static !important;
  margin: 0 !important;
  -webkit-appearance: auto !important;
  appearance: auto !important;
}

/* Extra specificity for aggressive checkout/theme CSS */
.pwp-modal .pwp-checkbox.pwp-checkbox input[type="checkbox"],
.pwp-page-wrap .pwp-checkbox.pwp-checkbox input[type="checkbox"] {
  display: inline-block !important;
  opacity: 1 !important;
  visibility: visible !important;
  -webkit-appearance: auto !important;
  appearance: auto !important;
}

/* ── OTP digit boxes ──────────────────────────────────────────────────────── */
.pwp-otp-boxes {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
}
.pwp-otp-box {
  /* Square inputs (were slightly rectangular) */
  width: 60px;
  height: 60px;
  padding: 0;
  text-align: center;
  font-family: var(--pwp-font);
  font-size: 26px;
  font-weight: 600;
  color: var(--pwp-color-text);
  background: var(--pwp-otp-bg);
  border: 1.5px solid var(--pwp-otp-border);
  border-radius: var(--pwp-otp-radius);
  box-shadow: var(--pwp-otp-shadow);
  outline: none;
  transition: border-color .18s, box-shadow .18s;
  -webkit-user-select: text;
  user-select: text;
  touch-action: manipulation;
  line-height: 60px;
}
.pwp-otp-box:focus {
  border-color: var(--pwp-input-focus-border);
  box-shadow: 0 0 0 3px var(--pwp-input-focus-ring),
              var(--pwp-otp-shadow);
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */

/* Primary CTA */
.pwp-primary {
  margin-top: 4px;
  width: 100%;
  padding: 15px 20px !important;
  font-family: var(--pwp-font);
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  color: var(--pwp-btn-color) !important;
  background: var(--pwp-btn-bg) !important;
  border: none !important;
  border-radius: var(--pwp-btn-radius) !important;
  box-shadow: var(--pwp-btn-shadow) !important;
  cursor: pointer;
  transition: background .18s, box-shadow .18s, transform .12s;
}
.pwp-primary:hover {
  background: var(--pwp-btn-bg-hover) !important;
  box-shadow: 0 6px 20px rgba(92, 122, 118, .40) !important;
  transform: translateY(-1px);
}
.pwp-primary:active { transform: translateY(0); }
.pwp-primary:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}
/* 2.8.18: When the OTP boxes aren't fully filled, the submit button is gated.
   Distinguish this from the generic "submitting" disabled state with reduced
   opacity and a subtle desaturated tone, so the user reads it as "fill the
   boxes first" rather than "the system is busy." */
.pwp-primary[data-otp-incomplete] {
  opacity: .42;
  filter: saturate(.6);
  box-shadow: none;
}

/* Secondary (social) buttons */
.pwp-secondary {
  width: 100%;
  padding: 12px 16px !important;
  font-family: var(--pwp-font);
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--pwp-secondary-color);
  background: var(--pwp-secondary-bg);
  border: 1.5px solid var(--pwp-secondary-border);
  border-radius: var(--pwp-secondary-radius) !important;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.pwp-secondary:hover {
  background: rgba(255,255,255,.8);
  border-color: rgba(92, 122, 118, .55);
}

/* Link-style buttons */
.pwp-link {
  background: transparent;
  border: none;
  padding: 8px 0 !important;
  font-family: var(--pwp-font);
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: var(--pwp-link-color);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  transition: opacity .15s;
}
.pwp-link:hover   { opacity: .75; }
.pwp-link:disabled {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

.pwp-help {
  font-family: var(--pwp-font);
  font-size: 13px;
  color: var(--pwp-color-subtle);
  margin: 6px 0 10px;
}

/* ── OTP countdown ────────────────────────────────────────────────────────── */
.pwp-otp-countdown {
  font-family: var(--pwp-font);
  font-size: 13px;
  color: var(--pwp-color-subtle);
  text-align: center;
  margin-top: 6px;
}

/* ── Social buttons container ─────────────────────────────────────────────── */
.pwp-social {
  display: flex;
  flex-direction: column; /* default; --icons variant overrides to row */
  gap: 8px;
  margin-top: 4px;
}
/* Note: display:none is set in the provider layout section below */

/* ── Link row (Forgot / Email code) ──────────────────────────────────────── */
.pwp-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── Full-page card (used by /login and shortcode mode=page) ──────────────── */
.pwp-page-wrap {
  min-height: calc(100vh - 40px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  font-family: var(--pwp-font);
}
.pwp-page-card {
  width: 100%;
  max-width: 480px;
  background: var(--pwp-card-bg);
  border-radius: var(--pwp-card-radius);
  box-shadow: var(--pwp-card-shadow);
  padding: var(--pwp-card-padding);
}
.pwp-page-inner .pwp-modal {
  position: static !important;
  transform: none !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: none !important;
  background: transparent !important;
}
.pwp-page-inner #pwp-modal-backdrop { display: none !important; }

/* ── Mobile / iOS Safari reliability ─────────────────────────────────────── */
.pwp-modal { max-height: calc(100vh - 32px); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
.pwp-modal input,
.pwp-modal textarea,
.pwp-modal select {
  -webkit-user-select: text;
  user-select: text;
  touch-action: manipulation;
  pointer-events: auto;
}


/* Provider buttons layout */
.pwp-social { margin-top: 12px; }
.pwp-social .pwp-secondary { display: none; } /* JS enables only configured providers */

/* ── Stacked layout (full-width buttons with icon + label) ────────────────── */
.pwp-social--stacked .pwp-secondary.is-enabled {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 8px;
  padding: 11px 16px !important;
  text-align: left;
  border-radius: var(--pwp-provider-btn-radius, var(--pwp-btn-radius, 10px)) !important;
}
.pwp-social--stacked .pwp-provider-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.pwp-social--stacked .pwp-provider-icon svg {
  width: 20px;
  height: 20px;
}
.pwp-social--stacked .pwp-provider-label {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--pwp-font);
  color: var(--pwp-secondary-color);
  white-space: nowrap;
}

/* ── Icon row layout ──────────────────────────────────────────────────────── */
/*
  JS adds .pwp-icons-few  (≤6 enabled) → 6 per row, all on one line.
  JS adds .pwp-icons-many (7+ enabled) → 5 per row, partial rows centered.
  Base rule (no class) is 5-per-row for the no-JS / pre-init state.
  justify-content: center on the container handles centering in all cases.
*/
.pwp-social--icons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  justify-content: center;
  align-items: stretch;
}
.pwp-social--icons .pwp-secondary { width: auto !important; } /* override base width:100% */
.pwp-social--icons .pwp-secondary.is-enabled {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  /* Default / no-JS: 5-per-row. */
  /* True 5-per-row: 100%/5 - gap*4/5 = 20% - 6.4px at an 8px gap. The old 16%
     filled only about three quarters of the row, which is why the icons looked
     undersized. 7px rather than 6.4px leaves a little slack so sub-pixel
     rounding cannot push the last icon onto a new line. The subtraction is a few
     pixels larger than the exact gap share for that reason: at the exact value a
     full row totals 100.00%, and a fractional container width rounds past it, so
     the last icon wrapped alone onto a second row. */
  flex: 0 0 calc(20% - 9px) !important;
  width: calc(20% - 9px) !important;
  max-width: calc(20% - 9px) !important;
  min-width: 0 !important;
  aspect-ratio: 1;
  height: auto !important;
  padding: 0;
  border-radius: var(--pwp-provider-icon-radius, var(--pwp-btn-radius, 10px)) !important;
}
.pwp-social--icons .pwp-provider-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}
.pwp-social--icons .pwp-provider-icon svg {
  width: 22px;
  height: 22px;
}

/* ≤6 enabled: 6-per-row so all icons fit on a single line.
   calc(13% - 7px) per icon. */
.pwp-social--icons.pwp-icons-few .pwp-secondary.is-enabled {
  /* True 6-per-row: 100%/6 - gap*5/6 = 16.66% - 6.67px at an 8px gap. */
  flex: 0 0 calc(16.66% - 9px) !important;
  width: calc(16.66% - 9px) !important;
  max-width: calc(16.66% - 9px) !important;
}
/* 7+ enabled: 5-per-row; inherits base rule — no extra declaration needed.
   Partial rows (e.g. 2 icons on row 2) are centered by justify-content: center. */

/* Narrow viewport: tighten gap and recalculate both variants. */
@media (max-width: 420px) {
  .pwp-social--icons { gap: 6px; }
  /* 5-per-row at 6px gap */
  .pwp-social--icons .pwp-secondary.is-enabled {
    /* True 5-per-row at a 6px gap: 20% - 4.8px. */
    flex: 0 0 calc(20% - 7px) !important;
    width: calc(20% - 7px) !important;
    max-width: calc(20% - 7px) !important;
  }
  /* 6-per-row at 6px gap: calc(12% - 5px) per icon */
  .pwp-social--icons.pwp-icons-few .pwp-secondary.is-enabled {
    /* True 6-per-row at a 6px gap: 16.66% - 5px. */
    flex: 0 0 calc(16.66% - 7px) !important;
    width: calc(16.66% - 7px) !important;
    max-width: calc(16.66% - 7px) !important;
  }
}

/* ──────────────────────────────────────────
   Mobile layout hardening
   The modal must stay usable on small screens and short viewports.
   We reduce padding and tighten typography so common screens (Android/iOS)
   don't force awkward internal scrolling or clipped text.
────────────────────────────────────────── */

@media (max-width: 520px) {
  .pwp-modal,
  .pwp-page-wrap {
    --pwp-card-padding: 22px 22px 20px;
    --pwp-card-radius: 18px;
  }

  .pwp-backdrop { padding: 12px; }

  .pwp-modal {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    max-height: calc(var(--pwp-vh, 1vh) * 100 - 24px);
  }

  @supports (height: 100dvh) {
    .pwp-modal { max-height: calc(100dvh - 24px); }
  }

  /* Tighten vertical rhythm so key actions stay above the fold */
  .pwp-header { margin-bottom: 16px; }
  .pwp-logo-wrap { margin-bottom: 10px; }
  .pwp-tabs { margin-bottom: 14px; }

  .pwp-title { font-size: 20px; }
  .pwp-subtitle { font-size: 13px; }

  /* Tabs need to remain tappable but not waste vertical space */
  .pwp-tabs { padding: 6px; }
  .pwp-tab { padding: 8px 12px; font-size: 12px; }
}

/* Mid-height viewports — laptops and part-height desktop windows.
   The channel selector grew a third button (passkey), which on a ~800-900px
   viewport pushed the card past the available height and produced a scrollbar
   where there had not been one. Rather than drop the button or let the modal
   scroll, tighten the vertical rhythm modestly at this tier: the existing 700px
   tier already does the same thing more aggressively, so this simply fills the
   gap between "full spacing" and "compact". Taller screens are unaffected. */
/* min-width guard: the mobile width tiers above set a deliberately tighter card
   padding, and this block is declared after them — without the guard it wins the
   cascade on any phone whose viewport height falls between the two height tiers
   (most handsets in portrait), widening horizontal padding from 22px to 32px and
   visibly shrinking the provider buttons. This tier is for laptop and desktop
   windows that are short but not narrow. */
@media (max-height: 900px) and (min-width: 521px) {
  .pwp-modal,
  .pwp-page-wrap { --pwp-card-padding: 26px 32px 24px; }

  .pwp-header { margin-bottom: 18px; }
  .pwp-logo-wrap { margin-bottom: 12px; }
  .pwp-social { margin-top: 10px; }
  .pwp-providers-wrap { margin-top: 10px; }
}

/* Very short viewports (common in mobile browsers with URL bars visible) */
@media (max-height: 700px) {
  .pwp-modal,
  .pwp-page-wrap { --pwp-card-padding: 20px 20px 18px; }

  .pwp-modal { max-height: calc(var(--pwp-vh, 1vh) * 100 - 20px); }

  @supports (height: 100dvh) {
    .pwp-modal { max-height: calc(100dvh - 20px); }
  }

  /* Keep provider buttons from pushing content below the fold */
}

/* Providers separator */
.pwp-providers-wrap { margin-top: 14px; }
.pwp-separator {
  position: relative;
  text-align: center;
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1;
  color: var(--pwp-color-subtle, #4a5e5c);
}
.pwp-separator:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px solid rgba(92, 122, 118, .25);
}
.pwp-separator span {
  position: relative;
  display: inline-block;
  padding: 0 10px;
  background: var(--pwp-card-bg, #eef0f8);
}
.pwp-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ──────────────────────────────────────────
   Theme override hardening (radius / casing)
   These selectors intentionally use higher specificity
   to beat theme/Woo rules that apply !important.
────────────────────────────────────────── */

/* Force primary/secondary/button radius inside modal & login page wrap */
.pwp-modal button.pwp-primary.pwp-primary,
.pwp-modal a.pwp-primary.pwp-primary,
.pwp-modal input.pwp-primary.pwp-primary,
.pwp-page-wrap button.pwp-primary.pwp-primary,
.pwp-page-wrap a.pwp-primary.pwp-primary,
.pwp-page-wrap input.pwp-primary.pwp-primary {
  border-radius: var(--pwp-btn-radius) !important;
}

.pwp-modal button.pwp-secondary.pwp-secondary,
.pwp-modal a.pwp-secondary.pwp-secondary,
.pwp-page-wrap button.pwp-secondary.pwp-secondary,
.pwp-page-wrap a.pwp-secondary.pwp-secondary {
  border-radius: var(--pwp-secondary-radius) !important;
}

/* OTP channel select: keep both choices consistently UPPERCASE */
.pwp-modal.pwp-view-otp-channel-select .pwp-secondary,
.pwp-page-wrap .pwp-view-otp-channel-select .pwp-secondary {
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
}

/* ── reCAPTCHA widget containers ─────────────────────────────────────────── */
/* Primary v2 (checkbox/invisible) containers declared in the form template. */
/* v3→v2 fallback containers injected dynamically by showV2FallbackChallenge(). */
.pwp-modal .pwp-recaptcha,
.pwp-modal .pwp-v2-fallback-container,
.pwp-page-wrap .pwp-recaptcha,
.pwp-page-wrap .pwp-v2-fallback-container,
.pwp-checkout-wrap .pwp-recaptcha,
.pwp-checkout-wrap .pwp-v2-fallback-container {
  display: flex;
  justify-content: center;
  margin: 12px 0;
  width: 100%;
  box-sizing: border-box;
  /* Prevent the 304px reCAPTCHA iframe from overflowing on narrow screens. */
  overflow: hidden;
}

/* Scale down the widget on very small viewports so it never causes horizontal scroll. */
@media (max-width: 340px) {
  .pwp-modal .pwp-recaptcha > *,
  .pwp-modal .pwp-v2-fallback-container > *,
  .pwp-page-wrap .pwp-recaptcha > *,
  .pwp-page-wrap .pwp-v2-fallback-container > *,
  .pwp-checkout-wrap .pwp-recaptcha > *,
  .pwp-checkout-wrap .pwp-v2-fallback-container > * {
    transform: scale(0.88);
    transform-origin: center top;
  }
}

/* 2.8.1: Instant verify mode — hide Login/Register tabs so the modal
   presents a clean verify-only flow. Channel switching ("Choose something
   else") remains available for users who want to switch methods. */
.pwp-instant-verify .pwp-modal .pwp-tabs {
  display: none !important;
}