/**
 * jp-versandplattform.css — /de/versandplattform/ design-regression restyle
 *
 * Scope: two sections on the Shipping-2.0 landing page restyled to the
 *        "Update" frames of the JTL-Website-Modules-5 before/after deck.
 *
 *   1. "VERSANDPLATTFORM" post-slider  (section.green, NOT .black)
 *      Figma node 1051:4100  — light-sand box + white rounded cards,
 *      tech-blue eyebrow & numbers, dark-blue heading / titles / body.
 *
 *   2. "Versand & deine GuV" cost-driver grid  (the only
 *      product-management-section that owns a `.grid .basic-br
 *      ul.list-icons`; heading "Das Etikett ist nur ein Teil der
 *      Rechnung" / "Die 5 Kostentreiber im Versand")
 *      Figma nodes 1051:3931 / 1052:3689 — same design language:
 *      light-sand box, white rounded cards, tech-blue numbers + arrow
 *      links, dark-blue titles.
 *
 *   3. "Tarife der Carrier" country-tabbed price table (section.green.black)
 *      Figma node 1051:4113 ("Lookalike: Preise + Pill menu") whose Update
 *      is the "Tabelle Desktop 1440" component 1083:9770 — flips the dark
 *      widget (#142830 container, teal-gradient table header) to the light
 *      design: tech-blue eyebrow, dark-blue heading, white pill-bar with a
 *      tech-blue active pill, white rounded table with a solid dark-blue
 *      header row.
 *
 * Page:  https://dev-jtl-khoa.betterscale.dev/de/versandplattform/
 * Figma: https://www.figma.com/design/NGhRnXhpI8bbeDQhA9mUzD/JTL-Website-Modules-5?node-id=1051-4100
 *
 * Design tokens (from get_design_context):
 *   --jtl-light-sand  #eeeee7   box background
 *   --jtl-tech-blue   #2722f8   eyebrow + numbers + arrow links
 *   --jtl-dark-blue   #0b1b45   headings, titles, body
 *
 * Body-scoped to page-id-318824 + the section instance class so the rules
 * cannot leak to the same widgets on other pages. The teal #05C7D1 numbers
 * come from per-instance inline `.utils-*{color}` rules (specificity 0,1,0),
 * so !important is used on the colour swaps to win deterministically.
 */

/* ============================================================= *
 * 1) VERSANDPLATTFORM post-slider  (Figma 1051:4100)
 * ============================================================= */
body.page-id-318824 section.green:not(.black) .decorated-container {
    background: #eeeee7 !important;       /* dark-blue #0b1b45 → light sand */
}
body.page-id-318824 section.green:not(.black) .decorated-container-heading__over-title {
    color: #2722f8 !important;            /* eyebrow → tech-blue */
}
body.page-id-318824 section.green:not(.black) .decorated-container-heading__title,
body.page-id-318824 section.green:not(.black) .decorated-container-heading__title * {
    color: #0b1b45 !important;            /* heading → dark-blue (was white on dark box) */
}
body.page-id-318824 section.green:not(.black) .decorated-container-heading__description {
    color: #0b1b45 !important;
}
/* cards: dark tertiary → white rounded */
body.page-id-318824 section.green:not(.black) .swiper-slide .bg-tertiary {
    background: #fff !important;
    border: 0 !important;
    border-radius: 16px !important;
}
body.page-id-318824 section.green:not(.black) .swiper-slide .card-body > span {
    color: #2722f8 !important;            /* card number 01-08 → tech-blue */
}
body.page-id-318824 section.green:not(.black) .swiper-slide .card-body h3 {
    color: #0b1b45 !important;
}
body.page-id-318824 section.green:not(.black) .swiper-slide .card-body p {
    color: #0b1b45 !important;
}

/* ============================================================= *
 * 2) Versand & deine GuV — 5 Kostentreiber grid  (Figma 1052:3689)
 * ============================================================= */
