/* assets/single-modal-page-style.css */

/* ------------------------------------------------------------------------- */
/* テーマ依存UIの非表示 (これはSWELLテーマのセレクタに合わせて調整必須)      */
/* ------------------------------------------------------------------------- */
body.mts-modal-template-active .l-header,
body.mts-modal-template-active #header, /* より一般的なIDも考慮 */
body.mts-modal-template-active .l-footer,
body.mts-modal-template-active #footer, /* より一般的なIDも考慮 */
body.mts-modal-template-active .l-sidebar,
body.mts-modal-template-active #sidebar,
body.mts-modal-template-active .c-pageTitle,
body.mts-modal-template-active .p-page__title,
body.mts-modal-template-active #breadcrumb,
body.mts-modal-template-active .p-Page_header,
body.mts-modal-template-active #fix_bottom_menu, /* 固定フッターメニューの可能性 */
body.mts-modal-template-active .p-fixBtnWrap    /* ページトップへ戻るボタンの可能性 */
/* 他にも非表示にしたいSWELLテーマの要素があれば、同様に追加 */
{
    display: none !important;
}

/* ------------------------------------------------------------------------- */
/* ページ全体のスタイル (空白のキャンバス用)                               */
/* ------------------------------------------------------------------------- */
body.mts-modal-template-active.mts-blank-canvas {
    background-color: #000; /* 背景色 (例: 黒) */
    margin: 0;
    padding: 0;
    overflow-y: auto; /* コンテンツが長い場合にスクロールを許可 */
}

.mts-single-modal-page-container {
    width: 100%;
    min-height: 100vh; /* 少なくとも画面の高さいっぱいにする */
    display: flex;
    justify-content: center;
    align-items: center; /* カードを上下中央に配置 */
    padding: 20px 15px;  /* 上下に少し余白 */
    box-sizing: border-box;
}

/* ------------------------------------------------------------------------- */
/* .hero-card スタイル (アイコンボタン対応版)                               */
/* ------------------------------------------------------------------------- */
body.mts-modal-template-active .hero-card {
    background-color: #222;
    border-radius: 20px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.4);
    padding: 25px;
    width: 340px; 
    max-width: 90vw;
    text-align: center;
    color: white;
    position: relative;
    overflow: hidden;
    margin: auto; /* ページコンテナがflexで中央寄せなら不要な場合も */
}

body.mts-modal-template-active .hero-card .hero-image {
    width: 100%;
    height: auto; 
    max-height: 350px; 
    object-fit: cover; 
    border-radius: 15px;
    margin-bottom: 20px;
    border: 2px solid #444;
}

body.mts-modal-template-active .hero-card .hero-name {
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #fff;
}

body.mts-modal-template-active .hero-card .specs-toggle {
    padding: 10px 22px;
    border: 2px solid #666;
    background: transparent;
    color: #ccc;
    border-radius: 25px;
    cursor: pointer;
    margin-bottom: 15px;
    font-weight: bold;
    transition: all 0.3s;
}
body.mts-modal-template-active .hero-card .specs-toggle:hover {
    background: #444;
    color: white;
    border-color: #888;
}

body.mts-modal-template-active .hero-card .specs-panel {
    background: rgba(255, 255, 255, 0.05);
    padding: 15px;
    margin: 0 10px 15px;
    border-radius: 10px;
    text-align: left;
    font-size: 14px;
    line-height: 1.6;
    border: 1px solid #333;
}
body.mts-modal-template-active .hero-card .specs-panel p {
    margin-bottom: 0.5em;
    color: #ddd;
}
body.mts-modal-template-active .hero-card .specs-panel strong {
    color: #fff;
}
body.mts-modal-template-active .hero-card .post-content-specs-detail p {
    color: #ccc;
    font-size: 13px;
}
body.mts-modal-template-active .hero-card .post-content-specs-detail { /* 本文コンテンツのラッパー */
    margin-top: 10px;
}


body.mts-modal-template-active .hero-card .hero-buttons {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-top: 15px;
    border-top: 1px solid #333;
    margin-top: 15px;
}

/* ボタンとアイコンのスタイル */
body.mts-modal-template-active .hero-card .hero-buttons .action-btn { /* aタグも含む */
    background-color: #3a3a3a;
    border: none;
    color: white; /* アイコンの基本色 */
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 18px; /* アイコンのサイズに影響 */
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex; /* アイコンを中央揃えにするため */
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 0;
    line-height: 1; /* アイコンの縦位置を揃える */
}

body.mts-modal-template-active .hero-card .hero-buttons .action-btn:hover {
    background-color: #555;
    transform: scale(1.1);
}

/* Font Awesome アイコン自体のスタイル (必要に応じて) */
body.mts-modal-template-active .hero-card .hero-buttons .action-btn i.fas {
    /* 通常は親要素の color と font-size を継承します */
    /* ここで個別に指定することも可能です */
    /* 例: font-size: 20px; */
}

/* お気に入り・いいねボタンが押された時のスタイル */
body.mts-modal-template-active .hero-card .hero-buttons .fav-btn.faved,
body.mts-modal-template-active .hero-card .hero-buttons .fav-btn.faved i.fas { /* アイコンの色も変更 */
    background-color: #ffdd00 !important;
    color: #333 !important;
}
body.mts-modal-template-active .hero-card .hero-buttons .like-btn.liked,
body.mts-modal-template-active .hero-card .hero-buttons .like-btn.liked i.fas { /* アイコンの色も変更 */
    background-color: #ff4554 !important;
    color: #fff !important;
}

body.mts-modal-template-active .hero-card .hero-buttons .action-btn.mts-loading {
    opacity: 0.7;
}