/* ============================================
   استایل‌های صفحات اشتراک - MSB Subscription v3.4.0
   ============================================ */

.msb-sub-page {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: var(--bg-primary, #0a0a0a);
    direction: rtl;
}

.msb-sub-container {
    max-width: 550px;
    width: 100%;
}

.msb-sub-card {
    background: var(--bg-card, #121212);
    border-radius: 28px;
    padding: 40px 32px;
    border: 1px solid var(--border, #2a2a30);
    text-align: center;
    animation: msbFadeInUp 0.5s ease;
}

@keyframes msbFadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.msb-sub-icon {
    font-size: 72px;
    display: block;
    margin-bottom: 20px;
}

.msb-sub-title {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 8px;
}

.msb-sub-title.green { color: #1ed760; }
.msb-sub-title.yellow { color: #f39c12; }
.msb-sub-title.red { color: #e74c3c; }
.msb-sub-title.gold { color: #ffd700; }

.msb-sub-subtitle {
    font-size: 16px;
    color: var(--text-sec, #b3b3b3);
    margin-bottom: 24px;
}

.msb-sub-error {
    background: rgba(231,76,60,0.08);
    border: 1px solid rgba(231,76,60,0.2);
    border-radius: 12px;
    padding: 12px 16px;
    color: #e74c3c;
    font-size: 14px;
    margin-bottom: 24px;
}

.msb-sub-details {
    background: var(--bg-secondary, #1a1a1a);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
    text-align: right;
}

.msb-sub-details .row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border, #2a2a30);
}

.msb-sub-details .row:last-child {
    border-bottom: none;
}

.msb-sub-details .label {
    color: var(--text-sec, #b3b3b3);
    font-size: 13px;
}

.msb-sub-details .value {
    color: #fff;
    font-weight: 600;
    font-size: 13px;
}

.msb-sub-details .value.premium {
    color: #1ed760;
}

.msb-sub-details .value.free {
    color: #b3b3b3;
}

.msb-sub-details .value .code {
    font-family: monospace;
    font-size: 11px;
    color: #b3b3b3;
    word-break: break-all;
}

.msb-sub-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.msb-sub-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 40px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
    font-size: 14px;
    cursor: pointer;
    border: none;
    font-family: inherit;
}

.msb-sub-btn-primary {
    background: linear-gradient(135deg, #1ed760, #0e8e3e);
    color: #000;
}

.msb-sub-btn-primary:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

.msb-sub-btn-secondary {
    background: rgba(255,255,255,0.06);
    color: #fff;
    border: 1px solid var(--border, #2a2a30);
}

.msb-sub-btn-secondary:hover {
    background: rgba(255,255,255,0.1);
}

.msb-sub-btn-danger {
    background: #e74c3c;
    color: #fff;
}

.msb-sub-btn-danger:hover {
    background: #c0392b;
    transform: translateY(-2px);
}

.msb-sub-btn-gold {
    background: linear-gradient(135deg, #ffd700, #f59e0b);
    color: #000;
}

.msb-sub-btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(255,215,0,0.3);
}

/* ============================================
   باکس وضعیت فعلی (برای صفحه cancel)
   ============================================ */
.msb-sub-current-status {
    background: var(--bg-secondary, #1a1a1a);
    border: 1px solid var(--border, #2a2a30);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 24px;
    text-align: right;
}

.msb-sub-current-status .status-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 13px;
}

.msb-sub-current-status .status-row .label {
    color: var(--text-sec, #b3b3b3);
}

.msb-sub-current-status .status-row .value {
    color: #fff;
    font-weight: 600;
}

.msb-sub-current-status .status-row .value.premium {
    color: #1ed760;
}

.msb-sub-current-status .status-row .value.free {
    color: #b3b3b3;
}

/* ============================================
   باکس کمک
   ============================================ */
.msb-sub-help {
    background: rgba(255,215,0,0.06);
    border: 1px solid rgba(255,215,0,0.15);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 24px;
    text-align: right;
    font-size: 13px;
    color: #b3b3b3;
}

.msb-sub-help strong {
    color: #ffd700;
}

.msb-sub-help .help-icon {
    font-size: 20px;
    display: block;
    text-align: center;
    margin-bottom: 6px;
}

/* ============================================
   باکس ارتقا
   ============================================ */
.msb-sub-upgrade-box {
    background: rgba(255,215,0,0.06);
    border: 1px solid rgba(255,215,0,0.2);
    border-radius: 16px;
    padding: 16px 20px;
    margin-bottom: 24px;
}

.msb-sub-upgrade-box .upgrade-title {
    color: #ffd700;
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 6px;
}

.msb-sub-upgrade-box .upgrade-desc {
    color: #b3b3b3;
    font-size: 13px;
    margin-bottom: 10px;
}

.msb-sub-upgrade-box .upgrade-plans {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.msb-sub-upgrade-box .upgrade-plan-badge {
    background: rgba(255,215,0,0.12);
    border: 1px solid rgba(255,215,0,0.15);
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 12px;
    color: #ffd700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.msb-sub-upgrade-box .upgrade-plan-badge .price {
    color: #fff;
}

.msb-sub-upgrade-box .upgrade-plan-badge .upgrade-link {
    color: #1ed760;
    text-decoration: none;
    font-weight: 600;
    margin-right: 6px;
}

.msb-sub-upgrade-box .upgrade-plan-badge .upgrade-link:hover {
    text-decoration: underline;
}

/* ============================================
   باکس اعلان
   ============================================ */
.msb-sub-notice {
    padding: 12px 16px;
    border-radius: 12px;
    margin-bottom: 20px;
    font-weight: 500;
}

.msb-sub-notice.success {
    background: rgba(30,215,96,0.12);
    border: 1px solid rgba(30,215,96,0.2);
    color: #1ed760;
}

.msb-sub-notice.error {
    background: rgba(231,76,60,0.12);
    border: 1px solid rgba(231,76,60,0.2);
    color: #e74c3c;
}

.msb-sub-notice.warning {
    background: rgba(255,215,0,0.12);
    border: 1px solid rgba(255,215,0,0.2);
    color: #ffd700;
}

/* ============================================
   تاریخچه تراکنش‌ها
   ============================================ */
.msb-sub-transactions {
    margin-top: 24px;
}

.msb-sub-transactions h4 {
    color: #fff;
    font-size: 16px;
    margin-bottom: 12px;
}

.msb-sub-transactions .tx-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.msb-sub-transactions .tx-table th {
    text-align: right;
    padding: 8px 12px;
    background: var(--bg-secondary, #1a1a1a);
    color: #b3b3b3;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
}

.msb-sub-transactions .tx-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border, #2a2a30);
    color: #b3b3b3;
}

.msb-sub-transactions .tx-table .amount {
    color: #fff;
    font-weight: 600;
}

.msb-sub-transactions .tx-table .status-success {
    color: #1ed760;
}

.msb-sub-transactions .tx-table .status-failed {
    color: #e74c3c;
}

.msb-sub-transactions .tx-table .status-pending {
    color: #f39c12;
}

.msb-sub-transactions .tx-empty {
    color: #b3b3b3;
    text-align: center;
    padding: 20px;
}

/* ============================================
   پیام ارتقا
   ============================================ */
.msb-upgrade-message {
    text-align: center;
    background: rgba(255,215,0,0.08);
    border: 1px solid rgba(255,215,0,0.2);
    border-radius: 12px;
    padding: 12px 20px;
    margin-bottom: 24px;
    color: #ffd700;
    font-size: 15px;
    font-weight: 600;
}

.msb-upgrade-message .upgrade-icon-text {
    font-size: 20px;
    display: inline-block;
    margin-left: 8px;
}

/* ============================================
   Spinner
   ============================================ */
.msb-sub-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255,255,255,0.1);
    border-top-color: #1ed760;
    border-radius: 50%;
    animation: msbSpin 0.8s linear infinite;
    display: inline-block;
}

@keyframes msbSpin {
    to { transform: rotate(360deg); }
}

/* ============================================
   شورت‌کد وضعیت اشتراک
   ============================================ */
.msb-sub-status-shortcode {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(255,255,255,0.05);
}

.msb-sub-status-premium {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.msb-sub-status-premium .badge {
    color: #1ed760;
    font-weight: 700;
}

.msb-sub-status-premium .plan-name {
    color: #fff;
}

.msb-sub-status-premium .days-left {
    color: #b3b3b3;
    font-size: 12px;
}

.msb-sub-status-free {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.msb-sub-status-free .badge {
    color: #b3b3b3;
}

.msb-sub-status-free .message {
    color: #b3b3b3;
    font-size: 12px;
}

.msb-sub-status-free .message a {
    color: #1ed760;
    text-decoration: none;
}

.msb-sub-login-btn {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    background: #1ed760;
    color: #000;
    text-decoration: none;
    font-weight: 600;
    font-size: 12px;
}

/* ============================================
   شورت‌کد پلن‌ها
   ============================================ */
.msb-plans-shortcode {
    display: grid;
    gap: 20px;
    margin: 20px 0;
    direction: rtl;
}

.msb-plans-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.msb-plans-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.msb-plans-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.msb-plan-card-shortcode {
    background: #121212;
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    border: 1px solid #2a2a30;
    position: relative;
    transition: all 0.3s;
}

.msb-plan-card-shortcode:hover {
    transform: translateY(-4px);
    border-color: #1ed760;
}

.msb-plan-card-shortcode.popular {
    border-color: #ffd700;
}

.msb-plan-card-shortcode.current {
    border-color: #1ed760;
    background: rgba(30,215,96,0.05);
}

.msb-plan-card-shortcode .plan-badge {
    position: absolute;
    top: -10px;
    right: 50%;
    transform: translateX(50%);
    padding: 2px 14px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.msb-plan-card-shortcode .plan-badge.popular {
    background: linear-gradient(135deg, #ffd700, #f59e0b);
    color: #000;
}

.msb-plan-card-shortcode .plan-badge.current {
    background: #1ed760;
    color: #000;
}

.msb-plan-card-shortcode .plan-name {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin: 8px 0 4px;
}

.msb-plan-card-shortcode .plan-duration {
    font-size: 12px;
    color: #b3b3b3;
}

.msb-plan-card-shortcode .plan-discount {
    display: inline-block;
    background: #e74c3c;
    color: #fff;
    padding: 2px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    margin: 6px 0;
}

.msb-plan-card-shortcode .plan-price {
    margin: 10px 0;
}

.msb-plan-card-shortcode .plan-price .amount {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
}

.msb-plan-card-shortcode .plan-price .currency {
    font-size: 13px;
    color: #b3b3b3;
}

.msb-plan-card-shortcode .plan-btn {
    width: 100%;
    border: none;
    padding: 10px;
    border-radius: 40px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s;
    font-family: inherit;
    margin-top: 8px;
}

.msb-plan-card-shortcode .plan-btn.btn-buy {
    background: linear-gradient(135deg, #1ed760, #0e8e3e);
    color: #000;
}

.msb-plan-card-shortcode .plan-btn.btn-upgrade {
    background: linear-gradient(135deg, #ffd700, #f59e0b);
    color: #000;
}

.msb-plan-card-shortcode .plan-btn.btn-active {
    background: #2a2a30;
    color: #fff;
    cursor: default;
}

.msb-plan-card-shortcode .plan-btn:hover:not(:disabled) {
    transform: scale(1.02);
}

.msb-plan-card-shortcode .plan-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.msb-sub-page .text-center {
    text-align: center;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 480px) {
    .msb-sub-card {
        padding: 28px 20px;
        border-radius: 20px;
    }

    .msb-sub-icon {
        font-size: 56px;
    }

    .msb-sub-title {
        font-size: 20px;
    }

    .msb-sub-details .row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .msb-sub-actions {
        flex-direction: column;
    }

    .msb-sub-btn {
        justify-content: center;
    }

    .msb-sub-current-status .status-row {
        flex-direction: column;
        gap: 2px;
    }

    .msb-sub-transactions .tx-table {
        font-size: 11px;
    }

    .msb-sub-transactions .tx-table th,
    .msb-sub-transactions .tx-table td {
        padding: 6px 8px;
    }

    .msb-sub-upgrade-box .upgrade-plans {
        flex-direction: column;
    }

    .msb-sub-upgrade-box .upgrade-plan-badge {
        justify-content: center;
        flex-wrap: wrap;
    }

    .msb-sub-status-shortcode {
        flex-wrap: wrap;
        justify-content: center;
    }

    .msb-sub-status-premium,
    .msb-sub-status-free {
        flex-wrap: wrap;
        justify-content: center;
    }

    .msb-plans-grid-4,
    .msb-plans-grid-3,
    .msb-plans-grid-2 {
        grid-template-columns: 1fr;
    }

    .msb-plan-card-shortcode .plan-price .amount {
        font-size: 24px;
    }
}

@media (max-width: 992px) {
    .msb-plans-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .msb-plans-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .msb-plans-grid-4,
    .msb-plans-grid-3,
    .msb-plans-grid-2 {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }

    .msb-plan-card-shortcode {
        min-height: auto;
    }
}


/* ============================================
   Extracted page styles: subscription.php
   ============================================ */
.msb-subscription-page { max-width: 1100px; margin: 30px auto; padding: 20px; direction: rtl; font-family: inherit; }
.msb-subscription-header { text-align: center; margin-bottom: 40px; }
.msb-subscription-header h1 { font-size: 32px; font-weight: 800; background: linear-gradient(135deg, #fff, #1ed760); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 10px; }
.msb-subscription-header p { color: #b3b3b3; font-size: 16px; }

.msb-subscription-status { text-align: center; margin-bottom: 30px; }
.msb-subscription-status .status-box { display: inline-block; background: rgba(30,215,96,0.1); border: 1px solid rgba(30,215,96,0.3); border-radius: 16px; padding: 20px 40px; }
.msb-subscription-status .status-box .icon { font-size: 48px; display: block; }
.msb-subscription-status .status-box .title { font-size: 18px; font-weight: 700; color: #1ed760; }
.msb-subscription-status .status-box .days { font-size: 14px; color: #b3b3b3; }
.msb-subscription-status .status-box .plan-name { font-size: 14px; color: #ffd700; margin-top: 4px; }

/* پیام ارتقا */
.msb-upgrade-message {
    text-align: center;
    background: rgba(255,215,0,0.08);
    border: 1px solid rgba(255,215,0,0.2);
    border-radius: 12px;
    padding: 12px 20px;
    margin-bottom: 24px;
    color: #ffd700;
    font-size: 15px;
    font-weight: 600;
}

.msb-plans-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 30px; }
.msb-plan-card { background: #121212; border-radius: 20px; padding: 24px 20px; text-align: center; border: 1px solid #2a2a30; transition: all 0.3s ease; position: relative; display: flex; flex-direction: column; min-height: 420px; }
.msb-plan-card:hover { transform: translateY(-8px); border-color: #1ed760; box-shadow: 0 12px 40px rgba(30,215,96,0.08); }
.msb-plan-card.popular { border-color: #ffd700; box-shadow: 0 8px 30px rgba(255,215,0,0.1); }
.msb-plan-card.current-plan { border-color: #1ed760; background: rgba(30,215,96,0.05); }
.msb-plan-card.upgrade-target { border-color: #ffd700; background: rgba(255,215,0,0.05); animation: msbPulseBorder 2s ease-in-out infinite; }

@keyframes msbPulseBorder {
    0%, 100% { border-color: #ffd700; }
    50% { border-color: #f59e0b; }
}

.msb-plan-card .badge { position: absolute; top: -10px; right: 50%; transform: translateX(50%); background: linear-gradient(135deg, #ffd700, #f59e0b); color: #000; padding: 4px 16px; border-radius: 20px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.msb-plan-card .current-badge { position: absolute; top: -10px; right: 50%; transform: translateX(50%); background: #1ed760; color: #000; padding: 4px 16px; border-radius: 20px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.msb-plan-card .upgrade-badge { position: absolute; top: -10px; right: 50%; transform: translateX(50%); background: linear-gradient(135deg, #ffd700, #f59e0b); color: #000; padding: 4px 16px; border-radius: 20px; font-size: 11px; font-weight: 700; white-space: nowrap; }

.msb-plan-card .plan-name { font-size: 20px; font-weight: 700; margin-bottom: 8px; color: #fff; }
.msb-plan-card .plan-duration { font-size: 13px; color: #b3b3b3; margin-bottom: 8px; }
.msb-plan-card .plan-price { margin: 12px 0; min-height: 66px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.msb-plan-card .plan-price .amount { font-size: 34px; font-weight: 800; display: block; color: #fff; line-height: 1.2; transition: color .2s ease, transform .2s ease; }
.msb-plan-card .plan-price .period { font-size: 13px; color: #b3b3b3; }
.msb-plan-card .plan-price.is-coupon-applied .amount { color: #1ed760; transform: scale(1.04); }
.msb-price-before { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 5px; margin-bottom: 3px; color: #96969d; font-size: 11px; }
.msb-price-before[hidden], .msb-price-saving[hidden], .msb-price-coupon-note[hidden] { display: none !important; }
.msb-price-before del { color: #c7c7cc; text-decoration-thickness: 2px; text-decoration-color: #ff6b6b; }
.msb-price-saving { display: inline-flex; align-items: center; justify-content: center; gap: 5px; margin-top: 7px; padding: 4px 10px; border-radius: 999px; background: rgba(30,215,96,.12); color: #1ed760; font-size: 11px; font-weight: 800; }
.msb-price-coupon-note { margin-top: 7px; color: #ffb35c; font-size: 10px; line-height: 1.6; }
.msb-plan-card .plan-discount { background: #e74c3c; color: #fff; padding: 3px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; display: inline-block; margin-bottom: 8px; }
.msb-plan-card .plan-features { text-align: right; margin: 12px 0 16px; padding: 0; list-style: none; flex: 1; }
.msb-plan-card .plan-features li { padding: 5px 0; font-size: 13px; color: #b3b3b3; border-bottom: 1px solid rgba(255,255,255,0.04); }
.msb-plan-card .plan-features li:last-child { border-bottom: none; }
.msb-plan-card .plan-features li i { color: #1ed760; margin-left: 8px; width: 16px; }

.msb-plan-card .plan-btn { width: 100%; border: none; padding: 12px 16px; border-radius: 40px; font-weight: 700; font-size: 14px; cursor: pointer; transition: all 0.3s ease; font-family: inherit; margin-top: auto; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.msb-plan-card .plan-btn:not(:disabled):hover { transform: scale(1.02); }
.msb-plan-card .plan-btn.btn-buy { background: linear-gradient(135deg, #1ed760, #0e8e3e); color: #000; }
.msb-plan-card .plan-btn.btn-upgrade { background: linear-gradient(135deg, #ffd700, #f59e0b); color: #000; }
.msb-plan-card .plan-btn.btn-upgrade:hover { box-shadow: 0 4px 20px rgba(255,215,0,0.3); }
.msb-plan-card .plan-btn.btn-active { background: #2a2a30; color: #fff; cursor: not-allowed; pointer-events: none; user-select: none; }
.msb-plan-card .plan-btn.btn-active i { color: #1ed760; }
.msb-plan-card .plan-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.msb-subscription-back { display: inline-block; margin-top: 30px; color: #1ed760; text-decoration: none; font-weight: 600; transition: all 0.2s; }
.msb-subscription-back:hover { color: #0e8e3e; }

.msb-coupon-box { max-width: 620px; margin: 22px auto 4px; background: rgba(255,255,255,0.035); border: 1px solid #2a2a30; border-radius: 16px; overflow: hidden; }
.msb-coupon-toggle { width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border: 0; background: transparent; color: #fff; font: inherit; font-weight: 700; cursor: pointer; text-align: right; }
.msb-coupon-toggle:hover, .msb-coupon-toggle:focus-visible { background: rgba(255,255,255,0.045); outline: none; }
.msb-coupon-toggle-icon { color: #ffd700; font-size: 18px; line-height: 1; transition: transform .25s ease; }
.msb-coupon-box.is-open .msb-coupon-toggle-icon { transform: rotate(180deg); }
.msb-coupon-content { padding: 0 16px 16px; border-top: 1px solid rgba(255,255,255,0.06); }
.msb-coupon-content[hidden] { display: none !important; }
.msb-coupon-row { display: flex; gap: 10px; direction: rtl; padding-top: 14px; }
.msb-coupon-row input { flex: 1; min-width: 0; background: #0d0d0f; color: #fff; border: 1px solid #34343a; border-radius: 12px; padding: 12px 14px; font: inherit; text-transform: uppercase; }
.msb-coupon-row input:focus { outline: none; border-color: #1ed760; box-shadow: 0 0 0 3px rgba(30,215,96,.1); }
.msb-coupon-row button { border: none; border-radius: 12px; padding: 10px 18px; background: #ffd700; color: #111; font: inherit; font-weight: 800; cursor: pointer; white-space: nowrap; }
.msb-coupon-message { min-height: 20px; margin-top: 9px; font-size: 12px; text-align: center; color: #b3b3b3; }
.msb-coupon-message.success { color: #1ed760; }
.msb-coupon-message.error { color: #ff6b6b; }

@media (max-width: 992px) {
    .msb-plans-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .msb-plan-card { min-height: 380px; padding: 20px 16px; }
    .msb-plan-card .plan-price .amount { font-size: 30px; }
}
@media (max-width: 576px) {
    .msb-plans-grid { grid-template-columns: 1fr; gap: 16px; max-width: 420px; margin-left: auto; margin-right: auto; }
    .msb-plan-card { min-height: auto; padding: 20px 16px; }
    .msb-plan-card .plan-price .amount { font-size: 28px; }
    .msb-subscription-header h1 { font-size: 24px; }
    .msb-subscription-status .status-box { padding: 16px 24px; }
    .msb-subscription-status .status-box .icon { font-size: 36px; }
    .msb-coupon-row { flex-direction: column; }
    .msb-coupon-row button { width: 100%; }
}
@media (max-width: 400px) {
    .msb-plan-card .plan-features li { font-size: 12px; padding: 4px 0; }
    .msb-plan-card .plan-btn { font-size: 13px; padding: 10px 14px; min-height: 42px; }
}


/* ============================================
   Extracted page styles: my-account.php
   ============================================ */
.msb-sub-page { min-height: 70vh; padding: 40px 20px; background: var(--bg-primary, #0a0a0a); direction: rtl; }
.msb-sub-container { max-width: 750px; margin: 0 auto; }
.msb-sub-card { background: var(--bg-card, #121212); border-radius: 28px; padding: 32px; border: 1px solid var(--border, #2a2a30); animation: msbFadeInUp 0.5s ease; }
@keyframes msbFadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

.msb-sub-card h2 { font-size: 22px; font-weight: 700; margin-top: 0; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.msb-sub-card h2 i { color: #1ed760; }

/* اعلان‌ها */
.msb-sub-notice { padding: 12px 16px; border-radius: 12px; margin-bottom: 20px; font-weight: 500; }
.msb-sub-notice.success { background: rgba(30,215,96,0.12); border: 1px solid rgba(30,215,96,0.2); color: #1ed760; }
.msb-sub-notice.error { background: rgba(231,76,60,0.12); border: 1px solid rgba(231,76,60,0.2); color: #e74c3c; }
.msb-sub-notice.warning { background: rgba(255,215,0,0.12); border: 1px solid rgba(255,215,0,0.2); color: #ffd700; }

/* اطلاعات اشتراک */
.msb-sub-info { background: var(--bg-secondary, #1a1a1a); border-radius: 16px; padding: 20px; margin-bottom: 24px; }
.msb-sub-info .row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border, #2a2a30); align-items: center; }
.msb-sub-info .row:last-child { border-bottom: none; }
.msb-sub-info .label { color: var(--text-sec, #b3b3b3); font-size: 14px; }
.msb-sub-info .value { color: #fff; font-weight: 600; font-size: 14px; }
.msb-sub-info .value.premium { color: #1ed760; }
.msb-sub-info .value.free { color: #b3b3b3; }
.msb-sub-info .value .days-highlight { color: #ffd700; }
.msb-sub-info .value .code { font-family: monospace; font-size: 12px; color: #b3b3b3; }

/* باکس ارتقا */
.msb-sub-upgrade-box {
    background: rgba(255,215,0,0.06);
    border: 1px solid rgba(255,215,0,0.2);
    border-radius: 16px;
    padding: 16px 20px;
    margin-bottom: 24px;
}
.msb-sub-upgrade-box .upgrade-title {
    color: #ffd700;
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 6px;
}
.msb-sub-upgrade-box .upgrade-desc {
    color: #b3b3b3;
    font-size: 13px;
    margin-bottom: 10px;
}
.msb-sub-upgrade-box .upgrade-plans {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.msb-sub-upgrade-box .upgrade-plan-badge {
    background: rgba(255,215,0,0.12);
    border: 1px solid rgba(255,215,0,0.15);
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 12px;
    color: #ffd700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.msb-sub-upgrade-box .upgrade-plan-badge .price {
    color: #fff;
}
.msb-sub-upgrade-box .upgrade-plan-badge .upgrade-link {
    color: #1ed760;
    text-decoration: none;
    font-weight: 600;
    margin-right: 6px;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    font: inherit;
}
.msb-sub-upgrade-box .upgrade-plan-badge .upgrade-link:hover {
    text-decoration: underline;
}

/* تاریخچه تراکنش‌ها */
.msb-sub-transactions { margin-top: 24px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.msb-sub-transactions h4 { color: #fff; font-size: 16px; margin-bottom: 12px; }
.msb-sub-transactions .tx-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.msb-sub-transactions .tx-table th { text-align: right; padding: 8px 12px; background: var(--bg-secondary, #1a1a1a); color: #b3b3b3; font-weight: 600; font-size: 11px; text-transform: uppercase; }
.msb-sub-transactions .tx-table td { padding: 8px 12px; border-bottom: 1px solid var(--border, #2a2a30); color: #b3b3b3; }
.msb-sub-transactions .tx-table .amount { color: #fff; font-weight: 600; }
.msb-sub-transactions .tx-table .status-success { color: #1ed760; }
.msb-sub-transactions .tx-table .status-failed { color: #e74c3c; }
.msb-sub-transactions .tx-table .status-pending { color: #f39c12; }
.msb-sub-transactions .tx-empty { color: #b3b3b3; text-align: center; padding: 20px; }
.msb-sub-retry-payment { white-space: nowrap; border: 0; border-radius: 999px; padding: 7px 12px; background: #1ed760; color: #07120a; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.msb-sub-retry-payment:disabled { opacity: .55; cursor: wait; }
.msb-sub-expired-payment { white-space: nowrap; color: #777; font-size: 10px; }

/* دکمه‌ها */
.msb-sub-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.msb-sub-btn { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; border-radius: 40px; font-weight: 600; text-decoration: none; transition: all 0.2s; font-size: 14px; cursor: pointer; border: none; font-family: inherit; }
.msb-sub-btn-primary { background: linear-gradient(135deg, #1ed760, #0e8e3e); color: #000; }
.msb-sub-btn-primary:hover { transform: translateY(-2px); filter: brightness(1.05); }
.msb-sub-btn-secondary { background: rgba(255,255,255,0.06); color: #fff; border: 1px solid var(--border, #2a2a30); }
.msb-sub-btn-secondary:hover { background: rgba(255,255,255,0.1); }
.msb-sub-btn-danger { background: #e74c3c; color: #fff; }
.msb-sub-btn-danger:hover { background: #c0392b; transform: translateY(-2px); }
.msb-sub-btn-gold { background: linear-gradient(135deg, #ffd700, #f59e0b); color: #000; }
.msb-sub-btn-gold:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(255,215,0,0.3); }

/* پنجره تایید لغو اشتراک */
.msb-cancel-modal { position: fixed; inset: 0; z-index: 100050; display: none; align-items: center; justify-content: center; padding: 18px; background: rgba(0,0,0,.78); backdrop-filter: blur(8px); }
.msb-cancel-modal.is-open { display: flex; }
.msb-cancel-dialog { width: min(100%, 520px); background: #15171b; border: 1px solid rgba(231,76,60,.45); border-radius: 24px; padding: 26px; box-shadow: 0 30px 90px rgba(0,0,0,.55); }
.msb-cancel-icon { width: 70px; height: 70px; margin: 0 auto 14px; border-radius: 22px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 30px; background: linear-gradient(135deg,#e74c3c,#8f1f16); }
.msb-cancel-dialog h3 { margin: 0 0 8px; text-align: center; color: #fff; font-size: 21px; }
.msb-cancel-dialog > p { margin: 0 0 18px; color: #b8bdc5; line-height: 1.9; text-align: center; font-size: 13px; }
.msb-cancel-warning-list { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 9px; }
.msb-cancel-warning-list li { display: flex; gap: 9px; align-items: flex-start; padding: 11px 12px; border-radius: 13px; background: rgba(231,76,60,.08); color: #d7d9de; font-size: 13px; line-height: 1.7; }
.msb-cancel-warning-list i { color: #e74c3c; margin-top: 4px; }
.msb-cancel-confirm-check { display: flex; gap: 9px; align-items: flex-start; cursor: pointer; color: #fff; font-size: 13px; line-height: 1.8; margin-bottom: 18px; }
.msb-cancel-confirm-check input { margin-top: 6px; accent-color: #e74c3c; }
.msb-cancel-modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.msb-cancel-final-btn { background: #e74c3c; color: #fff; }
.msb-cancel-final-btn:disabled { opacity: .4; cursor: not-allowed; transform: none !important; }
.msb-cancel-keep-btn { background: #24272d; color: #fff; border: 1px solid #343841; }
body.msb-cancel-modal-open { overflow: hidden !important; }

/* هدر و آمار پنل کاربری */
.msb-account-hero { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:20px; margin-bottom:20px; border-radius:20px; background:linear-gradient(135deg,rgba(30,215,96,.12),rgba(102,126,234,.12)); border:1px solid rgba(255,255,255,.08); }
.msb-account-hero-main { display:flex; align-items:center; gap:14px; min-width:0; }
.msb-account-avatar { width:54px; height:54px; border-radius:18px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; font-size:23px; color:#07120a; background:linear-gradient(135deg,#1ed760,#78f0a3); box-shadow:0 10px 30px rgba(30,215,96,.18); }
.msb-account-hero h2 { margin:0 0 4px; font-size:21px; color:#fff; }
.msb-account-hero p { margin:0; color:#aeb4bd; font-size:12px; line-height:1.8; }
.msb-account-status-badge { flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:999px; font-size:12px; font-weight:800; }
.msb-account-status-badge.premium { background:rgba(30,215,96,.14); color:#1ed760; border:1px solid rgba(30,215,96,.24); }
.msb-account-status-badge.free { background:rgba(255,255,255,.06); color:#b6bbc3; border:1px solid rgba(255,255,255,.08); }

.msb-account-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:22px; }
.msb-account-metric { min-width:0; padding:15px; border-radius:16px; background:#17191d; border:1px solid rgba(255,255,255,.07); }
.msb-account-metric .metric-icon { display:block; font-size:19px; margin-bottom:9px; }
.msb-account-metric strong { display:block; color:#fff; font-size:16px; line-height:1.35; overflow:hidden; text-overflow:ellipsis; }
.msb-account-metric small { display:block; margin-top:4px; color:#8f959e; font-size:10px; line-height:1.6; }
.msb-account-metric.success strong { color:#1ed760; }
.msb-account-metric.discount strong { color:#ffd166; }

.msb-sub-progress-wrap { margin:0 0 24px; padding:17px 18px; border-radius:16px; background:#17191d; border:1px solid rgba(255,255,255,.07); }
.msb-sub-progress-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; color:#fff; font-size:12px; }
.msb-sub-progress-head strong { color:#1ed760; font-size:13px; }
.msb-sub-progress-track { height:9px; border-radius:999px; overflow:hidden; background:#282b31; }
.msb-sub-progress-bar { height:100%; border-radius:999px; background:linear-gradient(90deg,#1ed760,#78f0a3); transition:width .4s ease; }
.msb-sub-progress-dates { display:flex; justify-content:space-between; gap:10px; margin-top:9px; color:#777e88; font-size:10px; }

.msb-sub-transactions .coupon-tag { display:inline-flex; align-items:center; padding:3px 8px; border-radius:999px; background:rgba(255,209,102,.1); color:#ffd166; font-size:10px; font-weight:700; white-space:nowrap; }
.msb-sub-transactions .discount-value { color:#ffd166; font-size:10px; white-space:nowrap; }
.msb-sub-transactions .plan-name-cell { color:#fff; white-space:nowrap; }

.msb-sub-page .text-center { text-align: center; }

/* ریسپانسیو */
@media (max-width: 480px) {
    .msb-sub-card { padding: 20px; }
    .msb-sub-info .row { flex-direction: column; align-items: flex-start; gap: 4px; }
    .msb-sub-actions { flex-direction: column; }
    .msb-sub-btn { justify-content: center; }
    .msb-sub-upgrade-box .upgrade-plans { flex-direction: column; }
    .msb-sub-upgrade-box .upgrade-plan-badge { justify-content: center; flex-wrap: wrap; }
    .msb-sub-transactions .tx-table { font-size: 11px; }
    .msb-sub-transactions .tx-table th,
    .msb-sub-transactions .tx-table td { padding: 6px 8px; }
    .msb-cancel-dialog { padding: 21px 17px; border-radius: 20px; }
    .msb-cancel-modal-actions { grid-template-columns: 1fr; }
    .msb-account-hero { align-items:flex-start; flex-direction:column; padding:16px; }
    .msb-account-status-badge { align-self:flex-start; }
    .msb-account-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .msb-account-metric { padding:13px; }
}


/* ============================================
   Extracted page styles: success.php
   ============================================ */
.msb-sub-page { min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; background: var(--bg-primary, #0a0a0a); direction: rtl; }
.msb-sub-container { max-width: 550px; width: 100%; }
.msb-sub-card { background: var(--bg-card, #121212); border-radius: 28px; padding: 40px 32px; border: 1px solid var(--border, #2a2a30); text-align: center; animation: msbFadeInUp 0.5s ease; }
@keyframes msbFadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

.msb-sub-icon { font-size: 72px; display: block; margin-bottom: 20px; }
.msb-sub-icon.upgrade-icon { animation: msbPulse 1.5s ease-in-out infinite; }
@keyframes msbPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.msb-sub-title { font-size: 24px; font-weight: 800; color: #1ed760; margin-bottom: 8px; }
.msb-sub-title.upgrade-title { color: #ffd700; }
.msb-sub-subtitle { font-size: 16px; color: var(--text-sec, #b3b3b3); margin-bottom: 24px; }

.msb-sub-details { background: var(--bg-secondary, #1a1a1a); border-radius: 16px; padding: 20px; margin-bottom: 24px; text-align: right; }
.msb-sub-details .row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border, #2a2a30); }
.msb-sub-details .row:last-child { border-bottom: none; }
.msb-sub-details .label { color: var(--text-sec, #b3b3b3); font-size: 13px; }
.msb-sub-details .value { color: #fff; font-weight: 600; font-size: 13px; }
.msb-sub-details .value .highlight { color: #ffd700; }

.msb-sub-upgrade-message {
    background: rgba(255,215,0,0.08);
    border: 1px solid rgba(255,215,0,0.2);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 20px;
    color: #ffd700;
    font-size: 14px;
    text-align: center;
}
.msb-sub-upgrade-message .upgrade-icon-text { font-size: 20px; display: inline-block; margin-left: 8px; }

.msb-sub-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.msb-sub-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; border-radius: 40px; font-weight: 600; text-decoration: none; transition: all 0.2s; font-size: 14px; cursor: pointer; border: none; font-family: inherit; }
.msb-sub-btn-primary { background: linear-gradient(135deg, #1ed760, #0e8e3e); color: #000; }
.msb-sub-btn-primary:hover { transform: translateY(-2px); filter: brightness(1.05); }
.msb-sub-btn-secondary { background: rgba(255,255,255,0.06); color: #fff; border: 1px solid var(--border, #2a2a30); }
.msb-sub-btn-secondary:hover { background: rgba(255,255,255,0.1); }
.msb-sub-btn-gold { background: linear-gradient(135deg, #ffd700, #f59e0b); color: #000; }
.msb-sub-btn-gold:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(255,215,0,0.3); }

.msb-sub-page .text-center { text-align: center; }

.msb-sub-page .spinner { width: 40px; height: 40px; border: 4px solid rgba(255,255,255,0.1); border-top-color: #1ed760; border-radius: 50%; display: inline-block; }
.msb-sub-page .spinner.spin { animation: msbSpin 0.8s linear infinite; }
@keyframes msbSpin { to { transform: rotate(360deg); } }

@media (max-width: 480px) {
    .msb-sub-card { padding: 28px 20px; }
    .msb-sub-icon { font-size: 56px; }
    .msb-sub-title { font-size: 20px; }
    .msb-sub-details .row { flex-direction: column; gap: 4px; }
    .msb-sub-actions { flex-direction: column; }
    .msb-sub-btn { justify-content: center; }
}


/* ============================================
   Extracted page styles: cancel.php
   ============================================ */
.msb-sub-page { min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; background: var(--bg-primary, #0a0a0a); direction: rtl; }
.msb-sub-container { max-width: 500px; width: 100%; }
.msb-sub-card { background: var(--bg-card, #121212); border-radius: 28px; padding: 40px 32px; border: 1px solid var(--border, #2a2a30); text-align: center; animation: msbFadeInUp 0.5s ease; }
@keyframes msbFadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

.msb-sub-icon { font-size: 72px; display: block; margin-bottom: 20px; }
.msb-sub-title { font-size: 24px; font-weight: 800; color: #f39c12; margin-bottom: 8px; }
.msb-sub-title.cancel-title { color: #e74c3c; }
.msb-sub-subtitle { font-size: 16px; color: var(--text-sec, #b3b3b3); margin-bottom: 24px; }

/* باکس خطا */
.msb-sub-error {
    background: rgba(231,76,60,0.08);
    border: 1px solid rgba(231,76,60,0.2);
    border-radius: 12px;
    padding: 12px 16px;
    color: #e74c3c;
    font-size: 14px;
    margin-bottom: 24px;
}

/* باکس وضعیت فعلی */
.msb-sub-current-status {
    background: var(--bg-secondary, #1a1a1a);
    border: 1px solid var(--border, #2a2a30);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 24px;
    text-align: right;
}
.msb-sub-current-status .status-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 13px;
}
.msb-sub-current-status .status-row .label {
    color: var(--text-sec, #b3b3b3);
}
.msb-sub-current-status .status-row .value {
    color: #fff;
    font-weight: 600;
}
.msb-sub-current-status .status-row .value.premium {
    color: #1ed760;
}
.msb-sub-current-status .status-row .value.free {
    color: #b3b3b3;
}

/* باکس کمکی */
.msb-sub-help {
    background: rgba(255,215,0,0.06);
    border: 1px solid rgba(255,215,0,0.15);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 24px;
    text-align: right;
    font-size: 13px;
    color: #b3b3b3;
}
.msb-sub-help strong { color: #ffd700; }
.msb-sub-help .help-icon { font-size: 20px; display: block; text-align: center; margin-bottom: 6px; }

/* دکمه‌ها */
.msb-sub-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.msb-sub-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 40px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
    font-size: 14px;
    cursor: pointer;
    border: none;
    font-family: inherit;
}
.msb-sub-btn-primary { background: linear-gradient(135deg, #1ed760, #0e8e3e); color: #000; }
.msb-sub-btn-primary:hover { transform: translateY(-2px); filter: brightness(1.05); }
.msb-sub-btn-secondary { background: rgba(255,255,255,0.06); color: #fff; border: 1px solid var(--border, #2a2a30); }
.msb-sub-btn-secondary:hover { background: rgba(255,255,255,0.1); }
.msb-sub-btn-danger { background: #e74c3c; color: #fff; }
.msb-sub-btn-danger:hover { background: #c0392b; transform: translateY(-2px); }
.msb-sub-btn-gold { background: linear-gradient(135deg, #ffd700, #f59e0b); color: #000; }
.msb-sub-btn-gold:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(255,215,0,0.3); }

.msb-sub-page .text-center { text-align: center; }

/* ریسپانسیو */
@media (max-width: 480px) {
    .msb-sub-card { padding: 28px 20px; }
    .msb-sub-icon { font-size: 56px; }
    .msb-sub-title { font-size: 20px; }
    .msb-sub-actions { flex-direction: column; }
    .msb-sub-btn { justify-content: center; }
    .msb-sub-current-status .status-row { flex-direction: column; gap: 2px; }
}

/* ============================================
   Responsive & conflict isolation v3.4.0
   ============================================ */
:where(.msb-sub-page,.msb-subscription-page,.msb-plans-shortcode,.msb-sub-status-shortcode),
:where(.msb-sub-page,.msb-subscription-page,.msb-plans-shortcode,.msb-sub-status-shortcode) *,
:where(.msb-sub-page,.msb-subscription-page,.msb-plans-shortcode,.msb-sub-status-shortcode) *::before,
:where(.msb-sub-page,.msb-subscription-page,.msb-plans-shortcode,.msb-sub-status-shortcode) *::after {
    box-sizing: border-box;
}

:where(.msb-sub-page,.msb-subscription-page,.msb-plans-shortcode,.msb-sub-status-shortcode) {
    max-width: 100%;
    overflow-wrap: anywhere;
}

:where(.msb-sub-page,.msb-subscription-page,.msb-plans-shortcode) img,
:where(.msb-sub-page,.msb-subscription-page,.msb-plans-shortcode) svg {
    max-width: 100%;
    height: auto;
}

:where(.msb-sub-page,.msb-subscription-page,.msb-plans-shortcode) :is(button,input,select,textarea) {
    font: inherit;
}

.msb-sub-page .msb-sub-container,
.msb-subscription-page .msb-sub-container,
.msb-plans-shortcode > * { min-width: 0; }

.msb-sub-transactions {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
}

@media (max-width: 576px) {
    .msb-sub-page,
    .msb-subscription-page {
        min-height: auto;
        padding: 18px 10px;
    }
    .msb-sub-page .msb-sub-container,
    .msb-subscription-page .msb-sub-container { width: 100%; }
    .msb-sub-page .msb-sub-card,
    .msb-subscription-page .msb-sub-card {
        width: 100%;
        padding: 22px 15px;
        border-radius: 18px;
    }
    .msb-sub-page .msb-sub-btn,
    .msb-subscription-page .msb-sub-btn,
    .msb-plans-shortcode button,
    .msb-plans-shortcode a.plan-btn {
        min-height: 44px;
        touch-action: manipulation;
    }
    .msb-sub-details .row,
    .msb-sub-info .row { min-width: 0; }
    .msb-sub-details .value,
    .msb-sub-info .value { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    :where(.msb-sub-page,.msb-subscription-page,.msb-plans-shortcode,.msb-sub-status-shortcode) *,
    :where(.msb-sub-page,.msb-subscription-page,.msb-plans-shortcode,.msb-sub-status-shortcode) *::before,
    :where(.msb-sub-page,.msb-subscription-page,.msb-plans-shortcode,.msb-sub-status-shortcode) *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ============================================
   Account dashboard desktop/mobile rebuild v3.4.2
   This block is intentionally page-scoped to prevent the
   success/cancel template rules from shrinking the account page.
   ============================================ */
.msb-account-page.msb-sub-page {
    display: block;
    width: 100%;
    min-height: calc(100vh - 80px);
    max-width: none;
    margin: 0;
    padding: clamp(24px, 3.2vw, 52px) clamp(14px, 3vw, 42px) 125px;
    overflow: visible;
    background:
        radial-gradient(circle at 82% 8%, rgba(30, 215, 96, .075), transparent 28%),
        radial-gradient(circle at 12% 28%, rgba(96, 92, 230, .055), transparent 32%),
        var(--bg-primary, #090a0b);
    color: #f4f7f5;
    text-align: right;
}

.msb-account-page .msb-sub-container {
    width: min(100%, 1180px);
    max-width: 1180px;
    min-width: 0;
    margin: 0 auto;
}

.msb-account-page .msb-account-shell {
    width: 100%;
    max-width: none;
    min-width: 0;
    padding: clamp(20px, 2.4vw, 34px);
    border: 1px solid rgba(255, 255, 255, .075);
    border-radius: 28px;
    background: rgba(15, 17, 19, .94);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
    text-align: right;
    overflow: hidden;
}

.msb-account-page .msb-account-hero {
    min-height: 136px;
    margin-bottom: 18px;
    padding: clamp(20px, 2.7vw, 34px);
    border: 1px solid rgba(92, 239, 146, .14);
    border-radius: 24px;
    background:
        linear-gradient(118deg, rgba(15, 58, 36, .92), rgba(24, 30, 48, .94)),
        linear-gradient(135deg, rgba(30, 215, 96, .16), rgba(102, 126, 234, .14));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.msb-account-page .msb-account-hero-main {
    gap: 18px;
    flex: 1 1 auto;
}

.msb-account-page .msb-account-avatar {
    width: 68px;
    height: 68px;
    border-radius: 22px;
    font-size: 28px;
}

.msb-account-page .msb-account-hero h2 {
    max-width: 720px;
    margin: 0 0 7px;
    font-size: clamp(21px, 2.2vw, 29px);
    line-height: 1.55;
    letter-spacing: -.02em;
}

.msb-account-page .msb-account-hero p {
    font-size: 13px;
    line-height: 1.9;
    color: #aeb8b3;
}

.msb-account-page .msb-account-status-badge {
    min-height: 42px;
    padding: 9px 15px;
    font-size: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

.msb-account-page .msb-account-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.msb-account-page .msb-account-metric {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 13px;
    align-items: center;
    min-height: 104px;
    padding: 17px;
    border: 1px solid rgba(255, 255, 255, .075);
    border-radius: 18px;
    background: linear-gradient(145deg, #191c20, #15171a);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

.msb-account-page .msb-account-metric .metric-icon {
    grid-row: 1 / 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0;
    border-radius: 15px;
    font-size: 21px;
    color: #d9e3de;
    background: rgba(255, 255, 255, .055);
}

.msb-account-page .msb-account-metric.success .metric-icon {
    color: #46e982;
    background: rgba(30, 215, 96, .11);
}

.msb-account-page .msb-account-metric.discount .metric-icon {
    color: #ffd166;
    background: rgba(255, 209, 102, .10);
}

.msb-account-page .msb-account-metric strong {
    min-width: 0;
    margin: 0;
    font-size: clamp(16px, 1.65vw, 21px);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.msb-account-page .msb-account-metric small {
    min-width: 0;
    margin: 3px 0 0;
    font-size: 10.5px;
    line-height: 1.75;
    color: #929aa4;
}

.msb-account-page .msb-sub-info {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 18px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .065);
    border-radius: 20px;
    background: #121416;
}

.msb-account-page .msb-sub-info .row,
.msb-account-page .msb-sub-info .row:last-child {
    min-width: 0;
    min-height: 62px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, .055);
    border-radius: 14px;
    background: #181a1e;
    gap: 14px;
}

.msb-account-page .msb-sub-info .label {
    flex: 0 0 auto;
    font-size: 12px;
    color: #8f98a2;
}

.msb-account-page .msb-sub-info .value {
    min-width: 0;
    max-width: 68%;
    font-size: 13px;
    line-height: 1.75;
    text-align: left;
    overflow-wrap: anywhere;
}

.msb-account-page .msb-sub-info .value .code {
    display: inline-block;
    max-width: 100%;
    direction: ltr;
    unicode-bidi: plaintext;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.msb-account-page .msb-sub-progress-wrap,
.msb-account-page .msb-sub-upgrade-box {
    margin-bottom: 18px;
    border-radius: 18px;
}

.msb-account-page .msb-sub-progress-wrap {
    padding: 18px 20px;
}

.msb-account-page .msb-sub-progress-track {
    height: 10px;
}

.msb-account-page .msb-sub-upgrade-box {
    padding: 18px 20px;
}

.msb-account-page .msb-sub-transactions {
    width: 100%;
    max-width: 100%;
    margin: 22px 0 0;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 20px;
    background: #121416;
    overflow-x: auto;
}

.msb-account-page .msb-sub-transactions h4 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 15px;
    font-size: 16px;
}

.msb-account-page .msb-sub-transactions .tx-table {
    width: 100%;
    min-width: 850px;
    border-collapse: separate;
    border-spacing: 0 7px;
    table-layout: auto;
}

.msb-account-page .msb-sub-transactions .tx-table th {
    padding: 9px 12px;
    border: 0;
    background: transparent;
    color: #858e98;
    font-size: 10.5px;
    white-space: nowrap;
}

.msb-account-page .msb-sub-transactions .tx-table td {
    padding: 12px;
    border-top: 1px solid rgba(255, 255, 255, .055);
    border-bottom: 1px solid rgba(255, 255, 255, .055);
    background: #191b1f;
    color: #b8bec6;
    vertical-align: middle;
    white-space: nowrap;
}

.msb-account-page .msb-sub-transactions .tx-table td:first-child {
    border-right: 1px solid rgba(255, 255, 255, .055);
    border-radius: 0 13px 13px 0;
}

.msb-account-page .msb-sub-transactions .tx-table td:last-child {
    border-left: 1px solid rgba(255, 255, 255, .055);
    border-radius: 13px 0 0 13px;
}

.msb-account-page .msb-sub-actions {
    align-items: center;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .065);
}

.msb-account-page .msb-sub-actions form {
    margin: 0;
}

.msb-account-page .msb-sub-btn {
    min-height: 44px;
    padding: 11px 21px;
}

@media (max-width: 1080px) {
    .msb-account-page .msb-account-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 780px) {
    .msb-account-page.msb-sub-page {
        padding: 18px 12px 112px;
    }

    .msb-account-page .msb-account-shell {
        padding: 16px;
        border-radius: 22px;
    }

    .msb-account-page .msb-account-hero {
        min-height: 0;
        align-items: flex-start;
        flex-direction: column;
        padding: 19px;
    }

    .msb-account-page .msb-account-status-badge {
        align-self: flex-start;
    }

    .msb-account-page .msb-sub-info {
        grid-template-columns: 1fr;
    }

    .msb-account-page .msb-sub-info .value {
        max-width: 62%;
    }
}

@media (max-width: 620px) {
    .msb-account-page .msb-account-metrics {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .msb-account-page .msb-account-metric {
        min-height: 88px;
    }

    .msb-account-page .msb-account-hero-main {
        align-items: flex-start;
    }

    .msb-account-page .msb-account-avatar {
        width: 54px;
        height: 54px;
        border-radius: 17px;
        font-size: 22px;
    }

    .msb-account-page .msb-account-hero h2 {
        font-size: 19px;
    }

    .msb-account-page .msb-sub-info .row,
    .msb-account-page .msb-sub-info .row:last-child {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .msb-account-page .msb-sub-info .value {
        max-width: 100%;
        text-align: right;
    }

    .msb-account-page .msb-sub-progress-dates {
        flex-direction: column;
        gap: 4px;
    }

    .msb-account-page .msb-sub-transactions {
        padding: 13px;
        overflow: visible;
    }

    .msb-account-page .msb-sub-transactions .tx-table {
        min-width: 0;
        border-spacing: 0;
    }

    .msb-account-page .msb-sub-transactions .tx-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .msb-account-page .msb-sub-transactions .tx-table,
    .msb-account-page .msb-sub-transactions .tx-table tbody,
    .msb-account-page .msb-sub-transactions .tx-table tr,
    .msb-account-page .msb-sub-transactions .tx-table td {
        display: block;
        width: 100%;
    }

    .msb-account-page .msb-sub-transactions .tx-table tr {
        margin-bottom: 11px;
        padding: 10px 12px;
        border: 1px solid rgba(255, 255, 255, .065);
        border-radius: 15px;
        background: #191b1f;
    }

    .msb-account-page .msb-sub-transactions .tx-table td,
    .msb-account-page .msb-sub-transactions .tx-table td:first-child,
    .msb-account-page .msb-sub-transactions .tx-table td:last-child {
        display: grid;
        grid-template-columns: minmax(74px, .42fr) minmax(0, 1fr);
        gap: 10px;
        align-items: center;
        min-height: 36px;
        padding: 7px 0;
        border: 0;
        border-bottom: 1px dashed rgba(255, 255, 255, .06);
        border-radius: 0;
        background: transparent;
        white-space: normal;
        text-align: left;
    }

    .msb-account-page .msb-sub-transactions .tx-table td:last-child {
        border-bottom: 0;
    }

    .msb-account-page .msb-sub-transactions .tx-table td::before {
        content: attr(data-label);
        color: #818a94;
        font-size: 10px;
        text-align: right;
    }

    .msb-account-page .msb-sub-actions,
    .msb-account-page .msb-sub-actions form,
    .msb-account-page .msb-sub-actions .msb-sub-btn {
        width: 100%;
    }

    .msb-account-page .msb-sub-actions {
        flex-direction: column;
    }

    .msb-account-page .msb-sub-btn {
        justify-content: center;
    }
}