/* ============================================================
 * PropDesk – Paid Memberships Pro カスタムスタイル
 * 対象: body.propdesk-pmpro-page
 *       （checkout / account / billing / cancel / confirmation / levels / login）
 * functions.php の propdesk_pmpro_body_class() が付与するクラスを起点にする
 * ============================================================ */

/* ── 0. CSS カスタムプロパティ ─────────────────────────────── */
:root {
    --pd-green       : #1a7a3c;
    --pd-green-light : #22a050;
    --pd-green-bg    : #f0f9f4;
    --pd-navy        : #1A3A5C;
    --pd-white       : #ffffff;
    --pd-gray-50     : #f8f9fa;
    --pd-gray-100    : #f1f3f4;
    --pd-gray-200    : #e8eaed;
    --pd-gray-400    : #9aa0a6;
    --pd-gray-600    : #5f6368;
    --pd-gray-700    : #444746;
    --pd-gray-800    : #202124;
    --pd-shadow-sm   : 0 1px 3px rgba(0,0,0,.08);
    --pd-shadow-md   : 0 4px 12px rgba(0,0,0,.08);
    --pd-radius      : 12px;
    --pd-radius-sm   : 8px;
    --pd-nav-height  : 64px;
}

/* ── 1. Lightning デフォルトヘッダーを非表示 ─────────────────── */
/*
 * PropDesk ナビバー（functions.php の wp_body_open で挿入）を使うため
 * Lightning テーマおよびその拡張が出力するヘッダーを .propdesk-pmpro-page 限定で非表示にする。
 */
.propdesk-pmpro-page #site-header,
.propdesk-pmpro-page .site-header,
.propdesk-pmpro-page header.site-header,
.propdesk-pmpro-page .vk-all-in-header,
.propdesk-pmpro-page .ltg-header,
.propdesk-pmpro-page #header,
.propdesk-pmpro-page .global-nav-custom,
.propdesk-pmpro-page .vk_header {
    display: none !important;
}

/* body / page の余白をリセット（Lightning が header 高さ分を padding-top で確保する場合の対策） */
.propdesk-pmpro-page body,
.propdesk-pmpro-page #page,
.propdesk-pmpro-page .site {
    padding-top : 0 !important;
    margin-top  : 0 !important;
}

/* ── 2. PropDesk ナビバー（wp_body_open で挿入される .propdesk-pmpro-header） ── */
.propdesk-pmpro-header {
    position      : sticky;
    top           : 0;
    z-index       : 9999;
    background    : var(--pd-white);
    border-bottom : 1px solid var(--pd-gray-200);
    box-shadow    : var(--pd-shadow-sm);
}

.propdesk-pmpro-nav {
    width  : 100%;
    height : var(--pd-nav-height);
}

.propdesk-pmpro-nav__inner {
    max-width   : 1200px;
    margin      : 0 auto;
    height      : 100%;
    padding     : 0 24px;
    display     : flex;
    align-items : center;
    gap         : 32px;
}

/* ロゴ */
.propdesk-pmpro-nav__logo {
    display         : flex;
    align-items     : center;
    gap             : 8px;
    text-decoration : none;
    font-weight     : 700;
    font-size       : 1.1rem;
    color           : var(--pd-gray-800);
    flex-shrink     : 0;
}

.propdesk-pmpro-nav__logo svg {
    display     : block;
    flex-shrink : 0;
}

.propdesk-pmpro-nav__logo:hover {
    color           : var(--pd-green);
    text-decoration : none;
}

/* ナビゲーションリンク */
.propdesk-pmpro-nav__links {
    display     : flex;
    align-items : center;
    gap         : 4px;
    flex        : 1;
    /* wp_nav_menu のリストをフラットに表示するためにリセット */
    list-style  : none;
    margin      : 0;
    padding     : 0;
}

.propdesk-pmpro-nav__links ul,
.propdesk-pmpro-nav__links li {
    list-style : none;
    margin     : 0;
    padding    : 0;
    display    : inline-flex;
}

