/* =============================================
   ZW-GR26 — ZuidWest Verkiezingen 2026
   Prefix: zw-gr26- (ZuidWest Gemeenteraad 2026)
   ============================================= */

:root {
    /* Brand */
    --zw-gr26-red: #cc2229;
    --zw-gr26-blue: #1b3f94;
    --zw-gr26-green: #2e7d32;
    --zw-gr26-red-dark: #c62828;

    /* Text */
    --zw-gr26-text: #32373c;
    --zw-gr26-muted: #999;
    --zw-gr26-text-light: #bbb;

    /* Backgrounds */
    --zw-gr26-bg: #f4f5f7;
    --zw-gr26-bg-light: #fafbfc;
    --zw-gr26-bg-hover: #f5f6f9;
    --zw-gr26-bg-blue-light: #f0f4ff;
    --zw-gr26-modal-bg: #1f2937;

    /* Borders & scrollbar */
    --zw-gr26-border: #f0f0f2;
    --zw-gr26-scrollbar: #c0c4cc;

    /* Effects */
    --zw-gr26-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);

    /* Radii */
    --zw-gr26-radius-sm: 3px;
    --zw-gr26-radius: 4px;
    --zw-gr26-radius-md: 6px;

    /* Typography */
    --zw-gr26-font-heading: "Nunito", sans-serif;

    /* Transitions */
    --zw-gr26-ease-fast: 0.15s ease;
    --zw-gr26-ease: 0.2s ease;
    --zw-gr26-ease-slow: 0.3s ease;
}

/* === UTILITIES === */
.zw-gr26-cover-img {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
    margin: 0 !important;
}

/* === SHARED CARD PATTERNS === */
.zw-gr26-acard,
.zw-gr26-vcard,
.zw-gr26-ecard {
    border-radius: var(--zw-gr26-radius);
    overflow: hidden;
    transition: transform var(--zw-gr26-ease);
}

.zw-gr26-acard__link,
.zw-gr26-vcard__link,
.zw-gr26-ecard__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Floating badge (play button / binnenkort) */
.zw-gr26-vcard__play,
.zw-gr26-binnenkort__badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    display: flex;
    align-items: center;
    font-family: var(--zw-gr26-font-heading);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--zw-gr26-radius);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
}

/* Bottom gradient overlay */
.zw-gr26-vcard__overlay,
.zw-gr26-uitslagen__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
}

/* === RESETS === */
.zw-gr26-wrapper h2,
.zw-gr26-wrapper h3,
.zw-gr26-wrapper p,
.zw-gr26-wrapper time {
    margin: 0;
    padding: 0;
}

/* === WRAPPER === */
.zw-gr26-wrapper {
    font-family:
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
        sans-serif;
    color: var(--zw-gr26-text);
    line-height: 1.6;
    overflow: hidden;
    background: var(--zw-gr26-bg);
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: -24px;
}

/* Remove theme prose spacing above wrapper */
.prose:has(> .zw-gr26-wrapper) {
    margin-top: 0;
}

/* Hide the WordPress page title when our wrapper is present */
.article-content:has(.zw-gr26-wrapper) > h1 {
    display: none;
}

/* === HERO === */
.zw-gr26-hero {
    color: #fff;
    position: relative;
    overflow: hidden;
    min-height: clamp(220px, 8vw + 180px, 280px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.zw-gr26-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.zw-gr26-hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(17, 24, 50, 0.92) 0%,
        rgba(17, 24, 50, 0.7) 40%,
        rgba(17, 24, 50, 0.3) 100%
    );
}

.zw-gr26-hero__content {
    position: relative;
    padding: 60px 20px 36px;
    text-align: center;
    z-index: 1;
    width: 100%;
}

.zw-gr26-hero__title {
    font-size: clamp(28px, 2vw + 16px, 42px);
    font-weight: 900;
    color: #fff !important;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
    margin: 0 0 8px;
    line-height: 1.15;
}

.zw-gr26-hero__subtitle {
    font-size: 17px;
    margin: 0;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    opacity: 0.9;
}

/* === ACCENT STRIPE === */
.zw-gr26-stripe {
    display: flex;
    height: 5px;
}

.zw-gr26-stripe span {
    flex: 1;
}

.zw-gr26-stripe--red {
    background: var(--zw-gr26-red);
}
.zw-gr26-stripe--white {
    background: #fff;
}
.zw-gr26-stripe--blue {
    background: var(--zw-gr26-blue);
}

