/**
 * contact.css – Kapcsolati adatok + képfeltöltés (4. lépés)
 *
 * Felelős:
 *   - .input-zip (irányítószám stílusú input)
 *   - .upload-header (feltöltési szekció fejléc)
 *   - .upload-area (drag & drop képfeltöltési terület)
 *   - .upload-previews (feltöltött képek rácsa)
 *   - .upload-thumb (egy kép bélyegkép)
 *   - .remove-btn (kép eltávolítása)
 */

/* ==========================================================================
   IRÁNYÍTÓSZÁM INPUT (egyedi stílus a zone kártyán)
   ========================================================================== */

.input-zip {
  width: 100%;
  padding: 13px 16px;
  background: var(--input-bg);
  border: 1.5px solid var(--input-border);
  border-radius: var(--radius-sm);
  font-size: 22px;
  font-family: var(--font-title);
  font-weight: 700;
  letter-spacing: 3px;
  text-align: center;
  color: var(--input-text);
  transition: all var(--transition);
  outline: none;
  -webkit-appearance: none;
}

.input-zip::placeholder {
  color: var(--input-placeholder);
  font-size: 16px;
  letter-spacing: 1px;
  font-weight: 400;
}

.input-zip:focus {
  background: var(--input-bg-focus);
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.15);
}

/* ==========================================================================
   KÉP FELTÖLTÉSI SZEKCIÓ FEJLÉC
   ========================================================================== */

.upload-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.upload-header > i {
  font-size: 20px;
  color: var(--text-red);
  flex-shrink: 0;
  margin-top: 2px;
}

.upload-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 3px;
  font-family: var(--font-body);
}

.upload-sub {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ==========================================================================
   KÉP FELTÖLTÉSI ZÓNA (drag & drop)
   ========================================================================== */

.upload-area {
  border: 2px dashed rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-sm);
  padding: 24px 16px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
}

.upload-area:hover,
.upload-area.drag-over {
  border-color: rgba(200, 16, 46, 0.5);
  background: rgba(200, 16, 46, 0.05);
}

.upload-area-icon {
  font-size: 32px;
  color: var(--text-muted);
  margin-bottom: 8px;
  transition: color var(--transition);
}

.upload-area:hover .upload-area-icon,
.upload-area.drag-over .upload-area-icon {
  color: var(--text-red);
}

.upload-area-text {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.upload-area-hint {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Max feltöltés elérve → letiltott állapot */
.upload-area.max-reached {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

/* ==========================================================================
   FELTÖLTÖTT KÉPEK RÁCS
   ========================================================================== */

.upload-previews {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}

/* Üres állapotban rejtett */
.upload-previews:empty {
  display: none;
}

/* Egy bélyegkép */
.upload-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
}

.upload-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Kép eltávolítása gomb */
.remove-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  background: rgba(0, 0, 0, 0.75);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: white;
  cursor: pointer;
  transition: background var(--transition);
  border: none;
  outline: none;
  z-index: 2;
}

.remove-btn:hover {
  background: var(--red);
}