/* Extracted from legacy pop-up.css (global modal tokens & structure) */
:root {
	--modal-backdrop: rgba(0,0,0,0.40);
	--modal-bg: #ffffff;
	--modal-radius: 14px;
	--modal-shadow: 0 20px 60px rgba(34,0,66,0.25);
	--modal-header-bg: #faf7ff;
	--modal-header-border: #eee6f8;
	--modal-header-color: #32006a;
	--modal-close-color: #5a2ea6;
	--modal-close-hover-bg: #efe6fb;
	--modal-focus-ring: 0 0 0 3px rgba(109,0,199,0.25);
	--modal-padding-x: 20px;
	--modal-padding-y: 16px;
	--modal-max-width-sm: 480px;
	--modal-max-width-md: 720px;
	--modal-max-width-lg: 960px;
	--modal-max-width-default: 920px;
	--modal-transition-duration: 140ms;
	--modal-transition-ease: cubic-bezier(.4,.1,.2,1);
}

.universal-modal, .modal, .pp-modal { position:fixed; inset:0; display:flex; visibility:hidden; opacity:0; align-items:center; justify-content:center; background:var(--modal-backdrop); z-index:1400; transition:opacity var(--modal-transition-duration) var(--modal-transition-ease), visibility 0s linear var(--modal-transition-duration); }
.universal-modal.open, .modal.open, .pp-modal.open, .modal:target { visibility:visible; opacity:1; transition-delay:0s,0s; }
.universal-modal.hidden, .modal.hidden, .pp-modal.hidden { visibility:hidden !important; opacity:0 !important; }
.modal-initially-hidden, .initially-hidden { display:none; }
body.modal-open { overflow:hidden; }

.universal-modal .modal-dialog, .modal .modal-dialog, .pp-modal .pp-dialog { background:var(--modal-bg); max-width:var(--modal-max-width-default); width:calc(100% - 32px); max-height:calc(100vh - 80px); border-radius:var(--modal-radius); box-shadow:var(--modal-shadow); overflow:hidden; display:flex; flex-direction:column; position:relative; opacity:0; transform:translateY(10px) scale(.995); transition:opacity var(--modal-transition-duration) var(--modal-transition-ease), transform var(--modal-transition-duration) var(--modal-transition-ease); will-change:opacity,transform; backface-visibility:hidden; contain:layout paint style; }
.universal-modal.open .modal-dialog, .modal.open .modal-dialog, .pp-modal.open .pp-dialog { opacity:1; transform:translateY(0) scale(1); }
@media (prefers-reduced-motion: reduce){ .universal-modal .modal-dialog, .modal .modal-dialog, .pp-modal .pp-dialog { transition:none; transform:none !important; } }

/* Size variants */
.modal .modal-dialog.modal-size-sm, .universal-modal .modal-dialog.modal-size-sm, .pp-modal .pp-dialog.modal-size-sm { max-width:var(--modal-max-width-sm); }
.modal .modal-dialog.modal-size-md, .universal-modal .modal-dialog.modal-size-md, .pp-modal .pp-dialog.modal-size-md { max-width:var(--modal-max-width-md); }
.modal .modal-dialog.modal-size-lg, .universal-modal .modal-dialog.modal-size-lg, .pp-modal .pp-dialog.modal-size-lg { max-width:var(--modal-max-width-lg); }
.modal .modal-dialog.modal-size-fluid, .universal-modal .modal-dialog.modal-size-fluid, .pp-modal .pp-dialog.modal-size-fluid { max-width:100%; width:calc(100% - 32px); }
.modal .modal-dialog.modal-size-auto, .universal-modal .modal-dialog.modal-size-auto, .pp-modal .pp-dialog.modal-size-auto { width:auto; max-width:none; }