.propdesk-pmpro-nav__links a {
    display         : inline-flex;
    align-items     : center;
    padding         : 6px 14px;
    border-radius   : var(--pd-radius-sm);
    font-size       : 0.9rem;
    color           : var(--pd-gray-600);
    text-decoration : none;
    transition      : background 0.15s, color 0.15s;
}

.propdesk-pmpro-nav__links a:hover {
    background      : var(--pd-gray-100);
    color           : var(--pd-gray-800);
    text-decoration : none;
}

/* アクションボタン群 */
.propdesk-pmpro-nav__actions {
    display     : flex;
    align-items : center;
    gap         : 8px;
    margin-left : auto;
    flex-shrink : 0;
}

.propdesk-pmpro-nav__login {
    display         : inline-flex;
    align-items     : center;
    padding         : 7px 16px;
    border-radius   : var(--pd-radius-sm);
    font-size       : 0.875rem;
    font-weight     : 500;
    color           : var(--pd-gray-600);
    text-decoration : none;
    transition      : background 0.15s, color 0.15s;
}

.propdesk-pmpro-nav__login:hover {
    background      : var(--pd-gray-100);
    color           : var(--pd-gray-800);
    text-decoration : none;
}

.propdesk-pmpro-nav__signup {
    display         : inline-flex;
    align-items     : center;
    padding         : 7px 18px;
    border-radius   : var(--pd-radius-sm);
    font-size       : 0.875rem;
    font-weight     : 600;
    color           : var(--pd-white);
    background      : var(--pd-green);
    text-decoration : none;
    transition      : background 0.15s;
}

.propdesk-pmpro-nav__signup:hover {
    background      : var(--pd-green-light);
    color           : var(--pd-white);
    text-decoration : none;
}

/* ── 3. サイドバー・PMPro ステップ表示を非表示 + メインカラムを全幅に ── */
/*
 * CSS フォールバック。
 * functions.php の lightning_sidebar_display / is_active_sidebar フィルターと併用。
 */
/* Lightning テーマのサイドバー */
.propdesk-pmpro-page .sidebar,
.propdesk-pmpro-page #sidebar,
.propdesk-pmpro-page .widget-area,
.propdesk-pmpro-page #widget-area,
.propdesk-pmpro-page .col-sidebar,
.propdesk-pmpro-page .vk-col-sidebar,
.propdesk-pmpro-page .ltg-main__sidebar,
.propdesk-pmpro-page aside.sidebar,
.propdesk-pmpro-page aside.widget-area {
    display : none !important;
}

/* PMPro チェックアウト ステップ表示 / プログレスバー */
.propdesk-pmpro-page #pmpro_checkout_sidebar,
.propdesk-pmpro-page .pmpro_checkout_sidebar,
.propdesk-pmpro-page .pmpro_checkout_divbox,
.propdesk-pmpro-page .pmpro-checkout-wrap__sidebar,
.propdesk-pmpro-page .pmpro_steps,
.propdesk-pmpro-page .pmpro_checkout_step,
.propdesk-pmpro-page .pmpro-checkout-steps,
.propdesk-pmpro-page .pmpro_checkout_progress {
    display : none !important;
}

/* メインカラムを全幅に */
.propdesk-pmpro-page .col-main,
.propdesk-pmpro-page .vk-col-main,
.propdesk-pmpro-page .ltg-main__main,
.propdesk-pmpro-page #main,
.propdesk-pmpro-page main.site-main {
    width     : 100% !important;
    max-width : 100% !important;
    float     : none !important;
}

/* ── 4. ページ全体ベーススタイル ────────────────────────── */
.propdesk-pmpro-page {
    background : var(--pd-gray-50);
}

/* fieldset のブラウザデフォルト枠・余白をリセット */
.propdesk-pmpro-page fieldset {
    border  : none !important;
    margin  : 0 !important;
    padding : 0 !important;
}