/* === CONTAINER === */
.zw-gr26-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
}

/* === SECTIONS === */
.zw-gr26-section {
    margin: 40px 0;
}

.zw-gr26-section__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 20px;
}

.zw-gr26-section__title {
    font-family: var(--zw-gr26-font-heading);
    font-size: clamp(20px, 1vw + 14px, 28px);
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--zw-gr26-blue);
    margin: 0;
    line-height: 1.3;
    padding-bottom: 6px;
    border-bottom: 3px solid var(--zw-gr26-red);
}

.zw-gr26-section__title::before {
    content: "";
    width: clamp(10px, 0.5vw + 6px, 12px);
    height: clamp(10px, 0.5vw + 6px, 12px);
    border-radius: 50%;
    background: var(--zw-gr26-red);
    flex-shrink: 0;
}

.zw-gr26-section__link {
    font-size: 14px;
    font-weight: 700;
    color: var(--zw-gr26-blue);
    text-decoration: none;
}

.zw-gr26-section__link:hover {
    text-decoration: underline;
}

/* === INTRO TEXT === */
.zw-gr26-intro {
    background: #fff;
    border-radius: var(--zw-gr26-radius);
    padding: 24px 28px;
    box-shadow: var(--zw-gr26-shadow-card);
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 10px;
}

.zw-gr26-intro p + p {
    margin-top: 12px;
}

/* === DOSSIER / ARTICLE GRID === */
.zw-gr26-article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.zw-gr26-acard {
    background: #fff;
    box-shadow: var(--zw-gr26-shadow-card);
    color: var(--zw-gr26-text);
}

.zw-gr26-acard:hover {
    transform: translateY(-3px);
}

.zw-gr26-acard__thumb {
    aspect-ratio: 16 / 9;
    background: #ddd;
    overflow: hidden;
    position: relative;
}

.zw-gr26-acard__info {
    padding: 14px 16px;
}

.zw-gr26-acard__tag {
    display: inline-block;
    font-family: var(--zw-gr26-font-heading);
    font-size: 12px;
    font-weight: 900;
    color: #fff;
    background: var(--zw-gr26-blue);
    padding: 2px 8px;
    border-radius: var(--zw-gr26-radius-md);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.zw-gr26-acard__title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

.zw-gr26-acard__meta {
    font-size: 13px;
    color: var(--zw-gr26-muted);
    margin-top: 6px;
}

/* === DEBATTEN / VIDEO GRID === */
.zw-gr26-video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.zw-gr26-vcard {
    position: relative;
    background: var(--zw-gr26-blue);
    color: #fff;
    aspect-ratio: 16 / 10;
}

.zw-gr26-vcard:hover {
    transform: scale(1.015);
}

.zw-gr26-vcard::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--zw-gr26-blue);
    opacity: 0.25;
    transition: opacity var(--zw-gr26-ease);
    pointer-events: none;
    z-index: 1;
}

.zw-gr26-vcard:hover::before {
    opacity: 0.1;
}

.zw-gr26-vcard__play {
    background: var(--zw-gr26-red);
    color: #fff;
    gap: 5px;
}

.zw-gr26-vcard__play span {
    font-size: 9px;
}

.zw-gr26-vcard__overlay {
    padding: 30px 18px 16px;
    z-index: 2;
}

.zw-gr26-vcard__title {
    font-size: clamp(15px, 0.5vw + 13px, 17px);
    font-weight: 700;
    color: #fff;
}

.zw-gr26-vcard__meta {
    font-size: 12px;
    opacity: 0.8;
    margin-top: 4px;
}

/* Coming soon badge */
.zw-gr26-binnenkort {
    cursor: default;
}