/* Modifiers */
.modal--no-padding .modal-body { padding:0 !important; }
.modal--scroll-body .modal-body { overflow:auto; }
.modal--danger .modal-header { background:#fff5f5; border-bottom-color:#ffe0e0; }
.modal--danger .modal-title { color:#ba1a1a; }
.modal--transparent .modal-dialog { background:transparent; box-shadow:none; }
.modal--wide .modal-dialog { max-width:var(--modal-max-width-lg); }
.modal--narrow .modal-dialog { max-width:var(--modal-max-width-sm); }
.modal--no-shadow .modal-dialog { box-shadow:none; }
.modal--compact-header .modal-header { padding:8px 12px; }
.modal--flush-body .modal-body { padding:0 var(--modal-padding-x) var(--modal-padding-y); }
.modal--center-title .modal-title { text-align:center; width:100%; }
.modal--compact-body .modal-body { padding:12px 16px 16px; }
.modal--compact-body .modal-body form > div:not(.actions-row):not(.modal-footer){ margin-top:10px; }
.modal--compact-body .modal-body .flex-row.mt-6{ margin-top:10px; }
.modal--compact-body .modal-body .mt-6{ margin-top:10px; }
.modal--compact-body .modal-footer{ margin-top:14px; }
@media (max-width: 767px){ .modal--fullscreen-mobile .modal-dialog { width:100% !important; max-width:100% !important; height:100vh; max-height:100vh; border-radius:0; } }

/* Header */
.universal-modal .modal-header, .modal .modal-header, .pp-modal .pp-dialog-header { display:flex; align-items:center; justify-content:space-between; padding:var(--modal-padding-y) var(--modal-padding-x); border-bottom:1px solid var(--modal-header-border); background:var(--modal-header-bg); }
.universal-modal .modal-title, .modal .modal-title, .pp-modal .pp-dialog-title { font-size:1.1rem; font-weight:700; color:var(--modal-header-color); margin:0; }
.universal-modal .modal-close, .modal .modal-close, .pp-modal .pp-dialog-close { appearance:none; border:none; background:transparent; font-size:22px; line-height:1; cursor:pointer; color:var(--modal-close-color); padding:6px 10px; border-radius:8px; margin-left:auto; flex-shrink:0; }
.universal-modal .modal-close:hover, .modal .modal-close:hover, .pp-modal .pp-dialog-close:hover { background:var(--modal-close-hover-bg); }
.universal-modal .modal-close:focus-visible, .modal .modal-close:focus-visible, .pp-modal .pp-dialog-close:focus-visible { outline:none; box-shadow:var(--modal-focus-ring); }

/* Body */
/* Body: remove artificial extra bottom padding; rely on footer own padding for spacing */
.universal-modal .modal-body, .modal .modal-body, .pp-modal .pp-dialog-body { padding:var(--modal-padding-y) var(--modal-padding-x); overflow:auto; flex:1 1 auto; }
/* Wanneer een form de directe child van .modal-dialog is (wrapper pattern) zorgen we dat deze full-height flex column is */
.universal-modal .modal-dialog > form, .modal .modal-dialog > form, .pp-modal .pp-dialog > form { display:flex; flex-direction:column; width:100%; height:100%; }
.universal-modal .modal-dialog > form > .modal-body { flex:1 1 auto; overflow:auto; }

/* Footer (was missing → buttons stonden tegen de rand) */
/* Footer: align exact with header/body interior edges.
   Previously slight perceived mismatch could occur if body scrollbars or custom modal variants added internal wrappers.
   We enforce box-sizing and identical horizontal padding variables so gray bar spans same width visually. */
/* Footer: full bleed background to match header width visually (edge-to-edge) while
   maintaining interior horizontal padding alignment for buttons. */
.universal-modal .modal-footer, .modal .modal-footer, .pp-modal .pp-dialog-footer {
	position: relative;
	margin: 0; /* reset variant margins */
	padding: var(--modal-padding-y) var(--modal-padding-x);
	border-top: 1px solid #eee;
	background: #fafafa;
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	flex-wrap: wrap;
	box-sizing: border-box;
	width: 100%;
}
/* Scrollbar compensation: if body scrolls, we adjust footer padding so button alignment matches body content width.
   JS sets --modal-scrollbar-width and adds .has-scrollbar to .modal-dialog when vertical overflow present. */
/* Scrollbar compensation: shift footer padding when vertical overflow present */
.universal-modal .modal-dialog.has-scrollbar > .modal-footer,
.modal .modal-dialog.has-scrollbar > .modal-footer,
.pp-modal .pp-dialog.has-scrollbar > .pp-dialog-footer { padding-right: calc(var(--modal-padding-x) + var(--modal-scrollbar-width, 0px)); }
/* Zelfde compensatie voor header zodat title + close button lijn houden met body content bij scrollbar */
/* Scrollbar compensatie ook voor header binnen form wrapper */
.universal-modal .modal-dialog.has-scrollbar > .modal-header,
.modal .modal-dialog.has-scrollbar > .modal-header,
.pp-modal .pp-dialog.has-scrollbar > .pp-dialog-header,
/* form wrapper variant */
.universal-modal .modal-dialog.has-scrollbar > form > .modal-header,
.modal .modal-dialog.has-scrollbar > form > .modal-header,
.pp-modal .pp-dialog.has-scrollbar > form > .pp-dialog-header { padding-right: calc(var(--modal-padding-x) + var(--modal-scrollbar-width, 0px)); }

/* Zorg dat header altijd volledige beschikbare breedte pakt (soms nuttig wanneer form padding of legacy styles tussenkomen) */
.universal-modal .modal-header, .modal .modal-header, .pp-modal .pp-dialog-header { width:100%; box-sizing:border-box; }
@media (max-width: 767px){
	.universal-modal .modal-footer, .modal .modal-footer, .pp-modal .pp-dialog-footer { gap:10px; }
}

/* Generic form layout inside modals */
.universal-modal .form-grid { display:flex; flex-direction:column; gap:16px; }
.universal-modal .form-row { display:flex; flex-direction:column; gap:6px; }
.universal-modal .form-row.two-col { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.universal-modal .form-col { display:flex; flex-direction:column; gap:6px; }
.universal-modal label { font-weight:600; color:#333; font-size:.95em; }
.universal-modal input, .universal-modal select, .universal-modal textarea { padding:10px 12px; border:1px solid #ddd; border-radius:8px; font-size:1em; font-family:inherit; transition:border-color .2s, box-shadow .2s; }
.universal-modal input:focus, .universal-modal select:focus, .universal-modal textarea:focus { outline:none; border-color:#6d00c7; box-shadow:0 0 0 3px rgba(109, 0, 199, 0.1); }
.universal-modal input.input-disabled { background:#f5f5f5; color:#666; cursor:not-allowed; }
.universal-modal .number-input-group { display:flex; gap:8px; }
.universal-modal .number-input { flex:1; }
.universal-modal .suffix-input { width:60px; flex-shrink:0; }
.universal-modal .form-actions { display:flex; justify-content:flex-end; gap:12px; margin-top:20px; padding-top:16px; border-top:1px solid #eee; }
/* Removed per design system: rely on global .btn sizing & variants to avoid divergence */
/* .universal-modal .btn { padding:10px 20px; border-radius:8px; font-size:1em; font-weight:600; cursor:pointer; transition:all .2s; } */
.universal-modal .password-strength-meter { margin-top:8px; }

/* Specific sizing override: Partner wachtwoord wijzigen modal */
#wachtwoordModal .modal-dialog { max-width:600px; }

/* Password modal specific layout */
#wachtwoordModal .wachtwoord-body { display:flex; flex-direction:column; gap:18px; }
#wachtwoordModal .pw-intro { margin:0; font-size:.95rem; line-height:1.4; color:#444; }
#wachtwoordModal .pw-fields { display:grid; grid-template-columns:1fr 1fr; gap:16px 20px; }
#wachtwoordModal .pw-field.full { grid-column:1 / -1; }
#wachtwoordModal .pw-field.half { min-width:0; }
#wachtwoordModal .pw-field label { font-weight:600; font-size:.9rem; color:#333; margin-bottom:4px; display:block; }
#wachtwoordModal .pw-meta { display:flex; flex-direction:column; gap:12px; }
#wachtwoordModal .pw-rules { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:6px 14px; font-size:.75rem; line-height:1.25; }
#wachtwoordModal .pw-rules li { position:relative; padding-left:18px; color:#555; }
#wachtwoordModal .pw-rules li::before { content:"\2022"; position:absolute; left:4px; top:0; color:#888; font-weight:700; }
#wachtwoordModal .pw-rules li.is-valid { color:#257a2b; }
#wachtwoordModal .pw-rules li.is-valid::before { content:"\2713"; color:#1c6a22; left:0; }
#wachtwoordModal .password-strength-meter { min-height:10px; font-size:.7rem; color:#444; }
@media (max-width:640px){
	#wachtwoordModal .pw-fields { grid-template-columns:1fr; }
	#wachtwoordModal .pw-rules { grid-template-columns:1fr 1fr; }
}

/* New address modal layout */
#newAddressModal .modal-dialog { max-width:620px; }
#newAddressModal .new-address-body { display:flex; flex-direction:column; gap:20px; }
#newAddressModal .addr-intro { margin:0; font-size:.95rem; line-height:1.4; color:#444; }
#newAddressModal .addr-fieldset { border:0; margin:0; padding:0; }
#newAddressModal .addr-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:16px 18px; }
#newAddressModal .addr-field { display:flex; flex-direction:column; gap:4px; min-width:0; }
#newAddressModal .addr-field.full { grid-column:1 / -1; }
#newAddressModal .addr-field.street { grid-column:1 / span 4; }
#newAddressModal .addr-field.number { grid-column:5 / span 1; }
#newAddressModal .addr-field.addition { grid-column:6 / span 1; }
#newAddressModal .addr-field.pc { grid-column:1 / span 2; }
#newAddressModal .addr-field.plaats { grid-column:3 / span 2; }
#newAddressModal .addr-field.land { grid-column:5 / span 2; }
#newAddressModal .addr-field label { font-weight:600; font-size:.85rem; color:#333; }
#newAddressModal .addr-field.addition input { text-transform:uppercase; }
#newAddressModal .addr-rules { font-size:.7rem; color:#555; }
#newAddressModal .addr-rules-list { margin:0; padding-left:16px; display:grid; gap:4px; }
#newAddressModal .addr-rules-list li { line-height:1.3; }
@media (max-width:680px){
	#newAddressModal .addr-grid { grid-template-columns:repeat(4,1fr); }
	#newAddressModal .addr-field.street { grid-column:1 / span 2; }
	#newAddressModal .addr-field.number { grid-column:3 / span 1; }
	#newAddressModal .addr-field.addition { grid-column:4 / span 1; }
	#newAddressModal .addr-field.pc { grid-column:1 / span 2; }
	#newAddressModal .addr-field.plaats { grid-column:3 / span 2; }
	#newAddressModal .addr-field.land { grid-column:1 / span 4; }
}
@media (max-width:520px){
	#newAddressModal .addr-grid { grid-template-columns:1fr 1fr; }
	#newAddressModal .addr-field.street { grid-column:1 / span 2; }
	#newAddressModal .addr-field.number { grid-column:1 / span 1; }
	#newAddressModal .addr-field.addition { grid-column:2 / span 1; }
	#newAddressModal .number-row { max-width:320px; }
	#newAddressModal .addr-field.pc { grid-column:1 / span 1; }
	#newAddressModal .addr-field.plaats { grid-column:2 / span 1; }
	#newAddressModal .addr-field.land { grid-column:1 / span 2; }
	#newAddressModal .addr-field.full { grid-column:1 / span 2; }
}