/* Floating Subscribe Box — STELLANEWS.LIFE */

/* ベース：白背景 × 濃い文字で確実に可読 */
#floating-subscribe-box{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  display: none; /* JSで表示制御 */
  width: min(92vw, 360px);

  background: #ffffff;                 /* ← 白背景を固定 */
  color: #111827;                      /* ← 濃い文字色を固定 */
  border: 1px solid #e6eef6;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(16,24,40,.18);
  padding: 16px 16px 14px;

  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  line-height: 1.55;
  box-sizing: border-box;
}

/* × 閉じるボタン */
#floating-subscribe-box .close-btn{
  position: absolute;
  top: 6px;
  right: 10px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: #6b7280;
  user-select: none;
}
#floating-subscribe-box .close-btn:hover{ color:#111827; }

/* 見出し */
#floating-subscribe-box h4{
  margin: 0 24px 8px 0;                /* 右は×分の余白 */
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;                      /* 見出しはさらに濃く */
}

/* 説明テキスト */
#floating-subscribe-box p{
  margin: 0 0 10px;
  color: #374151;
  font-size: 14px;
  text-align: center;
}

/* MailPoetフォームの可読性を白背景に合わせて補正 */
#floating-subscribe-box .mailpoet_form,
#floating-subscribe-box .mailpoet_form *{
  color: #111827 !important;
  text-shadow: none !important;
}
#floating-subscribe-box input[type="email"],
#floating-subscribe-box input[type="text"],
#floating-subscribe-box input[type="name"],
#floating-subscribe-box textarea,
#floating-subscribe-box select{
  width: 100%;
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid #cfe0fb !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  box-sizing: border-box;
}
#floating-subscribe-box ::placeholder{ color:#6b7280 !important; opacity:1 !important; }

/* 送信ボタン */
#floating-subscribe-box input[type="submit"],
#floating-subscribe-box button[type="submit"]{
  width: 100%;
  display: inline-block;
  background: #007bff !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-weight: 700 !important;
  cursor: pointer;
}
#floating-subscribe-box input[type="submit"]:hover,
#floating-subscribe-box button[type="submit"]:hover{
  background: #0566cf !important;
}

/* 小さめ端末での位置・幅最適化 */
@media (max-width: 480px){
  #floating-subscribe-box{
    right: 12px;
    left: 12px;
    width: auto;
    bottom: 12px;
    border-radius: 10px;
  }
}

/* ダークモードでも “白地 × 黒文字” を死守 */
@media (prefers-color-scheme: dark){
  #floating-subscribe-box{
    background: #ffffff !important;
    color: #111827 !important;
  }
}