/**
 * モーダル共通スタイル
 *
 * 旧 mypage-subscription.css に閉じ込められていた .myPage-Modal* 一式を
 * グローバル enqueue できるように切り出したもの。
 * テーマ全体で共通の MicroModal ベースのモーダル UI を提供する。
 *
 * デザイン基準: コース申し込みモーダル（include/subscribe-modal.php #subscribe-modal）
 * - 青 submit (.myPage-Modal_Btn--primary)
 * - 灰色枠 キャンセル (.myPage-Modal_Btn--secondary)
 * - 危険操作 (.myPage-Modal_Btn--danger)
 *
 * ボタン配置のルール:
 * - PC : 横並び。submit が左、cancel が右
 * - SP : 縦並び。submit が上、cancel が下
 * - HTML 順序は <submit> -> <cancel> で記述する（CSSは row / column のまま素直）
 * - ボタン1個のみのモーダル: .myPage-Modal_Actions--single を付けて中央寄せ
 */

/* モーダル本体（ECSS準拠） */
.myPage-Modal {
    max-width: 480px;
    max-height: 90vh;
    background: #ffffff;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.myPage-Modal--center {
    text-align: center;
}
.myPage-Modal_Header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(34,34,34,.12);
}
.myPage-Modal_Title {
    font-size: 1.1em;
    font-weight: bold;
    color: #222222;
    margin: 0;
}
.myPage-Modal_Close {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    font-size: 1.5em;
    color: rgba(34,34,34,.5);
    cursor: pointer;
    transition: .2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}
.myPage-Modal_Close:hover {
    background: rgba(34,34,34,.05);
    color: rgba(34,34,34,.8);
}
.myPage-Modal_Body {
    padding: 1.5rem 1.25rem;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}
.myPage-Modal_Spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(34,34,34,.12);
    border-top-color: #226CE0;
    border-radius: 50%;
    margin: 0 auto 1.5rem;
    animation: modal-spin 1s linear infinite;
}
@keyframes modal-spin {
    to { transform: rotate(360deg); }
}
.myPage-Modal_Message {
    font-size: 1em;
    color: #222222;
    margin: 0 0 1rem 0;
    line-height: 1.7;
}
.myPage-Modal_Note {
    font-size: 14px;
    color: rgba(34,34,34,.6);
    margin: 0 0 1.5rem 0;
    line-height: 1.7;
}
.myPage-Modal_Note a {
    color: #226CE0;
}
.myPage-Modal_Note a:hover {
    text-decoration: underline;
}
.myPage-Modal_Note--warning {
    color: #d3533e;
}
.myPage-Modal_Notice {
    padding: 1rem;
    background: rgba(34,34,34,.03);
    border-radius: 4px;
    font-size: 13px;
    color: rgba(34,34,34,.6);
}
.myPage-Modal_Actions {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    margin-top: 1rem;
}
/* ボタン1個だけのモーダル（完了通知・結果表示など）は中央配置 */
.myPage-Modal_Actions--single {
    justify-content: center;
}
.myPage-Modal_Actions--single > .myPage-Modal_Btn {
    flex: 0 1 auto;
    min-width: 200px;
    max-width: 240px;
}
.myPage-Modal_Btn {
    flex: 1;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    transition: .2s ease-in-out;
    border: none;
    /* aタグでボタンとして使う場合の見た目補正 */
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.myPage-Modal_Btn--primary {
    background: #226CE0;
    color: #ffffff;
}
.myPage-Modal_Btn--primary:hover {
    opacity: 0.85;
    color: #ffffff;
}
.myPage-Modal_Btn--secondary {
    background: transparent;
    color: rgba(34,34,34,.7);
    border: 1px solid rgba(34,34,34,.2);
}
.myPage-Modal_Btn--secondary:hover {
    background: rgba(34,34,34,.05);
    color: rgba(34,34,34,.7);
}
.myPage-Modal_Btn--danger {
    background: #d3533e;
    color: #ffffff;
}
.myPage-Modal_Btn--danger:hover {
    opacity: 0.85;
    color: #ffffff;
}
.myPage-Modal_CompleteText {
    font-size: 1.1em;
    font-weight: bold;
    color: #2d8a6e;
    margin-bottom: 1rem;
}
.myPage-Modal_WarningText {
    font-size: 1.1em;
    font-weight: bold;
    color: #d3533e;
    margin-bottom: 1rem;
}

/*
 * 独自レイアウトモーダル（.single-Comnent_List_Like_Modal 系）の
 * 見出しデザインを myPage-Modal_Title に揃える橋渡しスタイル。
 * フォーム本体・ボタン配置は触らず、ヘッダ部分のみ統一する。
 */
.single-Comnent_List_Like_Modal_Head {
    border-bottom: 1px solid rgba(34,34,34,.12);
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
    color: #222;
    font-size: 1.1em;
    font-weight: bold;
    text-align: left;
}

/* スマホ対応 */
@media (max-width: 549px) {
    .myPage-Modal_Body {
        padding: 1rem;
    }
    .myPage-Modal_Header {
        padding: 1rem;
    }
    .myPage-Modal_Btn {
        font-size: 14px;
        padding: 0.625rem 1rem;
    }
    /*
     * SPでは縦並び。HTML順 (submit -> cancel) のまま column にする。
     * これで submit が上、cancel が下になる。
     */
    .myPage-Modal_Actions {
        flex-direction: column;
    }
    .myPage-Modal_Actions--single > .myPage-Modal_Btn {
        max-width: none;
    }
}