/* ================================
   DROP ZONE – STAŁY BORDER + GRADIENT
   ================================ */

:root{
  --dz-radius: 60px;
  --dz-border: 4px;  /* grubość ramki */
  --dz-bg: #fffaf3;
  --dz-grad: linear-gradient(135deg,#ffb74d 0%,#ff9800 45%,#fb8c00 70%,#ffb74d 100%);
}

.drop-zone{
  position: relative;
  border-radius: var(--dz-radius);
  min-height: 100px;
  /* padding: 14px; */
  cursor: pointer;
  overflow: hidden;
  background: transparent;
  isolation: isolate;
}

/* RAMKA */
.drop-zone::before{
  content:"";
  position:absolute;
  inset: 0;
  z-index: 0;
  border-radius: var(--dz-radius);
  background: var(--dz-grad);

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  padding: var(--dz-border);
  pointer-events: none;
}

/* WNĘTRZE */
.drop-zone::after{
  content:"";
  position:absolute;
  inset: var(--dz-border); /* zawsze zgodne z grubością ramki */
  border-radius: var(--dz-radius);
  background: var(--dz-bg);
  z-index: 1;
  pointer-events: none;
}

/* hover */
.drop-zone:hover::before{
  box-shadow: 0 0 0 6px rgba(255,152,0,0.15);
}

/* ================================
   OVERLAY – TEKST + IKONA
   ================================ */

.drop-zone__overlay{
  position: absolute;
  inset: 0;
  z-index: 3;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;

  text-align: center;
  padding: 15px;
  pointer-events: none;

  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
}

.drop-zone__hint{
  color:#6b6b6b;
  font-size: 13px;        /* wielkość zdania */
  line-height: 1.25;

  white-space: nowrap;    /* zawsze 1 linia */
  padding: 0;        /* odstęp L/P dla zdania */
  overflow: visible;
  text-overflow: clip;
  max-width: 100%;
}

.drop-zone__icon{
  width: 40px;
  height: 40px;
  display:flex;
  align-items:center;
  justify-content:center;

  border-radius: 6px;
  background: linear-gradient(180deg,#ffb74d 0%,#ff9800 60%,#fb8c00 100%);
  color: #fff;
  box-shadow: 0 10px 24px rgba(255,152,0,0.35), inset 0 -2px 0 rgba(0,0,0,0.15);
}

/* ================================
   PREVIEW – MINIATURY (DZIAŁAJĄCA WERSJA)
   ================================ */

.preview-grid{
  position: relative;
  z-index: 2;              
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.preview-grid .preview-item{
  width: 70px;
  text-align: center;
  font-size: 11px;
  position: relative;
  flex: 0 0 auto;        
}

.preview-grid .preview-thumb{
  width: 70px;
  height: 50px;
  border-radius: 6px;
  border: 1px solid #ddd;
  background: #fff;

  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.preview-grid .preview-thumb img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
}

.preview-grid .preview-name{
  margin-top: 4px;
  text-align: center;
  word-break: break-all;
}

.preview-grid .preview-icon{
  font-size: 28px;
  color: #666;
}

.preview-grid .preview-remove{
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #d9534f;
  color: #fff;
  font-size: 12px;
  line-height: 18px;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* ================================
   INFO / WARNING
   ================================ */

.upload-info,
.upload-warning{
  margin-top: 6px;
  font-size: 12px;
}

.upload-info{ color:#555; }
.upload-warning{ color:#b00020; }

/* ================================
   TRYB: SĄ PLIKI (PANEL + WYŚRODKOWANIE)
   ================================ */

.drop-zone.has-files{
  display: flex;
  align-items: center;  
  /* gap: 20px; */
  padding: 0 20px;
}

/* miniatury mają zająć resztę miejsca */
.drop-zone.has-files .preview-grid{
  flex: 1 1 auto;
  min-width: 0;
  align-self: center;
}

/* overlay staje się panelem */
.drop-zone.has-files .drop-zone__overlay{
  position: relative;
  inset: auto;
  z-index: 4;
  /* width: 241px;
  min-width: 241px; */
  padding: 10px 20px 10px 10px;

}
.drop-zone.has-files .drop-zone__overlay .drop-zone__icon{
  width: 40px;
  height: 40px;
  border-radius: 6px;
}





/* ================================
   LAYOUT: DROPZONE + BUTTON (jak na screenie)
   ================================ */


 
.dz-layout{
  display: flex;
  gap: 18px;              
  align-items: stretch;   

}

.dz-layout--with-btn .drop-zone{
  flex: 1 1 auto;        
  min-width: 0;
}


/* ================================
   BUTTON 
   ================================ */

.dz-upload-btn{
  margin-top: 15px;
  width: 200px;
  height: 60px;
  align-self: stretch;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border-radius: var(--dz-radius);
  padding-right: 46px;
  border: 4px solid transparent;
  background:
    linear-gradient(
      180deg,
      #ffe7c4 0%,
      #ffbf5a 35%,
      #ff9800 65%,
      #fb8c00 100%
    ) padding-box,
    var(--dz-grad) border-box;

  color: #fff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.3px;

  display: flex;
  align-items: center;
  justify-content: center;

  transition: filter .25s, transform .15s;
}


.dz-upload-btn:hover{
  border: var(--dz-border) solid transparent;
  box-shadow: 0 0 0 6px rgba(255,152,0,0.15);
}


/* POŁYSK */
.dz-upload-btn::before{
  content:"";
  position: absolute;
  left: 0;
  right: 0;
  top:0;
  height: 45%;
  border-radius: calc(var(--dz-radius) - 4px);
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.9) 0%,
    rgba(255,255,255,0) 100%
  );
  pointer-events: none;
}

.dz-upload-btn:hover{
  filter: brightness(1.06);
}

.dz-upload-btn:active{
  transform: translateY(1px);
}

/* STRZAŁKA PO PRAWEJ – NA KOŃCU TEKSTU */
.dz-upload-btn::after{
  content:"";
  position: absolute;
  right: 22px;    
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 14px solid #ffffff;
  pointer-events: none;
}

.containerDragDrop {
  width: 100%;
  clear: both;
}