.zw-gr26-binnenkort:not(:has(img)) {
    background-color: var(--zw-gr26-blue);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23ffffff' fill-opacity='0.04' fill-rule='evenodd' d='M25.484 31.82c-.17 4.821-4.122 8.68-8.984 8.68a9 9 0 0 1-9-9c0-4.863 3.859-8.814 8.679-8.984a6.08 6.08 0 0 1 .902-1.165l.352-.35H6v21h21V30.564l-.352.353a6.043 6.043 0 0 1-1.164.902zm7.153-17.547l-1.061-1.06-9.967 9.95 1.07 1.07 9.958-9.96zm1.06 1.062l-9.958 9.958 1.07 1.07 9.95-9.967-1.061-1.06zM22.4 28.195l-.781-.78-.011.01-1.061-1.06.012-.012-.781-.78-.766 2.276 1.11 1.112 2.278-.767zM31.578 8.97L39 16.394 25.648 29.77a4.506 4.506 0 0 1-1.735 1.081l-.005.002-7.368 2.481a1.498 1.498 0 0 1-1.54-.363 1.501 1.501 0 0 1-.362-1.539l2.48-7.368.002-.005a4.525 4.525 0 0 1 1.08-1.735L31.579 8.971zm9.545 1.06L37.94 6.85c-1.132-1.132-3.11-1.133-4.243 0l-1.06 1.061 7.424 7.425 1.06-1.06a3.003 3.003 0 0 0 0-4.244zM14.446 36.037a.754.754 0 0 1-.372.178l.592 1.885a.752.752 0 0 1-.715.975.75.75 0 0 1-.632-.346l-1.464-2.285.115.396a.749.749 0 1 1-1.44.42l-1.575-5.4a.751.751 0 0 1 .409-.893.747.747 0 0 1 .942.28l1.546 2.412a.75.75 0 0 1 1.273-.255l1.388 1.574a.75.75 0 0 1-.067 1.06z'/%3E%3C/svg%3E");
    background-size: 40px 40px;
}

.zw-gr26-binnenkort:not(:has(img))::before {
    display: none;
}

.zw-gr26-binnenkort img {
    filter: grayscale(0.6) brightness(0.7);
}

.zw-gr26-binnenkort__badge {
    background: rgba(255, 255, 255, 0.85);
    color: #666;
}

/* === EXPLAINERS CAROUSEL === */
.zw-gr26-explainer-carousel {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--zw-gr26-scrollbar) transparent;
}

.zw-gr26-explainer-carousel::-webkit-scrollbar {
    height: 6px;
}

.zw-gr26-explainer-carousel::-webkit-scrollbar-track {
    background: transparent;
}

.zw-gr26-explainer-carousel::-webkit-scrollbar-thumb {
    background: var(--zw-gr26-scrollbar);
    border-radius: var(--zw-gr26-radius-sm);
}

.zw-gr26-ecard {
    flex: 0 0 clamp(150px, 8vw + 110px, 200px);
    scroll-snap-align: start;
    color: #fff;
    position: relative;
    aspect-ratio: 9 / 16;
    background: #000;
}

.zw-gr26-ecard:hover {
    transform: translateY(-3px);
}

.zw-gr26-ecard__link {
    height: 100%;
}

.zw-gr26-ecard::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: var(--zw-gr26-red);
    pointer-events: none;
}

.zw-gr26-ecard__info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 14px;
    z-index: 1;
}

.zw-gr26-ecard__title {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
}

