/* Layout toggles */
.pk-hidden {
  display: none;
}

/* Site header */
.pk-site-header {
  padding-bottom: 0;
}

/* ---- Default Layout ---- */
.pk-box--default {
  padding-bottom: 16px;
}

/* Email input label */
.pk-email-label {
  margin-bottom: 10px;
}

/* Email input wrapper */
.pk-email-input {
  width: 100%;
}

/* Save-email checkbox row */
.pk-save-email-row {
  margin-top: 4px;
  margin-bottom: 8px;
}
.pk-save-email-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  cursor: pointer;
  margin-bottom: 0;
}
.pk-save-email-text {
  color: #333;
}

/* Helper text list */
.pk-helper-list {
  line-height: 20px;
  color: #333;
}
.pk-helper-item {
  list-style: none;
  padding-bottom: 6px;
}
.pk-helper-item:last-child {
  padding-bottom: 0;
}
.pk-helper-item-bold {
  font-weight: 900;
}
.pk-helper-indent-1 {
  margin-left: 3px;
}
.pk-helper-indent-2 {
  margin-left: 4px;
}
.pk-helper-indent-3 {
  margin-left: 20px;
}

/* Error / notice message */
.pk-error-msg {
  margin-bottom: 12px;
}
.pk-error-text {
  font-weight: bold;
  display: block;
  text-align: center;
  color: #ef0256;
  white-space: break-spaces;
}

/* JS-injected passkey error */
.pk-passkey-error-msg {
  display: none;
}
.pk-passkey-error-text {
  font-weight: bold;
  display: block;
  text-align: center;
}

/* Submit button area — default layout */
.pk-submit-area {
  text-align: center;
  margin: 26px auto;
}
.pk-submit-btn {
  cursor: pointer;
  border-radius: unset;
  max-height: 45px;
}

/* "First time" registration section */
.pk-register-area {
  max-width: 400px;
  text-align: center;
  margin: 24px auto 50px;
}
.pk-register-btn {
  width: 100%;
  height: 45px;
  background: #fff;
  color: #4a2087;
  cursor: pointer;
  border: 1px solid #4a2087;
  box-shadow: none;
}

/* Maintenance notice */
.pk-maintenance {
  padding-bottom: 16px;
}

/* ---- Saved Layout ---- */
.pk-box--saved {
  padding-bottom: 16px;
}

/* Passkey intro block */
.pk-intro-block {
  margin-bottom: 20px;
}
.pk-intro-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
}
.pk-intro-desc {
  font-size: 14px;
}

/* Passkey CTA button area */
.pk-passkey-cta {
  max-width: 400px;
  margin: 26px auto 0;
  text-align: center;
}
.pk-passkey-cta-btn {
  width: 100%;
  background: #4a2087;
  color: #fff;
  border: none;
  cursor: pointer;
  height: 45px;
}
.pk-passkey-cta-note {
  font-size: 12px;
  margin-top: 8px;
  text-align: left;
}

/* Divider "または" */
.pk-divider {
  display: flex;
  align-items: center;
  margin: 10px 0 20px;
}
.pk-divider-line {
  flex-grow: 1;
  height: 1px;
  background: #e0e0e0;
}
.pk-divider-label {
  padding: 0 20px;
  font-size: 14px;
  background: #fff;
  position: relative;
  z-index: 1;
  font-weight: 400;
}

/* Password form */
.pk-password-form-dl {
  padding: unset;
  margin-bottom: 0;
  padding-bottom: 16px;
}
.pk-password-label {
  margin-bottom: 16px;
}
.pk-password-field-wrap {
  position: relative;
  margin-bottom: 0;
}
.pk-password-input {
  width: 100%;
}
.pk-password-eye {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #888;
}

/* Error notice in saved layout */
.pk-saved-error-msg {
  padding-top: 4px;
}
.pk-saved-error-text {
  font-weight: bold;
  display: block;
  text-align: center;
}
.pk-saved-error-list {
  line-height: 16px;
  padding: 8px 10px;
}
.pk-saved-error-item {
  padding-bottom: 4px;
}

/* Password submit area */
.pk-password-submit-area {
  max-width: 400px;
  margin: 26px auto 0;
  text-align: center;
}
.pk-password-submit-btn {
  width: 100%;
  height: 45px;
  background: #4a2087;
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: none;
}

/* Forgot password link */
.pk-forgot-link-area {
  text-align: center;
  margin-top: 26px;
  margin-bottom: 14px;
}
.pk-forgot-link {
  font-size: 14px;
  text-decoration: none;
}

/* CrowdCredit ID reminder link list */
.pk-ccid-reminder {
  margin-bottom: 14px;
}

/* Responsive overrides for mobile */
@media screen and (max-width: 480px) {
  #saved-login-with-passkey-btn,
  #login-with-passkey-btn,
  #login-with-password {
    border-radius: 4px;
    width: 85%;
  }
}

.pk-recovery-link-area {
  text-align: center;
}

#passkey-login-saved-layout .input-row {
  padding: unset;
}

.pk-back-link {
  display: inline-block;
  margin-bottom: 16px;
  font-size: 13px;
  color: #555;
  text-decoration: none;
}
.pk-back-link:hover {
  text-decoration: underline;
}