/**
 * 下部固定 CTA（pc-review-core / MobileBottomCta.php）
 *
 * 要件（kahoo_blog/docs/004-mobile_bottom_cta/ + 2026-07-03 デスクトップ対応）:
 *   - モバイル: 白ベース・薄い境界線・控えめな影のカード（従来デザインを維持）
 *   - デスクトップ: PC 流入も多いため表示する。画面下固定だが内側コンテナを
 *     max-width で中央寄せにした上品な固定バー。幅いっぱいの圧を避ける
 *   - position:fixed; bottom:0 の下部固定は両方で維持
 *   - アクセントカラーは CTA ボタンのみ
 *   - env(safe-area-inset-bottom) 対応
 *   - 初期は画面外（translateY(100%)）。JS が .is-visible を付与して出現
 *   - CTA に隠れないよう本文末尾に下余白（JS が body に .pcrc-has-bottom-cta 付与）
 */

/* ============================================================
 * 共通（全幅） — 固定バーの外殻・出現アニメ・部品の基本スタイル
 * ============================================================ */

/* 本文がバーに隠れないよう下余白（モバイル・デスクトップ両方で効かせる） */
body.pcrc-has-bottom-cta {
  padding-bottom: calc(120px + env(safe-area-inset-bottom));
}

.pcrc-bottom-cta {
  display: flex;
  flex-direction: column;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(100%); /* 初期状態は画面外 */
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.pcrc-bottom-cta.is-visible {
  transform: translateY(0);
}

/* 最小化: バー（トグル）だけ残す */
.pcrc-bottom-cta.is-minimized {
  transform: translateY(100%);
}
.pcrc-bottom-cta.is-minimized .pcrc-bottom-cta-content {
  opacity: 0;
  pointer-events: none;
}

/* ── トグル（上部中央の小さな chevron バー）── */
.pcrc-bottom-cta-toggle {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 20px;
  padding: 0;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  color: #bbbbbb;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.03);
  z-index: 1; /* 中央寄せコンテナより前面に */
}
.pcrc-bottom-cta-chevron {
  transition: transform 0.3s ease;
  transform: rotate(180deg); /* 隠れているときは上向き */
}
.pcrc-bottom-cta.is-visible .pcrc-bottom-cta-chevron {
  transform: rotate(0deg); /* 見えているときは下向き */
}
.pcrc-bottom-cta.is-minimized .pcrc-bottom-cta-chevron {
  transform: rotate(180deg);
}

/* ── 本体 ── */
.pcrc-bottom-cta-content {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  min-height: 84px;
  box-sizing: border-box;
  transition: opacity 0.3s ease;
}

.pcrc-bottom-cta-img-wrap {
  flex-shrink: 0;
  width: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #ffffff;
}
.pcrc-bottom-cta-img-wrap img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
.pcrc-bottom-cta-maker {
  font-size: 9px;
  color: #777777;
  margin-top: 2px;
  text-align: center;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.pcrc-bottom-cta-info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0; /* ellipsis 用 */
}

.pcrc-bottom-cta-message {
  color: #ab834c; /* 上品で彩度を抑えた金系 */
  font-weight: bold;
  font-size: 11px;
  margin-bottom: 2px;
}

.pcrc-bottom-cta-name {
  font-size: 11px;
  font-weight: bold;
  line-height: 1.3;
  color: #333333;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  word-break: break-all;
}

.pcrc-bottom-cta-price-area {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.2;
  overflow: hidden;
}
.pcrc-bottom-cta-regular {
  color: #999999;
  font-size: 10px;
  white-space: nowrap;
}
.pcrc-price-strike {
  text-decoration: line-through;
}
.pcrc-bottom-cta-current {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.pcrc-discount-rate {
  background-color: #bb3f4b;
  color: #ffffff;
  font-weight: bold;
  font-size: 10px;
  padding: 1px 4px;
  border-radius: 3px;
  line-height: 1.1;
  margin-right: 4px;
}
.pcrc-price-val {
  color: #e74c3c;
  font-weight: bold;
  font-size: 17px;
  line-height: 1;
}
.pcrc-tax-in {
  color: #e74c3c;
  font-size: 9px;
  font-weight: normal;
  align-self: flex-end;
  line-height: 1.2;
  margin-left: 1px;
}

/* ── CTA ボタン ── */
.pcrc-bottom-cta-btn-wrap {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 120px;
  max-width: 42%;
}
.pcrc-bottom-cta-sale {
  color: #bb3f4b;
  font-size: 9px;
  font-weight: bold;
  margin-bottom: 2px;
  line-height: 1.1;
  text-align: center;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pcrc-bottom-cta-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: #e67e22; /* アクセントカラーはボタンのみ（旧実装と同色） */
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  padding: 10px 8px;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(230, 126, 34, 0.3);
}
.pcrc-bottom-cta-btn:visited,
.pcrc-bottom-cta-btn:hover {
  color: #ffffff;
  text-decoration: none;
}
.pcrc-bottom-cta-btn:active {
  color: #ffffff;
  background: #d35400;
  transform: translateY(1px);
  box-shadow: none;
}

/* ============================================================
 * デスクトップ（769px 以上） — 内側コンテナを中央寄せの上品な固定バーに
 * ============================================================ */
@media screen and (min-width: 769px) {
  /* 内側コンテンツを中央寄せ・最大幅で囲い、幅いっぱいの圧を避ける */
  .pcrc-bottom-cta-content {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    gap: 16px;
    padding: 10px 20px;
    min-height: 76px;
  }

  /* 製品画像は少し大きめに（デスクトップは横幅に余裕がある） */
  .pcrc-bottom-cta-img-wrap {
    width: 72px;
  }
  .pcrc-bottom-cta-maker {
    font-size: 10px;
  }

  .pcrc-bottom-cta-message {
    font-size: 13px;
  }
  .pcrc-bottom-cta-name {
    font-size: 14px;
  }
  .pcrc-bottom-cta-regular {
    font-size: 12px;
  }
  .pcrc-discount-rate {
    font-size: 11px;
  }
  .pcrc-price-val {
    font-size: 20px;
  }
  .pcrc-tax-in {
    font-size: 11px;
  }

  /* ボタンはデスクトップでは固定幅・余裕を持たせる */
  .pcrc-bottom-cta-btn-wrap {
    width: 220px;
    max-width: 30%;
  }
  .pcrc-bottom-cta-sale {
    font-size: 11px;
  }
  .pcrc-bottom-cta-btn {
    font-size: 14px;
    padding: 12px 16px;
  }
}