/* ------------------ Basic Pages ------------------- */

/* -------------------------------------------------- */
/* ---------------------- page ---------------------- */
/* -------------------------------------------------- */

.page {
    padding: 70px 40px;
}

.page .container {
    max-width: 1440px;
}

.page h1,
.page .title {
    font-size: 44px;
    font-weight: 700;
    margin-bottom: 24px;
    color: var(--atlas-text-primary);
}

.page .subtitle {
    font-size: 18px;
    color: var(--atlas-text-secondary);
    line-height: 1.8;
    margin-bottom: 64px;
}

.page h2 {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 32px;
    color: var(--atlas-text-primary);
    text-align: center;
}

.page p {
    margin-bottom: 16px;
}

.page .header-controls {
    margin-bottom: 24px;
}

.page .page-button-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--atlas-text-secondary);
    font-size: 14px;
    text-decoration: none;
}

/* -------------------------------------------------- */
/* ------------------- page error ------------------- */
/* -------------------------------------------------- */

.page.error {
    text-align: center;
}

.page.error .error-code {
    font-size: 120px;
    font-weight: 600;
    color: var(--atlas-accent-color);
}

.page.error .atlas-button {
    display: inline-block;
}

/* -------------------------------------------------- */
/* ------------------ page account ------------------ */
/* -------------------------------------------------- */

.page.account {
    padding: 60px 40px 100px;
}

.page.account .container {
    max-width: 1000px;
}

.page.account .title {
    /*font-size: 42px;*/
    margin-bottom: 40px;
}

.page.account .account-section {
    margin-bottom: 24px;
}

.page.account .account-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
}
.page.account .account-badge.medic_premium {
    background-color: #E0E7FF;
    color: #4338CA;
}
.page.account .account-badge.medic {
    background-color: #DBEAFE;
    color: #1E40AF;
}
.page.account .account-badge.editor,
.page.account .account-badge.chief {
    background-color: #FEF3C7;
    color: #92400E;
}
.page.account .account-badge.admin {
    background-color: #FCE7F3;
    color: #9F1239;
}

.page.account .subscription-status {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}
.page.account .subscription-status.active {
    background-color: #D1FAE5;
    color: #065F46;
}
.page.account .subscription-status.cancelled,
.page.account .subscription-status.expired {
    background-color: #FEE2E2;
    color: #991B1B;
}
.page.account .subscription-status.paused {
    background-color: #E5E7EB;
    color: #374151;
}
.page.account .subscription-status.pending {
    background-color: #FEF3C7;
    color: #92400E;
}

/* ----- profile edit form ----- */

.page.account .account-edit-form {
    gap: 48px;
}

.page.account .account-edit-form .form-row {
    gap: 24px;
}

.page.account .account-edit-form .actions {
    margin-top: 0;
}

/* -------------------------------------------------- */
/* ------------------ page buy-plan ----------------- */
/* -------------------------------------------------- */

.page.buy-plan {
    padding: 60px 40px;
}