/* 重ねて出すもの。★モーダルと、その中のカレンダー。
 *
 * ★モーダルは**JSが無いときは出ない**（hidden のまま）。
 *   そのときは同じ内容のページ（range.php）へのただのリンクとして働く。
 * ★カレンダーはモーダルの中にしか出ないので、ここに置いてある。
 */

/* ---------------------------------------------------------------- モーダル */
.mask {
  position: fixed; inset: 0; z-index: 20;
  background: rgba(0,0,0,.55);
  display: grid; place-items: center;
  padding: 12px;
}
/* ★display を持つ要素は hidden 属性だけでは消えない。明示して閉じる。
 *   これが無いと、JSが開くまで閉じているはずのモーダルが最初から出る。 */
.mask[hidden] { display: none; }
.dlg {
  background: var(--ink2);
  border-radius: 16px;
  width: 100%; max-width: 420px;
  overflow: hidden;
}
.dlg-body { padding: 18px 16px; }
.dlg-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.dlg-row label { font-size: 13px; color: var(--t2); width: 42px; }
.dlg input[type="date"] {
  flex: 1;
  background: var(--ink3); color: var(--t1);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 8px 10px; font-size: 14px;
}
/* ★下端だけ濃く。帯はカードよりは沈むが真っ黒には落とさない
 *   （落とすと帯が本体より目立つ）。 */
.dlg-foot {
  background: var(--band);
  padding: 12px;
  display: flex; justify-content: flex-end; gap: 10px;
}

/* モーダルの中身の部品。★1枚の画面（購入の確認）でも同じものを使う。
 *   同じ見え方をするものに別の名前を与えない。 */
.dlg-t { font-size: 17px; font-weight: 700; margin-bottom: 14px; }
.dlg-what {
  background: var(--ink3);
  border-radius: var(--radius);
  padding: 10px 12px;
}
.dlg-plan { font-size: 13px; color: var(--t2); }
.dlg-race { font-size: 16px; font-weight: 600; margin-top: 2px; }
/* ★金額はいちばん大きく。何にいくら払うのかを迷わせない。 */
.dlg-price {
  margin-top: 14px;
  font-size: 26px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
}
/* 値引きの札。★理由（キャンペーン名）を必ず並べる——理由の無い割引は疑われる。 */
.price-cap {
  margin-top: 14px;
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--t2);
}
.price-off {
  background: var(--ng); color: #fff;
  border-radius: 4px; padding: 2px 7px;
  font-size: 12px; font-weight: 700;
}
/* ★★「通常価格」ではなく**改定後の予定価格**。売ったことのない値段を
 *   通常価格と称して割引に見せるのは不当な二重価格表示（景表法）。
 * ★だから取り消し線も引かない。取り消し線は「以前この値段だった」の記号。 */
.price-was {
  font-size: 11px; font-weight: 400; color: var(--t3);
}
/* ボタンの中の札。★押す前に割引だと分かる位置がここしかない。 */
.btn-tag {
  margin-left: 8px;
  font-size: 10px; font-weight: 700;
  background: rgba(255,255,255,.22);
  border-radius: 4px; padding: 2px 6px;
}
.dlg-card { margin-top: 10px; font-size: 12px; color: var(--t2); }
.dlg-warn { margin-top: 10px; font-size: 12px; color: var(--ng); }

/* ---------------------------------------------------------------- カレンダー */
/* ★期間を1枚の月表示で選ぶ（開始・終了の2つの入力をやめた）。
 *   「20日から25日まで」を選ぶのに、日付を2回**打ち込ませる**のは重い。
 *   端と端を押すだけで済むほうが、指でも目でも早い。
 * ★中身は js/range.js が作る。ここは並べ方と色だけ。
 * ★JSが無ければ hidden のまま＝素の date 入力が出る（index.php の #range-rows）。 */
.cal { user-select: none; }
.cal-hd {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.cal-t { font-size: 15px; font-weight: 700; color: var(--t1); }
/* ★前後の月へ。★40px 角。指で押す的は小さくしない。 */
.cal-nav {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--t2); font-size: 16px; line-height: 1;
  cursor: pointer;
}
.cal-nav:hover { border-color: var(--line2); color: var(--t1); }

/* 曜日と日付は**同じ7列**で組む。別々に組むと、月によって縦がずれる。 */
.cal-wd, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-wd {
  margin-bottom: 4px;
  font-size: 11px; color: var(--t3); text-align: center;
}
.cal-grid { gap: 2px; }

.cal-d {
  aspect-ratio: 1;                /* ★正方形。日によって高さが変わらない */
  display: flex; align-items: center; justify-content: center;
  background: none; border: none;
  border-radius: var(--radius);
  color: var(--t1); font-size: 13px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.cal-d.pad { visibility: hidden; cursor: default; }   /* 月の頭の空き枠 */
.cal-d:hover:not(:disabled) { background: var(--ink4); }
/* ★土日は色を落とす。競艇は毎日やっているので「休み」ではないが、
 *   週の切れ目が見えないと日付を目で追えない。 */
.cal-wd .w0, .cal-d.w0 { color: var(--ng); }
.cal-wd .w6, .cal-d.w6 { color: var(--accent); }
/* ★先の日付。まだ起きていないレースの記録は存在しないので押させない。 */
.cal-d:disabled { color: var(--t3); opacity: .35; cursor: default; }
/* ★今日。選択の色とは別に、いつも位置が分かるようにしておく。 */
.cal-d.today { box-shadow: inset 0 0 0 1px var(--line2); }
/* ★間の日。★端（--brand）より薄く。同じ濃さだと範囲の端が分からない。 */
.cal-d.mid { background: rgba(92, 138, 217, .18); border-radius: 0; }
/* ★端（開始と終了）。チップの選択中と同じ濃紺——同じ「選んだ」を同じ色で。 */
.cal-d.edge {
  background: var(--brand); color: #fff; font-weight: 700;
  box-shadow: none;
}
/* ★いま何を選んでいるか・次に何を押せばいいかを文で出す。
 *   色だけだと「あと1回押す」が伝わらない。 */
.cal-sel {
  margin-top: 10px;
  font-size: 12px; color: var(--t2);
  font-variant-numeric: tabular-nums;
}