.zw-gr26-ecard--binnenkort {
    cursor: default;
    background-color: var(--zw-gr26-red);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 125.023 125.023' fill='%23ffffff' opacity='0.15'%3E%3Cpath d='M65.176 57.92c16 0 28.952-12.972 28.952-28.962C94.128 12.963 81.176 0 65.176 0 49.183 0 36.218 12.964 36.218 28.958 36.218 44.949 49.183 57.92 65.176 57.92z'/%3E%3Cpath d='M72.632 59.087l-7.211 7.264-6.993-7.34c-.024.006-.05.006-.066.012-1.167.28-6.12 1.856-12.546 6.465-.057.04-1.362.945-1.973 1.328-1.213.766-3.024 1.875-5.215 2.922-2.178 1.064-4.758 2.027-7.106 2.531-1.159.23-2.206.293-3.047.266-.869-.016-1.369-.204-1.899-.436-.285-.066-.496-.334-.808-.482-.244-.324-.597-.479-.862-.939-.142-.203-.305-.373-.457-.593l-.411-.761c-.318-.452-.519-1.126-.776-1.706-.281-.558-.426-1.292-.635-1.935-.218-.637-.364-1.336-.491-2.037-.322-1.348-.473-2.755-.63-4.047-.193-1.274-.181-2.553-.276-3.632-.003-.031-.001-.058-.003-.089.613-.878 1.446-1.67 2.459-2.405 1.012-.727 1.808-1.937 2.336-3.094 2.054-4.563 2.947-7.176 4.421-11.962.622-2.016-3.096-4.247-5.522 1.459-1.026 2.067-.578 2.279-1.621 4.338l-.373.701s-.215-1.988-.243-2.589c-.323-6.89-.618-10.586-.949-17.476-.09-1.911-.886-2.762-2.361-2.66-1.404.101-2.021.966-1.946 2.823.151 3.761.331 4.323.483 8.081.071 1.417-.851 1.148-.845-.006-.244-5.126-.477-6.258-.683-11.385-.058-1.392-.637-2.305-2.064-2.458-1.379-.146-2.321.999-2.251 2.742.205 4.955.45 5.915.654 10.871.072 1.466-.83 1.235-.833.133-.183-3.928-.299-4.667-.583-8.588-.055-.79-.535-1.828-1.156-2.242-1.515-1.009-3.171.277-3.101 2.369.146 4.387.383 5.577.564 9.96.109 1.125-.772 1.427-.82.117-.136-2.791-.241-2.389-.394-5.177-.07-1.271-.794-1.997-2.072-2.046-1.291-.047-2.002.704-2.212 1.918-.09.497-.042 1.022-.019 1.531.294 6.608.471 10.029.959 16.622.174 2.309.451 3.921.829 5.785.378 1.864 1.418 2.743 1.667 3.666-.058 1.068-.128 2.19-.086 3.477.023 1.71.033 3.558.27 5.615.082 1.012.19 2.062.416 3.182.215 1.114.345 2.219.72 3.428.348 1.197.616 2.388 1.18 3.666.259.63.52 1.264.783 1.9.312.643.69 1.293 1.051 1.939.659 1.296 1.715 2.576 2.692 3.828 1.162 1.193 2.332 2.404 3.784 3.361 2.788 1.992 6.115 3.328 9.163 3.834 3.063.549 5.932.553 8.498.308.689-.077 1.532-.168 2.192-.269l.019 33.848h59.882v-12.961c1.321 3.738 2.566 8.053 3.745 12.961h23.102C116.131 93.336 98.253 67.534 72.632 59.087zM65.487 123.662h-.128l-6.987-9.557 6.987-46.678h.128l6.992 46.678-6.992 9.557z'/%3E%3C/svg%3E");
    background-size: 80px 80px;
    background-repeat: no-repeat;
    background-position: center 40%;
}

.zw-gr26-ecard--binnenkort:hover {
    transform: none;
}

.zw-gr26-ecard--binnenkort::after {
    background: rgba(0, 0, 0, 0.3);
}

/* === PROGRAMMA TABEL === */
.zw-gr26-programma {
    background: #fff;
    border-radius: var(--zw-gr26-radius);
    overflow: hidden;
    box-shadow: var(--zw-gr26-shadow-card);
}

.zw-gr26-programma__select-wrap {
    padding: 16px;
    border-bottom: 1px solid var(--zw-gr26-border);
}

.zw-gr26-programma__select {
    width: 100%;
    padding: 11px 40px 11px 14px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    border: 2px solid var(--zw-gr26-blue);
    border-radius: var(--zw-gr26-radius);
    color: var(--zw-gr26-blue);
    background: #fff;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%231B3F94' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    transition: border-color var(--zw-gr26-ease-fast);
}

.zw-gr26-programma__select:focus {
    outline: none;
    border-color: var(--zw-gr26-red);
}

.zw-gr26-programma__list {
    display: none;
}

.zw-gr26-programma__list.active,
.zw-gr26-programma__list--open {
    display: block;
}

.zw-gr26-prow {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    font-size: 14px;
    border-bottom: 1px solid var(--zw-gr26-border);
    text-decoration: none;
    color: var(--zw-gr26-text);
    transition: background-color var(--zw-gr26-ease-fast);
}

.zw-gr26-prow:last-child {
    border-bottom: none;
}

.zw-gr26-prow:hover {
    background: var(--zw-gr26-bg-hover);
}

.zw-gr26-prow__partij {
    font-weight: 600;
    flex: 1;
}

.zw-gr26-prow__link-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--zw-gr26-blue);
    white-space: nowrap;
}

.zw-gr26-prow__link-text::after {
    content: " \2192";
}

.zw-gr26-prow--disabled {
    cursor: default;
    opacity: 0.5;
}

.zw-gr26-prow--disabled:hover {
    background: none;
}

.zw-gr26-prow--disabled .zw-gr26-prow__link-text {
    color: #72777c;
}

.zw-gr26-prow--disabled .zw-gr26-prow__link-text::after {
    content: none;
}

/* === UITSLAGENAVOND === */
.zw-gr26-uitslagen {
    border-radius: var(--zw-gr26-radius);
    overflow: hidden;
}

