/* Bubble 既存スタイルの上書き */
.perimiru-migration-overlay {
  --pm-brand-blue: #00a0e9;
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483646 !important;
  background: rgba(0, 0, 0, 0.45) !important;
  display: block !important;
  padding: 24px 16px 32px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  border: none !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.perimiru-migration-overlay *,
.perimiru-migration-overlay *::before,
.perimiru-migration-overlay *::after {
  box-sizing: border-box !important;
}

.perimiru-migration-modal {
  position: relative !important;
  width: 100% !important;
  max-width: 340px !important;
  background: #ffffff !important;
  border-radius: 24px !important;
  padding: 26px 22px 22px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14) !important;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP",
    "Yu Gothic", "Meiryo", sans-serif !important;
  color: #000000 !important;
  line-height: 1.5 !important;
  margin: 0 auto !important;
  border: none !important;
  text-align: center !important;
}

.perimiru-migration-modal h2,
.perimiru-migration-modal p {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.perimiru-migration-modal p {
  font: inherit !important;
  color: inherit !important;
}

.perimiru-migration-modal button {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  font: inherit !important;
  text-decoration: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  cursor: pointer !important;
}

.perimiru-migration-modal strong {
  font-weight: 700 !important;
}

/* 閉じるボタン（右上・青枠） */
.perimiru-migration-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 38px !important;
  height: 38px !important;
  border: 2px solid var(--pm-brand-blue) !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  color: var(--pm-brand-blue) !important;
  font-size: 24px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.perimiru-migration-close:hover {
  background: #f0f9ff !important;
}

/* ヘッダーロゴ（中央） */
.perimiru-migration-header {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 0 18px !important;
  padding: 0 34px !important;
}

.perimiru-migration-brand {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
}

.perimiru-migration-brand-new {
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: #000000 !important;
  letter-spacing: -0.02em !important;
}

.perimiru-migration-logo-img {
  display: block !important;
  height: 34px !important;
  width: auto !important;
  max-width: 170px !important;
  object-fit: contain !important;
}

/* キャッチコピー（2行・ブランドブルー） */
.perimiru-migration-modal h2.perimiru-migration-title,
.perimiru-migration-title,
.perimiru-migration-title-line {
  color: var(--pm-brand-blue) !important;
}

.perimiru-migration-modal h2.perimiru-migration-title,
.perimiru-migration-title {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  margin: 0 0 14px !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  line-height: 1.32 !important;
  text-align: center !important;
  letter-spacing: 0.01em !important;
}

.perimiru-migration-title-line {
  display: block !important;
}

/* 本文（4行） */
.perimiru-migration-modal p.perimiru-migration-body,
.perimiru-migration-body {
  margin: 0 0 16px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
  text-align: center !important;
  color: #000000 !important;
}

/* 8/31 バッジ画像 */
.perimiru-migration-deadline-img {
  display: block !important;
  width: 100% !important;
  max-width: 252px !important;
  height: auto !important;
  margin: 0 auto 12px !important;
  object-fit: contain !important;
}

/* マスコット + 星 */
.perimiru-migration-mascot-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin: 0 0 20px !important;
}

.perimiru-migration-mascot {
  display: block !important;
  width: 118px !important;
  height: auto !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}

.perimiru-migration-star {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  color: var(--pm-brand-blue) !important;
}

.perimiru-migration-star svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

/* ボタン */
.perimiru-migration-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.perimiru-migration-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 50px !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
  border: 0 !important;
  padding: 12px 16px !important;
  letter-spacing: 0.01em !important;
}

.perimiru-migration-modal a.perimiru-migration-btn {
  text-decoration: none !important;
}

.perimiru-migration-modal a.perimiru-migration-btn--open,
.perimiru-migration-modal a.perimiru-migration-btn--store {
  color: #ffffff !important;
}

.perimiru-migration-modal a.perimiru-migration-btn--later {
  color: var(--pm-brand-blue) !important;
}

.perimiru-migration-btn--open.perimiru-migration-btn--disabled,
.perimiru-migration-btn--open.perimiru-migration-btn--loading {
  opacity: 0.75 !important;
  pointer-events: none !important;
  cursor: wait !important;
}

.perimiru-migration-btn svg {
  width: 22px !important;
  height: 22px !important;
  flex-shrink: 0 !important;
}

.perimiru-migration-spinner {
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  border: 2px solid rgba(255, 255, 255, 0.35) !important;
  border-top-color: #ffffff !important;
  border-radius: 50% !important;
  animation: perimiru-spin 0.7s linear infinite !important;
  vertical-align: middle !important;
  margin-right: 8px !important;
}

@keyframes perimiru-spin {
  to {
    transform: rotate(360deg);
  }
}

.perimiru-migration-btn--open {
  background: var(--pm-brand-blue) !important;
  color: #ffffff !important;
}

.perimiru-migration-btn--open:hover {
  background: #0092d4 !important;
}

.perimiru-migration-btn--store {
  background: var(--pm-brand-blue) !important;
  color: #ffffff !important;
  min-height: 50px !important;
  font-size: 16px !important;
}

.perimiru-migration-btn--store:hover {
  background: #0092d4 !important;
}

.perimiru-migration-modal p.perimiru-migration-store-note,
.perimiru-migration-store-note {
  margin: 2px 0 -4px !important;
  font-size: 9px !important;
  line-height: 1.3 !important;
  color: #999999 !important;
  text-align: center !important;
  font-weight: 400 !important;
}

.perimiru-migration-modal p.perimiru-migration-message,
.perimiru-migration-message {
  display: none !important;
  margin: -2px 0 2px !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  background: #f0f9ff !important;
  color: #0077c8 !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  text-align: center !important;
  font-weight: 500 !important;
}

.perimiru-migration-message.is-error {
  background: #fff1f0 !important;
  color: #c0392b !important;
}

.perimiru-migration-message.is-success {
  background: #f0f9ff !important;
  color: #0077c8 !important;
}

.perimiru-migration-message.is-loading {
  background: #f5f7fa !important;
  color: #555555 !important;
}

.perimiru-migration-btn--later {
  background: #ffffff !important;
  color: var(--pm-brand-blue) !important;
  border: 2px solid var(--pm-brand-blue) !important;
}

.perimiru-migration-btn--later:hover {
  background: #f0f9ff !important;
}

.perimiru-migration-btn:disabled {
  opacity: 0.65 !important;
  cursor: wait !important;
}

@media (max-width: 380px) {
  .perimiru-migration-modal {
    padding: 22px 18px 18px !important;
    border-radius: 22px !important;
  }

  .perimiru-migration-title {
    font-size: 24px !important;
  }

  .perimiru-migration-body {
    font-size: 13px !important;
  }

  .perimiru-migration-mascot {
    width: 104px !important;
  }
}