/* ===================================================================
   共通コンポーネント用CSS（oil_reservation_form.html から外出し）
   フォーム部品の見た目・バリデーション表示など、他の予約フォーム等でも
   再利用できる汎用的なスタイルをまとめています。
   =================================================================== */

/* ラジオ/チェックボックスの見た目調整（Tailwind Play CDN環境向け最小限のCSS） */
input[type="radio"], input[type="checkbox"] {
  accent-color: #1d4ed8;
}

/* 日時選択カレンダー用 */
.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 0.15em;
}
:root { --rh: 2rem; }
@media (min-width: 640px) {
  :root { --rh: 2.25rem; }
}
.time-cell-box {
  height: var(--rh);
  max-height: var(--rh);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 入力エラー時（HTML5バリデーション）：フォーカス時と同様の太枠を赤で表示 */
/* data-wz-any-required なラジオ（オイルエレメント交換など）は、枠を囲む親divの方でエラー表示するため除外 */
input:invalid:not([data-wz-any-required]), select:invalid, textarea:invalid {
  border-color: #f43f5e; /* rose-500 */
  box-shadow: 0 0 0 2px #f43f5e;
  background-color: #fff8f8; /* rose-50よりさらに薄いエラー色 */
}

/* ラジオボタンのエラー表示：丸い見た目に合わせて枠・背景も円形にする（data-wz-any-requiredのものは親divで表示するため除外） */
input[type="radio"]:invalid:not([data-wz-any-required]) {
  border-radius: 50%;
  box-shadow: 0 0 0 2px #f43f5e;
  background-color: #fff8f8;
}

/* 来店希望日：readonlyを使わずJSでタイプ入力を無効化しているため、readonly時と同じ見た目（カーソル非表示・選択不可）にする */
.date-select-trigger {
  caret-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

/* ヘッダーのハンバーガーメニュー（参考サイトの .navbar-toggle と同じ構造・挙動） */
.navbar-toggle {
  display: block;
}

/* ハンバーガーメニュー */
.navbar-toggle span:nth-of-type(1) {
  top: 35%;
}
.navbar-toggle span:nth-of-type(2) {
  top: 50%;
}
.navbar-toggle span:nth-of-type(3) {
  top: 65%;
}

/* 閉じるアイコン */
.navbar-toggle.on span:nth-of-type(1) {
  top: 50%;
  transform: rotate(-45deg);
}
.navbar-toggle.on span:nth-of-type(2) {
  opacity: 0;
}
.navbar-toggle.on span:nth-of-type(3) {
  top: 50%;
  transform: rotate(45deg);
}

.navbar-toggle span {
  display: block;
  position: absolute;
  left: 27%;
  background-color: #fff;
  width: 46%;
  height: 2px;
  transition: all .3s ease-out;
}