/* ==========================================================================
   Enago Indonesia — enago.jp-style skin for the "Compare Services" table.
   Loaded ONLY on index.htm, AFTER css/compare-services.css, and overrides
   it: pale-pink pill tab bar whose red active pill overlaps ONE white
   panel; inside it the plans are flat columns split by vertical dividers
   (not separate cards), with bordered price boxes, a ribbon badge on the
   price box, green check lists and blue text links. Content unchanged.
   Other pages keep the base compare-services.css look — do not add this
   file to them.
   ========================================================================== */

/* ---- tab bar, exactly like the enago.jp home page: a WHITE outer pill
   with a soft shadow wraps the pale-pink bar; the three tabs split it in
   equal segments and the active one is a solid red pill. The bar is
   1000px wide on desktop and overlaps the top edge of the panel below ---- */
.ec-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    width: 1000px;
    max-width: 100%;
    height: auto;
    background: #FFFFFF;
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    border-radius: 999px;
    margin: 0 auto -36px;
    position: relative;
    z-index: 2;
}

.ec-tabs-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 56px;
    padding: 0;
    background: #FCEDEF;
    border: none;
    border-radius: 999px;
    box-shadow: none;
}

.ec-tab {
    padding: 12px 20px;
    min-width: 0;
    flex: 1 1 0;
    height: 56px;
    color: #1D1D1D;
    border-radius: 999px;
    font-weight: 600;
    font-size: 18px;
    filter: none;
}

.ec-tab:hover {
    background: rgba(219, 47, 40, 0.06);
}

.ec-tab.is-active {
    background: #DB2F28;
    color: #FFFFFF;
    font-weight: 700;
}

/* ---- panels: ONE white rounded card holds every tab's content ---- */
.ec-panels {
    margin-top: 0;
    background: #FFFFFF;
    border: 1px solid #EFEFEF;
    border-radius: 32px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
    padding: 76px 4px 30px;
}

.ec-grid {
    gap: 0;
}

/* ---- columns: flat, separated by vertical divider lines ---- */
.ec-col {
    flex: 1 1 0;
    max-width: none;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 8px 28px 28px;
}

.ec-col+.ec-col {
    border-left: 1px solid #E5E5E5;
    /* the divider fades out toward both ends */
    border-image: linear-gradient(to bottom, rgba(229, 229, 229, 0), #E5E5E5 18%, #E5E5E5 82%, rgba(229, 229, 229, 0)) 1;
}

/* featured column: enago.jp has no card highlight — keep only the POPULAR
   tag, restyled as the yellow-outlined pill badge (like JP's 「2名体制」) */
.ec-col-featured {
    border-top: none;
    padding: 8px 28px 28px;
}

.ec-col-featured .ec-content {
    padding: 0;
}

.ec-col-featured::before {
    top: 12px;
    right: 24px;
    left: auto;
    transform: none;
    background: #FFFFFF;
    color: #283341;
    border: 1px solid #E8C51D;
    font-weight: 700;
    line-height: 20px;
    padding: 2px 14px;
    border-radius: 999px;
    height: auto;
}

/* pink gradient from the old card design — gone in the JP layout */
.ec-gradient-bg {
    display: none;
}

/* the inline <hr> between price and checklist is redundant now that the
   price sits in its own bordered box */
.enago-compare .ec-panel hr {
    display: none;
}

/* column header: icon stacked above the title, JP style */
.ec-col-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px;
}

.ec-icon {
    flex: 0 0 auto;
    width: 48px;
}

.ec-title {
    color: #1D1D1D !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 32px !important;
}

/* ---- price: bordered rectangle box with the price centered (JP) ---- */
.ec-price-block {
    margin: 18px 0 26px;
    position: relative;
    background: #F5F5F5;
    border: 1px solid #D9D9D9;
    padding: 26px 16px;
}

/* the "Rp" / "Jt" units: small and regular weight, like the JP
   1単語 5.5 円〜 (only the number stays big & bold) */
.ec-price-main .ec-price-small {
    font-size: 24px;
    font-weight: 400;
}

/* desktop (3-across): grid + subgrid shares the row heights across the
   three columns, so the headers, descriptions, PRICE BOXES, checklists
   and links all start on exactly the same line at any viewport width */
