/* Frontend styles for Havo-P Agenda. */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&display=swap');

/* Forceer de Elementor-shortcode-wrapper op volle breedte, anders krimpt
   de widget mee met de inhoud en wordt de kalender smaller in maanden
   zónder evenementen dan in maanden mét evenementen. */
.elementor-widget-shortcode:has(.havop-agenda),
.elementor-widget-shortcode:has(.havop-agenda) > .elementor-widget-container,
.elementor-widget-shortcode:has(.havop-agenda) .elementor-shortcode { width:100%; }

.havop-agenda { font-family:'Poppins',sans-serif; width:100%; max-width:1280px; margin:0 auto; color:#fff; }
.havop-agenda * { box-sizing:border-box; }
.havop-inner { width:100%; transition:opacity .15s; }

.havop-kop { display:flex; align-items:center; justify-content:center; gap:20px; margin-bottom:24px; }
.havop-kop h2 { font-size:32px; font-weight:800; line-height:38.4px; margin:0; color:#fff; text-transform:uppercase; text-align:center; }
.havop-nav-knop {
	display:flex; align-items:center; justify-content:center; padding:6px;
	background:none; text-decoration:none; flex:0 0 auto; cursor:pointer; transition:transform .1s, opacity .2s;
}
.havop-nav-knop svg { width:46px; height:26px; display:block; }
.havop-nav-knop:hover { opacity:.8; }
.havop-nav-knop:active { transform:scale(.9); }

.havop-weekdagen { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:0; margin-bottom:8px; }
.havop-weekdagen span { text-align:left; font-weight:600; font-size:13px; color:#fff; letter-spacing:1px; padding:4px 12px; }

/* Witte lijnen, transparante cellen: alleen bovenlijn + interne lijnen (geen links/rechts/onder). */
.havop-raster { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); grid-auto-rows:118px; gap:0; }
.havop-cel {
	min-width:0; background:transparent; padding:10px;
	border-top:3px solid #fff; border-left:3px solid #fff;
	display:flex; flex-direction:column; gap:6px; overflow:hidden;
}
.havop-cel:nth-child(7n+1) { border-left:none; }
.havop-cel .dag { font-size:14px; font-weight:800; line-height:14px; color:#fff; flex:0 0 auto; }

/* Items-gebied: dagnummer blijft vast bovenaan, bij te veel items scrollt
   alleen dit gedeelte (vakje houdt zo z'n vaste hoogte). */
.havop-events {
	display:flex; flex-direction:column; gap:6px;
	flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden;
	scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.55) transparent;
}
.havop-events::-webkit-scrollbar { width:5px; }
.havop-events::-webkit-scrollbar-thumb { background:rgba(255,255,255,.45); border-radius:3px; }
.havop-events::-webkit-scrollbar-track { background:transparent; }
.havop-cel.buiten .dag { opacity:.4; } /* alleen het nummer grijs; lijnen blijven vol wit */
.havop-cel.vandaag { outline:3px solid #FF8B5F; outline-offset:-3px; }
.havop-cel.vandaag .dag { color:#fff; }

.havop-label {
	display:flex; align-items:center; justify-content:space-between; gap:6px;
	font-size:13px; font-weight:600; line-height:1.2; padding:6px 10px; border-radius:8px;
	text-decoration:none; color:#1a1a1a; min-width:0; flex:0 0 auto; overflow:hidden;
}
/* Tekst altijd bínnen het gekleurde vakje houden: laat de span krimpen
   en breek lange woorden af zodat ze nooit buiten de rand vallen. */
.havop-label span { min-width:0; overflow-wrap:break-word; word-break:break-word; }
.havop-label svg { width:13px; height:13px; flex:0 0 auto; }
.havop-label:link,
.havop-label:visited,
.havop-label:hover,
.havop-label:focus,
.havop-label:active,
.havop-label[href] span,
.havop-label[href] svg,
.havop-label[href] svg * {
	color:#1a1a1a !important;
	stroke:#1a1a1a !important;
}
.havop-label.cat-geel   { background:#FCCA59; }
.havop-label.cat-oranje { background:#FF8B5F; }
.havop-label.cat-roze   { background:#F5A1C3; }
.havop-label[href]:hover { filter:brightness(.96); }

.havop-cta {
	display:inline-flex; align-items:center; gap:10px; margin-top:24px;
	background:#5853E2; color:#fff; text-decoration:none; height:45px; padding:0 24px;
	border-radius:8px; font-weight:500; font-size:16px; transition:background .2s, transform .1s;
}
.havop-cta svg { width:16px; height:16px; }
.havop-cta:hover { background:#4a45c9; }
.havop-cta:active { transform:scale(.98); }

@media (max-width:600px) {
	.havop-kop h2 { font-size:24px; }
	.havop-raster { grid-auto-rows:80px; }
	.havop-cel { padding:6px; }
	.havop-weekdagen span { font-size:11px; padding:4px 6px; }
	.havop-label { font-size:11px; padding:5px 7px; }
}

.havop-aankomend { font-family:'Poppins',sans-serif; color:#fff; max-width:520px; }
.havop-aankomend * { box-sizing:border-box; }
.havop-aankomend h2 { font-family:'Poppins',sans-serif; font-weight:700; font-size:24px; line-height:28.8px; letter-spacing:0; margin:0 0 24px; text-transform:uppercase; color:#fff; }

.havop-aankomend-rij { display:flex; gap:24px; align-items:center; margin-bottom:24px; }
.havop-aankomend-rij:last-child { margin-bottom:0; }

.havop-aankomend-datum {
	width:85px; height:85px; flex:0 0 auto; border-radius:4px; color:#1a1a1a;
	display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.havop-aankomend-datum .dag { font-size:40px; font-weight:800; line-height:1; }
.havop-aankomend-datum .maand { font-size:15px; font-weight:700; text-transform:uppercase; margin-top:2px; }
.havop-aankomend-datum.cat-geel   { background:#FCCA59; }
.havop-aankomend-datum.cat-oranje { background:#FF8B5F; }
.havop-aankomend-datum.cat-roze   { background:#F5A1C3; }

.havop-aankomend-info { display:flex; flex-direction:column; gap:6px; min-width:0; }
.havop-aankomend-titel { color:#fff; font-weight:700; font-size:18px; line-height:1.25; }
.havop-aankomend-beschrijving { color:#fff; font-weight:500; font-size:16px; line-height:20px; letter-spacing:0; }
.havop-aankomend-link,
.havop-aankomend-link:link,
.havop-aankomend-link:visited,
.havop-aankomend-link:hover,
.havop-aankomend-link:focus,
.havop-aankomend-link:active,
.havop-aankomend-link span {
	color:#000 !important;
}
.havop-aankomend-link {
	background:#fff; border-radius:8px; padding:6px 16px; margin-top:2px;
	font-weight:500; font-size:16px; line-height:20px; letter-spacing:0; min-height:28px; display:inline-flex; align-items:center; width:fit-content;
	gap:10px; justify-content:space-between; text-decoration:none; transition:filter .2s;
}
.havop-aankomend-link svg { width:14px; height:14px; flex:0 0 auto; stroke:#000; }
.havop-aankomend-link:hover { filter:brightness(.96); }
.havop-aankomend-leeg { opacity:.8; }

/* =========================================================
   Havo-P registration form
   ========================================================= */

.havop-registration-form-wrap,
.havop-registration-form-wrap *,
.havop-registration-success,
.havop-registration-notice {
    box-sizing: border-box;
}

.havop-registration-form-wrap.havop-registration-designed {
    --havop-form-panel: #ffffff;
    --havop-form-input: #ebebeb;
    --havop-form-text: #000000;
    --havop-form-purple: #898af6;
    --havop-form-grey: #6c6c6c;

    position: relative !important;
    width: 100% !important;
    max-width: 846px !important;
    margin: 0 auto !important;
    padding: 28px 12px 28px 63px !important;

    background: var(--havop-form-panel) !important;
    color: var(--havop-form-text) !important;

    border: 0 !important;
    border-radius: 4px !important;
    box-shadow: none !important;

    font-family: 'Poppins', sans-serif !important;
    font-size: 18px !important;
    line-height: 25px !important;

    -webkit-mask-image: radial-gradient(circle at 31.5px 37.5px, transparent 0 9.5px, #000 9.75px);
    -webkit-mask-size: 100% 49.13px;
    -webkit-mask-repeat: repeat-y;
    mask-image: radial-gradient(circle at 31.5px 37.5px, transparent 0 9.5px, #000 9.75px);
    mask-size: 100% 49.13px;
    mask-repeat: repeat-y;
}


/* ---------------------------------------------------------
   Header / event information
   --------------------------------------------------------- */

.havop-registration-title {
    margin: 0 0 10px !important;
    padding: 0 !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 20px !important;
    line-height: 30px !important;
    font-weight: 700 !important;
    color: var(--havop-form-text) !important;
}

.havop-registration-meta,
.havop-registration-availability {
    margin: 0 0 14px !important;
    padding: 0 !important;
    color: #444 !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 16px !important;
    line-height: 22px !important;
}

.havop-registration-meta span + span::before {
    content: "·";
    margin: 0 7px;
}

.havop-registration-availability {
    font-weight: 600 !important;
}

.havop-registration-availability-waitlist {
    color: #755c00 !important;
}


/* ---------------------------------------------------------
   Form layout
   --------------------------------------------------------- */

.havop-registration-form {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 771px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.havop-registration-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.havop-registration-field,
.havop-registration-choice-group {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.havop-registration-field::before,
.havop-registration-event-choice::before {
    content: none !important;
    display: none !important;
}


/* ---------------------------------------------------------
   Labels
   --------------------------------------------------------- */

.havop-registration-field > label,
.havop-registration-choice-group > legend {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;

    font-family: 'Poppins', sans-serif !important;
    font-size: 20px !important;
    line-height: 30px !important;
    font-weight: 700 !important;

    color: var(--havop-form-text) !important;
}


/* ---------------------------------------------------------
   Text fields
   --------------------------------------------------------- */

.havop-registration-designed input[type="text"],
.havop-registration-designed input[type="email"],
.havop-registration-designed input[type="tel"],
.havop-registration-designed input[type="number"],
.havop-registration-designed textarea {
    display: block !important;

    width: 100% !important;
    margin: 0 !important;

    border: 0 !important;
    border-radius: 4px !important;
    outline: 0 !important;

    background: var(--havop-form-input) !important;
    color: var(--havop-form-text) !important;

    font-family: 'Poppins', sans-serif !important;
    font-size: 18px !important;
    line-height: 25px !important;
    font-weight: 500 !important;

    box-shadow: none !important;
    appearance: none;
    -webkit-appearance: none;
}

.havop-registration-designed input[type="text"],
.havop-registration-designed input[type="email"],
.havop-registration-designed input[type="tel"],
.havop-registration-designed input[type="number"] {
    height: 51px !important;
    padding: 11px 14px !important;
}

.havop-registration-designed textarea {
    min-height: 142px !important;
    padding: 12px 14px !important;
    resize: vertical !important;
}

.havop-registration-designed input[type="text"]:focus,
.havop-registration-designed input[type="email"]:focus,
.havop-registration-designed input[type="tel"]:focus,
.havop-registration-designed input[type="number"]:focus,
.havop-registration-designed textarea:focus {
    outline: 2px solid var(--havop-form-purple) !important;
    outline-offset: 1px !important;
}


/* ---------------------------------------------------------
   Radio / checkbox choice layouts
   --------------------------------------------------------- */

.havop-registration-choice-list {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.havop-registration-choice-list-inline {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px 33px !important;
}

.havop-registration-subjects .havop-registration-choice-list {
    gap: 8px !important;
}

.havop-registration-choice {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;

    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;

    font-family: 'Poppins', sans-serif !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 25px !important;

    color: var(--havop-form-text) !important;
    cursor: pointer !important;
}

.havop-registration-choice span {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--havop-form-text) !important;
}


/* ---------------------------------------------------------
   Custom radio buttons
   --------------------------------------------------------- */

.havop-registration-designed input[type="radio"] {
    appearance: none !important;
    -webkit-appearance: none !important;

    width: 40px !important;
    height: 40px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 4px solid var(--havop-form-grey) !important;
    border-radius: 50% !important;
    background: #fff !important;

    flex: 0 0 40px !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

.havop-registration-designed input[type="radio"]:checked {
    border-color: var(--havop-form-purple) !important;
    background: radial-gradient(circle at center, var(--havop-form-purple) 0 11.5px, #fff 12px) !important;
}

.havop-registration-designed input[type="radio"]:focus-visible {
    outline: 2px solid var(--havop-form-purple) !important;
    outline-offset: 2px !important;
}


/* ---------------------------------------------------------
   Custom checkboxes
   --------------------------------------------------------- */

.havop-registration-designed input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;

    position: relative !important;

    width: 40px !important;
    height: 40px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 4px solid var(--havop-form-grey) !important;
    border-radius: 4px !important;
    background: #fff !important;

    flex: 0 0 40px !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

.havop-registration-designed input[type="checkbox"]:checked {
    border-color: var(--havop-form-purple) !important;
    background: var(--havop-form-purple) !important;
}

.havop-registration-designed input[type="checkbox"]:checked::after {
    content: "";

    position: absolute;
    left: 11px;
    top: 5px;

    width: 10px;
    height: 18px;

    border: solid #fff;
    border-width: 0 4px 4px 0;

    transform: rotate(45deg);
}

.havop-registration-designed input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--havop-form-purple) !important;
    outline-offset: 2px !important;
}


/* ---------------------------------------------------------
   Event selector
   --------------------------------------------------------- */

.havop-registration-event-choice .havop-registration-choice-list {
    gap: 12px !important;
    max-width: 100% !important;
}

.havop-registration-event-choice .havop-registration-choice {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
}


/* ---------------------------------------------------------
   Privacy
   --------------------------------------------------------- */

.havop-registration-privacy {
    margin-top: 0 !important;
}

.havop-registration-privacy label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;

    margin: 0 !important;

    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
    color: var(--havop-form-text) !important;
}


/* ---------------------------------------------------------
   Notices / errors
   --------------------------------------------------------- */

.havop-registration-notice {
    max-width: 100% !important;
    margin: 0 0 14px !important;
    padding: 10px 12px !important;

    border-radius: 4px !important;

    font-family: 'Poppins', sans-serif !important;
    font-size: 16px !important;
    line-height: 22px !important;
}

.havop-registration-notice-error {
    border: 1px solid #d63638 !important;
    background: #fff2f2 !important;
    color: #7a1515 !important;
}

.havop-registration-error + .havop-registration-error {
    margin-top: 4px !important;
}

.havop-registration-notice-success {
    border: 1px solid #4d8d59 !important;
    background: #f1fff4 !important;
    color: #193d20 !important;
}

.havop-registration-success.havop-registration-designed {
    display: flex !important;
    align-items: flex-start !important;
    gap: 18px !important;
    color: var(--havop-form-text) !important;
}

.havop-registration-success-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    margin-top: 2px !important;
    border-radius: 50% !important;
    background: var(--havop-form-purple) !important;
    color: #fff !important;
    font-size: 28px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
}

.havop-registration-success-body {
    max-width: 680px !important;
}

.havop-registration-success-message,
.havop-registration-success-meta {
    margin: 0 0 10px !important;
    padding: 0 !important;
    color: var(--havop-form-text) !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 18px !important;
    line-height: 25px !important;
    font-weight: 500 !important;
}

.havop-registration-success-message strong {
    font-weight: 700 !important;
}

.havop-registration-success-meta {
    margin-bottom: 0 !important;
    color: #444 !important;
    font-size: 16px !important;
    line-height: 22px !important;
}


/* ---------------------------------------------------------
   Submit
   --------------------------------------------------------- */

.havop-registration-actions {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.havop-registration-submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;

    width: 154px !important;
    min-width: 154px !important;
    height: 41.75px !important;

    margin: 0 !important;
    padding: 12px !important;

    border: 0 !important;
    border-radius: 8px !important;

    background: #000 !important;
    color: #fff !important;

    font-family: 'Poppins', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 19px !important;
    text-align: center !important;
    text-decoration: none !important;

    cursor: pointer !important;
    box-shadow: none !important;
}

.havop-registration-submit:hover,
.havop-registration-submit:focus {
    background: #222 !important;
    color: #fff !important;
}

.havop-registration-submit-icon {
    font-size: 20px !important;
    line-height: 20px !important;
}


/* ---------------------------------------------------------
   Honeypot
   --------------------------------------------------------- */

.havop-registration-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}


/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 900px) {

    .havop-registration-form-wrap.havop-registration-designed {
        max-width: 100% !important;
        padding: 24px 16px 24px 56px !important;
    }

    .havop-registration-form-wrap.havop-registration-designed {
        -webkit-mask-image: radial-gradient(circle at 29.5px 33.5px, transparent 0 9.5px, #000 9.75px);
        mask-image: radial-gradient(circle at 29.5px 33.5px, transparent 0 9.5px, #000 9.75px);
    }

}

@media (max-width: 640px) {

    .havop-registration-form-wrap.havop-registration-designed {
        padding: 22px 14px 22px 48px !important;
    }

    .havop-registration-form-wrap.havop-registration-designed {
        -webkit-mask-image: radial-gradient(circle at 24.5px 30.5px, transparent 0 8.5px, #000 8.75px);
        -webkit-mask-size: 100% 49px;
        mask-image: radial-gradient(circle at 24.5px 30.5px, transparent 0 8.5px, #000 8.75px);
        mask-size: 100% 49px;
    }

    .havop-registration-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .havop-registration-field > label,
    .havop-registration-choice-group > legend {
        font-size: 18px !important;
        line-height: 27px !important;
    }

    .havop-registration-choice {
        font-size: 16px !important;
        line-height: 23px !important;
    }

    .havop-registration-choice-list-inline {
        gap: 8px 24px !important;
    }

    .havop-registration-success.havop-registration-designed {
        gap: 14px !important;
    }

    .havop-registration-success-icon {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        font-size: 24px !important;
    }

}

.havop-scholing-events {
  display: grid;
  gap: 18px;
}
.havop-scholing-event-card {
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  padding: 20px;
  background: #fff;
}
.havop-scholing-event-card h3 { margin-top: 0; }
.havop-event-text-field,
.havop-scholing-event-details {
  margin: 18px 0;
}
.havop-event-text-field h2,
.havop-scholing-event-detail h4 {
  margin: 0 0 8px;
}
.havop-event-text-field-content > :first-child,
.havop-scholing-event-detail > :first-child { margin-top: 0; }
.havop-event-text-field-content > :last-child,
.havop-scholing-event-detail > :last-child { margin-bottom: 0; }
.havop-scholing-event-detail + .havop-scholing-event-detail { margin-top: 14px; }
.havop-scholing-event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-weight: 700;
}
.havop-scholing-event-link,
.havop-scholing-event-register {
  display: inline-block;
  margin-right: 12px;
  font-weight: 700;
}


/* ---------------------------------------------------------
   Nieuwsbrief: balkje op de pagina
   --------------------------------------------------------- */

.havop-nieuwsbrief-balk {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;
    max-width: 406px !important;
    height: 45px !important;
    margin: 0 auto !important;

    background: #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
    overflow: hidden !important;
}

.havop-nieuwsbrief-email {
    flex: 1 !important;
    min-width: 0 !important;
    height: 100% !important;
    padding: 0 0 0 16px !important;

    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;

    font-family: 'Poppins', sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #333 !important;
}

.havop-nieuwsbrief-email::placeholder {
    color: #333 !important;
}

.havop-nieuwsbrief-knop {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 100% !important;
    padding: 0 24px !important;

    border: 0 !important;
    border-radius: 0 !important;
    background: #5853E2 !important;
    color: #fff !important;

    font-family: 'Poppins', sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;

    cursor: pointer !important;
    transition: background-color 0.2s !important;
}

.havop-nieuwsbrief-knop:hover,
.havop-nieuwsbrief-knop:focus {
    background: #4844c9 !important;
    color: #fff !important;
}


/* ---------------------------------------------------------
   Nieuwsbrief: venster
   --------------------------------------------------------- */

.havop-nieuwsbrief-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;

    background: rgba(0, 0, 0, 0.55) !important;
}

.havop-nieuwsbrief-overlay[hidden] {
    display: none !important;
}

body.havop-nieuwsbrief-open {
    overflow: hidden !important;
}

.havop-nieuwsbrief-venster.havop-registration-form-wrap.havop-registration-designed {
    position: relative !important;
    width: 100% !important;
    max-width: 560px !important;
    max-height: calc(100vh - 40px) !important;
    overflow-y: auto !important;

    padding: 28px 24px 28px 63px !important;

    /* Het gat staat midden in de band; de bandhoogte komt uit nieuwsbrief.js,
       zodat het onderste gat niet tegen de rand aan valt. */
    -webkit-mask-image: radial-gradient(circle at 31.5px 50%, transparent 0 9.5px, #000 9.75px) !important;
    -webkit-mask-size: 100% var(--havop-gat-band, 49.13px) !important;
    -webkit-mask-repeat: repeat-y !important;
    mask-image: radial-gradient(circle at 31.5px 50%, transparent 0 9.5px, #000 9.75px) !important;
    mask-size: 100% var(--havop-gat-band, 49.13px) !important;
    mask-repeat: repeat-y !important;
}


/* Velden die nog ingevuld moeten worden */

.havop-nieuwsbrief-venster input.havop-nieuwsbrief-veld-fout {
    background: #fff2f2 !important;
    box-shadow: inset 0 0 0 2px #d63638 !important;
    color: #7a1515 !important;
}

.havop-nieuwsbrief-venster input.havop-nieuwsbrief-veld-fout::placeholder {
    color: #b06a6a !important;
}

.havop-nieuwsbrief-venster input.havop-nieuwsbrief-veld-fout:focus {
    outline: 2px solid #d63638 !important;
    outline-offset: 1px !important;
}

.havop-nieuwsbrief-veldmelding {
    margin: 2px 0 0 !important;
    padding: 0 !important;

    color: #7a1515 !important;

    font-family: 'Poppins', sans-serif !important;
    font-size: 15px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
}

.havop-nieuwsbrief-veldmelding[hidden] {
    display: none !important;
}

.havop-nieuwsbrief-sluiten {
    position: absolute !important;
    top: 10px !important;
    right: 14px !important;

    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;
    color: #6c6c6c !important;

    font-family: 'Poppins', sans-serif !important;
    font-size: 26px !important;
    line-height: 1 !important;

    cursor: pointer !important;
}

.havop-nieuwsbrief-sluiten:hover,
.havop-nieuwsbrief-sluiten:focus {
    color: #000 !important;
}

.havop-nieuwsbrief-venster .havop-registration-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.havop-nieuwsbrief-venster .havop-registration-name-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
}

.havop-nieuwsbrief-gelukt[hidden] {
    display: none !important;
}

@media (max-width: 600px) {
    .havop-nieuwsbrief-venster.havop-registration-form-wrap.havop-registration-designed {
        padding: 24px 18px 24px 52px !important;
    }

    .havop-nieuwsbrief-venster .havop-registration-name-grid {
        grid-template-columns: 1fr !important;
    }
}