.zw-gr26-uitslagen__player {
    aspect-ratio: 16 / 9;
    background: #000;
    position: relative;
    cursor: pointer;
    display: block;
    text-decoration: none;
    color: inherit;
}

.zw-gr26-uitslagen__player img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.zw-gr26-uitslagen__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    background: var(--zw-gr26-red);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 28px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    z-index: 2;
    transition: transform var(--zw-gr26-ease);
}

.zw-gr26-uitslagen__player:hover .zw-gr26-uitslagen__play {
    transform: translate(-50%, -50%) scale(1.1);
}

.zw-gr26-uitslagen__overlay {
    padding: 32px 20px 18px;
    z-index: 1;
}

.zw-gr26-uitslagen__badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--zw-gr26-red);
    color: #fff;
    padding: 3px 10px;
    border-radius: var(--zw-gr26-radius);
    margin-bottom: 8px;
}

.zw-gr26-uitslagen__title {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
}

.zw-gr26-uitslagen__sub {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 2px;
}

/* === UITSLAGEN TILES === */
.zw-gr26-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.zw-gr26-tile {
    background: #fff;
    border: 2px dashed var(--zw-gr26-scrollbar);
    border-radius: var(--zw-gr26-radius);
    padding: 16px 16px 14px;
    cursor: pointer;
    transition: border-color var(--zw-gr26-ease);
    position: relative;
}

.zw-gr26-tile::after {
    content: "";
    width: 14px;
    height: 14px;
    border: 2px solid var(--zw-gr26-red);
    border-radius: 50%;
    position: absolute;
    top: 14px;
    right: 14px;
    transition: background var(--zw-gr26-ease);
}

.zw-gr26-tile:hover {
    border-color: var(--zw-gr26-red);
}

.zw-gr26-tile:hover::after {
    background: var(--zw-gr26-red);
}

.zw-gr26-tile__name {
    font-size: 15px;
    font-weight: 800;
    color: var(--zw-gr26-text);
}

.zw-gr26-tile__status {
    font-size: 11px;
    color: var(--zw-gr26-muted);
    margin-top: 4px;
}

/* === RESULTATEN DRAWER === */
.zw-gr26-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 1000;
}

.zw-gr26-modal-backdrop.is-open {
    display: block;
}

.zw-gr26-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(440px, 100%);
    background: #fff;
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    z-index: 1001;
    animation: zw-gr26-drawer-in 0.3s ease;
}

@keyframes zw-gr26-drawer-in {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

/* --- Header --- */
.zw-gr26-modal__header {
    padding: 24px 24px 20px;
    background: var(--zw-gr26-modal-bg);
    color: #fff;
    flex-shrink: 0;
    position: relative;
}

.zw-gr26-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: var(--zw-gr26-radius-sm);
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--zw-gr26-ease-fast);
}

.zw-gr26-modal__close:hover {
    background: rgba(255, 255, 255, 0.25);
}

.zw-gr26-modal__title {
    font-family: var(--zw-gr26-font-heading);
    font-size: 24px;
    font-weight: 900;
    color: #fff;
}

.zw-gr26-modal__subtitle {
    font-size: 12px;
    opacity: 0.7;
    margin-top: 4px;
}

/* --- Body --- */
.zw-gr26-modal__body {
    flex: 1;
    overflow-y: auto;
}

/* --- Wacht-state banner --- */
.zw-gr26-modal__wacht-banner {
    display: none;
    background: var(--zw-gr26-blue);
    color: #fff;
    text-align: center;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 700;
    margin: 16px 16px 8px;
    border-radius: var(--zw-gr26-radius);
}

.zw-gr26-modal.is-wacht .zw-gr26-modal__wacht-banner {
    display: block;
}

/* --- Sections --- */
.zw-gr26-modal__section {
    padding: 20px 24px;
    border-bottom: 1px solid var(--zw-gr26-border);
}

.zw-gr26-modal__section:last-child {
    border-bottom: none;
}

.zw-gr26-modal__section-label {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--zw-gr26-red);
    margin-bottom: 12px;
}

/* --- Donut chart --- */
.zw-gr26-modal__donut-area {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.zw-gr26-modal__donut {
    position: relative;
    width: clamp(170px, 10vw + 120px, 200px);
    height: clamp(170px, 10vw + 120px, 200px);
    flex-shrink: 0;
    border-radius: 50%;
    transition: box-shadow 0.4s ease;
}

.zw-gr26-modal__donut.has-majority {
    box-shadow: 0 0 24px rgba(46, 125, 50, 0.35);
}

@keyframes zw-gr26-majority-pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.06);
    }
    100% {
        transform: scale(1);
    }
}

