/**
 * 004_wadining-fukamari店舗専用カスタムスタイル
 * 和だいにんぐ ふかまり専用のデザイン調整（公式サイト背景を再現）
 */

/* 公式サイトと同じ背景スタイルを適用 */
/* bg_sand1_filled.pngは既に#3a3a3aで塗りつぶし済みなので、
   store-config.jsonの背景画像設定のみで表示可能 */

/* 砂テクスチャのサイズ調整（モバイル最適化） */
body {
  background-size: auto 600px; /* デスクトップ: 600px高さ */
  background-repeat: repeat;
}

/* モバイル専用調整 */
@media (max-width: 768px) {
  body {
    background-size: auto 400px; /* モバイル: 400px高さでもっと引いた表示 */
  }
}

/* 小さな画面向け */
@media (max-width: 480px) {
  body {
    background-size: auto 350px; /* 小画面: さらに小さく */
  }
}

/* 和風レストラン専用：落ち着いた和のアクセント強化 */
.main-description {
  border: 2px solid rgba(249, 223, 138, 0.4);
  box-shadow: 0 8px 25px rgba(249, 223, 138, 0.2);
  /* 和風レストラン専用：日本語テキスト最適化 */
  line-height: 1.85;
  letter-spacing: 0.02em;
  /* 暗い背景に映える半透明カード */
  background: var(--surface-bg);
  backdrop-filter: blur(2px);
}

/* モバイル特化テキスト調整 */
@media (max-width: 600px) {
  .main-description {
    padding: 1.8rem 1.5rem;
    font-size: clamp(0.9rem, 3.5vw, 1.05rem);
    line-height: 2.0;
  }
}

/* 満足度選択ボタンのホバー効果 */
.satisfaction-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(249, 223, 138, 0.2);
}

/* ロゴ周辺の調整 */
.logo-img {
  filter: drop-shadow(0 4px 8px rgba(249, 223, 138, 0.15));
}

/* 和風装飾の微調整 */
.ice-cream {
  display: none; /* 和食店では装飾アイスを非表示 */
}

/* 和風ボタンスタイル */
.btn-primary:hover {
  background: linear-gradient(135deg, var(--interactive-primary) 0%, var(--interactive-secondary) 100%);
  transform: translateY(-1px);
}

/* 和風フォーム要素 */
.form-container select:focus,
.form-container textarea:focus {
  border-color: var(--control-focus);
  box-shadow: 0 0 0 3px rgba(249, 223, 138, 0.1);
}

/* 満足度選択ボタンの選択時色調整 */
.satisfaction-item.selected {
  background: var(--interactive-primary);
  border-color: var(--interactive-primary);
  color: #2d4a3e;
}

/* 和風のページタイトル強調 */
.main-title {
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
}

/* 和風のステップインジケータ */
.step-indicator .step.active {
  background: linear-gradient(135deg, var(--step-active) 0%, var(--interactive-primary) 100%);
}

/* 口コミ投稿ボタンの色調整とマーケティングアニメーション */
.copy-btn {
  background: linear-gradient(135deg, var(--interactive-primary) 0%, var(--interactive-secondary) 100%);
  border: 2px solid var(--interactive-primary);
  color: #2d4a3e;
  position: relative;
  overflow: hidden;
  animation: gentle-pulse 3s ease-in-out infinite;
}

/* コンバージョン向上のためのパルスアニメーション */
@keyframes gentle-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 15px rgba(249, 223, 138, 0.3);
  }
  25% {
    transform: scale(1.03);
    box-shadow: 0 6px 20px rgba(249, 223, 138, 0.4);
  }
  50% {
    transform: scale(0.98);
    box-shadow: 0 3px 12px rgba(249, 223, 138, 0.35);
  }
  75% {
    transform: scale(1.04);
    box-shadow: 0 7px 25px rgba(249, 223, 138, 0.5);
  }
}

/* マーケティング効果のための光る効果 */
.copy-btn::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -200%;
  width: 300%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(255, 255, 255, 0.6),
    rgba(249, 223, 138, 0.4),
    rgba(255, 255, 255, 0.6),
    transparent
  );
  animation: shimmer 3s ease-in-out infinite;
  z-index: 1;
}

@keyframes shimmer {
  0% {
    left: -200%;
  }
  50% {
    left: -100%;
  }
  100% {
    left: 200%;
  }
}

/* ボタンテキストを前面に */
.copy-btn * {
  position: relative;
  z-index: 2;
}

.copy-btn:hover {
  box-shadow: 0 8px 30px rgba(249, 223, 138, 0.6);
  animation: none; /* ホバー時はパルス停止 */
  transform: translateY(-3px) scale(1.05);
}

.copy-btn:active {
  box-shadow: 0 2px 15px rgba(249, 223, 138, 0.3);
  transform: translateY(-1px) scale(1.02);
}

/* CTAテキスト強化 */
.copy-btn {
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}