/**
 * jp-799-demo-button-bg.css — "Demo starten" / "Start Demo" secondary button bg.
 *
 * Ticket: JP-799 — the "Demo starten" / "Start Demo" buttons have an incorrect
 *         background colour (a solid WHITE fill).
 * Pages:  https://b376u019-a.myrdbx.io/de/retourenmanagement-software/#funktionen (226255)
 *         https://b376u019-a.myrdbx.io/en/returns-management-software/#functions   (262940)
 * Figma:  JTL Website Modules → Buttons node 1428:4362 (Secondary): TRANSPARENT
 *         background + 2px Dark-Blue (#0b1b45) border + Dark-Blue label.
 *
 * JP-557 gave the secondary buttons their 2px Dark-Blue outline + label, but the
 * hero secondary keeps the WHITE fill that JP-442 pinned
 * (`jp-442-retourenmanagement-preise.css`: background-color:#ffffff on
 * `body.page-id-226255 … section.hero-product-section … a…:not(.has-wawi-gradient)`),
 * so it still reads as a white pill on the Light-Sand section instead of the
 * design's transparent fill. Force it transparent.
 *
 * We mirror JP-442's exact hero-secondary selector (adding the EN page + a second
 * page-id, so specificity ≥ JP-442's 0,5,3) and rely on the later alphabetical
 * load order (jp-799 > jp-442 / jp-557) to win. The orange primary carries
 * .has-wawi-gradient and is excluded, so it keeps its JTL-Orange fill.
 * Page-scoped (rule 4b).
 */

/* Hero secondary — override JP-442's white fill → transparent. */
body:is(.page-id-226255, .page-id-262940):not(.home)
    section.hero-product-section .product-buttons-group
    a.product-button-group__button--with-icon:not(.has-wawi-gradient) {
    background-color: transparent !important;
    background-image: none !important;
}

/* Prices / #funktionen secondary (the .is-inverted white pill) — transparent too. */
body:is(.page-id-226255, .page-id-262940)
    .product-button-group__button--with-icon.is-inverted:not(.has-wawi-gradient) {
    background-color: transparent !important;
    background-image: none !important;
}

/* HOVER: the widget inverts the secondary button to a Dark-Blue fill + white
   label (ProductButtonWithIcon/style.css). Our transparent rule above was
   winning on :hover too, leaving white text on the sand. Restore the Dark-Blue
   fill on hover so the invert reads correctly (white label on #0b1b45). */
body:is(.page-id-226255, .page-id-262940):not(.home)
    section.hero-product-section .product-buttons-group
    a.product-button-group__button--with-icon:not(.has-wawi-gradient):hover,
body:is(.page-id-226255, .page-id-262940)
    .product-button-group__button--with-icon.is-inverted:not(.has-wawi-gradient):hover {
    background-color: #0b1b45 !important;
    background-image: none !important;
}
/* …and the label to white on hover (JP-557 pins it Dark-Blue in every state, so
   without this the text would be Dark-Blue on the Dark-Blue hover fill). */
body:is(.page-id-226255, .page-id-262940):not(.home)
    section.hero-product-section .product-buttons-group
    a.product-button-group__button--with-icon:not(.has-wawi-gradient):hover,
body:is(.page-id-226255, .page-id-262940):not(.home)
    section.hero-product-section .product-buttons-group
    a.product-button-group__button--with-icon:not(.has-wawi-gradient):hover .product-button-group__button--with-icon__text,
body:is(.page-id-226255, .page-id-262940):not(.home)
    section.hero-product-section .product-buttons-group
    a.product-button-group__button--with-icon:not(.has-wawi-gradient):hover span,
body:is(.page-id-226255, .page-id-262940):not(.home)
    section.hero-product-section .product-buttons-group
    a.product-button-group__button--with-icon:not(.has-wawi-gradient):hover i,
body:is(.page-id-226255, .page-id-262940)
    .product-button-group__button--with-icon.is-inverted:not(.has-wawi-gradient):hover,
body:is(.page-id-226255, .page-id-262940)
    .product-button-group__button--with-icon.is-inverted:not(.has-wawi-gradient):hover .product-button-group__button--with-icon__text,
body:is(.page-id-226255, .page-id-262940)
    .product-button-group__button--with-icon.is-inverted:not(.has-wawi-gradient):hover span,
body:is(.page-id-226255, .page-id-262940)
    .product-button-group__button--with-icon.is-inverted:not(.has-wawi-gradient):hover i {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}