@media (min-width: 992px) {
    [data-ec-panel="english-editing"] .ec-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    [data-ec-panel="english-editing"] .ec-col {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 5;
    }

    /* the featured column wraps its content in .ec-content — flatten it
       so its children join the same shared rows */
    [data-ec-panel="english-editing"] .ec-col-featured .ec-content {
        display: contents;
    }

    /* fallback alignment for browsers without subgrid support */
    [data-ec-panel="english-editing"] .ec-col-head {
        min-height: 126px;
    }

    [data-ec-panel="english-editing"] .ec-col .lv2-text {
        min-height: 110px;
    }
}

.ec-price-main {
    font-size: 34px;
}

/* price badge (e.g. Launch Price) = the blue ribbon pinned to the top edge
   of the JP price box (like 「新規お客様は20%割引」) */
.ec-price-block .ec-badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: #ffffe0;
    border: 1px solid #ecec00;
    color: #16466E;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    height: auto;
    padding: 2px 14px;
}

/* ---- CTA: blue underlined text link with chevron, like the JP
   「〇〇の詳細へ >」 links at the bottom of each column ---- */
.ec-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    line-height: 24px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #0000EE;
    text-decoration: underline;
    font-size: 16px;
    font-weight: 500;
    transition: color .2s ease;
}

.ec-btn:after {
    content: "";
    display: inline-block;
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    transform: rotate(45deg);
    margin-left: 8px;
}

.ec-btn:hover,
.ec-btn:focus {
    text-decoration: none;
    color: #0000EE;
    background: transparent;
}

.ec-btn-filled,
.ec-btn-outline {
    background: transparent;
    color: #0000EE;
}

.ec-btn-filled:hover,
.ec-btn-filled:focus,
.ec-btn-outline:hover,
.ec-btn-outline:focus {
    background: transparent;
    color: #0000EE;
    opacity: 1;
}

/* neutralize the base "dim the filled button when a sibling is hovered"
   effect — buttons are plain links in this skin */
.ec-grid:has(.ec-btn:hover) .ec-btn-filled:not(:hover) {
    background: transparent;
    color: #0000EE;
}

/* "Bandingkan Semua Layanan" under the table: a red CTA button like the
   home page's other CTAs (hero "Dapatkan Penawaran Gratis" / .vh-btn) */
.ec-compare-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #d52b1e;
    color: #FFFFFF;
    border-radius: 5px;
    padding: 12px 28px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.2px;
    text-decoration: none;
    transition: background .2s ease;
}

.ec-compare-link:hover,
.ec-compare-link:focus,
.ec-compare-link:active {
    background: #b71d11;
    color: #FFFFFF;
    text-decoration: none;
}

/* no chevron on the button — matches the other CTAs */
.ec-compare-link:after {
    display: none;
}

/* ...and shown only while the Editing Naskah tab is active — hide its
   wrapper row whenever another tab's panel is the active one (covers both
   the old .ec-compare-link and the current .new_mid_cta class) */
.enago-compare:not(:has([data-ec-panel="english-editing"].is-active))+div:has(.ec-compare-link, .new_mid_cta) {
    display: none;
}

/* feature checklist — green ticks, dark 15px text (JP) */
.ec-list li {
    padding-left: 30px;
    margin-bottom: 14px;
    font-size: 15px;
    line-height: 22px;
    font-weight: 400;
    color: #283341;
}

.ec-list li:before {
    left: 4px;
    top: 4px;
    width: 6px;
    height: 12px;
}

/* Checklist section header titles without checkmark */
.ec-list .ec-list-title,
.ec-list li.ec-list-title,
.ec-list li.ec-title,
.ec-list li.no-check {
    padding-left: 0 !important;
    font-weight: 600;
    margin-bottom: 10px !important;
}

.ec-list .ec-list-title:first-child,
.ec-list li.ec-list-title:first-child,
.ec-list li.ec-title:first-child,
.ec-list li.no-check:first-child {
    margin-top: 0 !important;
}

.ec-list .ec-list-title:not(:first-child),
.ec-list li.ec-list-title:not(:first-child),
.ec-list li.ec-title:not(:first-child),
.ec-list li.no-check:not(:first-child) {
    margin-top: 18px !important;
}

/* "none" note under a group heading (e.g. "Tidak ada di halaman layanan
   ini.") — plain muted line, no green check */
.ec-list li.ec-muted {
    padding-left: 0;
    color: #7A7A7A;
}

.ec-list li.ec-muted:before {
    display: none;
}

.ec-list li.ec-list-title:before,
.ec-list li.ec-title:before,
.ec-list li.no-check:before {
    display: none !important;
}

