/* Kadence variable mapping */
.kadence-dropzone{
  --dz-border: var(--global-palette8, #cbd5e1);
  --dz-bg: var(--global-palette7);
  --dz-text: var(--global-palette4, #334155);
  --dz-subtext: var(--global-palette4, #334155);
  --dz-accent: var(--global-palette1, #6366f1);
  --dz-btn-bg: var(--global-palette9, #e5e7eb);
}

/* Hide original input */
.mkd-hidden{
  position:absolute!important; width:1px!important; height:1px!important;
  padding:0!important; margin:-1px!important; overflow:hidden!important;
  clip:rect(0,0,0,0)!important; border:0!important;
}

/* Wrapper */
.kadence-dropzone{
  border:2px dashed var(--dz-border);
  border-radius: var(--kfdz-radius, var(--kb-form-border-radius)); /* no hard px fallback */
  padding:16px;
  background: var(--dz-bg);
  text-align:center;
  cursor:pointer;
  transition: background-color .15s ease, border-color .15s ease;
  outline:none; position:relative;
}
.kadence-dropzone.is-dragover{ border-color: var(--dz-accent); }

.dz-label{ margin:0; font-size:14px; color:var(--dz-text); }
.dz-helper{ margin-top:6px; font-size:12px; color:var(--dz-subtext); }

/* Empty state centering */
.kadence-dropzone.is-empty{
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.kadence-dropzone.is-empty .dz-label,
.kadence-dropzone.is-empty .dz-helper{ text-align:center; }

/* Icon */
.kadence-dropzone .dz-icon{ margin:0 auto; display:none; }
.kadence-dropzone.is-empty .dz-icon{ display:block; }
.dz-icon-svg{ width: var(--dz-icon-size, 44px); height: var(--dz-icon-size, 44px); color: var(--dz-text); }

/* Grid */
.dz-preview-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(96px,1fr));
  gap:10px; margin-top:12px;
}
@media (max-width: 480px) {
  .kadence-dropzone .dz-preview-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
}

/* Thumbs */
.dz-thumb{ position:relative; border:1px solid var(--dz-border); border-radius: var(--kfdz-radius, var(--kb-form-border-radius)); background:#fff; overflow:hidden; aspect-ratio:1/1; }
@supports not (aspect-ratio: 1/1){ .dz-thumb{ height:0; padding-top:100%; } .dz-thumb>*{ position:absolute; inset:0; } }
.dz-thumb-img{ width:100%; height:100%; object-fit:cover; display:block; }
.dz-thumb-icon{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:28px; }

/* Remove button — pure CSS X */
.dz-thumb-remove{
  position:absolute; top:8px; right:8px;
  width:28px; height:28px; border-radius: var(--kfdz-radius, var(--kb-form-border-radius)); border:none;
  display:flex; align-items:center; justify-content:center;
  background: var(--dz-btn-bg);
  color: var(--dz-text);
  cursor:pointer; font-size:0; line-height:0;
}
.dz-thumb-remove::before,
.dz-thumb-remove::after{
  content:""; position:absolute; left:50%; top:50%;
  width:16px; height:2px; background: currentColor; border-radius:2px;
  transform-origin:center;
}
.dz-thumb-remove::before{ transform: translate(-50%,-50%) rotate(45deg); }
.dz-thumb-remove::after { transform: translate(-50%,-50%) rotate(-45deg); }
.dz-thumb-remove:hover{ filter:brightness(.98); }
.dz-thumb-remove:focus{ outline:2px solid var(--dz-accent); outline-offset:2px; }

/* Toast */
.dz-toast{
  position:absolute; bottom:8px; left:50%; transform:translateX(-50%);
  background: rgba(15,23,42,.95); color:#fff; font-size:12px; padding:6px 10px;
  border-radius:8px; opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.dz-toast.show{ opacity:1; }