/* =========================================================
   SUBSCRIPTION PLANS TABLE
========================================================= */

.subscription-plans-table-container {

    width: 100%;

    margin-top: var(--space-sm);

    overflow-x: auto;

}


/* =========================================================
   TABLE
========================================================= */

.subscription-plans-table {

    width: 100%;

    border-collapse: separate;

    border-spacing: 0;

    background: #ffffff;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-md);

    overflow: hidden;

}

.subscription-feature-column {
    width: 100%;
}

.subscription-plan-column {

    width: 35%;

}

/* =========================================================
   TABLE HEADER
========================================================= */

.subscription-plans-table thead th {

    padding: 18px 16px;

    border-bottom: 1px solid var(--color-border);

    background: var(--color-primary);

    color: #ffffff;

    text-align: center;

    vertical-align: middle;

}


/* =========================================================
   FEATURE HEADER
========================================================= */

.subscription-plans-table
.subscription-feature-column {

    width: 46%;

    text-align: left;

}


/* =========================================================
   PLAN COLUMNS
========================================================= */

.subscription-plans-table
.subscription-plan-column {

    width: 27%;

    position: relative;

}


/* =========================================================
   PLAN NAME
========================================================= */

.subscription-plan-name {

    font-size: var(--font-size-md);

    font-weight: var(--font-weight-bold);

    line-height: 1.3;

}


/* =========================================================
   PLAN PRICE
========================================================= */

.subscription-plan-price {

    margin-top: 6px;

    font-size: var(--font-size-lg);

    font-weight: var(--font-weight-bold);

    line-height: 1.3;

}


/* =========================================================
   PLAN BILLING
========================================================= */

.subscription-plan-billing {

    margin-top: 4px;

    font-size: var(--font-size-xs);

    font-weight: var(--font-weight-normal);

    opacity: 0.9;

}


/* =========================================================
   PREMIUM HEADER
========================================================= */

.subscription-plans-table
.subscription-premium-column {

    background: var(--color-primary);

}


/* =========================================================
   RECOMMENDED BADGE
========================================================= */

.subscription-plan-badge {

    display: inline-block;

    margin-bottom: 7px;

    padding: 4px 9px;

    border-radius: var(--radius-pill);

    background: #ffffff;

    color: var(--color-primary);

    font-size: var(--font-size-xs);

    font-weight: var(--font-weight-bold);

    line-height: 1.2;

}


/* =========================================================
   BODY CELLS
========================================================= */

.subscription-plans-table tbody td {

    padding: 16px;

    border-bottom: 1px solid var(--color-border);

    vertical-align: middle;

}


/* =========================================================
   REMOVE LAST BORDER
========================================================= */

.subscription-plans-table tbody tr:last-child td {

    border-bottom: none;

}


/* =========================================================
   FEATURE CELL
========================================================= */

.subscription-plans-table
.subscription-feature-cell {

    background: #ffffff;

    color: var(--color-text-primary);

    text-align: left;

}


/* =========================================================
   FEATURE NAME
========================================================= */

.subscription-feature-name {

    font-weight: var(--font-weight-semibold);

}


/* =========================================================
   HELP BUTTON
========================================================= */

.subscription-feature-help {

    flex-shrink: 0;

}


/* =========================================================
   VALUE CELLS
========================================================= */

.subscription-plans-table
.subscription-value-cell {

    background: #ffffff;

    color: var(--color-text-primary);

    text-align: center;

    font-size: var(--font-size-sm);

    font-weight: var(--font-weight-medium);

}


/* =========================================================
   PREMIUM VALUE COLUMN
========================================================= */

.subscription-plans-table
.subscription-premium-cell {

    background: #f7fafc;

}


/* =========================================================
   ALTERNATING ROWS
========================================================= */

.subscription-plans-table tbody tr:nth-child(even)
.subscription-feature-cell {

    background: #fafbfc;

}


.subscription-plans-table tbody tr:nth-child(even)
.subscription-value-cell {

    background: #fafbfc;

}


.subscription-plans-table tbody tr:nth-child(even)
.subscription-premium-cell {

    background: #f3f7fa;

}


/* =========================================================
   ROW HOVER
========================================================= */

.subscription-plans-table tbody tr:hover
.subscription-feature-cell,
.subscription-plans-table tbody tr:hover
.subscription-value-cell,
.subscription-plans-table tbody tr:hover
.subscription-premium-cell {

    background: var(--color-hover-fill);

}


/* =========================================================
   LOADING / EMPTY STATES
========================================================= */

