/* ─── Drag & Drop Zone Enhancement ─── */

.dropzone-wrap {
  position: relative;
  border: 2px dashed #c9d9f7;
  border-radius: 14px;
  background: linear-gradient(145deg, #f8fbff 0%, #f1f6ff 100%);
  padding: 1.5rem 1rem;
  text-align: center;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
  cursor: pointer;
}

.dropzone-wrap:hover {
  border-color: #93b4f5;
  background: linear-gradient(145deg, #f0f5ff 0%, #e8f0ff 100%);
}

.dropzone-wrap.dropzone-dragover {
  border-color: #2f63f2;
  background: linear-gradient(145deg, #e8f0ff 0%, #dce8ff 100%);
  box-shadow: 0 0 0 4px rgba(47, 99, 242, .1);
}

.dropzone-wrap.dropzone-has-file {
  border-color: #34d399;
  background: linear-gradient(145deg, #ecfdf5 0%, #e8faf0 100%);
  border-style: solid;
}

.dropzone-icon {
  font-size: 2.2rem;
  color: #93b4f5;
  margin-bottom: .5rem;
  transition: color .2s ease, transform .2s ease;
}

.dropzone-dragover .dropzone-icon {
  color: #2f63f2;
  transform: scale(1.15);
}

.dropzone-has-file .dropzone-icon {
  color: #34d399;
}

.dropzone-text {
  font-size: .95rem;
  color: #5f7394;
  margin-bottom: .35rem;
  line-height: 1.4;
}

.dropzone-text strong {
  color: #2f63f2;
  font-weight: 600;
}

.dropzone-dragover .dropzone-text {
  color: #2f63f2;
}

.dropzone-hint {
  font-size: .78rem;
  color: #8899b3;
}

.dropzone-file-name {
  display: none;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  margin-top: .6rem;
  padding: .45rem .75rem;
  background: #fff;
  border: 1px solid #d9e5fb;
  border-radius: 10px;
  font-size: .85rem;
  font-weight: 600;
  color: #22334f;
  word-break: break-all;
}

.dropzone-has-file .dropzone-file-name {
  display: inline-flex;
}

.dropzone-file-name .file-icon {
  color: #2f63f2;
  flex-shrink: 0;
}

.dropzone-file-name .file-remove {
  background: none;
  border: none;
  color: #ef4444;
  cursor: pointer;
  padding: 0 0 0 .3rem;
  font-size: .9rem;
  flex-shrink: 0;
  transition: color .15s;
}

.dropzone-file-name .file-remove:hover {
  color: #dc2626;
}

/* Hide the original file input visually but keep it functional */
.dropzone-wrap input[type="file"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

/* Hide the original input-group when dropzone is active */
.dropzone-original-hidden {
  display: none !important;
}