/*
 * TabiPark Availability Hub — 公開ショートコード [tabipark_availability_hub] 用CSS。
 *
 * v0.2.3：それまでshortcode本文内へ<style>として直接埋め込んでいたが、WordPress/テーマが
 * 同一リクエスト内でshortcodeを複数回評価した場合、print_styles_once()の「一度だけ出力」
 * flagが最初の（実際には使われない）評価で消費され、最終的な出力にCSSが含まれなくなる
 * という不具合が確認されたため、wp_enqueue_style()によるWordPress標準の読み込み方式へ
 * 変更した。このファイル自体はshortcodeの評価回数に一切依存しない。
 *
 * 重要：下部の「ホテル切替（タブ→パネル）」ルールは、本来
 * includes/class-hub-public.php の TabiPark_Availability_Hub::HOTELS 定数を
 * foreachしてPHPが動的生成していたが、この定数は6施設固定でコード変更なしに
 * 増減しないため、ここでは同じ6件のkey（land / ambassador / miracosta / toystory /
 * fantasy_springs / celebration）を静的に書き出している。
 * 将来HOTELS定数のkeyを追加・変更・削除する場合は、このファイルも合わせて
 * 更新する必要がある（PHP側からの自動生成ではなくなったため）。
 */

.tp-hub-public { max-width: 100%; color: #1f2d3d; background: #fff; }
.tp-hub-public, .tp-hub-public * { box-sizing: border-box; }
.tp-hub-public a { color: #12689b; }

.tp-hub-page-title { margin: 0 0 10px; color: #16283d; }
.tp-hub-intro p { margin: 0 0 6px; font-size: 0.92em; color: #4a5a68; line-height: 1.7; }
.tp-hub-global-updated { font-size: 0.85em; color: #7c8894; margin: 4px 0 18px; }

/* ---- タブセット（ラジオ+labelによるCSSのみの切替）
         v0.2.1：Flex→CSS Gridへ変更。PCは6列固定のため、あぶれた最後の1個が
         単独で次の行を全幅占有する現象（Flex+flex-wrapの既知の挙動）が解消される。
         ラジオ入力はposition:absoluteで通常フローから外れているため、Grid
         アイテムとして数えられるのはlabel 6個＋.tp-hub-panelsのみ。

         v0.2.2：Cocoon 2.9.4.3への更新後、fieldset/input/labelのタブ表示が
         テーマ側CSSに上書きされる事象の報告を受け、以下すべてのセレクタを
         .tp-hub-public配下へ明示的にscopeし、要素名（fieldset/input/label等）を
         含めて詳細度を引き上げた。.entry-content等のテーマ固有クラスには
         一切依存していない。 ---- */
.tp-hub-public fieldset.tp-hub-tabset {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-inline-size: 0; /* fieldsetのUA既定値（min-inline-size:min-content相当）がGrid幅計算を乱すのを防ぐ */
    margin: 0;
    padding: 0;
    border: none;
    border-width: 0;
    box-sizing: border-box;
}
/* legendは視覚的に隠す（見出しはh2で別途表示済み）。display:noneは
   スクリーンリーダーからも消えてしまうため使わず、視覚的にのみ隠す
   標準的な手法（visually-hidden）を使う。position:absoluteにより
   Gridのアイテム配置からも自動的に除外される。 */
.tp-hub-public fieldset.tp-hub-tabset legend.tp-hub-tabset-legend {
    position: absolute;
    grid-column: 1 / -1;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ラジオ本体は非表示（visually-hidden。display:noneは使わない＝
   キーボード操作・スクリーンリーダーでの選択状態通知を壊さないため）。
   fieldset > input[type=radio] という要素＋属性込みの詳細度により、
   テーマ側の input[type="radio"] 単体スタイルより強くする。 */
.tp-hub-public fieldset.tp-hub-tabset input.tp-hub-tab-radio[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    opacity: 0;
}
.tp-hub-public fieldset.tp-hub-tabset label.tp-hub-tab-label {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 9px 8px;
    border: 1px solid #d8d3c6;
    border-radius: 8px;
    background: #faf9f5;
    color: #3a3f37;
    font-family: inherit;
    font-size: 0.88em;
    line-height: 1.4;
    font-weight: bold;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}
.tp-hub-public fieldset.tp-hub-tabset input.tp-hub-tab-radio[type="radio"]:checked + label.tp-hub-tab-label {
    background: #eef0e9;
    border-color: #8a9a86;
    color: #16283d;
}
.tp-hub-public fieldset.tp-hub-tabset input.tp-hub-tab-radio[type="radio"]:focus-visible + label.tp-hub-tab-label {
    outline: 2px solid #5c7a63;
    outline-offset: 1px;
}
@media (max-width: 600px) {
    .tp-hub-public fieldset.tp-hub-tabset { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tp-hub-public fieldset.tp-hub-tabset label.tp-hub-tab-label { padding: 8px 4px; font-size: 0.82em; }
}

/* ---- パネル切替：タブ6列すべての下に全幅表示 ---- */
.tp-hub-public fieldset.tp-hub-tabset div.tp-hub-panels {
    grid-column: 1 / -1;
    width: 100%;
    box-sizing: border-box;
    margin-top: 18px;
}
.tp-hub-public fieldset.tp-hub-tabset div.tp-hub-panels div.tp-hub-panel { display: none; }

/* 以下6件は TabiPark_Availability_Hub::HOTELS のkeyを静的に書き出したもの（上部の注記参照）。
   [id^="tp-hub-tab-"][id$="-{key}"] という前方一致＋後方一致により、同一ページに複数の
   ショートコードが配置された場合のinstance番号（tp-hub-tab-1-land, tp-hub-tab-2-land, ...）
   にも対応する。 */
.tp-hub-public [id^="tp-hub-tab-"][id$="-land"]:checked ~ .tp-hub-panels [id^="tp-hub-panel-"][id$="-land"] { display: block; }
.tp-hub-public [id^="tp-hub-tab-"][id$="-ambassador"]:checked ~ .tp-hub-panels [id^="tp-hub-panel-"][id$="-ambassador"] { display: block; }
.tp-hub-public [id^="tp-hub-tab-"][id$="-miracosta"]:checked ~ .tp-hub-panels [id^="tp-hub-panel-"][id$="-miracosta"] { display: block; }
.tp-hub-public [id^="tp-hub-tab-"][id$="-toystory"]:checked ~ .tp-hub-panels [id^="tp-hub-panel-"][id$="-toystory"] { display: block; }
.tp-hub-public [id^="tp-hub-tab-"][id$="-fantasy_springs"]:checked ~ .tp-hub-panels [id^="tp-hub-panel-"][id$="-fantasy_springs"] { display: block; }
.tp-hub-public [id^="tp-hub-tab-"][id$="-celebration"]:checked ~ .tp-hub-panels [id^="tp-hub-panel-"][id$="-celebration"] { display: block; }

.tp-hub-panel-title { margin: 0 0 4px; color: #16283d; font-size: 1.15em; }
.tp-hub-hotel-note { font-size: 0.72em; font-weight: normal; color: #8a9186; }
.tp-hub-provider-updated { font-size: 0.8em; color: #8a9186; margin-bottom: 16px; }
.tp-hub-stale-note { color: #92661a; margin-left: 2px; }
.tp-hub-none-message { margin: 0.6em 0; color: #4a5a68; }

.tp-hub-month-title { margin: 20px 0 8px; color: #16283d; font-size: 1em; border-bottom: 1px solid #eee9df; padding-bottom: 4px; }
.tp-hub-month-group { display: flex; flex-direction: column; gap: 8px; }

.tp-hub-day-accordion {
    border: 1px solid #e3e0d8;
    border-radius: 8px;
    background: #fdfdfc;
    overflow: hidden;
}
.tp-hub-day-accordion[open] { border-color: #8a9a86; }

.tp-hub-day-summary {
    list-style: none;
    cursor: pointer;
    padding: 11px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.tp-hub-day-summary::-webkit-details-marker { display: none; }
.tp-hub-day-summary:hover { background: #f5f4ef; }

.tp-hub-day-date { font-weight: bold; color: #16283d; }
.tp-hub-day-right { display: flex; align-items: center; gap: 8px; }
.tp-hub-day-status { font-weight: bold; font-size: 0.9em; color: #3d6b46; }
.tp-hub-chevron { color: #9aa1a8; transition: transform 0.2s ease; flex-shrink: 0; }
.tp-hub-day-accordion[open] .tp-hub-chevron { transform: rotate(180deg); }

.tp-hub-day-body { padding: 4px 14px 14px; border-top: 1px solid #eef0e9; }

/* v0.3.0：Lazy Load用。日付を開いた瞬間、.tp-hub-day-body内へ一時的に表示する
   読み込み中／エラー文言のみの最小追加。既存クラス・既存レイアウトは変更していない。 */
.tp-hub-day-loading { font-size: 0.85em; color: #8a9186; margin: 8px 0; }
.tp-hub-day-error { font-size: 0.85em; color: #a13f37; margin: 8px 0; }

.tp-hub-room-empty { font-size: 0.85em; color: #8a9186; margin: 8px 0; }

.tp-hub-day-sep { border: none; border-top: 1px dashed #eee9df; margin: 10px 0; }

/* v0.2.4以前：JTBホテル単位のみの簡易表示（plan未取得時のフォールバックにも
   引き続き使用する。label/note/buttonの3要素を縦積みするレイアウトへ変更）。 */
.tp-hub-jtb-block { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 8px 0; }
.tp-hub-jtb-label { font-size: 0.92em; font-weight: bold; color: #2f3a33; }
.tp-hub-jtb-note { font-size: 0.85em; color: #8a9186; }

/* v0.2.4：JTB客室・プラン単位表示（JTB Plan Monitor由来）。
   1客室＝客室名→（複数）plan（プラン名→料金・在庫→ボタン）を縦に並べる。
   スマホでも横スクロールが起きないよう、常にcolumn方向のflex/grid構成にしている。

   v0.3.1：楽天側の見た目をJTBカードUIへ統一するため、以下3つのセレクタへ
   楽天側の新クラス（.tp-hub-provider-section / .tp-hub-provider-heading /
   .tp-hub-detail-card）を追加した。JTB側のHTML・クラス名・ロジックは
   一切変更していない（既存宣言はそのまま、セレクタをリスト拡張しただけ）。

   v0.3.2：カード内部を「タイトル→（価格/在庫＋ボタンの横並び）」の共通構造へ
   整理した。.tp-hub-detail-title / .tp-hub-detail-bottom / .tp-hub-detail-meta を
   新設し、既存の.tp-hub-room-name / .tp-hub-jtb-plan-name / .tp-hub-jtb-plan-meta
   のセレクタへ追加する形で共有した（JTB側の表示内容・stockの意味・URLロジックは
   一切変更していない）。 */
.tp-hub-jtb-plan-block,
.tp-hub-provider-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 0;
}
.tp-hub-jtb-plan-label,
.tp-hub-provider-heading {
    font-size: 0.78em;
    font-weight: bold;
    color: #6f7d75;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.tp-hub-jtb-plan-checked { font-weight: normal; text-transform: none; letter-spacing: normal; color: #8a9186; margin-left: 2px; }

.tp-hub-jtb-room { display: flex; flex-direction: column; gap: 8px; }
.tp-hub-jtb-room-name { font-weight: bold; color: #2f3a33; font-size: 0.95em; overflow-wrap: break-word; }

.tp-hub-jtb-plan-row,
.tp-hub-detail-card {
    background: #f6faf8;
    border: 1px solid #dbe6df;
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

/* v0.3.2：カードタイトル（楽天roomName／JTB display_plan_name）共通スタイル。 */
.tp-hub-jtb-plan-name,
.tp-hub-detail-title {
    font-size: 0.9em;
    color: #2f3a33;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* v0.3.2：カード下段（左＝価格/在庫、右＝予約ボタン）の共通レイアウト。
   ボタン側にmargin-left:autoを付けるため、meta要素の有無に関わらず
   （楽天でchargeが無く価格を表示しない日でも）ボタンは常に右寄せになる。 */
.tp-hub-detail-bottom {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.tp-hub-jtb-plan-meta,
.tp-hub-detail-meta {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.tp-hub-jtb-plan-price,
.tp-hub-detail-price {
    font-weight: bold;
    color: #2f8f6b;
    font-size: 0.98em;
}
.tp-hub-jtb-plan-stock { font-size: 0.85em; color: #5c6a63; }

.tp-hub-link-btn {
    display: inline-block;
    width: auto;
    min-width: 140px;
    max-width: 180px;
    margin-left: auto;
    text-align: center;
    padding: 7px 14px;
    border: 1px solid #8a9a86;
    border-radius: 6px;
    background: #fff;
    color: #2f5b3a !important;
    text-decoration: none !important;
    font-size: 0.85em;
    font-weight: bold;
    white-space: nowrap;
}
.tp-hub-link-btn:hover { background: #eef0e9; }

/* .tp-hub-jtb-blockのボタン（フォールバック表示。カードUIの対象外）は
   従来通り縦積みレイアウトの一部のため、margin-left:autoを打ち消す。 */
.tp-hub-jtb-block .tp-hub-link-btn { margin-left: 0; }

/* v0.3.3：じゃらんは「確認先」であり、楽天・JTBのようなカード群を持たない
   コンパクトな1ブロックのため、.tp-hub-jtb-blockと同じ縦積みレイアウトの
   扱い（margin-left:auto打ち消し）にする。文字色はJTBの注記
   （.tp-hub-jtb-note）と共通化する。 */
.tp-hub-jalan-note { font-size: 0.85em; color: #8a9186; }
.tp-hub-jalan-section .tp-hub-link-btn { margin-left: 0; }

/* v0.3.3（見た目調整）：じゃらんボタンは.tp-hub-link-btnの高さ・padding・
   border-radius・font-size・font-weight・displayをそのまま継承しつつ（楽天/JTB
   ボタンと寸法を揃えるため）、白背景＋細borderという「ブラウザ標準ボタン」風の
   見た目だけを、既存パレット（.tp-hub-link-btn自身のcolor値 #2f5b3a）を塗りに
   転用した単色ボタンへ変更する。新しいブランド色は追加していない。
   楽天/JTBが使う.tp-hub-link-btn単体のスタイルはこの上のルールのまま一切変更していない。

   また、じゃらんのボタン文言「じゃらんでこの日の空室を見る」は.tp-hub-link-btnの
   min-width:140px/max-width:180px（「楽天で予約」「JTBで予約」という短い文言を
   想定した幅）に対して長く、中途半端な幅に見えていたため、じゃらんに限り
   min-width/max-widthを解除し、内容に応じたコンパクト幅（PC）にする。 */
.tp-hub-link-btn.tp-hub-link-btn--jalan {
    min-width: 0;
    max-width: none;
    background: #2f5b3a;
    border-color: #2f5b3a;
    color: #fff !important;
}
.tp-hub-link-btn.tp-hub-link-btn--jalan:hover {
    filter: brightness(1.15);
}

@media (max-width: 600px) {
    .tp-hub-jtb-block .tp-hub-link-btn,
    .tp-hub-jalan-section .tp-hub-link-btn {
        width: 100%;
        max-width: none;
        text-align: center;
        padding: 10px 14px;
    }
}

/* v0.3.4：KNT（近畿日本ツーリスト）。楽天/JTBと同じ.tp-hub-provider-section /
   .tp-hub-provider-heading / .tp-hub-detail-card / .tp-hub-detail-bottom /
   .tp-hub-detail-meta / .tp-hub-detail-title / .tp-hub-detail-priceを共有するため、
   KNT固有のCSSは客室グルーピングの見出し・空室ラベルのバッジ・参考料金の
   小さな注記・最終確認の注記・予約ボタンのみ（既存の楽天/JTB/じゃらんの宣言は
   一切変更していない）。 */
.tp-hub-knt-room { display: flex; flex-direction: column; gap: 8px; }
.tp-hub-knt-room-name { font-weight: bold; color: #2f3a33; font-size: 0.95em; overflow-wrap: break-word; }

.tp-hub-knt-avail {
    display: inline-block;
    border-radius: 10px;
    padding: 2px 9px;
    font-size: 0.82em;
    font-weight: bold;
    background: #eef3f6;
    color: #2c5a7c;
    white-space: nowrap;
}
.tp-hub-knt-price-ref { font-size: 0.78em; color: #8a9186; }
.tp-hub-knt-reserve-note { font-size: 0.76em; color: #8a9186; margin: 2px 0 0; }
.tp-hub-knt-checked { font-size: 0.78em; color: #8a9186; margin: 6px 0 0; }

/* v0.3.4：KNT単独ページ（tabipark-knt-monitor v0.3.2）の実機で、ボタン文言
   「近畿日本ツーリストで予約」が楽天/JTB向けのmin-width:140px/max-width:180pxでは
   狭く折り返されることを確認済み。じゃらんボタン（.tp-hub-link-btn--jalan）と
   同じ考え方でmin-width/max-widthを解除し、内容に応じたコンパクト幅（PC）にする。
   色はKNT単独ページに合わせた控えめな紺系（#2c5a7c）。楽天/JTB/じゃらんの
   既存.tp-hub-link-btn系クラスの色・幅は一切変更していない。 */
.tp-hub-link-btn.tp-hub-link-btn--knt {
    min-width: 0;
    max-width: none;
    white-space: nowrap;
    background: #fff;
    border-color: #2c5a7c;
    color: #2c5a7c !important;
}
.tp-hub-link-btn.tp-hub-link-btn--knt:hover {
    background: #eef3f6;
}

@media (max-width: 600px) {
    .tp-hub-link-btn.tp-hub-link-btn--knt {
        width: 100%;
        max-width: none;
    }
}