.subscription-loading,
.subscription-empty {

    margin-top: 20px;

    padding: 16px;

    text-align: center;

    color: var(--color-text-secondary);

}


/* =========================================================
   SUBSCRIPTION CTA
========================================================= */

.subscription-section {

    margin-top: 30px;

    padding: 28px 30px;

    border-top: 1px solid var(--color-border);

    text-align: center;

}


.subscription-section-content {

    max-width: 760px;

    margin: 0 auto;

}


.subscription-section h2 {

    margin: 0 0 10px;

    color: var(--color-primary);

    font-size: var(--font-size-xl);

    line-height: 1.3;

}


.subscription-section p {

    max-width: 650px;

    margin: 0 auto 20px;

    color: var(--color-text-secondary);

    font-size: var(--font-size-md);

    line-height: 1.6;

}


.subscription-section .btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 700px) {

    .subscription-plans-table {

        min-width: 600px;

    }

}

/* =========================================
   10. SUBSCRIPTION PAGES
========================================= */

.subscription-container {

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 80vh;

}

.subscription-card {

    width: 90%;

    background: var(--color-surface);

    padding: 30px;

    border-radius: var(--radius-sm);

    box-shadow: var(--shadow-md);

}

.subscription-card h2 {

    text-align: center;

}

/* =========================================================
   MY SUBSCRIPTION PAGE
========================================================= */

.my-subscription-page {
    width: 100%;
    box-sizing: border-box;
}


/* =========================================================
   PAGE HERO
========================================================= */

.my-subscription-page .page-hero {
    padding: 42px 46px;
    margin-bottom: 28px;
}


.my-subscription-page .page-hero h1 {
    max-width: 760px;
    margin: 0 0 14px;
    color: var(--color-primary);
    font-size: clamp(32px, 4vw, 42px);
    line-height: 1.15;
}


.my-subscription-page .page-hero p {
    max-width: 700px;
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 18px;
    line-height: 1.65;
}


/* =========================================================
   PAGE SECTIONS
========================================================= */

.my-subscription-page .page-section {
    margin-bottom: 30px;
}


.my-subscription-page .page-section-header {
    margin-bottom: 22px;
}


.my-subscription-page .page-section-header h2 {
    margin: 0 0 10px;
    color: var(--color-primary);
    font-size: 28px;
    line-height: 1.25;
}


.my-subscription-page .page-section-header p {
    max-width: 760px;
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 16px;
    line-height: 1.7;
}


/* =========================================================
   CURRENT SUBSCRIPTION
========================================================= */

.my-subscription-page .subscription-status-card {

    padding: 24px;

    border: 1px solid var(--color-border-light);

    border-radius: var(--radius-lg);

    background: var(--color-surface);

    box-shadow: var(--shadow-sm);

}


.my-subscription-page .subscription-status-card
.subscription-plan-name {

    margin-bottom: 10px;

    color: var(--color-primary);

    font-size: var(--font-size-lg);

    font-weight: var(--font-weight-bold);

    line-height: 1.3;

}


/* =========================================================
   ACCOUNT ACTION SECTIONS
========================================================= */

.my-subscription-page .account-action-section {

    padding: 28px 30px;

    border: 1px solid var(--color-border-light);

    border-radius: var(--radius-lg);

    background: var(--color-surface-soft);

}


.my-subscription-page .account-action-content {

    max-width: 760px;

    margin: 0 auto;

    text-align: center;

}


.my-subscription-page .account-action-content h2 {

    margin: 0 0 10px;

    color: var(--color-primary);

    font-size: var(--font-size-xl);

    line-height: 1.3;

}


.my-subscription-page .account-action-content p {

    max-width: 650px;

    margin: 0 auto 20px;

    color: var(--color-text-secondary);

    font-size: var(--font-size-md);

    line-height: 1.6;

}


/* =========================================================
   SUBSCRIPTION CODE FORM
========================================================= */

.my-subscription-page .account-action-content .form-group {

    max-width: 500px;

    margin: 0 auto 18px;

    text-align: left;

}


.my-subscription-page .account-action-content .form-group label {

    display: block;

    margin-bottom: 6px;

    color: var(--color-text-primary);

    font-size: var(--font-size-sm);

    font-weight: var(--font-weight-semibold);

}


.my-subscription-page .account-action-content
#subscription-code {

    width: 100%;

    box-sizing: border-box;

}


/* =========================================================
   BUTTONS
========================================================= */

.my-subscription-page .account-action-content .btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

}