.zw-gr26-modal__donut.majority-celebrate {
    animation: zw-gr26-majority-pulse 0.5s ease;
}

.zw-gr26-modal__donut svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    position: absolute;
    inset: 0;
}

.zw-gr26-modal__donut svg circle {
    transition:
        stroke var(--zw-gr26-ease-slow),
        opacity var(--zw-gr26-ease-slow);
}

/* SVG layers: results donut and coalition donut */
.zw-gr26-modal__donut-svg-results {
    opacity: 1;
    transition: opacity var(--zw-gr26-ease-slow);
}

.zw-gr26-modal__donut-svg-coal {
    opacity: 0;
    transition: opacity var(--zw-gr26-ease-slow);
}

.zw-gr26-modal__donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: color var(--zw-gr26-ease-slow);
}

.zw-gr26-modal__donut-total {
    font-family: var(--zw-gr26-font-heading);
    font-size: 30px;
    font-weight: 900;
    color: var(--zw-gr26-blue);
    line-height: 1;
    transition: color var(--zw-gr26-ease-slow);
}

.zw-gr26-modal__donut-label {
    font-size: 11px;
    color: var(--zw-gr26-muted);
}

.zw-gr26-modal__donut-coal-label {
    font-size: 12px;
    color: var(--zw-gr26-muted);
    display: none;
    transition: color var(--zw-gr26-ease-slow);
}

.zw-gr26-modal__donut-majority-label {
    display: none;
    font-family: var(--zw-gr26-font-heading);
    font-size: 13px;
    font-weight: 900;
    color: var(--zw-gr26-green);
    margin-top: 2px;
    letter-spacing: 0.02em;
}

/* --- Opkomst --- */
.zw-gr26-modal__opkomst {
    text-align: center;
    font-size: 11px;
    color: var(--zw-gr26-muted);
    margin-top: 8px;
    transition: opacity var(--zw-gr26-ease-slow);
}

.zw-gr26-modal__opkomst-ref {
    color: var(--zw-gr26-text-light);
}

/* --- Results table --- */
.zw-gr26-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.zw-gr26-tbl thead th {
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--zw-gr26-text-light);
    padding: 0 0 8px;
}

.zw-gr26-tbl thead th:nth-child(3),
.zw-gr26-tbl thead th:nth-child(4) {
    text-align: right;
}

.zw-gr26-tbl td {
    padding: 5px 0;
    border-bottom: 1px solid #f8f8f8;
    vertical-align: middle;
}

.zw-gr26-tbl tr:last-child td {
    border-bottom: none;
}

.zw-gr26-tbl td:nth-child(3),
.zw-gr26-tbl td:nth-child(4) {
    text-align: right;
}

.zw-gr26-tbl__dot {
    width: 10px;
    height: 10px;
    border-radius: var(--zw-gr26-radius-sm);
    display: inline-block;
    margin-right: 8px;
    vertical-align: middle;
}

.zw-gr26-tbl__name {
    font-weight: 600;
}

.zw-gr26-tbl__seats {
    font-weight: 800;
    font-size: 14px;
    font-family: var(--zw-gr26-font-heading);
}

.zw-gr26-tbl__diff {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: var(--zw-gr26-radius-sm);
    display: inline-block;
}

.zw-gr26-tbl__diff--plus {
    color: var(--zw-gr26-green);
    background: #e8f5e9;
}

.zw-gr26-tbl__diff--min {
    color: var(--zw-gr26-red-dark);
    background: #ffebee;
}

.zw-gr26-tbl__diff--nieuw {
    color: #1565c0;
    background: #e3f2fd;
}

/* --- Coalition controls --- */
.zw-gr26-coal-toggle {
    width: 100%;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 700;
    font-family: var(--zw-gr26-font-heading);
    color: var(--zw-gr26-blue);
    background: var(--zw-gr26-bg);
    border: none;
    border-top: 1px solid var(--zw-gr26-border);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition:
        background var(--zw-gr26-ease-fast),
        color var(--zw-gr26-ease-fast);
    flex-shrink: 0;
}

.zw-gr26-coal-toggle:hover {
    background: #ecedf0;
}