body.page-id-318824 section.product-management-section:has(.grid .basic-br ul.list-icons) .col-lg-12 {
    background: #eeeee7;                  /* wrap section content in light-sand box */
    border-radius: 24px;
    padding: 48px 44px;
}
body.page-id-318824 section.product-management-section:has(.grid .basic-br ul.list-icons) .grid .basic-br {
    border-radius: 16px !important;       /* card 46px → 16px to match Figma */
}
body.page-id-318824 section.product-management-section:has(.grid .basic-br ul.list-icons) .grid .basic-br > span {
    color: #2722f8 !important;            /* card number 01-05 → tech-blue (was teal) */
}
body.page-id-318824 section.product-management-section:has(.grid .basic-br ul.list-icons) .grid .basic-br h3 {
    color: #0b1b45 !important;            /* card title → dark-blue (was grey #333) */
}
/* footer "→ <label>" links → tech-blue arrow to match Figma */
body.page-id-318824 section.product-management-section:has(.grid .basic-br ul.list-icons) .grid .basic-br ul.list-icons li,
body.page-id-318824 section.product-management-section:has(.grid .basic-br ul.list-icons) .grid .basic-br ul.list-icons .list-icon {
    color: #2722f8 !important;
}

/* mobile: tighten the sand-box padding so cards keep their width */
@media (max-width: 767px) {
    body.page-id-318824 section.product-management-section:has(.grid .basic-br ul.list-icons) .col-lg-12 {
        padding: 28px 18px;
        border-radius: 18px;
    }
}

/* ============================================================= *
 * 3) Tarife der Carrier — country-tabbed price table  (Figma 1083:9770)
 *    sec8 = the only `section.green.black`. Dark widget -> light design.
 * ============================================================= */
