/* 元: casefactory-theme assets/css/dynamic-cta.css（build_theme_css.py が変数化して写す・手で直さない） */
/* 表示トリガー（JSで追加されるクラス） */
.dcta.is-shown,
#dcta-bar.is-shown,
#dcta-popup.is-shown,
#dcta-corner.is-shown,
.dcta.is-visible,
#dcta-bar.is-visible,
#dcta-popup.is-visible,
#dcta-corner.is-visible {
  display: block !important;
}

/* フェードイン */
.fade-in {
  animation: fadeIn 0.4s ease-out forwards;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* フェードアウト */
.fade-out {
  animation: fadeOut 0.4s ease-in forwards;
}
@keyframes fadeOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(20px); }
}
/* ==================================================
   Dynamic CTA  – すべて .dcta- でスコープを限定
   ================================================== */

/* 初期状態：すべて非表示 */
.dcta,
#dcta-bar,
#dcta-popup,
#dcta-corner {
  display: none !important;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* 表示トリガー（JSで追加される） */
.dcta-show {
  display: block !important;
  opacity: 1 !important;
  transform: translateY(0);
}
.dcta-hide {
  opacity: 0 !important;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* ───────── フローティングバー（投稿のみ） */
.dcta--bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9998;
  backdrop-filter: blur(8px);
  color: #fff;
  padding: 5px 10px;
  background: rgba(0, 0, 0, 0.5); /* 黒透過 */
  box-shadow: var(--shadow-btn);
  max-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
}
.dcta--bar * {
  color: #fff !important;
}
@media(max-width:767px){
  .dcta--bar { padding: 10px; }
}

/* ---------- フローティングCTA専用 ---------- */
.cta-bar-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 5px 0;
  font-family: var(--font-body);
}

/* マイクロコピー */
.cta-bar-copy {
  font-size: 14px;
  color: var(--accentColor);
  margin-bottom: 2px;
  position: relative;
  text-align: center;
}

.cta-bar-copy::before {
  content: '＼';
  margin-right: 0.5em;
}

.cta-bar-copy::after {
  content: '／';
  margin-left: 0.5em;
}

/* ボタンコンテナ */
.cta-bar-button-area {
  text-align: center;
}

/* ボタン本体 */
.cta-bar-button-area a {
  min-width: 340px;
  position: relative;
  display: inline-block;
  background: var(--accentColor);
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  padding: 0.5em 1em;
  margin-top: 4px;
  border-radius: var(--r-pill);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
  font-family: var(--font-body);
  text-align: center;
}

/* テキストをボタン中央に */
.cta-bar-label {
  display: inline-block;
  width: 100%;
  text-align: center;
  pointer-events: none;
  padding: 0 32px 2px 16px;
}

/* 矢印（右端に固定） */
.cta-bar-arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
  pointer-events: none;
}

/* ホバー：矢印スライド */
.cta-bar-button-area a:hover {
  background: var(--accentHover);
}
.cta-bar-button-area a:hover .cta-bar-arrow {
  transform: translate(4px, -50%);
}

/* アクティブ：押し込み風 */
.cta-bar-button-area a:active {
  top: 2px;
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.15);
}

/* ───────── 全画面ポップアップ */
.dcta--popup {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.6);
}

/* ポップアップ内コンテンツ（中央寄せ） */
.dcta--popup .dcta__inner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  max-width: 640px;
  width: 90%;
  position: relative; /* ← クローズボタンの絶対配置のために必要 */
  background: #fff;
  padding: 2em 1em;
  border-radius: var(--r-m);
  box-shadow: var(--shadow-btn);
}

/* ───────── 全画面ポップアップ ─ 中身ラッパー ───────── */
.dcta--popup .dcta__inner{
  position: relative;           /* ← ここが “基準” になります */
  background:#fff;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  max-width:640px;
  width:90%;
}

/* ───────── 全画面ポップアップ用 CLOSE ボタン ───────── */
.dcta--popup .dcta__close{      /* ← “.dcta--popup” を前に付けて限定 */
  position:absolute;
  top:-14px;                    /* 枠から 14 px 浮かせて */
  right:-14px;                  /* 右上外側に配置                */
  width:28px; height:28px;
  border:solid 1.5px;
  border-radius:50%;
  background:#333;
  font-size:16px; font-weight:700;
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-btn);
  cursor:pointer; transition:background .2s,color .2s;
  padding: 10px;
  z-index:1;                    /* ボックスより前面に */
}
.dcta--popup .dcta__close:hover{ background:#8d8b8b; }

.dcta__close{
  /* 既存指定のうえに追加する補正 */
  color:#111;               /* × を濃色で見えるように       */
  font-weight:700;
  border:2px solid #fff;    /* 白フチで背景から抜ける         */
  box-sizing:border-box;
  cursor:pointer;
  display:flex;             /* Flex で中央寄せ */
  align-items:center;
  justify-content:center;
  transition:background .2s, color .2s;
}
.dcta__close:hover{
  background:#e5e5e5;
}
.dcta--corner .dcta__close{
  /* 右下ポップははみ出さないよう内側に固定 */
  position:absolute;
  top:8px; right:8px;
}

/* ───────── 右下コーナー */
.dcta--corner {
  position: fixed;
  right: 16px;
  bottom: 16px;
  max-width: 320px;
  width: 100%;
  z-index: 9998;
}
@media(max-width:767px){
  .dcta--corner {
    left: 16px;
    right: 16px;
    width: auto;
    max-width: none;
  }
}
/* ---------- 右下コーナー用 CLOSE ボタン ---------- */
.dcta--corner .dcta__close{
  position:absolute;
  top:-12px;                /* ボックスの外側右上に少し浮かす */
  right:-12px;
  width:28px; height:28px;
  border:solid 1.5px;
  border-radius:50%;
  background:#333;
  font-size:16px;
  font-weight:700;
  color:#fff;
  box-shadow:var(--shadow-btn);
  padding: 10px;
}
.dcta--corner .dcta__close:hover{
  background:#8d8b8b;
}