/* ===========================================
   Customer-specific styles
   Add any custom CSS rules here.
   =========================================== */

/*
 * Overlay button wrappers — visual layer + invisible SDK button overlay.
 * Custom SVG/HTML is shown as the visual layer (pointer-events: none on the inner div).
 * The SDK button is positioned absolute over the whole element, opacity: 0 but fully clickable.
 */

/* Magic link button */
.magic-link-btn-wrap {
  position: relative;
}
.magic-link-btn-wrap u-send-magic-code-button {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  min-width: 0;
  padding: 0;
  margin: 0;
  border-radius: var(--radius-md);
}

/* Newsletter widget social login circles */
.nl-social-btn-wrap {
  position: relative;
}
.nl-social-btn-wrap u-social-login-button {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  min-width: 0;
  padding: 0;
  margin: 0;
  border-radius: 9999px;
}

/* Passkey discoverable login — overlay u-passkey on styled wrapper */
.passkey-btn-wrap u-passkey {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  min-width: 0;
  padding: 0;
  margin: 0;
  border-radius: var(--radius-md);
}

/* Quiz widget submit button */
.quiz-submit-btn {
  width: 100%;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: var(--radius-md);
  border: 0;
  cursor: pointer;
  background: white;
  color: #d97706;
  padding: 0.625rem 1rem;
  transition: background-color 0.2s, transform 0.2s;
}
.quiz-submit-btn:hover {
  background: rgba(255, 255, 255, 0.8);
  transform: translateY(-1px);
}