/* fieldset > legend のデフォルト表示もリセット */
.propdesk-pmpro-page fieldset legend {
    padding : 0 !important;
    margin  : 0 !important;
}

/* ── Lightning ページタイトル帯を白背景に変更 ─────────────── */
/*
 * Lightning テーマが出力する青いページタイトルバナーを
 * 白背景・ダークテキストに上書きする。
 */
.propdesk-pmpro-page .page-header,
.propdesk-pmpro-page .vk-page-header,
.propdesk-pmpro-page .ltg-page-header,
.propdesk-pmpro-page .vk-all-in-header,
.propdesk-pmpro-page .vk-all-in-one-header,
.propdesk-pmpro-page .entry-header {
    background    : var(--pd-green) !important;
    border-bottom : none !important;
    box-shadow    : none !important;
}

/* タイトルテキストを白に */
.propdesk-pmpro-page .page-header .page-title,
.propdesk-pmpro-page .page-header h1,
.propdesk-pmpro-page .vk-page-header h1,
.propdesk-pmpro-page .ltg-page-header h1,
.propdesk-pmpro-page .vk-all-in-header h1,
.propdesk-pmpro-page .vk-all-in-one-header h1,
.propdesk-pmpro-page .entry-header .entry-title,
.propdesk-pmpro-page .entry-header h1 {
    color       : var(--pd-white) !important;
    text-shadow : none !important;
}

/* .entry-content の上余白・区切り線をリセット */
.propdesk-pmpro-page .entry-content {
    padding-top : 0 !important;
    margin-top  : 0 !important;
    border-top  : none !important;
}

/* ── 4b. 「選択中のプラン」テキスト（.pmpro_checkout_divbox h3 等） ── */
/*
 * PMPro が checkout ページ上部に出力する "You have selected..." 文は
 * gettext フィルターで日本語化。
 * .pmpro_level_cost_text が使われる場合の余白調整。
 */
.propdesk-pmpro-page #pmpro_level_cost_text,
.propdesk-pmpro-page .pmpro_level_cost_text {
    font-size   : 14px;
    color       : var(--pd-gray-600);
    margin-bottom : 16px;
    line-height : 1.6;
}

/* ── 5. PMPro コンテンツエリア ───────────────────────────── */
.propdesk-pmpro-page #pmpro_form,
.propdesk-pmpro-page .pmpro_checkout,
.propdesk-pmpro-page #pmpro_account,
.propdesk-pmpro-page #pmpro_levels_table {
    max-width : 720px;
    margin    : 48px auto;
    padding   : 0 24px;
}

/* チェックアウト：flex レイアウト */
.propdesk-pmpro-page #pmpro_form {
    display        : flex;
    flex-direction : column;
    gap            : 24px;
}

/* セクションボックス */
.propdesk-pmpro-page .pmpro_checkout-fields,
.propdesk-pmpro-page .pmpro_checkout-field,
.propdesk-pmpro-page table.pmpro_checkout {
    background    : var(--pd-white) !important;
    border        : none !important;       /* PMPro デフォルトの青枠を上書き */
    border-radius : var(--pd-radius) !important;
    padding       : 32px !important;
    box-shadow    : var(--pd-shadow-sm) !important;
    outline       : none !important;
}

/* セクション見出し */
.propdesk-pmpro-page .pmpro_checkout h3,
.propdesk-pmpro-page .pmpro_checkout-fields h3,
.propdesk-pmpro-page #pmpro_form h3 {
    font-size      : 16px !important;
    font-weight    : 700 !important;
    color          : var(--pd-navy) !important;
    margin         : 0 0 24px !important;
    padding-bottom : 16px !important;
    border-bottom  : 2px solid var(--pd-green-bg) !important;
    display        : flex;
    align-items    : center;
    gap            : 8px;
}

.propdesk-pmpro-page #pmpro_form h3::before {
    content       : '';
    display       : inline-block;
    width         : 4px;
    height        : 18px;
    background    : var(--pd-green);
    border-radius : 2px;
}

