/*
 * JP-469 hilfecenter webinare restyle — GLOBAL (specificity-preserving).
 *
 * Originally every selector was anchored on `body.page-id-85338`, scoping the
 * restyle to the DE /de/hilfecenter/webinare/ page. That anchor was NOT just a
 * scope: it contributed one class of specificity that these rules need to win
 * over the base pagebuilder widget's own !important styling of the shared card
 * classes (.swiper-slide__top-heading, .swiper-slide__description,
 * .bordered-transparent-link, .decorated-container-heading__over-title, ...).
 *
 * To apply the restyle everywhere the webinar section renders (the DE page, the
 * EN twin 263093, any future page) WITHOUT changing the cascade, the anchor is
 * swapped to `body.wp-theme-jtl` — the active-theme class present on every
 * page's <body>. Same specificity as body.page-id-85338 (body + one class), so
 * behaviour on the DE page is unchanged; it now also matches every other page.
 * Simply deleting the anchor (as an earlier attempt did) drops one class of
 * specificity and the base !important rules win, reverting the card to the
 * legacy teal/orange design — do not do that.
 *
 * This file is glob-loaded site-wide by mu-plugin 10-jtl-redesign-overrides.php.
 */


body.wp-theme-jtl section.webinare-slider-jtl-section .decorated-container-inner .decorated-container-wrapper .decorated-container-heading__over-title,
body.wp-theme-jtl section.webinare-slider-jtl-section .decorated-container-inner .decorated-container-wrapper .decorated-container-heading__over-title * {
    color: #2722F8 !important;
    -webkit-text-fill-color: #2722F8 !important;
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    font-family: Inter, sans-serif !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    line-height: 24px !important;
    letter-spacing: 0.9px !important;
    text-transform: uppercase !important;
}

body.wp-theme-jtl section.webinare-slider-jtl-section .mt-5.mb-5.white.text-tertiary,
body.wp-theme-jtl section.webinare-slider-jtl-section .mt-5.mb-5.white.text-tertiary h5,
body.wp-theme-jtl section.webinare-slider-jtl-section .mt-5.mb-5.white.text-tertiary p,
body.wp-theme-jtl section.webinare-slider-jtl-section .mt-5.mb-5.white.text-tertiary strong {
    color: #0b1b45 !important;
    -webkit-text-fill-color: #0b1b45 !important;
}
body.wp-theme-jtl section.webinare-slider-jtl-section .mt-5.mb-5.white.text-tertiary h5,
body.wp-theme-jtl section.webinare-slider-jtl-section .mt-5.mb-5.white.text-tertiary h5 strong {
    font-family: "Kurdis Wide", Kurdis, Inter, sans-serif !important;
    font-weight: 700 !important;
    font-size: 20px !important;
    line-height: 28px !important;
}
body.wp-theme-jtl section.webinare-slider-jtl-section .mt-5.mb-5.white.text-tertiary p {
    font-family: Inter, sans-serif !important;
    font-size: 16px !important;
    line-height: 24px !important;
}
body.wp-theme-jtl section.webinare-slider-jtl-section .mt-5.mb-5.white.text-tertiary a {
    color: #2722F8 !important;
    -webkit-text-fill-color: #2722F8 !important;
    text-decoration: underline !important;
}

body.wp-theme-jtl #webinare-rebuild-filter-nav select.sf-input-select,
body.wp-theme-jtl #webinare-rebuild-filter-nav .chosen-container-single .chosen-single,
body.wp-theme-jtl #webinare-rebuild-filter-nav .chosen-container .chosen-drop,
body.wp-theme-jtl #webinare-rebuild-filter-nav .sf-field-search input.sf-input-text {
    background-color: transparent !important;
    background-image: none !important;
    border: 2px solid #2722F8 !important;
    border-radius: 24px !important;
    color: #0b1b45 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

body.wp-theme-jtl #webinare-rebuild-filter-nav select.sf-input-select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    padding: 12px 44px 12px 22px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%232722F8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1.5l5 5 5-5'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 18px center !important;
    background-size: 12px 8px !important;
    font-family: Inter, sans-serif !important;
    font-size: 16px !important;
    line-height: 24px !important;
}

body.wp-theme-jtl #accordion-webinare .accordion-row,
body.wp-theme-jtl #accordion-webinare .accordion-row:first-child {
    border-radius: 0 !important;
    border-top: 1px solid #2722F8 !important;
}
body.wp-theme-jtl #accordion-webinare .accordion-row:last-child {
    border-bottom: 1px solid #2722F8 !important;
}

body.wp-theme-jtl #webinare-rebuild-filter-section .pagination .page-item .page-link.prev {
    width: 46px !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    background-color: #ffffff !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14' fill='none' stroke='%230b1b45' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><line x1='1' y1='7' x2='15' y2='7'/><polyline points='6,2 1,7 6,12'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 16px 14px !important;
}
body.wp-theme-jtl #webinare-rebuild-filter-section .pagination .page-item .page-link.prev > span {
    display: none !important;
}

body.wp-theme-jtl section.webinare-slider-jtl-section .card-mobile-webinar.swiper-slide {
    background: #ffffff !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 16px rgba(11, 27, 69, 0.08) !important;
    /* Column layout so the description fills the equal-height card and the CTA
       can be pinned to the bottom (margin-top:auto below). Without this the CTA
       floats right under each card's text, and since the cards carry different
       amounts of copy the buttons landed at different heights. */
    display: flex !important;
    flex-direction: column !important;
}

