/* =========================================================
   MOBILE - CLEAN FINAL
========================================================= */
@media (max-width: 768px) {

    /* ---------- Base ---------- */
    .container {
        padding-left: 14px;
        padding-right: 14px;
    }

    /* ---------- Briefing heading ---------- */
    .briefing-heading {
        transform: none;
        padding-top: 10px;
    }

    .briefing-top-row {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 8px;
    }

    .briefing-heading .ed {
        font-size: 14px !important;
    }

    .briefing-heading h1,
    .briefing-top-row h1,
    .briefing-top-row h2,
    #executiveBrief {
        font-size: 20px !important;
    }

    /* ---------- Date / Next Update ---------- */
    .info {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 7px 24px 10px !important;
        box-sizing: border-box;
    }

    .info-left,
    .info-right {
        width: 100%;
    }

    #currentDateTime {
        font-size: 11px;
        font-weight: 400;
        white-space: nowrap;
    }

    .status-area {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 7px;
    }

    .status-box {
        width: 24px;
        height: 12px;
    }

    .next-update {
        font-size: 11px;
        font-weight: 400;
        color: #111827;
        white-space: nowrap;
    }

    .info + .divider,
    .divider:has(+ .info) {
        height: 1px !important;
        min-height: 1px !important;
        margin: 10px 0 0 !important;
        border: 0 !important;
        background: #e5e7eb !important;
    }

    /* ---------- Fixed header content offset ---------- */
    .content-area {
        padding-top: 210px !important;
    }

    .news-list,
    #publicArticlesList {
        transform: none !important;
        margin-top: 0 !important;
    }

    /* ---------- Header layout ---------- */

    .running-text {
        display: none !important;
    }

    .header-inner,
    .header-main,
    .header-content,
    .top {
        width: 100% !important;
        max-width: 100% !important;
        flex-wrap: wrap !important;
        box-sizing: border-box;
    }

    /* Logo left aligned */
    .logo {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        display: grid !important;
        place-items: start !important;
        margin: 0 !important;
        padding: 0 !important;
        position: static !important;
        transform: none !important;
    }

    .logo img {
        display: block !important;
        width: 152px !important;
        max-width: 80vw !important;
        height: auto !important;
        margin: 0 !important;
        position: relative !important;
        left: 12px !important;
        top: 6px !important;
        transform: none !important;
    }

    /* Account + flags each on centered row */
    .top > .header-right {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        margin: 7px 0 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    #publicAccount,
    .top > .header-right #publicAccount {
        position: static !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        max-width: max-content !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 4px 6px;
        transform: none !important;
    }

    .public-account-name {
        max-width: 90px;
    }

    .top > .header-right .global-language,
    .global-language {
        position: static !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        gap: 5px;
        margin: 0 auto !important;
        padding: 0 !important;
        transform: none !important;
    }

    .flag-btn {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
    }

    .flag-btn img {
        width: 20px;
        height: 20px;
    }

    /* ---------- Mobile menu ---------- */
    .menu {
        display: none !important;
    }

    .mobile-nav {
        display: block !important;
        width: 100%;
        margin: 4px 0 6px;
    }

    .mobile-nav summary {
        padding: 9px 12px;
        border-top: 1px solid #e2e8ed;
        border-bottom: 1px solid #e2e8ed;
        color: #111827;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        list-style: none;
    }

    .mobile-nav summary::-webkit-details-marker {
        display: none;
    }

    .mobile-nav summary::before {
        content: "☰";
        margin-right: 8px;
    }

    .mobile-nav[open] summary::before {
        content: "×";
    }

    .mobile-nav-list {
        display: flex;
        flex-direction: column;
        padding: 4px 0;
    }

    .mobile-nav-list a {
        padding: 10px 14px;
        border-bottom: 1px solid #edf0f2;
        color: #111827;
        font-size: 13px;
        text-decoration: none;
    }

    .mobile-nav-list a:hover {
        background: #f5f8f6;
        color: #2e9b4f;
    }

    .mobile-nav-list > a,
    #mobileMenuBankDataItem > a {
        font-weight: 600;
    }

    /* ---------- Sector filter ---------- */
    #publicSectorFilters {
        gap: 18px !important;
        margin: 6px 0 2px !important;
        padding: 6px 2px 5px !important;
    }

    #publicSectorFilters .deck-filter {
        height: 29px !important;
        font-size: 12px !important;
    }

    /* ---------- Article list ---------- */
    #publicArticlesList .news-card {
        padding: 13px 2px 14px !important;
    }

    #publicArticlesList .news-title-row {
        align-items: flex-start;
        gap: 5px 7px;
    }

    #publicArticlesList .news-title-link {
        flex: 0 1 auto;
        max-width: 100%;
    }

    #publicArticlesList .news-title {
        font-size: 15px !important;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }

    #publicArticlesList .news-taxonomy {
        max-width: 100%;
        flex-wrap: wrap;
        white-space: normal;
    }

    #publicArticlesList .news-sector-badge,
    #publicArticlesList .news-subsector-badge {
        font-size: 10px !important;
        padding: 2px 7px !important;
    }

    #publicArticlesList .news-updated-time {
        font-size: 9px;
    }

    #publicArticlesList .news-summary {
        max-width: 100%;
        font-size: 12px !important;
        line-height: 1.45;
        overflow-wrap: anywhere;
    }

    /* ---------- Expanded article ---------- */
    #publicArticlesList .news-card.expanded {
        max-width: 100%;
        padding: 16px 2px 24px !important;
    }

    #publicArticlesList .news-card.expanded .news-title {
        font-size: 22px !important;
        line-height: 1.25;
    }

    #publicArticlesList .news-card.expanded .full-content {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        font-size: 14px;
        line-height: 1.65;
    }

    .article-navigation,
    .news-card.article-open .article-navigation,
    #publicArticlesList .news-card.expanded .article-navigation {
        grid-template-columns: 1fr !important;
        gap: 18px;
    }

    .article-nav-left,
    .article-nav-center,
    .article-nav-right {
        padding: 0 !important;
        border-left: 0 !important;
    }

    /* ---------- Data Bank ---------- */
    .databank-layout,
    .databank-container,
    .databank-main {
        display: block;
        grid-template-columns: 1fr !important;
    }

    .databank-sidebar,
    .databank-folders,
    .databank-viewer {
        width: 100% !important;
        max-width: 100% !important;
    }

    .databank-viewer {
        margin-top: 14px;
    }

    .databank-pdf-viewer {
        width: 100%;
        min-height: 60vh;
    }

    /* ---------- Modal common ---------- */
    .public-subscribe-box,
    .public-manage-box,
    .public-access-wall-box {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    box-sizing: border-box;
}

    .public-subscribe-box {
        padding: 18px 16px !important;
    }

    .public-subscribe-actions,
    .public-access-wall-actions {
        gap: 8px;
    }

    #publicSubscribeCancel,
    #publicSubscribeConfirm {
        min-width: 0 !important;
        flex: 1;
    }

    /* =========================================================
       SUBSCRIPTION CARD - ONE FINAL MOBILE LAYOUT
       Requires .public-plan-side to be INSIDE .public-plan-main
       after .public-plan-benefits.
    ========================================================= */

    .public-subscribe-box .public-subscription-plan {
        display: grid !important;
        grid-template-columns: 22px 38px minmax(0, 1fr) !important;
        column-gap: 10px !important;
        row-gap: 0 !important;
        align-items: start !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin-bottom: 10px !important;
        padding: 13px 12px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .public-subscribe-box .public-plan-radio {
        grid-column: 1 !important;
        grid-row: 1 !important;
        align-self: start !important;
        width: 20px !important;
        height: 20px !important;
        margin: 5px 0 0 !important;
    }

    .public-subscribe-box .public-plan-icon {
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: start !important;
        width: 36px !important;
        height: 36px !important;
        margin: 0 !important;
    }

    .public-subscribe-box .public-plan-icon svg {
        width: 18px !important;
        height: 18px !important;
    }

    .public-subscribe-box .public-plan-main {
        grid-column: 3 !important;
        grid-row: 1 !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    .public-subscribe-box .public-plan-name-row {
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 5px !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 0 4px !important;
    }

    .public-subscribe-box .public-plan-name {
        margin: 0 !important;
        font-size: 14px !important;
        line-height: 1.25 !important;
        white-space: normal !important;
    }

    .public-subscribe-box .public-current-plan-badge {
        min-height: 0 !important;
        padding: 2px 6px !important;
        font-size: 9px !important;
        line-height: 1.2 !important;
    }

    .public-subscribe-box .public-plan-description {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 0 6px !important;
        font-size: 10px !important;
        line-height: 1.3 !important;
    }

    .public-subscribe-box .public-plan-benefits {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .public-subscribe-box .public-plan-benefit {
        display: flex !important;
        align-items: flex-start !important;
        gap: 5px !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 10px !important;
        line-height: 1.3 !important;
    }

    .public-subscribe-box .public-plan-check {
        width: 15px !important;
        height: 15px !important;
        flex: 0 0 15px !important;
        font-size: 9px !important;
    }

    /* Reset desktop price rules completely */
    .public-subscribe-box .public-plan-side {
        all: unset !important;
        display: grid !important;
        grid-template-columns: 46px minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        column-gap: 9px !important;
        row-gap: 1px !important;
        align-items: start !important;
        width: 100% !important;
        margin: 9px 0 0 !important;
        padding: 8px 0 0 !important;
        border-top: 1px solid #e6edf1 !important;
        box-sizing: border-box !important;
        font-family: inherit !important;
    }

    .public-subscribe-box .public-plan-duration {
        all: unset !important;
        grid-column: 1 !important;
        grid-row: 1 / span 2 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: max-content !important;
        margin: 0 !important;
        padding: 3px 7px !important;
        border-radius: 999px !important;
        background: #eef9f1 !important;
        color: #2f9e57 !important;
        box-sizing: border-box !important;
        font-family: inherit !important;
        font-size: 9px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }

    .public-subscribe-box .public-plan-price {
        all: unset !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #172033 !important;
        box-sizing: border-box !important;
        font-family: inherit !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }

    .public-subscribe-box .public-plan-payment-note {
        all: unset !important;
        grid-column: 2 !important;
        grid-row: 2 !important;
        display: block !important;
        width: 100% !important;
        margin: 1px 0 0 !important;
        padding: 0 !important;
        color: #7b8798 !important;
        box-sizing: border-box !important;
        font-family: inherit !important;
        font-size: 9px !important;
        line-height: 1.2 !important;
    }

    /* ---------- Footer ---------- */
    .site-footer .footer-inner,
    .footer-inner {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .footer-columns {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .footer-brand {
        max-width: 100% !important;
        margin-bottom: 24px;
    }

    .footer-bottom {
        padding-left: 16px !important;
        padding-right: 16px !important;
        text-align: left !important;
    }

    .footer-legal {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        width: 100% !important;
    }

    .footer-legal > a {
        display: inline-flex !important;
        width: auto !important;
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        font-size: 11px !important;
    }

    .footer-legal-separator {
        display: inline-block !important;
        width: 1px !important;
        height: 14px !important;
        margin: 0 10px !important;
        background: rgba(255,255,255,.35) !important;
        flex: 0 0 1px !important;
    }
}

/* =========================================================
   SMALL MOBILE SUBSCRIPTION
========================================================= */
@media (max-width: 390px) {

    .public-subscribe-box .public-subscription-plan {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        padding: 12px 10px !important;

        overflow: hidden !important;
    }


    .public-subscribe-box .public-plan-main {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;
    }


    /* PRICE setelah Cancel anytime */
    .public-subscribe-box .public-plan-side {
        display: grid !important;

        grid-template-columns:
            46px minmax(0, 1fr) !important;

        grid-template-rows:
            auto auto !important;

        column-gap: 8px !important;
        row-gap: 1px !important;

        width: 100% !important;

        margin: 8px 0 0 !important;
        padding: 7px 0 0 !important;

        border-top: 1px solid #e6edf1 !important;

        position: static !important;

        box-sizing: border-box !important;
    }


    .public-subscribe-box .public-plan-duration {
        grid-column: 1 !important;
        grid-row: 1 / 3 !important;

        margin: 0 !important;

        font-size: 8px !important;
    }


    .public-subscribe-box .public-plan-price {
        grid-column: 2 !important;
        grid-row: 1 !important;

        margin: 0 !important;

        font-size: 13px !important;
        line-height: 1.2 !important;
    }


    .public-subscribe-box .public-plan-payment-note {
        grid-column: 2 !important;
        grid-row: 2 !important;

        margin: 1px 0 0 !important;

        font-size: 8px !important;
        line-height: 1.2 !important;
    }

    /* =========================================================
   FIX PRICE AREA INSIDE SUBSCRIPTION CARD
========================================================= */
@media (max-width: 390px) {

    .public-subscribe-box .public-subscription-plan {
        height: auto !important;
        min-height: max-content !important;
        max-height: none !important;

        overflow: visible !important;
    }

    .public-subscribe-box .public-plan-main {
        display: flow-root !important;

        height: auto !important;
        min-height: max-content !important;
        max-height: none !important;

        overflow: visible !important;
    }

    .public-subscribe-box .public-plan-side {
        position: static !important;

        display: grid !important;
        grid-template-columns: 48px minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;

        width: 100% !important;

        margin: 8px 0 0 !important;
        padding: 8px 0 2px !important;

        clear: both !important;

        border-top: 1px solid #e6edf1 !important;

        box-sizing: border-box !important;
    }

    .public-subscribe-box .public-plan-duration {
        grid-column: 1 !important;
        grid-row: 1 / span 2 !important;
    }

    .public-subscribe-box .public-plan-price {
        grid-column: 2 !important;
        grid-row: 1 !important;

        display: block !important;

        margin: 0 !important;

        font-size: 13px !important;
        line-height: 1.2 !important;
    }

    .public-subscribe-box .public-plan-payment-note {
        grid-column: 2 !important;
        grid-row: 2 !important;

        display: block !important;

        margin: 1px 0 0 !important;
    }
}

}
/* =========================================
   MOBILE - PUBLIC EXECUTIVE BRIEF
========================================= */
@media (max-width: 768px) {

    .public-content-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px;
        width: 100%;
    }

    .public-content-grid > * {
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
    }

    .public-article-search {
        margin: 12px 0 0 !important;
        padding: 14px;
        width: 100%;
        box-sizing: border-box;
    }

}

/* =========================================
   MOBILE - HEADER MENU POSITION
========================================= */
@media (max-width: 768px) {

    .top {
        position: relative !important;
    }

    .mobile-nav {
        position: absolute !important;
        top: 14px;
        right: 10px;

        width: auto !important;
        margin: 0 !important;

        z-index: 1000;
    }

    .mobile-nav summary {
        display: flex;
        align-items: center;

        width: auto;
        padding: 8px 6px !important;

        border: 0 !important;
        background: transparent;

        white-space: nowrap;
    }

    .mobile-nav-list {
        position: absolute;
        top: 100%;
        right: 0;

        width: 220px;

        padding: 4px 0;

        border: 1px solid #e2e8ed;
        background: #ffffff;

        box-shadow: 0 6px 18px rgba(0,0,0,.08);
        z-index: 1001;
    }

}

/* =========================================
   MOBILE - MENU SUBMENU LEVEL 1
========================================= */
@media (max-width: 768px) {

    .mobile-menu-group {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .mobile-menu-group > summary {
        display: flex !important;
        align-items: center;
        justify-content: space-between;

        width: 100% !important;
        padding: 10px 14px !important;

        border: 0 !important;
        border-bottom: 1px solid #edf0f2 !important;

        background: #ffffff;
        color: #111827;

        font-size: 13px;
        font-weight: 600;

        box-sizing: border-box;
        cursor: pointer;
    }

    /* jangan tampilkan hamburger pada submenu */
    .mobile-menu-group > summary::before {
        content: none !important;
        display: none !important;
        margin: 0 !important;
    }

    /* arrow submenu */
    .mobile-menu-group > summary::after {
        content: "\203A";
        margin-left: 10px;
        font-size: 17px;
        line-height: 1;
        transition: transform .15s ease;
    }

    .mobile-menu-group[open] > summary::after {
        transform: rotate(90deg);
    }

    .mobile-submenu {
        background: #f8faf9;
    }

    .mobile-submenu > a {
        display: flex;
        align-items: center;

        width: 100%;
        padding: 9px 14px 9px 28px !important;

        border-bottom: 1px solid #edf0f2;

        color: #111827;
        font-size: 12px;

        box-sizing: border-box;
    }

    .mobile-premium-link {
        gap: 6px;
    }

    #mobileMenuBankDataItem {
        width: 100%;
    }

}