.zw-gr26-coal-status {
    display: none;
    padding: 8px 24px;
    border-top: 1px solid var(--zw-gr26-border);
    background: var(--zw-gr26-bg-light);
    flex-shrink: 0;
}

.zw-gr26-coal-status__text {
    font-size: 12px;
    font-weight: 600;
    color: var(--zw-gr26-text-light);
    flex: 1;
}

.zw-gr26-coal-status__reset {
    font-size: 11px;
    font-weight: 600;
    font-family: inherit;
    color: var(--zw-gr26-text-light);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.zw-gr26-coal-status__reset:hover {
    color: var(--zw-gr26-muted);
}

/* --- Coal mode & majority state --- */
.is-coal-mode .zw-gr26-modal__donut-svg-results {
    opacity: 0;
}

.is-coal-mode .zw-gr26-modal__donut-svg-coal {
    opacity: 1;
}

.is-coal-mode .zw-gr26-modal__donut-label {
    display: none;
}

.is-coal-mode .zw-gr26-modal__donut-coal-label {
    display: block;
}

.is-coal-mode .zw-gr26-modal__donut-total {
    color: var(--zw-gr26-muted);
}

.is-coal-mode .zw-gr26-modal__opkomst {
    opacity: 0;
    height: 0;
    margin: 0;
    overflow: hidden;
}

.is-coal-mode .zw-gr26-coal-toggle {
    color: var(--zw-gr26-red);
}

.is-coal-mode .zw-gr26-coal-status {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.is-coal-mode .zw-gr26-tbl tbody tr {
    cursor: pointer;
    border-radius: var(--zw-gr26-radius-md);
    transition: background var(--zw-gr26-ease-fast);
}

.is-coal-mode .zw-gr26-tbl tbody tr:hover {
    background: var(--zw-gr26-bg-hover);
}

.is-coal-mode .zw-gr26-tbl tbody tr.is-selected {
    background: var(--zw-gr26-bg-blue-light);
}

.is-coal-mode .zw-gr26-tbl tbody tr.is-selected td:first-child::before {
    content: "\2713  ";
    font-size: 11px;
    font-weight: 700;
    color: var(--zw-gr26-blue);
}

.is-coal-mode.has-majority .zw-gr26-modal__donut-total {
    font-size: 36px;
    color: var(--zw-gr26-green);
}

.is-coal-mode.has-majority .zw-gr26-modal__donut-coal-label {
    color: var(--zw-gr26-green);
}

.is-coal-mode.has-majority .zw-gr26-modal__donut-majority-label {
    display: block;
}

/* --- Wacht-state: hide +/- column --- */
.zw-gr26-modal.is-wacht .zw-gr26-tbl thead th:nth-child(3) {
    display: none;
}

.zw-gr26-modal.is-wacht .zw-gr26-tbl tbody td:nth-child(4) {
    display: none;
}

/* --- Confetti --- */
.zw-gr26-confetti-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1002;
    pointer-events: none;
}

/* === STEMLOCATIES — Accordion === */
.zw-gr26-stem__list {
    max-height: none;
    overflow-y: visible;
}

.zw-gr26-stem__count {
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--zw-gr26-muted);
    background: var(--zw-gr26-bg-light);
    border-bottom: 1px solid var(--zw-gr26-border);
}

.zw-gr26-stem__row {
    border-bottom: 1px solid var(--zw-gr26-border);
    cursor: pointer;
    transition: background var(--zw-gr26-ease-fast);
}

.zw-gr26-stem__row:last-of-type {
    border-bottom: none;
}

.zw-gr26-stem__row:hover {
    background: var(--zw-gr26-bg-light);
}

.zw-gr26-stem__header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    gap: 12px;
}

.zw-gr26-stem__info {
    flex: 1;
    min-width: 0;
}

.zw-gr26-stem__name {
    font-size: 14px;
    font-weight: 700;
    color: var(--zw-gr26-text);
}

.zw-gr26-stem__adres {
    font-size: 13px;
    color: #666;
    margin-top: 1px;
}

.zw-gr26-stem__time {
    font-size: 12px;
    font-weight: 400;
    color: var(--zw-gr26-muted);
    white-space: nowrap;
}