/* ── 6. プラン情報 ──────────────────────────────────────── */
.propdesk-pmpro-page #pmpro_level_cost {
    background : var(--pd-green-bg);
    border     : 1px solid rgba(26,122,60,.15);
    border-radius : var(--pd-radius-sm);
    padding    : 20px 24px;
    color      : var(--pd-gray-800);
    font-size  : 14px;
    line-height: 1.7;
}

.propdesk-pmpro-page #pmpro_level_cost strong {
    color       : var(--pd-green);
    font-weight : 700;
}

/* ── プランを変更するリンク ─────────────────────────────── */
.propdesk-pmpro-page .pd-change-plan-link,
.pmpro_checkout .pd-change-plan-link {
    margin-top : 10px;
    margin-bottom : 4px;
}
.propdesk-pmpro-page .pd-change-plan-link a,
.pmpro_checkout .pd-change-plan-link a {
    font-size       : 0.875rem;
    color           : var(--pd-green);
    text-decoration : none;
    display         : inline-flex;
    align-items     : center;
    gap             : 4px;
    transition      : opacity .15s;
}
.propdesk-pmpro-page .pd-change-plan-link a:hover,
.pmpro_checkout .pd-change-plan-link a:hover {
    text-decoration : underline;
    opacity         : .8;
}

/* ── 7. フォームフィールド ───────────────────────────────── */
.propdesk-pmpro-page .pmpro_checkout input[type="text"],
.propdesk-pmpro-page .pmpro_checkout input[type="email"],
.propdesk-pmpro-page .pmpro_checkout input[type="password"],
.propdesk-pmpro-page .pmpro_checkout input[type="tel"],
.propdesk-pmpro-page .pmpro_checkout select,
.propdesk-pmpro-page .pmpro_checkout textarea,
.propdesk-pmpro-page #pmpro_form input[type="text"],
.propdesk-pmpro-page #pmpro_form input[type="email"],
.propdesk-pmpro-page #pmpro_form input[type="password"] {
    width         : 100%;
    padding       : 12px 16px;
    border        : 1.5px solid var(--pd-gray-200);
    border-radius : var(--pd-radius-sm);
    font-size     : 14px;
    color         : var(--pd-gray-800);
    background    : var(--pd-white);
    transition    : border-color 0.15s, box-shadow 0.15s;
    outline       : none;
    font-family   : inherit;
    box-sizing    : border-box;
}

.propdesk-pmpro-page .pmpro_checkout input:focus,
.propdesk-pmpro-page #pmpro_form input:focus {
    border-color : var(--pd-green);
    box-shadow   : 0 0 0 3px rgba(26,122,60,.10);
}

/* ラベル */
.propdesk-pmpro-page .pmpro_checkout label,
.propdesk-pmpro-page #pmpro_form label {
    display       : block;
    font-size     : 13px;
    font-weight   : 600;
    color         : var(--pd-gray-600);
    margin-bottom : 6px;
}

/* 2カラムグリッド */
.propdesk-pmpro-page .pmpro_cols-2 {
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : 16px;
}

/* ── 8. 送信ボタン ──────────────────────────────────────── */
.propdesk-pmpro-page #pmpro_submit_span input[type="submit"],
.propdesk-pmpro-page .pmpro_btn,
.propdesk-pmpro-page input.pmpro_btn-submit-checkout {
    display          : inline-flex !important;
    align-items      : center !important;
    justify-content  : center !important;
    gap              : 8px !important;
    background       : var(--pd-green) !important;
    color            : var(--pd-white) !important;
    font-size        : 15px !important;
    font-weight      : 700 !important;
    padding          : 14px 32px !important;
    border-radius    : var(--pd-radius-sm) !important;
    border           : none !important;
    cursor           : pointer !important;
    transition       : background 0.15s, transform 0.1s, box-shadow 0.15s !important;
    box-shadow       : 0 4px 14px rgba(26,122,60,.25) !important;
    width            : 100% !important;
    letter-spacing   : 0.3px !important;
}

