/**
 * webinare-en-register-button.css
 * Page:    /en/help-center/webinars/  (page-id 263093) — the English
 *          equivalent of /de/hilfecenter/webinare/ (page-id 85338).
 *          section.webinare-slider-jtl-section → the "LIVE-WEBINARE /
 *          Aktuelle Themen und Termine" live-webinar date cards.
 *
 * THE BUG (collapsed "Jetzt anmelden" CTA → tiny orange dash/arrow):
 *   custom-clone.css:10474-10496 collapses the card's registration button
 *   (a.bordered-transparent-link) on EVERY non-home page carrying this section:
 *   it sets `font-size:0`, `color/background:transparent`, hides `span.text`
 *   (`display:none`), and replaces the label with an `::after { content:"→" }`
 *   orange arrow. The result is a squished orange dash with no label.
 *
 *   jp-469-hilfecenter-webinare.css (section 7) already restores the proper
 *   orange pill — but it is page-scoped to `body.page-id-85338` (the DE page)
 *   only. The English page (263093) uses the identical widget/section, so it
 *   still inherits the collapse rule and shows the broken dash.
 *
 * THE FIX (symmetry with /de/):
 *   Mirror jp-469's pill restoration for the EN page-id. Same solid JTL orange
 *   pill with the visible label as DE (kept identical for cross-locale
 *   consistency — the shipped DE button is solid #fb581f, not a gradient).
 *   Equal specificity to the collapse rule (0,4,3); loads after custom-clone.css
 *   via the overrides loader, so it wins on source order. Page-scoped to 263093
 *   so no other page using this section is affected.
 */

/* restore the pill (was collapsed: font-size:0, transparent bg, no border) */
body.page-id-263093 section.webinare-slider-jtl-section .swiper-slide a.bordered-transparent-link {
    font-size: 15px !important;
    line-height: 1.2 !important;
    color: #0b1b45 !important;            /* navy label on orange = JTL primary pill */
    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;
    flex: 0 0 auto !important;            /* don't let the flex row crush it */
    min-width: 130px !important;
    width: auto !important;
    height: auto !important;
    white-space: nowrap !important;
    font-weight: 600 !important;
    font-family: 'Inter', sans-serif !important;
}
/* bring the label back (base rule hid it to make room for the arrow) */
body.page-id-263093 section.webinare-slider-jtl-section .swiper-slide a.bordered-transparent-link span.text {
    display: inline !important;
    width: auto !important;
    font-size: 15px !important;
    color: #0b1b45 !important;
}
/* drop the orange arrow that replaced the label */
body.page-id-263093 section.webinare-slider-jtl-section .swiper-slide a.bordered-transparent-link::after {
    content: none !important;
    display: none !important;
}

/* Horizontal alignment of the pill with "Mehr Details".
   custom-clone.css:10467 absolutely-positions the pill wrapper
   (.swiper-slide__button-wrapper, which is also .main-button-wrapper) at
   bottom:12px, lifting it ~21px above the in-flow "Mehr Details" link so the
   footer's align-items:center can't level them. Return the pill to the flex
   flow; on desktop reverse the row so "Mehr Details" stays left and the pill
   stays right, both vertically centred on one line. Mobile (<1131px) keeps the
   widget's centred column stack untouched. */
body.page-id-263093 section.webinare-slider-jtl-section .swiper-slide .swiper-slide__buttons-wrapper .main-button-wrapper {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
}
@media (min-width: 1131px) {
    body.page-id-263093 section.webinare-slider-jtl-section .swiper-slide .swiper-slide__buttons-wrapper {
        flex-direction: row-reverse !important;
        align-items: center !important;
    }
}