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

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

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

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

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

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

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

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

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

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

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

/* ── Backdrop ─────────────────────────────────────────────────────────────── */
.llnsso-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;
}
.llnsso-backdrop.is-open { display: flex; }

/* ── Modal card ───────────────────────────────────────────────────────────── */
.llnsso-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 --llnsso-vh (based on window.innerHeight) and
    fall back to modern viewport units when available.
  */
  max-height: calc(var(--llnsso-vh, 1vh) * 100 - 32px);
  overflow: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  font-family: var(--llnsso-font);
  font-size: 15px;
  color: var(--llnsso-color-text);
  /*
    Theme/WooCommerce templates often apply broad container rules.
    Lock the modal container visuals to the Style tab variables.
  */
  background: var(--llnsso-card-bg) !important;
  border-radius: var(--llnsso-card-radius) !important;
  box-shadow: var(--llnsso-card-shadow) !important;
  padding: var(--llnsso-card-padding) !important;
  position: relative;
}

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

/* Every descendant gets the plugin font — no theme bleed */
.llnsso-modal * {
  font-family: var(--llnsso-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.
*/
.llnsso-modal button,
.llnsso-modal input,
.llnsso-modal select,
.llnsso-modal textarea {
  font-family: var(--llnsso-font) !important;
  text-transform: none;
  letter-spacing: normal;
  line-height: normal;
  border-radius: 0;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

/* ── Close button ─────────────────────────────────────────────────────────── */
.llnsso-close {
  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(--llnsso-color-subtle);
  transition: background .15s, color .15s;
  z-index: 10;
}
.llnsso-close:hover {
  background: rgba(92, 122, 118, .14);
  color: var(--llnsso-color-text);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Text / email / password inputs */
.llnsso-form input[type="text"],
.llnsso-form input[type="email"],
.llnsso-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(--llnsso-input-height) !important;
  min-height: var(--llnsso-input-height) !important;
  line-height: calc(var(--llnsso-input-height) - 2px) !important;
  padding: 0 .85em !important;
  margin-top: 4px;
  font-family: var(--llnsso-font);
  font-size: 16px;
  font-weight: 400;
  color: var(--llnsso-color-text);
  background: var(--llnsso-input-bg);
  border: 1.5px solid var(--llnsso-input-border);
  border-radius: var(--llnsso-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;
}
.llnsso-form input[type="text"]:focus,
.llnsso-form input[type="email"]:focus,
.llnsso-form input[type="password"]:focus {
  border-color: var(--llnsso-input-focus-border);
  box-shadow: 0 0 0 3px var(--llnsso-input-focus-ring);
}

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

/* ── Phone field (v1.6.3): country code select OUTSIDE the input ─────────── */
.llnsso-phone-wrap {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-top: 4px;
}
.llnsso-phone-wrap .llnsso-dial-code {
  width: var(--llnsso-dial-code-width, 128px);
  max-width: 200px;
  padding: 0 8px 0 10px;
  font-family: var(--llnsso-font);
  font-size: 15px;
  font-weight: 500;
  color: var(--llnsso-color-text);
  background: var(--llnsso-input-bg);
  border: 1.5px solid var(--llnsso-input-border);
  border-radius: var(--llnsso-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;
}
.llnsso-phone-wrap .llnsso-phone-input {
  flex: 1;
  min-width: 0;
  height: var(--llnsso-input-height) !important;
  min-height: var(--llnsso-input-height) !important;
  line-height: calc(var(--llnsso-input-height) - 2px) !important;
  padding: 0 .85em !important;
  font-family: var(--llnsso-font);
  font-size: 16px;
  font-weight: 400;
  color: var(--llnsso-color-text);
  background: var(--llnsso-input-bg);
  border: 1.5px solid var(--llnsso-input-border);
  border-radius: var(--llnsso-input-radius);
  outline: none;
  -webkit-user-select: text;
  user-select: text;
  touch-action: manipulation;
  box-sizing: border-box;
}
.llnsso-phone-wrap:focus-within .llnsso-dial-code,
.llnsso-phone-wrap:focus-within .llnsso-phone-input {
  border-color: var(--llnsso-input-focus-border);
  box-shadow: 0 0 0 3px var(--llnsso-input-focus-ring);
}
.llnsso-phone-field:focus-within {
  border-color: var(--llnsso-input-focus-border);
  box-shadow: 0 0 0 3px var(--llnsso-input-focus-ring);
}
.llnsso-dial-code {
  flex-shrink: 0;
  height: var(--llnsso-input-height) !important;
  min-height: var(--llnsso-input-height) !important;
  line-height: calc(var(--llnsso-input-height) - 2px) !important;
  padding: 0 6px 0 10px;
  font-family: var(--llnsso-font);
  font-size: 15px;
  font-weight: 500;
  color: var(--llnsso-color-text);
  background: transparent;
  border: none;
  border-right: 1.5px solid var(--llnsso-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;
}
.llnsso-dial-code:focus { outline: none; }
.llnsso-phone-field input[type="tel"] {
  flex: 1;
  min-width: 0;
  height: var(--llnsso-input-height) !important;
  min-height: var(--llnsso-input-height) !important;
  line-height: calc(var(--llnsso-input-height) - 2px) !important;
  padding: 0 .85em !important;
  font-family: var(--llnsso-font);
  font-size: 16px;
  font-weight: 400;
  color: var(--llnsso-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 */
.llnsso-checkbox {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 2px;
  user-select: none;
  font-family: var(--llnsso-font);
  font-size: 14px;
  font-weight: 400;
  color: var(--llnsso-color-subtle);
  text-transform: none;
  letter-spacing: 0;
}
.llnsso-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--llnsso-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 */
.llnsso-modal .llnsso-checkbox.llnsso-checkbox input[type="checkbox"],
.llnsso-page-wrap .llnsso-checkbox.llnsso-checkbox input[type="checkbox"] {
  display: inline-block !important;
  opacity: 1 !important;
  visibility: visible !important;
  -webkit-appearance: auto !important;
  appearance: auto !important;
}

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

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

/* Primary CTA */
.llnsso-primary {
  margin-top: 4px;
  width: 100%;
  padding: 15px 20px !important;
  font-family: var(--llnsso-font);
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  color: var(--llnsso-btn-color) !important;
  background: var(--llnsso-btn-bg) !important;
  border: none !important;
  border-radius: var(--llnsso-btn-radius) !important;
  box-shadow: var(--llnsso-btn-shadow) !important;
  cursor: pointer;
  transition: background .18s, box-shadow .18s, transform .12s;
}
.llnsso-primary:hover {
  background: var(--llnsso-btn-bg-hover) !important;
  box-shadow: 0 6px 20px rgba(92, 122, 118, .40) !important;
  transform: translateY(-1px);
}
.llnsso-primary:active { transform: translateY(0); }
.llnsso-primary:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

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

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

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

/* ── Social buttons container ─────────────────────────────────────────────── */
.llnsso-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) ──────────────────────────────────────── */
.llnsso-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

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

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


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

/* ── Stacked layout (full-width buttons with icon + label) ────────────────── */
.llnsso-social--stacked .llnsso-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(--llnsso-provider-btn-radius, var(--llnsso-btn-radius, 10px)) !important;
}
.llnsso-social--stacked .llnsso-provider-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.llnsso-social--stacked .llnsso-provider-icon svg {
  width: 20px;
  height: 20px;
}
.llnsso-social--stacked .llnsso-provider-label {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--llnsso-font);
  color: var(--llnsso-secondary-color);
  white-space: nowrap;
}

/* ── Icon row layout: equal-width flex row, centered, fills full card width ─ */
.llnsso-social--icons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  justify-content: center;
  align-items: stretch;
}
.llnsso-social--icons .llnsso-secondary { width: auto !important; } /* override base width:100% */
.llnsso-social--icons .llnsso-secondary.is-enabled {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  /*
    Fixed-size icon buttons (wrap on small screens) so theme rules like
    button{width:100%!important} can't force a stacked full-width layout.
  */
  flex: 0 0 var(--llnsso-provider-icon-btn-size, 56px) !important;
  width: var(--llnsso-provider-icon-btn-size, 56px) !important;
  max-width: var(--llnsso-provider-icon-btn-size, 56px) !important;
  min-width: var(--llnsso-provider-icon-btn-size, 56px) !important;
  height: var(--llnsso-provider-icon-btn-size, 56px) !important;
  padding: 0;
  border-radius: var(--llnsso-provider-icon-radius, var(--llnsso-btn-radius, 10px)) !important;
}
.llnsso-social--icons .llnsso-provider-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}
.llnsso-social--icons .llnsso-provider-icon svg {
  width: 22px;
  height: 22px;
}

/* Mobile: fixed-size icon buttons to allow up to 5 per row on most phones.
   We hard-set width/height with !important to beat aggressive theme rules. */
@media (max-width: 520px) {
  .llnsso-social--icons { gap: 6px; }
  .llnsso-social--icons .llnsso-secondary.is-enabled {
    flex: 0 0 52px !important;
    width: 52px !important;
    max-width: 52px !important;
    min-width: 52px !important;
    height: 52px !important;
    box-sizing: border-box;
  }
}

/* Very small screens: slightly smaller buttons (still aims for 5 per row). */
@media (max-width: 420px) {
  .llnsso-social--icons { gap: 6px; }
  .llnsso-social--icons .llnsso-secondary.is-enabled {
    flex: 0 0 48px !important;
    width: 48px !important;
    max-width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    margin: 0 auto;
  }
}

/* ──────────────────────────────────────────
   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) {
  .llnsso-modal,
  .llnsso-page-wrap {
    --llnsso-card-padding: 22px 22px 20px;
    --llnsso-card-radius: 18px;
  }

  .llnsso-backdrop { padding: 12px; }

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

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

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

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

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

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

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

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

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

/* Providers separator */
.llnsso-providers-wrap { margin-top: 14px; }
.llnsso-separator {
  position: relative;
  text-align: center;
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1;
  color: var(--llnsso-color-subtle, #4a5e5c);
}
.llnsso-separator:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px solid rgba(92, 122, 118, .25);
}
.llnsso-separator span {
  position: relative;
  display: inline-block;
  padding: 0 10px;
  background: var(--llnsso-card-bg, #eef0f8);
}
.llnsso-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 */
.llnsso-modal button.llnsso-primary.llnsso-primary,
.llnsso-modal a.llnsso-primary.llnsso-primary,
.llnsso-modal input.llnsso-primary.llnsso-primary,
.llnsso-page-wrap button.llnsso-primary.llnsso-primary,
.llnsso-page-wrap a.llnsso-primary.llnsso-primary,
.llnsso-page-wrap input.llnsso-primary.llnsso-primary {
  border-radius: var(--llnsso-btn-radius) !important;
}

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

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