.propdesk-pmpro-page #pmpro_submit_span input[type="submit"]:hover,
.propdesk-pmpro-page .pmpro_btn:hover,
.propdesk-pmpro-page input.pmpro_btn-submit-checkout:hover {
    background : var(--pd-green-light) !important;
    transform  : translateY(-1px) !important;
    box-shadow : 0 6px 20px rgba(26,122,60,.35) !important;
}

/* ── 9. ログインリンク ──────────────────────────────────── */
.propdesk-pmpro-page #pmpro_login_link,
.propdesk-pmpro-page .pmpro_login_link {
    text-align    : center;
    font-size     : 13px;
    color         : var(--pd-gray-600);
    padding       : 16px;
    background    : var(--pd-gray-50);
    border-radius : var(--pd-radius-sm);
    border        : 1px solid var(--pd-gray-200);
}

.propdesk-pmpro-page #pmpro_login_link a,
.propdesk-pmpro-page .pmpro_login_link a {
    color           : var(--pd-green);
    font-weight     : 600;
    text-decoration : underline;
}

/* ── 10. メッセージ ─────────────────────────────────────── */
.propdesk-pmpro-page .pmpro_message,
.propdesk-pmpro-page .pmpro_error {
    padding       : 14px 20px;
    border-radius : var(--pd-radius-sm);
    font-size     : 14px;
    font-weight   : 500;
    margin-bottom : 20px;
}

.propdesk-pmpro-page .pmpro_error {
    background : #fff5f5;
    border     : 1px solid #feb2b2;
    color      : #c53030;
}

.propdesk-pmpro-page .pmpro_success {
    background : var(--pd-green-bg);
    border     : 1px solid rgba(26,122,60,.2);
    color      : var(--pd-green);
}

/* ── 11. 確認ページ（登録完了） ─────────────────────────── */
.propdesk-pmpro-page #pmpro_confirmation_table {
    background    : var(--pd-white);
    border        : 1px solid var(--pd-gray-200);
    border-radius : var(--pd-radius);
    padding       : 32px;
    box-shadow    : var(--pd-shadow-sm);
    width         : 100%;
}

.propdesk-pmpro-page #pmpro_confirmation_table .pmpro_checkout-fields h3 {
    color     : var(--pd-green) !important;
    font-size : 20px !important;
}

/* 注文サマリーテーブル */
.propdesk-pmpro-page .pmpro_invoice table,
.propdesk-pmpro-page #pmpro_invoice table {
    width           : 100%;
    border-collapse : collapse;
    font-size       : 14px;
}

.propdesk-pmpro-page .pmpro_invoice table th,
.propdesk-pmpro-page #pmpro_invoice table th {
    background     : var(--pd-gray-50);
    color          : var(--pd-gray-600);
    font-weight    : 600;
    font-size      : 12px;
    text-transform : uppercase;
    letter-spacing : 0.5px;
    padding        : 12px 16px;
    text-align     : left;
    border-bottom  : 1px solid var(--pd-gray-200);
}

.propdesk-pmpro-page .pmpro_invoice table td,
.propdesk-pmpro-page #pmpro_invoice table td {
    padding       : 14px 16px;
    border-bottom : 1px solid var(--pd-gray-100);
    color         : var(--pd-gray-800);
}

.propdesk-pmpro-page .pmpro_invoice .pmpro_total td,
.propdesk-pmpro-page #pmpro_invoice .pmpro_total td {
    font-weight  : 700;
    font-size    : 16px;
    color        : var(--pd-green);
    border-top   : 2px solid var(--pd-gray-200);
    border-bottom: none;
}

/* 支払い済みバッジ */
.propdesk-pmpro-page .pmpro_status-paid,
.propdesk-pmpro-page span.pmpro_status {
    display         : inline-flex;
    align-items     : center;
    background      : var(--pd-green-bg);
    color           : var(--pd-green);
    font-size       : 12px;
    font-weight     : 700;
    padding         : 4px 12px;
    border-radius   : 100px;
    border          : 1px solid rgba(26,122,60,.2);
}

