/* 予約フォーム専用スタイル。Go版 templates/reservation_form.html の
   インライン <style> を実ファイルへ出したもの。hono/jsx は <style> の中身も
   実体参照化するため、子セレクタや引用符を含むCSSはインラインにできない。 */
/* ===== ページ全体 ===== */
    body { background: var(--bg, #fbfaf7); }

    /* ===== 画像モーダル ===== */
    .modal-overlay {
        position: fixed; inset: 0;
        background: rgba(0,0,0,0.9);
        z-index: 2000; display: none;
        justify-content: center; align-items: center;
        cursor: pointer;
    }
    .modal-content {
        position: relative; display: flex;
        flex-direction: column; align-items: center;
        max-width: 95%; max-height: 95%;
    }
    .modal-content img {
        max-width: 100%; max-height: 90vh;
        object-fit: contain; border-radius: 4px;
        animation: fadeIn 0.3s ease;
    }
    .modal-hint {
        margin-top: 15px; color: rgba(255,255,255,0.8);
        font-size: 14px; background: rgba(255,255,255,0.1);
        padding: 5px 15px; border-radius: 20px;
    }
    .modal-close {
        position: absolute; top: 16px; right: 16px;
        z-index: 2100;
        width: 44px; height: 44px;
        display: flex; align-items: center; justify-content: center;
        background: rgba(255,255,255,0.12);
        color: #fff; border: none; border-radius: 50%;
        font-size: 26px; line-height: 1; cursor: pointer;
        transition: background 0.15s;
    }
    .modal-close:hover { background: rgba(255,255,255,0.25); }
    @keyframes fadeIn {
        from { opacity:0; transform:scale(0.95); }
        to   { opacity:1; transform:scale(1); }
    }

    /* ===== 2カラムレイアウト ===== */
    .rf-page {
        max-width: 1100px;
        margin: 0 auto;
        padding: 36px 36px 80px;
    }
    .rf-layout {
        display: grid;
        grid-template-columns: 1.4fr 1fr;
        gap: 40px;
        align-items: start;
    }

    /* ===== 左: イベント詳細 ===== */
    .rf-main { min-width: 0; }

    .rf-org {
        font-size: 12px;
        color: var(--fg-muted, #6b665d);
        margin-bottom: 6px;
    }
    .rf-title {
        font-size: 28px;
        font-family: var(--font-display, sans-serif);
        font-weight: 700;
        line-height: 1.25;
        letter-spacing: -0.02em;
        color: var(--fg, #1a1814);
        margin-bottom: 20px;
    }

    /* 画像レイアウト */
    .rf-images { margin-bottom: 24px; }
    .rf-images-2col {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 両画像を均等幅で表示 */
        gap: 8px;
    }
    .rf-img-main {
        width: 100%; height: 280px;
        object-fit: cover;
        border-radius: var(--kch-radius-lg, 10px);
        display: block;
        cursor: pointer;
    }
    .rf-img-sub {
        width: 100%; height: 280px; /* メイン画像と同じ高さ */
        object-fit: cover;
        border-radius: var(--kch-radius-lg, 10px);
        display: block;
        cursor: pointer;
    }
    .rf-img-single {
        width: 100%; height: 300px;
        object-fit: cover;
        border-radius: var(--kch-radius-lg, 10px);
        display: block;
        cursor: pointer;
    }

    /* 情報グリッド */
    .rf-info-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px 20px;
        padding: 18px;
        background: var(--bg-sunken, #f4f2ed);
        border-radius: var(--kch-radius-lg, 10px);
        margin-bottom: 28px;
    }
    .rf-info-row {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        font-size: 13px;
        color: var(--fg, #1a1814);
        line-height: 1.5;
    }
    .rf-info-row span:first-child { flex-shrink: 0; }
    .rf-info-row-wide {
        grid-column: 1 / -1;
    }

    /* 説明・備考 */
    .rf-section { margin-bottom: 28px; }
    .rf-section-title {
        font-size: 17px;
        font-weight: 700;
        letter-spacing: -0.01em;
        margin-bottom: 10px;
        color: var(--fg, #1a1814);
    }
    .rf-description-text {
        font-size: 14px;
        color: var(--fg-muted, #6b665d);
        line-height: 1.8;
        white-space: pre-wrap;
        word-wrap: break-word;
    }
    .rf-notes-box {
        padding: 16px;
        background: var(--bg-sunken, #f4f2ed);
        border-radius: var(--radius, 6px);
        font-size: 13.5px;
        line-height: 1.7;
        color: var(--fg, #1a1814);
        white-space: pre-wrap;
        word-wrap: break-word;
    }

    /* ===== 右: 予約パネル ===== */
    .rf-panel-wrap {
        /* sticky wrapper */
    }
    .rf-panel {
        position: sticky;
        top: 80px;
        background: var(--bg-card, #fff);
        border: 1px solid var(--border, #e8e4dc);
        border-radius: var(--kch-radius-lg, 10px);
        overflow: hidden;
    }

    /* パネル内ステータス */
    .rf-panel-status {
        padding: 10px 18px;
        background: var(--bg-sunken, #f4f2ed);
        border-bottom: 1px solid var(--border, #e8e4dc);
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 12px;
        color: var(--fg-muted, #6b665d);
    }
    .rf-status-dot {
        width: 7px; height: 7px;
        border-radius: 50%;
        background: oklch(65% 0.2 145);
        flex-shrink: 0;
    }
    .rf-panel-status strong { color: var(--fg, #1a1814); }

    /* パネル内フォーム */
    .rf-panel form {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 18px;
    }
    .rf-panel-section {
        margin-bottom: 18px;
        padding-bottom: 18px;
        border-bottom: 1px solid var(--border, #e8e4dc);
    }
    .rf-panel-section:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
    .rf-panel-section h3 {
        font-size: 13px;
        font-weight: 700;
        color: var(--fg, #1a1814);
        margin-bottom: 10px;
    }

    /* チケット行（パネル内） */
    .rf-ticket-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 11px 12px;
        border: 1px solid var(--border, #e8e4dc);
        border-radius: var(--radius, 6px);
        margin-bottom: 8px;
    }
    .rf-ticket-item:last-child { margin-bottom: 0; }
    .rf-ticket-name {
        font-weight: 600;
        font-size: 13.5px;
        color: var(--fg, #1a1814);
        margin-bottom: 2px;
    }
    .rf-ticket-price-stock {
        font-size: 11.5px;
        color: var(--fg-muted, #6b665d);
    }
    .rf-ticket-controls { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

    /* 合計 */
    .rf-panel-total {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        padding: 12px;
        background: var(--bg-sunken, #f4f2ed);
        border-radius: var(--radius, 6px);
        margin-bottom: 16px;
    }
    .rf-panel-total-label { font-size: 12px; color: var(--fg-muted, #6b665d); }
    .rf-panel-total-amount {
        font-family: var(--font-display, sans-serif);
        font-weight: 800;
        font-size: 22px;
        color: var(--fg, #1a1814);
    }

    /* カスタマー情報 */
    .rf-customer-section { margin-top: 18px; }
    .rf-customer-section h3 {
        font-size: 13px;
        font-weight: 700;
        color: var(--fg, #1a1814);
        margin-bottom: 12px;
    }
    .rf-customer-field { margin-bottom: 12px; }
    .rf-customer-field label {
        font-size: 12px;
        font-weight: 600;
        color: var(--fg, #1a1814);
        margin-bottom: 5px;
        display: block;
    }
    .rf-customer-field input,
    .rf-customer-field select,
    .rf-customer-field textarea {
        font-size: 13px;
        padding: 8px 12px;
        margin: 0;
    }

    /* 送信ボタン */
    .rf-submit-wrap { margin-top: 14px; }
    .rf-submit-wrap .submit-btn {
        width: 100%;
        padding: 14px;
        font-size: 15px;
    }
    .rf-submit-hint {
        margin-top: 8px;
        font-size: 11px;
        color: var(--fg-faint, #97928a);
        text-align: center;
    }

    /* 座席マップ（パネル内） */
    .seat-grid { border-collapse: collapse; width: 100%; table-layout: fixed; }
    .seat-grid th, .seat-grid td {
        border: 1px solid var(--border); text-align: center;
        height: 32px; font-size: 11px;
    }
    .seat-grid th { background: var(--bg-sunken); font-weight: 600; }
    .seat-cell { cursor: pointer; background: var(--bg-sunken); }
    .seat-cell.disabled { background: var(--bg-sunken); color: var(--fg-faint); cursor: not-allowed; }
    .seat-cell.reserved { background: var(--fg-faint) !important; color: #fff; cursor: not-allowed; }
    .seat-cell.selected { outline: 2px solid var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }

    /* ===== モバイル固定バー ===== */
    .rf-bottom-bar {
        display: none;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        z-index: 200;
        align-items: center;
        gap: 12px;
        padding: 12px 20px;
        background: var(--bg-card, #fff);
        border-top: 1px solid var(--border, #e8e4dc);
        box-shadow: 0 -8px 24px rgba(0,0,0,0.07);
    }
    .rf-bar-info { flex-shrink: 0; }
    .rf-bar-label { font-size: 10.5px; color: var(--fg-muted, #6b665d); }
    .rf-bar-amount {
        font-family: var(--font-display, sans-serif);
        font-weight: 800;
        font-size: 20px;
        color: var(--fg, #1a1814);
        line-height: 1.1;
    }
    .rf-bar-cta {
        flex: 1;
        padding: 13px 16px;
        background: var(--accent, oklch(58% 0.14 250));
        color: #fff;
        border: none;
        border-radius: var(--radius, 6px);
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        box-shadow: none;
        transform: none;
        transition: filter 0.12s;
    }
    .rf-bar-cta:hover { filter: brightness(0.93); transform: none; box-shadow: none; }
    .rf-bar-cta:disabled { opacity: 0.5; cursor: default; }

    /* ===== レスポンシブ ===== */
    @media (max-width: 900px) {
        .rf-page { padding: 20px 20px 100px; }
        .rf-layout {
            grid-template-columns: 1fr;
            gap: 24px;
        }
        .rf-panel { position: static; }
        .rf-panel-wrap { order: 2; } /* モバイルでは詳細→パネルの順 */
        .rf-main { order: 1; }
        .rf-title { font-size: 22px; }
        .rf-info-grid { grid-template-columns: 1fr; }
        /* パネル内送信ボタン非表示（バーに移動） */
        #submit-button { display: none; }
        /* モバイルバー表示 */
        .rf-bottom-bar { display: flex; }
    }

    @media (max-width: 640px) {
        .rf-images-2col { grid-template-columns: 1fr; }
        .rf-img-main, .rf-img-sub, .rf-img-single { height: 220px; } /* モバイル：全画像同じ高さ */
        .rf-panel-total-amount { font-size: 18px; }
    }