.vaccinatie-popup {
    width: calc(100% - 32px);
    max-width: 900px;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    padding: 0;
    border: 0;
    margin: auto;
    background: #fff;
    color: #4b5054;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .3);
    overflow: auto;
}

.vaccinatie-popup:not([open]) { display: none; }
.vaccinatie-popup::backdrop { background: rgba(27, 35, 40, .65); }
body.vaccinatie-popup-open { overflow: hidden; }
.vaccinatie-popup-layout { display: grid; grid-template-columns: 40% 60%; }

.vaccinatie-popup-close {
    position: absolute;
    z-index: 1;
    top: 8px;
    right: 8px;
    width: 44px;
    height: 44px;
    border: 0;
    background: #fff;
    color: #60666a;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
}

.vaccinatie-popup-calendar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 48px 24px;
    background: linear-gradient(145deg, #ededf0, #d1d1d8);
    color: #454664;
    text-align: center;
}

.vaccinatie-popup-cross { position: relative; width: 66px; height: 66px; margin-bottom: 40px; }
.vaccinatie-popup-cross::before,
.vaccinatie-popup-cross::after { content: ""; position: absolute; background: #7d7e93; border-radius: 3px; }
.vaccinatie-popup-cross::before { width: 22px; height: 66px; left: 22px; top: 0; }
.vaccinatie-popup-cross::after { width: 66px; height: 22px; left: 0; top: 22px; }
.vaccinatie-popup-eyebrow { font-size: 16px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; }
.vaccinatie-popup-month { font-size: 38px; font-weight: 700; margin: 15px 0; }
.vaccinatie-popup-dates { display: flex; flex-direction: column; gap: 9px; margin: 18px 0; }
.vaccinatie-popup-dates span { background: #fff; padding: 10px 12px; border-radius: 4px; font-size: 28px; font-weight: 700; }
.vaccinatie-popup-time { font-size: 14px; }
.vaccinatie-popup-content { display: flex; flex-direction: column; justify-content: center; padding: 52px 44px 36px; font-size: 15px; line-height: 1.65; }
.vaccinatie-popup-content h2 { margin: 0 0 22px; color: #454664; font-size: 29px; line-height: 1.25; font-weight: 700; }
.vaccinatie-popup-content p { margin: 0 0 15px; }
.vaccinatie-popup-content ul { margin: 0 0 20px; padding-left: 20px; }
.vaccinatie-popup-content li { padding-left: 3px; margin-bottom: 12px; }
.vaccinatie-popup-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 24px; text-align: center; }
.vaccinatie-popup-call { display: inline-block; background: #454664; color: #fff; padding: 14px 26px; font-size: 17px; font-weight: 700; }
.vaccinatie-popup-call:hover,
.vaccinatie-popup-call:focus { background: #33344d; color: #fff; }
.vaccinatie-popup-details { color: #454664; text-decoration: underline; }
.vaccinatie-popup a:focus-visible,
.vaccinatie-popup button:focus-visible { outline: 3px solid #567a95; outline-offset: 3px; }

@media (max-width: 700px) {
    .vaccinatie-popup-layout { grid-template-columns: 1fr; }
    .vaccinatie-popup-calendar { padding: 28px 24px 22px; }
    .vaccinatie-popup-cross { display: none; }
    .vaccinatie-popup-month { font-size: 27px; margin: 8px 0; }
    .vaccinatie-popup-dates span { font-size: 23px; padding: 5px 14px; }
    .vaccinatie-popup-dates { margin: 10px 0; }
    .vaccinatie-popup-content { padding: 26px 24px; }
    .vaccinatie-popup-content h2 { font-size: 25px; }
}