/* ── 12. マイページ（アカウント） ───────────────────────── */
.propdesk-pmpro-page #pmpro_account {
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : 24px;
    align-items           : start;
}

.propdesk-pmpro-page .pmpro_account-membership,
.propdesk-pmpro-page .pmpro_account-profile,
.propdesk-pmpro-page .pmpro_account-links,
.propdesk-pmpro-page .pmpro_account-invoices {
    background    : var(--pd-white);
    border        : 1px solid var(--pd-gray-200);
    border-radius : var(--pd-radius);
    padding       : 28px;
    box-shadow    : var(--pd-shadow-sm);
}

.propdesk-pmpro-page .pmpro_account-membership h3,
.propdesk-pmpro-page .pmpro_account-profile h3,
.propdesk-pmpro-page .pmpro_account-links h3,
.propdesk-pmpro-page .pmpro_account-invoices h3 {
    font-size      : 14px !important;
    font-weight    : 700 !important;
    color          : var(--pd-navy) !important;
    margin         : 0 0 20px !important;
    padding-bottom : 14px !important;
    border-bottom  : 2px solid var(--pd-green-bg) !important;
    text-transform : uppercase;
    letter-spacing : 0.5px;
}

.propdesk-pmpro-page .pmpro_account-links ul {
    list-style     : none;
    padding        : 0;
    margin         : 0;
    display        : flex;
    flex-direction : column;
    gap            : 8px;
}

.propdesk-pmpro-page .pmpro_account-links ul li a {
    display         : flex;
    align-items     : center;
    gap             : 8px;
    padding         : 10px 14px;
    border-radius   : var(--pd-radius-sm);
    font-size       : 14px;
    font-weight     : 500;
    color           : var(--pd-gray-700);
    transition      : background 0.15s, color 0.15s;
    text-decoration : none;
}

.propdesk-pmpro-page .pmpro_account-links ul li a:hover {
    background : var(--pd-green-bg);
    color      : var(--pd-green);
}

/* ── 13. プラン選択ページ ───────────────────────────────── */
.propdesk-pmpro-page #pmpro_levels_table {
    display               : grid;
    grid-template-columns : repeat(auto-fit, minmax(280px, 1fr));
    gap                   : 24px;
    max-width             : 960px;
}

.propdesk-pmpro-page .pmpro_level {
    background    : var(--pd-white);
    border        : 1.5px solid var(--pd-gray-200);
    border-radius : var(--pd-radius);
    padding       : 32px;
    text-align    : center;
    transition    : box-shadow 0.2s, transform 0.15s, border-color 0.2s;
    position      : relative;
}

.propdesk-pmpro-page .pmpro_level:hover {
    box-shadow   : var(--pd-shadow-md);
    transform    : translateY(-3px);
    border-color : rgba(26,122,60,.3);
}

.propdesk-pmpro-page .pmpro_level h3 {
    font-size     : 18px !important;
    font-weight   : 800 !important;
    color         : var(--pd-navy) !important;
    margin-bottom : 8px !important;
}

.propdesk-pmpro-page .pmpro_level .pmpro_level-expiration {
    font-size   : 28px;
    font-weight : 800;
    color       : var(--pd-green);
}

.propdesk-pmpro-page .pmpro_level .pmpro_btn-select {
    display         : inline-flex !important;
    align-items     : center !important;
    justify-content : center !important;
    background      : var(--pd-green) !important;
    color           : var(--pd-white) !important;
    font-size       : 14px !important;
    font-weight     : 700 !important;
    padding         : 12px 28px !important;
    border-radius   : var(--pd-radius-sm) !important;
    border          : none !important;
    cursor          : pointer !important;
    transition      : background 0.15s !important;
    margin-top      : 20px !important;
    width           : 100% !important;
}

.propdesk-pmpro-page .pmpro_level .pmpro_btn-select:hover {
    background : var(--pd-green-light) !important;
}

