/* 会員・決済フォーム(Paid Member Subscriptions)の見た目調整
   このファイルは build.py が生成するものではなく、手で書いて管理する。

   PMS既定の送信ボタンはスマートフォンで押しづらい大きさだったため、
   診断アプリの button.primary に色を揃えたうえで、一回り大きくしている。
   決済の最後の一押しになるボタンなので、指で迷わず押せる大きさを優先する。 */

input[type="submit"][name^="pms_"],
button[type="submit"][name^="pms_"],
.pms-form input[type="submit"],
.pms-form button[type="submit"] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 20px 0 10px;
    padding: 20px 18px;
    min-height: 64px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .02em;
    color: #fff;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #7a4f8c, #9d6bb0);
    box-shadow: 0 6px 16px rgba(122, 79, 140, .28);
    cursor: pointer;
    /* iOSのSafariが独自の枠線と角丸を当てるため打ち消す */
    -webkit-appearance: none;
    appearance: none;
    transition: transform .1s;
}

input[type="submit"][name^="pms_"]:hover,
button[type="submit"][name^="pms_"]:hover,
.pms-form input[type="submit"]:hover,
.pms-form button[type="submit"]:hover {
    background: linear-gradient(135deg, #6b4379, #8d5da0);
}

input[type="submit"][name^="pms_"]:active,
button[type="submit"][name^="pms_"]:active,
.pms-form input[type="submit"]:active,
.pms-form button[type="submit"]:active {
    transform: scale(.98);
}

input[type="submit"][name^="pms_"]:disabled,
button[type="submit"][name^="pms_"]:disabled,
.pms-form input[type="submit"]:disabled,
.pms-form button[type="submit"]:disabled {
    opacity: .35;
    cursor: not-allowed;
    box-shadow: none;
}

/* 合計金額はボタンの直前に出る。ここが小さいと金額を確認しないまま押されるため、
   ボタンに合わせて読みやすくする */
.pms-subscription-plan-total-price,
.pms-cart-total,
.pms-form .pms-total-price {
    font-size: 18px;
    font-weight: 700;
}