/*
* このファイルは application.css にまとめてコンパイルされるCSSの本体
* Propshaft（Railsの新しいアセット管理）で配信される
* 下に書いたCSSほど優先度が高くなる（上書き）
*/

body {
margin: 0;                /* 画面の外側の余白をすべて消す */
font-family: sans-serif; /* 文字のフォントをゴシック体に統一 */
background: #f7f7f7;     /* 画面全体の背景色を薄いグレーにする */
height: 100vh;           /* 画面の高さを「表示領域ちょうど100%」にする */
overflow: auto;        /* xxx body（画面全体）はスクロールさせない */
}

/* ==========================================
共通カード         
========================================= */

@import "cards.css";

/* =========================================
   評価モーダル（旧スタイル - visit_modal.css に移行済み）
========================================= */


.rating-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.rating-modal.is-hidden {
  display: none;
}

.rating-sheet {
  width: min(92vw, 420px);
  background: #fff;
  border-radius: 24px;
  padding: 24px 20px 20px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
}

.rating-sheet__header {
  margin-bottom: 20px;
}

.rating-sheet__title {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
}

.rating-sheet__text {
  margin: 0;
  color: #666;
  font-size: 14px;
  line-height: 1.7;
}

.rating-fields {
  display: grid;
  gap: 18px;
}

.rating-field__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 600;
}

.rating-field input[type="range"] {
  width: 100%;
}

.rating-sheet__actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}

.rating-sheet__cancel,
.rating-sheet__submit {
  border: 0;
  border-radius: 999px;
  padding: 10px 18px;
  cursor: pointer;
  font-size: 14px;
}

.rating-sheet__cancel {
  background: #f1f1f1;
}

.rating-sheet__submit {
  background: #e95b6b;
  color: #fff;
}

.rating-btn {
  min-width: 42px;
  height: 42px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* ★はそのまま */
.rating-star {
  font-size: 20px;
  color: #f5b301; /* ゴールドっぽく */
}

/* 数値は少し小さく */
.rating-value {
  font-size: 14px;
  font-weight: 600;
  color: #4f6fbf;
}






/* ==========================================
下の固定ナビゲーション         
========================================= */

.bottom-nav {
position: fixed;                /* 画面の下に固定 */
bottom: 0;                      /* 下端に配置 */
left: 0;                        /* 左端に配置 */
right: 0;                       /* 右端に配置 */
background: white;              /* 背景を白 */
display: flex;                  /* 横並び */
justify-content: space-around; /* 等間隔に配置 */
padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px)); /* iOS セーフエリア対応 */
border-top: 1px solid #ddd;     /* 上に境界線 */
z-index: 1000;
}

/* 下ナビ内のリンクの下線を消す＆色を揃える */
.bottom-nav a {
text-decoration: none;  /* アンダーバーを消す */
color: inherit;         /* 親要素の文字色をそのまま使う */
}
  
/* ---------- 選択中の下タブ ---------- */
.bottom-nav .active {
color: #ff6b6b;   /* 選択中は赤くする */
}