/* ── 14. パンくずリスト ─────────────────────────────────── */
.propdesk-pmpro-page .breadcrumb,
.propdesk-pmpro-page .entry-breadcrumb {
    max-width : 720px;
    margin    : 20px auto 0;
    padding   : 0 24px;
    font-size : 13px;
    color     : var(--pd-gray-400);
}

.propdesk-pmpro-page .breadcrumb a {
    color : var(--pd-green);
}

/* ── 15. パスワードトグルボタン → リンクスタイル ─────────── */
/* パスワード表示トグルボタンを非表示
   PMPro が付与する body クラスと独自クラスの両方でカバー */
.propdesk-pmpro-page .wp-hide-pw,
.propdesk-pmpro-page button.wp-hide-pw,
.propdesk-pmpro-page .wp-pwd button,
.propdesk-pmpro-page .pmpro-show-password,
.propdesk-pmpro-page .pmpro_password_toggle,
.pmpro_checkout .wp-hide-pw,
.pmpro_checkout button.wp-hide-pw,
.pmpro_checkout .wp-pwd button,
.pmpro_checkout .pmpro-show-password,
.pmpro_checkout .pmpro_password_toggle,
.pmpro_login .wp-hide-pw,
.pmpro_login button.wp-hide-pw,
.pmpro_login .wp-pwd button {
    display : none !important;
}

.propdesk-pmpro-page .wp-hide-pw:hover,
.propdesk-pmpro-page .pmpro-show-password:hover,
.propdesk-pmpro-page .pmpro_password_toggle:hover,
.propdesk-pmpro-page .propdesk-password-toggle:hover {
    text-decoration : underline !important;
    transform       : none !important;
}

/* ── 15b. ログインページ専用スタイル ────────────────────── */

/* ログインボタン（WordPress の wp-submit）を緑に */
.propdesk-pmpro-page #wp-submit,
.propdesk-pmpro-page input#wp-submit,
.propdesk-pmpro-page .login-submit input[type="submit"] {
    background    : var(--pd-green) !important;
    border        : none !important;
    border-radius : var(--pd-radius-sm) !important;
    color         : var(--pd-white) !important;
    font-size     : 15px !important;
    font-weight   : 700 !important;
    padding       : 12px 32px !important;
    cursor        : pointer !important;
    transition    : background 0.15s !important;
    box-shadow    : 0 4px 14px rgba(26,122,60,.25) !important;
    width         : auto !important;
    min-width     : 160px;
}

.propdesk-pmpro-page #wp-submit:hover,
.propdesk-pmpro-page input#wp-submit:hover {
    background : var(--pd-green-light) !important;
    box-shadow : 0 6px 20px rgba(26,122,60,.35) !important;
}

/* ── 16. レスポンシブ（768px 以下） ─────────────────────── */
@media (max-width: 768px) {
    /* ナビバー */
    .propdesk-pmpro-nav__inner {
        padding : 0 16px;
        gap     : 12px;
    }

    .propdesk-pmpro-nav__links {
        display : none;
    }

    .propdesk-pmpro-nav__logo span {
        font-size : 1rem;
    }

    .propdesk-pmpro-nav__login {
        display : none;
    }

    .propdesk-pmpro-nav__signup {
        padding   : 7px 14px;
        font-size : 0.8rem;
    }

    /* アカウントページ */
    .propdesk-pmpro-page #pmpro_account {
        grid-template-columns : 1fr;
    }

    /* 2カラムフォーム */
    .propdesk-pmpro-page .pmpro_cols-2 {
        grid-template-columns : 1fr;
    }

    /* プラン選択 */
    .propdesk-pmpro-page #pmpro_levels_table {
        grid-template-columns : 1fr;
    }

    /* セクションボックスのパディング縮小 */
    .propdesk-pmpro-page .pmpro_checkout-fields,
    .propdesk-pmpro-page .pmpro_checkout-field,
    .propdesk-pmpro-page table.pmpro_checkout {
        padding : 20px;
    }
}