/* 日程絞り込み（RENTALCUBE-4482）: 選んだ日程で借りられない商品カードを薄くしてラベルを出す */
li.ps-avail--ng .product_item,
li.ps-avail--ng .ps-top-products__inner {
    position: relative;
    opacity: 0.45;
}
li.ps-avail--ng .ps-avail__label {
    position: absolute;
    left: 8px;
    top: 8px;
    z-index: 2;
    padding: 2px 8px;
    border-radius: 3px;
    background: #666;
    color: #fff;
    font-size: 11px;
    line-height: 1.6;
    white-space: nowrap;
    opacity: 1;
}

/* トップの「日程から探す」フォーム（Block/rental_date_search.twig）
   ヒーロー（renewal-a.css の .pr-hero）と同じ幅・色・角丸・ボタンに合わせ、中央に寄せる */
body.front_page .ps-datesearch {
    max-width: var(--pr-page-max, 1200px);
    margin: 0 auto;
    padding: 0 16px 24px;
    box-sizing: border-box;
}
body.front_page .ps-datesearch__form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* 日付欄の下の目安は行数が違う（到着予定日 1 行、返却の決まりは折り返す）ので上揃えにし、ボタンはラベルのぶん下げる */
    align-items: flex-start;
    gap: 12px 16px;
    padding: 20px 24px;
    border: 1px solid var(--pr-line, #e5e3df);
    border-radius: 10px;
    background: var(--pr-bg, #f7f7f5);
}
body.front_page .ps-datesearch__title {
    width: 100%;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--pr-ink, #1a1a1a);
}
body.front_page .ps-datesearch__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    font-weight: 400;
}
body.front_page .ps-datesearch__label {
    font-size: 13px;
    font-weight: 700;
    color: var(--pr-ink, #1a1a1a);
}
/* 日付の下に出す「到着予定日」「集荷予定日」の目安（rental-availability.js が埋める）。
   片方だけ出る時（開始日が未入力など）も欄の高さが変わらないよう、行は常に確保して文字だけ消す（form は下揃えのため） */
body.front_page .ps-datesearch__hint {
    display: block;
    min-height: 17px;
    max-width: 174px; /* 返却の決まりが「返却｜または」で折れる幅（Noto Sans JP 12px で 1 行目 169px、「ま」まで入ると 181px） */
    font-size: 12px;
    line-height: 17px;
    color: var(--pr-ink2, #555);
}
body.front_page .ps-datesearch__hint[hidden] { display: block; visibility: hidden; }
body.front_page .ps-datesearch__hint-value {
    font-weight: 700;
    color: var(--pr-ink, #1a1a1a);
}
body.front_page .ps-datesearch__input {
    height: 46px;
    min-width: 150px;
    padding: 0 12px;
    border: 1px solid var(--pr-line2, #d5d3cf);
    border-radius: 8px;
    font-size: 15px;
    color: var(--pr-ink, #1a1a1a);
    background: #fff;
    box-sizing: border-box;
}
body.front_page .ps-datesearch__form .pr-btn {
    height: 46px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 46px;
    /* ラベル（13px + 6px の間隔）のぶん下げて日付欄に揃える（form は上揃え） */
    margin-top: 25px;
}
body.front_page .ps-datesearch__form .pr-btn--primary {
    padding-left: 36px;
    padding-right: 36px;
}
@media screen and (max-width: 767px) {
    body.front_page .ps-datesearch { padding: 0 12px 16px; }
    body.front_page .ps-datesearch__form { padding: 16px 12px; gap: 10px 8px; }
    /* 開始日と終了日を横に並べる */
    body.front_page .ps-datesearch__field { flex: 1 1 calc(50% - 8px); min-width: 0; }
    body.front_page .ps-datesearch__input { width: 100%; min-width: 0; }
    body.front_page .ps-datesearch__form .pr-btn { flex: 1 1 100%; margin-top: 0; }
}
/* 「日程を解除」は日程を覚えている時だけ出す。pr-btn の display が hidden 属性より強いので明示する */
body.front_page .ps-datesearch__clear[hidden] { display: none !important; }

/* 一覧の件数の上に出す「今効いている日程」のフォーム（Product/_rental_date_condition.twig） */
.ps-avail-cond {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.6;
}
.ps-avail-cond__input {
    height: 34px;
    padding: 0 8px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    background: #fff;
}
/* 日付と目安（到着予定日・集荷予定日）の組。PC は横並び */
.ps-avail-cond__field {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
/* 日付の横の「到着予定日」と返却の決まり */
.ps-avail-cond__hint {
    font-size: 12px;
    color: #555;
    white-space: nowrap;
}
.ps-avail-cond__hint--rule { white-space: normal; }
.ps-avail-cond__hint[hidden] { display: none; }
.ps-avail-cond__hint [data-ps-date-hint-value] { font-weight: 700; color: #222; }
.ps-avail-cond__hint::before { content: '（'; }
.ps-avail-cond__hint::after { content: '）'; }
.ps-avail-cond__submit {
    height: 34px;
    padding: 0 14px;
    border: 1px solid #222;
    border-radius: 6px;
    background: #222;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.ps-avail-cond__clear {
    margin-left: 8px;
    font-size: 12px;
    text-decoration: underline;
}
/* スマホ: 1 行目「開始日 〜 終了日」（日付の下に目安）、2 行目「で借りられる商品」、3 行目ボタン */
@media screen and (max-width: 767px) {
    .ps-avail-cond { gap: 8px 6px; }
    .ps-avail-cond__prefix,
    .ps-avail-cond__suffix { flex-basis: 100%; }
    .ps-avail-cond { align-items: flex-start; }
    .ps-avail-cond__field {
        flex: 1 1 0;
        min-width: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }
    .ps-avail-cond__field .ps-avail-cond__input { width: 100%; min-width: 0; box-sizing: border-box; }
    .ps-avail-cond__between { flex: 0 0 auto; align-self: flex-start; line-height: 34px; }
    /* 括弧は外し、日付の下に小さく */
    .ps-avail-cond__hint { display: block; min-height: 15px; font-size: 11px; line-height: 15px; white-space: normal; }
    /* 片方だけ出る時も 2 つの日付欄の高さを揃える（行は残して文字だけ消す） */
    .ps-avail-cond__hint[hidden] { display: block; visibility: hidden; }
    .ps-avail-cond__hint::before,
    .ps-avail-cond__hint::after { content: none; }
    .ps-avail-cond__submit { flex: 0 0 auto; }
    .ps-avail-cond__clear { margin-left: 4px; }
}
/* 日程欄のエラー（終了日が開始日より前・6 ヶ月超え）。一覧で受け付けなかった時にサーバーが出すものと、
   トップ・一覧でボタンを押した時に rental-availability.js が出すもの（ps-date-range__error） */
.ps-avail-cond__error,
.ps-date-range__error {
    flex-basis: 100%;
    margin: 0;
    color: #c62828;
    font-size: 13px;
    font-weight: 700;
}
body.front_page .ps-datesearch__form .ps-date-range__error {
    text-align: center;
}