/* =========================================================
   ENETIATIVE GLOBAL FONT
   Public + Editorial
========================================================= */

:root {
    --font-main:
        "Avenir Next",
        "Avenir Next LT Pro",
        "Segoe UI",
        Arial,
        sans-serif;
    
        /* FONT SIZE */
        /*
        --fs-small   → meta, timestamp, helper, caption
        --fs-base    → menu, button, form, table, body UI
        --fs-title   → judul card / article title kecil
        --fs-heading → heading utama halaman
        */
        --fs-small: 11px;
        --fs-base: 13px;
        --fs-title: 18px;
        --fs-heading: 24px;

    /* =========================================================
    GLOBAL UI COLORS
    Public + Editorial
    ========================================================= */
    /* TEXT */
    --color-text-body: #334155;
    --color-text-primary: #1e293b;
    --color-text-secondary: #475569;
    --color-text-muted: #64748b;
    --color-text-subtle: #94a3b8;
    --color-text-disabled: #a8b1bd;


    /* BORDER / LINE */
    --color-border: #e2e8f0;
    --color-border-hover: #94a3b8;
    --color-border-control: #d7dee6;
    --color-border-account: #dce3ea;
    --color-border-panel: #dfe6eb;
    --color-border-panel-soft: #e1e7ed;
    --color-border-stat: #e5e9ef;
    --color-border-form: #dbe3ea;
    --color-border-control-hover: #bfc9d4;

    /* BACKGROUND */
    --color-bg-page: #f5f7fa;
    --color-bg-subtle: #f8fafc;
    --color-bg-disabled: #e5e7eb;

    /* CONTROL STATE */
    --color-control-hover: #f8fafc;
    --color-control-hover-soft: #f1f5f9;
    --color-control-disabled: #f1f5f9;

    /* PRIMARY ACTION */
    --color-primary:  #43a847;  
    --color-primary-hover: #39953e;
    --color-primary-text: #ffffff;
    --color-white: #ffffff;

    /* SUCCESS / CONFIRM */
    /*--color-success: #43a847;*/
    --color-success: #43a847;
    --color-success-hover: #39953e;
    --color-success-text: #ffffff;
    --color-success-soft: #f1f8f4;

    /* DANGER / DELETE / CANCEL */
    --color-danger: #ff7e75;
    --color-danger-hover: #fa6b61;
    --color-danger-text: #ffffff;

    /* NEUTRAL BUTTON */
    --color-neutral: #ffffff;
    --color-neutral-hover: #f5f7fa;
    --color-neutral-text: #334155;
    --color-neutral-border: #cbd5e1;

    /**/
    /* =========================================
    SUBSCRIPTION UI
    ========================================= */

    --subscribe-modal-width: 780px;
    --subscribe-modal-padding: 20px;

    --subscribe-plan-height: 105px;
    --subscribe-plan-padding-y: 10px;
    --subscribe-plan-padding-x: 16px;
    --subscribe-plan-gap: 8px;

    --subscribe-plan-radius: 14px;
    --subscribe-list-max-height: 50vh;
    /**/
}


/* GLOBAL FONT FAMILY */
html,
body,
body * {
    font-family: var(--font-main) !important;
}

button,
input,
select,
textarea,
option {
    font-family: var(--font-main) !important;

}

/* =========================================================
   TYPOGRAPHY SIZE TOKENS
========================================================= */

/* MENU / HEADER / NORMAL UI */
.menu,
.menu a,
.header-right,
.header-actions,
.header-user-area,
.public-account-link,
.public-account-name,
.sidebar,
.sidebar a,
button,
input,
select,
textarea,
table {
    font-size: var(--fs-base);
}


/* SMALL / META */
.news-updated-time,
.status-area,
.next-update,
#currentDateTime,
.muted,
.public-auth-subtitle,
.public-plan-description {
    font-size: var(--fs-small);
}


/* TITLE */
.news-title,
.article-title,
.card-title {
    font-size: var(--fs-title);
}


/* MAIN HEADING */
h1,
.page-title,
.briefing-heading h1 {
    font-size: var(--fs-heading);
}


/* =========================================================
   FORM / TABLE / MODAL / CONTENT
========================================================= */

/* FORM + BUTTON */
button,
input,
select,
textarea,
label {
    font-size: var(--fs-base);
}


/* TABLE */
table,
th,
td {
    font-size: var(--fs-base);
}


/* MODAL CONTENT */
.public-auth-box,
.public-subscribe-box,
.public-manage-box,
.public-access-wall-box,
.public-payment-box,
dialog,
.modal,
.modal-content {
    font-size: var(--fs-base);
}

/* =========================================
   MANAGE SUBSCRIPTION - USD ESTIMATE
========================================= */
.public-manage-usd-estimate {
    display: inline-flex;
    align-items: center;

    margin-left: 8px;
    padding: 3px 8px;

    border: 1px solid #d7efdf;
    border-radius: 999px;

    background: #f1faf4;
    color: #239447;

    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;

    white-space: nowrap;
}


/* ARTICLE / CONTENT NORMAL */
.news-summary,
.full-content,
.article-content,
.editorial-content,
.editorial-main {
    font-size: var(--fs-base);
}


/* SMALL HELPER / META */
.public-auth-subtitle,
.public-plan-description,
.public-payment-note,
.muted,
.helper-text,
.form-help,
small {
    font-size: var(--fs-small);
}

/* =========================================================
   GLOBAL BUTTON COLORS
   Public + Editorial
========================================================= */
#publicSubscribeConfirm,

.public-auth-submit {
    background: var(--color-success) !important;
    border-color: var(--color-success) !important;
    color: var(--color-success-text) !important;
}

#publicSubscribeConfirm:hover,

.public-auth-submit:hover {
    background: var(--color-success-hover) !important;
    border-color: var(--color-success-hover) !important;
}


/* SUCCESS */
.btn-success,
.btn-soft-green,
#newArticle,
#saveArticle,
#generateTranslation {
    background: var(--color-success) !important;
    border-color: var(--color-success) !important;
    color: var(--color-success-text) !important;
}

.btn-success:hover,
.btn-soft-green:hover,
#newArticle:hover,
#saveArticle:hover,
#generateTranslation:hover {
    background: var(--color-success-hover) !important;
    border-color: var(--color-success-hover) !important;
}


/* DANGER */
.btn-danger,
.danger-action,
.delete-tag {
    background: var(--color-danger) !important;
    border-color: var(--color-danger) !important;
    color: var(--color-danger-text) !important;
}

.btn-danger:hover,
.danger-action:hover,
.delete-tag:hover {
    background: var(--color-danger-hover) !important;
    border-color: var(--color-danger-hover) !important;
}


/* NEUTRAL */
.btn-secondary,
.btn-ghost,
#publicSubscribeCancel,
#publicPaymentCancel {
    background: var(--color-neutral) !important;
    border-color: var(--color-neutral-border) !important;
    color: var(--color-neutral-text) !important;
}

.btn-secondary:hover,
.btn-ghost:hover,
#publicSubscribeCancel:hover,
#publicPaymentCancel:hover {
    background: var(--color-neutral-hover) !important;
}
/* =========================================================
   END GLOBAL BUTTON COLORS
   Public + Editorial
========================================================= */

/* REMOVE BLACK FOCUS BORDER ON HEADER MENU */
.menu > ul > li > a:focus,
.menu > ul > li > a:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}