/* === ICE Cleaning – overrides voor CF7 Drag & Drop (codedropz) === */
:root{ --accent:#FF5000; --ink:#112d46; }

.contactformulier .message-row{ display:grid; grid-template-columns:2fr 1fr; gap:20px; }
@media (max-width:900px){ .contactformulier .message-row{ grid-template-columns:1fr; } }

/* Dropzone kaart */
.contactformulier .codedropz-upload-handler{
  border:2px dashed var(--accent) !important;
  border-radius:8px !important;
  background:rgba(255,255,255,.04) !important;
  min-height:140px !important;           /* zelfde hoogte als textarea */
  display:flex; align-items:center;
}
.contactformulier .codedropz-upload-container{ padding:16px 18px !important; color:#fff; }

/* Dropzone teksten/knop */
.contactformulier .codedropz-upload-inner{ text-align:center; }
.contactformulier .codedropz-upload-inner h3{
  margin:0 0 6px !important; font-size:16px !important; line-height:1.3 !important; color:#fff !important;
}
.contactformulier .codedropz-upload-inner p,
.contactformulier .codedropz-upload-inner span{ color:#cfe3f1 !important; }
.contactformulier .codedropz-btn-wrap a.cd-upload-btn{
  display:inline-block; padding:8px 12px !important;
  border:2px solid var(--accent) !important; border-radius:6px !important;
  background:transparent !important; color:#fff !important; font-weight:700;
  text-decoration:none !important;
}
.contactformulier .codedropz-btn-wrap a.cd-upload-btn:hover{
  background:var(--accent) !important; color:#fff !important;
}

/* Actieve drag state */
.contactformulier .codedropz-dragover{ border-color:var(--accent) !important; }

/* Lijst met uploads */
.contactformulier .dnd-upload-status{ padding:8px 0 !important; border-top:1px dashed rgba(255,255,255,.2) !important; }
.contactformulier .dnd-upload-image{
  width:40px; height:40px; border-radius:50% !important;
  border:1px solid rgba(255,255,255,.35) !important; background:#1c3246 !important;
}
.contactformulier .dnd-upload-details .name{ color:#fff !important; padding:4px 60px 4px 0 !important; }
.contactformulier .dnd-upload-details .name em{ color:#9dc0d6 !important; font-weight:600 !important; }
.contactformulier .dnd-progress-bar{ background:#334a5f !important; height:14px !important; }
.contactformulier .dnd-progress-bar span{ background:var(--accent) !important; color:#fff !important; }
.contactformulier .dnd-upload-counter{ color:#9dc0d6 !important; }

/* Verwijderen-knop pictogram duidelijker op donker */
.contactformulier .dnd-upload-details .remove-file{ top:6px !important; }
.contactformulier .dnd-upload-details .remove-file span:after{
  filter: invert(1) brightness(2); opacity:.9;    /* wit icoon */
}

/* Zorg dat de filekolom netjes vult */
.contactformulier .file-field .wpcf7-form-control-wrap,
.contactformulier .file-field .wpcf7-form-control-wrap > *{ height:100%; }

/* Checkbox lijning blijft goed */
.contactformulier .checkbox-field{ display:flex; gap:10px; align-items:flex-start; }
.contactformulier .checkbox-field input[type="checkbox"]{ margin-top:3px; }
/* Alleen bestandsnaam + X voor DnD (codedropz) */
.contactformulier .dnd-upload-image,
.contactformulier .dnd-progress-bar,
.contactformulier .dnd-upload-counter,
.contactformulier .dnd-upload-details .name em { /* size weg, laat staan als je 'm wil */
  display:none !important;
}

.contactformulier .dnd-upload-status{
  padding:6px 0 !important;
  align-items:center !important;
  border-top:1px solid rgba(255,255,255,.12) !important;
}

.contactformulier .dnd-upload-details{
  padding-left:0 !important;
  width:100% !important;
  position:static !important;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
}

.contactformulier .dnd-upload-details .name{
  flex:1 1 auto !important;
  padding:0 !important;
  color:#fff !important;
  font-size:14px !important;
  line-height:1.4 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.contactformulier .dnd-upload-details .remove-file{
  position:static !important;
  flex:0 0 auto !important;
  margin-left:auto !important;
  opacity:1 !important;
}

.contactformulier .dnd-upload-details .remove-file span:after{
  filter: invert(1) brightness(2); /* wit icoon op donker */
  opacity:.9;
}

/* Dropzone rand/hoogte matching */
.contactformulier .codedropz-upload-handler{
  border:2px dashed #FF5000 !important;
  border-radius:8px !important;
  background:rgba(255,255,255,.04) !important;
  min-height:140px !important;
}
/* ========== Compacte lijst: alleen bestandsnaam + X ========== */
.contactformulier .codedropz-upload-wrapper{ --sep:rgba(255,255,255,.14); }

/* verberg alles wat rommel geeft */
.contactformulier .dnd-upload-image,
.contactformulier .dnd-progress-bar,
.contactformulier .dnd-upload-counter{ display:none !important; }

/* dropzone zelf */
.contactformulier .codedropz-upload-handler{
  border:2px dashed #FF5000 !important;
  border-radius:8px !important;
  background:rgba(255,255,255,.04) !important;
  min-height:140px !important;
}

/* 1 regel per bestand */
.contactformulier .dnd-upload-status{
  display:grid !important;
  grid-template-columns: 1fr auto;   /* naam | delete */
  align-items:center !important;
  gap:12px !important;
  padding:8px 0 !important;
  margin:0 !important;
  border:0 !important;
}
.contactformulier .dnd-upload-status + .dnd-upload-status{
  border-top:1px solid var(--sep) !important;   /* subtiele scheiding */
}

/* naamstijl */
.contactformulier .dnd-upload-details{
  padding:0 !important;
  width:auto !important;
  position:static !important;
  display:block !important;
}
.contactformulier .dnd-upload-details .name{
  color:#fff !important;
  font-size:14px !important;
  line-height:1.5 !important;
  padding:0 !important;
  margin:0 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.contactformulier .dnd-upload-details .name em{ display:none !important; } /* bestandsgrootte weg */

/* delete-knop rechts */
.contactformulier .dnd-upload-details .remove-file{
  position:static !important;
  margin-left:auto !important;
  opacity:1 !important;
}
.contactformulier .dnd-upload-details .remove-file span:after{
  filter:invert(1) brightness(2);
  opacity:.9;
}
/* optioneel: lijst binnen vaste hoogte met scroll */
.contactformulier .codedropz-upload-wrapper{
  max-height:360px; overflow:auto;
  padding-right:8px;   /* ruimte voor scrollbar */
}
/* Delete Status */
.dnd-icon-remove.deleting { font-size:12px; color:#000; font-weight: 500; position: relative; top:-3px; }
.dnd-icon-remove.deleting:after { display:none!important; }

.wpcf7-drag-n-drop-file.d-none {
	display:none;
	opacity:0;
	visibility:hidden;
	position:absolute;
	top:0;
}

/* Upload Status */
.dnd-upload-status {
	display:flex;
	padding:4px 0;
	align-items:center;
	position:relative;
}

/* Progress bar - Image */
.dnd-upload-status .dnd-upload-image {
	width:40px;
	height:40px;
	border:1px solid #a5a5a5;
	text-align:center;
	border-radius:100%;
	position:relative;
}
.dnd-upload-status .dnd-upload-image span.file {
    background-image: url("data:image/svg+xml,%0A%3Csvg width='18' height='23' viewBox='0 0 18 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.569 0.659576H0.5V23H18V6.09053L12.569 0.659576ZM12.7872 1.93075L16.7288 5.87234H12.7872V1.93075ZM1.24468 22.2553V1.40426H12.0426V6.61702H17.2553V22.2553H1.24468Z' fill='%235C5B5B'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-size: 100%;
    height: 21px;
    width: 16px;
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -moz-transform : translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

/* Progress bar - Image Details ( Name and Size ) */
.dnd-upload-status .dnd-upload-details {
	padding-left:10px;
	width: calc(100% - 40px);
}
.dnd-upload-status .dnd-upload-details .name {color:#016d98; padding:4px 0; padding-right:60px; display:flex; }
.dnd-upload-status .dnd-upload-details .name span { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; position: relative; padding-right:10px; }
.dnd-upload-status .dnd-upload-details .name em {color:#444242;	font-weight:700; }

/* Remove Upload File */
.dnd-upload-status .dnd-upload-details .remove-file {
	position:absolute;
	right:0;
	top:10px;
	text-decoration:none;
	box-shadow:none;
	outline:none;
    opacity:1;
}
.dnd-upload-status .dnd-upload-details .remove-file span:after {
    content: '';
    width:15px;
    height:15px;
    display: block;
    background-repeat:no-repeat;
    background-size:100%;
    background-image: url("data:image/svg+xml,%3Csvg width='35' height='35' viewBox='0 0 35 35' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.5 0C7.83499 0 0 7.83499 0 17.5C0 27.165 7.83499 35 17.5 35C27.165 35 35 27.165 35 17.5C34.9888 7.83965 27.1604 0.0112198 17.5 0ZM17.5 33.871C8.45857 33.871 1.12903 26.5414 1.12903 17.5C1.12903 8.45857 8.45857 1.12903 17.5 1.12903C26.5414 1.12903 33.871 8.45857 33.871 17.5C33.861 26.5373 26.5373 33.861 17.5 33.871Z' fill='black'/%3E%3Cpath d='M25.4834 9.51661C25.2629 9.29624 24.9056 9.29624 24.6852 9.51661L17.5 16.7018L10.3148 9.51661C10.0983 9.29236 9.74087 9.28615 9.51661 9.50271C9.29236 9.71927 9.28615 10.0767 9.50271 10.3009C9.50723 10.3057 9.51188 10.3103 9.51661 10.3148L16.7018 17.5L9.51661 24.6852C9.29236 24.9018 9.28615 25.2591 9.50278 25.4834C9.71941 25.7076 10.0768 25.7139 10.301 25.4972C10.3057 25.4927 10.3103 25.488 10.3148 25.4834L17.5 18.2982L24.6852 25.4834C24.9094 25.7 25.2668 25.6938 25.4834 25.4696C25.6947 25.2508 25.6947 24.9039 25.4834 24.6852L18.2982 17.5L25.4834 10.3148C25.7038 10.0944 25.7038 9.73705 25.4834 9.51661Z' fill='black'/%3E%3C/svg%3E%0A");
}
.dnd-upload-status.in-progress .remove-file { opacity:0.2;}

.dnd-upload-status .dnd-upload-details span.has-error { color:#f50505; }

/* Progress Loading */
.dnd-upload-status .dnd-upload-details .dnd-progress-bar {
	display: block;
    border-radius: 5px;
    overflow: hidden;
    background: #565555;
    height: 14px;
}
.dnd-upload-status .dnd-upload-details .dnd-progress-bar span {
    background: #4CAF50;
    display: block;
    font-size: 11px;
    text-align: right;
    color: #fff;
    height: 100%;
	width:0;
	line-height:14px;
}
.dnd-upload-status .dnd-upload-details .dnd-progress-bar span.complete { width:100%!important; padding-right:5px; }
.dnd-upload-counter { position:absolute; right:5px; bottom:3px; font-size:12px; }

/* CodeDropz Upload Plugin */
.codedropz-upload-handler {
	border:2px dashed #c5c5c5;
	border-radius:5px;
	margin-bottom:10px;
	position:relative;
}
.codedropz-upload-container {
	padding:15px 20px;
}

.codedropz-upload-inner {
	overflow:hidden;
	width:100%;
	/*white-space: nowrap;*/
	text-align:center;
	text-overflow: ellipsis;
	font-weight:inherit;
}
.codedropz-upload-inner .codedropz-btn-wrap a.cd-upload-btn {
	text-decoration:none;
	box-shadow:none;
}
.codedropz-upload-inner h3 {
	margin:5px 0;
	font-size:30px;
	line-height:32px;
    word-break:break-word;
}

/* Add border on dragenter, drag etc */
.codedropz-dragover {
	border-color:#6b6a6a;
}

.codedropz-upload-wrapper span.has-error-msg {
	display:inline-block;
	color:#ff0000;
	padding:5px 0;
	font-style:italic;
}

/* Jquery Validation For Contact Form 7 */
.wpcf7-form label.error-new {
    color: #900;
    font-size: 11px;
    float: none;
    padding-left: 5px;
}
.wpcf7-form .codedropz-upload-wrapper.invalid .codedropz-upload-handler{
	border-bottom-color: #900;
    border-bottom-style: solid;
}
/* END : Jquery Validation CF7 */

@media screen and (max-width: 767px) {
	.dnd-upload-status .dnd-upload-details .name em { font-weight:normal; }
	.dnd-upload-status .dnd-upload-details .name { padding-right:60px; }
	.codedropz-upload-inner h3 { font-size:22px; }
}