/* ---- research-impact / translation single-service panels: flat inside
   the shared white panel (their own border is gone) ---- */
[data-ec-panel="research-impact"] .ec-single,
[data-ec-panel="translation"] .ec-single {
    background: transparent;
    border: none;
    border-radius: 0;
}

/* ---- publication-support panel: drop its own bordered container and use
   the same flat columns + divider as the editing panel ---- */
[data-ec-panel="publication-support"] .ec-grid {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}

[data-ec-panel="publication-support"] .ec-col {
    flex: 1 1 0;
    padding: 8px 28px 28px;
}

[data-ec-panel="publication-support"] .ec-col:first-child {
    border-right: none;
}

/* links right-aligned AND at the BOTTOM of each column (below the
   checklist), matching the editing panel — the columns stretch to equal
   height, so both links share the same bottom line */
[data-ec-panel="publication-support"] .ec-btn,
[data-ec-panel="translation"] .ec-btn {
    align-self: flex-end;
    order: 10;
    margin-top: auto;
    margin-bottom: 0;
}

/* ---- single full-width service (e.g. Translation) ---- */
.ec-single {
    padding: 8px 28px 28px;
}

.ec-single-cta {
    flex: 0 0 auto;
    max-width: none;
}

/* ---- responsive ---- */
@media (max-width: 991px) {

    /* restate the full-width stack: the skin's desktop `flex: 1 1 0`
       loads after the base file's mobile rule and would win otherwise,
       squeezing the columns side by side */
    .ec-col {
        flex: 1 1 100%;
        border-bottom: none;
    }

    /* publication-support needs the same restatement at ITS specificity:
       its `flex: 1 1 0` rule above is unscoped and out-specifies the
       generic .ec-col stack rule, keeping the two packs side by side on
       phones — this wins by matching the selector inside the media query */
    [data-ec-panel="publication-support"] .ec-col {
        flex: 1 1 100%;
    }

    /* stacked: the vertical divider becomes a horizontal one, fading
       toward the left and right ends */
    .ec-col+.ec-col {
        border-left: none;
        border-top: 1px solid #E5E5E5;
        border-image: linear-gradient(to right, rgba(229, 229, 229, 0), #E5E5E5 18%, #E5E5E5 82%, rgba(229, 229, 229, 0)) 1;
        padding-top: 28px;
        margin-top: 4px;
    }
}

@media (max-width: 767px) {

    /* JP-style mobile: the tab bar becomes a red dropdown — collapsed it
       shows only the active tab as a full-width red bar with a caret;
       tapping it reveals the other tabs (toggle script lives in index.htm
       next to the compare-services.js include) */
    .ec-tabs {
        display: block;
        overflow: visible;
        width: auto;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
        margin: 0 0 20px;
        z-index: 5;
    }

    .ec-tabs-inner {
        display: block;
        width: 100%;
        min-width: 0;
        height: auto;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
    }

    .ec-tab {
        display: none;
        width: 100%;
        min-width: 0;
        flex: 0 0 auto;
        height: 52px;
        padding: 10px 44px 10px 18px;
        font-size: 16px;
        border-radius: 8px;
        position: relative;
    }

    /* collapsed: only the active tab shows, as the red select bar */
    .ec-tab.is-active {
        display: flex;
    }

    .ec-tab.is-active:after {
        content: "";
        position: absolute;
        right: 18px;
        top: 50%;
        width: 9px;
        height: 9px;
        border-right: 2px solid #FFFFFF;
        border-bottom: 2px solid #FFFFFF;
        transform: translateY(-70%) rotate(45deg);
        transition: transform .2s ease;
    }

    /* expanded: every option visible as a row */
    .ec-tabs.is-open .ec-tab {
        display: flex;
        margin-bottom: 8px;
        background: #FFFFFF;
        color: #1D1D1D;
        border: 1px solid #E5E5E5;
    }

    .ec-tabs.is-open .ec-tab.is-active {
        background: #DB2F28;
        color: #FFFFFF;
        border-color: #DB2F28;
    }

    .ec-tabs.is-open .ec-tab.is-active:after {
        transform: translateY(-30%) rotate(225deg);
    }

    .ec-panels {
        padding: 20px 4px 20px;
    }

    /* keep a single divider between the stacked publication columns */
    [data-ec-panel="publication-support"] .ec-col:first-child {
        border-bottom: none;
        padding-bottom: 28px;
        margin-bottom: 0;
    }
}