/* ─── Drop Zone ─── */
.drop-zone {
  width: 100%;
  max-width: 580px;
  min-height: 220px;
  border: 2px dashed #c8c3bb;
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 2.5rem 2rem;
  transition:
    border-color 0.2s ease,
    background   0.2s ease,
    transform    0.15s ease,
    box-shadow   0.2s ease;
}

.drop-zone:hover {
  border-color: #999;
  background: #faf9f7;
}

/* ── dragging over ── */
.drop-zone.is-active {
  border-color: #3b6fd4;
  border-style: solid;
  background: #edf2fd;
  transform: scale(1.015);
  box-shadow: 0 0 0 4px rgba(59, 111, 212, 0.12);
}

/* ── icon circle ── */
.drop-zone__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #f0ede8;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.drop-zone__icon svg {
  width: 26px;
  height: 26px;
  stroke: #888;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  transition: stroke 0.2s ease, transform 0.25s ease;
}

.drop-zone.is-active .drop-zone__icon        { background: #d6e4fb; transform: scale(1.1); }
.drop-zone.is-active .drop-zone__icon svg    { stroke: #3b6fd4; transform: translateY(-3px); }

/* ── text ── */
.drop-zone__label {
  font-size: 15px;
  font-weight: 500;
  color: #333;
  pointer-events: none;
  text-align: center;
  transition: color 0.2s ease;
}

.drop-zone__sub {
  font-size: 13px;
  color: #aaa;
  pointer-events: none;
  text-align: center;
  transition: color 0.2s ease;
}

.drop-zone.is-active .drop-zone__label { color: #3b6fd4; }
.drop-zone.is-active .drop-zone__sub   { color: #7ca0e8; }

/* ── divider ── */
.drop-zone__divider {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 80%;
  pointer-events: none;
}
.drop-zone__divider span { font-size: 12px; color: #ccc; }
.drop-zone__divider::before,
.drop-zone__divider::after { content: ''; flex: 1; height: 1px; background: #e8e4de; }

/* ── browse button ── */
.drop-zone__btn-browse {
  font-size: 13px;
  font-family: inherit;
  padding: 6px 18px;
  border-radius: 6px;
  border: 1.5px solid #c8c3bb;
  background: #fff;
  color: #444;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.drop-zone__btn-browse:hover         { border-color: #3b6fd4; color: #3b6fd4; background: #f3f7fe; }
.drop-zone.is-active .drop-zone__btn-browse { pointer-events: none; opacity: 0; }

/* ── idle vs has-file visibility ── */
.drop-zone__idle     { display: contents; }
.drop-zone__selected { display: none; }

.drop-zone.has-file .drop-zone__idle     { display: none; }
.drop-zone.has-file .drop-zone__selected { display: contents; }

/* ── selected state: filename ── */
.drop-zone__filename {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

.button-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ── process button ── */
.drop-zone__btn-process {
  font-size: 13px;
  font-family: inherit;
  padding: 7px 22px;
  border-radius: 6px;
  border: none;
  background: #3b6fd4;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s;
}
.drop-zone__btn-process:hover { background: #2f5ab8; }
.drop-zone__btn-process:disabled {
  background-color: #999999;
  cursor: not-allowed ;
}
.drop-zone__btn-process:disabled:hover {
  background-color: #aaaaaa;
}

.drop-zone__btn-cancel {
  font-size: 13px;
  font-family: inherit;
  padding: 7px 22px;
  border-radius: 6px;
  border: none;
  background: #d46f3b;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s;
}
.drop-zone__btn-cancel:hover { background: #b85a2f; }
.drop-zone__btn-cancel:disabled {
  background-color: #999999;
  cursor: not-allowed ;
}
.drop-zone__btn-cancel:disabled:hover {
  background-color: #aaaaaa;
}



.drop-zone__preview {
  width: 100%;
/*  max-width: 280px; */
  /* max-height: 200px;*/
  object-fit: contain;  /* show the whole image, no cropping */
  border-radius: 6px;
}