/* price-calc.css — 宿泊料金シミュレーター
 * テーマディレクトリ直下に配置してください
 * ================================================================ */

/* ── ラッパー ─────────────────────────────────────── */
#kp-price-calc {
    max-width: 680px;
    margin: 0 auto;
    font-family: sans-serif;
}

/* ── 入力フォーム ────────────────────────────────── */
.kp-form {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 16px;
    margin-bottom: 1.2rem;
    padding: 16px;
    background: #f8f7f4;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}
.kp-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.kp-field label {
    font-size: 0.78rem;
    font-weight: bold;
    color: #555;
}
.kp-field input,
.kp-field select {
    padding: 7px 8px;
    font-size: 0.9rem;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
}

/* ── 案内文 ──────────────────────────────────────── */
.kp-hint {
    font-size: 0.88rem;
    color: #777;
    text-align: center;
    padding: 12px 0;
}
.kp-warning {
    font-size: 0.88rem;
    color: #B91C1C;
    text-align: center;
    padding: 12px 0;
}

/* ── 明細テーブル ────────────────────────────────── */
.kp-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0.8rem;
}
.kp-table th {
    text-align: left;
    padding: 7px 10px;
    font-size: 0.78rem;
    font-weight: bold;
    color: #555;
    border-bottom: 2px solid #ddd;
}
.kp-table td {
    padding: 7px 10px;
    font-size: 0.88rem;
    color: #333;
    border-bottom: 1px solid #eee;
}
.kp-td-kind  { color: #555; }
.kp-kind-pre { color: #B91C1C; font-weight: bold; }
.kp-td-price { text-align: right; font-variant-numeric: tabular-nums; }
.kp-table th:last-child { text-align: right; }

/* ── 合計 ────────────────────────────────────────── */
.kp-total {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 14px;
    padding: 10px 10px 12px;
    border-bottom: 2px solid #ddd;
    margin-bottom: 0.9rem;
}
.kp-total-label {
    font-size: 0.9rem;
    font-weight: bold;
    color: #555;
}
.kp-total-price {
    font-size: 1.45rem;
    font-weight: bold;
    color: var(--color_main, #656733); /* SWELLテーマのメインカラーに追従 */
    font-variant-numeric: tabular-nums;
}

/* ── 注記 ────────────────────────────────────────── */
.kp-notes {
    margin: 0 0 1.2rem;
    padding-left: 1.2em;
    font-size: 0.78rem;
    color: #777;
    line-height: 1.7;
}

/* ── 予約ボタン ──────────────────────────────────── */
.kp-reserve {
    text-align: center;
    margin-bottom: 0.5rem;
}
.kp-reserve-btn {
    display: inline-block;
    padding: 14px 48px;
    background: var(--color_main, #656733); /* SWELLテーマのメインカラーに追従 */
    color: #fff;
    font-size: 1rem;
    font-weight: bold;
    text-decoration: none;
    border-radius: 40px; /* サイト既存ボタンと同じピル型 */
    transition: opacity 0.15s;
}
.kp-reserve-btn:hover {
    opacity: 0.85;
    color: #fff;
}

/* ── レスポンシブ ──────────────────────────────────── */
@media (max-width: 480px) {
    .kp-form { grid-template-columns: repeat(2, 1fr); padding: 12px; }
    .kp-table td { font-size: 0.82rem; padding: 6px 6px; }
    .kp-table th { font-size: 0.74rem; padding: 6px 6px; }
    .kp-total-price { font-size: 1.25rem; }
    .kp-reserve-btn { display: block; padding: 12px 0; }
}