/* container: dark teal #142830 -> transparent (sits on the page bg) */
body.page-id-318824 section.green.black .decorated-container,
body.page-id-318824 section.green.black .decorated-container-wrapper { background: transparent !important; }
body.page-id-318824 section.green.black .decorated-container-square-overlay { display: none !important; }
/* heading: eyebrow tech-blue, title + copy dark-blue (were white on dark) */
body.page-id-318824 section.green.black .decorated-container-heading__over-title { color: #2722f8 !important; }
body.page-id-318824 section.green.black .decorated-container-heading__title,
body.page-id-318824 section.green.black .decorated-container-heading__title * { color: #0b1b45 !important; }
body.page-id-318824 section.green.black .decorated-container-heading__description { color: #0b1b45 !important; }
/* footer disclaimer / any tertiary copy -> dark */
body.page-id-318824 section.green.black .decorated-container-items-wrapper .text-tertiary { color: #0b1b45 !important; }

/* pill bar: white rounded container */
body.page-id-318824 section.green.black .btn-wrapper {
    background: #fff !important;
    border-radius: 46px !important;
    padding: 6px 18px !important;
    display: flex !important;
    flex-wrap: wrap;      /* mobile/tablet: wrap gracefully */
    gap: 6px;
    box-shadow: 0 6px 20px rgba(11, 27, 69, .06);
}
/* desktop: single row (Figma) with the pills spread to fill the full bar
   width — leftover space divided evenly between them via space-between */
@media (min-width: 1200px) {
    body.page-id-318824 section.green.black .btn-wrapper {
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
    }
}
/* pills — the active state's white fill is set by a high-specificity
   class-only theme rule, so the ID ancestor `#content` (the theme's MAIN
   wrapper) is required here to win deterministically: an ID outranks any
   number of classes. */
#content section.green.black .btn-wrapper a.basic-br.outline-btn.btn.btn-outline-tertiary {
    color: #0b1b45 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    /* tighten so all 9 country pills sit on ONE row (Figma single-row menu);
       theme default is 24px pad + 8px margin which forces a 2nd row */
    padding-left: 14px !important;
    padding-right: 14px !important;
    margin: 0 !important;
    white-space: nowrap !important;
}
#content section.green.black .btn-wrapper a.basic-br.outline-btn.btn.btn-outline-tertiary.active {
    color: #fff !important;
    background: #2722f8 !important;
    background-color: #2722f8 !important;
    border: 0 !important;
}

/* table: white rounded card, solid dark-blue header, dark-blue body text */
body.page-id-318824 section.green.black .table-wrap-producs {
    background: #fff !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(11, 27, 69, .08) !important;
    overflow: hidden;
    border: 0 !important;
}
body.page-id-318824 section.green.black table.table { border: 0 !important; }
body.page-id-318824 section.green.black table.table thead tr {
    background-image: none !important;     /* drop the teal gradient */
    background: #0b1b45 !important;
}
/* Figma 1083:9802 — header column labels are light-blue #89d2ff, not white */
body.page-id-318824 section.green.black table.table thead th {
    color: #89d2ff !important;
    -webkit-text-fill-color: #89d2ff !important;
    border: 0 !important;
}
body.page-id-318824 section.green.black table.table tbody td { color: #0b1b45 !important; border-color: transparent !important; }
body.page-id-318824 section.green.black table.table tbody tr { border-bottom: 1px solid #eef0f4 !important; }
body.page-id-318824 section.green.black table.table tbody tr:last-child { border-bottom: 0 !important; }

/* ============================================================= *
 * Eyebrow fix (slider + Tarife) — the `.decorated-container-heading__
 * over-title` is painted with a TEAL gradient via `background-clip:text`
 * + `-webkit-text-fill-color:transparent`, so a plain `color` swap is
 * invisible and it renders teal. Figma 1083:9774 / 1052:* specify a SOLID
 * tech-blue #2722f8 eyebrow, so the gradient-text is disabled here and the
 * fill set explicitly. The `#content` ID ancestor (theme MAIN wrapper) is
 * required to outrank the theme's gradient rule. (The GuV eyebrow uses a
 * different class with a normal fill and is already correct.)
 * ============================================================= */
#content section.green .decorated-container-heading__over-title {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: #2722f8 !important;
    color: #2722f8 !important;
}

/* ============================================================= *
 * "Was Versandplattformen abdecken — im Vergleich" coverage bars.
 *
 * The three coverage pills (.bar-1 / .bar-2 / .bar-5 > div) are styled
 * ON DEV via the page's per-instance `_wpb_post_custom_css`, but that
 * postmeta is EMPTY on prod — so on prod the pills render as bare,
 * background-less text and the "bars" are invisible. These rules port
 * the dev styling into the theme override (restyled to the Figma
 * 1079-9649 JTL ramp) so the bars render identically on prod, scoped to
 * the page so nothing leaks. Mirrors versandplattform-comparison-table
 * -restyle.php (which only mutates the dev postmeta).
 * ============================================================= */
body.page-id-318824 .table-wrap-shipping-plattform {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
}
body.page-id-318824 .table-wrap-shipping-plattform .table {
    background: transparent;
    margin-bottom: 0;
}
body.page-id-318824 .table-wrap-shipping-plattform tr td {
    vertical-align: middle;
}
body.page-id-318824 .table-wrap-shipping-plattform .bar-1 div {
    background: #89d2ff;
    color: #0b1b45;
    font-size: 12px;
    border-radius: 8px;
    padding: 4px 10px;
    width: 100%;
    min-height: 24px;
    display: flex;
    align-items: center;
}
body.page-id-318824 .table-wrap-shipping-plattform .bar-2 div {
    background: #2722f8;
    color: #ffffff;
    font-size: 12px;
    border-radius: 8px;
    padding: 4px 10px;
    width: 100%;
    min-height: 24px;
    display: flex;
    align-items: center;
}
body.page-id-318824 .table-wrap-shipping-plattform .bar-5 div {
    background: #fb581f;
    color: #0b1b45;
    font-size: 12px;
    border-radius: 8px;
    padding: 4px 10px;
    width: 100%;
    min-height: 24px;
    display: flex;
    align-items: center;
}