/* 中間地点探索ショートコード用スタイル */
/* page-find-middle.phpと同じスタイルをベースに、ショートコード専用の調整を追加 */

.find-middle-shortcode-container {
    width: 100%;
    position: relative;
    /* page-find-middle.phpのコンテナスタイルを継承 */
}

/* デフォルトスタイル: page-find-middle.phpと同じ見た目 */
.find-middle-shortcode-container[data-style="default"] {
    /* page-find-middle-containerのスタイルをそのまま使用 */
    background: inherit;
}

/* コンパクトスタイル */
.find-middle-shortcode-container[data-style="compact"] {
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.find-middle-shortcode-container[data-style="compact"] .station-widget-container {
    margin-bottom: 16px;
}

.find-middle-shortcode-container[data-style="compact"] .list-container {
    margin-bottom: 16px;
}

/* ミニマルスタイル */
.find-middle-shortcode-container[data-style="minimal"] {
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
}

.find-middle-shortcode-container[data-style="minimal"] .station-widget-container {
    margin-bottom: 12px;
}

.find-middle-shortcode-container[data-style="minimal"] .list-container {
    margin-bottom: 12px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .find-middle-shortcode-container[data-style="compact"] {
        padding: 12px;
        border-radius: 8px;
    }
    
    .find-middle-shortcode-container[data-style="minimal"] {
        padding: 8px;
        border-radius: 6px;
    }
}

@media (max-width: 480px) {
    .find-middle-shortcode-container[data-style="compact"] {
        padding: 8px;
        border-radius: 6px;
    }
    
    .find-middle-shortcode-container[data-style="minimal"] {
        padding: 6px;
        border-radius: 4px;
    }
}

/* モーダルのz-index調整（ショートコード内では高めに設定） */
.find-middle-shortcode-container .station-selector-modal {
    z-index: 9999 !important;
}

.find-middle-shortcode-container .restaurant-modal {
    z-index: 9998 !important;
}

/* ショートコード内での微調整 */
.find-middle-shortcode-container .top-container {
    /* トップコンテナがある場合の調整 */
    margin-bottom: 1em;
}

/* 記事内での表示調整 */
.single .find-middle-shortcode-container {
    background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
}

.single .find-middle-shortcode-container,
.page .find-middle-shortcode-container {
    margin: 2em 0;
}

/* ウィジェット内での表示調整 */
.widget .find-middle-shortcode-container {
    margin: 1em 0;
}

/* ショートコード識別用のクラス */
.shortcode-find-middle {
    /* 特別なスタイリングが必要な場合はここに追加 */
    display: block;
}