/* =========================================================
   下町や｜フローティングボタン
   貼り付け先：共通フッター > グローバルフッター > カスタムCSS
   「電話」「WEB予約」の2つを有効にしてください。
========================================================= */

.fc-floating-actions {
  --fc-festival-red: #b92f26;
  --fc-festival-red-dark: #7d1d18;
  --fc-festival-ivory: #fffaf0;
  --fc-festival-ink: #261713;

  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1800;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}

.fc-floating-action {
  pointer-events: auto;
  min-width: 168px;
  min-height: 52px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 2px solid var(--fc-festival-red-dark);
  border-radius: 3px;
  background: var(--fc-festival-ivory);
  color: var(--fc-festival-ink);
  box-shadow:
    4px 4px 0 var(--fc-festival-red-dark),
    0 12px 30px rgba(55, 22, 16, .18);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: .03em;
  white-space: nowrap;
}

.fc-floating-action i {
  font-size: 18px;
}

.fc-floating-action:hover {
  background: #fff4df;
  color: var(--fc-festival-red-dark);
}

.fc-floating-reserve {
  background: var(--fc-festival-red);
  color: #fff;
}

.fc-floating-reserve:hover {
  background: var(--fc-festival-red-dark);
  color: #fff;
}

@media (max-width: 768px) {
  /* 固定ボタンでページ末尾の文字が隠れないための余白 */
  body.has-floating-actions {
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }

  .fc-floating-actions {
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: row;
    gap: 8px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: rgba(255, 250, 240, .97);
    border-top: 1px solid rgba(125, 29, 24, .22);
    box-shadow: 0 -8px 24px rgba(55, 22, 16, .12);
    backdrop-filter: blur(12px);
  }

  .fc-floating-action {
    flex: 1 1 0;
    min-width: 0;
    min-height: 60px;
    padding: 7px 8px;
    flex-direction: row;
    gap: 7px;
    border-width: 2px;
    box-shadow: 2px 2px 0 var(--fc-festival-red-dark);
    font-size: 16px;
    white-space: nowrap;
  }

  .fc-floating-action i {
    font-size: 20px;
  }

  /* スマホは電話と予約を優先。SNSはページ内の導線を使用 */
  .fc-floating-line,
  .fc-floating-instagram {
    display: none;
  }
}