/* NO CSS card-width override here. The webinar slider is a real Swiper carousel
   (pc_slider_view): Swiper sizes each .swiper-slide from its slidesPerView, and
   forcing a min-width/width in CSS fought that math — the cards rendered wider
   than the slot Swiper reserved, so on the 4-up page (403809) card 4 overlapped
   and the next/prev arrows had nothing to scroll (they were stuck). The card is
   given room the RIGHT way, by the widget's column count: 3-up makes each card
   ~378px, wide enough that the large date (webinar-day + webinar-months) stays
   on one line and never collides with the bottom title. See the companion DB
   migration scripts/db/jp469-customer-service-webinare-slider-3up.php, which
   sets that slider's column_count "four" → "three". (2026-09-08) */

body.wp-theme-jtl section.webinare-slider-jtl-section .card-mobile-webinar .swiper-slide__top-heading {
    background: #2722F8 !important;
}
body.wp-theme-jtl section.webinare-slider-jtl-section .card-mobile-webinar .swiper-slide__top-heading::before,
body.wp-theme-jtl section.webinare-slider-jtl-section .card-mobile-webinar .swiper-slide__top-heading::after {
    background: none !important;
    background-image: none !important;
    display: none !important;
}
body.wp-theme-jtl section.webinare-slider-jtl-section .card-mobile-webinar .swiper-slide__image {
    background: transparent !important;
    background-image: none !important;
}
body.wp-theme-jtl section.webinare-slider-jtl-section .card-mobile-webinar .webinar-overlay {
    display: none !important;
}

body.wp-theme-jtl section.webinare-slider-jtl-section .card-mobile-webinar .webinar-day,
body.wp-theme-jtl section.webinare-slider-jtl-section .card-mobile-webinar .webinar-months,
body.wp-theme-jtl section.webinare-slider-jtl-section .card-mobile-webinar .webinar-year {
    font-family: "Kurdis Wide", Kurdis, Inter, sans-serif !important;
    font-weight: 700 !important;
    color: #ffffff !important;
}
body.wp-theme-jtl section.webinare-slider-jtl-section .card-mobile-webinar .webinar-name,
body.wp-theme-jtl section.webinare-slider-jtl-section .card-mobile-webinar .webinar-time {
    color: #ffffff !important;
}

body.wp-theme-jtl section.webinare-slider-jtl-section .card-mobile-webinar .swiper-slide__description {
    background-color: #ffffff !important;
    color: #0b1b45 !important;
    padding: 24px !important;
    /* Fills the card below the blue header and is itself a column, so the CTA's
       margin-top:auto has somewhere to push to. */
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
}
body.wp-theme-jtl section.webinare-slider-jtl-section .card-mobile-webinar .swiper-slide__description .text-description,
body.wp-theme-jtl section.webinare-slider-jtl-section .card-mobile-webinar .swiper-slide__description span,
body.wp-theme-jtl section.webinare-slider-jtl-section .card-mobile-webinar .swiper-slide__description p,
body.wp-theme-jtl section.webinare-slider-jtl-section .card-mobile-webinar .webinar-description {
    color: #0b1b45 !important;
}
body.wp-theme-jtl section.webinare-slider-jtl-section .card-mobile-webinar .webinar-speakers {
    color: #5a6072 !important;
}

body.wp-theme-jtl section.webinare-slider-jtl-section .card-mobile-webinar .swiper-slide__buttons-wrapper {
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 16px !important;
    margin-top: auto !important;
    position: static !important;
}
body.wp-theme-jtl section.webinare-slider-jtl-section .card-mobile-webinar.swiper-slide .swiper-slide__button-wrapper.main-button-wrapper {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    display: block !important;
}
body.wp-theme-jtl section.webinare-slider-jtl-section .card-mobile-webinar.swiper-slide .swiper-slide__description {
    padding-bottom: 24px !important;
}

body.wp-theme-jtl section.webinare-slider-jtl-section .card-mobile-webinar.swiper-slide a.bordered-transparent-link {
    font-size: 15px !important;
    line-height: 1.2 !important;
    color: #0b1b45 !important;
    background: #fb581f !important;
    border: 0 !important;
    border-radius: 100px !important;
    padding: 9px 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 130px !important;
    width: auto !important;
    height: auto !important;
    white-space: nowrap !important;
    font-weight: 600 !important;
    font-family: 'Inter', sans-serif !important;
    box-shadow: none !important;
}
body.wp-theme-jtl section.webinare-slider-jtl-section .card-mobile-webinar.swiper-slide a.bordered-transparent-link span.text {
    display: inline !important;
    width: auto !important;
    font-size: 15px !important;
    color: #0b1b45 !important;
}
body.wp-theme-jtl section.webinare-slider-jtl-section .card-mobile-webinar.swiper-slide a.bordered-transparent-link::after {
    content: none !important;
    display: none !important;
}

body.wp-theme-jtl section.webinare-slider-jtl-section .card-mobile-webinar .additional-button-wrapper a.additional-button,
body.wp-theme-jtl section.webinare-slider-jtl-section .card-mobile-webinar .additional-button-wrapper a.additional-button .text {
    color: #0b1b45 !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    text-decoration: underline !important;
}

body.wp-theme-jtl section.webinare-slider-jtl-section .decorated-container-heading,
body.wp-theme-jtl section.webinare-slider-jtl-section .decorated-container-items-wrapper > *,
body.wp-theme-jtl section.webinare-slider-jtl-section .slider-mobile-items-wrapper {
    padding-left: 0 !important;
}