.membership-plan {
    background-color: #000;
    padding: 10px 50px 30px;
    margin: 10px;
    border-radius: 20px;
    width: 48%; /* 使两个计划并排且有一定的间隔 */
}

.membership-plans {
    display: flex;
    flex-direction: row; /* 在宽屏上并排显示 */
    justify-content: space-between; /* 分散对齐 */
    width: 800px;
    margin: auto;
}

.discount-container {
    margin: 50px auto;
    text-align: center;
}

.discount-container .discount-input {
    width: 200px;
    height: 30px;
    padding-left: 20px;
}

.highlight, .highlight-large {
    color: #FFD700;
}

.highlight-large {
    font-size: 30px;
}

.flashes {
    list-style-type: none; /* 移除列表前的符号 */
    padding: 10px;
    width: 200px;
    margin: 10px auto;
    color: #FFFACD;
    background: black;
    border-radius: 5px;
}

.faq-section {
    width: 800px;
    margin: 20px auto;
}

.faq-section details {
    margin-bottom: 10px;
    background-color: #000;
    border-radius: 5px;
    padding: 10px;
}

.faq-section summary {
    font-size: 18px;
    cursor: pointer;
}

.faq-section p {
    margin-top: 5px;
}

.my-membership {
    width: 700px;
    margin: 20px auto;
    background-color: #000;
    border-radius: 20px;
    padding: 20px;
}

.sub-button {
    width: 280px;
    height: 40px;
    font-size: 18px;
    margin-left: 0;
}

@media (max-width: 768px) { /* 适用于屏幕宽度小于或等于768px的设备 */
    .membership-plans {
        flex-direction: column;
        width: 100%;
    }

    .membership-plan,
    .my-membership,
    .faq-section,
    .discount-container {
        width: 80%;
    }

    .sub-button {
        width: 80%;
    }

    #top_bar {
        display: none;
    }
}

/* Anonymous-only CTA polish (PR #1330)
   These rules target the anchor variant of the CTA used on the public
   pricing page so the authenticated <button> rendering stays identical. */
.membership-plan a.subscription-cta-public {
    display: block;
    width: auto;
    max-width: 220px;
    min-width: 180px;
    height: auto;
    min-height: 44px;
    padding: 12px 24px;
    margin: 16px auto 0;
    box-sizing: border-box;
    text-align: center;
    line-height: 20px;
}

/* Force dark text on yellow — the global a:link/a:visited rule beats
   .continue-button's color, so anonymous CTAs render cream-on-yellow
   without this override. */
a.subscription-cta-public:link,
a.subscription-cta-public:visited,
a.subscription-cta-public:hover {
    color: var(--color-bg-primary);
}

.subscription-redeem-link:link,
.subscription-redeem-link:visited {
    color: var(--color-accent);
    text-decoration: underline;
    margin-left: 6px;
}

.subscription-redeem-link:hover {
    color: var(--color-accent-light);
}

@media (max-width: 768px) {
    .membership-plan a.subscription-cta-public {
        max-width: none;
        width: 80%;
    }
}