
/* フォームの基本スタイリング */
.field-title {
  font-weight: bold;
  margin-bottom: 0.5em;
}
.field-title:not(:first-child) {
  margin-top: 1.5em;
}

/* ----- accent-colorで色をカスタマイズした例 ----- */
/* インジケーターカラーの定義 */
.demo-form {
  --indicator-color: #e91e63; /* ピンク */
}
/* ラベルをFlexboxで横並びにし、インジケーターとテキストの配置を調整 */
.simple-radio, .simple-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
:is(.simple-radio, .simple-checkbox) > input {
  /* サイズをテキストに合わせて調整 */
  width: 1em;
  height: 1em;
  cursor: pointer;

  /* accent-color でインジケーターの色を変更 */
  accent-color: var(--indicator-color);

  /* フォーカス時のアウトラインカラーも変更（Safari を除く） */
  outline-color: var(--indicator-color);
}

/* ----- inputを非表示にしたカスタマイズ ----- */
/* フォームの基本スタイリング */
.field-title {
  font-weight: bold;
  margin-bottom: 0.5em;
}
.field-title:not(:first-child) {
  margin-top: 1.5em;
}

/* display:none を使わずに <input> 本体を隠す */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/*
 * radio & checkbox のスタイリング（本題）
 */
.radio-field,
.checkbox-field {
  display: grid;
  gap: 0.25em;
}
.custom-control {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.625em;
  cursor: pointer;
}

/* カスタムインジケーターの基本スタイル */
.custom-indicator {
  position: relative;
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  background-color: #fff;
  border: 2px solid var(--color--border);
  transition-duration: 0.3s;
  transition-property: background, border-color, box-shadow;
  flex-shrink: 0;
}
.radio-indicator {
  border-radius: 50%;
}
.checkbox-indicator {
  border-radius: 4px;
}

/* 擬似要素でチェックマークを描画（デフォルトは非表示） */
.custom-indicator::after {
  content: "";
  position: absolute;
  display: none;
}

/* ラジオボタン：中央に小さな円を描画 */
.radio-indicator::after {
  top: 50%;
  left: 50%;
  width: 48%;
  height: 48%;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}

/* チェックボックス：チェックマークをborderで描画 */
.checkbox-indicator::after {
  width: 30%;
  height: 60%;
  border: solid #fff;
  border-width: 0 3px 3px 0;

  /* 配置の調整 */
  top: 50%;
  left: 50%;
  rotate: 45deg;
  translate: -50% -65%; /* 回転してマークが下側にくるのを考慮して y座標は調整 */
}

/* 選択された時のスタイル */
.visually-hidden:checked + .custom-indicator {
  background-color: var(--indicator-color);
  border-color: var(--indicator-color);
  box-shadow: var(--shadow--sm);
}
.visually-hidden:checked + .custom-indicator::after {
  display: block;
}

/* Tab キーでのフォーカス時のスタイル */
.visually-hidden:focus-visible + .custom-indicator {
  outline: 4px solid color-mix(in srgb, var(--indicator-color) 25%, transparent);
  border-color: var(--indicator-color);
}


/* ----- トグルスイッチのUI ----- */
/* 
 * トグルスイッチ型のチェックボックス
 */
 .toggle-field {
  display: grid;
  gap: 0.5em;
}
.toggle-switch {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  gap: 0.625em;

  /* つまみ（ボール）のサイズをCSS変数で定義 */
  --thumb-size: 1.25em;
}

/* トラック（レール）部分 */
.toggle-track {
  position: relative;
  width: calc(var(--thumb-size) * 2);
  height: var(--thumb-size);
  background-color: #d1d5db;
  border-radius: 9999px;
  transition: background-color 0.2s;
}

/* つまみ（ボール）部分 */
.toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(var(--thumb-size) - 4px);
  height: calc(var(--thumb-size) - 4px);
  background-color: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* チェックがONの時：トラックの色を変更 */
.visually-hidden:checked + .toggle-track {
  background-color: var(--indicator-color);
}

/* チェックがONの時：つまみを右側へ移動 */
.visually-hidden:checked + .toggle-track > .toggle-thumb {
  transform: translateX(var(--thumb-size));
}

/* フォーカスリングの調整 */
.visually-hidden:focus-visible + .toggle-track {
  outline: 4px solid color-mix(in srgb, var(--indicator-color) 25%, transparent);
}


/* ----- カード型UIのラジオボタン ----- */
/* フォームの基本スタイリング */
.demo-form-card-radio {
  --indicator-color: #2563eb;
}
.field-title {
  font-weight: bold;
  margin-bottom: 1em;
  font-size: var(--font-size--md);
}

/* display:none を使わずに <input> 本体を隠す */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 
 * カード型のラジオボタン
 */
.radio-card-field {
  display: grid;
  gap: 1.5rem;
}
.radio-card {
  position: relative;
  display: block;
  cursor: pointer;
}
.radio-card__content {
  display: grid;
  gap: 0.25em;
  height: 100%;
  padding: 1em;
  background-color: #fff;
  border: 2px solid var(--color--border);
  border-radius: 12px;
  transition: all 0.2s ease-in-out;
}
.radio-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.radio-card__title {
  font-weight: bold;
  font-size: var(--font-size--md);
}
.radio-card__description {
  font-size: var(--font-size--sm);
  margin-bottom: 0.5em;
  opacity: 0.8;
}
.radio-card__price {
  font-weight: bold;
  font-size: var(--font-size--lg);
}
.radio-card__price > span {
  font-size: var(--font-size--xs);
  opacity: 0.8;
  font-weight: normal;
}

/* 選択された時のスタイル */
.visually-hidden:checked + .radio-card__content {
  border-color: var(--indicator-color);
  background-color: color-mix(in srgb, var(--indicator-color) 5%, transparent);
  box-shadow: var(--shadow--md);
}
/* フォーカスリング */
.visually-hidden:focus-visible + .radio-card__content {
  outline: 2px solid var(--indicator-color);
}
/* hover時はボーダーカラーだけ変える */
.radio-card:hover .radio-card__content {
  border-color: var(--indicator-color);
}