.zw-gr26-stem__summary {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.zw-gr26-stem__accessible {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.zw-gr26-stem__accessible-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.zw-gr26-stem__accessible-icon svg {
    width: 9px;
    height: 9px;
}

.zw-gr26-stem__accessible--ja .zw-gr26-stem__accessible-icon {
    background: var(--zw-gr26-green);
    color: #fff;
}

.zw-gr26-stem__accessible--nee .zw-gr26-stem__accessible-icon {
    background: var(--zw-gr26-red-dark);
    color: #fff;
}

.zw-gr26-stem__accessible-label {
    color: var(--zw-gr26-muted);
    line-height: 1;
}

.zw-gr26-stem__chevron {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--zw-gr26-muted);
    transition: transform var(--zw-gr26-ease);
}

.zw-gr26-stem__row.open .zw-gr26-stem__chevron {
    transform: rotate(180deg);
}

.zw-gr26-stem__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}

.zw-gr26-stem__row.open .zw-gr26-stem__body {
    max-height: 300px;
}

.zw-gr26-stem__details {
    padding: 0 16px 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
}

.zw-gr26-stem__features {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.zw-gr26-stem__feature {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: var(--zw-gr26-radius-sm);
    background: var(--zw-gr26-bg-blue-light);
    color: var(--zw-gr26-blue);
    white-space: nowrap;
}

.zw-gr26-stem__no-features {
    font-size: 12px;
    color: var(--zw-gr26-muted);
    font-style: italic;
}

.zw-gr26-stem__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: var(--zw-gr26-bg-light);
    border-top: 1px solid var(--zw-gr26-border);
    font-size: 13px;
}

.zw-gr26-stem__website {
    font-weight: 600;
    color: var(--zw-gr26-blue);
    text-decoration: none;
}

.zw-gr26-stem__website:hover {
    text-decoration: underline;
}

.zw-gr26-stem__contact {
    color: var(--zw-gr26-muted);
    font-size: 12px;
}

/* === FOCUS STATES === */
.zw-gr26-acard__link:focus-visible,
.zw-gr26-vcard__link:focus-visible,
.zw-gr26-ecard__link:focus-visible {
    outline: 2px solid var(--zw-gr26-blue);
    outline-offset: -2px;
}

.zw-gr26-tile:focus-visible {
    border-color: var(--zw-gr26-red);
    outline: 2px solid var(--zw-gr26-blue);
    outline-offset: 2px;
}

.zw-gr26-tile:focus-visible::after {
    background: var(--zw-gr26-red);
}

.zw-gr26-prow:focus-visible,
.zw-gr26-section__link:focus-visible,
.zw-gr26-stem__website:focus-visible {
    outline: 2px solid var(--zw-gr26-blue);
    outline-offset: 2px;
}

.zw-gr26-modal__close:focus-visible,
.zw-gr26-coal-toggle:focus-visible,
.zw-gr26-coal-status__reset:focus-visible {
    outline: none;
}

.zw-gr26-programma__select:focus-visible {
    border-color: var(--zw-gr26-red);
    outline: none;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .zw-gr26-intro {
        padding: 18px 18px;
        font-size: 14px;
        line-height: 1.6;
    }

    .zw-gr26-video-grid {
        grid-template-columns: 1fr 1fr;
    }

    .zw-gr26-article-grid {
        grid-template-columns: 1fr;
    }

    .zw-gr26-uitslagen {
        border-radius: 0;
        margin-left: -20px;
        margin-right: -20px;
    }

    .zw-gr26-uitslagen__player {
        aspect-ratio: 4 / 3;
    }

    .zw-gr26-uitslagen__title {
        font-size: 26px;
    }

    .zw-gr26-uitslagen__overlay {
        padding: 40px 16px 16px;
    }

    .zw-gr26-uitslagen__play {
        width: 80px;
        height: 80px;
        font-size: 32px;
    }
}

@media (max-width: 480px) {
    .zw-gr26-stem__header {
        padding: 10px 14px;
        gap: 8px;
        flex-wrap: wrap;
    }

    .zw-gr26-stem__info {
        flex-basis: calc(100% - 30px);
    }

    .zw-gr26-stem__summary {
        flex-basis: 100%;
        order: 3;
    }

    .zw-gr26-stem__chevron {
        order: 2;
    }

    .zw-gr26-stem__details {
        padding: 0 14px 12px;
        flex-direction: column;
        gap: 8px;
    }

    .zw-gr26-stem__footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 10px 14px;
    }

    .zw-gr26-hero__content {
        padding: 40px 16px 28px;
    }

    .zw-gr26-video-grid {
        grid-template-columns: 1fr;
    }
}