/*
 * LP フォームの日程入力（LIFERU-447 / LIFERU-449）。部品は resources/views/lp/partials/dates.blade.php。
 *
 * チップ（2択）と日付欄は各LPのクラス（sg-chip / sg-input など）で描き、ここでは
 * 並べ方と、各LPに無い部品（第N希望・削除・追加）だけを持つ。
 * 色はカテゴリ別LP 7本で共通の値（--sg-primary などと同じ）を直に書いている。
 * 各LPの CSS より後に読み込むこと（.xx-chips の並べ方をここで上書きする）。
 */

/* 2択は横幅を半分ずつにそろえる（文言の長さで幅が変わらないように）。
   ハウスクリーニングのチップ（hc-chip-box）は inline-block なので、ここで枠を広げる。 */
.lpd-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 0; margin-bottom: 0; }
.lpd-choice span {
    display: flex; align-items: center; justify-content: center; min-height: 40px;
    text-align: center; white-space: normal; line-height: 1.35; padding: 4px 10px;
}

.lpd-dates { margin-top: 10px; }
.lpd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

/* 第N希望 ／ 日付欄 ／ 削除 の3列。1件目は削除を出さないが、列幅は残して欄の幅をそろえる。
   番号の列は文字の幅だけ取り、残りをすべて日付欄に回す。 */
.lpd-row {
    display: grid; grid-template-columns: max-content minmax(0, 1fr) 40px; align-items: center; gap: 6px;
}
.lpd-no { font-size: 12px; font-weight: 700; color: #6B7280; white-space: nowrap; }
.lpd-input { min-width: 0; }
.lpd-input.lpd-invalid { border-color: #c0392b; }

/* 希望時間（LIFERU-451・data-lpd-time のLPだけ）。希望日1件を1枚のカードにする。
     第N希望 ……………… ✕
     [ 日付             ]
     [ 希望時間（select）]
   フォームの幅は SP でも PC（左カラム固定）でも 300px 前後なので、日付と時間を横に並べると
   選択肢の文言（「夕方（15:00〜18:00）」）が切れる。縦に積んで、2つの欄の幅をそろえる。
   カードで区切るのは、件数が増えても「どの時間がどの日か」を取り違えないため。 */
[data-lpd-time] .lpd-list { gap: 10px; }
[data-lpd-time] .lpd-row {
    grid-template-columns: minmax(0, 1fr) 32px; gap: 8px;
    padding: 8px 10px 10px; border: 1px solid #E3E8E6; border-radius: 12px; background: #F7F9F8;
}
[data-lpd-time] .lpd-no { grid-column: 1; grid-row: 1; }
[data-lpd-time] .lpd-remove { grid-column: 2; grid-row: 1; width: 32px; height: 32px; font-size: 13px; }
[data-lpd-time] .lpd-remove:hover { background: #E9EEEC; }
[data-lpd-time] .lpd-input { grid-column: 1 / -1; grid-row: 2; }
.lpd-time { grid-column: 1 / -1; grid-row: 3; min-width: 0; }
.lpd-time-select { width: 100%; min-width: 0; }

.lpd-remove {
    width: 40px; height: 40px; border: 0; border-radius: 999px; background: transparent;
    color: #6B7280; font-size: 15px; cursor: pointer;
}
.lpd-remove:hover { background: #F1F5F3; color: #24323D; }
.lpd-remove[hidden] { display: block; visibility: hidden; }

/* 追加はリンク風。押しやすいよう高さは 44px 取る。 */
.lpd-foot { display: flex; justify-content: flex-end; }
.lpd-add {
    min-height: 44px; padding: 0 4px; border: 0; background: transparent; cursor: pointer;
    color: #0E8B6B; font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px;
}
.lpd-add:disabled { color: #9aa5a1; text-decoration: none; cursor: default; }

.lpd-remove:focus-visible, .lpd-add:focus-visible { outline: 2px solid #0E8B6B; outline-offset: 2px; }