/* Scheidsrechter / Arbitre landing page (QR cards). Loaded only on page 4013 + its translations. */

/* Card state: body.sr-red is set by js/scheidsrechter.js from #rood / #rouge, yellow is the default. */
body.sr-red .sr-yellow-only,
body:not(.sr-red) .sr-red-only {
    display: none !important;
}

/* Show both variants in the Elementor editor so they stay editable. */
body.elementor-editor-active .sr-yellow-only,
body.elementor-editor-active .sr-red-only {
    display: flex !important;
    outline: 2px dashed #e0b400;
    outline-offset: 4px;
}
body.elementor-editor-active .sr-red-only {
    outline-color: #c62828;
}

/* Top bar */
.sr-topbar {
    border: 1px solid #E5D9DF;
    border-radius: 10px;
    background: #fff;
}
.sr-chip p::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 40px;
    margin-right: 20px;
    vertical-align: middle;
    background: url("/wp-content/uploads/2026/10/scheidsrechter-yellow-card-header.svg") center / contain no-repeat;
}
.sr-red-only .sr-chip p::before {
    background-image: url("/wp-content/uploads/2026/10/scheidsrechter-red-card-header.svg");
}

/* Stats */
.sr-stats ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sr-stats li {
    position: relative;
    padding-left: 34px;
    margin: 0 0 14px;
    color: #fff;
    font-size: 16px;
    line-height: 30px;
}
.sr-stats li:last-child {
    margin-bottom: 0;
}
.sr-stats li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 20px;
    height: 20px;
    background: url("/wp-content/uploads/2026/10/scheidsrechter-checkmark.svg") center / contain no-repeat;
}
.sr-stats strong {
    font-family: "jakarta", sans-serif;
    font-size: 29px;
    font-weight: 600;
    margin-right: 6px;
}

/* Yellow / red tabs */
.sr-tabs.e-con {
    width: auto !important;
    align-self: flex-start;
    border: 1px solid #E5D9DF;
    border-radius: 50px;
}
.sr-tabs .elementor-button {
    background: transparent !important;
    border-color: transparent !important;
    color: #000 !important;
    padding: 6px 40px !important;
}
body:not(.sr-red) .sr-tab-yellow .elementor-button,
body.sr-red .sr-tab-red .elementor-button {
    background: #21416A !important;
    color: #fff !important;
}

/* Placeholder until the video arrives */
.sr-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    background: #E5D9DF;
    border-radius: 12px;
    color: #21416A;
    font-weight: 600;
    text-align: center;
    padding: 20px;
}
.sr-bullets ul {
    margin: 0;
    padding-left: 18px;
    font-size: 16px;
    line-height: 28px;
}

/* Card graphic: the active card sits in front */
.sr-cards {
    position: relative;
    width: 100%;
    max-width: 500px;
    aspect-ratio: 500 / 580;
    margin: 0 auto;
}
.sr-card {
    position: absolute;
    height: auto;
    z-index: 1;
    transition: transform .3s ease;
}
.sr-card-yellow {
    top: 0;
    left: 0;
    width: 64%;
}
.sr-card-red {
    top: 25%;
    right: 50px;
    width: 68%;
}
body:not(.sr-red) .sr-card-yellow,
body.sr-red .sr-card-red {
    z-index: 2;
}

/* Compass */
.sr-compass ol {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: sr;
}
.sr-compass li {
    counter-increment: sr;
    position: relative;
    min-height: 46px;
    padding: 8px 0 26px 62px;
}
.sr-compass li::before {
    content: counter(sr);
    position: absolute;
    left: 0;
    top: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #F5F2F3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "calistoga", serif;
    font-size: 24px;
}
.sr-compass li::after {
    content: "";
    position: absolute;
    left: 22px;
    top: 58px;
    height: 22px;
    width: 3px;
    border-radius: 2px;
    background: #71CF3B;
}
.sr-compass li:last-child::after {
    display: none;
}
.sr-compass strong {
    display: block;
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 14px;
}
.sr-compass span {
    font-size: 16px;
}

/* MEGA steps */
.sr-step {
    background: #fff;
    border: 1px solid #E5D9DF;
    border-radius: 10px;
}

/* Grey background runs behind the whole hero and stops partway down the link cards */
.sr-hero {
    background: #FAF8F9 !important;
}
.sr-linkcards {
    background: linear-gradient(180deg, #FAF8F9 100px, #FFFFFF 100px);
}

/* Keep the hero content in front of the green curls */
.sr-hero > .e-con {
    position: relative;
    z-index: 1;
}

/* Outline icons: Elementor fills SVG icons with the icon color, keep them stroke-only */
.sr-icon .elementor-icon svg,
.sr-icon .elementor-icon svg * {
    fill: none !important;
}
.sr-icon .elementor-icon svg [stroke] {
    stroke: #71CF3B;
}

/* Links in body text follow the text color */
[data-elementor-type="wp-page"] .elementor-widget-text-editor a {
    color: inherit;
}

/* MEGA section: curls run behind the grey box */
.sr-mega {
    overflow: visible;
}
.sr-mega > .e-con-inner > .e-con,
.sr-mega > .e-con {
    position: relative;
    z-index: 1;
}

.sr-hero .sr-intro {
    max-width: 800px !important;
    margin: 0 auto;
}

/* Link cards: keep the links on one line at the bottom, whatever the title length */
.sr-linkcards .elementor-widget-button {
    margin-top: auto;
}

/* "Geel: / Rood:" heading in the tabs block: small card in a soft circle, larger text */
.e-con:not(.sr-topbar) > .sr-chip p {
    display: flex;
    align-items: center;
    font-size: 22px;
    font-weight: 500;
}
.e-con:not(.sr-topbar) > .sr-chip p::before {
    flex: none;
    width: 52px;
    height: 52px;
    margin-right: 18px;
    border-radius: 50%;
    background: url("/wp-content/uploads/2026/10/scheidsrechter-yellow-card-header.svg") center / 20px 32px no-repeat, #F5F2F3;
}
.sr-red-only.e-con > .sr-chip p::before {
    background-image: url("/wp-content/uploads/2026/10/scheidsrechter-red-card-header.svg");
}

@media (max-width: 767px) {
    .sr-stats li::before {
        top: 10px;
    }
}


/* Mobile: in the stacked layout the aspect-ratio height of .sr-cards counted as 0px,
   so the next section slid over the cards. A fixed height keeps the space. */
@media (max-width: 767px) {
    .sr-cards {
        max-width: 340px;
        aspect-ratio: auto;
        height: 350px;
    }
}