/*
 * TabiPark KNT Monitor — 公開ショートコード [tabipark_knt_hotel] 用CSS（v0.3.3）。
 *
 * JTB Monitor単独ページ（tp-jtb-*）と同じ構造・余白・角丸・アコーディオンの
 * 挙動に揃えつつ、ブランドを区別するためアクセント色を紺系（#2c5a7c）にしている。
 * 空室状況（○=空室あり/△=残りわずか）は緑・琥珀のセマンティックカラーとし、
 * ブランドのアクセント色とは独立させている。
 *
 * wp_enqueue_style()経由で読み込む（shortcode本文へのinline <style>出力はしない。
 * JTB/Rakuten Monitorで確認済みの「shortcodeが同一リクエスト内で複数回評価されると
 * 最終出力からCSSが失われる」不具合を避けるため）。
 */

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

.tp-knt-provider-label { font-size: 0.85em; color: #7c8894; margin-bottom: 4px; }
.tp-knt-hotel-name { margin: 0 0 6px; color: #16283d; overflow-wrap: break-word; }
.tp-knt-condition { font-size: 0.9em; color: #4a5a68; margin: 0 0 16px; }
.tp-knt-none-message { margin: 0.6em 0; }

.tp-knt-accordion { display: flex; flex-direction: column; gap: 10px; }

.tp-knt-day-accordion {
    border: 1px solid #dbe2e8;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}
.tp-knt-day-accordion[open] { border-color: #2c5a7c; }

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

.tp-knt-day-summary-main {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
}
.tp-knt-dot { color: #2c5a7c; margin-right: 4px; font-size: 0.75em; vertical-align: middle; }
.tp-knt-day-date { font-weight: bold; color: #16283d; }
.tp-knt-day-price { color: #6b7785; font-size: 0.92em; white-space: nowrap; }

.tp-knt-day-count {
    display: inline-block;
    background: #e7eef3;
    color: #2c5a7c;
    border-radius: 12px;
    padding: 2px 10px;
    font-size: 0.88em;
    font-weight: bold;
    white-space: nowrap;
}

.tp-knt-chevron {
    color: #9aa7b2;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.tp-knt-day-accordion[open] .tp-knt-chevron { transform: rotate(180deg); }

.tp-knt-day-body {
    padding: 4px 14px 16px;
    border-top: 1px solid #eef1f4;
}
.tp-knt-day-placeholder,
.tp-knt-day-loading { font-size: 0.85em; color: #7c8894; margin: 8px 0; }
.tp-knt-day-error { font-size: 0.85em; color: #a13f37; margin: 8px 0; }

/* 客室・プラン詳細（Ajax Lazy Load後に挿入される） */
.tp-knt-plan-detail { display: flex; flex-direction: column; gap: 14px; }
.tp-knt-plan-room { display: flex; flex-direction: column; gap: 8px; }
.tp-knt-plan-room-name { font-weight: bold; color: #16283d; font-size: 0.95em; overflow-wrap: break-word; }

.tp-knt-plan-card {
    background: #f7f9fa;
    border: 1px solid #dbe2e8;
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tp-knt-plan-name {
    font-size: 0.92em;
    color: #16283d;
    overflow-wrap: break-word;
    word-break: break-word;
}
.tp-knt-plan-bottom {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.tp-knt-plan-meta { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }

.tp-knt-plan-avail {
    display: inline-block;
    border-radius: 12px;
    padding: 2px 10px;
    font-size: 0.85em;
    font-weight: bold;
    white-space: nowrap;
}
.tp-knt-avail--ok { background: #e6f3ec; color: #2f8f6b; }
.tp-knt-avail--low { background: #fbf1de; color: #b8760f; }

.tp-knt-plan-price { font-weight: bold; color: #2c5a7c; font-size: 0.98em; }
.tp-knt-plan-price-ref { font-size: 0.82em; color: #7c8894; }

.tp-knt-plan-btn {
    display: inline-block;
    width: auto;
    min-width: 160px;
    max-width: 220px;
    margin-left: auto;
    text-align: center;
    background: #fff;
    color: #2c5a7c !important;
    border: 1px solid #2c5a7c;
    text-decoration: none !important;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.9em;
    font-weight: bold;
}
.tp-knt-plan-btn:hover { background: #eef3f6; }

.tp-knt-plan-fallback { padding-top: 4px; }
.tp-knt-plan-fallback-text { font-size: 0.9em; color: #6b7785; margin: 0 0 10px; }

.tp-knt-reserve-note { font-size: 0.78em; color: #7c8894; margin: 2px 0 0; }

.tp-knt-checked { font-size: 0.8em; color: #8a97a2; margin: 10px 0 0; }

.tp-knt-footnote { font-size: 0.8em; color: #7c8894; line-height: 1.7; margin: 16px 0 0; }

@media (max-width: 480px) {
    .tp-knt-plan-btn { width: 100%; max-width: none; margin-left: 0; }
    .tp-knt-plan-bottom { flex-direction: column; align-items: stretch; }
}